/* 더그린한의원 디자인 시스템 — 방향 A(메디컬 화이트) + C(듀얼 트랙)
   main.css 를 덮어쓰되 .tg-* 네임스페이스를 기본으로 쓴다.
   nav.css(GNB·푸터)가 먼저 로드되고 이 파일이 마지막이다. */

:root {
  /* 뉴트럴 — 순수 회색 대신 그린 쪽으로 살짝 기울인 값 */
  --tg-ink:      #14201b;
  --tg-ink-2:    #33413a;
  --tg-body:     #56655d;
  --tg-mute:     #7d8a83;
  --tg-mute-2:   #9aa8a1;
  --tg-hair:     #e8ecea;
  --tg-hair-2:   #f2f5f4;
  --tg-ground:   #ffffff;
  --tg-ground-2: #f7f9f8;

  /* 두 트랙 — 밝기·채도를 맞추고 색상만 돌린다 */
  --tg-med:        #137a52;   /* oklch(.47 .10 160) 근사 — 메디컬 */
  --tg-med-deep:   #0f6544;
  --tg-med-soft:   #eaf5f0;
  --tg-beauty:     #9a586e;   /* oklch(.47 .09 350) 근사 — 뷰티 */
  --tg-beauty-deep:#82485c;
  --tg-beauty-soft:#f7eff2;

  /* 현재 트랙(기본 = 메디컬). body.track-beauty 에서 뒤집힌다 */
  --tg-accent:      var(--tg-med);
  --tg-accent-deep: var(--tg-med-deep);
  --tg-accent-soft: var(--tg-med-soft);
}
body.track-beauty {
  --tg-accent:      var(--tg-beauty);
  --tg-accent-deep: var(--tg-beauty-deep);
  --tg-accent-soft: var(--tg-beauty-soft);
}

/* 본문 서체 — main.css 의 body.lang-kr(0,1,1)을 이겨야 하므로 같은 구체성으로 선언.
   jp·cn·th 등은 해당 언어 폰트를 그대로 쓰게 둔다. */
body { background: var(--tg-ground); color: var(--tg-ink); }
body, body.lang-kr, body.lang-en {
  font-family: 'Pretendard', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
}

/* GNB 악센트를 현재 트랙에 맞춘다 */
.gnb-link::after { background: var(--tg-accent); }
.gnb-item:hover > .gnb-link,
.gnb-item.on > .gnb-link { color: var(--tg-accent); }
.gnb-panel li a:hover { background: var(--tg-accent-soft); color: var(--tg-accent-deep); }
/* 피부·뷰티센터 항목만 로즈로 — 트랙이 나뉘어 있음을 메뉴에서 먼저 보여준다 */
.gnb-item[data-track="beauty"]:hover > .gnb-link,
.gnb-item[data-track="beauty"].on > .gnb-link { color: var(--tg-beauty); }
.gnb-item[data-track="beauty"] > .gnb-link::after { background: var(--tg-beauty); }
.gnb-item[data-track="beauty"] .gnb-panel li a:hover { background: var(--tg-beauty-soft); color: var(--tg-beauty-deep); }

/* ─────────────────────────────────────────────
   홈
   ───────────────────────────────────────────── */
.tg-wrap { max-width: 1600px; margin: 0 auto; padding: 0 24px; }

/* 히어로 */
.tg-hero { padding-block: 76px 68px; border-bottom: 1px solid var(--tg-hair); }
.tg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 940px) { .tg-hero-grid { grid-template-columns: 1.35fr 1fr; gap: 56px; } }
.tg-eyebrow {
  margin: 0 0 18px; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; color: var(--tg-med);
}
.tg-h1 {
  margin: 0 0 20px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.28;
  font-weight: 700; letter-spacing: -.025em; text-wrap: balance; word-break: keep-all;
}
.tg-lede {
  margin: 0 0 32px; max-width: 54ch; font-size: clamp(15px, 1.7vw, 16.5px);
  line-height: 1.78; color: var(--tg-body); word-break: keep-all;
}
.tg-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.tg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: 4px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.tg-btn-solid { background: var(--tg-med); color: #fff; border: 1px solid var(--tg-med); }
.tg-btn-solid:hover { background: var(--tg-med-deep); border-color: var(--tg-med-deep); color: #fff; text-decoration: none; }
.tg-btn-ghost { border: 1px solid #cfd8d3; color: var(--tg-ink); background: transparent; }
.tg-btn-ghost:hover { border-color: var(--tg-med); color: var(--tg-med); text-decoration: none; }

/* 진료시간 카드 — 텍스트로 노출(AI·검색이 읽는다) */
.tg-hours { border: 1px solid #e2e8e5; border-radius: 6px; padding: 28px 30px; background: #fbfdfc; }
.tg-hours-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.tg-dot { width: 7px; height: 7px; border-radius: 50%; background: #2bb673; flex-shrink: 0; }
.tg-hours-head span { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--tg-med); }
.tg-hours dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 13px 20px; font-size: 14.5px; }
.tg-hours dt { color: var(--tg-mute); white-space: nowrap; }
.tg-hours dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-hours-note {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px dashed #d8e2dd;
  font-size: 13.5px; line-height: 1.7; color: var(--tg-body);
}
.tg-hours-note b { color: var(--tg-ink); font-weight: 600; }

/* 섹션 공통 */
.tg-sec { padding-block: 64px; }
.tg-sec.alt { background: var(--tg-ground-2); border-block: 1px solid var(--tg-hair); }
.tg-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 30px; }
.tg-h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -.022em; word-break: keep-all; }
.tg-sub { margin: 8px 0 0; font-size: 15px; color: var(--tg-mute); word-break: keep-all; }
.tg-more { font-size: 13.5px; color: var(--tg-mute); text-decoration: none; }
.tg-more:hover { color: var(--tg-med); }

/* 센터 카드 — 뷰티만 로즈 */
.tg-centers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 620px)  { .tg-centers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tg-centers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tg-center {
  display: block; border: 1px solid var(--tg-hair); border-top: 3px solid var(--tg-med);
  padding: 26px 22px 28px; text-decoration: none; color: inherit; background: #fff;
  transition: border-color .15s, background .15s;
}
.tg-center:hover { background: var(--tg-med-soft); text-decoration: none; }
.tg-center.is-beauty { border-top-color: var(--tg-beauty); }
.tg-center.is-beauty:hover { background: var(--tg-beauty-soft); }
.tg-center-no { font-size: 11px; letter-spacing: .12em; color: var(--tg-mute-2); margin-bottom: 12px; }
.tg-center-name { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 10px; }
.tg-center-sub { font-size: 13.5px; line-height: 1.7; color: var(--tg-mute); word-break: keep-all; }

/* 대표 처방 2종 */
.tg-herbs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 860px) { .tg-herbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-herb { background: #fff; border: 1px solid #e4eae7; padding: 32px 34px; text-decoration: none; color: inherit; display: block; }
.tg-herb:hover { border-color: var(--tg-med); text-decoration: none; }
.tg-herb-tag {
  display: inline-block; padding: 5px 11px; border-radius: 3px;
  background: var(--tg-med-soft); color: var(--tg-med-deep);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; margin-bottom: 16px;
}
.tg-herb-name { font-size: clamp(22px, 3vw, 26px); font-weight: 700; letter-spacing: -.022em; margin-bottom: 10px; }
.tg-herb-desc { margin: 0 0 20px; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-chip { padding: 6px 11px; border: 1px solid #dde5e1; font-size: 12.5px; color: var(--tg-body); }

/* 증상으로 찾기 */
.tg-symptoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tg-symptom {
  display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: 0 16px; border: 1px solid var(--tg-hair); background: #fff;
  font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--tg-ink-2);
  transition: border-color .15s, color .15s;
}
.tg-symptom:hover { border-color: var(--tg-med); color: var(--tg-med); text-decoration: none; }
.tg-symptom svg { flex-shrink: 0; color: var(--tg-mute); }
.tg-symptom:hover svg { color: var(--tg-med); }

/* 안전성 4단계 */
.tg-safety { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 620px)  { .tg-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tg-safety { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tg-step { padding: 24px 20px; border: 1px solid var(--tg-hair); background: #fff; }
.tg-step svg { color: var(--tg-med); margin-bottom: 14px; display: block; }
.tg-step-name { font-size: 15.5px; font-weight: 600; margin-bottom: 7px; }
.tg-step-desc { font-size: 13px; line-height: 1.65; color: var(--tg-mute); word-break: keep-all; }

/* 소식 2열 */
.tg-feeds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 860px) { .tg-feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-feed { border: 1px solid var(--tg-hair); padding: 26px 26px 22px; background: #fff; }
.tg-feed-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.tg-feed-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.tg-feed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tg-feed li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--tg-hair-2); }
.tg-feed li:last-child { border-bottom: 0; }
.tg-feed li a { font-size: 14.5px; color: var(--tg-ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-feed li a:hover { color: var(--tg-med); }
.tg-feed time { font-size: 12.5px; color: var(--tg-mute-2); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.tg-empty { padding: 11px 0; font-size: 14px; color: var(--tg-mute-2); }

/* 예약·상담 4경로 */
.tg-contact { background: var(--tg-ink); color: #fff; }
.tg-contact .tg-h2 { color: #fff; }
.tg-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
@media (min-width: 700px)  { .tg-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tg-contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tg-route {
  display: flex; flex-direction: column; gap: 6px; min-height: 96px;
  padding: 22px 22px; border: 1px solid #2e3a34; text-decoration: none; color: #fff;
  transition: background .15s, border-color .15s;
}
.tg-route:hover { background: #1c2a24; border-color: var(--tg-med); color: #fff; text-decoration: none; }
.tg-route b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.tg-route span { font-size: 13px; color: #93a09a; }
.tg-route.is-tel b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

@media (max-width: 560px) {
  .tg-hero { padding-block: 48px 44px; }
  .tg-sec { padding-block: 44px; }
  .tg-herb { padding: 24px 22px; }
  .tg-wrap { padding: 0 18px; }
}

/* ── 로고 ──────────────────────────────────────
   가로형 로고(500×168). 영문 라인이 작아 헤더를 키워 로고를 크게 쓴다.
   --header-h 는 nav.css 의 모바일 메뉴 위치 계산에도 쓰이므로 변수로 올린다. */
:root { --header-h: 80px; }
@media (max-width: 900px) { :root { --header-h: 68px; } }
.site-header .logo { display: flex; align-items: center; padding: 0; }
.site-header .logo img {
  display: block; height: 52px; width: auto;
  max-width: none;           /* main.css 의 img{max-width:100%} 로 눌리지 않게 */
}
@media (max-width: 900px) { .site-header .logo img { height: 44px; } }
@media (max-width: 420px) { .site-header .logo img { height: 38px; } }

.foot-brand { line-height: 0; }
.foot-brand img { display: block; height: 46px; width: auto; max-width: none; }

/* ═══════════════════════════════════════════════
   하위 페이지 템플릿
   서브 히어로 + 형제 탭 + 처방 4단 카드.
   일로한방병원 벤치마킹(2026-09-14): 형제 메뉴 탭과 고정 4단 본문 틀만 차용,
   색·서체·슬라이더는 차용하지 않는다.
   ═══════════════════════════════════════════════ */

/* ── 서브 히어로 ── */
.pg-hero {
  background: var(--tg-ground-2);
  border-bottom: 1px solid var(--tg-hair);
  padding-block: 52px 0;
}
.pg-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px; font-size: 12.5px; color: var(--tg-mute-2);
}
.pg-crumb a { color: var(--tg-mute); text-decoration: none; }
.pg-crumb a:hover { color: var(--tg-accent); }
.pg-crumb svg { flex-shrink: 0; opacity: .55; }
.pg-crumb .now { color: var(--tg-ink-2); font-weight: 600; }
.pg-title {
  margin: 0; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.3;
  font-weight: 700; letter-spacing: -.025em; word-break: keep-all; text-wrap: balance;
}
.pg-lede {
  margin: 16px 0 0; max-width: 58ch; font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.8; color: var(--tg-body); word-break: keep-all;
}

/* ── 형제 메뉴 탭 ── */
.pg-tabs { margin-top: 30px; overflow-x: auto; scrollbar-width: none; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tabs ul {
  display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;
  min-width: max-content;
}
.pg-tabs a {
  display: block; padding: 13px 18px 14px; white-space: nowrap;
  font-size: 14.5px; color: var(--tg-mute); text-decoration: none;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.pg-tabs a:hover { color: var(--tg-ink-2); text-decoration: none; }
.pg-tabs a.on { color: var(--tg-accent); font-weight: 600; border-bottom-color: var(--tg-accent); }

/* ── 본문 공통 ── */
.pg-body { padding-block: 56px 72px; }
.pg-body > * + * { margin-top: 0; }
.pg-intro {
  max-width: 62ch; margin: 0 auto 48px; text-align: center;
  font-size: clamp(15px, 1.7vw, 17px); line-height: 1.85; color: var(--tg-body);
  word-break: keep-all;
}
.pg-h2 {
  margin: 0 0 8px; font-size: clamp(20px, 2.6vw, 25px); font-weight: 700;
  letter-spacing: -.022em; word-break: keep-all;
}
.pg-h2-sub { margin: 0 0 28px; font-size: 14.5px; color: var(--tg-mute); word-break: keep-all; }

/* ── 처방 카드 4단 ── */
.rx-list { display: flex; flex-direction: column; gap: 28px; }
.rx {
  border: 1px solid var(--tg-hair); border-top: 3px solid var(--tg-accent);
  background: #fff;
}
.rx-head { padding: 30px 32px 26px; border-bottom: 1px solid var(--tg-hair-2); }
.rx-no {
  display: inline-block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--tg-accent);
  font-variant-numeric: tabular-nums;
}
.rx-name {
  margin: 0; font-size: clamp(21px, 2.8vw, 26px); font-weight: 700;
  letter-spacing: -.022em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
}
.rx-name small { font-size: 14px; font-weight: 500; color: var(--tg-mute-2); letter-spacing: 0; }
.rx-sum {
  margin: 13px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.8;
  color: var(--tg-body); word-break: keep-all;
}

/* 2·3단 */
.rx-cols { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .rx-cols { grid-template-columns: 1fr 1.45fr; } }
.rx-panel { padding: 28px 32px 30px; }
@media (min-width: 880px) { .rx-panel + .rx-panel { border-left: 1px solid var(--tg-hair-2); } }
@media (max-width: 879px) { .rx-panel + .rx-panel { border-top: 1px solid var(--tg-hair-2); } }
.rx-label {
  margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--tg-mute); text-transform: uppercase;
}
.rx-for { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rx-for li {
  position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.7;
  color: var(--tg-ink-2); word-break: keep-all;
}
.rx-for li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--tg-accent); opacity: .5;
}
.rx-feat { margin: 0 0 18px; font-size: 14.5px; line-height: 1.85; color: var(--tg-body); word-break: keep-all; }
.rx-feat:last-child { margin-bottom: 0; }
.rx-feat b { color: var(--tg-ink); font-weight: 600; }
.rx-herbs {
  margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px;
  padding-top: 18px; border-top: 1px dashed var(--tg-hair);
}
.rx-herbs dt { font-size: 13.5px; font-weight: 600; color: var(--tg-ink-2); white-space: nowrap; }
.rx-herbs dd { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--tg-mute); word-break: keep-all; }

/* 4단 — 복용·조제 안내 */
.rx-dose {
  padding: 22px 32px 24px; background: var(--tg-accent-soft);
  border-top: 1px solid var(--tg-hair-2);
}
.rx-dose .rx-label { color: var(--tg-accent-deep); margin-bottom: 10px; }
.rx-dose p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.rx-dose p + p { margin-top: 8px; }

/* 근거·출전 — 접어둔다 */
.rx-src { border-top: 1px solid var(--tg-hair-2); }
.rx-src > summary {
  padding: 16px 32px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--tg-mute);
  display: flex; align-items: center; gap: 8px;
}
.rx-src > summary::-webkit-details-marker { display: none; }
.rx-src > summary::after {
  content: "+"; margin-left: auto; font-size: 16px; color: var(--tg-mute-2); font-weight: 400;
}
.rx-src[open] > summary::after { content: "−"; }
.rx-src > summary:hover { color: var(--tg-accent); }
.rx-src-body { padding: 4px 32px 26px; }
.rx-src-body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.8; color: var(--tg-body); word-break: keep-all; }
.rx-src-body p:last-child { margin-bottom: 0; }
.rx-src-body cite { display: block; margin-top: 8px; font-size: 12.5px; font-style: normal; color: var(--tg-mute-2); }
.rx-src-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 14px; }
.rx-src-table th, .rx-src-table td { padding: 9px 12px; border: 1px solid var(--tg-hair); text-align: left; word-break: keep-all; }
.rx-src-table th { background: var(--tg-hair-2); font-weight: 600; color: var(--tg-ink-2); }
.rx-src-table td { color: var(--tg-body); font-variant-numeric: tabular-nums; }
.rx-src-wrap { overflow-x: auto; }

/* 안내 박스 */
.pg-note {
  margin-top: 36px; padding: 20px 24px; border-left: 3px solid var(--tg-mute-2);
  background: var(--tg-hair-2); font-size: 13.5px; line-height: 1.8; color: var(--tg-body);
  word-break: keep-all;
}
.pg-note b { color: var(--tg-ink-2); font-weight: 600; }

/* 페이지 하단 상담 유도 */
.pg-cta {
  margin-top: 48px; padding: 34px 32px; border: 1px solid var(--tg-hair);
  background: var(--tg-ground-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.pg-cta-txt h3 { margin: 0 0 7px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; word-break: keep-all; }
.pg-cta-txt p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--tg-mute); word-break: keep-all; }
.pg-cta .tg-cta { flex-shrink: 0; }
.pg-cta .tg-btn-solid { background: var(--tg-accent); border-color: var(--tg-accent); }
.pg-cta .tg-btn-solid:hover { background: var(--tg-accent-deep); border-color: var(--tg-accent-deep); }
.pg-cta .tg-btn-ghost:hover { border-color: var(--tg-accent); color: var(--tg-accent); }

@media (max-width: 560px) {
  .pg-hero { padding-block: 36px 0; }
  .pg-body { padding-block: 40px 52px; }
  .rx-head { padding: 24px 22px 22px; }
  .rx-panel { padding: 22px 22px 24px; }
  .rx-dose { padding: 20px 22px 22px; }
  .rx-src > summary { padding: 15px 22px; }
  .rx-src-body { padding: 4px 22px 22px; }
  .pg-cta { padding: 26px 22px; }
}

/* 3단 설명 블록(골절 회복 단계 등) — .tg-safety 는 4열이라 3개짜리는 이걸 쓴다 */
.pg-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 12px; }
@media (min-width: 820px) { .pg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-step { padding: 24px 24px 26px; border: 1px solid var(--tg-hair); background: #fff; }
.pg-step-no {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--tg-accent);
  display: block; margin-bottom: 11px; font-variant-numeric: tabular-nums;
}
.pg-step h3 { margin: 0 0 9px; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.pg-step p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }

/* 섹션 간격 */
.pg-sec { margin-bottom: 56px; }
.pg-sec:last-of-type { margin-bottom: 0; }

/* 생활관리 등 번호 리스트 */
.pg-tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .pg-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-tips li { padding: 20px 22px; border: 1px solid var(--tg-hair); background: #fff; }
.pg-tips b { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 600; letter-spacing: -.015em; word-break: keep-all; }
.pg-tips span { font-size: 13.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }

/* ── FAQ 아코디언 ── */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--tg-hair); }
.faq { border-bottom: 1px solid var(--tg-hair); background: #fff; }
.faq > summary {
  display: flex; align-items: baseline; gap: 16px; cursor: pointer; list-style: none;
  padding: 24px 52px 24px 4px; position: relative;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 11px; height: 11px;
  margin-top: -7px; border-right: 2px solid var(--tg-mute-2); border-bottom: 2px solid var(--tg-mute-2);
  transform: rotate(45deg); transition: transform .18s, border-color .18s;
}
.faq[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--tg-accent); }
.faq > summary:hover .faq-subject { color: var(--tg-accent); }
.faq-q {
  flex-shrink: 0; width: 34px; font-size: 15px; font-weight: 700; color: var(--tg-accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.faq-subject {
  font-size: clamp(15.5px, 1.8vw, 17px); font-weight: 600; line-height: 1.6;
  letter-spacing: -.018em; color: var(--tg-ink); word-break: keep-all;
  transition: color .15s;
}
.faq[open] .faq-subject { color: var(--tg-accent-deep); }
.faq-a { padding: 2px 52px 30px 54px; }
.faq-a p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.85; color: var(--tg-body); word-break: keep-all; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a b { color: var(--tg-ink); font-weight: 600; }
.faq-a ul { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.faq-a ul li {
  position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.75;
  color: var(--tg-ink-2); word-break: keep-all;
}
.faq-a ul li::before {
  content: ""; position: absolute; left: 2px; top: .66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--tg-accent); opacity: .5;
}
.faq-a dl {
  margin: 0 0 14px; max-width: 520px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px;
  padding: 16px 18px; background: var(--tg-ground-2); border: 1px solid var(--tg-hair);
}
.faq-a dt { font-size: 13.5px; color: var(--tg-mute); white-space: nowrap; }
.faq-a dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--tg-ink-2); font-variant-numeric: tabular-nums; }
.faq-a .faq-note {
  margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--tg-mute-2);
  background: var(--tg-hair-2); font-size: 13px; line-height: 1.75; color: var(--tg-body);
}
.faq-a a { color: var(--tg-accent-deep); }

@media (max-width: 560px) {
  .faq > summary { padding: 20px 40px 20px 2px; gap: 11px; }
  .faq-q { width: 28px; font-size: 14px; }
  .faq-a { padding: 2px 8px 26px 41px; }
}

/* ── 아코디언 변형 — 부위별/질문별 (FAQ 스킨 재사용, 라벨만 다름) ── */
.faq-part {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  background: var(--tg-accent-soft); color: var(--tg-accent-deep);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  align-self: center;
}
.faq-list.tight .faq-a { padding-left: 4px; }
@media (min-width: 561px) { .faq-list.tight .faq-a { padding-left: 32px; } }

/* ── 6단계 프로그램 ── */
.s6 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .s6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s6-group { border: 1px solid var(--tg-hair); background: #fff; display: flex; flex-direction: column; }
.s6-head {
  padding: 16px 22px; background: var(--tg-accent); color: #fff;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.s6-head b { font-size: 12px; font-weight: 700; letter-spacing: .1em; opacity: .8; font-variant-numeric: tabular-nums; }
.s6-head span { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.s6-item { padding: 22px; border-top: 1px solid var(--tg-hair-2); }
.s6-item:first-of-type { border-top: 0; }
.s6-no { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--tg-mute-2); display: block; margin-bottom: 8px; }
.s6-item h3 { margin: 0 0 9px; font-size: 17px; font-weight: 700; letter-spacing: -.018em; }
.s6-item p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }

/* ── 치료별 상세 카드 ── */
.tx-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 840px) { .tx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tx { border: 1px solid var(--tg-hair); border-left: 3px solid var(--tg-accent); background: #fff; padding: 26px 26px 24px; }
.tx h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.018em; }
.tx p { margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: var(--tg-body); word-break: keep-all; }
.tx p:last-child { margin-bottom: 0; }
.tx b { color: var(--tg-ink); font-weight: 600; }
.tx-spec { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tx-spec span {
  padding: 5px 10px; border: 1px solid var(--tg-hair); background: var(--tg-ground-2);
  font-size: 12px; color: var(--tg-ink-2); font-variant-numeric: tabular-nums;
}

/* ── 대상 목록 박스 ── */
.pg-box { border: 1px solid var(--tg-hair); background: #fff; padding: 30px 32px; }
.pg-box .rx-for { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .pg-box .rx-for { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-box { padding: 24px 22px; } }

/* ═══════════════════════════════════════════════
   본문 타이포 — 기본 17px / weight 300 (2026-09-14 확정)
   main.css 의 body(16px)와 body.lang-kr 를 이기려면 같은 구체성이 필요하다.
   본문 17 / 보조 15 / 캡션 13.5 의 3단으로 내려간다.
   ═══════════════════════════════════════════════ */
body, body.lang-kr, body.lang-en { font-size: 17px; font-weight: 300; line-height: 1.75; }

/* 300 은 가늘어서 강조가 묻힌다. 본문 안의 강조는 600 으로 확실히 띄운다 */
.pg-body b, .pg-body strong, .faq-a b, .faq-a strong,
.tg-hero b, .tg-hero strong { font-weight: 600; }

/* ── 본문 17px ── */
.pg-intro   { font-size: 17px; font-weight: 300; line-height: 1.85; }
.pg-lede    { font-size: 17px; font-weight: 300; line-height: 1.8; max-width: 60ch; }
.tg-lede    { font-size: 17px; font-weight: 300; line-height: 1.8; }
.rx-sum     { font-size: 17px; font-weight: 300; line-height: 1.8; }
.rx-feat    { font-size: 17px; font-weight: 300; line-height: 1.85; }
.rx-for li  { font-size: 17px; font-weight: 300; }
.faq-a p    { font-size: 17px; font-weight: 300; line-height: 1.85; }
.faq-a ul li{ font-size: 17px; font-weight: 300; }
.tx p       { font-size: 17px; font-weight: 300; line-height: 1.85; }
.tg-herb-desc { font-size: 17px; font-weight: 300; line-height: 1.8; }
.post-body  { font-size: 17px; font-weight: 300; line-height: 1.85; }

/* ── 보조 15px — 카드 안 설명문 ── */
.pg-h2-sub    { font-size: 15px; font-weight: 300; line-height: 1.7; }
.pg-step p    { font-size: 15px; font-weight: 300; line-height: 1.75; }
.s6-item p    { font-size: 15px; font-weight: 300; line-height: 1.75; }
.pg-tips span { font-size: 15px; font-weight: 300; line-height: 1.75; }
.pg-note      { font-size: 15px; font-weight: 300; line-height: 1.8; }
.pg-box .rx-for li { font-size: 15.5px; }
.tg-center-sub, .tg-step-desc, .tg-sub { font-size: 15px; font-weight: 300; line-height: 1.7; }
.pg-cta-txt p { font-size: 15px; font-weight: 300; }
.rx-herbs dt  { font-size: 15px; }
.rx-herbs dd  { font-size: 15px; font-weight: 300; line-height: 1.7; }
.faq-a dt     { font-size: 15px; font-weight: 300; }
.faq-a dd     { font-size: 15px; }
.rx-src-body p { font-size: 15px; font-weight: 300; line-height: 1.8; }

/* ── 캡션 13.5px — 출처·고지·스펙 ── */
.faq-a .faq-note { font-size: 14px; font-weight: 300; }
.rx-src-body cite { font-size: 13.5px; font-weight: 300; }
.rx-src-table { font-size: 13.5px; }
.tx-spec span { font-size: 13px; }

/* 제목은 300 을 물려받으면 안 된다 — 명시된 굵기를 유지 */
.tg-h1, .tg-h2, .pg-title, .pg-h2, .rx-name, .s6-item h3, .tx h3,
.pg-step h3, .faq-subject, .tg-center-name, .tg-herb-name, .pg-cta-txt h3 { font-weight: 700; }
.faq-subject, .s6-item h3, .tx h3, .pg-step h3 { font-weight: 600; }
.pg-tips b { font-weight: 600; }

/* 폭이 넓어지면 17px 한 줄이 너무 길어진다 — 읽기 폭을 잡아 준다 */
.pg-body .pg-intro { max-width: 64ch; }

/* ═══════════════════════════════════════════════
   컨테이너 1600px (2026-09-14 고객 지시)
   main.css 의 --max-w(1300) 가 header/footer .container 를 잡고 있다.
   ═══════════════════════════════════════════════ */
:root { --max-w: 1600px; }

/* ═══════════════════════════════════════════════
   히어로 이미지 슬라이더 3장
   ═══════════════════════════════════════════════ */
/* 1600px 에서는 [본문 | 이미지 | 진료시간] 3단으로 벌린다 */
@media (min-width: 1300px) {
  .tg-hero-grid { grid-template-columns: 1.15fr 1fr 0.78fr; gap: 44px; align-items: stretch; }
}
@media (min-width: 940px) and (max-width: 1299px) {
  .tg-hero-grid { grid-template-columns: 1.25fr 1fr; }
  .tg-slider { grid-column: 1 / -1; order: 3; }
}
.tg-hero-grid > :first-child { align-self: center; }

.tg-slider {
  position: relative; overflow: hidden; border-radius: 6px;
  background: var(--tg-hair-2); min-height: 260px;
  aspect-ratio: 16 / 11;
}
@media (min-width: 940px) and (max-width: 1299px) { .tg-slider { aspect-ratio: 21 / 8; } }
.tg-slides { position: absolute; inset: 0; }
.tg-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.tg-slide.on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.tg-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 54px 26px 22px; color: #fff;
  font-size: 17px; font-weight: 500; letter-spacing: -.018em; word-break: keep-all;
  background: linear-gradient(to top, rgba(10,20,16,.62), rgba(10,20,16,0));
}

/* 도트 */
.tg-dots {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  display: flex; gap: 7px;
}
.tg-dot-btn {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255,255,255,.45);
  transition: background .2s, width .2s;
}
.tg-dot-btn:hover { background: rgba(255,255,255,.75); }
.tg-dot-btn.on { background: #fff; width: 22px; border-radius: 5px; }
.tg-dot-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 모션을 줄이도록 설정한 사용자에게는 전환 애니메이션과 자동재생을 끈다(JS 에서도 멈춘다) */
@media (prefers-reduced-motion: reduce) {
  .tg-slide { transition: none; }
}

@media (max-width: 939px) {
  .tg-slider { aspect-ratio: 16 / 10; }
  .tg-slide figcaption { font-size: 15.5px; padding: 44px 20px 18px; }
}

/* 컨테이너를 1600 으로 넓히면서 긴 문단의 한 줄이 지나치게 길어졌다.
   한국어는 한 줄 35~45자가 편하다 — 17px 기준 78ch ≈ 710px. */
.faq-a > p, .faq-a > ul, .faq-a > .faq-note { max-width: 78ch; }
.rx-sum, .pg-h2-sub { max-width: 80ch; }
.pg-note { max-width: 96ch; }
.tx p, .rx-feat { max-width: 72ch; }

/* ── GNB 3단계 — 드롭다운 안의 소분류 ── */
.gnb-panel li.has-sub > a { font-weight: 400; }  /* 하위 있음 표시는 + 버튼이 한다 */
.gnb-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 12px; border-left: 1px solid var(--tg-hair); }
.gnb-sub li a {
  display: block; padding: 7px 10px; font-size: 13.5px; font-weight: 300;
  color: var(--tg-mute); text-decoration: none; word-break: keep-all; line-height: 1.5;
}
.gnb-sub li a:hover { color: var(--tg-accent-deep); background: var(--tg-accent-soft); }
.gnb-item[data-track="beauty"] .gnb-sub li a:hover { color: var(--tg-beauty-deep); background: var(--tg-beauty-soft); }

/* ═══════════════════════════════════════════════
   피부·뷰티 공통 하단 구좌 — 보유장비
   (고객 제작가이드 2026-09-14 5항)
   ═══════════════════════════════════════════════ */
.eq { padding-block: 60px 72px; background: var(--tg-ground-2); border-top: 1px solid var(--tg-hair); }
.eq-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--tg-accent); }
.eq .pg-h2-sub { margin-bottom: 30px; }

.eq-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .eq-body { grid-template-columns: 224px minmax(0, 1fr); gap: 32px; align-items: start; } }

/* 탭 — 데스크톱은 좌측 세로, 모바일은 가로 스크롤 */
.eq-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.eq-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .eq-tabs { flex-direction: column; overflow: visible; gap: 6px; } }
.eq-tab {
  flex-shrink: 0; padding: 14px 18px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--tg-hair); background: #fff; color: var(--tg-body);
  font-size: 15px; font-weight: 500; text-align: left; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.eq-tab:hover { border-color: var(--tg-accent); color: var(--tg-accent-deep); }
.eq-tab.on { background: var(--tg-accent); border-color: var(--tg-accent); color: #fff; font-weight: 600; }
.eq-tab:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; }

.eq-panel { background: #fff; border: 1px solid var(--tg-hair); padding: 30px 32px; }
.eq-group + .eq-group { margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--tg-hair); }
.eq-group-name {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--tg-accent-deep); text-transform: uppercase;
}
.eq-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .eq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eq-list li { display: flex; flex-direction: column; gap: 5px; padding: 15px 17px; background: var(--tg-ground-2); border: 1px solid var(--tg-hair-2); }
.eq-list li b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--tg-ink); }
.eq-list li span { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.eq-empty { margin: 0; font-size: 15px; font-weight: 300; color: var(--tg-mute); }
.eq-note {
  margin: 22px 0 0; padding: 16px 20px; border-left: 3px solid var(--tg-mute-2);
  background: var(--tg-hair-2); font-size: 14px; font-weight: 300; line-height: 1.8;
  color: var(--tg-body); word-break: keep-all; max-width: 96ch;
}
@media (max-width: 560px) {
  .eq { padding-block: 44px 52px; }
  .eq-panel { padding: 24px 22px; }
  .eq-tab { padding: 12px 15px; font-size: 14px; }
}

/* ── 치료 카드 6종 (순서가 아니라 선택지 — 번호를 붙이지 않는다) ── */
.tx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px)  { .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .tx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 진료 프로세스 STEP 1~5 ── */
.pr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; counter-reset: pr; }
@media (min-width: 760px)  { .pr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pr { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pr-step { position: relative; padding: 24px 20px 26px; border: 1px solid var(--tg-hair); background: #fff; }
.pr-step::before {
  content: "STEP " counter(pr, decimal-leading-zero); counter-increment: pr;
  display: block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--tg-accent);
  font-variant-numeric: tabular-nums;
}
.pr-step h3 { margin: 0 0 9px; font-size: 16.5px; font-weight: 600; letter-spacing: -.018em; word-break: keep-all; }
.pr-step p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }

/* ── 소분류 선택 카드 2장 ── */
.pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 820px) { .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-card {
  display: block; padding: 32px 34px 34px; text-decoration: none; color: inherit;
  border: 1px solid var(--tg-hair); border-top: 3px solid var(--tg-accent); background: #fff;
  transition: background .15s, border-color .15s;
}
.pick-card:hover { background: var(--tg-accent-soft); text-decoration: none; }
.pick-no { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--tg-accent); display: block; margin-bottom: 12px; }
.pick-card h3 { margin: 0 0 12px; font-size: clamp(19px, 2.3vw, 23px); font-weight: 700; letter-spacing: -.02em; word-break: keep-all; }
.pick-card p { margin: 0 0 16px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tg-body); word-break: keep-all; }
.pick-more { font-size: 14px; font-weight: 600; color: var(--tg-accent-deep); }

/* ── 체크리스트 ── */
.chk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 760px)  { .chk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chk li {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--tg-hair);
  font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all;
}
.chk li::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; border-radius: 3px;
  border: 1.5px solid var(--tg-accent); background: var(--tg-accent-soft);
}

/* ── 시술별 카드 ── */
.proc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px)  { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proc-card { border: 1px solid var(--tg-hair); background: #fff; padding: 26px 28px 28px; }
.proc-card h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; letter-spacing: -.018em; }
.proc-label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--tg-mute); }
.proc-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.proc-card ul li {
  position: relative; padding-left: 18px; font-size: 15px; font-weight: 300; line-height: 1.65;
  color: var(--tg-ink-2); word-break: keep-all;
}
.proc-card ul li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--tg-accent); opacity: .55;
}
.proc-desc { padding-top: 16px; border-top: 1px dashed var(--tg-hair); }
.proc-card .proc-desc { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tg-body); word-break: keep-all; }

/* ── 응급 안내 ── */
.alert { margin-top: 40px; padding: 26px 28px; border: 1px solid #e4cdd2; background: #fdf7f8; }
body:not(.track-beauty) .alert { border-color: #d9e3de; background: #f6faf8; }
.alert h3 { margin: 0 0 12px; font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; color: var(--tg-ink); }
.alert p { margin: 0 0 12px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tg-body); word-break: keep-all; max-width: 92ch; }
.alert p:last-child { margin-bottom: 0; }
.alert b { font-weight: 600; color: var(--tg-ink); }

/* ── 비교표 ── */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.cmp th, .cmp td { padding: 13px 16px; border: 1px solid var(--tg-hair); text-align: left; word-break: keep-all; vertical-align: top; }
.cmp thead th { background: var(--tg-accent-soft); color: var(--tg-accent-deep); font-weight: 600; font-size: 14.5px; }
.cmp tbody th { background: var(--tg-ground-2); font-weight: 600; color: var(--tg-ink-2); white-space: nowrap; font-size: 14.5px; }
.cmp td { font-weight: 300; color: var(--tg-body); line-height: 1.7; }

/* ── GNB 소분류 아코디언 — 중분류 옆 + 버튼으로 펼친다 ──────────
   기존 .gnb-acc(대분류용 모바일 토글)와 같은 +/− 모양을 쓰되,
   이쪽은 데스크톱 드롭다운 안에서도 보인다. */
.gnb-panel li.has-sub { position: relative; }
.gnb-panel li.has-sub > a { padding-right: 42px; }

.gnb-sub-acc {
  position: absolute; top: 0; right: 4px;
  width: 34px; height: 38px; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.gnb-sub-acc::before,
.gnb-sub-acc::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.5px; background: var(--tg-mute);
  transform: translate(-50%, -50%);
  transition: transform .22s ease, background .15s;
}
.gnb-sub-acc::after { transform: translate(-50%, -50%) rotate(90deg); }
.gnb-panel li.has-sub.open > .gnb-sub-acc::after { transform: translate(-50%, -50%) rotate(0deg); }
.gnb-sub-acc:hover::before,
.gnb-sub-acc:hover::after { background: var(--tg-accent); }
.gnb-sub-acc:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: -2px; border-radius: 3px; }

/* 기본은 접힌 상태 */
.gnb-panel li.has-sub > .gnb-sub { display: none; }
.gnb-panel li.has-sub.open > .gnb-sub { display: block; }

@media (max-width: 900px) {
  .gnb-sub-acc { height: 44px; right: 8px; width: 40px; }
  .gnb-panel li.has-sub > a { padding-right: 52px; }
  .gnb-sub-acc::before, .gnb-sub-acc::after { width: 13px; }
}

/* ── GNB 타이포 (2026-09-15 고객 지시) ───────────────────────
   굵기 — 대메뉴 500 / 중메뉴 400 / 소메뉴 300. 크기 — 18 / 17 / 15.5px.
   nav.css(.gnb-link 16px/700)를 이기려면 같은 구체성이면 충분하다 — tg.css 가 나중에 로드된다. */
.gnb-link { font-size: 18px; font-weight: 500; padding: 20px 20px; }

/* 대메뉴는 항목이 5개라 1200~1400px 구간에서 줄이 좁아진다 — 단계적으로 줄인다 */
@media (max-width: 1400px) { .gnb-link { font-size: 17px; padding: 20px 15px; } }
@media (max-width: 1200px) { .gnb-link { font-size: 16px; padding: 20px 11px; } }

/* 중분류 */
.gnb-panel { min-width: 262px; }
.gnb-panel li a { font-size: 17px; font-weight: 400; padding: 13px 18px; }
.gnb-panel li.has-sub > a { font-weight: 400; }  /* 하위 있음 표시는 + 버튼이 한다 */

/* 소분류 */
.gnb-sub li a { font-size: 15.5px; font-weight: 300; padding: 9px 12px; }

/* 모바일 메뉴 — 데스크톱 축소 미디어쿼리에 눌리지 않게 다시 키운다 */
@media (max-width: 900px) {
  .gnb-link { font-size: 18px; font-weight: 500; padding: 17px 20px; }
  .gnb-panel li a { font-size: 17px; }
  .gnb-sub li a { font-size: 16px; }
}

/* ═══════════════════════════════════════════════
   전체메뉴(사이트맵) 오버레이 — 2026-09-15
   헤더 아이콘 클릭 → 3단계 메뉴 전체 노출
   ═══════════════════════════════════════════════ */
.sm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin: 0;
  border: 1px solid var(--tg-hair); border-radius: 6px; background: #fff;
  color: var(--tg-ink-2); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sm-btn:hover { border-color: var(--tg-accent); color: var(--tg-accent); }
.sm-btn:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; }
.sm-btn[aria-expanded="true"] { background: var(--tg-accent); border-color: var(--tg-accent); color: #fff; }
/* 모바일은 햄버거가 같은 역할을 하므로 숨긴다 */
@media (max-width: 900px) { .sm-btn { display: none; } }

.sm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 26, 21, .55);
  opacity: 0; transition: opacity .22s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
.sm-overlay[hidden] { display: none; }
.sm-overlay.show { opacity: 1; }

.sm-inner {
  background: var(--tg-ground);
  padding: 34px 40px 44px;
  transform: translateY(-14px);
  transition: transform .26s cubic-bezier(.22,.8,.3,1);
  min-height: 0;
}
.sm-overlay.show .sm-inner { transform: translateY(0); }

.sm-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  max-width: 1600px; margin: 0 auto 30px; padding-bottom: 22px;
  border-bottom: 1px solid var(--tg-hair);
}
.sm-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--tg-accent); }
.sm-title { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.025em; }
.sm-close {
  flex-shrink: 0; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--tg-hair); border-radius: 50%; background: #fff; color: var(--tg-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, transform .15s;
}
.sm-close:hover { border-color: var(--tg-accent); color: var(--tg-accent); transform: rotate(90deg); }
.sm-close:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; }

.sm-grid {
  max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 26px;
}
@media (min-width: 700px)  { .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .sm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sm-col { border-top: 2px solid var(--tg-med); padding-top: 16px; }
.sm-col[data-track="beauty"] { border-top-color: var(--tg-beauty); }
.sm-group {
  display: block; margin-bottom: 14px; text-decoration: none;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink);
  word-break: keep-all;
}
.sm-group:hover { color: var(--tg-med); text-decoration: none; }
.sm-col[data-track="beauty"] .sm-group:hover { color: var(--tg-beauty); }

.sm-list, .sm-sub { list-style: none; margin: 0; padding: 0; }
.sm-list > li + li { margin-top: 2px; }
.sm-list > li > a {
  display: block; padding: 8px 10px 8px 0; text-decoration: none;
  font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--tg-body);
  word-break: keep-all; transition: color .15s;
}
.sm-list > li > a:hover { color: var(--tg-med); text-decoration: none; }
.sm-col[data-track="beauty"] .sm-list > li > a:hover { color: var(--tg-beauty); }
.sm-list > li > a.on { color: var(--tg-med); font-weight: 600; }
.sm-col[data-track="beauty"] .sm-list > li > a.on { color: var(--tg-beauty); }

.sm-sub { margin: 2px 0 8px; padding-left: 12px; border-left: 1px solid var(--tg-hair); }
.sm-sub li a {
  display: block; padding: 6px 0 6px 8px; text-decoration: none;
  font-size: 14.5px; font-weight: 300; line-height: 1.5; color: var(--tg-mute);
  word-break: keep-all; transition: color .15s;
}
.sm-sub li a:hover { color: var(--tg-med); text-decoration: none; }
.sm-col[data-track="beauty"] .sm-sub li a:hover { color: var(--tg-beauty); }
.sm-sub li a.on { color: var(--tg-med); font-weight: 600; }
.sm-col[data-track="beauty"] .sm-sub li a.on { color: var(--tg-beauty); }

.sm-foot {
  max-width: 1600px; margin: 40px auto 0; padding-top: 26px;
  border-top: 1px solid var(--tg-hair);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.sm-tel {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.sm-tel span { margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--tg-mute); letter-spacing: 0; }
.sm-tel:hover { color: var(--tg-med); text-decoration: none; }
.sm-kko {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid #cfd8d3; border-radius: 4px; font-size: 14.5px; font-weight: 500;
  color: var(--tg-ink); text-decoration: none;
}
.sm-kko:hover { border-color: var(--tg-med); color: var(--tg-med); text-decoration: none; }
.sm-hours { margin: 0; flex-basis: 100%; font-size: 14px; font-weight: 300; color: var(--tg-mute); }
@media (min-width: 900px) { .sm-hours { flex-basis: auto; margin-left: auto; } }

@media (max-width: 560px) {
  .sm-inner { padding: 24px 20px 36px; }
  .sm-head { margin-bottom: 24px; padding-bottom: 18px; }
  .sm-tel { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-overlay, .sm-inner { transition: none; }
  .sm-close:hover { transform: none; }
}

/* 오버레이가 열린 동안 배경 스크롤 고정 */
body.sm-open { overflow: hidden; }

/* ── 전체메뉴 헤드 — 로고 중앙 배치, 구분선 제거 (2026-09-15) ──
   앞의 .sm-head / .sm-eyebrow / .sm-title / .sm-foot 규칙을 덮는다. */
.sm-head {
  position: relative;
  display: block;                 /* flex 해제 — 로고를 가운데로 */
  max-width: 1600px; margin: 0 auto 38px; padding-bottom: 0;
  border-bottom: 0;               /* 구분선 제거 */
  text-align: center;
}
.sm-logo { display: inline-block; line-height: 0; text-decoration: none; }
.sm-logo img { display: block; height: 78px; width: auto; max-width: none; }
@media (max-width: 900px) { .sm-logo img { height: 64px; } }
@media (max-width: 560px) { .sm-logo img { height: 54px; } }

/* 제목은 화면에서 감추되 스크린리더에는 남긴다 */
.sm-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sm-close { position: absolute; top: 0; right: 0; }
@media (max-width: 560px) { .sm-close { width: 38px; height: 38px; } }

/* 하단 연락처 위 구분선도 제거 */
.sm-foot { border-top: 0; padding-top: 34px; }

/* ═══════════════════════════════════════════════════════════
   메인 전면 재설계 — C안 (2026-09-15)
   레퍼런스 청라리아(#454D43 올리브)의 무드를 가져오되, 색은 더그린 그린 계열의
   딥 포레스트로 응용한다. 크림 여백 + 가운데 정렬 + 차분한 에디토리얼.
   ═══════════════════════════════════════════════════════════ */
:root {
  --tg-deep:      #16332A;   /* 어두운 섹션 바탕 */
  --tg-deep-2:    #1F4436;   /* 그 위 카드 */
  --tg-deep-line: #2C5546;   /* 어두운 바탕 위 경계선 */
  --tg-deep-mute: #9BB2A6;   /* 어두운 바탕 위 보조 텍스트 */
  --tg-cream:     #F6F3EC;   /* 따뜻한 오프화이트 */
  --tg-cream-2:   #EEE9DE;
}
/* 기존 차가운 회색 그라운드를 크림으로 교체 */
:root { --tg-ground-2: #F6F3EC; --tg-hair-2: #EFEBE2; }

/* ── 가운데 정렬 섹션 헤드 ── */
.tg-sec-head.ctr { display: block; text-align: center; margin-bottom: 40px; }
.tg-sec-head.ctr .tg-h2 { margin-bottom: 12px; }
.tg-sec-head.ctr .tg-sub { margin: 0 auto; max-width: 62ch; }
.tg-mark {
  display: block; margin: 0 auto 16px; width: 18px; height: 18px;
  color: var(--tg-med); opacity: .9;
}
.tg-eyebrow.ctr { text-align: center; }

/* ═══ 1. 히어로 — 풀블리드 슬라이더 ═══ */
.hero { position: relative; background: var(--tg-deep); overflow: hidden; }
.hero-slider { position: relative; min-height: 560px; }
@media (min-width: 900px)  { .hero-slider { min-height: 640px; } }
@media (min-width: 1400px) { .hero-slider { min-height: 720px; } }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.hero-slide.on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,26,20,.42), rgba(10,26,20,.66));
}

.hero-copy {
  position: relative; z-index: 2; text-align: center; color: #fff;
  min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: 96px;
}
.hero-eyebrow {
  margin: 0 0 20px; font-size: 13px; font-weight: 500; letter-spacing: .18em;
  color: rgba(255,255,255,.72);
}
.hero-mark { display: block; margin: 0 auto 18px; color: rgba(255,255,255,.8); }
.hero-h1 {
  margin: 0 0 22px; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.32;
  font-weight: 600; letter-spacing: -.03em; word-break: keep-all; text-wrap: balance;
  color: #fff;
}
.hero-lede {
  margin: 0 auto 34px; max-width: 46ch;
  font-size: clamp(15px, 1.7vw, 17px); font-weight: 300; line-height: 1.85;
  color: rgba(255,255,255,.82); word-break: keep-all;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: 3px;
  font-size: 15.5px; font-weight: 500; text-decoration: none; transition: background .16s, border-color .16s, color .16s;
}
.hero-btn.solid { background: #fff; color: var(--tg-deep); border: 1px solid #fff; }
.hero-btn.solid:hover { background: var(--tg-med); border-color: var(--tg-med); color: #fff; text-decoration: none; }
.hero-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.hero-btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }

.hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 3; display: flex; gap: 8px; }
.hero-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.4); transition: background .2s, width .2s;
}
.hero-dot:hover { background: rgba(255,255,255,.7); }
.hero-dot.on { background: #fff; width: 24px; border-radius: 5px; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 히어로 아래 정보 바 */
.hero-bar { background: var(--tg-deep-2); border-top: 1px solid var(--tg-deep-line); }
.hero-bar-in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
}
@media (min-width: 820px) { .hero-bar-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero-fact { padding: 24px 6px; text-align: center; border-top: 1px solid var(--tg-deep-line); }
.hero-fact:first-child { border-top: 0; }
@media (min-width: 820px) {
  .hero-fact { border-top: 0; border-left: 1px solid var(--tg-deep-line); padding: 28px 20px; }
  .hero-fact:first-child { border-left: 0; }
}
.hero-fact b { display: block; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -.02em; margin-bottom: 5px; }
.hero-fact span { font-size: 14px; font-weight: 300; color: var(--tg-deep-mute); }

/* ═══ 2. 대분류 5 대형 카드 ═══ */
.cats { padding-block: 84px; background: var(--tg-cream); }
.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 640px)  { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.cat {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 330px; padding: 30px 28px 28px; overflow: hidden;
  text-decoration: none; color: #fff; background: var(--tg-deep);
}
@media (min-width: 1440px) { .cat { min-height: 400px; } }
.cat img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.8,.3,1);
}
.cat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,22,16,.18) 35%, rgba(8,22,16,.82));
  transition: background .3s;
}
.cat:hover img { transform: scale(1.055); }
.cat:hover::after { background: linear-gradient(to bottom, rgba(8,22,16,.3) 25%, rgba(8,22,16,.88)); }
.cat:hover { text-decoration: none; color: #fff; }
.cat > * { position: relative; z-index: 2; }
.cat-no { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.62); margin-bottom: 10px; }
.cat-name { font-size: clamp(19px, 2.1vw, 22px); font-weight: 600; letter-spacing: -.025em; margin-bottom: 10px; word-break: keep-all; }
.cat-sub {
  font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.76);
  word-break: keep-all; margin-bottom: 18px;
}
.cat-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: #fff;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.28);
}
.cat-go svg { transition: transform .2s; }
.cat:hover .cat-go svg { transform: translateX(4px); }

/* ═══ 3. 2012 히스토리 ═══ */
.hist { padding-block: 92px; background: var(--tg-deep); color: #fff; }
.hist .tg-h2 { color: #fff; }
.hist .tg-sub { color: var(--tg-deep-mute); }
.hist .tg-mark { color: rgba(255,255,255,.7); }
.hist-eyebrow { text-align: center; margin: 0 0 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .18em; color: rgba(255,255,255,.6); }

.hist-line {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin: 46px auto 0; max-width: 860px;
}
.hist-year { text-align: center; flex-shrink: 0; }
.hist-year b {
  display: block; font-size: clamp(30px, 4.6vw, 46px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.hist-year span { display: block; margin-top: 9px; font-size: 13.5px; font-weight: 300; color: var(--tg-deep-mute); }
.hist-rule { flex: 1 1 auto; height: 1px; background: linear-gradient(to right, var(--tg-deep-line), rgba(255,255,255,.55), var(--tg-deep-line)); margin: 0 22px; position: relative; }
.hist-rule::after {
  content: attr(data-span); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--tg-deep); padding: 0 14px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.8); white-space: nowrap;
}
@media (max-width: 620px) {
  .hist-line { flex-direction: column; gap: 18px; }
  .hist-rule { width: 1px; height: 46px; flex: none; margin: 0; background: linear-gradient(to bottom, var(--tg-deep-line), rgba(255,255,255,.5)); }
  .hist-rule::after { position: static; transform: none; display: none; }
}

.hist-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 52px; }
@media (min-width: 760px)  { .hist-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hist-card { padding: 30px 28px 32px; background: var(--tg-deep-2); border: 1px solid var(--tg-deep-line); }
.hist-card p { margin: 0 0 10px; font-size: 13.5px; font-weight: 300; color: var(--tg-deep-mute); }
.hist-card b { display: block; font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; letter-spacing: -.025em; color: #fff; word-break: keep-all; }
.hist-card em { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.66); word-break: keep-all; }

/* ═══ 공통 — 크림 섹션 ═══ */
.tg-sec.alt { background: var(--tg-cream); border-block: 0; }
.tg-sec.cream { background: var(--tg-cream); }

@media (max-width: 560px) {
  .hero-copy { padding-block: 72px; }
  .cats { padding-block: 56px; }
  .hist { padding-block: 62px; }
  .cat { min-height: 270px; padding: 24px 22px 24px; }
}

/* 장비 섹션 — 탭이 하나뿐일 때(메인) 탭 레일을 감추고 한 단으로 */
.eq-body.single { grid-template-columns: minmax(0, 1fr); }


/* ── 장비 섹션 폭 조이기 (2026-09-15) ──
   컨테이너는 1600 이지만 장비 섹션은 읽기 좋은 폭으로 가둔다. */
.eq .tg-wrap { max-width: 1240px; }
.eq-list li span { max-width: 46ch; }

/* ── 장비 카드 — 나란히 놓인다 ── */
.eq-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (min-width: 620px) { .eq-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .eq-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.eq-card { display: flex; flex-direction: column; }
.eq-shot {
  aspect-ratio: 4 / 3; margin-bottom: 12px; overflow: hidden;
  background: var(--tg-ground-2); border: 1px solid var(--tg-hair);
  display: flex; align-items: center; justify-content: center;
}
.eq-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 사진이 아직 없을 때 — 자리만 잡아 둔다 */
.eq-shot.empty {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,0,0,.02) 8px, rgba(0,0,0,.02) 16px),
    var(--tg-ground-2);
  border-style: dashed; border-color: #d7dedb;
}
.eq-ph { font-size: 12px; font-weight: 300; color: var(--tg-mute-2); text-align: center; padding: 0 8px; }

.eq-card b {
  display: block; margin-bottom: 6px;
  font-size: 16px; font-weight: 600; letter-spacing: -.018em; color: var(--tg-ink);
}
.eq-card span {
  display: block; font-size: 13.5px; font-weight: 300; line-height: 1.65;
  color: var(--tg-body); word-break: keep-all;
}

@media (max-width: 560px) {
  .eq-cards { gap: 14px; }
  .eq-card b { font-size: 15px; }
  .eq-card span { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   톤 조정 — 모던·클린 메디컬 (2026-09-15)
   레퍼런스를 따라가며 크림(#F6F3EC)·따뜻한 포레스트로 갔더니
   전통·에디토리얼 쪽으로 기울었다. 고객이 원하는 방향은 모던 메디컬이므로
   ① 크림 → 차가운 오프화이트  ② 딥그린을 덜 따뜻하게
   ③ 장식 모티프(✳) 제거  ④ 경계선을 더 얇고 옅게 로 되돌린다.
   ═══════════════════════════════════════════════════════════ */
:root {
  --tg-cream:     #F4F7F6;   /* 크림 → 차가운 오프화이트 */
  --tg-cream-2:   #E9EFED;
  --tg-ground-2:  #F7FAF9;
  --tg-hair:      #E6EBE9;
  --tg-hair-2:    #EFF3F2;
  --tg-deep:      #132D27;   /* 덜 따뜻한 딥그린 */
  --tg-deep-2:    #1B3E35;
  --tg-deep-line: #274E43;
  --tg-deep-mute: #9CB4AB;
}

/* 장식 모티프 제거 — 남아 있는 마크가 있어도 보이지 않게 */
.tg-mark, .hero-mark { display: none !important; }

/* 히어로 — 스크림을 옅게, 카피를 더 정갈하게 */
.hero-slide::after {
  background: linear-gradient(to bottom, rgba(10,24,20,.38), rgba(10,24,20,.60));
}
.hero-eyebrow { letter-spacing: .14em; color: rgba(255,255,255,.7); font-weight: 400; }
.hero-h1 { font-weight: 500; letter-spacing: -.032em; }
.hero-lede { color: rgba(255,255,255,.78); }
.hero-btn { border-radius: 2px; font-weight: 500; }

/* 섹션 헤드 — 군더더기 없이 */
.tg-h2 { font-weight: 600; letter-spacing: -.028em; }
.tg-sec-head.ctr { margin-bottom: 44px; }
.eq-eyebrow, .hist-eyebrow { font-weight: 500; letter-spacing: .15em; }

/* 카드 — 모서리를 직각으로, 테두리를 얇고 옅게 */
.cat, .hist-card, .eq-panel, .eq-shot, .tg-center, .tg-herb, .tg-step,
.pg-step, .s6-group, .tx, .proc-card, .pg-box, .rx, .eq-tab, .faq, .pr-step {
  border-radius: 0;
}
.hist-card { background: transparent; border-color: var(--tg-deep-line); }

/* 카테고리 카드 — 오버레이를 덜 무겁게 */
.cat::after { background: linear-gradient(to bottom, rgba(8,20,16,.14) 40%, rgba(8,20,16,.76)); }
.cat:hover::after { background: linear-gradient(to bottom, rgba(8,20,16,.24) 30%, rgba(8,20,16,.84)); }
.cat-name { font-weight: 600; }

/* 버튼 — 라운드 최소화 */
.tg-btn { border-radius: 2px; }

/* ── 증상으로 찾기 — 아이콘 타일로 재설계 (2026-09-15) ── */
.tg-symptoms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 620px)  { .tg-symptoms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tg-symptoms { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.tg-symptom {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 148px; padding: 22px 12px;
  border: 1px solid var(--tg-hair); background: #fff; text-decoration: none;
  text-align: center; transition: border-color .18s, background .18s;
}
.tg-symptom:hover { border-color: var(--tg-accent); background: var(--tg-accent-soft); text-decoration: none; }

.sym-ico {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--tg-ground-2); color: var(--tg-accent);
  transition: background .18s, color .18s;
}
.tg-symptom:hover .sym-ico { background: #fff; }
.sym-ico svg { display: block; }

.sym-name {
  font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: -.018em;
  color: var(--tg-ink-2); word-break: keep-all;
}
.tg-symptom:hover .sym-name { color: var(--tg-accent-deep); }

@media (max-width: 560px) {
  .tg-symptom { min-height: 128px; gap: 11px; padding: 18px 10px; }
  .sym-ico { width: 48px; height: 48px; }
  .sym-ico svg { width: 26px; height: 26px; }
  .sym-name { font-size: 14px; }
}

/* ── 예약·상담 — 지도 + 경로 2단 ── */
.cta-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1000px) { .cta-map { grid-template-columns: 1.15fr 1fr; gap: 26px; } }

.cmap { display: flex; flex-direction: column; border: 1px solid #2e3a34; background: #10201a; }
.cmap iframe {
  display: block; width: 100%; border: 0;
  aspect-ratio: 16 / 10; min-height: 300px;
  filter: grayscale(.12);
}
@media (min-width: 1000px) { .cmap iframe { aspect-ratio: auto; height: 100%; min-height: 380px; } }

.cmap-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 16px 20px; border-top: 1px solid #2e3a34; background: #14261f;
}
.cmap-bar address {
  margin: 0; font-style: normal; font-size: 14px; font-weight: 300; line-height: 1.6;
  color: #c3d2cb; word-break: keep-all;
}
.cmap-go {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 14px; font-weight: 500; color: #fff; text-decoration: none;
  padding: 8px 14px; border: 1px solid #3a4a43; transition: border-color .15s, background .15s;
}
.cmap-go:hover { border-color: var(--tg-med); background: rgba(19,122,82,.18); color: #fff; text-decoration: none; }

/* 경로 4칸 — 지도 옆에서는 2×2 */
.cta-map .tg-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; align-content: start; gap: 12px; }
@media (max-width: 520px) { .cta-map .tg-contact-grid { grid-template-columns: minmax(0, 1fr); } }
.cta-map .tg-route { min-height: 104px; justify-content: center; }

/* ── 카카오맵 지도퍼가기(roughmap) — 컨테이너에 맞춰 늘린다 ──
   위젯이 인라인 스타일로 고정폭을 넣으므로 !important 가 필요하다. */
.cmap-frame { position: relative; width: 100%; overflow: hidden; }
.cmap-frame .root_daum_roughmap { width: 100% !important; }
.cmap-frame .root_daum_roughmap .wrap_map { height: 400px !important; }
@media (max-width: 999px) { .cmap-frame .root_daum_roughmap .wrap_map { height: 320px !important; } }
@media (max-width: 560px) { .cmap-frame .root_daum_roughmap .wrap_map { height: 260px !important; } }


/* ── roughmap 위젯은 흰 바탕 전제로 만들어져 있다 ──
   주소·전화 블록(.section_address)이 글자색 #333 에 배경 투명이라,
   어두운 예약 섹션 위에 그냥 두면 글씨가 안 보인다. 위젯 전체를 흰 면에 올린다. */
.cmap { border: 0; background: transparent; }
.cmap-frame { background: #fff; border: 1px solid #2e3a34; }
.cmap-frame .root_daum_roughmap { border: 0 !important; background: #fff; }

/* 지도만 노출 — 위젯 하단 정보(로드뷰·길찾기·지도크게보기·주소·전화)는 숨긴다.
   .wrap_map 만 남기므로 위젯 내부 마크업이 바뀌어도 규칙 하나로 버틴다.
   ※ 카카오 로고와 축척은 .wrap_map 안에 있어 출처 표기는 그대로 남는다. */
.cmap-frame .root_daum_roughmap > *:not(.wrap_map) { display: none !important; }

/* ═══════════════════════════════════════════════
   퀵메뉴 — 데스크톱은 우측 세로, 모바일은 하단 고정 바
   ═══════════════════════════════════════════════ */
.qm {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 150; display: flex; flex-direction: column; gap: 8px;
}
.qm-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 82px; min-height: 82px; padding: 12px 6px;
  text-decoration: none; text-align: center;
  background: #fff; border: 1px solid var(--tg-hair);
  box-shadow: 0 6px 18px rgba(12, 32, 24, .07);
  transition: border-color .16s, background .16s, transform .16s;
}
.qm-item:hover { text-decoration: none; transform: translateX(-3px); }
.qm-ico { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.qm-txt { font-size: 12.5px; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; word-break: keep-all; }
.qm-num { font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* 브랜드 색 — 네이버 그린 / 카카오 옐로우는 각 서비스 식별색이라 그대로 쓴다 */
.qm-item.is-naver { color: var(--tg-ink-2); }
.qm-item.is-naver .qm-ico { color: #03C75A; }
.qm-item.is-naver:hover { border-color: #03C75A; background: #f2fcf6; }

.qm-item.is-tel { color: var(--tg-ink-2); }
.qm-item.is-tel .qm-ico { color: var(--tg-med); }
.qm-item.is-tel .qm-num { color: var(--tg-med-deep); }
.qm-item.is-tel:hover { border-color: var(--tg-med); background: var(--tg-med-soft); }

.qm-item.is-kakao { color: var(--tg-ink-2); }
.qm-item.is-kakao .qm-ico { color: #3C1E1E; }
.qm-item.is-kakao:hover { border-color: #FAE100; background: #FFFBE0; }

.qm-top {
  display: flex; align-items: center; justify-content: center;
  width: 82px; height: 38px; padding: 0; cursor: pointer;
  background: var(--tg-deep); border: 1px solid var(--tg-deep); color: #fff;
  transition: background .16s;
}
.qm-top:hover { background: var(--tg-deep-2); }
.qm-item:focus-visible, .qm-top:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 2px; }

/* 모바일 — 하단 고정 바. 세로로 붙으면 화면을 너무 가린다 */
@media (max-width: 900px) {
  .qm {
    right: 0; left: 0; top: auto; bottom: 0; transform: none;
    flex-direction: row; gap: 0;
    border-top: 1px solid var(--tg-hair);
    box-shadow: 0 -4px 16px rgba(12, 32, 24, .1);
  }
  .qm-item {
    flex: 1 1 0; width: auto; min-height: 60px; padding: 9px 4px; gap: 3px;
    border: 0; border-left: 1px solid var(--tg-hair-2); box-shadow: none;
  }
  .qm-item:first-child { border-left: 0; }
  .qm-item:hover { transform: none; }
  .qm-ico { width: 21px; height: 21px; }
  .qm-ico svg { width: 19px; height: 19px; }
  .qm-txt { font-size: 11.5px; }
  .qm-num { display: none; }
  .qm-top { display: none; }
  /* 하단 바에 가리지 않게 본문 끝에 여백 */
  body { padding-bottom: 60px; }
}
@media (max-width: 380px) { .qm-txt { font-size: 11px; } }

/* 프린트할 때는 빼자 */
@media print { .qm { display: none; } }

/* ── 증상 → 처방 (대표 특수한약 + 어디가 불편하신가요 통합) ── */
.find-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .find-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.find {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 26px 26px 26px 24px; background: #fff; border: 1px solid var(--tg-hair);
  text-decoration: none; color: inherit; transition: border-color .16s, background .16s;
}
.find:hover { border-color: var(--tg-med); background: #fff; text-decoration: none; }

.find-ico {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; flex-shrink: 0;
  border: 1px solid var(--tg-hair); color: var(--tg-med);
  transition: background .16s, border-color .16s;
}
.find:hover .find-ico { background: var(--tg-med-soft); border-color: var(--tg-med); }

.find-body { display: block; min-width: 0; }
.find-when {
  display: block; margin-bottom: 10px;
  font-size: 17px; font-weight: 500; letter-spacing: -.022em; line-height: 1.45;
  color: var(--tg-ink); word-break: keep-all;
}
.find-rx { display: flex; flex-wrap: wrap; gap: 6px; }
.find-rx em {
  font-style: normal; padding: 5px 10px;
  border: 1px solid var(--tg-hair-2); background: var(--tg-ground-2);
  font-size: 13px; font-weight: 300; color: var(--tg-body); white-space: nowrap;
}
.find:hover .find-rx em { border-color: #d9e5e0; }

.find-go { flex-shrink: 0; color: var(--tg-mute-2); transition: color .16s, transform .16s; }
.find:hover .find-go { color: var(--tg-med); transform: translateX(3px); }

.find-note {
  margin: 26px auto 0; max-width: 88ch; text-align: center;
  font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--tg-mute); word-break: keep-all;
}

@media (max-width: 560px) {
  .find { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px; }
  .find-go { display: none; }
  .find-ico { width: 50px; height: 50px; }
  .find-ico svg { width: 26px; height: 26px; }
  .find-when { font-size: 16px; }
}

/* ═══════════════════════════════════════════════
   예약 · 상담 — 정보 패널 + 지도 (2026-09-15)
   ═══════════════════════════════════════════════ */
.loc { padding-block: 84px; background: var(--tg-cream); }
.loc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  box-shadow: 0 16px 44px rgba(12, 32, 24, .09);
}
@media (min-width: 1000px) { .loc-grid { grid-template-columns: 500px minmax(0, 1fr); } }
@media (min-width: 1360px) { .loc-grid { grid-template-columns: 548px minmax(0, 1fr); } }

/* 왼쪽 패널 */
.loc-panel {
  background: var(--tg-deep); color: #fff;
  padding: 46px 44px 44px; display: flex; flex-direction: column;
}
.loc-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--tg-deep-mute); }
.loc-name {
  margin: 0 0 32px; font-size: clamp(24px, 2.8vw, 31px); font-weight: 600;
  letter-spacing: -.03em; color: #fff; word-break: keep-all;
}

.loc-list { margin: 0 0 32px; }
.loc-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12);
}
.loc-row:first-child { border-top: 0; padding-top: 0; }
.loc-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.loc-row dt {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  color: var(--tg-deep-mute);
}
.loc-row dd {
  margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.65;
  color: #fff; word-break: keep-all;
}
.loc-row dd a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.loc-row dd a:hover { border-bottom-color: #fff; text-decoration: none; }
.loc-dim { color: var(--tg-deep-mute); font-size: 14px; }

.loc-btn {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; padding: 0 22px;
  background: #fff; color: var(--tg-deep); text-decoration: none;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.015em;
  transition: background .16s, color .16s;
}
.loc-btn:hover { background: var(--tg-med); color: #fff; text-decoration: none; }
.loc-btn svg { transition: transform .18s; }
.loc-btn:hover svg { transform: translateX(4px); }

/* 오른쪽 지도 */
.loc-map { background: #fff; }
.loc-map .cmap-frame { border: 0; height: 100%; }
@media (max-width: 999px) { .loc-map .root_daum_roughmap .wrap_map { height: 340px !important; } }
@media (max-width: 560px) { .loc-map .root_daum_roughmap .wrap_map { height: 280px !important; } }

@media (max-width: 560px) {
  .loc { padding-block: 56px; }
  .loc-panel { padding: 32px 24px 30px; }
  .loc-name { margin-bottom: 24px; }
  .loc-row { padding: 15px 0; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .loc-ico { width: 34px; height: 34px; }
  .loc-row dd { font-size: 15px; }
}

/* ── 퀵메뉴 — 항목이 6개로 늘어 높이를 줄인다 ── */
.qm-item { width: 78px; min-height: 68px; padding: 10px 6px; gap: 4px; }
.qm-ico { width: 23px; height: 23px; }
.qm-ico svg { width: 20px; height: 20px; }
.qm-txt { font-size: 11.5px; }
.qm-num { font-size: 11px; }
.qm-top { width: 78px; height: 34px; }

.qm-item.is-blog .qm-ico { color: #03C75A; }
.qm-item.is-blog:hover { border-color: #03C75A; background: #f2fcf6; }
.qm-item.is-yt .qm-ico { color: #FF0033; }
.qm-item.is-yt:hover { border-color: #FF0033; background: #fff5f6; }
.qm-item.is-cafe:hover { border-color: #03C75A; background: #f2fcf6; }

/* 모바일 하단 바 — 6개는 너무 많다. 핵심 3개만 남긴다 */
@media (max-width: 900px) {
  .qm-item { width: auto; min-height: 58px; }
  .qm-item.is-blog, .qm-item.is-yt, .qm-item.is-cafe { display: none; }
}

/* 브랜드 마크 아이콘(네이버 블로그처럼 자체 색을 가진 것)은 currentColor 를 쓰지 않는다 */
.qm-ico.is-brand svg { border-radius: 5px; }
.qm-item.is-blog .qm-ico.is-brand { color: inherit; }

/* 전화 항목에서 번호를 뺐으므로 다른 항목과 같은 높이로 정렬된다 */
.qm-item.is-tel { justify-content: center; }

/* 네이버 카페도 브랜드 마크라 currentColor 를 쓰지 않는다 */
.qm-item.is-cafe .qm-ico.is-brand { color: inherit; }
.qm-item.is-cafe:hover { border-color: #00C73C; background: #f2fcf6; }

/* 지도가 패널 높이를 꽉 채우게 — 위젯이 고정 px 높이를 인라인으로 넣으므로 전부 덮는다.
   그리드 아이템이 stretch 되어 .loc-map 높이가 확정되므로 100% 체인이 성립한다. */
.loc-map { height: 100%; }
.loc-map .cmap-frame { height: 100%; }
.loc-map .root_daum_roughmap { height: 100% !important; }
.loc-map .root_daum_roughmap .wrap_map { height: 100% !important; min-height: 460px; }
.loc-map .root_daum_roughmap .wrap_map .map { height: 100% !important; }
@media (max-width: 999px) {
  .loc-map .root_daum_roughmap .wrap_map { height: 380px !important; min-height: 0; }
}
@media (max-width: 560px) {
  .loc-map .root_daum_roughmap .wrap_map { height: 300px !important; }
}

/* 예약·상담 패널 아이콘 확대 (2026-09-15) */
.loc-row { grid-template-columns: 50px minmax(0, 1fr); gap: 16px; }
.loc-ico { width: 50px; height: 50px; }
.loc-ico svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .loc-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .loc-ico { width: 44px; height: 44px; }
  .loc-ico svg { width: 20px; height: 20px; }
}

/* 퀵메뉴 아이콘 확대 (2026-09-15) */
.qm-item { width: 82px; min-height: 74px; gap: 5px; }
.qm-ico { width: 30px; height: 30px; }
.qm-ico svg { width: 26px; height: 26px; }
@media (max-width: 900px) {
  .qm-item { width: auto; min-height: 60px; }
  .qm-ico { width: 26px; height: 26px; }
  .qm-ico svg { width: 23px; height: 23px; }
}

/* 호버 밑줄 제거 (2026-09-15)
   main.css 의 `a:hover { text-decoration: underline }` 를 끈다.
   본문 프로즈 안의 링크는 호버가 아니라 항상 밑줄을 달아 식별성을 유지한다. */
a:hover { text-decoration: none; }
.pg-body p a:not([class]), .faq-a a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(19, 45, 39, .35);
}
.pg-body p a:not([class]):hover, .faq-a a:not([class]):hover {
  text-decoration: underline; text-decoration-color: currentColor;
}
/* 예약·상담 패널 — 밑줄 대신 색 변화로만 반응 */
.loc-row dd a { border-bottom: 0; }
.loc-row dd a:hover { border-bottom: 0; color: var(--tg-deep-mute); }

/* 섹션 타이틀 확대 (2026-09-15) — 28px 상한이 1600px 컨테이너에 비해 작았다 */
.tg-h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.28; }
.tg-sec-head.ctr .tg-h2 { margin-bottom: 14px; }
.tg-sec-head.ctr .tg-sub { font-size: 16px; }
@media (max-width: 560px) {
  .tg-h2 { font-size: 25px; }
  .tg-sec-head.ctr .tg-sub { font-size: 15px; }
}

/* 섹션 서브카피 — 색을 진하게, 두께는 300 유지 (2026-09-15)
   --tg-mute(#7d8a83)는 커진 제목 옆에서 너무 흐렸다. --tg-ink-2로 올린다.
   어두운 섹션(.hist)은 .hist .tg-sub 가 특이도로 이겨서 영향 없다. */
.tg-sub { color: var(--tg-ink-2); font-weight: 300; }

/* 연혁 연도 확대 (2026-09-15) */
.hist-year b { font-size: clamp(38px, 5.8vw, 62px); }
.hist-year span { margin-top: 11px; font-size: 14px; }
@media (max-width: 560px) { .hist-year b { font-size: 40px; } }

/* 히어로 하단 바 — 진료시간·전화 글자 확대 (2026-09-15) */
.hero-fact b { font-size: clamp(19px, 1.5vw, 23px); margin-bottom: 7px; }
.hero-fact span { font-size: 14.5px; }
@media (min-width: 820px) { .hero-fact { padding: 32px 20px; } }
@media (max-width: 560px) { .hero-fact b { font-size: 19px; } }

/* 히어로 바 글자 한 단계 더 확대 (2026-09-15)
   min 을 20px 로 둔 건 820~1100px 구간에서 3칸이 좁아 줄바꿈이 나기 때문. */
.hero-fact b { font-size: clamp(20px, 1.85vw, 28px); margin-bottom: 8px; }
.hero-fact span { font-size: 15px; }
@media (min-width: 820px) { .hero-fact { padding: 36px 20px; } }
@media (max-width: 560px) { .hero-fact b { font-size: 21px; } }

/* 푸터 윗여백 제거 (2026-09-15)
   main.css·nav.css 의 .site-footer { margin-top: 80px } 은 마지막 블록이
   흰 본문이던 옛 구조의 잔재다. 지금 홈의 마지막 섹션(.loc)은 자체 배경과
   84px 하단 여백을 갖고 있어 그 80px 이 빈 띠로 남는다.
   본문 페이지(.pg-body 72px) · 게시판(.board-page 80px)은 자체 하단 여백이 있다. */
.site-footer { margin-top: 0; }
main > .container:last-child { padding-bottom: 80px; }

/* 푸터 상담·예약 칼럼 정리 (2026-09-15)
   weight 800 과 알약형 버튼은 C안(모던 메디컬) 이전의 잔재라 맞춘다. */
.foot-tel { font-weight: 700; font-size: 25px; }
.foot-kakao { margin-top: 16px; border-radius: 0; padding: 11px 18px; font-size: 13.5px; font-weight: 500; }

/* 푸터 진료시간 확대 (2026-09-15)
   본문이 17px 인데 푸터만 14px 이라 유독 작아 보였다. 칼럼 제목·주소도 같이 올려
   진료시간만 튀지 않게 한다. */
.site-footer { font-size: 15px; }
.foot-col h3 { font-size: 14.5px; margin-bottom: 16px; }
.foot-hours { gap: 9px 18px; }
.foot-hours dt { font-size: 15px; }
.foot-hours dd { font-size: 16.5px; font-weight: 600; }
.foot-note { font-size: 14px; margin-top: 14px; }
.foot-addr { font-size: 15.5px; }
.foot-biz { font-size: 13.5px; }

/* 푸터 — 로고 확대 + 본문 확대·진하게·두께 300 (2026-09-15)
   기존 회색(#7b8497 / --tg-sub #56607a)은 파란기가 도는 데다 흐렸다.
   본문 색 체계(--tg-ink-2 #33413A)로 맞춰 진하게 올린다.
   제목(h3)과 전화번호는 위계를 잡는 요소라 두께를 유지한다. */
.foot-brand img { height: 58px; }
.foot-brand { margin-bottom: 22px; }

.site-footer { font-size: 16px; font-weight: 300; color: var(--tg-ink-2); }
.foot-addr { font-size: 16.5px; font-weight: 300; color: var(--tg-ink-2); line-height: 1.75; }
.foot-hours dt { font-size: 15.5px; font-weight: 300; color: #5d6b64; }
.foot-hours dd { font-size: 16.5px; font-weight: 300; color: var(--tg-ink-2); }
.foot-note { font-size: 14.5px; font-weight: 300; color: #5d6b64; }
.foot-biz  { font-size: 14px;   font-weight: 300; color: #5d6b64; }
.foot-bottom { font-size: 14px; font-weight: 300; color: #5d6b64; }
.foot-bottom a { color: #5d6b64; }

/* 푸터 하단 — 관리자 알약형 버튼 (2026-09-15) */
.footer-links { display: inline-flex; align-items: center; gap: 16px; }
.foot-admin {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 18px; border-radius: 999px;
  border: 1px solid var(--tg-hair); background: #fff;
  font-size: 13.5px; font-weight: 400; color: #5d6b64; text-decoration: none;
  transition: border-color .16s, color .16s, background .16s;
}
.foot-admin:hover { border-color: var(--tg-med); color: var(--tg-med); background: #fff; text-decoration: none; }

/* 푸터 하단 링크 — 좁은 폭에서 세로로 찌그러지던 문제 (2026-09-15) */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.footer-links a { white-space: nowrap; }
.foot-admin { flex: 0 0 auto; white-space: nowrap; }

/* ═══════════════════════════════════════════════
   흉살클리닉 확장 레이아웃 + 이미지 자리(figspot)
   2026-09-15 — 자윤한의원 구조 참고
   ═══════════════════════════════════════════════ */

/* ── 이미지 자리 ──
   이미지 파일을 /assets/images/ 에 넣으면 그대로 표시되고,
   없으면 규격이 적힌 점선 프레임이 보인다. JS(slider.js)가 onerror 를 잡아
   .is-empty 를 붙인다 — 파일만 올리면 코드 수정 없이 반영된다. */
.figspot { margin: 0; position: relative; overflow: hidden; background: var(--tg-ground-2); }
.figspot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figspot.ratio-43 { aspect-ratio: 4 / 3; }
.figspot.ratio-32 { aspect-ratio: 3 / 2; }
.figspot.ratio-169 { aspect-ratio: 16 / 9; }
.figspot.is-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 22px; text-align: center;
  background: repeating-linear-gradient(135deg, #f2f6f4 0 12px, #eef3f1 12px 24px);
  border: 1px dashed #c2d1ca;
}
.figspot.is-empty img { display: none; }
.figspot.is-empty::before {
  content: "IMAGE"; font-size: 11px; font-weight: 600; letter-spacing: .2em; color: #8fa49b;
}
.figspot.is-empty::after {
  content: attr(data-spec) " — " attr(data-file);
  font-size: 12.5px; font-weight: 300; line-height: 1.6; color: #6c7f76;
  word-break: keep-all; max-width: 32ch;
}

/* ── 리드 ── */
.hx-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--tg-beauty, var(--tg-accent)); }
.hx-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 900px) { .hx-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }
.hx-lead .pg-h2 { margin-bottom: 18px; line-height: 1.3; }
.hx-lead .pg-intro { margin-bottom: 22px; }
.hx-keys { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.hx-keys li { position: relative; padding-left: 26px; font-size: 16px; font-weight: 300; line-height: 1.65; word-break: keep-all; }
.hx-keys li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 9px; height: 9px; border: 1.5px solid var(--tg-beauty, var(--tg-accent)); border-radius: 50%;
}
.hx-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 구간 이동 칩 ── */
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 44px; }
.hx-chips a {
  padding: 9px 16px; border: 1px solid var(--tg-hair); background: #fff;
  font-size: 14px; font-weight: 300; color: var(--tg-ink-2); text-decoration: none;
  transition: border-color .16s, color .16s, background .16s;
}
.hx-chips a:hover { border-color: var(--tg-beauty, var(--tg-accent)); color: var(--tg-beauty, var(--tg-accent)); text-decoration: none; }
[id^="hx-"] { scroll-margin-top: 110px; }

/* ── 좌우 분할 ── */
.hx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
@media (min-width: 900px) { .hx-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; } }
.hx-split .pg-box { margin: 0; }

/* ── 치료 상세 행 ── */
.hx-detail { margin-top: 44px; display: grid; gap: 28px; }
.hx-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
@media (min-width: 900px) {
  .hx-row { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 44px; }
  .hx-row.is-rev .figspot { order: 2; }
}
.hx-step { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; letter-spacing: .04em; color: var(--tg-beauty, var(--tg-accent)); }
.hx-step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid currentColor;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.hx-row-txt h3 { margin: 0 0 12px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -.025em; line-height: 1.4; word-break: keep-all; }
.hx-row-txt p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }

/* ── 두 가지 흉살 카드에 이미지가 붙었을 때 ── */
.pick-card .figspot { margin: -26px -26px 20px; }
@media (max-width: 560px) { .pick-card .figspot { margin: -22px -22px 18px; } }

/* 역방향 행에서도 이미지 폭이 같게 — order 만 바꾸면 넓은 컬럼으로 넘어간다 */
@media (min-width: 900px) {
  .hx-row.is-rev { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

/* 흉살 리드 보정 (2026-09-15)
   .pg-intro 는 페이지 맨 위 가운데 정렬용이라 좌측 컬럼 안에서는 가운데로 몰린다. */
.hx-lead .pg-intro { max-width: none; margin: 0 0 24px; text-align: left; }
.hx-lead .pg-h2 { text-align: left; }
.hx-lead .hx-eyebrow { text-align: left; }
/* 체크 표시 — 빈 원보다 의도가 분명하다 */
.hx-keys li::before {
  content: ""; position: absolute; left: 3px; top: .42em;
  width: 6px; height: 11px; border: 0;
  border-right: 1.8px solid var(--tg-beauty, var(--tg-accent));
  border-bottom: 1.8px solid var(--tg-beauty, var(--tg-accent));
  border-radius: 0; transform: rotate(42deg);
}

/* 흉살 리드 헤드라인 확대 (2026-09-15) — 페이지 리드는 일반 섹션 제목보다 커야 한다 */
.hx-lead .pg-h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.28; font-weight: 600; letter-spacing: -.03em; margin-bottom: 20px; }
@media (max-width: 560px) { .hx-lead .pg-h2 { font-size: 27px; } }

/* 본문 색 진하게 (2026-09-15)
   --tg-body #56655D 는 17px/300 본문에서 흐렸다. 한 단계 진하게 올린다.
   토큰 하나만 바꾸므로 전 페이지 본문·FAQ·처방 설명이 함께 따라온다.
   제목(--tg-ink #14201B)과는 여전히 구분된다. */
:root { --tg-body: #3A4740; }
.pg-h2-sub { color: #5D6B64; }

/* 구간 이동 칩 확대 (2026-09-15) */
.hx-chips { gap: 10px; margin-bottom: 48px; }
.hx-chips a { padding: 12px 22px; font-size: 16px; color: var(--tg-ink-2); }
@media (max-width: 560px) { .hx-chips a { padding: 10px 16px; font-size: 15px; } }

/* 페이지 섹션 제목 확대 (2026-09-15)
   25px 상한은 본문 17px 바로 위라 제목처럼 읽히지 않았다.
   리드(.hx-lead 40px)와는 여전히 위계가 유지된다. */
.pg-h2 { font-size: clamp(24px, 2.6vw, 31px); line-height: 1.32; font-weight: 600; letter-spacing: -.028em; margin-bottom: 10px; }
.pg-h2-sub { font-size: 15.5px; }
@media (max-width: 560px) { .pg-h2 { font-size: 23px; } .pg-h2-sub { font-size: 15px; } }

/* 섹션 간격 확대 (2026-09-15)
   제목이 25→31px 로 커지면서 56px 간격이 좁아 보였다.
   섹션 안(제목–본문)보다 섹션 사이가 확실히 넓어야 구획이 읽힌다. */
.pg-sec { margin-bottom: 96px; }
.pg-sec:last-of-type { margin-bottom: 0; }
.hx-lead { margin-bottom: 64px; }
.hx-detail { margin-top: 56px; gap: 44px; }
@media (max-width: 560px) {
  .pg-sec { margin-bottom: 64px; }
  .hx-lead { margin-bottom: 44px; }
  .hx-detail { margin-top: 40px; gap: 34px; }
}

/* ═══════════════════════════════════════════════
   고객 제공 이미지 반영 (2026-09-16 요청 5·7항)
   ═══════════════════════════════════════════════ */

/* 5항 — 카테고리 카드 배경 딤 강화.
   기존 그라데이션은 상단이 14%뿐이라 CLINIC 01 라벨이 사진에 묻혔다.
   전면 딤(.46)을 깔고 그 위에 아래로 짙어지는 그라데이션을 얹어
   다섯 장의 톤이 한 세트로 보이게 한다. 이미지가 없는 카드도
   딥그린 바탕이 남아 레이아웃이 무너지지 않는다. */
.cat { background: var(--tg-deep); }
.cat::after {
  background:
    linear-gradient(to bottom, rgba(8,20,16,.30) 0%, rgba(8,20,16,.58) 55%, rgba(8,20,16,.88) 100%),
    rgba(8,20,16,.28);
}
.cat:hover::after {
  background:
    linear-gradient(to bottom, rgba(8,20,16,.40) 0%, rgba(8,20,16,.66) 55%, rgba(8,20,16,.92) 100%),
    rgba(8,20,16,.28);
}
.cat img { filter: saturate(.92) contrast(1.02); }
.cat-no   { color: rgba(255,255,255,.78); }
.cat-sub  { color: rgba(255,255,255,.88); }

/* 7항 — SINCE 2012 배경에 병원 인테리어 사진.
   사진은 공간감이 느껴질 만큼만 남기고 텍스트가 우선 읽히게 딤을 깊게 준다. */
.hist {
  position: relative; isolation: isolate;
  background-color: var(--tg-deep);
  background-image:
    linear-gradient(to bottom, rgba(10,26,20,.90) 0%, rgba(10,26,20,.84) 45%, rgba(10,26,20,.93) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
@media (min-width: 1000px) { .hist { background-attachment: scroll, fixed; } }
.hist .hist-card { background: rgba(12, 30, 23, .42); backdrop-filter: blur(2px); }

/* 위 블록 보정 — `background: <gradient>, <color>` 는 레이어 목록에 색을 넣을 수 없어
   두 번째 레이어가 none 으로 죽는다. 색은 background-color 로 따로 준다.
   fixed 첨부는 iOS 에서 깨지고 스크롤 성능도 떨어져 scroll 로 통일한다. */
.cat::after {
  background-image: linear-gradient(to bottom, rgba(8,20,16,.34) 0%, rgba(8,20,16,.60) 55%, rgba(8,20,16,.90) 100%);
  background-color: rgba(8,20,16,.26);
}
.cat:hover::after {
  background-image: linear-gradient(to bottom, rgba(8,20,16,.44) 0%, rgba(8,20,16,.68) 55%, rgba(8,20,16,.93) 100%);
  background-color: rgba(8,20,16,.26);
}
@media (min-width: 1000px) { .hist { background-attachment: scroll, scroll; } }

/* 장비 이미지 (2026-09-16 요청 2항) */
.eq-list li.has-shot { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; }
.eq-thumb {
  display: block; width: 84px; aspect-ratio: 1; overflow: hidden;
  background: #fff; border: 1px solid var(--tg-hair);
}
.eq-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.eq-list li.has-shot b { align-self: end; }
.eq-list li.has-shot span { align-self: start; }

.eq-extra { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--tg-hair); }
.eq-shots { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .eq-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .eq-shots { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .eq-shots { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.eq-shots li { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.eq-shots .eq-thumb { width: 100%; }
.eq-shots b { font-size: 14px; font-weight: 400; color: var(--tg-ink-2); word-break: keep-all; }

/* ═══════════════════════════════════════════════
   흉살 상세 — 원리 도해 · 3 STEP (2026-09-16 요청 6항)
   ═══════════════════════════════════════════════ */
.hx-wide { margin: 34px 0 0; }
.hx-wide img { display: block; width: 100%; height: auto; background: #fff; }
.hx-wide figcaption {
  margin-top: 16px; font-size: 14.5px; font-weight: 300; line-height: 1.75;
  color: #5d6b64; word-break: keep-all; text-align: center;
  max-width: 76ch; margin-left: auto; margin-right: auto;
}
.hx-wide figcaption b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--tg-ink-2); }

.step3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 860px) { .step3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }
.step3-card { display: flex; flex-direction: column; }
.step3-card .figspot { margin-bottom: 18px; }
.step3-no {
  align-self: center; margin-bottom: 12px; padding: 6px 15px;
  background: var(--tg-deep); color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
}
.step3-card h3 { margin: 0 0 10px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.step3-card p { margin: 0; text-align: center; font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--tg-body); word-break: keep-all; }

.pg-note { margin: 26px 0 0; font-size: 14.5px; font-weight: 300; color: #5d6b64; word-break: keep-all; }

/* ═══════════════════════════════════════════════
   상세페이지 중앙 정렬 (2026-09-16 요청 1항)
   컨테이너를 1180px 로 좁혀 좌우 여백을 균형 있게 잡고,
   섹션 머리(아이브로우·제목·부제)와 카드 그리드의 시각 중심을 가운데로 둔다.
   본문 문단 자체는 왼쪽 정렬을 유지한다 — 여러 줄 텍스트를 가운데 정렬하면
   줄 시작점이 흔들려 오히려 읽기 어려워진다.
   ═══════════════════════════════════════════════ */
.pg-body > .tg-wrap { max-width: 1180px; }
.pg-body .hx-eyebrow,
.pg-body .pg-h2,
.pg-body .pg-h2-sub { text-align: center; }
.pg-body .pg-h2-sub { max-width: 72ch; margin-left: auto; margin-right: auto; }
.pg-body .pg-intro { max-width: 68ch; margin-left: auto; margin-right: auto; }
.pg-body .pg-note { text-align: center; }
/* 체크리스트·처방 설명처럼 폭이 짧은 블록은 가운데 축에 맞춰 놓는다 */
.pg-body .chk,
.pg-body .pg-box { max-width: 900px; margin-left: auto; margin-right: auto; }
/* 리드는 2단 구성이라 제목을 왼쪽으로 되돌린다 */
.pg-body .hx-lead .hx-eyebrow,
.pg-body .hx-lead .pg-h2 { text-align: left; }

/* 퀵메뉴 재정렬 — 항목이 6개에서 4개로 줄어 높이가 남는다 (2026-09-16 요청 4항) */
.qm { gap: 9px; }
.qm-item { min-height: 84px; padding: 13px 6px; gap: 6px; }
.qm-ico { width: 32px; height: 32px; }
.qm-ico svg { width: 28px; height: 28px; }
.qm-txt { font-size: 12px; }
@media (max-width: 900px) {
  .qm-item { min-height: 60px; padding: 8px 6px; }
  .qm-ico { width: 26px; height: 26px; }
  .qm-ico svg { width: 23px; height: 23px; }
}

/* 카테고리 카드 — 배경 사진 대기 중이라 딤 강화분을 되돌린다 (2026-09-16)
   사진이 들어오면 위쪽 블록(요청 5항)의 값이 다시 필요하다. 그때 이 블록만 지우면 된다. */
.cat::after {
  background-image: linear-gradient(to bottom, rgba(8,20,16,.14) 40%, rgba(8,20,16,.76));
  background-color: transparent;
}
.cat:hover::after {
  background-image: linear-gradient(to bottom, rgba(8,20,16,.24) 30%, rgba(8,20,16,.84));
  background-color: transparent;
}

/* ═══════════════════════════════════════════════
   히어로 — 초록 여백 제거 + 진료시간 바 오버레이 (2026-09-16)
   ═══════════════════════════════════════════════ */

/* main.css 의 `.hero { padding: 80px 0 64px }` 는 옛 템플릿 잔재다.
   슬라이더 위아래로 딥그린 띠가 80px·64px 남아 있었다. */
.hero { padding: 0; border-bottom: 0; }

/* 진료시간·전화 바를 히어로 이미지 위에 살짝 얹는다.
   흐림 처리를 지원하지 않는 브라우저를 위해 불투명도를 조금 높게 잡았다. */
@media (min-width: 900px) {
  .hero-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    background: rgba(11, 28, 22, .52);
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero-bar { background: rgba(11, 28, 22, .38); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
  }
  .hero-fact { border-left-color: rgba(255, 255, 255, .18); padding: 26px 20px; }
  .hero-fact span { color: rgba(255, 255, 255, .78); }
  /* 바에 가리지 않게 카피와 도트를 위로 올린다 */
  .hero-copy { padding-bottom: 150px; }
  .hero-dots { bottom: 132px; }
}

/* 히어로 스크림을 밝게 (2026-09-16) — 사진이 더 보이게 딤을 낮춘다.
   흰 카피의 가독성 때문에 아래쪽은 조금 남긴다. */
.hero-slide::after {
  background: linear-gradient(to bottom, rgba(10,24,20,.20) 0%, rgba(10,24,20,.34) 50%, rgba(10,24,20,.50) 100%);
}

/* 슬라이드 도트가 안 보이던 문제 (2026-09-16)
   진료시간 바(z-index 4, 높이 140px)가 bottom:132px 인 도트를 덮고 있었다.
   바 위로 올리고 z-index 도 바보다 높게 준다. 그림자로 밝은 사진에서도 보이게 한다. */
@media (min-width: 900px) { .hero-dots { bottom: 168px; } }
.hero-dots { z-index: 6; }
.hero-dot { box-shadow: 0 1px 4px rgba(0,0,0,.45); background: rgba(255,255,255,.55); }
.hero-dot.on { background: #fff; }

/* 히어로 높이 확대 (2026-09-16) */
.hero-slider { min-height: 620px; }
@media (min-width: 900px)  { .hero-slider { min-height: 770px; } }
@media (min-width: 1400px) { .hero-slider { min-height: 880px; } }

/* 히어로 높이 한 단계 더 (2026-09-16)
   화면 높이에 비해 너무 길어지지 않도록 vh 상한을 함께 둔다 —
   노트북(768px)에서 1000px 히어로는 스크롤만 길어진다. */
.hero-slider { min-height: 700px; }
@media (min-width: 900px)  { .hero-slider { min-height: min(880px, calc(100vh - 81px)); } }
@media (min-width: 1400px) { .hero-slider { min-height: min(1000px, calc(100vh - 81px)); } }

/* 보정 — vh 상한만 두니 1366×768 같은 낮은 화면에서 오히려 짧아졌다(687px).
   max() 로 바닥을 깔아 어떤 화면에서도 이전보다 짧아지지 않게 한다. */
@media (min-width: 900px)  { .hero-slider { min-height: max(820px, min(920px, calc(100vh - 81px))); } }
@media (min-width: 1400px) { .hero-slider { min-height: max(900px, min(1000px, calc(100vh - 81px))); } }

/* ═══════════════════════════════════════════════
   카테고리 카드 — 센터별 색 구분 복구 (2026-09-16)
   사진이 오기 전까지 다섯 장이 전부 같은 딥그린이라 구분이 없었다.
   피부·뷰티는 기존 듀얼 트랙의 로즈 계열, 나머지는 그린 계열의 단계로 나눈다.
   사진이 들어오면 <img> 가 위를 덮으므로 이 색은 바탕으로만 남는다.
   ═══════════════════════════════════════════════ */
.cat[data-key="skin"]      { background: #5A3442; }   /* 로즈 — 뷰티 트랙 */
.cat[data-key="pain"]      { background: #16342C; }   /* 딥그린 */
.cat[data-key="autonomic"] { background: #1D3F3A; }   /* 청록 쪽 */
.cat[data-key="herbs"]     { background: #24382A; }   /* 올리브 쪽 */
.cat[data-key="about"]     { background: #2B3A36; }   /* 중성 슬레이트그린 */

/* 사진이 없을 때는 그라데이션 딤을 옅게 — 바탕색이 보여야 구분이 된다.
   사진이 들어오면(:has(img)) 원래의 딤으로 돌아간다. */
.cat:not(:has(img))::after {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.28));
  background-color: transparent;
}
.cat:not(:has(img)):hover::after {
  background-image: linear-gradient(to bottom, rgba(0,0,0,.06) 35%, rgba(0,0,0,.34));
}
.cat[data-track="beauty"] .cat-no { color: rgba(255,255,255,.72); }

/* ═══════════════════════════════════════════════
   SINCE 2012 — 배경 컬러 제거 (2026-09-16)
   초록 딤이 90% 가까이 덮여 사진이 거의 보이지 않고 초록 판처럼 보였다.
   색기 없는 중성 딤으로 바꾸고 농도를 낮춰 인테리어 공간이 드러나게 한다.
   ═══════════════════════════════════════════════ */
.hist {
  background-color: #1a1a1a;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.64) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
}
.hist .hist-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.hist .tg-sub, .hist-year span, .hist-card p { color: rgba(255,255,255,.76); }
.hist-card em { color: rgba(255,255,255,.72); }
.hist-eyebrow { color: rgba(255,255,255,.66); }
.hist-rule { background: linear-gradient(to right, rgba(255,255,255,.18), rgba(255,255,255,.6), rgba(255,255,255,.18)); }

/* 히어로 더 밝게 (2026-09-16)
   딤을 더 내리면 흰 카피가 밝은 진료실 사진에 묻힌다.
   전면 딤은 낮추고, 카피가 놓이는 가운데에만 부드러운 음영을 더해 가독성을 지킨다. */
.hero-slide::after {
  background:
    radial-gradient(70% 55% at 50% 46%, rgba(8,20,16,.44) 0%, rgba(8,20,16,.10) 70%, rgba(8,20,16,0) 100%),
    linear-gradient(to bottom, rgba(8,20,16,.10) 0%, rgba(8,20,16,.16) 55%, rgba(8,20,16,.34) 100%);
}
.hero-eyebrow, .hero-h1, .hero-lede { text-shadow: 0 1px 14px rgba(6,16,12,.55); }

/* 두 번째 슬라이드에서만 카피를 오른쪽으로 (2026-09-16)
   카피 블록은 슬라이드마다 따로 있지 않고 하나다.
   2번 슬라이드가 활성일 때만 정렬을 바꾸도록 :has() 로 잡는다 —
   JS 를 건드리지 않고, :has() 미지원 브라우저에서는 기존 가운데 정렬로 남는다. */
@media (min-width: 900px) {
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy {
    align-items: flex-end; text-align: right;
  }
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-lede { margin-left: auto; margin-right: 0; }
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-cta { justify-content: flex-end; }
  /* 카피가 좌우로 움직일 때 글자만 튀지 않게 부드럽게 */
  .hero-copy { transition: align-items .45s ease; }
  /* 2번 슬라이드는 음영도 오른쪽으로 옮겨 글자 뒤를 받친다 */
  .hero-slide:nth-child(3).on::after {
    background:
      radial-gradient(64% 58% at 74% 46%, rgba(8,20,16,.48) 0%, rgba(8,20,16,.12) 72%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(8,20,16,.10) 0%, rgba(8,20,16,.16) 55%, rgba(8,20,16,.34) 100%);
  }
}

/* 보정 — 오른쪽으로 보낸 카피가 퀵메뉴(우측 고정, 약 100px)에 물리고
   제목이 화면 끝까지 붙어 잘려 보였다. 퀵메뉴 폭만큼 비우고 줄폭을 제한한다. */
@media (min-width: 900px) {
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy { padding-right: clamp(40px, 8vw, 150px); }
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy > * { max-width: 640px; }
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-lede { max-width: 42ch; }
}

/* 세 번째 슬라이드 — 카피를 왼쪽으로 (2026-09-16)
   2번의 오른쪽 배치와 대칭. 왼쪽에는 퀵메뉴가 없어 여백은 조금만 준다. */
@media (min-width: 900px) {
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy {
    align-items: flex-start; text-align: left; padding-left: clamp(24px, 4vw, 80px);
  }
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy > * { max-width: 640px; }
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hero-lede { max-width: 42ch; margin-left: 0; margin-right: auto; }
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hero-cta { justify-content: flex-start; }
  .hero-slide:nth-child(1).on::after {
    background:
      radial-gradient(64% 58% at 28% 46%, rgba(8,20,16,.48) 0%, rgba(8,20,16,.12) 72%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(8,20,16,.10) 0%, rgba(8,20,16,.16) 55%, rgba(8,20,16,.34) 100%);
  }
}

/* 히어로 한 단계 더 밝게 (2026-09-16)
   전면 딤을 최소로 내리고, 카피 뒤 음영과 글자 그림자로만 가독성을 지킨다.
   슬라이드별 카피 위치(가운데/오른쪽/왼쪽)에 맞춰 음영 위치도 각각 유지한다. */
.hero-slide::after {
  background:
    radial-gradient(68% 54% at 50% 46%, rgba(8,20,16,.36) 0%, rgba(8,20,16,.08) 68%, rgba(8,20,16,0) 100%),
    linear-gradient(to bottom, rgba(8,20,16,.04) 0%, rgba(8,20,16,.08) 55%, rgba(8,20,16,.24) 100%);
}
@media (min-width: 900px) {
  .hero-slide:nth-child(3).on::after {
    background:
      radial-gradient(62% 56% at 74% 46%, rgba(8,20,16,.40) 0%, rgba(8,20,16,.10) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(8,20,16,.04) 0%, rgba(8,20,16,.08) 55%, rgba(8,20,16,.24) 100%);
  }
  .hero-slide:nth-child(1).on::after {
    background:
      radial-gradient(62% 56% at 28% 46%, rgba(8,20,16,.40) 0%, rgba(8,20,16,.10) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(8,20,16,.04) 0%, rgba(8,20,16,.08) 55%, rgba(8,20,16,.24) 100%);
  }
}
/* 딤이 얕아진 만큼 글자 그림자를 조금 더 준다 */
.hero-eyebrow, .hero-h1, .hero-lede { text-shadow: 0 1px 3px rgba(6,16,12,.45), 0 2px 20px rgba(6,16,12,.55); }

/* 카피 위치 전환을 부드럽게 (2026-09-16)
   이미지는 0.9초에 걸쳐 교차 페이드되는데 카피 정렬(가운데/오른쪽/왼쪽)은
   .on 클래스가 바뀌는 순간 즉시 튀어, 이전 사진 위에 새 위치의 글자가 잠깐 보였다.
   슬라이드별 규칙이 새로 매칭될 때 애니메이션이 처음부터 재생되는 성질을 이용해
   카피를 짧게 페이드인시켜 그 전환을 덮는다. align-items 는 애니메이션되지 않으므로
   opacity/transform 으로 처리한다. */
@keyframes heroCopyIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.hero-slides:has(> .hero-slide:nth-child(2).on) ~ .hero-copy,
.hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy,
.hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy {
  animation: heroCopyIn .6s cubic-bezier(.22,.8,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slides:has(> .hero-slide.on) ~ .hero-copy { animation: none; }
}

/* 히어로 아이브로우 — 알약 배지 (2026-09-16)
   초록 반투명이라 뒤 사진이 비쳐 보인다. 흐림은 지원할 때만 얹는다. */
.hero-eyebrow {
  display: inline-flex; align-items: center;
  padding: 9px 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(19, 122, 82, .34);
  color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .12em;
  text-shadow: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero-eyebrow { background: rgba(19, 122, 82, .26); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
}

/* 리드 문구를 정확히 두 줄로 (2026-09-16)
   max-width:46ch(456px) 라 <br> 앞 문장이 한 번 더 접혀 3줄이 됐다. 한 문장이 한 줄에 들어갈 폭을 준다. */
.hero-lede { max-width: min(880px, 90vw); }
@media (min-width: 900px) {
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy > *,
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy > * { max-width: 880px; }
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-lede,
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hero-lede { max-width: min(880px, 90vw); }
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-h1,
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hero-h1 { max-width: 640px; }
}

/* 아이브로우 배지 — 글자·패딩 조정 (2026-09-16) */
.hero-eyebrow { padding: 5px 20px; font-size: 15px; font-weight: 300; }

/* 히어로 하단 바 — 숫자 확대 + 보조문구 배지화 (2026-09-16) */
.hero-fact b { font-size: clamp(22px, 2.1vw, 32px); margin-bottom: 10px; }
.hero-fact span {
  display: inline-flex; align-items: center;
  padding: 4px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.10);
  font-size: 13px; font-weight: 300; letter-spacing: -.01em;
  color: rgba(255,255,255,.86); white-space: nowrap;
}
@media (max-width: 560px) {
  .hero-fact b { font-size: 23px; }
  .hero-fact span { font-size: 12.5px; padding: 3px 12px; white-space: normal; }
}

/* 배지를 시간 위로 (2026-09-16) — 마크업 순서를 바꿨으므로 여백도 뒤집는다 */
.hero-fact b { margin-bottom: 0; }
.hero-fact span { margin-bottom: 12px; }

/* 히어로 바 숫자 — 대시·하이픈이 글자에 붙어 보이던 문제 (2026-09-16)
   기존 letter-spacing:-.02em 이 32px 로 커지면서 눈에 띄게 좁아 보였다. */
.hero-fact b { letter-spacing: .015em; }

/* 히어로 버튼 확대 (2026-09-16) */
.hero-btn { font-size: 17.5px; min-height: 58px; padding: 0 34px; }
@media (max-width: 560px) { .hero-btn { font-size: 16px; min-height: 52px; padding: 0 26px; } }

/* 히어로 리드 문구 확대 (2026-09-16) — 폭도 함께 늘려 3줄 구성을 유지한다 */
.hero-lede { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.8; max-width: min(1000px, 92vw); }
@media (min-width: 900px) {
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-lede,
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hero-lede { max-width: min(1000px, 92vw); }
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy > *,
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy > * { max-width: 1000px; }
}
@media (max-width: 560px) { .hero-lede { font-size: 16px; } }

/* 히어로 카피 행간 1.5 통일 (2026-09-16) */
.hero-h1   { line-height: 1.5; }
.hero-lede { line-height: 1.5; }

/* 히어로 바 배지 — 지정값 적용 (2026-09-16). 모바일은 같은 비율로 축소. */
.hero-fact span {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .10);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .86);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hero-fact span { padding: 5px 16px 3px; font-size: 14px; white-space: normal; }
}

/* 리드 문구 — 줄마다 다른 방향으로 등장 (2026-09-16)
   1줄 아래→위, 2줄 왼쪽→오른쪽, 3줄 오른쪽→왼쪽. 0.18초씩 시차를 둔다.
   페이지 진입 때 한 번 재생된다. 모션을 줄이도록 설정한 사용자에게는 적용하지 않는다. */
.hero-lede-l { display: block; }
@keyframes ledeUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ledeRight { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes ledeLeft  { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
.hero-lede-l:nth-child(1) { animation: ledeUp    .85s cubic-bezier(.22,.8,.3,1) .20s both; }
.hero-lede-l:nth-child(2) { animation: ledeRight .85s cubic-bezier(.22,.8,.3,1) .38s both; }
.hero-lede-l:nth-child(3) { animation: ledeLeft  .85s cubic-bezier(.22,.8,.3,1) .56s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-lede-l { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* 줄을 <span>(block) 으로 쪼개면서 <p> 폭이 콘텐츠를 못 따라가 각 줄이 한 번 더 접혔다.
   가장 긴 줄에 맞춰 폭을 잡되 상한은 그대로 둔다. */
.hero-lede { width: max-content; max-width: min(1000px, 92vw); }
@media (min-width: 900px) {
  .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-lede,
  .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hero-lede { width: max-content; max-width: min(1000px, 92vw); }
}

/* 카테고리 카드 세로 확대 (2026-09-16) */
.cat { min-height: 400px; }
@media (min-width: 1100px) { .cat { min-height: 460px; } }
@media (min-width: 1440px) { .cat { min-height: 520px; } }
@media (max-width: 560px)  { .cat { min-height: 330px; } }

/* 홈 섹션 간 여백 확대 (2026-09-16)
   섹션마다 배경색이 달라 여백은 각 섹션의 padding-block 으로 만들어진다.
   맞닿는 두 섹션의 여백이 합쳐지므로 값을 한 번에 올린다. */
.cats    { padding-block: 108px; }
.hist    { padding-block: 116px; }
.tg-sec  { padding-block: 92px; }
.loc     { padding-block: 108px; }
@media (max-width: 900px) {
  .cats { padding-block: 76px; }
  .hist { padding-block: 82px; }
  .tg-sec { padding-block: 64px; }
  .loc { padding-block: 76px; }
}
@media (max-width: 560px) {
  .cats { padding-block: 62px; }
  .hist { padding-block: 68px; }
  .tg-sec { padding-block: 52px; }
  .loc { padding-block: 62px; }
}

/* SINCE 2012 — 더 밝게 (2026-09-16)
   딤 50~64% 는 인테리어 사진이 거의 안 보일 만큼 어두웠다. 절반 가까이 낮추고
   흰 글자는 그림자로 받친다. 카드도 밝은 유리 느낌으로 올린다. */
.hist {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.44) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
}
.hist .tg-h2, .hist .tg-sub, .hist-eyebrow, .hist-year b, .hist-year span {
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45);
}
.hist .hist-card {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hist .hist-card b { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.hist .tg-sub, .hist-card p, .hist-card em, .hist-year span { color: rgba(255,255,255,.88); }

/* SINCE 2012 — 카드를 로고 그린으로, 배경은 더 밝게 (2026-09-16)
   로고 실측색: 잎 #5BB431 / 글자 갈색 #764B1B. 카드에는 잎 그린을 쓴다.
   #5BB431 위의 흰 글씨는 대비가 2.6:1 밖에 안 나와 읽기 어렵다.
   그래서 카드 안 글자는 딥그린 계열로 뒤집는다(약 7:1). */
.hist {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.24) 0%, rgba(0,0,0,.17) 45%, rgba(0,0,0,.34) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
}
.hist .hist-card {
  background: rgba(91, 180, 49, .93);
  border-color: rgba(70, 142, 36, .9);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hist .hist-card p  { color: rgba(12, 42, 20, .78); }
.hist .hist-card b  { color: #0C2A14; text-shadow: none; }
.hist .hist-card em { color: rgba(12, 42, 20, .86); }

/* 카드 배경을 로고 브라운으로 (2026-09-16)
   실측 로고 브라운 #764B1B. 어두운 색이라 흰 글자 대비가 충분하다(약 7.3:1)
   — 초록(#5BB431)일 때 뒤집었던 글자색을 다시 흰색으로 되돌린다. */
.hist .hist-card {
  background: rgba(118, 75, 27, .90);
  border-color: rgba(95, 60, 21, .95);
}
.hist .hist-card b  { color: #fff; text-shadow: none; }
.hist .hist-card p  { color: rgba(255, 255, 255, .80); }
.hist .hist-card em { color: rgba(255, 255, 255, .84); }

/* SINCE 2012 카드 — 브라운 반투명은 사진과 섞여 탁했다 (2026-09-16)
   밝아진 사진 위에서는 '유리판' 쪽이 깨끗하다. 거의 불투명한 흰 카드로 바꾸고
   글자는 딥그린으로 뒤집는다. 로고색은 라벨 한 줄에만 포인트로 남긴다. */
.hist .hist-card {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(8, 20, 14, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hist .hist-card p  { color: var(--tg-med); font-weight: 500; letter-spacing: .02em; }
.hist .hist-card b  { color: var(--tg-deep); text-shadow: none; }
.hist .hist-card em { color: var(--tg-body); }

/* 카드 배경을 흰색 반투명으로 (2026-09-16)
   92% 는 거의 불투명해 사진이 안 비쳤다. 62% + 블러로 뒤 인테리어가 은은히 보이게 한다.
   딥그린 글자 대비는 최악의 경우(어두운 목재 위)에도 약 9:1 이라 여유가 있다. */
.hist .hist-card {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 12px 30px rgba(8, 20, 14, .14);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
}
/* 블러를 지원하지 않으면 사진이 그대로 비쳐 글자가 읽히지 않는다 — 그때만 불투명도를 올린다 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hist .hist-card { background: rgba(255, 255, 255, .88); }
}

/* 카드 더 투명하게 (2026-09-16) — 블러를 올려 글자 대비를 지킨다 */
.hist .hist-card {
  background: rgba(255, 255, 255, .44);
  border-color: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hist .hist-card { background: rgba(255, 255, 255, .84); }
}

/* SINCE 2012 부제 — 진한 색으로 (2026-09-16)
   사진 위 어두운 글자라 검은 그림자는 오히려 뭉개진다. 옅은 흰 헤일로로 분리한다. */
.hist .tg-sub {
  color: #14251E;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(255,255,255,.7), 0 0 16px rgba(255,255,255,.55);
}

/* 카드 — 더 투명하게 하기 직전 상태로 복귀 (2026-09-16, v100 값) */
.hist .hist-card {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hist .hist-card { background: rgba(255, 255, 255, .88); }
}

/* ═══════════════════════════════════════════════
   SINCE 2012 — '카드를 로고색으로 + 배경 더 밝게' 지시 이전 상태로 복귀
   (2026-09-16). 이후에 얹은 로고그린·브라운·흰유리·투명도·부제 딥그린을 모두 되돌린다.
   기준은 v=96: 딤 34/26/44, 카드 흰색 13% + 블러 6px, 글자 전부 흰색.
   ═══════════════════════════════════════════════ */
.hist {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.44) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
}
.hist .hist-card {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hist .hist-card b  { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.hist .hist-card p  { color: rgba(255,255,255,.88); font-weight: 300; letter-spacing: normal; }
.hist .hist-card em { color: rgba(255,255,255,.88); }
.hist .tg-sub {
  color: rgba(255,255,255,.88); font-weight: 300;
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45);
}

/* 배경 사진만 밝게 (2026-09-16) — 카드·글자 스타일은 건드리지 않는다.
   딤이 얕아진 만큼 흰 글자 그림자만 조금 더 준다. */
.hist {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.32) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
}
.hist .tg-h2, .hist .tg-sub, .hist-eyebrow, .hist-year b, .hist-year span {
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.55);
}

/* 연혁 카드 제목 확대 (2026-09-16) */
.hist .hist-card b { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.35; }
.hist .hist-card em { font-size: 15px; margin-top: 14px; }
@media (max-width: 560px) { .hist .hist-card b { font-size: 21px; } }

/* 연혁 연결선 위 라벨 — 지정값 + 알약형 (2026-09-16)
   padding 상하를 0 으로 두면 알약이 선처럼 납작해져서 5px 을 넣었다. */
.hist-rule::after {
  content: attr(data-span);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--tg-deep);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 5px 18px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hist-rule::after { font-size: 15px; padding: 4px 14px; }
}

/* 카드 라벨(진료과목별 협진 등) — 카드 상단에 걸치는 배지 (2026-09-16)
   연결선 위 알약과 같은 형태로 맞춘다. 배지가 카드 위로 half 만큼 올라오므로
   카드 위 여백과 그리드 간격을 그만큼 확보한다. */
.hist-cards { margin-top: 62px; row-gap: 32px; }
.hist-card { position: relative; overflow: visible; padding-top: 40px; }
.hist-card p {
  position: absolute; top: 0; left: 28px;
  transform: translateY(-50%);
  margin: 0;
  display: inline-flex; align-items: center;
  padding: 5px 18px; border-radius: 999px;
  background: var(--tg-deep);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px; font-weight: 400; letter-spacing: .02em;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hist-card { padding-top: 34px; }
  .hist-card p { left: 22px; font-size: 13px; padding: 4px 14px; }
}

/* 연혁 카드 설명문 확대 + 두께 300 (2026-09-16) */
.hist .hist-card em { font-size: 17px; font-weight: 300; line-height: 1.8; margin-top: 16px; }
@media (max-width: 560px) { .hist .hist-card em { font-size: 16px; } }

/* 가운데 카드만 그린 — 배경 사진의 밝은 구간과 겹쳐 가독성이 떨어졌다 (2026-09-16)
   반투명 유채색은 사진과 섞여 탁해지므로 거의 불투명하게 깐다. 흰 글자 대비 약 5.4:1. */
.hist-cards .hist-card:nth-child(2) {
  background: rgba(19, 122, 82, .94);
  border-color: rgba(15, 101, 68, .95);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hist-cards .hist-card:nth-child(2) b  { color: #fff; text-shadow: none; }
.hist-cards .hist-card:nth-child(2) em { color: rgba(255, 255, 255, .92); }
/* 배지는 흰색 — 안쪽 글자는 딥그린으로 뒤집는다 */
.hist-cards .hist-card:nth-child(2) p {
  background: #fff;
  border-color: #fff;
  color: var(--tg-deep);
  font-weight: 500;
}

/* 가운데 카드 — 지정값 적용 (2026-09-16)
   -webkit-backdrop-filter 는 지정에서 빠져 있어 그대로 두었다.
   구형 사파리에서는 위 규칙의 blur(6px) 이 남는데, 38% 반투명에서는 오히려 도움이 된다. */
.hist-cards .hist-card:nth-child(2) {
  background: rgb(26 71 53 / 38%);
  border-color: rgba(15, 101, 68, .95);
  backdrop-filter: none;
}

/* 가운데 카드 배지 — 살짝 투명하게 (2026-09-16)
   불투명 흰색이 카드보다 튀어 보였다. 80% 로 낮추고 블러로 안쪽 글자를 지킨다. */
.hist-cards .hist-card:nth-child(2) p {
  background: rgba(255, 255, 255, .80);
  border-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* 카드 테두리를 각 배지 색에 맞춘다 (2026-09-16)
   1·3번 배지 = 딥그린 → 테두리도 딥그린 / 2번 배지 = 흰색 → 테두리도 흰색 */
.hist .hist-card { border-color: rgba(19, 45, 39, .85); }
.hist-cards .hist-card:nth-child(2) { border-color: rgba(255, 255, 255, .80); }

/* 연도 숫자 확대 + 두께 800 (2026-09-16) */
.hist-year b { font-size: clamp(46px, 7vw, 78px); font-weight: 800; letter-spacing: -.035em; }
@media (max-width: 560px) { .hist-year b { font-size: 46px; } }

/* 연혁 라인 — 캡션 제거 · 라인 색을 배지에 맞춤 · 연도와 수직 중앙 정렬 (2026-09-16) */
.hist-line { align-items: center; }
.hist-year { display: flex; align-items: center; }
.hist-year b { line-height: 1; }
.hist-year span { display: none; }   /* 혹시 남아 있어도 보이지 않게 */
.hist-rule {
  height: 2px; align-self: center;
  background: linear-gradient(to right,
    rgba(19, 45, 39, .18) 0%,
    rgba(19, 45, 39, .92) 22%,
    rgba(19, 45, 39, .92) 78%,
    rgba(19, 45, 39, .18) 100%);
}
@media (max-width: 760px) {
  .hist-rule {
    background: linear-gradient(to bottom,
      rgba(19, 45, 39, .18) 0%, rgba(19, 45, 39, .92) 25%,
      rgba(19, 45, 39, .92) 75%, rgba(19, 45, 39, .18) 100%);
  }
}

/* SINCE 2012 제목·부제 가독성 (2026-09-16)
   배경을 밝게 한 뒤 흰 글자가 묻혔다. 사진 전체를 다시 어둡게 하면 요청과 어긋나므로
   제목 블록 뒤에만 원형 음영을 깔아 글자 영역만 받친다. */
.hist { position: relative; }
.hist::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: radial-gradient(74% 100% at 50% 24%,
    rgba(6, 18, 13, .68) 0%, rgba(6, 18, 13, .38) 52%, rgba(6, 18, 13, 0) 100%);
  pointer-events: none; z-index: 0;
}
.hist > .tg-wrap { position: relative; z-index: 1; }
.hist .tg-sub { color: #fff; font-weight: 400; }

/* SINCE 2012 머리 블록 행간 축소 (2026-09-16) */
.hist .hist-eyebrow { margin-bottom: 10px; }
.hist .tg-h2 { line-height: 1.2; margin-bottom: 8px; }
.hist .tg-sub { line-height: 1.5; }
.hist .tg-sec-head.ctr { margin-bottom: 30px; }

/* SINCE 2012 — 데스크톱에서는 쉼표 줄바꿈을 쓰지 않는다 (2026-09-16) */
@media (min-width: 761px) {
  .hist .tg-h2 br, .hist .tg-sub br { display: none; }
}

/* 모바일 연혁 — 세로 연결선이 보이게, 연도 사이를 띄우고 배지를 선 위에 올린다.
   앞서 넣은 `.hist-rule { height: 2px }` 가 모바일 세로선 높이를 덮어써서
   선이 사실상 사라져 있었다. */
@media (max-width: 760px) {
  .hist-line { flex-direction: column; gap: 26px; margin-top: 34px; }
  .hist-rule {
    width: 2px; height: 104px; flex: none; margin: 0; align-self: center;
    background: linear-gradient(to bottom,
      rgba(19, 45, 39, .18) 0%, rgba(19, 45, 39, .92) 22%,
      rgba(19, 45, 39, .92) 78%, rgba(19, 45, 39, .18) 100%);
  }
  .hist-rule::after {
    display: inline-flex; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
}

/* 모바일 하단 퀵메뉴(고정 65px) 가림 방지 — body 여백이 60px 이라 5px 모자랐다.
   아이폰 홈 인디케이터 영역까지 더한다. (2026-09-16) */
@media (max-width: 900px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* SINCE 2012 높이 확대 (2026-09-16) — 배경 사진이 보일 면적을 늘린다 */
.hist { padding-block: 150px; }
@media (min-width: 1100px) { .hist { min-height: 840px; display: flex; align-items: center; } }
@media (min-width: 1100px) { .hist > .tg-wrap { width: 100%; } }
@media (max-width: 900px) { .hist { padding-block: 100px; } }
@media (max-width: 560px) { .hist { padding-block: 80px; } }

/* 제목 뒤 음영 완화 + 연도·카드 블록 아래로 (2026-09-16) */
.hist::before {
  height: 50%;
  background: radial-gradient(70% 100% at 50% 22%,
    rgba(6, 18, 13, .44) 0%, rgba(6, 18, 13, .22) 55%, rgba(6, 18, 13, 0) 100%);
}
.hist-line { margin-top: 74px; }
.hist-cards { margin-top: 92px; }
@media (max-width: 760px) {
  .hist-line { margin-top: 52px; }
  .hist-cards { margin-top: 66px; }
}

/* 카드 블록만 조금 더 아래로 (2026-09-16) */
.hist-cards { margin-top: 120px; }
@media (max-width: 760px) { .hist-cards { margin-top: 82px; } }

/* SINCE 2012 머리 블록만 30px 위로 (2026-09-16)
   섹션 높이와 아래 블록 위치는 그대로 두려고 아래쪽에서 30px 을 되돌려준다. */
.hist .hist-eyebrow { margin-top: -30px; }
.hist .tg-sec-head.ctr { margin-bottom: 60px; }

/* 모바일 연도 확대 (2026-09-16) — 세로 배치라 폭에 여유가 있다 */
@media (max-width: 760px) { .hist-year b { font-size: 64px; } }
@media (max-width: 400px) { .hist-year b { font-size: 58px; } }

/* 보정 — 400px 이하 규칙(58px)이 390px 같은 일반 폰 폭까지 잡아 작아졌다.
   64px 이어도 '2012' 가 162px 라 320px 화면에서도 여유가 있어 하나로 통일한다. */
@media (max-width: 760px) { .hist-year b { font-size: 64px; } }
@media (max-width: 400px) { .hist-year b { font-size: 64px; } }

/* 연혁 카드 제목 두께 300 (2026-09-16) */
.hist .hist-card b { font-weight: 300; }

/* 히어로 제목 — 지정값 적용 (2026-09-16) */
.hero-h1 {
  font-weight: 200;
  letter-spacing: -.032em;
  line-height: 1.3;
}

/* 히어로 리드 2px 축소 (2026-09-16) */
.hero-lede { font-size: clamp(15px, 1.22vw, 19px); }
@media (max-width: 560px) { .hero-lede { font-size: 14px; } }

/* 히어로 리드 — 불투명 흰색 (2026-09-16) */
.hero-lede, .hero-lede-l { color: #fff; }

/* 연혁 카드 텍스트 — 불투명 흰색 (2026-09-16)
   가운데 카드 배지는 배경이 흰색이라 글자를 흰색으로 두면 사라진다 — 딥그린 유지. */
.hist .hist-card b,
.hist .hist-card em,
.hist .hist-card p { color: #fff; }
.hist-cards .hist-card:nth-child(2) p { color: var(--tg-deep); }

/* 가운데 카드 본문도 불투명 — 앞선 nth-child 규칙이 특이도로 이기고 있었다 */
.hist-cards .hist-card:nth-child(2) em { color: #fff; }

/* 섹션 제목 .tg-h2 — PC 45px / weight 200, 모바일 비례 (2026-09-16) */
.tg-h2 { font-size: 45px; font-weight: 200; line-height: 1.3; letter-spacing: -.03em; }
@media (max-width: 1200px) { .tg-h2 { font-size: 38px; } }
@media (max-width: 900px)  { .tg-h2 { font-size: 32px; } }
@media (max-width: 560px)  { .tg-h2 { font-size: 27px; } }

/* + 토글을 메뉴 항목 세로 중앙으로 (2026-09-16)
   height 를 38px 로 고정해 두어 실제 링크 높이와 어긋나면 위쪽에 붙어 보였다.
   위아래로 늘려 행 전체를 차지하게 하면 ::before/::after 의 50% 가 곧 행의 중앙이 된다. */
.gnb-sub-acc { top: 0; bottom: 0; height: auto; }
@media (max-width: 1100px) { .gnb-sub-acc { top: 0; bottom: 0; height: auto; } }

/* 컨테이너 폭 1600 → 1500 (2026-09-16) */
:root { --max-w: 1500px; }
.tg-wrap { max-width: 1500px; }

/* ═══════════════════════════════════════════════
   흉살 부위·시술 맵 (.hmap) — 2026-09-16
   레퍼런스의 '중앙 인물 + 좌우 라벨' 구성을 반응형으로 옮긴 것.
   좌우로 뻗는 실선 대신 각 카드에 짧은 리더선을 두어 중앙을 향하게 한다.
   ═══════════════════════════════════════════════ */
.hmap-lead {
  margin: 0 0 26px; text-align: center;
  font-size: 17px; font-weight: 300; line-height: 1.7;
  color: var(--tg-body); word-break: keep-all;
}
.hmap {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  align-items: center; padding: 30px 24px; background: var(--tg-ground-2);
}
@media (min-width: 900px) {
  .hmap { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) minmax(0, 1fr); gap: 26px; padding: 40px 34px; }
}
.hmap-fig { margin: 0; order: -1; }
@media (min-width: 900px) { .hmap-fig { order: 0; } }
.hmap-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  box-shadow: 0 16px 40px rgba(12, 32, 24, .14);
}
.hmap-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: center; }
.hmap-col li {
  position: relative; padding: 16px 20px;
  background: #fff; border: 1px solid var(--tg-hair);
}
.hmap-col b {
  display: block; margin-bottom: 5px;
  font-size: 16px; font-weight: 500; letter-spacing: -.02em;
  color: var(--tg-ink); word-break: keep-all;
}
.hmap-col span {
  display: block; font-size: 14.5px; font-weight: 300; line-height: 1.6;
  color: var(--tg-body); word-break: keep-all;
}
/* 리더선 — 카드에서 가운데 사진 쪽으로 짧게 뻗는다 */
@media (min-width: 900px) {
  .hmap-col.is-left  { text-align: right; }
  .hmap-col.is-right { text-align: left; }
  .hmap-col li::after {
    content: ""; position: absolute; top: 50%; width: 20px; height: 1px;
    background: var(--tg-hair-2, #d7e0db);
  }
  .hmap-col.is-left  li::after { right: -21px; }
  .hmap-col.is-right li::after { left: -21px; }
}
.hmap-note {
  margin: 20px 0 0; text-align: center;
  font-size: 14.5px; font-weight: 300; color: #5d6b64; word-break: keep-all;
}

/* 피부·뷰티 카드 — 사진 위에 자주색을 살짝 (2026-09-16)
   나머지 카드의 딥그린 딤과 달리, 뷰티 트랙은 로즈/플럼 계열로 물들인다. */
.cat[data-key="skin"]::after {
  background-image: linear-gradient(to bottom,
    rgba(122, 64, 86, .26) 0%,
    rgba(74, 36, 50, .58) 55%,
    rgba(38, 16, 24, .88) 100%);
  background-color: rgba(90, 52, 66, .18);
}
.cat[data-key="skin"]:hover::after {
  background-image: linear-gradient(to bottom,
    rgba(122, 64, 86, .36) 0%,
    rgba(74, 36, 50, .66) 55%,
    rgba(38, 16, 24, .92) 100%);
}

/* 카드 텍스트 가독성 (2026-09-16)
   피부·뷰티 카드 사진이 흰 배경 인물컷이라 글자 구간의 딤이 모자랐다.
   텍스트 영역의 딤을 끌어올리고, 모든 카드 글자에 그림자를 깔아
   어떤 사진이 들어와도 흰 글자가 묻히지 않게 한다. */
.cat[data-key="skin"]::after {
  background-image: linear-gradient(to bottom,
    rgba(122, 64, 86, .22) 0%,
    rgba(58, 26, 38, .64) 42%,
    rgba(30, 12, 18, .94) 100%);
}
.cat[data-key="skin"]:hover::after {
  background-image: linear-gradient(to bottom,
    rgba(122, 64, 86, .32) 0%,
    rgba(58, 26, 38, .72) 42%,
    rgba(30, 12, 18, .96) 100%);
}
.cat-no, .cat-name, .cat-sub, .cat-go {
  text-shadow: 0 1px 3px rgba(6, 14, 10, .45), 0 1px 14px rgba(6, 14, 10, .5);
}

/* 피부·뷰티 카드 — 붉은 톤 그라데이션 배경 (2026-09-16)
   카드 바탕 자체를 버건디 그라데이션으로 깔고, 사진 위 오버레이도 같은 계열로 맞춘다. */
.cat[data-key="skin"] {
  background-image: linear-gradient(160deg, #8E2D45 0%, #6B1B32 45%, #431020 100%);
  background-color: #6B1B32;
}
.cat[data-key="skin"]::after {
  background-image: linear-gradient(to bottom,
    rgba(150, 44, 68, .34) 0%,
    rgba(112, 24, 46, .74) 45%,
    rgba(64, 10, 26, .95) 100%);
  background-color: transparent;
}
.cat[data-key="skin"]:hover::after {
  background-image: linear-gradient(to bottom,
    rgba(150, 44, 68, .44) 0%,
    rgba(112, 24, 46, .80) 45%,
    rgba(64, 10, 26, .96) 100%);
}

/* 카드 사진이 딤 위에 얹혀 있던 문제 (2026-09-16)
   `.cat > *` 가 직계 자식인 <img> 에도 z-index:2 를 줘서, z-index 가 auto 인
   ::after 딤보다 사진이 위에 그려지고 있었다. 그래서 그라데이션이 전혀 보이지 않았다.
   사진 0 → 딤 1 → 글자 2 순서로 못 박는다. */
.cat img { z-index: 0; }
.cat::after { z-index: 1; }
.cat-no, .cat-name, .cat-sub, .cat-go { position: relative; z-index: 2; }

/* 피부·뷰티 카드 — 위쪽 딤을 낮춰 인물이 드러나게 (2026-09-16)
   글자가 놓이는 아래쪽은 그대로 두어 가독성을 지킨다. */
.cat[data-key="skin"]::after {
  background-image: linear-gradient(to bottom,
    rgba(150, 44, 68, .10) 0%,
    rgba(140, 38, 62, .26) 30%,
    rgba(112, 24, 46, .72) 58%,
    rgba(64, 10, 26, .95) 100%);
}
.cat[data-key="skin"]:hover::after {
  background-image: linear-gradient(to bottom,
    rgba(150, 44, 68, .18) 0%,
    rgba(140, 38, 62, .34) 30%,
    rgba(112, 24, 46, .78) 58%,
    rgba(64, 10, 26, .96) 100%);
}

/* 피부·뷰티 카드 — 위쪽 한 단계 더 밝게 (2026-09-16) */
.cat[data-key="skin"]::after {
  background-image: linear-gradient(to bottom,
    rgba(150, 44, 68, .00) 0%,
    rgba(140, 38, 62, .12) 34%,
    rgba(118, 26, 48, .58) 60%,
    rgba(64, 10, 26, .94) 100%);
}
.cat[data-key="skin"]:hover::after {
  background-image: linear-gradient(to bottom,
    rgba(150, 44, 68, .08) 0%,
    rgba(140, 38, 62, .20) 34%,
    rgba(118, 26, 48, .66) 60%,
    rgba(64, 10, 26, .96) 100%);
}

/* 카드 넘버 라벨(CLINIC 01) — 확대 + 두께 200 (2026-09-16) */
.cat-no { font-size: 15px; font-weight: 200; letter-spacing: .18em; margin-bottom: 12px; }
@media (max-width: 560px) { .cat-no { font-size: 14px; } }

/* CLINIC 라벨 한 단계 더 (2026-09-16) */
.cat-no { font-size: 18px; margin-bottom: 14px; }
@media (max-width: 560px) { .cat-no { font-size: 16px; } }

/* 뷰티 트랙 카드 라벨 — 불투명 흰색 (2026-09-16) */
.cat[data-track="beauty"] .cat-no {
  color: rgb(255 255 255);
}

/* CLINIC 라벨 ↔ 센터명 간격 좁힘 (2026-09-16) */
.cat-no { margin-bottom: 4px; }
.cat-name { line-height: 1.3; margin-bottom: 10px; }

/* 카드 — 라벨 축소 · 센터명 확대/두께 200 (2026-09-16) */
.cat-no { font-size: 13px; letter-spacing: .2em; }
.cat-name { font-size: clamp(24px, 2.6vw, 30px); font-weight: 200; letter-spacing: -.03em; line-height: 1.3; }
@media (max-width: 560px) {
  .cat-no { font-size: 12px; }
  .cat-name { font-size: 23px; }
}

/* 홈 센터 카드 4개 구성 (2026-09-16) */
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* SINCE 2012 — 한의원안내로 가는 버튼 (2026-09-16)
   사진 위에 놓이므로 흰 고스트로 두고, 호버에서 흰 배경으로 반전시킨다. */
.hist-cta { margin-top: 48px; display: flex; justify-content: center; }
.hist-btn {
  gap: 9px; min-height: 56px; padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 16px; font-weight: 400; letter-spacing: -.01em;
  transition: background .16s, border-color .16s, color .16s;
}
.hist-btn:hover { background: #fff; border-color: #fff; color: var(--tg-deep); text-decoration: none; }
.hist-btn svg { transition: transform .18s; }
.hist-btn:hover svg { transform: translateX(4px); }
@media (max-width: 560px) { .hist-cta { margin-top: 36px; } .hist-btn { min-height: 52px; padding: 0 24px; font-size: 15px; } }

/* SINCE 2012 버튼 제거 (2026-09-16)
   '한의원 안내 보기' 가 오시는 길 패널과 문구·목적지까지 같아 한 페이지에 두 번 나왔다.
   마크업에서 뺐고, 스타일도 쓰이지 않으므로 무효화해 둔다. */
.hist-cta { display: none; }

/* 카드 '자세히 보기' — 지정값 적용 (2026-09-16). 모바일은 비례 축소. */
.cat-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 200;
  color: #fff;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
@media (max-width: 560px) {
  .cat-go { font-size: 15px; gap: 8px; padding-top: 12px; }
}

/* ═══════════════════════════════════════════════
   상세페이지 타이포 통일 (2026-09-16)
   홈이 얇은 대형 제목(200) 체계로 넘어갔는데 상세페이지는 600~700 그대로여서
   같은 사이트로 보이지 않았다. 제목 계열을 200~400 으로 내리고 크기로 위계를 만든다.
   ═══════════════════════════════════════════════ */

/* 서브히어로 페이지명 */
.pg-title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 200; letter-spacing: -.032em; line-height: 1.25; }

/* 리드 헤드라인 — 섹션 제목보다 한 단계 위 */
.hx-lead .pg-h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 200; letter-spacing: -.032em; }

/* 섹션 제목 */
.pg-h2 { font-size: clamp(26px, 2.9vw, 38px); font-weight: 200; letter-spacing: -.03em; line-height: 1.3; }

/* 아이브로우 — 홈의 CLINIC 라벨과 같은 규격 */
.hx-eyebrow { font-size: 13px; font-weight: 200; letter-spacing: .2em; }

/* 카드 제목 — 굵기를 낮추고 크기로 구분한다 */
.proc-card h3   { font-size: 21px; font-weight: 400; letter-spacing: -.022em; line-height: 1.35; }
.tx h3          { font-size: 21px; font-weight: 400; letter-spacing: -.022em; line-height: 1.35; }
.step3-card h3  { font-size: 23px; font-weight: 300; letter-spacing: -.025em; }
.pick-card h3   { font-size: 23px; font-weight: 300; letter-spacing: -.025em; }
.hx-row-txt h3  { font-size: clamp(21px, 1.9vw, 26px); font-weight: 300; }
.faq-subject    { font-size: 18px; font-weight: 400; letter-spacing: -.018em; }

/* 라벨류 — 굵기 대신 자간으로 구분 */
.proc-label { font-weight: 400; letter-spacing: .14em; font-size: 12.5px; }
.pick-no    { font-weight: 200; letter-spacing: .2em; font-size: 13px; }
.step3-no   { font-weight: 300; letter-spacing: .16em; }

@media (max-width: 560px) {
  .proc-card h3, .tx h3 { font-size: 19px; }
  .step3-card h3, .pick-card h3 { font-size: 21px; }
  .faq-subject { font-size: 17px; }
}

/* ═══════════════════════════════════════════════
   서브히어로 배경 — 피부·뷰티 트랙 (2026-09-16)
   인물이 오른쪽에 있고 왼쪽이 비어 있는 컷이라, 브레드크럼·제목이 놓이는
   왼쪽에 흰 그라데이션을 얹어 글자가 사진과 겹치지 않게 한다.
   body.track-beauty 기준이라 피부·뷰티 하위 페이지 전체에 함께 적용된다.
   ═══════════════════════════════════════════════ */
body.track-beauty .pg-hero {
  position: relative;
  border-bottom: 0;
  background-color: #F7E3E4;
  background-image: url("/assets/images/subhero-skin.jpg?v=1");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  padding-block: 64px 0;
}
body.track-beauty .pg-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgba(255, 255, 255, .88) 0%,
    rgba(255, 255, 255, .72) 34%,
    rgba(255, 255, 255, .30) 58%,
    rgba(255, 255, 255, 0) 78%);
}
body.track-beauty .pg-hero > .tg-wrap { position: relative; z-index: 1; }
/* 배경 위에서는 글자를 더 진하게 */
body.track-beauty .pg-hero .pg-title { color: var(--tg-ink); }
body.track-beauty .pg-hero .pg-lede  { color: var(--tg-ink-2); }
body.track-beauty .pg-hero .pg-crumb a,
body.track-beauty .pg-hero .pg-crumb .now { color: var(--tg-ink-2); }
/* 탭 레일은 반투명 흰 판 위에 올려 사진과 분리한다 */
body.track-beauty .pg-tabs {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, .8);
}
@media (max-width: 900px) {
  body.track-beauty .pg-hero { background-position: 78% center; padding-block: 44px 0; }
  body.track-beauty .pg-hero::before {
    background: linear-gradient(to right, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 50%, rgba(255,255,255,.55) 100%);
  }
}

/* 서브히어로 탭 레일 — 전폭 흰 띠 (2026-09-16)
   이전에는 컨테이너 폭 반투명 판이라 좌우 끝에서 배경 사진이 삐져나와 지저분했다.
   마크업에서 .tg-wrap 밖으로 빼고, 띠 자체를 화면 전폭 흰색으로 둔다. */
.pg-tabs-bar {
  background: #fff;
  border-top: 1px solid var(--tg-hair);
  border-bottom: 1px solid var(--tg-hair);
}
body.track-beauty .pg-tabs-bar {
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid rgba(154, 88, 110, .18);
}
/* 이전에 넣은 반투명 판·블러는 더 이상 필요 없다 */
body.track-beauty .pg-tabs {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-top: 0;
}
.pg-tabs { margin-top: 0; }
.pg-hero { padding-bottom: 0; }
body.track-beauty .pg-hero { padding-block: 64px 0; }

/* 서브히어로 재조정 (2026-09-16)
   - 띠가 낮아 인물 머리가 잘리고, 흰 탭 바까지 더해져 가로 줄이 세 겹으로 쌓였다.
   - 배너를 키우고, 탭은 별도 흰 띠 없이 배너 안에 조용히 얹는다. */
body.track-beauty .pg-hero {
  min-height: 400px;
  padding-block: 76px 0;
  background-position: right 0 top 22%;
  display: flex; flex-direction: column; justify-content: center;
}
body.track-beauty .pg-tabs-bar {
  background: transparent;
  border: 0;
  margin-top: 26px;
}
body.track-beauty .pg-tabs ul { gap: 0 28px; }
body.track-beauty .pg-tabs a {
  padding: 8px 0; font-size: 15.5px; font-weight: 300;
  color: var(--tg-ink-2); border-bottom: 2px solid transparent;
}
body.track-beauty .pg-tabs a:hover { color: var(--tg-beauty); }
body.track-beauty .pg-tabs a.on {
  color: var(--tg-beauty-deep); font-weight: 400;
  border-bottom-color: var(--tg-beauty);
}
/* 왼쪽 흰 그라데이션을 조금 넓혀 탭까지 덮는다 */
body.track-beauty .pg-hero::before {
  background: linear-gradient(to right,
    rgba(255, 255, 255, .90) 0%,
    rgba(255, 255, 255, .78) 42%,
    rgba(255, 255, 255, .34) 64%,
    rgba(255, 255, 255, 0) 82%);
}
@media (max-width: 900px) {
  body.track-beauty .pg-hero { min-height: 300px; padding-block: 52px 0; }
  body.track-beauty .pg-tabs-bar { margin-top: 18px; }
}

/* 보정 — .pg-hero 를 flex 컬럼으로 바꾸면서 자식이 콘텐츠 폭(643px)으로 쪼그라들었다.
   .tg-wrap 의 margin:0 auto 가 stretch 를 눌러 shrink-to-fit 이 된 탓이다. */
body.track-beauty .pg-hero > .tg-wrap,
body.track-beauty .pg-hero > .pg-tabs-bar { width: 100%; }

/* ═══════════════════════════════════════════════
   브레드크럼 — 홈 | 대 | 중 | 소 + 대·중 아코디언 (2026-09-16)
   기존 형제 탭 레일을 대체한다. 탭이 배너 오른쪽에서 사진 위에 얹혀
   글자가 보이지 않던 문제도 함께 없어진다.
   ═══════════════════════════════════════════════ */
.pg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: 20px; }
.crumb-sep { color: rgba(19, 45, 39, .28); font-weight: 200; }
.crumb-link {
  font-size: 14.5px; font-weight: 300; color: var(--tg-ink-2);
  text-decoration: none; padding: 4px 0;
}
a.crumb-link:hover { color: var(--tg-accent); text-decoration: none; }
.crumb-link.now { color: var(--tg-ink); font-weight: 400; }

.crumb-node { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.crumb-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tg-mute); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .15s, color .15s, transform .2s;
}
.crumb-toggle:hover { background: rgba(19, 45, 39, .08); color: var(--tg-ink); }
.crumb-toggle:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; }
.crumb-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--tg-ink); }

.crumb-drop {
  position: absolute; top: calc(100% + 8px); left: -12px; z-index: 30;
  min-width: 190px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--tg-hair);
  box-shadow: 0 18px 40px rgba(12, 32, 24, .16);
}
.crumb-drop li { margin: 0; }
.crumb-drop a {
  display: block; padding: 10px 14px;
  font-size: 15px; font-weight: 300; color: var(--tg-ink-2);
  text-decoration: none; word-break: keep-all;
}
.crumb-drop a:hover { background: var(--tg-accent-soft); color: var(--tg-accent-deep); text-decoration: none; }
.crumb-drop a.on { color: var(--tg-accent-deep); font-weight: 400; background: var(--tg-accent-soft); }

@media (max-width: 560px) {
  .pg-crumb { gap: 0 8px; margin-bottom: 16px; }
  .crumb-link { font-size: 13.5px; }
  .crumb-drop { min-width: 170px; left: -8px; }
}

/* GNB 3단 아코디언 버튼 위치 바로잡기 (2026-09-16)
   앞서 'top:0; bottom:0' 으로 세로 중앙을 맞췄는데, 펼쳐진 상태에서는 li 높이가
   부모 링크(56px) + 하위 목록(83px) = 138px 이라 +/- 가 하위 항목 줄에 찍혔다.
   li 를 2행 그리드로 만들어 버튼이 '부모 링크 행'과 정확히 같은 높이를 갖게 한다.
   폰트·패딩이 바뀌어도 자동으로 따라간다. */
.gnb-panel li.has-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  grid-template-areas: "link btn" "sub sub";
  align-items: stretch;
}
.gnb-panel li.has-sub > a          { grid-area: link; }
.gnb-panel li.has-sub > .gnb-sub   { grid-area: sub; }
.gnb-panel li.has-sub > .gnb-sub-acc {
  grid-area: btn;
  position: relative; top: auto; right: auto; bottom: auto;
  width: 34px; height: auto; align-self: stretch;
}
@media (max-width: 1100px) {
  .gnb-panel li.has-sub { grid-template-columns: minmax(0, 1fr) 40px; }
  .gnb-panel li.has-sub > .gnb-sub-acc { width: 40px; }
}

/* 브레드크럼 아코디언 — 떠 있는 드롭다운이 아니라 '아래로 펼쳐지는 한 줄' (2026-09-16)
   앞 버전은 absolute 패널이라 브레드크럼 줄 위로 겹쳐 떠올랐다. */
.crumb-drop {
  position: static; left: auto; top: auto; z-index: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  min-width: 0; margin: 0 0 22px; padding: 12px 14px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(19, 45, 39, .10);
  box-shadow: none;
}
.crumb-drop li { display: inline-flex; }
.crumb-drop a {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 300; color: var(--tg-ink-2);
  background: transparent; white-space: nowrap;
}
.crumb-drop a:hover { background: var(--tg-accent-soft); color: var(--tg-accent-deep); }
.crumb-drop a.on { background: var(--tg-accent); color: #fff; font-weight: 400; }
body.track-beauty .crumb-drop a.on { background: var(--tg-beauty); }
body.track-beauty .crumb-drop a:hover { background: var(--tg-beauty-soft); color: var(--tg-beauty-deep); }
body.track-beauty .crumb-drop a.on:hover { background: var(--tg-beauty-deep); color: #fff; }
@media (max-width: 560px) {
  .crumb-drop { padding: 10px; gap: 6px 8px; margin-bottom: 18px; }
  .crumb-drop a { padding: 6px 13px; font-size: 13.5px; }
}

/* [hidden] 은 UA 의 display:none 인데, 위에서 준 display:flex 가 이를 덮어
   두 목록이 항상 펼쳐진 채로 보였다. 명시적으로 되돌린다. (2026-09-16) */
.crumb-drop[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════
   브레드크럼 = 위치 표시만 / 그 아래 = 메뉴 이동 아코디언 (2026-09-16)
   브레드크럼에 토글을 달았던 앞 버전을 걷어낸다.
   ═══════════════════════════════════════════════ */
.pg-crumb .crumb-toggle, .crumb-drop { display: none !important; }

.navacc { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; align-items: flex-start; }
.navacc-item { position: relative; }
.navacc-head {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 16px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(19, 45, 39, .12);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, background .15s;
}
.navacc-head:hover { border-color: rgba(19, 45, 39, .28); background: #fff; }
.navacc-head:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; }
.navacc-label {
  font-size: 12px; font-weight: 300; letter-spacing: .14em;
  color: var(--tg-mute); text-transform: uppercase;
}
.navacc-cur { font-size: 15.5px; font-weight: 400; color: var(--tg-ink); letter-spacing: -.02em; }
.navacc-ico { color: var(--tg-mute); transition: transform .2s; }
.navacc-head[aria-expanded="true"] .navacc-ico { transform: rotate(180deg); }
.navacc-head[aria-expanded="true"] { border-color: rgba(19, 45, 39, .28); background: #fff; }

.navacc-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 100%; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--tg-hair);
  box-shadow: 0 16px 36px rgba(12, 32, 24, .16);
}
.navacc-list[hidden] { display: none !important; }
.navacc-list a {
  display: block; padding: 10px 14px; white-space: nowrap;
  font-size: 15px; font-weight: 300; color: var(--tg-ink-2); text-decoration: none;
}
.navacc-list a:hover { background: var(--tg-accent-soft); color: var(--tg-accent-deep); text-decoration: none; }
.navacc-list a.on { background: var(--tg-accent-soft); color: var(--tg-accent-deep); font-weight: 400; }
body.track-beauty .navacc-list a:hover,
body.track-beauty .navacc-list a.on { background: var(--tg-beauty-soft); color: var(--tg-beauty-deep); }

@media (max-width: 560px) {
  .navacc { gap: 8px; margin-bottom: 20px; }
  .navacc-head { min-height: 42px; padding: 0 13px; gap: 9px; }
  .navacc-cur { font-size: 14.5px; }
  .navacc-label { font-size: 11px; }
}

/* 메뉴 아코디언을 배너 밖 흰 띠로 (2026-09-16) */
.navacc-bar {
  background: #fff;
  border-bottom: 1px solid var(--tg-hair);
  padding-block: 16px;
}
body.track-beauty .navacc-bar { border-bottom-color: rgba(154, 88, 110, .16); }
.navacc { margin: 0; }
.navacc-head {
  background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--tg-hair);
}
.navacc-head:hover, .navacc-head[aria-expanded="true"] { border-color: var(--tg-ink-2); }
@media (max-width: 560px) { .navacc-bar { padding-block: 12px; } }

/* 소메뉴 아코디언 — 현재 선택이 없을 때는 안내 문구로 보이게 (2026-09-16) */
.navacc-head.is-ph .navacc-cur { color: var(--tg-mute); font-weight: 300; }
.navacc-head.is-ph { border-style: dashed; }
.navacc-head.is-ph:hover { border-style: solid; }

/* 아코디언 메뉴 글자 확대 (2026-09-16) */
.navacc-cur { font-size: 18px; }
.navacc-head { min-height: 54px; padding: 0 22px; gap: 12px; }
.navacc-ico { width: 16px; height: 16px; }
.navacc-list a { font-size: 17px; padding: 12px 18px; }
@media (max-width: 560px) {
  .navacc-cur { font-size: 16px; }
  .navacc-head { min-height: 48px; padding: 0 16px; }
  .navacc-list a { font-size: 15.5px; padding: 11px 15px; }
}

/* 모바일 가로 스크롤 해결 (2026-09-16)
   하단 상담 CTA 가 원인이었다. .pg-cta 가 가로 flex 인데 .tg-cta 에 flex-shrink:0 이
   걸려 있어 버튼 묶음(216+139+10=365px)이 내부 폭 310px 를 넘겨도 줄지 않았다.
   좁은 화면에서는 세로로 쌓고 버튼이 폭을 나눠 갖게 한다. */
@media (max-width: 700px) {
  .pg-cta { flex-direction: column; align-items: stretch; }
  .pg-cta .tg-cta { flex-shrink: 1; width: 100%; }
  .pg-cta .tg-cta .tg-btn { flex: 1 1 auto; min-width: 0; padding: 0 18px; }
}
/* 고정 퀵메뉴가 뷰포트보다 넓게 잡히지 않도록 못 박는다 */
@media (max-width: 900px) {
  .qm { left: 0; right: 0; width: auto; max-width: 100vw; box-sizing: border-box; }
}

/* 아코디언 메뉴 글자 축소 (2026-09-16) */
.navacc-cur { font-size: 16px; }
.navacc-head { min-height: 48px; padding: 0 18px; gap: 10px; }
.navacc-ico { width: 14px; height: 14px; }
.navacc-list a { font-size: 15.5px; padding: 11px 16px; }
@media (max-width: 560px) {
  .navacc-cur { font-size: 15px; }
  .navacc-head { min-height: 44px; padding: 0 14px; }
  .navacc-list a { font-size: 14.5px; padding: 10px 14px; }
}

/* 본문 컨테이너 1180 → 1500 (2026-09-16)
   앞서 '상세페이지 중앙정렬'(고객 요청 1항) 때 1180px 로 좁혔던 것을 되돌린다.
   섹션 제목·부제의 가운데 정렬은 그대로 유지한다.
   본문 문단은 너무 길어지지 않게 읽기 폭만 따로 잡아 준다. */
.pg-body > .tg-wrap { max-width: 1500px; }
.pg-body .pg-intro { max-width: 76ch; }
.pg-body .pg-h2-sub { max-width: 84ch; }
.pg-body .chk, .pg-body .pg-box { max-width: 1100px; }

/* 흉살 리드 본문 확대 (2026-09-16) */
.hx-lead .pg-intro { font-size: 19px; line-height: 1.8; max-width: 62ch; }
@media (max-width: 900px) { .hx-lead .pg-intro { font-size: 17.5px; } }
@media (max-width: 560px) { .hx-lead .pg-intro { font-size: 16.5px; } }

/* 흉살 리드 체크 3줄 확대 (2026-09-16)
   리드 본문을 19px 로 키운 뒤라, 그 아래 핵심 3줄이 상대적으로 작아 보였다.
   체크 표시도 글자 크기에 맞춰 같이 키운다. */
.hx-keys { gap: 12px; }
.hx-keys li { font-size: 18px; line-height: 1.7; padding-left: 30px; }
.hx-keys li::before { left: 4px; width: 7px; height: 13px; border-right-width: 2px; border-bottom-width: 2px; }
@media (max-width: 900px) { .hx-keys li { font-size: 17px; } }
@media (max-width: 560px) { .hx-keys li { font-size: 16px; padding-left: 27px; } }

/* 리드 사진 — 세로 가운데가 아니라 HYUNGSAL CLINIC 배지 윗선에 맞춘다 (2026-09-16)
   글 칸의 첫 요소가 배지이고 위쪽 여백이 0 이라, 두 칸을 위 기준으로 세우면 윗선이 정확히 맞는다. */
@media (min-width: 900px) {
  .hx-lead { align-items: start; }
  .hx-lead .figspot { align-self: start; margin-top: 0; }
}

/* 좌우 2단 섹션 — 왼쪽에 제목, 오른쪽에 내용 (2026-09-16)
   SYMPTOMS 섹션 요청. 다른 섹션에도 그대로 쓸 수 있게 .hx-split 으로 일반화한다.
   본문 기본값이 '가운데 정렬'이라 이 안에서는 전부 왼쪽으로 되돌린다. */
.hx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
@media (min-width: 900px) {
  .hx-split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 60px; }
}
.pg-body .hx-split .hx-eyebrow,
.pg-body .hx-split .pg-h2,
.pg-body .hx-split .pg-h2-sub { text-align: left; }
.pg-body .hx-split .pg-h2-sub { max-width: 36ch; margin-left: 0; margin-right: 0; }
.hx-split .pg-h2 { line-height: 1.3; }
/* 오른쪽 칸은 제 폭을 다 쓴다 — 가운데 축 정렬 규칙을 끈다 */
.pg-body .hx-split .chk,
.pg-body .hx-split .pg-box { max-width: none; margin-left: 0; margin-right: 0; }
.hx-split-bd > :first-child { margin-top: 0; }
.hx-split-bd > :last-child { margin-bottom: 0; }
/* 2단 안의 체크리스트는 한 줄에 한 항목 — 오른쪽 칸을 또 2열로 쪼개면 문장이 두 줄로 꺾인다 */
.hx-split .chk { grid-template-columns: minmax(0, 1fr); }

/* ═══ 2단 섹션 확장 — 흉살 페이지 전 섹션 적용 (2026-09-16) ═══ */
/* 오른쪽 칸 안에서 다시 3~5열로 쪼개지면 카드가 너무 좁아진다. 최대 2열까지만. */
.hx-split-bd .tx-grid,
.hx-split-bd .pr { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .hx-split-bd .tx-grid,
  .hx-split-bd .pr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 3 STEP 은 사진이 들어가므로 오른쪽 칸에서는 2열까지만 */
.hx-split-bd .step3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .hx-split-bd .step3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 오른쪽 칸 안에서는 가운데 축 정렬 규칙을 전부 끈다 */
.pg-body .hx-split-bd .pg-note { text-align: left; }

/* ═══ 원리 3컷 — 유착 → 박리 → 회복 ═══ */
/* 2단 그리드를 가로질러 전체 폭을 쓴다 */
.hx-split > .hx-steps { grid-column: 1 / -1; }
.hx-steps { margin: 40px 0 0; }
.hx-steps-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.hx-stepfig {
  flex: 1 1 0; min-width: 0; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hx-stepfig img { display: block; width: 100%; height: auto; background: #fff; }
.hx-stepfig b {
  margin-top: 6px; font-size: 20px; font-weight: 500; letter-spacing: -.02em;
  color: var(--tg-ink);
}
.hx-stepfig span {
  margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.7;
  color: var(--tg-body); word-break: keep-all; max-width: 26ch;
}
.hx-steparrow {
  flex: 0 0 auto; align-self: center; margin-bottom: 62px;
  color: var(--tg-beauty, var(--tg-accent));
}
.hx-steparrow svg { display: block; width: 46px; height: 28px; }
.hx-steps figcaption {
  margin-top: 26px; font-size: 14.5px; font-weight: 300; line-height: 1.75;
  color: #5d6b64; word-break: keep-all; text-align: center;
  max-width: 76ch; margin-left: auto; margin-right: auto;
}
.hx-steps figcaption b { font-weight: 500; color: var(--tg-ink-2); }

@media (max-width: 860px) {
  /* 세로로 쌓고 화살표는 아래를 향하게 돌린다 */
  .hx-steps-row { flex-direction: column; gap: 14px; }
  .hx-stepfig { max-width: 340px; width: 100%; }
  .hx-steparrow { margin-bottom: 0; transform: rotate(90deg); }
  .hx-steparrow svg { width: 38px; height: 24px; }
  .hx-stepfig b { font-size: 19px; }
}

/* 2단 간격 조정 — 제목 칸이 넓어 제목과 내용이 멀어 보였다 (2026-09-16)
   왼쪽을 좁히고 사이 간격도 줄여 두 덩어리를 붙인다. */
@media (min-width: 900px) {
  .hx-split { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: 44px; }
}
@media (min-width: 1280px) {
  .hx-split { gap: 52px; }
}
/* 창이 좁을 때는 제목 칸이 너무 좁아져 제목이 여러 줄로 꺾인다 — 단계적으로 조인다 */
@media (min-width: 900px) and (max-width: 1279px) {
  .hx-split { grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr); gap: 40px; }
}
/* 체크리스트는 한 줄에 두 개 — 다만 칸이 좁으면 문장이 꺾이므로 넓은 화면부터 (2026-09-16) */
@media (min-width: 1360px) {
  .hx-split .chk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 3 STEP 은 카드가 3장이라 2열로 두면 마지막 한 장이 혼자 남는다 — 넓은 화면에서는 3열 유지 */
@media (min-width: 1280px) { .hx-split-bd .step3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* 흉살이란? 본문 — 테두리 박스 대신 글자만으로 (2026-09-16)
   이 페이지는 이미 체크리스트·카드·표가 전부 테두리 박스라, 설명 문단까지 박스에 넣으니 답답했다.
   정의 문장은 크게, '다만…' 으로 시작하는 단서는 왼쪽 라인만 붙여 낮춰 놓는다. */
.hx-def { max-width: 80ch; }
.hx-def p { margin: 0; font-weight: 300; word-break: keep-all; }
.hx-def b { font-weight: 500; color: var(--tg-ink); }
.hx-def-main {
  font-size: 20px; line-height: 1.85; color: var(--tg-ink-2);
}
.hx-def-note {
  margin-top: 26px; padding-left: 22px;
  border-left: 2px solid var(--tg-beauty, var(--tg-accent));
  font-size: 17px; line-height: 1.85; color: var(--tg-body);
}
@media (max-width: 900px) {
  .hx-def-main { font-size: 18px; }
  .hx-def-note { font-size: 16.5px; margin-top: 22px; padding-left: 18px; }
}
@media (max-width: 560px) {
  .hx-def-main { font-size: 17px; }
  .hx-def-note { font-size: 16px; padding-left: 15px; }
}

/* ═══ 구간 이동 태그 — 리드 안으로 (2026-09-16) ═══
   '진료안내 보기 / 전화' 버튼을 빼고 그 자리에 섹션 이동 태그를 알약 형태로 넣는다.
   누르면 해당 섹션으로 이동하고, 스크롤 위치에 따라 지금 보는 항목이 켜진다. */
.hx-lead-txt .hx-chips { margin: 4px 0 0; gap: 8px; }
.hx-chips a {
  border-radius: 999px; padding: 9px 18px;
  border: 1px solid var(--tg-hair); background: #fff;
  font-size: 15px; font-weight: 300; color: var(--tg-ink-2);
  line-height: 1.2; white-space: nowrap;
  transition: border-color .16s, color .16s, background-color .16s;
}
.hx-chips a:hover {
  border-color: var(--tg-beauty, var(--tg-accent));
  color: var(--tg-beauty, var(--tg-accent));
  background-color: #fff;
}
/* 지금 보고 있는 구간 */
.hx-chips a.on {
  border-color: var(--tg-beauty, var(--tg-accent));
  background-color: var(--tg-beauty, var(--tg-accent));
  color: #fff; font-weight: 400;
}
.hx-chips a:focus-visible { outline: 2px solid var(--tg-beauty, var(--tg-accent)); outline-offset: 2px; }
@media (max-width: 560px) {
  .hx-chips a { padding: 8px 14px; font-size: 14px; }
  .hx-lead-txt .hx-chips { gap: 7px; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 마지막 줄에 한두 단어만 떨어지는 것을 막는다 (2026-09-16) */
.hx-def p { text-wrap: pretty; }

/* 흉살이란 섹션만 2단을 풀고 한 단으로 (2026-09-16)
   본문 폭을 넓게 잡아야 문장 단위로 줄을 끊을 수 있다. 제목은 다른 섹션과 같이 왼쪽 정렬 유지. */
.hx-split.is-stack { grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 900px) {
  .hx-split.is-stack { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.hx-split.is-stack .pg-h2-sub { max-width: 80ch; }
.hx-split.is-stack .hx-def { max-width: 1100px; }
/* 넓은 화면에서만 살아나는 줄바꿈 — 좁아지면 사라지고 자동 흐름에 맡긴다 */
.br-wide { display: none; }
@media (min-width: 1140px) { .br-wide { display: inline; } }

/* 흉살이란 정의 문단 20px → 18px (2026-09-17 요청) — 모바일은 비례 축소 */
.hx-def-main { font-size: 18px; line-height: 1.85; color: var(--tg-ink-2); }
@media (max-width: 900px) { .hx-def-main { font-size: 17px; } }
@media (max-width: 560px) { .hx-def-main { font-size: 16px; } }

/* 흉살이란 본문 — 오른쪽 칸 폭을 끝까지 쓴다 (2026-09-17 요청) */
.hx-def, .hx-def p { max-width: none; }

/* 원리 3컷 — 오른쪽 칸 안으로 (2026-09-17 시안) */
.hx-split-bd .hx-steps { margin-top: 44px; }
.hx-split-bd .hx-steps-row { gap: 6px; }
.hx-split-bd .hx-steparrow svg { width: 36px; height: 22px; }
.hx-split-bd .hx-stepfig b { font-size: 18px; }
.hx-split-bd .hx-stepfig span { font-size: 14.5px; }
.hx-split-bd .hx-steps figcaption { text-align: left; margin-left: 0; font-size: 14px; }

/* 원리 3컷 이름·설명 확대 (2026-09-17 요청) */
.hx-split-bd .hx-stepfig b { font-size: 22px; margin-top: 8px; }
.hx-split-bd .hx-stepfig span { font-size: 16.5px; line-height: 1.65; max-width: 24ch; }
@media (max-width: 1280px) {
  .hx-split-bd .hx-stepfig b { font-size: 20px; }
  .hx-split-bd .hx-stepfig span { font-size: 15.5px; }
}
@media (max-width: 560px) {
  .hx-split-bd .hx-stepfig b { font-size: 19px; }
  .hx-split-bd .hx-stepfig span { font-size: 15px; }
}

/* 원리 그림 고지 — 눈에 띄게 (2026-09-17 요청)
   의료광고 고지 문구라 흐린 캡션으로 두지 않는다. 연분홍 바탕 + 안내 아이콘 + 진한 글자. */
.hx-steps figcaption.hx-notice,
.hx-split-bd .hx-steps figcaption.hx-notice {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: none; margin: 30px 0 0; padding: 18px 22px;
  background: var(--tg-beauty-soft); border-radius: 6px;
  text-align: left; font-size: 16px; font-weight: 300; line-height: 1.75;
  color: var(--tg-ink-2);
}
.hx-notice-ico { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; color: var(--tg-beauty); }
.hx-steps figcaption.hx-notice b { display: inline; margin: 0; font-weight: 500; color: var(--tg-beauty); }
@media (max-width: 560px) {
  .hx-steps figcaption.hx-notice,
  .hx-split-bd .hx-steps figcaption.hx-notice { font-size: 15px; padding: 15px 16px; gap: 10px; }
  .hx-notice-ico { width: 20px; height: 20px; }
}

/* TWO TYPES 카드 사진 세로 확대 3:2 → 5:4 (2026-09-17 요청) */
#hx-type .pick-card .figspot { aspect-ratio: 5 / 4; }
/* TWO TYPES 사진 세로 한 번 더 5:4 → 1:1 (2026-09-17 요청) */
#hx-type .pick-card .figspot { aspect-ratio: 1 / 1; }
/* TWO TYPES 사진 — 확대가 아니라 원본에서 세로로 다시 뽑아 4:5 로 (2026-09-17)
   1:1 틀에 3:2 파일을 cover 로 넣어 사진이 확대돼 보였다. 파일 자체를 800×1000 으로 교체. */
#hx-type .pick-card .figspot { aspect-ratio: 4 / 5; }

/* TWO TYPES — TYPE 01/02 라벨을 배지로 (2026-09-17 요청) */
.pick-no {
  display: inline-block; margin-bottom: 14px; padding: 6px 14px;
  border-radius: 999px; background: var(--tg-beauty, var(--tg-accent)); color: #fff;
  font-size: 12.5px; font-weight: 400; letter-spacing: .14em; line-height: 1.2;
}
@media (max-width: 560px) { .pick-no { font-size: 12px; padding: 5px 12px; } }

/* TYPE 배지 — 연분홍 바탕 + 자주색 글자, 사진 아래 경계에 반쯤 걸치게 (2026-09-17 요청)
   사진 margin-bottom 20px + 배지 높이 절반 13.5px 만큼 끌어올린다. */
#hx-type .pick-no {
  position: relative; z-index: 1;
  margin-top: -34px; margin-bottom: 16px;
  background: var(--tg-beauty-soft); color: var(--tg-beauty);
  border: 1px solid rgba(154, 88, 110, .28);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(60, 30, 40, .10);
}
#hx-type .pick-card:hover .pick-no { background: #fff; }
@media (max-width: 560px) { #hx-type .pick-no { margin-top: -30px; } }
/* inline-block 은 음수 위 여백이 먹지 않는다 — 블록으로 바꿔 폭만 내용에 맞춘다 */
#hx-type .pick-no { display: block; width: max-content; }

/* 카드 '자세히 보기' — 메인 .cat-go 와 같은 수치 (2026-09-17 요청)
   글자 16.5px / 200, 화살표 15px, 글자–화살표 간격 10px, 윗선 14px, 호버 시 화살표 4px 이동.
   메인은 어두운 사진 위 흰 글자라 색만 흰 카드에 맞춰 자주색으로 바꾼다. */
.pick-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16.5px; font-weight: 200; color: var(--tg-beauty, var(--tg-accent));
  padding-top: 14px; border-top: 1px solid rgba(154, 88, 110, .28);
}
.pick-more svg { flex: 0 0 auto; transition: transform .2s; }
.pick-card:hover .pick-more svg { transform: translateX(4px); }
@media (max-width: 560px) {
  .pick-more { font-size: 15px; gap: 8px; padding-top: 12px; }
}

/* ═══ DIAGNOSIS — 진료 시 확인하는 것 (2026-09-17) ═══
   이 페이지는 체크리스트·TYPE 카드가 이미 흰 바탕 + 테두리라,
   여기서는 테두리를 빼고 연분홍 바탕 위에 큰 숫자 + 체크 목록으로 '진찰 항목표'처럼 보이게 한다. */
#hx-dx .proc { gap: 14px; }
#hx-dx .proc-card {
  position: relative; border: 0; background: #fbf6f8;
  padding: 30px 32px 32px;
}
#hx-dx .proc-hd {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(154, 88, 110, .22);
}
#hx-dx .proc-no {
  flex: 0 0 auto; font-size: 38px; font-weight: 200; line-height: 1;
  letter-spacing: -.02em; color: var(--tg-beauty);
  font-variant-numeric: tabular-nums;
}
#hx-dx .proc-card h3 {
  margin: 0; font-size: 21px; font-weight: 400; line-height: 1.35;
  letter-spacing: -.022em; color: var(--tg-ink);
}
#hx-dx .proc-card ul { margin: 0; gap: 11px; }
#hx-dx .proc-card ul li {
  padding-left: 26px; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2);
}
/* 점 대신 체크 표시 — 리드의 핵심 3줄과 같은 모양 */
#hx-dx .proc-card ul li::before {
  left: 3px; top: .38em; width: 6px; height: 11px;
  border-radius: 0; background: none; opacity: 1;
  border-right: 1.8px solid var(--tg-beauty);
  border-bottom: 1.8px solid var(--tg-beauty);
  transform: rotate(42deg);
}
@media (max-width: 560px) {
  #hx-dx .proc-card { padding: 24px 22px 26px; }
  #hx-dx .proc-no { font-size: 32px; }
  #hx-dx .proc-card h3 { font-size: 19px; }
  #hx-dx .proc-card ul li { font-size: 15px; padding-left: 23px; }
}

/* ═══ 3 STEP — 순서대로 풀어갑니다 (2026-09-17) ═══
   세 장이 '순서'라는 게 한눈에 보이도록 카드 사이에 화살표 원을 걸고,
   STEP 번호는 TWO TYPES 배지와 같은 연분홍 알약으로 사진 아래 경계에 걸친다. */
#hx-step .step3 { gap: 24px; }
@media (min-width: 1280px) { #hx-step .step3 { gap: 24px; } }
#hx-step .step3-card { position: relative; container-type: inline-size; }
#hx-step .step3-card .figspot { margin-bottom: 0; }

#hx-step .step3-no {
  position: relative; z-index: 1; display: block; width: max-content;
  align-self: flex-start; margin: -14px 0 16px 18px; padding: 6px 14px;
  border-radius: 999px; background: var(--tg-beauty-soft); color: var(--tg-beauty);
  border: 1px solid rgba(154, 88, 110, .28);
  box-shadow: 0 4px 12px rgba(60, 30, 40, .10);
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; line-height: 1.2;
}
#hx-step .step3-card h3 {
  margin: 0 0 10px; text-align: left;
  font-size: 22px; font-weight: 400; letter-spacing: -.022em; line-height: 1.35; color: var(--tg-ink);
}
#hx-step .step3-card p {
  text-align: left; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2);
}

/* 카드 사이 화살표 — 사진 세로 가운데(카드 폭의 1/3 지점), 간격 한가운데 */
#hx-step .step3-card:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a586e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  box-shadow: 0 3px 10px rgba(60, 30, 40, .16);
  /* 한 줄에 한 장일 때: 카드 아래 간격 가운데, 아래 방향 */
  left: calc(50% - 17px); bottom: -29px; transform: rotate(90deg);
}
/* 3열일 때: 오른쪽 간격 가운데, 오른쪽 방향 */
@media (min-width: 1280px) {
  #hx-step .step3-card:not(:last-child)::after {
    left: auto; bottom: auto; right: -29px;
    top: calc(100cqw / 3 - 17px); transform: none;
  }
}
@media (max-width: 560px) {
  #hx-step .step3-card h3 { font-size: 20px; }
  #hx-step .step3-card p { font-size: 15px; }
  #hx-step .step3-no { font-size: 12px; padding: 5px 12px; margin-top: -13px; }
}

/* ═══ TREATMENT — 한의원 흉살 치료 구성 (2026-09-17) ═══
   위 DIAGNOSIS 는 분홍 카드, 3 STEP 은 사진 카드라 여기는 박스를 쓰지 않는다.
   아이콘 원 + 치료명 + 설명을 가는 선으로만 구분한 '메뉴판' 형태. */
#hx-tx .tx-grid { gap: 0 40px; }
#hx-tx .tx {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-content: start;
  border: 0; border-top: 1px solid var(--tg-hair); background: transparent;
  padding: 26px 0 28px;
}
#hx-tx .tx-ico {
  grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tg-beauty-soft); color: var(--tg-beauty);
}
#hx-tx .tx-ico svg { width: 26px; height: 26px; }
#hx-tx .tx h3 {
  margin: 4px 0 8px; font-size: 21px; font-weight: 400; line-height: 1.35;
  letter-spacing: -.022em; color: var(--tg-ink);
}
#hx-tx .tx p {
  margin: 0; max-width: none; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2);
}
/* 마지막 줄 아래도 선을 닫아 목록이 끝났음을 보여준다 */
#hx-tx .tx-grid { border-bottom: 1px solid var(--tg-hair); }

/* 보유 장비 안내 — 목록 아래 한 줄, 화살표로 '아래로 이어짐'을 표시 */
#hx-tx .pg-note {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 0; text-align: left; font-size: 15.5px; font-weight: 300; color: var(--tg-body);
}
#hx-tx .pg-note::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a586e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cpolyline points='19 12 12 19 5 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
#hx-tx .pg-note b { color: var(--tg-beauty); font-weight: 500; }

@media (max-width: 560px) {
  #hx-tx .tx { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 22px 0 24px; }
  #hx-tx .tx-ico { width: 46px; height: 46px; }
  #hx-tx .tx-ico svg { width: 22px; height: 22px; }
  #hx-tx .tx h3 { font-size: 19px; margin-top: 2px; }
  #hx-tx .tx p { font-size: 15px; }
  #hx-tx .pg-note { font-size: 14.5px; align-items: flex-start; }
  #hx-tx .pg-note::before { margin-top: 3px; }
}

/* 보유 장비 안내 — 오른쪽 칸 폭 끝까지 (2026-09-17 요청)
   .pg-note 기본값 max-width 96ch 때문에 짧았다.
   flex 로 두면 글자 덩어리마다 gap 10px 이 들어가 '보유 장비' 앞뒤가 벌어졌으므로 블록 + 절대위치 화살표로 바꾼다. */
#hx-tx .pg-note {
  display: block; position: relative; max-width: none; width: 100%; box-sizing: border-box;
  padding-left: 46px;
}
#hx-tx .pg-note::before { position: absolute; left: 18px; top: 50%; margin-top: -9px; }
@media (max-width: 560px) {
  #hx-tx .pg-note { padding-left: 40px; }
  #hx-tx .pg-note::before { left: 14px; top: 1.1em; margin-top: -9px; }
}
#hx-tx .pg-note { padding-left: 52px; }
#hx-tx .pg-note::before { left: 24px; }

/* ═══ PROCESS — 치료 프로세스 (2026-09-17) ═══
   5단계가 한 흐름이라 카드로 쪼개지 않고, 번호 원을 세로선으로 잇는 타임라인으로.
   가로 카드인 3 STEP 과 겹치지 않게 세로 방향을 쓴다. 마크업은 그대로, 번호는 CSS 카운터. */
#hx-flow .pr { grid-template-columns: minmax(0, 1fr); gap: 0; }
#hx-flow .pr-step {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 24px; align-items: start;
  border: 0; background: transparent; padding: 0 0 34px;
}
#hx-flow .pr-step:last-child { padding-bottom: 0; }
/* 번호 원 */
#hx-flow .pr-step::before {
  content: counter(pr, decimal-leading-zero); counter-increment: pr;
  grid-column: 1; grid-row: 1 / span 2;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0; border-radius: 50%;
  background: #fff; border: 1px solid rgba(154, 88, 110, .45); color: var(--tg-beauty);
  font-size: 17px; font-weight: 300; letter-spacing: 0; position: relative; z-index: 1;
}
/* 마지막 단계는 채운 원으로 — 흐름의 끝 */
#hx-flow .pr-step:last-child::before { background: var(--tg-beauty); border-color: var(--tg-beauty); color: #fff; }
/* 원과 원을 잇는 세로선 */
#hx-flow .pr-step:not(:last-child)::after {
  content: ""; position: absolute; left: 26px; top: 52px; bottom: 0; width: 1px;
  background: rgba(154, 88, 110, .3);
}
#hx-flow .pr-step h3 {
  grid-column: 2; margin: 12px 0 6px; font-size: 21px; font-weight: 400; line-height: 1.35;
  letter-spacing: -.022em; color: var(--tg-ink);
}
#hx-flow .pr-step p {
  grid-column: 2; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2);
}
/* 넓은 화면: 번호 | 단계명 | 설명 을 한 줄로 */
@media (min-width: 1180px) {
  #hx-flow .pr-step { grid-template-columns: 52px 220px minmax(0, 1fr); column-gap: 24px; }
  #hx-flow .pr-step::before { grid-row: 1; }
  #hx-flow .pr-step h3 { margin: 12px 0 0; }
  #hx-flow .pr-step p { grid-column: 3; grid-row: 1; margin-top: 11px; }
}
@media (max-width: 560px) {
  #hx-flow .pr-step { grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; padding-bottom: 28px; }
  #hx-flow .pr-step::before { width: 42px; height: 42px; font-size: 15px; }
  #hx-flow .pr-step:not(:last-child)::after { left: 21px; top: 42px; }
  #hx-flow .pr-step h3 { font-size: 19px; margin-top: 8px; }
  #hx-flow .pr-step p { font-size: 15px; }
}

/* PROCESS 설명 16px → 18px (2026-09-17 요청) */
#hx-flow .pr-step p { font-size: 18px; line-height: 1.75; }
@media (min-width: 1180px) { #hx-flow .pr-step p { margin-top: 10px; } }
@media (max-width: 900px) { #hx-flow .pr-step p { font-size: 17px; } }
@media (max-width: 560px) { #hx-flow .pr-step p { font-size: 16px; } }

/* 보유 장비 안내 + 이동 버튼 (2026-09-17 요청)
   문장은 <span> 한 덩어리로 묶었으므로 flex 로 둬도 '보유 장비' 앞뒤가 벌어지지 않는다. */
#hx-tx .pg-note.tx-eq-note {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 14px; padding-bottom: 14px; padding-right: 16px;
}
#hx-tx .tx-eq-note > span { min-width: 0; }
.tx-eq-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--tg-beauty); color: #fff; border: 1px solid var(--tg-beauty);
  font-size: 15px; font-weight: 400; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: background-color .16s, color .16s;
}
.tx-eq-btn:hover { background: #fff; color: var(--tg-beauty); text-decoration: none; }
.tx-eq-btn:focus-visible { outline: 2px solid var(--tg-beauty); outline-offset: 2px; }
.tx-eq-btn svg { transition: transform .2s; }
.tx-eq-btn:hover svg { transform: translateY(3px); }
#equipment { scroll-margin-top: 100px; }
@media (max-width: 700px) {
  #hx-tx .pg-note.tx-eq-note { flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 20px; }
}

/* 보유 장비 안내 — 문장 앞 화살표 제거, 버튼만 남긴다 (2026-09-17 요청) */
#hx-tx .pg-note::before { content: none; display: none; }
#hx-tx .pg-note, #hx-tx .pg-note.tx-eq-note { padding-left: 24px; }
@media (max-width: 560px) { #hx-tx .pg-note, #hx-tx .pg-note.tx-eq-note { padding-left: 20px; } }

/* PROCESS 단계 사이 간격 34px → 58px (2026-09-17 요청) — 세로선이 길어져 흐름이 여유 있게 보인다 */
#hx-flow .pr-step { padding-bottom: 58px; }
#hx-flow .pr-step:last-child { padding-bottom: 0; }
@media (max-width: 900px) { #hx-flow .pr-step { padding-bottom: 46px; } }
@media (max-width: 560px) { #hx-flow .pr-step { padding-bottom: 36px; } }
@media (max-width: 900px) { #hx-flow .pr-step:last-child { padding-bottom: 0; } }

/* ═══ QUESTIONS — 자주 묻는 질문 (2026-09-17) ═══
   TREATMENT 와 같은 '원 + 가는 선' 언어로 맞춘다.
   Q 는 연분홍 원, 열리면 줄 전체가 DIAGNOSIS 와 같은 연분홍 바탕 + A 는 테두리 원.
   오른쪽 꺾쇠는 + / − 원 버튼으로. */
#hx-faq .faq-list { border-top: 1px solid var(--tg-hair); }
#hx-faq .faq { background: transparent; transition: background-color .2s; }
#hx-faq .faq[open] { background: #fbf6f8; }

#hx-faq .faq > summary {
  align-items: center; gap: 18px; padding: 22px 72px 22px 20px;
}
#hx-faq .faq-part {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  justify-content: center; align-self: center;
  background: var(--tg-beauty-soft); color: var(--tg-beauty);
  font-size: 16px; font-weight: 400; letter-spacing: 0;
}
#hx-faq .faq[open] .faq-part { background: var(--tg-beauty); color: #fff; }
#hx-faq .faq-subject {
  font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink);
}
#hx-faq .faq > summary:hover .faq-subject,
#hx-faq .faq[open] .faq-subject { color: var(--tg-beauty); }

/* + / − 버튼 */
#hx-faq .faq > summary::after {
  content: ""; right: 20px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  border: 1px solid rgba(154, 88, 110, .35); border-radius: 50%; transform: none;
  background:
    linear-gradient(var(--tg-beauty), var(--tg-beauty)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--tg-beauty), var(--tg-beauty)) center / 1.5px 12px no-repeat;
  transition: background-size .2s, border-color .2s;
}
#hx-faq .faq[open] > summary::after {
  transform: none; margin-top: -17px; border-color: var(--tg-beauty);
  background:
    linear-gradient(var(--tg-beauty), var(--tg-beauty)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--tg-beauty), var(--tg-beauty)) center / 1.5px 0 no-repeat;
}

/* 답변 — 질문 글자 시작선에 맞추고, 앞에 A 원 */
#hx-faq .faq-a,
#hx-faq .faq-list.tight .faq-a {
  position: relative; padding: 0 72px 30px 78px;
}
#hx-faq .faq-a::before {
  content: "A"; position: absolute; left: 20px; top: -2px;
  width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(154, 88, 110, .45); color: var(--tg-beauty); background: #fff;
  font-size: 16px; font-weight: 400;
}
#hx-faq .faq-a p { max-width: none; font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--tg-ink-2); padding-top: 5px; }
#hx-faq .faq-a b { color: var(--tg-ink); font-weight: 500; }

@media (max-width: 560px) {
  #hx-faq .faq > summary { gap: 12px; padding: 18px 56px 18px 12px; }
  #hx-faq .faq-part { width: 32px; height: 32px; font-size: 14px; }
  #hx-faq .faq-subject { font-size: 17px; }
  #hx-faq .faq > summary::after { right: 12px; width: 30px; height: 30px; margin-top: -15px; }
  #hx-faq .faq[open] > summary::after { margin-top: -15px; }
  #hx-faq .faq-a, #hx-faq .faq-list.tight .faq-a { padding: 0 16px 24px 56px; }
  #hx-faq .faq-a::before { left: 12px; width: 32px; height: 32px; font-size: 14px; }
  #hx-faq .faq-a p { font-size: 16px; padding-top: 2px; }
}

/* PROCESS 호버 — 번호 원에 퍼지는 펄스 (2026-09-17 요청)
   마우스를 올린 단계의 원이 채워지고, 원 바깥으로 링이 반복해서 퍼진다. */
@keyframes tgPulse {
  0%   { box-shadow: 0 0 0 0 rgba(154, 88, 110, .45); }
  70%  { box-shadow: 0 0 0 14px rgba(154, 88, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(154, 88, 110, 0); }
}
#hx-flow .pr-step::before { transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
#hx-flow .pr-step h3 { transition: color .2s; }
#hx-flow .pr-step:hover::before {
  background: var(--tg-beauty); border-color: var(--tg-beauty); color: #fff;
  transform: scale(1.06);
  animation: tgPulse 1.4s ease-out infinite;
}
#hx-flow .pr-step:hover h3 { color: var(--tg-beauty); }
@media (prefers-reduced-motion: reduce) {
  #hx-flow .pr-step:hover::before { animation: none; transform: none; }
}

/* PROCESS 자동 순차 강조 — 호버와 같은 모양을 .is-on 으로도 (2026-09-17 요청) */
#hx-flow .pr-step.is-on::before {
  background: var(--tg-beauty); border-color: var(--tg-beauty); color: #fff;
  transform: scale(1.06);
  animation: tgPulse 1.4s ease-out infinite;
}
#hx-flow .pr-step.is-on h3 { color: var(--tg-beauty); }
@media (prefers-reduced-motion: reduce) {
  #hx-flow .pr-step.is-on::before { animation: none; transform: none; }
}
/* 자동 강조 간격 1.8s → 3s 에 맞춰 펄스도 느리게 (2026-09-17) */
#hx-flow .pr-step.is-on::before { animation-duration: 2s; }

/* ═══ 주의 안내 — 흉살클리닉 하단 (2026-09-17) ═══
   위 섹션들과 같은 좌(제목)·우(내용) 2단 그리드. 응급 신호는 문장 속 굵은 글씨 대신 태그로 뽑아 한눈에 보이게. */
.hx-alert {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  margin-top: 72px; padding: 40px 40px 38px; border: 0; border-radius: 8px;
  background: #fbf6f8;
}
@media (min-width: 900px) {
  .hx-alert { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: 52px; padding: 48px 52px 46px; }
}
.hx-alert-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hx-alert-ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tg-beauty); color: #fff;
}
.hx-alert-ico svg { width: 24px; height: 24px; }
.alert.hx-alert h3 {
  margin: 0; font-size: 24px; font-weight: 400; line-height: 1.4; letter-spacing: -.025em; color: var(--tg-ink);
}
.alert.hx-alert p {
  max-width: none; margin: 0 0 14px; font-size: 17px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2);
}
.alert.hx-alert b { font-weight: 500; color: var(--tg-ink); }
.hx-alert-flags {
  list-style: none; margin: 4px 0 24px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hx-alert-flags li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(154, 88, 110, .35);
  font-size: 15.5px; font-weight: 400; color: var(--tg-beauty); line-height: 1.2;
}
.hx-alert-flags li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-beauty);
}
.alert.hx-alert .hx-alert-foot {
  margin: 0; padding-top: 18px; border-top: 1px solid rgba(154, 88, 110, .2);
  font-size: 15px; color: var(--tg-body);
}
@media (max-width: 560px) {
  .hx-alert { margin-top: 52px; padding: 28px 22px 26px; }
  .hx-alert-ico { width: 42px; height: 42px; }
  .alert.hx-alert h3 { font-size: 20px; }
  .alert.hx-alert p { font-size: 16px; }
  .hx-alert-flags li { font-size: 14.5px; padding: 8px 13px; }
  .alert.hx-alert .hx-alert-foot { font-size: 14px; }
}

/* ═══ 하단 상담 CTA — 모든 상세페이지 공통 (2026-09-17) ═══
   회색 박스 + 사각 버튼이 새 디자인과 동떨어져 있었다. 트랙 색(뷰티=자주, 메디컬=초록) 띠 + 알약 버튼으로.
   페이지의 마지막 행동 유도라 이 페이지에서 가장 진한 면으로 둔다. */
.pg-cta {
  margin-top: 40px; padding: 44px 52px; border: 0; border-radius: 8px;
  background: linear-gradient(133deg, #0c7149 0%, #042f1e 100%);
  gap: 28px;
}
.pg-cta-txt h3 { margin: 0 0 8px; font-size: 26px; font-weight: 300; line-height: 1.35; letter-spacing: -.025em; color: #fff; }
.pg-cta-txt p { font-size: 16.5px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.pg-cta .tg-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-cta .tg-btn {
  height: 52px; padding: 0 26px; border-radius: 999px; gap: 9px;
  font-size: 16px; font-weight: 500;
}
.pg-cta .tg-btn-solid { background: #fff; border-color: #fff; color: var(--tg-accent-deep); }
.pg-cta .tg-btn-solid:hover { background: transparent; border-color: #fff; color: #fff; }
.pg-cta .tg-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.pg-cta .tg-btn-ghost:hover { background: #fff; border-color: #fff; color: var(--tg-accent-deep); }
@media (max-width: 700px) {
  .pg-cta { padding: 32px 24px; gap: 22px; }
  .pg-cta-txt h3 { font-size: 22px; }
  .pg-cta-txt p { font-size: 15.5px; }
  .pg-cta .tg-btn { height: 50px; font-size: 15.5px; }
}

/* 주의 안내 본문 17px → 18.5px (2026-09-17 요청) — 맨 아래 고지문은 그대로 */
.alert.hx-alert .hx-alert-bd > p:not(.hx-alert-foot) { font-size: 18.5px; line-height: 1.8; }
@media (max-width: 900px) { .alert.hx-alert .hx-alert-bd > p:not(.hx-alert-foot) { font-size: 17.5px; } }
@media (max-width: 560px) { .alert.hx-alert .hx-alert-bd > p:not(.hx-alert-foot) { font-size: 16.5px; } }

/* ═══ 장비 사진 확대 보기 (2026-09-17) ═══ */
.eq-zoom {
  position: relative; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in;
  font: inherit; color: inherit;
}
.eq-zoom img { transition: transform .35s ease; }
.eq-zoom:hover img { transform: scale(1.04); }
.eq-zoom:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; }
.eq-zoom-ico {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--tg-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  opacity: .85; transition: opacity .2s, background-color .2s, color .2s;
}
.eq-zoom-ico svg { width: 16px; height: 16px; }
.eq-zoom:hover .eq-zoom-ico { opacity: 1; background: var(--tg-accent); color: #fff; }

/* 라이트박스 */
.eq-lb[hidden] { display: none !important; }
.eq-lb {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 16, 18, .82);
  animation: eqLbIn .2s ease-out;
}
@keyframes eqLbIn { from { opacity: 0; } to { opacity: 1; } }
.eq-lb-fig {
  position: relative; margin: 0; width: min(760px, 100%);
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.eq-lb-fig img { display: block; width: 100%; height: auto; max-height: calc(100vh - 170px); object-fit: contain; background: #fff; }
.eq-lb-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-top: 1px solid var(--tg-hair);
  font-size: 18px; font-weight: 400; color: var(--tg-ink);
}
.eq-lb-count { font-size: 14px; color: var(--tg-mute); font-variant-numeric: tabular-nums; }
.eq-lb-btn {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--tg-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2); transition: background-color .15s, color .15s;
}
.eq-lb-btn:hover { background: var(--tg-accent); color: #fff; }
.eq-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.eq-lb-btn svg { width: 20px; height: 20px; }
.eq-lb-close { top: 18px; right: 18px; }
.eq-lb-prev { left: max(18px, calc(50% - 440px)); top: 50%; margin-top: -23px; }
.eq-lb-next { right: max(18px, calc(50% - 440px)); top: 50%; margin-top: -23px; }
body.eq-lb-open { overflow: hidden; }
@media (max-width: 700px) {
  .eq-lb { padding: 14px; }
  .eq-lb-prev, .eq-lb-next { top: auto; bottom: 18px; margin-top: 0; width: 42px; height: 42px; }
  .eq-lb-prev { left: 18px; } .eq-lb-next { right: 18px; }
  .eq-lb-fig img { max-height: calc(100vh - 220px); }
  .eq-lb-cap { font-size: 16px; padding: 13px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-lb { animation: none; } .eq-zoom img { transition: none; } .eq-zoom:hover img { transform: none; }
}
/* 목록형 84px 썸네일에서는 돋보기를 작게 */
.eq-list .eq-zoom-ico { width: 22px; height: 22px; right: 4px; bottom: 4px; }
.eq-list .eq-zoom-ico svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════
   보유 장비 — 재디자인 (2026-09-17)
   · 위 섹션들과 같은 좌(제목·안내)·우(내용) 2단
   · 탭은 리드의 태그와 같은 알약형
   · 목록형/카드형/그 외 장비를 하나의 '사진 타일 + 이름 + 용도' 카드로 통일, 사진은 클릭 확대
   ═══════════════════════════════════════════════ */
.eq { padding-block: 96px 104px; background: #faf7f8; border-top: 0; }
.eq .tg-wrap.eq-wrap { max-width: 1500px; }
.eq-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 900px) {
  .eq-wrap { grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr); gap: 40px; }
}
@media (min-width: 1280px) {
  .eq-wrap { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: 52px; }
}

/* 왼쪽 — 제목과 안내 */
.eq-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 200; letter-spacing: .2em; color: var(--tg-accent); }
.eq .eq-hd .pg-h2 { text-align: left; }
.eq .eq-hd .pg-h2-sub { margin: 0; text-align: left; max-width: 36ch; }
.eq .eq-note {
  margin: 28px 0 0; padding: 0 0 0 16px; max-width: 40ch;
  border-left: 2px solid var(--tg-accent); background: transparent;
  font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tg-body);
}
@media (min-width: 900px) { .eq-hd { position: sticky; top: 110px; } }

/* 탭 — 알약 */
.eq-body, .eq-body.single { display: block; }
.eq .eq-tabs {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
  overflow: visible; margin: 0 0 36px;
}
.eq .eq-tab {
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--tg-hair); background: #fff;
  font-size: 15px; font-weight: 300; color: var(--tg-ink-2); line-height: 1.2;
}
.eq .eq-tab:hover { border-color: var(--tg-accent); color: var(--tg-accent); }
.eq .eq-tab.on { background: var(--tg-accent); border-color: var(--tg-accent); color: #fff; font-weight: 400; }

/* 패널 — 박스 없이 */
.eq .eq-panel { background: transparent; border: 0; padding: 0; }
.eq .eq-empty {
  padding: 40px 24px; border: 1px dashed rgba(154, 88, 110, .3); border-radius: 10px;
  text-align: center; font-size: 16px; color: var(--tg-mute); background: #fff;
}

/* 그룹 이름 — 라벨 + 이어지는 가는 선 */
.eq .eq-group + .eq-group,
.eq .eq-extra { margin-top: 48px; padding-top: 0; border-top: 0; }
.eq .eq-group-name {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px;
  font-size: 15px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--tg-accent);
}
.eq .eq-group-name::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(154, 88, 110, .22); }

/* 장비 카드 그리드 */
.eq-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .eq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .eq-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eq-grid.is-compact { gap: 24px 14px; }
@media (min-width: 640px) { .eq-grid.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .eq-grid.is-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.eq-item { display: flex; flex-direction: column; min-width: 0; }
.eq-pic {
  aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06);
  transition: border-color .2s, box-shadow .2s;
}
.eq-item:hover .eq-pic { border-color: rgba(154, 88, 110, .35); box-shadow: 0 8px 22px rgba(60, 30, 40, .08); }
.eq-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.eq-pic.is-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(154, 88, 110, .3); background: #fff;
}
.eq-pic .eq-ph { font-size: 13.5px; color: var(--tg-mute-2); }
.eq-name { margin-top: 14px; font-size: 18px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.eq-use { margin-top: 6px; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.eq-grid.is-compact .eq-name { margin-top: 10px; font-size: 15.5px; text-align: center; }
.eq-grid.is-compact .eq-zoom-ico { width: 26px; height: 26px; right: 6px; bottom: 6px; }
.eq-grid.is-compact .eq-zoom-ico svg { width: 14px; height: 14px; }

@media (max-width: 560px) {
  .eq { padding-block: 60px 68px; }
  .eq .eq-tabs { margin-bottom: 28px; gap: 6px; }
  .eq .eq-tab { padding: 9px 15px; font-size: 14px; }
  .eq-grid { gap: 22px 12px; }
  .eq-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .eq-name { margin-top: 10px; font-size: 16px; }
  .eq-use { font-size: 14px; }
  .eq-grid.is-compact .eq-name { font-size: 13.5px; }
  .eq .eq-group + .eq-group, .eq .eq-extra { margin-top: 36px; }
}

/* ═══════════════════════════════════════════════
   미용시술·성형수술 후 흉살 페이지 (2026-09-17)
   흉살클리닉 페이지의 부품(리드·태그·좌우 2단·체크 목록·주의 안내)을 그대로 쓰고,
   이 페이지에만 있는 '부위 맵 / 시술별 케이스 카드 / 비교표'를 같은 톤으로 맞춘다.
   ═══════════════════════════════════════════════ */
.hc-lead-fig img { object-position: center 30%; }

/* 부위 맵 — 오른쪽 칸 안 */
.hx-split-bd .hmap-lead { margin: 0 0 18px; text-align: left; font-size: 18px; color: var(--tg-ink-2); }
.hx-split-bd .hmap {
  grid-template-columns: minmax(0, 1fr); gap: 20px;
  padding: 30px 24px; border-radius: 10px; background: #fbf6f8;
}
.hx-split-bd .hmap-fig { order: -1; max-width: 320px; width: 100%; margin: 0 auto; }
@media (min-width: 1280px) {
  .hx-split-bd .hmap { grid-template-columns: minmax(0, 1fr) minmax(220px, 290px) minmax(0, 1fr); gap: 26px; padding: 40px 32px; }
  .hx-split-bd .hmap-fig { order: 0; max-width: none; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .hx-split-bd .hmap-col.is-left, .hx-split-bd .hmap-col.is-right { text-align: left; }
  .hx-split-bd .hmap-col li::after { display: none; }
}
.hx-split-bd .hmap-fig img { border-radius: 8px; box-shadow: 0 16px 40px rgba(60, 30, 40, .14); }
.hx-split-bd .hmap-col li { padding: 16px 20px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(60, 30, 40, .05); }
.hx-split-bd .hmap-col b { font-size: 17px; font-weight: 500; color: var(--tg-ink); }
.hx-split-bd .hmap-col span { font-size: 15px; color: var(--tg-beauty); font-weight: 400; }
.hx-split-bd .hmap-col li::after { background: rgba(154, 88, 110, .45); }
.hx-split-bd .hmap-note { margin: 14px 0 40px; text-align: left; font-size: 15px; color: var(--tg-body); }

/* 시술별 케이스 카드 — DIAGNOSIS 카드와 같은 연분홍 면 + 체크 목록, 아래에 설명 */
.proc.is-case { gap: 14px; }
@media (min-width: 760px) {
  .proc.is-case > .proc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.proc.is-case .proc-card { border: 0; border-radius: 0; background: #fbf6f8; padding: 30px 32px 32px; display: flex; flex-direction: column; }
.proc.is-case .case-hd {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(154, 88, 110, .22);
}
.proc.is-case .proc-card h3 { margin: 0; font-size: 21px; font-weight: 400; line-height: 1.35; letter-spacing: -.022em; color: var(--tg-ink); }
.proc.is-case .proc-label {
  margin: 0; padding: 5px 12px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(154, 88, 110, .28); color: var(--tg-beauty);
  font-size: 12.5px; font-weight: 400; letter-spacing: .04em; line-height: 1.2;
}
.proc.is-case .proc-card ul { margin: 0 0 20px; gap: 10px; }
.proc.is-case .proc-card ul li { padding-left: 26px; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); }
.proc.is-case .proc-card ul li::before {
  left: 3px; top: .38em; width: 6px; height: 11px;
  border-radius: 0; background: none; opacity: 1;
  border-right: 1.8px solid var(--tg-beauty); border-bottom: 1.8px solid var(--tg-beauty);
  transform: rotate(42deg);
}
.proc.is-case .proc-card .proc-desc {
  margin-top: auto; padding: 18px 0 0; border-top: 1px dashed rgba(154, 88, 110, .3);
  font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--tg-body);
}
.proc.is-case .proc-desc b { color: var(--tg-ink); font-weight: 500; }

/* 비교표 — 세로선 없이 가로줄만, 머리줄은 연분홍 */
.hc-cmp { min-width: 560px; font-size: 16px; border-top: 2px solid var(--tg-beauty); }
.hc-cmp th, .hc-cmp td { border: 0; border-bottom: 1px solid var(--tg-hair); padding: 18px 20px; }
.hc-cmp thead th {
  background: #fbf6f8; color: var(--tg-beauty); font-size: 17px; font-weight: 500;
}
.hc-cmp thead th:first-child { color: var(--tg-body); font-weight: 400; font-size: 15px; }
.hc-cmp tbody th { width: 150px; background: transparent; color: var(--tg-ink); font-size: 16px; font-weight: 500; }
.hc-cmp td { font-size: 16px; font-weight: 300; color: var(--tg-ink-2); line-height: 1.7; }
.hc-cmp tbody tr:hover td, .hc-cmp tbody tr:hover th { background: #fdfafb; }

@media (max-width: 560px) {
  .hx-split-bd .hmap { padding: 22px 16px; }
  .hx-split-bd .hmap-lead { font-size: 16.5px; }
  .proc.is-case .proc-card { padding: 24px 20px 26px; }
  .proc.is-case .proc-card h3 { font-size: 19px; }
  .proc.is-case .proc-card ul li { font-size: 15px; }
  .proc.is-case .proc-card .proc-desc { font-size: 14.5px; }
  .hc-cmp th, .hc-cmp td { padding: 14px 14px; font-size: 15px; }
}

/* 주사제별 6카드 맵 (2026-09-17 요청 — 레퍼런스: 가운데 인물 + 좌우 3장씩) */
.hmap-head { margin: 0 0 22px; }
.hmap-title {
  margin: 0 0 8px; font-size: 26px; font-weight: 400; line-height: 1.4;
  letter-spacing: -.025em; color: var(--tg-ink); word-break: keep-all;
}
.hmap-head .hmap-lead { margin: 0; }
.hx-split-bd .hmap.is-six { align-items: stretch; }
@media (min-width: 1280px) {
  .hx-split-bd .hmap.is-six { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) minmax(0, 1fr); gap: 22px; padding: 36px 28px; }
  .hmap.is-six .hmap-fig { align-self: center; }
}
.hmap.is-six .hmap-col { gap: 14px; align-content: stretch; grid-auto-rows: 1fr; }
.hmap.is-six .hmap-col li { display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; }
.hx-split-bd .hmap.is-six .hmap-col b { margin-bottom: 8px; font-size: 18px; font-weight: 500; line-height: 1.35; }
.hx-split-bd .hmap.is-six .hmap-col span { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); }
.hmap.is-six .hmap-fig img { aspect-ratio: 3 / 4; border-radius: 18px; }
@media (max-width: 560px) {
  .hmap-title { font-size: 21px; }
  .hmap.is-six .hmap-col li { padding: 16px 18px; }
  .hx-split-bd .hmap.is-six .hmap-col b { font-size: 16.5px; }
  .hx-split-bd .hmap.is-six .hmap-col span { font-size: 14.5px; }
}

/* 주사제별 6카드 맵 — 컨테이너 전체 폭으로 (2026-09-17 요청)
   섹션 그리드: [제목 | 맵 제목] → [맵 전체 폭] → [ · | 시술별 카드] */
@media (min-width: 900px) {
  .hmap-intro { align-self: end; }
  .hx-split > .hmap-wide { grid-column: 1 / -1; }
  .hx-split > .hmap-after { grid-column: 2; }
}
.hmap-wide .hmap.is-six {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch;
  padding: 28px 20px; border-radius: 12px; background: #fbf6f8;
}
.hmap-wide .hmap-fig { order: -1; max-width: 340px; width: 100%; margin: 0 auto; }
@media (min-width: 760px) and (max-width: 1099px) {
  .hmap-wide .hmap.is-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hmap-wide .hmap-fig { grid-column: 1 / -1; }
  .hmap-wide .hmap-col { text-align: left !important; }
  .hmap-wide .hmap-col li::after { display: none; }
}
@media (min-width: 1100px) {
  .hmap-wide .hmap.is-six { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); gap: 36px; padding: 52px 56px; }
  .hmap-wide .hmap-fig { order: 0; max-width: none; align-self: center; }
  .hmap-wide .hmap-col.is-left { text-align: right; }
  .hmap-wide .hmap-col.is-right { text-align: left; }
  .hmap-wide .hmap-col li::after { width: 30px; }
  .hmap-wide .hmap-col.is-left li::after { right: -31px; }
  .hmap-wide .hmap-col.is-right li::after { left: -31px; }
}
.hmap-wide .hmap-fig img { box-shadow: 0 18px 44px rgba(60, 30, 40, .16); }
.hmap-wide .hmap-col li { padding: 24px 28px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 2px 12px rgba(60, 30, 40, .05); }
.hmap-wide .hmap-col li::after { background: rgba(154, 88, 110, .45); }
.hmap-wide .hmap.is-six .hmap-col b { margin-bottom: 8px; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--tg-ink); }
.hmap-wide .hmap.is-six .hmap-col span { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); }
.hmap-wide .hmap-note { margin: 16px 0 0; text-align: left; font-size: 15px; color: var(--tg-body); }
.hx-split > .hmap-after .proc.is-case { margin-top: 12px; }
@media (max-width: 560px) {
  .hmap-wide .hmap-col li { padding: 18px 20px; }
  .hmap-wide .hmap.is-six .hmap-col b { font-size: 17px; }
  .hmap-wide .hmap.is-six .hmap-col span { font-size: 15px; }
}

/* 주사제별 맵 제목 — 전체 폭 가운데 정렬 (2026-09-17 요청) */
@media (min-width: 900px) {
  .hx-split > .hmap-intro { grid-column: 1 / -1; align-self: auto; margin-top: 24px; }
}
.hmap-intro .hmap-head { margin: 0 auto 4px; text-align: center; max-width: 60ch; }
.hmap-intro .hmap-head .hmap-lead { text-align: center; }
/* 맵 아래 안내 문구 — 오른쪽 정렬 (2026-09-17 요청) */
.hmap-wide .hmap-note { text-align: right; }
/* 맵 제목 폭 제한 해제 — 60ch 제한 때문에 안내 문장이 두 줄로 꺾였다 (2026-09-17) */
.hmap-intro .hmap-head { max-width: none; }
.hmap-intro .hmap-head .hmap-lead { max-width: none; }

/* TYPE A 제목 옆 — 조직 반응을 가르는 세 가지 (2026-09-17)
   제목 오른쪽이 비어 있던 자리. DIAGNOSIS 의 큰 숫자 · PROCESS 의 가는 선 언어로, 박스 없이 3열. */
.hc-factors-wrap { align-self: end; }
.hc-factors-label { margin: 0 0 16px; font-size: 15px; font-weight: 400; color: var(--tg-accent); letter-spacing: .01em; }
.hc-factors {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(154, 88, 110, .3);
}
.hc-factors li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--tg-hair);
}
.hc-factor-no { grid-row: 1 / span 2; font-size: 34px; font-weight: 200; line-height: 1; color: var(--tg-beauty); font-variant-numeric: tabular-nums; }
.hc-factors b { font-size: 20px; font-weight: 400; letter-spacing: -.02em; color: var(--tg-ink); }
.hc-factor-txt { grid-column: 2; margin-top: 6px; font-size: 15.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
@media (min-width: 1100px) {
  .hc-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--tg-hair); }
  .hc-factors li {
    grid-template-columns: minmax(0, 1fr); padding: 24px 26px 26px; border-bottom: 0;
    border-left: 1px solid var(--tg-hair);
  }
  .hc-factors li:first-child { border-left: 0; padding-left: 0; }
  .hc-factor-no { grid-row: auto; margin-bottom: 14px; font-size: 38px; }
  .hc-factor-txt { grid-column: 1; margin-top: 8px; }
}
/* 맵 제목 줄과의 간격 — 요약 블록 아래로 여유 */
@media (min-width: 900px) { .hx-split > .hmap-intro { margin-top: 56px; } }
@media (max-width: 560px) {
  .hc-factors b { font-size: 18px; }
  .hc-factor-no { font-size: 28px; }
  .hc-factor-txt { font-size: 15px; }
}

/* TYPE A 시술별 카드 — 맵 아래 전체 폭, 한 줄 4개 (2026-09-17 요청) */
@media (min-width: 900px) {
  .hx-split > .hmap-after { grid-column: 1 / -1; }
}
.hmap-after .proc.is-case { margin-top: 24px; }
@media (min-width: 1280px) {
  .hmap-after .proc.is-case { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hmap-after .proc.is-case .proc-card { padding: 28px 26px 30px; }
  /* 좁아진 카드에서 제목과 배지가 부딪히지 않게 배지를 제목 위로 */
  .hmap-after .proc.is-case .case-hd { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .hmap-after .proc.is-case .proc-card h3 { font-size: 20px; }
}

/* 시술별 케이스 카드 — 설명 시작선 맞추기 (2026-09-17)
   설명을 margin-top:auto 로 카드 바닥에 붙여 두어, 설명이 짧은 카드(보톡스)는 설명이 아래로 떨어져 보였다.
   → 카드를 [제목 | 목록 | 설명] 3줄 subgrid 로 만들어, 같은 줄에 있는 카드끼리
     제목·목록·설명의 시작 높이를 맞춘다. 설명은 가장 긴 목록 바로 뒤에서 모두 같이 시작한다. */
@media (min-width: 760px) {
  .proc.is-case { grid-auto-rows: auto; }
  .proc.is-case > .proc-card {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  }
  .proc.is-case .proc-card .proc-desc { margin-top: 20px; align-self: start; }
  .proc.is-case .proc-card ul { align-self: start; }
}

/* 시술별 케이스 카드 — 외곽선 + 하단 설명에만 바탕색 (2026-09-17 요청)
   카드: 흰 바탕 + 옅은 자주 테두리. 설명 영역만 카드 폭 끝까지 연분홍으로 채워 바닥까지 내린다. */
.proc.is-case .proc-card { --case-px: 32px; --case-pb: 32px; }
.hmap-after .proc.is-case .proc-card { --case-px: 26px; --case-pb: 30px; }
@media (max-width: 560px) { .proc.is-case .proc-card { --case-px: 20px; --case-pb: 26px; } }

.proc.is-case .proc-card,
.hmap-after .proc.is-case .proc-card {
  background: #fff; border: 1px solid rgba(154, 88, 110, .24);
  padding-left: var(--case-px); padding-right: var(--case-px); padding-bottom: 0;
  overflow: hidden;
}
.proc.is-case .proc-card .proc-desc {
  margin: 22px calc(var(--case-px) * -1) 0;
  padding: 22px var(--case-px) var(--case-pb);
  border-top: 0; background: #fbf6f8;
}
@media (min-width: 760px) {
  .proc.is-case .proc-card .proc-desc { margin-top: 22px; align-self: stretch; }
}
/* 흰 카드 위라 배지는 연분홍 면으로 */
.proc.is-case .proc-label { background: var(--tg-beauty-soft); border-color: transparent; }
/* 맵 아래 안내 문구 삭제 후 — 맵과 시술별 카드 사이 간격 (2026-09-17) */
.hmap-after .proc.is-case { margin-top: 40px; }
/* 맵 제목 줄 ↔ 맵 박스 간격 좁히기 — 섹션 그리드 행 간격(52px)을 이 줄에서만 줄인다 (2026-09-17) */
@media (min-width: 900px) { .hx-split > .hmap-wide { margin-top: -24px; } }
@media (max-width: 899px) { .hmap-intro .hmap-head { margin-bottom: 0; } }

/* ═══ TYPE B (성형수술) — TYPE A 구성 그대로 (2026-09-17) ═══ */
/* 맵: 왼쪽 3장 / 오른쪽 2장 — 오른쪽 카드가 늘어나지 않게 행 높이 고정 해제, 세로 가운데 */
.hmap.is-five .hmap-col { grid-auto-rows: auto; align-content: center; }
.hmap.is-five .hmap-col li { min-height: 132px; }
/* 수술별 카드 5장 — 넓은 화면 한 줄 5개, 그 아래는 3+2, 태블릿 2열 */
.hmap-after .proc.is-case.is-five > .proc-card:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 1100px) {
  .hmap-after .proc.is-case.is-five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hmap-after .proc.is-case.is-five .case-hd { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .hmap-after .proc.is-case.is-five .proc-card h3 { font-size: 20px; }
}
@media (min-width: 1500px) {
  .hmap-after .proc.is-case.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hmap-after .proc.is-case.is-five .proc-card { --case-px: 22px; }
  .hmap-after .proc.is-case.is-five .proc-card h3 { font-size: 19px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .hmap-after .proc.is-case.is-five > .proc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ═══ 점·선 맵 (.hmap.has-pins) — 카드에서 얼굴 위 지점까지 선을 긋고 끝에 점 (2026-09-17) ═══
   선은 slider.js 가 카드·사진 위치를 재서 SVG 로 그린다. 3열 배치(1100px 이상)에서만 보인다. */
.hmap.has-pins { position: relative; }
.hmap.has-pins .hmap-col li::after { display: none; }
.hmap-pins { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.hmap-pins line { stroke: rgba(60, 50, 55, .28); stroke-width: 1; }
.hmap-pins circle.pin { fill: #2b2326; stroke: #fff; stroke-width: 1.5; }
.hmap-pins circle.pin-halo { fill: rgba(154, 88, 110, .22); }
.hmap-pins .is-on line { stroke: var(--tg-beauty); stroke-width: 1.5; }
.hmap-pins .is-on circle.pin { fill: var(--tg-beauty); }
@media (max-width: 1099px) { .hmap-pins { display: none; } }

/* 12장 카드 — 한쪽 6장이라 카드를 낮게 */
.hmap-wide .hmap.has-pins .hmap-col { gap: 12px; }
.hmap-wide .hmap.has-pins .hmap-col li { padding: 16px 24px; cursor: default; transition: box-shadow .2s; }
.hmap-wide .hmap.has-pins .hmap-col b { margin-bottom: 4px; font-size: 18px; }
.hmap-wide .hmap.has-pins .hmap-col span { font-size: 15px; line-height: 1.55; }
.hmap-wide .hmap.has-pins .hmap-col li.is-on { box-shadow: 0 0 0 1.5px var(--tg-beauty), 0 6px 18px rgba(60, 30, 40, .10); }
@media (min-width: 1100px) {
  .hmap-wide .hmap.has-pins { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) minmax(0, 1fr); gap: 64px; }
  .hmap-wide .hmap.has-pins .hmap-fig img { border-radius: 14px; }
}
/* 점·선 맵 — 가운데 사진 크게 440 → 최대 560px (2026-09-17 요청) */
@media (min-width: 1100px) {
  .hmap-wide .hmap.has-pins { grid-template-columns: minmax(0, 1fr) minmax(400px, 560px) minmax(0, 1fr); gap: 56px; }
}
@media (min-width: 1100px) and (max-width: 1399px) {
  .hmap-wide .hmap.has-pins { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) minmax(0, 1fr); gap: 48px; padding-left: 36px; padding-right: 36px; }
}

/* TYPE B 개인차 고지 — 맵 아래에서 수술별 카드 아래로 이동 (2026-09-17) */
.hmap-after .hc-note-end { margin: 20px 0 0; text-align: right; font-size: 15px; font-weight: 300; color: var(--tg-body); }
@media (max-width: 760px) { .hmap-after .hc-note-end { text-align: left; } }
/* 맵 박스 ↔ 아래 시술·수술별 카드 사이 64 → 40px (2026-09-17 요청) — TYPE A·B 공통 */
@media (min-width: 900px) { .hx-split > .hmap-after { margin-top: -24px; } }
/* TYPE B 개인차 고지 — 눈에 띄게 자주색 (2026-09-17 요청) */
.hmap-after .hc-note-end { color: var(--tg-beauty); font-size: 16px; font-weight: 500; }

/* ═══ COMPARE — 필러 vs 지방이식 (2026-09-17) ═══
   구분 칸을 가운데로 옮겨 [필러 | 항목 | 지방이식] 좌우 대칭 비교.
   페이지 성격상 '흉살 유발 양상' 줄은 연분홍으로 강조한다. 표 구조(th scope)는 그대로 유지. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vs-wrap { width: 100%; }
.vs { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vs col.vs-mid { width: 150px; }
.vs th, .vs td { padding: 0; border: 0; vertical-align: middle; word-break: keep-all; }

/* 머리 — 두 카드 + 가운데 VS */
.vs thead .vs-head {
  padding: 30px 28px 28px; background: #fbf6f8; border-radius: 12px 12px 0 0;
  text-align: center; font-weight: 400;
}
.vs thead .vs-head.is-b { background: var(--tg-beauty); }
.vs-tag { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 400; letter-spacing: .18em; color: var(--tg-beauty); }
.vs-head b { display: block; font-size: 28px; font-weight: 400; letter-spacing: -.03em; color: var(--tg-ink); line-height: 1.3; }
.vs-sub { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 300; color: var(--tg-ink-2); }
.vs-head.is-b .vs-tag, .vs-head.is-b b, .vs-head.is-b .vs-sub { color: #fff; }
.vs-head.is-b .vs-tag { color: rgba(255, 255, 255, .8); }
.vs .vs-badge { text-align: center; }
.vs-badge span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  border: 1px solid rgba(154, 88, 110, .35); color: var(--tg-beauty);
  font-size: 15px; font-weight: 500; letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(60, 30, 40, .08);
}

/* 본문 줄 */
.vs tbody td, .vs tbody th { padding: 20px 24px; border-bottom: 1px solid var(--tg-hair); }
.vs tbody td { font-size: 16.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); }
.vs tbody td:first-child { text-align: right; }
.vs tbody td:last-child { text-align: left; }
.vs tbody th[scope="row"] { padding-left: 8px; padding-right: 8px; text-align: center; }
.vs tbody th[scope="row"]::before { content: none; }
.vs tbody th[scope="row"] {
  font-size: 14.5px; font-weight: 500; color: var(--tg-beauty); letter-spacing: -.01em;
}
.vs tbody tr:first-child td, .vs tbody tr:first-child th { border-top: 0; }
.vs tbody tr.is-key td, .vs tbody tr.is-key th { background: #fbf6f8; }
.vs tbody tr.is-key td { font-weight: 500; color: var(--tg-ink); }
.vs tbody tr.is-key th[scope="row"] { color: var(--tg-beauty); font-weight: 600; }

@media (max-width: 640px) {
  .vs col.vs-mid { width: 84px; }
  .vs thead .vs-head { padding: 20px 10px 18px; }
  .vs-head b { font-size: 21px; }
  .vs-sub { font-size: 13px; }
  .vs-tag { font-size: 10px; letter-spacing: .12em; }
  .vs-badge span { width: 38px; height: 38px; font-size: 12px; }
  .vs tbody td, .vs tbody th { padding: 14px 10px; }
  .vs tbody td { font-size: 14.5px; }
  .vs tbody th[scope="row"] { font-size: 12.5px; padding-left: 4px; padding-right: 4px; }
}
.nw { white-space: nowrap; }

/* COMPARE 본문 글자 확대 (2026-09-17 요청) — 값 16.5 → 18px, 항목명 14.5 → 16px */
.vs tbody td { font-size: 18px; }
.vs tbody th[scope="row"] { font-size: 16px; }
.vs tbody td, .vs tbody th { padding-top: 22px; padding-bottom: 22px; }
.vs col.vs-mid { width: 170px; }
@media (max-width: 1279px) { .vs tbody td { font-size: 17px; } .vs tbody th[scope="row"] { font-size: 15px; } }
@media (max-width: 640px) {
  .vs col.vs-mid { width: 88px; }
  .vs tbody td { font-size: 15px; }
  .vs tbody th[scope="row"] { font-size: 13px; }
  .vs tbody td, .vs tbody th { padding-top: 15px; padding-bottom: 15px; }
}

/* ═══ DIFFERENTIATION — 원인 감별 (2026-09-17) ═══
   [비슷해 보이는 세 경우 ≠ ≠] → 한 줄 결론 → [먼저 확인하는 세 가지] → 결과 막대.
   확인 항목은 TYPE A·B 제목 옆 요약과 같은 부품(.hc-factors)을 쓴다. */
.dx-cases {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch;
}
.dx-cases > li:not(.dx-neq) {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 22px 24px; border: 1px solid rgba(154, 88, 110, .24); border-radius: 10px; background: #fff;
}
.dx-case-tag { font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--tg-beauty); }
.dx-cases b { font-size: 20px; font-weight: 400; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.dx-neq { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 200; color: var(--tg-beauty); line-height: 1; }
@media (min-width: 760px) {
  .dx-cases { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); gap: 0; }
}
@media (max-width: 759px) { .dx-neq { transform: rotate(90deg); height: 24px; } }

.dx-state {
  margin: 22px 0 0; font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all;
}
.dx-state b { font-weight: 500; color: var(--tg-beauty); }

.dx-check { margin-top: 44px; }
.dx-result {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 0;
  padding: 18px 24px; border-radius: 10px; background: var(--tg-beauty); color: #fff;
  font-size: 17px; font-weight: 300; line-height: 1.6; word-break: keep-all;
}
.dx-result svg { flex: 0 0 auto; width: 22px; height: 22px; }
.dx-result b { font-weight: 500; }
@media (max-width: 560px) {
  .dx-cases b { font-size: 18px; }
  .dx-state { font-size: 16.5px; }
  .dx-result { font-size: 15.5px; padding: 16px 18px; }
}
@media (min-width: 760px) and (max-width: 1279px) {
  .dx-cases > li:not(.dx-neq) { padding: 18px 16px; }
  .dx-cases b { font-size: 16.5px; }
  .dx-cases { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════
   외과수술 후 흉살 페이지 (2026-09-17)
   미용시술·성형수술 페이지 부품을 그대로 쓰고, 이 페이지 카드(내용 길이 제각각)만 따로 맞춘다.
   ═══════════════════════════════════════════════ */
/* 요약 줄 바로 아래 카드 — 음수 여백 대신 약간의 간격 */
@media (min-width: 900px) { .hx-split > .hc-factors-wrap + .hmap-after { margin-top: 12px; } }

/* 부위별 카드 2×2 — 목록 개수가 달라 subgrid 정렬을 끄고, 분홍 설명 영역을 카드 바닥에 붙인다 */
@media (min-width: 900px) {
  .hmap-after .proc.is-case.is-free { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 760px) {
  .proc.is-case.is-free > .proc-card { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; }
  .proc.is-case.is-free .proc-card .proc-desc { margin-top: auto; align-self: stretch; }
  .proc.is-case.is-free .proc-card > ul:last-of-type { margin-bottom: 26px; }
}
.hmap-after .proc.is-case.is-free .proc-card { --case-px: 34px; --case-pb: 32px; padding-top: 32px; }
.hmap-after .proc.is-case.is-free .case-hd { flex-direction: row; align-items: center; }
.hmap-after .proc.is-case.is-free .proc-card h3 { font-size: 22px; }
/* 대상 예시 — 체크 목록 대신 태그 */
.proc.is-case ul.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.proc.is-case ul.case-tags li {
  padding: 8px 14px; border-radius: 999px; background: #fbf6f8; border: 1px solid rgba(154, 88, 110, .2);
  font-size: 15px; line-height: 1.3; color: var(--tg-ink-2);
}
.proc.is-case ul.case-tags li::before { content: none; }
.proc.is-case .case-sublabel { display: inline-block; align-self: flex-start; margin: 24px 0 14px; }
@media (max-width: 560px) {
  .hmap-after .proc.is-case.is-free .proc-card { --case-px: 20px; --case-pb: 26px; padding-top: 24px; }
  .hmap-after .proc.is-case.is-free .proc-card h3 { font-size: 19px; }
  .proc.is-case ul.case-tags li { font-size: 14px; padding: 7px 12px; }
}

/* 흉터 ≠ 유착 — 두 장 */
@media (min-width: 760px) { .dx-cases.is-two { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); } }
.dx-cases.is-two > li:not(.dx-neq) { padding: 28px 28px 26px; }
.dx-cases.is-two b { font-size: 26px; }
.dx-case-txt { margin-top: 4px; font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.dx-cases.is-two > li:last-child { background: #fbf6f8; border-color: transparent; }
.dx-flow .dx-cases.is-two + .dx-state { margin-top: 24px; }

/* 수술별 주의사항 — 2×2 카드 */
.hc-caution { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .hc-caution { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hc-caution li {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 28px 28px 28px; border-radius: 10px; background: #fff;
  border: 1px solid rgba(154, 88, 110, .24); border-left: 4px solid var(--tg-beauty);
}
.hc-caution b { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--tg-beauty); }
.hc-caution span { font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) {
  .hc-caution li { padding: 20px 20px 22px; }
  .hc-caution b { font-size: 18px; }
  .hc-caution span { font-size: 15.5px; }
}
/* 부위별 카드 — 설명을 바닥으로 밀면 짧은 카드(A·C)에 흰 빈칸이 생긴다.
   설명은 목록 바로 뒤에서 시작하고, 남는 높이는 분홍 설명 영역이 늘어나 채운다. */
@media (min-width: 760px) {
  .proc.is-case.is-free .proc-card .proc-desc { margin-top: 0; flex: 1 1 auto; }
  .proc.is-case.is-free .proc-card > ul:last-of-type { margin-bottom: 28px; }
}

/* 메인 슬라이드 — 다크그린 톤 깔기 (2026-09-17 고객 요청: 너무 밝다)
   사진 전체에 딥그린(#132D27) 반투명 면을 덮고, 기존 카피 뒤 음영은 그대로 위에 겹친다.
   슬라이드 2·3 은 카피 위치별 음영이 따로 있어 세 장 모두 같은 면을 추가한다. */
.hero-slide::after {
  background:
    radial-gradient(68% 54% at 50% 46%, rgba(8,20,16,.30) 0%, rgba(8,20,16,.06) 68%, rgba(8,20,16,0) 100%),
    linear-gradient(to bottom, rgba(19,45,39,.42) 0%, rgba(19,45,39,.48) 55%, rgba(12,30,25,.62) 100%);
}
@media (min-width: 900px) {
  .hero-slide:nth-child(3).on::after {
    background:
      radial-gradient(62% 56% at 74% 46%, rgba(8,20,16,.32) 0%, rgba(8,20,16,.08) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.42) 0%, rgba(19,45,39,.48) 55%, rgba(12,30,25,.62) 100%);
  }
  .hero-slide:nth-child(1).on::after {
    background:
      radial-gradient(62% 56% at 28% 46%, rgba(8,20,16,.32) 0%, rgba(8,20,16,.08) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.42) 0%, rgba(19,45,39,.48) 55%, rgba(12,30,25,.62) 100%);
  }
}
/* 히어로 타이틀 두께 200 → 700 (2026-09-17 요청) */
.hero-h1 { font-weight: 700; }

/* 메인 슬라이드 다크그린 한 단계 더 진하게 (2026-09-17 요청) — .42/.48/.62 → .58/.64/.76 */
.hero-slide::after {
  background:
    radial-gradient(68% 54% at 50% 46%, rgba(8,20,16,.30) 0%, rgba(8,20,16,.06) 68%, rgba(8,20,16,0) 100%),
    linear-gradient(to bottom, rgba(19,45,39,.58) 0%, rgba(19,45,39,.64) 55%, rgba(12,30,25,.76) 100%);
}
@media (min-width: 900px) {
  .hero-slide:nth-child(3).on::after {
    background:
      radial-gradient(62% 56% at 74% 46%, rgba(8,20,16,.32) 0%, rgba(8,20,16,.08) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.58) 0%, rgba(19,45,39,.64) 55%, rgba(12,30,25,.76) 100%);
  }
  .hero-slide:nth-child(1).on::after {
    background:
      radial-gradient(62% 56% at 28% 46%, rgba(8,20,16,.32) 0%, rgba(8,20,16,.08) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.58) 0%, rgba(19,45,39,.64) 55%, rgba(12,30,25,.76) 100%);
  }
}

/* SINCE 2012 — 히어로와 같은 다크그린으로 어둡게 (2026-09-17 요청)
   밝게 올렸던 검정 딤(.22/.15/.32)을 히어로와 같은 딥그린 면(.58/.64/.76)으로 교체. */
.hist {
  background-image:
    linear-gradient(to bottom, rgba(19,45,39,.58) 0%, rgba(19,45,39,.64) 50%, rgba(12,30,25,.76) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
}
/* 제목 뒤 원형 음영 — 바탕이 어두워져 필요 없어짐 */
.hist::before { background: none; }

/* 메인 슬라이드 — 더 진한 다크그린 그라데이션 (2026-09-17 요청)
   위는 사진이 살짝 비치고(.50) 아래로 갈수록 거의 덮이도록(.92) 세로 그라데이션 폭을 키운다. */
.hero-slide::after {
  background:
    radial-gradient(68% 54% at 50% 46%, rgba(8,20,16,.28) 0%, rgba(8,20,16,.06) 68%, rgba(8,20,16,0) 100%),
    linear-gradient(to bottom, rgba(19,45,39,.50) 0%, rgba(19,45,39,.68) 45%, rgba(14,34,29,.84) 75%, rgba(10,26,22,.94) 100%);
}
@media (min-width: 900px) {
  .hero-slide:nth-child(3).on::after {
    background:
      radial-gradient(62% 56% at 74% 46%, rgba(8,20,16,.30) 0%, rgba(8,20,16,.08) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.50) 0%, rgba(19,45,39,.68) 45%, rgba(14,34,29,.84) 75%, rgba(10,26,22,.94) 100%);
  }
  .hero-slide:nth-child(1).on::after {
    background:
      radial-gradient(62% 56% at 28% 46%, rgba(8,20,16,.30) 0%, rgba(8,20,16,.08) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.50) 0%, rgba(19,45,39,.68) 45%, rgba(14,34,29,.84) 75%, rgba(10,26,22,.94) 100%);
  }
}

/* 메인 슬라이드 — 그라데이션 한 단계 더 진하게 (2026-09-17 요청) .50/.68/.84/.94 → .66/.80/.90/.97 */
.hero-slide::after {
  background:
    radial-gradient(68% 54% at 50% 46%, rgba(8,20,16,.24) 0%, rgba(8,20,16,.05) 68%, rgba(8,20,16,0) 100%),
    linear-gradient(to bottom, rgba(19,45,39,.66) 0%, rgba(19,45,39,.80) 45%, rgba(14,34,29,.90) 75%, rgba(10,26,22,.97) 100%);
}
@media (min-width: 900px) {
  .hero-slide:nth-child(3).on::after {
    background:
      radial-gradient(62% 56% at 74% 46%, rgba(8,20,16,.26) 0%, rgba(8,20,16,.06) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.66) 0%, rgba(19,45,39,.80) 45%, rgba(14,34,29,.90) 75%, rgba(10,26,22,.97) 100%);
  }
  .hero-slide:nth-child(1).on::after {
    background:
      radial-gradient(62% 56% at 28% 46%, rgba(8,20,16,.26) 0%, rgba(8,20,16,.06) 70%, rgba(8,20,16,0) 100%),
      linear-gradient(to bottom, rgba(19,45,39,.66) 0%, rgba(19,45,39,.80) 45%, rgba(14,34,29,.90) 75%, rgba(10,26,22,.97) 100%);
  }
}

/* SINCE 2012 — 히어로와 같은 진한 다크그린 세로 그라데이션 (2026-09-17 요청) */
.hist {
  background-image:
    linear-gradient(to bottom, rgba(19,45,39,.66) 0%, rgba(19,45,39,.80) 45%, rgba(14,34,29,.90) 75%, rgba(10,26,22,.97) 100%),
    url("/assets/images/hist-bg.jpg?v=2");
}

/* SINCE 2012 1·3번 카드 — 배경이 딥그린이 되어 딥그린 배지·테두리가 묻힌다 (2026-09-17)
   가운데 카드와 같이 흰색 반투명 테두리 + 흰색 반투명 배지(딥그린 글자)로 통일. */
.hist .hist-card { border-color: rgba(255, 255, 255, .80); }
.hist .hist-card p {
  background: rgba(255, 255, 255, .80);
  border-color: rgba(255, 255, 255, .85);
  color: var(--tg-deep);
  font-weight: 500;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* 서브페이지 제목 — 지정값 적용 (2026-09-17) */
.pg-title {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.25;
}
/* 서브페이지 제목 두께 600 → 500 (2026-09-17 요청) */
.pg-title { font-weight: 500; }

/* 메인 섹션 타이틀 — 지정값 적용, 두께 200 → 400 (2026-09-17) */
.tg-h2 {
  font-size: 45px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.03em;
}
/* 위 45px 선언이 기존 모바일 비례 크기를 덮어쓰지 않도록 다시 선언 */
@media (max-width: 1200px) { .tg-h2 { font-size: 38px; } }
@media (max-width: 900px)  { .tg-h2 { font-size: 32px; } }
@media (max-width: 560px)  { .tg-h2 { font-size: 27px; } }

/* ═══ 이런 증상엔 이런 처방을 — 카드 재디자인 (2026-09-17) ═══
   아이콘을 증상 부위 그림(뼈·심장·배터리·신장·위·폐)으로 바꾸고,
   사각 틀 대신 연한 원, 처방명은 알약 태그, 화살표는 원형 버튼으로. 마우스를 올리면 카드가 살짝 뜬다. */
.find-grid { gap: 16px; }
.find {
  gap: 22px; padding: 26px 26px 26px 26px; border-radius: 14px;
  border: 1px solid rgba(19, 45, 39, .08); background: #fff;
  box-shadow: 0 1px 2px rgba(19, 45, 39, .04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.find:hover {
  border-color: rgba(21, 95, 70, .35); background: #fff;
  box-shadow: 0 12px 28px rgba(19, 45, 39, .10); transform: translateY(-2px);
}
.find-ico {
  width: 64px; height: 64px; border: 0; border-radius: 50%;
  background: var(--tg-med-soft); color: var(--tg-med);
  transition: background-color .2s, color .2s;
}
.find-ico svg { width: 32px; height: 32px; stroke-width: 1.5; }
.find:hover .find-ico { background: var(--tg-med); color: #fff; border: 0; }
.find-when { margin-bottom: 12px; font-size: 19px; font-weight: 500; letter-spacing: -.025em; }
.find-rx { gap: 6px; }
.find-rx em {
  padding: 6px 13px; border-radius: 999px; border: 0;
  background: #f1f5f3; font-size: 14px; font-weight: 400; color: var(--tg-ink-2);
}
.find:hover .find-rx em { background: var(--tg-med-soft); border: 0; }
.find-go {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(19, 45, 39, .12); color: var(--tg-med);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.find:hover .find-go { background: var(--tg-med); border-color: var(--tg-med); color: #fff; transform: none; }
.find-note { margin-top: 32px; font-size: 15px; color: var(--tg-body); }
@media (max-width: 560px) {
  .find { padding: 20px; gap: 16px; }
  .find-ico { width: 52px; height: 52px; }
  .find-ico svg { width: 26px; height: 26px; }
  .find-when { font-size: 17px; }
  .find-rx em { font-size: 13px; padding: 5px 11px; }
}
@media (prefers-reduced-motion: reduce) { .find, .find:hover { transform: none; } }

/* SINCE 2012 배지 — 반투명이라 카드 윗테두리 흰 선이 배지 안으로 비쳐 보였다 (2026-09-17)
   같은 밝기의 불투명 색으로 바꿔 선을 가린다. */
.hist .hist-card p,
.hist-cards .hist-card:nth-child(2) p {
  background: #dfe5e3; border-color: #dfe5e3;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* 처방 카드 아이콘 — 고객 지정 PNG 를 마스크로 칠한다 (2026-09-17)
   검정 선 아이콘을 그대로 쓰면 색을 바꿀 수 없어, 모양만 따서 currentColor 로 채운다.
   덕분에 평소엔 초록, 마우스를 올리면 흰색으로 바뀌는 기존 동작이 그대로 유지된다. */
.find-ico-img {
  display: block; width: 34px; height: 34px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
@media (max-width: 560px) { .find-ico-img { width: 28px; height: 28px; } }
/* 원본이 512px 가는 선이라 34px 에서 흐릿했다 — 조금 키운다 */
.find-ico-img { width: 40px; height: 40px; }
@media (max-width: 560px) { .find-ico-img { width: 32px; height: 32px; } }
/* 처방 카드 아이콘 한 단계 더 크게 (2026-09-17 요청) — 원 64 → 72px, 아이콘 40 → 48px */
.find-ico { width: 72px; height: 72px; }
.find-ico-img { width: 48px; height: 48px; }
@media (max-width: 560px) {
  .find-ico { width: 58px; height: 58px; }
  .find-ico-img { width: 38px; height: 38px; }
}
/* 처방 카드 제목 19 → 21px (2026-09-17 요청) */
.find-when { font-size: 21px; }
@media (max-width: 560px) { .find-when { font-size: 18px; } }
/* 처방명 태그 14 → 16px (2026-09-17 지정값), 모바일 비례 */
.find-rx em { padding: 6px 13px; border-radius: 999px; font-size: 16px; font-weight: 400; color: var(--tg-ink-2); }
@media (max-width: 900px) { .find-rx em { font-size: 15px; } }
@media (max-width: 560px) { .find-rx em { font-size: 14.5px; padding: 5px 12px; } }
/* 처방 카드 제목 PC 23px (2026-09-17 지정값) — 모바일은 기존 비례 유지 */
.find-when { font-size: 23px; }
@media (max-width: 900px) { .find-when { font-size: 20px; } }
@media (max-width: 560px) { .find-when { font-size: 18px; } }
/* 처방 카드 제목 — PC 23px 에 비례해 태블릿·모바일도 올림 (2026-09-17 요청) */
@media (max-width: 900px) { .find-when { font-size: 21.5px; } }
@media (max-width: 560px) { .find-when { font-size: 20px; line-height: 1.4; } }
/* 처방 카드 아이콘 한 단계 더 (2026-09-17 요청) — 원 72 → 84px, 아이콘 48 → 58px */
.find-ico { width: 84px; height: 84px; }
.find-ico-img { width: 58px; height: 58px; }
@media (max-width: 900px) {
  .find-ico { width: 76px; height: 76px; }
  .find-ico-img { width: 52px; height: 52px; }
}
@media (max-width: 560px) {
  .find-ico { width: 64px; height: 64px; }
  .find-ico-img { width: 44px; height: 44px; }
}

/* 모바일에서만 살아나는 줄바꿈 (2026-09-17) — 처방 카드 긴 제목을 뜻 단위로 두 줄 */
.br-mob { display: none; }
@media (max-width: 560px) { .br-mob { display: inline; } }
/* 처방 카드 아이콘 크기 조정 (앞 블록) 반영 */
/* 처방 카드 — 원 크기 유지, 아이콘만 살짝 줄임 (2026-09-17) 58 → 50px */
.find-ico-img { width: 50px; height: 50px; }
@media (max-width: 900px) { .find-ico-img { width: 45px; height: 45px; } }
@media (max-width: 560px) { .find-ico-img { width: 38px; height: 38px; } }

/* ═══════════════════════════════════════════════
   특수한약처방 — 뼈·관절·통증 개요 + 처방 4종 상세 (2026-09-17)
   흉살 페이지 부품(좌우 2단·태그·요약 3열·카드)을 재사용하되,
   .herb-page 안에서는 포인트 색을 자주 → 초록(메디컬)으로 바꾼다.
   ═══════════════════════════════════════════════ */
.herb-page { --tg-beauty: var(--tg-med); --tg-beauty-soft: var(--tg-med-soft); }
.herb-page .hc-factors { border-top-color: rgba(19, 122, 82, .3); }
.herb-page .hc-caution li { border-color: rgba(19, 122, 82, .22); border-left-color: var(--tg-med); }

/* 리드 — 왼쪽 글, 오른쪽 '한눈에 보기' 딥그린 패널 */
.rx-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 900px) { .rx-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; } }
.rx-lead .hx-eyebrow, .rx-lead .pg-h2,
.pg-body .rx-lead .hx-eyebrow, .pg-body .rx-lead .pg-h2 { text-align: left; }
.pg-body .rx-lead .pg-intro { max-width: none; margin: 0 0 24px; text-align: left; font-size: 19px; line-height: 1.8; }
.rx-lead .pg-h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; line-height: 1.25; letter-spacing: -.03em; margin-bottom: 18px; }
.rx-title small { display: inline-block; margin-left: 10px; font-size: .42em; font-weight: 300; letter-spacing: 0; color: var(--tg-med); vertical-align: middle; }
.rx-spec { padding: 34px 34px 30px; border-radius: 14px; background: var(--tg-deep); color: #fff; }
.rx-spec-label { margin: 0 0 18px; font-size: 14px; font-weight: 400; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.rx-spec-dl { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.rx-spec-dl dt, .rx-spec-dl dd { margin: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.rx-spec-dl dt { font-size: 14.5px; font-weight: 300; color: rgba(255, 255, 255, .72); }
.rx-spec-dl dd { font-size: 16.5px; font-weight: 400; line-height: 1.55; color: #fff; word-break: keep-all; }
.rx-spec-list { list-style: none; margin: 0; padding: 0; counter-reset: sp; }
.rx-spec-list li {
  counter-increment: sp; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px;
  padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14);
}
.rx-spec-list li::before { content: counter(sp, decimal-leading-zero); grid-row: 1 / span 2; font-size: 22px; font-weight: 200; color: #8fd3b4; line-height: 1.2; }
.rx-spec-list b { font-size: 18px; font-weight: 500; color: #fff; }
.rx-spec-list span { font-size: 14.5px; font-weight: 300; color: rgba(255, 255, 255, .72); }

/* 강조 한 줄 */
.rx-callout {
  margin: 22px 0 0; padding: 16px 20px; border-radius: 10px; background: var(--tg-med-soft);
  font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all;
}
.rx-callout b { font-weight: 500; color: var(--tg-med-deep); }

/* 처방 4종 카드 (개요) — 전체 폭 2×2 */
@media (min-width: 900px) { .hx-split > .rx-cards-wrap { grid-column: 1 / -1; } }
.rx-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .rx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-card {
  display: flex; flex-direction: column; gap: 12px; padding: 30px 32px 28px;
  border-radius: 14px; border: 1px solid rgba(19, 45, 39, .1); background: #fff;
  text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.rx-card:hover { border-color: rgba(19, 122, 82, .4); box-shadow: 0 14px 30px rgba(19, 45, 39, .10); transform: translateY(-2px); text-decoration: none; }
.rx-card-top { display: flex; align-items: center; gap: 8px; }
.rx-card-no { padding: 5px 12px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: .1em; }
.rx-card-form { padding: 5px 12px; border-radius: 999px; background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 13px; }
.rx-card-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; margin-top: 6px; font-size: 28px; font-weight: 500; letter-spacing: -.03em; color: var(--tg-ink); }
.rx-card-name small { font-size: 15px; font-weight: 300; color: var(--tg-med); letter-spacing: 0; }
.rx-card-sum { font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.rx-card-herbs { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-card-herbs em { font-style: normal; padding: 6px 13px; border-radius: 999px; background: #f1f5f3; font-size: 14.5px; color: var(--tg-ink-2); }
.rx-card-go {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(19, 122, 82, .25);
  font-size: 16.5px; font-weight: 400; color: var(--tg-med);
}
.rx-card-go svg { transition: transform .2s; }
.rx-card:hover .rx-card-go svg { transform: translateX(4px); }

/* 처방 특징 아래 — 인증·시험 / 법제 과정 / 수치 */
.rx-proof { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .rx-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-proof li { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px 18px 58px; position: relative; border-radius: 10px; border: 1px solid rgba(19, 122, 82, .22); background: #fff; }
.rx-proof li::before {
  content: ""; position: absolute; left: 22px; top: 20px; width: 22px; height: 22px;
  background-color: var(--tg-med);
  border-radius: 50%;
}
.rx-proof li::after {
  content: ""; position: absolute; left: 29px; top: 25px; width: 6px; height: 10px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg);
}
.rx-proof b { font-size: 17px; font-weight: 500; color: var(--tg-ink); }
.rx-proof span { font-size: 14.5px; font-weight: 300; color: var(--tg-body); }

.rx-process { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1100px) { .rx-process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rx-process li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 10px; background: var(--tg-med-soft); }
.rx-process span { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--tg-med); }
.rx-process b { font-size: 18px; font-weight: 500; color: var(--tg-ink); }
.rx-process em { font-style: normal; font-size: 14.5px; font-weight: 300; color: var(--tg-ink-2); word-break: keep-all; }

.rx-stat { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rx-stat li { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: 10px; background: var(--tg-med-soft); }
.rx-stat b { font-size: 38px; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--tg-med); font-variant-numeric: tabular-nums; }
.rx-stat b small { font-size: .5em; margin-left: 2px; }
.rx-stat span { font-size: 14.5px; font-weight: 300; color: var(--tg-ink-2); word-break: keep-all; }

/* 골절 원인 목록 */
.rx-cause { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 760px) { .rx-cause { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-cause li {
  position: relative; padding: 16px 18px 16px 46px; border-radius: 10px; border: 1px solid var(--tg-hair); background: #fff;
  font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all;
}
.rx-cause li::before {
  content: "!"; position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tg-med-soft); color: var(--tg-med); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 구성 약재 카드 */
.rx-herb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .rx-herb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rx-herb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rx-herb-grid li {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 24px;
  border-radius: 12px; border: 1px solid rgba(19, 45, 39, .1); background: #fff;
}
.rx-herb-grid li.is-main { background: var(--tg-med-soft); border-color: transparent; }
.rx-herb-tag { align-self: flex-start; margin-bottom: 4px; padding: 4px 11px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 12.5px; font-weight: 500; }
.rx-herb-grid b { font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--tg-ink); }
.rx-herb-grid li > span:last-child { font-size: 15.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }

/* 근거·출전 — 접이식 목록 */
.rx-src-list { border-bottom: 1px solid var(--tg-hair); }
.herb-page .rx-src > summary { font-size: 17px; font-weight: 400; color: var(--tg-ink); }
.herb-page .rx-src-body { padding: 0 8px 24px 0; }
.herb-page .rx-src-body p { font-size: 16px; line-height: 1.85; color: var(--tg-ink-2); }
.herb-page .rx-src-body cite { font-size: 14px; color: var(--tg-body); }
.herb-page .rx-src-table { font-size: 14.5px; }

/* 같은 분류의 다른 처방 */
.pg-body .rx-more .hx-eyebrow, .pg-body .rx-more .pg-h2 { text-align: left; }
.rx-more-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .rx-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rx-more-card {
  display: flex; flex-direction: column; gap: 6px; padding: 24px 26px;
  border-radius: 12px; border: 1px solid rgba(19, 45, 39, .1); background: #fff;
  text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s;
}
.rx-more-card:hover { border-color: rgba(19, 122, 82, .4); box-shadow: 0 10px 24px rgba(19, 45, 39, .08); text-decoration: none; }
.rx-more-card span { font-size: 13px; letter-spacing: .06em; color: var(--tg-med); }
.rx-more-card b { font-size: 22px; font-weight: 500; color: var(--tg-ink); }
.rx-more-card em { font-style: normal; font-size: 15.5px; font-weight: 300; color: var(--tg-ink-2); }

/* 안내 */
.rx-disclaimer {
  margin: 56px 0 0; padding: 20px 24px; border-radius: 10px; background: #f4f7f5;
  font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--tg-body); word-break: keep-all;
}
.rx-disclaimer b { margin-right: 8px; font-weight: 600; color: var(--tg-med); }

@media (max-width: 560px) {
  .rx-spec { padding: 26px 22px 22px; }
  .rx-spec-dl { grid-template-columns: 78px minmax(0, 1fr); }
  .rx-spec-dl dd { font-size: 15.5px; }
  .pg-body .rx-lead .pg-intro { font-size: 16.5px; }
  .rx-card { padding: 24px 22px; }
  .rx-card-name { font-size: 24px; }
  .rx-stat b { font-size: 30px; }
  .rx-stat { gap: 8px; }
  .rx-stat li { padding: 16px 12px; }
}

/* 처방 카드 — 처방명 칩을 각 처방 상세로 연결 (2026-09-17)
   카드 전체 링크(.find-link)를 카드 위에 덮고, 칩 링크만 그 위로 올려 따로 누를 수 있게 한다. */
.find { position: relative; cursor: pointer; }
.find-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.find-link:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 3px; }
.find-rx-link {
  position: relative; z-index: 2;
  padding: 6px 13px; border-radius: 999px; background: #f1f5f3;
  font-size: 16px; font-weight: 400; color: var(--tg-ink-2); text-decoration: none;
  transition: background-color .18s, color .18s;
}
.find:hover .find-rx-link { background: var(--tg-med-soft); }
.find .find-rx-link:hover, .find .find-rx-link:focus-visible { background: var(--tg-med); color: #fff; text-decoration: none; }
@media (max-width: 900px) { .find-rx-link { font-size: 15px; } }
@media (max-width: 560px) { .find-rx-link { font-size: 14.5px; padding: 5px 12px; } }

/* 자율신경·순환 처방 페이지 (2026-09-17) — 처방 3종이라 카드·약재·다른 처방 그리드를 개수에 맞춘다 */
@media (min-width: 1100px) { .rx-cards.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rx-herb-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .rx-more-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-callout a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 단계별 자가 체크 — 3열 카드, 각 카드에 증상 목록 */
.rx-stage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1100px) { .rx-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rx-stage > li { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 22px; border-radius: 12px; border: 1px solid rgba(19, 122, 82, .22); background: #fff; }
.rx-stage > li:nth-child(2) { background: var(--tg-med-soft); border-color: transparent; }
.rx-stage > li:nth-child(3) { background: var(--tg-deep); border-color: transparent; }
.rx-stage-no { font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--tg-med); }
.rx-stage > li > b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--tg-ink); }
.rx-stage ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rx-stage ul li { position: relative; padding-left: 16px; font-size: 15.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.rx-stage ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-med); }
.rx-stage > li:nth-child(3) .rx-stage-no { color: #8fd3b4; }
.rx-stage > li:nth-child(3) > b { color: #fff; }
.rx-stage > li:nth-child(3) ul li { color: rgba(255, 255, 255, .85); }
.rx-stage > li:nth-child(3) ul li::before { background: #8fd3b4; }
@media (min-width: 1100px) { .hx-split > .hx-split-bd > .rx-stage + .rx-callout { margin-top: 20px; } }

/* 자가 체크 점수 안내 */
.rx-score { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 760px) { .rx-score { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-score li { display: flex; align-items: baseline; gap: 14px; padding: 18px 22px; border-radius: 10px; background: var(--tg-med-soft); }
.rx-score li:last-child { background: var(--tg-deep); }
.rx-score b { flex-shrink: 0; font-size: 18px; font-weight: 500; color: var(--tg-med-deep); }
.rx-score span { font-size: 15.5px; font-weight: 300; color: var(--tg-ink-2); word-break: keep-all; }
.rx-score li:last-child b { color: #8fd3b4; }
.rx-score li:last-child span { color: rgba(255, 255, 255, .88); }

/* 처방 전에 먼저 확인하는 것 — 번호 대신 항목 아이콘 (2026-09-17 요청)
   원(::before) 위에 아이콘(::after, SVG 마스크)을 겹친다. 아이콘은 li 의 data-ico 로 고른다. */
.rx-spec-list li { position: relative; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 0; }
.rx-spec-list li::before {
  content: ""; grid-row: 1 / span 2; align-self: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(143, 211, 180, .14); border: 1px solid rgba(143, 211, 180, .28);
}
.rx-spec-list li::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background-color: #8fd3b4;
  -webkit-mask: var(--spec-ico) center / contain no-repeat; mask: var(--spec-ico) center / contain no-repeat;
}
.rx-spec-list li:not([data-ico])::after { display: none; }
.rx-spec-list b { grid-column: 2; }
.rx-spec-list span { grid-column: 2; margin-top: 2px; }
.rx-spec-list li[data-ico="age"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.2 3.6-7 8-7s8 2.8 8 7'/></svg>"); }
.rx-spec-list li[data-ico="bone"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17.2 3.6a2.6 2.6 0 0 1 2.4 3.7 2.6 2.6 0 0 1-3.1 3.3L10.6 16.5a2.6 2.6 0 0 1-3.3 3.1 2.6 2.6 0 0 1-3.7-2.4 2.6 2.6 0 0 1 3.5-2.4l5.9-5.9a2.6 2.6 0 0 1 2.4-3.5z'/></svg>"); }
.rx-spec-list li[data-ico="digest"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M13.6 3.4v3.3c0 1.3 1.1 2 2.5 2.6 1.9.8 3.5 2.4 3.5 5.3 0 3.7-3.3 6.1-7.3 6.1-4.3 0-7.7-2.6-7.7-6.1 0-2 1.3-3.1 2.9-3.1 1.9 0 2.6 1.5 4.1 1.5 1.2 0 1.9-.9 1.9-2.1V3.4'/></svg>"); }
.rx-spec-list li[data-ico="pill"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10.5 20.5l-7-7a4.95 4.95 0 1 1 7-7l7 7a4.95 4.95 0 1 1-7 7z'/><path d='M7 7l7 7'/></svg>"); }
.rx-spec-list li[data-ico="sleep"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/></svg>"); }
.rx-spec-list li[data-ico="test"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4.5' width='14' height='16.5' rx='2'/><path d='M9 3h6v3H9z'/><path d='M9 13.5l2 2 4-4'/></svg>"); }
.rx-spec-list li[data-ico="drink"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h8l-.8 6.5a3.2 3.2 0 0 1-6.4 0z'/><path d='M12 13v8M8.5 21h7'/></svg>"); }
.rx-spec-list li[data-ico="battery"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7.5' width='16' height='9' rx='2'/><path d='M21.5 10.5v3M6 10.5v3'/></svg>"); }
.rx-spec-list li[data-ico="pulse"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h4l2.2-5 4.2 10 2.2-5H21'/></svg>"); }
.rx-spec-list li[data-ico="drop"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/></svg>"); }
.rx-spec-list li[data-ico="heart"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7.5-4.6-7.5-10.3A4.2 4.2 0 0 1 12 7.2a4.2 4.2 0 0 1 7.5 2.5C19.5 15.4 12 20 12 20z'/></svg>"); }
.rx-spec-list li[data-ico="meal"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3v7a2 2 0 0 0 4 0V3M8 12v9M17.5 3C15.5 4 14.5 6.5 14.5 9v4h3v8'/></svg>"); }
.rx-spec-list li[data-ico="cycle"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.35-5.65'/><path d='M20 4v4.5h-4.5'/></svg>"); }
.rx-spec-list li[data-ico="mic"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='3' width='6' height='11' rx='3'/><path d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/></svg>"); }
.rx-spec-list li[data-ico="record"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5M9 13h6M9 17h4'/></svg>"); }
.rx-spec-list li[data-ico="allergy"] { --spec-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 4.8-3.4 7.9-8 9-4.6-1.1-8-4.2-8-9V6z'/><path d='M12 8.5v4.5M12 16.2v.1'/></svg>"); }

/* 처방 요약 패널 배경 — 대각선 그라데이션 (2026-09-17 요청). 좌상단 밝은 초록 → 우하단 짙은 초록 */
.rx-spec { background: linear-gradient(135deg, #24574a 0%, #173a31 48%, #0c211c 100%); }

/* 처방 요약 패널 라벨 — 배지(알약) 형식 (2026-09-17 요청) */
.rx-spec-label {
  display: block; width: max-content; max-width: 100%;
  margin: 0 0 20px; padding: 7px 16px; border-radius: 999px;
  background: rgba(143, 211, 180, .16); border: 1px solid rgba(143, 211, 180, .38);
  font-size: 14px; font-weight: 500; letter-spacing: .02em; line-height: 1.3; color: #bfe8d5;
}

/* 배지를 박스 윗선에 반쯤 걸치게 (2026-09-17 요청) — 흰 배경 위로 나오므로 불투명 색으로 */
.rx-spec { position: relative; padding-top: 42px; }
.rx-spec-label {
  position: absolute; top: 0; left: 34px; transform: translateY(-50%);
  margin: 0; background: #dff2e9; border-color: #dff2e9; color: var(--tg-med-deep);
  box-shadow: 0 4px 12px rgba(12, 33, 28, .18);
}
@media (max-width: 560px) { .rx-spec-label { left: 22px; } }
/* 배지 테두리 (2026-09-17 요청) */
.rx-spec-label { border: 1.5px solid var(--tg-med); }
/* 첫 항목 윗선 제거 — 배지가 위로 빠져서 선만 남아 보였다 (2026-09-17 요청) */
.rx-spec-list li:first-child, .rx-spec-dl dt:first-of-type, .rx-spec-dl dt:first-of-type + dd { border-top: 0; }
/* 배지 글자 키움 14 → 16px (2026-09-17 요청) */
.rx-spec-label { padding: 8px 18px; font-size: 16px; }
@media (max-width: 560px) { .rx-spec-label { font-size: 15px; padding: 7px 16px; } }
/* 확인 항목 — 제목과 설명을 한 줄로 (2026-09-17 요청). 폭이 모자라면 설명만 다음 줄로 넘어간다 */
.rx-spec-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px;
  min-height: 78px; align-content: center; padding: 16px 0 16px 62px;
}
.rx-spec-list li::before { position: absolute; left: 0; top: 50%; margin-top: -23px; }
.rx-spec-list span { margin-top: 0; }
/* 처방 요약 패널 폭 조금 넓힘 (2026-09-17 요청) — 1.15 : .85 → 1.05 : .95 */
@media (min-width: 900px) { .rx-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; } }
/* 항목 제목과 설명 사이 간격 넓힘 12 → 22px (2026-09-17 요청). 한눈에 보기 표도 제목 칸을 넓힌다 */
.rx-spec-list li { column-gap: 22px; }
.rx-spec-dl { grid-template-columns: 116px minmax(0, 1fr); }
@media (max-width: 560px) { .rx-spec-list li { column-gap: 14px; } .rx-spec-dl { grid-template-columns: 90px minmax(0, 1fr); } }
/* 처방 요약 카드 글자 전체 키움 (2026-09-17 요청) */
.rx-spec-list b { font-size: 20px; }
.rx-spec-list span { font-size: 16px; }
.rx-spec-dl dt { font-size: 16px; }
.rx-spec-dl dd { font-size: 18px; }
@media (max-width: 560px) {
  .rx-spec-list b { font-size: 18px; }
  .rx-spec-list span { font-size: 15px; }
  .rx-spec-dl dt { font-size: 15px; }
  .rx-spec-dl dd { font-size: 16.5px; }
}
/* 아이콘 원과 제목 사이 넓힘 16 → 26px (2026-09-17 요청) */
.rx-spec-list li { padding-left: 72px; }
@media (max-width: 560px) { .rx-spec-list li { padding-left: 64px; } }
/* 페이지 내 이동 칩 글자 두께 500 (2026-09-17 요청) */
.hx-chips a { font-weight: 500; }

/* 히어로 — 다크그린 바탕 + 사진 오퍼시티 아주 낮게 (2026-09-18 고객 요청)
   그라데이션으로 덮는 대신 슬라이드 바탕을 다크그린으로 깔고 이미지 자체를 흐리게 한다. */
.hero-slide { background-color: #11302a; }
.hero-slide img { opacity: .14; }
.hero-slide::after,
.hero-slide:nth-child(3).on::after,
.hero-slide:nth-child(1).on::after {
  background: linear-gradient(to bottom, rgba(17,48,42,.10) 0%, rgba(14,38,32,.34) 62%, rgba(9,25,21,.62) 100%);
}

/* 진료 카드 딤 복원 — 고객 배경 사진이 들어와서 초기 시안의 딤 강도로 되돌린다 (2026-09-18 요청)
   전면 딤 + 아래로 짙어지는 그라데이션. 사진 네 장의 톤이 한 세트로 보이게 한다. */
.cat::after {
  background-image: linear-gradient(to bottom, rgba(8,20,16,.34) 0%, rgba(8,20,16,.60) 55%, rgba(8,20,16,.90) 100%);
  background-color: rgba(8,20,16,.30);
}
.cat:hover::after {
  background-image: linear-gradient(to bottom, rgba(8,20,16,.44) 0%, rgba(8,20,16,.68) 55%, rgba(8,20,16,.93) 100%);
  background-color: rgba(8,20,16,.30);
}
.cat img { filter: saturate(.92) contrast(1.02); }
.cat-no  { color: rgba(255,255,255,.78); }
.cat-sub { color: rgba(255,255,255,.88); }
/* 히어로 타이틀 두께 700 → 500 (2026-09-18 요청) */
.hero-h1 { font-weight: 500; }
/* 잘못 이해해 바꾼 히어로 두께 원복(700), '어떤 진료가 필요하신가요?' 섹션 타이틀만 500 (2026-09-18 요청) */
.hero-h1 { font-weight: 700; }
.cats .tg-h2 { font-weight: 500; }
/* 섹션 타이틀 전체 두께 600 (2026-09-18 요청) */
.tg-h2, .cats .tg-h2 { font-weight: 600; }
/* 진료 카드 이름 두께 600 → 400 (2026-09-18 요청) */
.cat-name { font-weight: 400; }

/* 진료 카드 — 센터별로 딤 색을 달리한다 (2026-09-18 요청)
   네 장 모두 어둡게 깔아 흰 글씨 가독성은 유지하고, 색상만 센터 성격에 맞춰 나눈다. */
.cat[data-key="pain"]::after {       /* 통증 — 딥 틸 */
  background-image: linear-gradient(to bottom, rgba(6,32,38,.34) 0%, rgba(6,32,38,.62) 55%, rgba(4,24,29,.92) 100%);
  background-color: rgba(6,32,38,.30);
}
.cat[data-key="autonomic"]::after {  /* 자율신경 — 딥 네이비 */
  background-image: linear-gradient(to bottom, rgba(12,26,46,.34) 0%, rgba(12,26,46,.62) 55%, rgba(8,18,34,.92) 100%);
  background-color: rgba(12,26,46,.30);
}
.cat[data-key="skin"]::after {       /* 피부·뷰티 — 딥 플럼(뷰티 트랙 색 계열) */
  background-image: linear-gradient(to bottom, rgba(48,18,32,.34) 0%, rgba(48,18,32,.62) 55%, rgba(34,12,24,.92) 100%);
  background-color: rgba(48,18,32,.30);
}
.cat[data-key="herbs"]::after {      /* 특수한약 — 브랜드 딥그린 */
  background-image: linear-gradient(to bottom, rgba(8,32,22,.34) 0%, rgba(8,32,22,.62) 55%, rgba(6,24,17,.92) 100%);
  background-color: rgba(8,32,22,.30);
}
.cat[data-key="pain"]:hover::after      { background-image: linear-gradient(to bottom, rgba(6,32,38,.44) 0%, rgba(6,32,38,.70) 55%, rgba(4,24,29,.95) 100%); }
.cat[data-key="autonomic"]:hover::after { background-image: linear-gradient(to bottom, rgba(12,26,46,.44) 0%, rgba(12,26,46,.70) 55%, rgba(8,18,34,.95) 100%); }
.cat[data-key="skin"]:hover::after      { background-image: linear-gradient(to bottom, rgba(48,18,32,.44) 0%, rgba(48,18,32,.70) 55%, rgba(34,12,24,.95) 100%); }
.cat[data-key="herbs"]:hover::after     { background-image: linear-gradient(to bottom, rgba(8,32,22,.44) 0%, rgba(8,32,22,.70) 55%, rgba(6,24,17,.95) 100%); }
/* '어떤 진료가 필요하신가요?' 섹션 부제 글자 키움 (2026-09-18 요청) */
.cats .tg-sub { font-size: 19px; line-height: 1.75; }
@media (max-width: 560px) { .cats .tg-sub { font-size: 16.5px; } }
/* 위 규칙이 .tg-sec-head.ctr .tg-sub(16px)에 밀려 적용되지 않았다 — 선택자 특이도를 올린다 (2026-09-18) */
.cats .tg-sec-head.ctr .tg-sub { font-size: 19px; line-height: 1.75; }
@media (max-width: 560px) { .cats .tg-sec-head.ctr .tg-sub { font-size: 16.5px; } }
/* 섹션 부제 전체를 같은 크기로 (2026-09-18 요청) — .cats 만 키웠던 것을 모든 섹션으로 확대 */
.tg-sec-head.ctr .tg-sub, .tg-sec-head .tg-sub { font-size: 19px; line-height: 1.75; }
@media (max-width: 560px) { .tg-sec-head.ctr .tg-sub, .tg-sec-head .tg-sub { font-size: 16.5px; } }

/* 처방 안내 문구 — 글자 키우고 초록 배지처럼 눈에 띄게 (2026-09-18 요청) */
.find-note {
  display: inline-block; margin-top: 36px; padding: 14px 24px; border-radius: 999px;
  background: var(--tg-med-soft); border: 1px solid rgba(19, 122, 82, .28);
  font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--tg-med-deep);
}
@media (max-width: 560px) {
  .find-note { display: block; padding: 14px 18px; border-radius: 14px; font-size: 15.5px; text-align: left; }
}
/* 배지가 왼쪽으로 붙고 두 줄로 나뉘던 것 보정 — 가운데 정렬, 폭은 글자에 맞춘다 (2026-09-18) */
.find-note { display: block; width: max-content; max-width: 100%; margin: 36px auto 0; text-align: center; }
@media (max-width: 1100px) { .find-note { width: auto; } }
/* 넓은 화면에서는 한 줄 알약으로, 좁아지면 두 줄 라운드 박스로 (2026-09-18) */
@media (min-width: 1200px) { .find-note { white-space: nowrap; } }
@media (max-width: 1199px) { .find-note { border-radius: 14px; } }

/* ═══════════════════════════════════════════════
   서브 히어로 — 센터별 배경 배너 (2026-09-18 요청)
   피부·뷰티에만 있던 배너를 모든 센터로 확대한다. 인물·소재는 오른쪽,
   왼쪽은 흰 그라데이션으로 덮어 제목·브레드크럼이 읽히게 한다.
   ═══════════════════════════════════════════════ */
.pg-hero.has-bg {
  position: relative; border-bottom: 0;
  min-height: 400px; padding-block: 76px 0;
  display: flex; flex-direction: column; justify-content: center;
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.pg-hero.has-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgba(255,255,255,.90) 0%, rgba(255,255,255,.78) 40%,
    rgba(255,255,255,.30) 62%, rgba(255,255,255,0) 80%);
}
.pg-hero.has-bg > .tg-wrap { position: relative; z-index: 1; width: 100%; }
.pg-hero.has-bg .pg-title { color: var(--tg-ink); }
.pg-hero.has-bg .pg-lede  { color: var(--tg-ink-2); }
.pg-hero.has-bg .pg-crumb a, .pg-hero.has-bg .pg-crumb .now { color: var(--tg-ink-2); }
.pg-hero--pain      { background-color: #dcebe4; background-image: url("/assets/images/subhero-pain.jpg?v=1"); }
.pg-hero--autonomic { background-color: #c9d6e6; background-image: url("/assets/images/subhero-autonomic.jpg?v=1"); }
.pg-hero--herbs     { background-color: #f3ebe1; background-image: url("/assets/images/subhero-herbs.jpg?v=1"); }
/* 피부·뷰티 — 새 분홍 배너로 교체. 기존 body.track-beauty 규칙보다 특이도를 높여 덮는다 */
body.track-beauty .pg-hero.has-bg,
.pg-hero--skin {
  background-color: #f6dfe4;
  background-image: url("/assets/images/subhero-skin.jpg?v=2");
  background-position: right center;
}
@media (max-width: 900px) {
  .pg-hero.has-bg { min-height: 300px; padding-block: 52px 0; background-position: 78% center; }
  body.track-beauty .pg-hero.has-bg { background-position: 78% center; }
  .pg-hero.has-bg::before {
    background: linear-gradient(to right, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 50%, rgba(255,255,255,.55) 100%);
  }
}
/* 페이지 내 영문 아이브로 (2026-09-18 요청) */
.hx-eyebrow { font-size: 13px; font-weight: 400; letter-spacing: .2em; }
/* 본문 섹션 타이틀 두께 200 → 500 (2026-09-18 요청). 크기·자간·행간은 그대로 */
.pg-h2 { font-weight: 500; letter-spacing: -.03em; }
/* 페이지 리드 타이틀 두께 200 → 400 (2026-09-18 요청). 크기·자간은 그대로 */
.hx-lead .pg-h2 { font-weight: 400; letter-spacing: -.032em; }
/* 본문 섹션 타이틀 두께 500 → 400 (2026-09-18 요청) */
.pg-h2 { font-weight: 400; letter-spacing: -.03em; }
/* 요인·단계 카드 설명 글자 15.5 → 17px (2026-09-18 요청) */
.hc-factor-txt { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) { .hc-factor-txt { font-size: 16px; } }
/* 체크리스트 항목 (2026-09-18 요청) — 글자 17.5px, 검정 */
.chk li {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--tg-hair);
  font-size: 17.5px; font-weight: 300; line-height: 1.6; color: #000000; word-break: keep-all;
}

/* ═══════════════════════════════════════════════
   처방 상세 페이지 템플릿 (.fx-*) — 고객 시안 반영 (2026-09-18)
   산골캡슐부터 적용. 타이틀 → 메인 소개 → 고민 칩 → 회복 단계 → 비교표 → 상담 대상
   → 효과 → 특별한 이유 → 함께 복용 → FAQ 순. 색은 브랜드 그린 계열.
   ═══════════════════════════════════════════════ */
.fx-page { --fx-soft: #f1f7f4; --fx-line: rgba(19, 122, 82, .16); }
.br-pc { display: inline; }
@media (max-width: 760px) { .br-pc { display: none; } }

/* 전폭 배경 — 가로 스크롤 없이 화면 끝까지 칠한다 */
.fx-bleed { position: relative; }
.fx-soft { background: var(--fx-soft); box-shadow: 0 0 0 100vmax var(--fx-soft); clip-path: inset(0 -100vmax); }
.fx-intro.fx-bleed { background: var(--fx-soft); box-shadow: 0 0 0 100vmax var(--fx-soft); clip-path: inset(0 -100vmax); }

.fx-sec { padding-block: 96px; }
.fx-h { margin: 0 0 18px; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.32; letter-spacing: -.03em; color: var(--tg-ink); word-break: keep-all; }
.fx-h.ctr, .fx-sub.ctr { text-align: center; }
.fx-sub { margin: 0 0 40px; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fx-lead { max-width: 64ch; margin: 0 0 36px; font-size: 18px; font-weight: 300; line-height: 1.85; color: var(--tg-ink-2); word-break: keep-all; }
.fx-foot { margin: 34px 0 0; text-align: center; font-size: 17px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.fx-small { margin: 20px 0 0; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--tg-mute); word-break: keep-all; }

/* 01 타이틀 */
.fx-title { padding: 72px 0 64px; text-align: center; }
.fx-pill { display: inline-block; margin: 0 0 20px; padding: 9px 20px; border-radius: 999px; background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 15.5px; font-weight: 500; }
.fx-name { margin: 0 0 14px; font-size: clamp(44px, 5.4vw, 68px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; color: var(--tg-med); }
.fx-name-sub { margin: 0; font-size: 19px; font-weight: 300; color: var(--tg-ink-2); }

/* 02 메인 소개 */
.fx-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 72px; align-items: center; }
@media (min-width: 960px) { .fx-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.fx-tag { display: inline-block; margin-bottom: 20px; padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--fx-line); color: var(--tg-med-deep); font-size: 14.5px; font-weight: 500; }
.fx-intro-txt p { margin: 0 0 16px; font-size: 17.5px; font-weight: 300; line-height: 1.85; color: var(--tg-ink-2); word-break: keep-all; }
.fx-note-chip { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 10px !important; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--fx-line); font-size: 15px !important; color: var(--tg-ink) !important; }
.fx-note-chip svg { flex-shrink: 0; color: var(--tg-med); }
.fx-intro-pic { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 4; }
.fx-intro-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-band {
  grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 30px 24px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 64px;
  border-radius: 18px; color: #fff;
  background: linear-gradient(110deg, var(--tg-deep) 0%, #1c5a47 55%, #2f8a68 100%);
}
.fx-band li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fx-band b { font-size: 16.5px; font-weight: 500; }

/* 03 고민 칩 — 두 줄이 서로 반대로 천천히 흐른다 */
.fx-marquee { margin: 44px 0 0; display: grid; gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
.fx-marquee-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; animation: fxFlow 48s linear infinite; }
.fx-marquee-row.is-rev { animation-direction: reverse; }
.fx-marquee:hover .fx-marquee-row { animation-play-state: paused; }
@keyframes fxFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fx-marquee-row li { display: flex; align-items: center; gap: 10px; padding: 14px 24px 14px 14px; border-radius: 999px; background: var(--fx-soft); border: 1px solid var(--fx-line); font-size: 16.5px; color: var(--tg-ink); white-space: nowrap; }
.fx-marquee-row li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tg-med); color: #fff; font-size: 12.5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .fx-marquee-row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .fx-marquee-row li[aria-hidden="true"] { display: none; }
}

/* 04 회복 단계 */
.fx-step-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .fx-step-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-step-cards li { padding: 28px 28px 30px; border-radius: 16px; background: #fff; border: 1px solid var(--fx-line); }
.fx-step-cards span { display: block; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; letter-spacing: .08em; color: var(--tg-med); }
.fx-step-cards b { display: block; margin-bottom: 8px; font-size: 20px; font-weight: 600; color: var(--tg-ink); }
.fx-step-cards p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fx-herb-box { margin: 20px 0 0; padding: 26px 30px; border-radius: 16px; background: #fff; border-left: 4px solid var(--tg-med); }
.fx-herb-box b { display: block; margin-bottom: 8px; font-size: 19px; font-weight: 600; color: var(--tg-med-deep); }
.fx-herb-box p { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.fx-ref { margin: 16px 0 0; }
.fx-ref summary { cursor: pointer; display: inline-block; padding: 8px 0; font-size: 15px; color: var(--tg-med-deep); text-decoration: underline; text-underline-offset: 4px; }
.fx-ref-body { margin-top: 8px; padding: 20px 24px; border-radius: 12px; background: #fff; }
.fx-ref-body p { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); }
.fx-ref-body b { font-weight: 600; color: var(--tg-ink); margin-right: 6px; }
.fx-ref-cite { margin-top: 8px !important; font-size: 13.5px !important; color: var(--tg-mute) !important; }

/* 05 비교표 */
.fx-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--fx-line); }
.fx-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16.5px; }
.fx-table th, .fx-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--fx-line); word-break: keep-all; }
.fx-table tr:last-child th, .fx-table tr:last-child td { border-bottom: 0; }
.fx-table thead th { background: var(--tg-med-soft); font-weight: 600; color: var(--tg-ink); }
.fx-table tbody th { width: 18%; background: var(--fx-soft); font-weight: 500; color: var(--tg-ink-2); }
.fx-table td { font-weight: 300; color: var(--tg-ink-2); }
.fx-table td:last-child { font-weight: 600; color: var(--tg-med-deep); }

/* 06 상담 대상 */
.fx-for { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 960px) { .fx-for { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.fx-product { margin: 0; padding: 36px; border-radius: 20px; background: #fff; box-shadow: 0 14px 36px rgba(19, 45, 39, .08); }
.fx-product img { width: 100%; height: auto; display: block; }
.fx-check { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.fx-check li { display: flex; gap: 12px; align-items: flex-start; padding: 15px 20px; border-radius: 12px; background: #fff; border: 1px solid var(--fx-line); font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.fx-check li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; background: var(--tg-med);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat; }

/* 07 효과 카드 */
.fx-effect-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .fx-effect-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-effect-cards li { padding: 30px 28px 32px; border-radius: 16px; background: #fff; border: 1px solid var(--fx-line); box-shadow: 0 6px 20px rgba(19, 45, 39, .05); }
.fx-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; background: var(--tg-med-soft); color: var(--tg-med); }
.fx-effect-cards em { display: block; margin-bottom: 6px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--tg-med); }
.fx-effect-cards b { display: block; margin-bottom: 10px; font-size: 21px; font-weight: 600; color: var(--tg-ink); }
.fx-effect-cards p { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.fx-disc { margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--tg-hair); text-align: center; font-size: 14.5px; color: var(--tg-mute); }

/* 08 특별한 이유 — 가운데 세로선과 점, 카드는 좌우 지그재그 */
.fx-reason-list { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.fx-reason-list > li { padding: 22px 22px 34px; border-radius: 24px; text-align: center;
  background: linear-gradient(to bottom, #ffffff 0%, #e3f1ea 100%); border: 1px solid var(--fx-line); box-shadow: 0 12px 30px rgba(19, 45, 39, .06); }
.fx-reason-list figure { margin: 0 0 26px; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.fx-reason-list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--tg-deep); color: #fff; font-size: 15px; font-weight: 600; }
.fx-reason-list b { display: block; margin-bottom: 10px; font-size: 23px; font-weight: 600; color: var(--tg-ink); }
.fx-reason-list p { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
@media (min-width: 900px) {
  .fx-reason-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 120px; row-gap: 0; }
  .fx-reason-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
    background: linear-gradient(to bottom, transparent, var(--tg-med) 8%, var(--tg-med) 92%, transparent); opacity: .5; }
  .fx-reason-list > li { position: relative; margin-bottom: 48px; }
  .fx-reason-list > li:nth-child(even) { margin-top: 90px; }
  .fx-reason-list > li::after { content: ""; position: absolute; top: 120px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--tg-med); box-shadow: 0 0 0 7px rgba(19, 122, 82, .15); }
  .fx-reason-list > li:nth-child(odd)::after { right: -68px; }
  .fx-reason-list > li:nth-child(even)::after { left: -68px; }
}

/* 09 함께 복용 */
.fx-with-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 760px) { .fx-with-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-with-card { display: block; text-decoration: none; color: inherit; }
.fx-with-pic { display: block; margin-bottom: 20px; border-radius: 18px; background: #f4f5f4; overflow: hidden; aspect-ratio: 16 / 11; }
.fx-with-pic img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s; }
.fx-with-card:hover .fx-with-pic img { transform: scale(1.04); }
.fx-with-card b { display: block; margin-bottom: 8px; font-size: 21px; font-weight: 600; color: var(--tg-ink); }
.fx-with-card:hover b { color: var(--tg-med); }
.fx-with-card p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }

/* 10 FAQ */
.fx-faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--tg-hair); }
.fx-faq-list details { border-bottom: 1px solid var(--tg-hair); }
.fx-faq-list summary { list-style: none; cursor: pointer; position: relative; padding: 22px 44px 22px 4px; font-size: 18px; font-weight: 500; color: var(--tg-ink); word-break: keep-all; }
.fx-faq-list summary::-webkit-details-marker { display: none; }
.fx-faq-list summary em { font-style: normal; margin-right: 10px; color: var(--tg-med); font-weight: 600; }
.fx-faq-list summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 1.8px solid var(--tg-mute); border-bottom: 1.8px solid var(--tg-mute); transform: rotate(45deg); transition: transform .2s; }
.fx-faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fx-faq-list details p { margin: 0; padding: 0 44px 24px 4px; font-size: 16.5px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }

/* 모바일 */
@media (max-width: 560px) {
  .fx-sec { padding-block: 64px; }
  .fx-title { padding: 48px 0 40px; }
  .fx-name-sub, .fx-sub, .fx-lead { font-size: 16.5px; }
  .fx-intro { padding-block: 48px; }
  .fx-intro-txt p { font-size: 16.5px; }
  .fx-note-chip { border-radius: 14px; }
  .fx-band { gap: 18px 28px; padding: 24px 16px; }
  .fx-band b { font-size: 15px; }
  .fx-marquee-row li { font-size: 15px; padding: 11px 18px 11px 11px; }
  .fx-check li { font-size: 16px; }
  .fx-faq-list summary { font-size: 16.5px; }
  .fx-faq-list details p { font-size: 15.5px; padding-right: 8px; }
}

/* SINCE 2012 — 히어로와 같이 다크그린 바탕에 사진 오퍼시티를 아주 낮게 (2026-09-18 고객 요청 01)
   사진은 ::before 레이어로 옮겨 투명도를 따로 준다. */
.hist { position: relative; isolation: isolate; background-color: #11302a; background-image: none; }
.hist::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/images/hist-bg.jpg?v=2") center / cover no-repeat;
  opacity: .12;
}
.hist::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(17,48,42,0) 0%, rgba(12,34,29,.35) 70%, rgba(9,25,21,.6) 100%);
}
.hist::before { height: auto; top: 0; bottom: 0; }

/* 산골캡슐 — 타이틀과 메인 소개를 한 블록으로 통합 (2026-09-18 요청)
   가운데 정렬 타이틀 블록이 서브히어로 제목과 겹쳐 보여 없애고, 소개 왼쪽 상단에 이름을 올린다.
   오른쪽은 골절 이미지 위에 제품 병을 겹쳐 둔다. */
.fx-intro { padding-block: 88px 72px; }
@media (min-width: 960px) { .fx-intro { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 72px; } }
.fx-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px !important;
  font-size: 15.5px !important; font-weight: 500 !important; color: var(--tg-med-deep) !important; }
.fx-kicker span { padding: 6px 14px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.fx-intro .fx-name { margin: 0 0 12px; text-align: left; font-size: clamp(46px, 5vw, 66px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; color: var(--tg-deep); }
.fx-intro .fx-name small { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; letter-spacing: .24em; color: var(--tg-med); }
.fx-intro .fx-name-sub { margin: 0 0 30px !important; padding-bottom: 30px; border-bottom: 1px solid var(--fx-line);
  font-size: 19px !important; font-weight: 400 !important; color: var(--tg-ink) !important; }
.fx-h-sub { margin-bottom: 16px; font-size: clamp(22px, 2.1vw, 28px); font-weight: 600; line-height: 1.4; color: var(--tg-ink); }

.fx-intro-visual { position: relative; padding: 0 0 56px 0; }
.fx-intro-visual .fx-intro-pic { margin-left: 64px; border-radius: 22px; aspect-ratio: 5 / 4.4; box-shadow: 0 20px 44px rgba(19, 45, 39, .14); }
.fx-intro-prod {
  position: absolute; left: 0; bottom: 0; width: 44%; margin: 0; padding: 18px;
  border-radius: 20px; background: #fff; box-shadow: 0 18px 40px rgba(19, 45, 39, .16);
}
.fx-intro-prod img { width: 100%; height: auto; display: block; }
@media (max-width: 560px) {
  .fx-intro { padding-block: 52px 48px; }
  .fx-intro .fx-name-sub { font-size: 17px !important; padding-bottom: 22px; margin-bottom: 22px !important; }
  .fx-intro-visual { padding-bottom: 40px; }
  .fx-intro-visual .fx-intro-pic { margin-left: 36px; }
  .fx-intro-prod { width: 46%; padding: 12px; border-radius: 16px; }
}
/* 처방 상세 — 브레드크럼 바와 첫 블록 사이 흰 여백 제거 (2026-09-18 요청). 소개 배경이 바로 이어진다 */
.pg-body:has(.fx-page) { padding-top: 0; }

/* 메인 소개 하단 띠 → 흰 카드 3칸으로 교체 (2026-09-18 요청)
   진한 그라데이션 띠 대신, 아이콘 원 + 케이스 번호 + 제목 + 한 줄 설명을 가로 3칸으로. 칸 사이는 얇은 세로선. */
.fx-band {
  grid-column: 1 / -1; list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border-radius: 20px; background: #fff; color: var(--tg-ink);
  border: 1px solid var(--fx-line); box-shadow: 0 14px 34px rgba(19, 45, 39, .07);
}
@media (min-width: 900px) { .fx-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-band > li { display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 28px 32px; }
.fx-band > li + li { border-top: 1px solid var(--fx-line); }
@media (min-width: 900px) { .fx-band > li + li { border-top: 0; border-left: 1px solid var(--fx-line); } }
.fx-band-ico { flex-shrink: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--tg-med-soft); color: var(--tg-med); transition: background-color .2s, color .2s; }
.fx-band > li:hover .fx-band-ico { background: var(--tg-med); color: #fff; }
.fx-band-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-band-txt em { font-style: normal; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: var(--tg-med); }
.fx-band-txt b { font-size: 19px; font-weight: 600; color: var(--tg-ink); letter-spacing: -.02em; }
.fx-band-txt > span { font-size: 15.5px; font-weight: 300; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) {
  .fx-band > li { padding: 20px 20px; gap: 14px; }
  .fx-band-ico { width: 52px; height: 52px; }
  .fx-band-txt b { font-size: 17.5px; }
  .fx-band-txt > span { font-size: 14.5px; }
}

/* 처방 아이콘 — 고객 지정 PNG 를 마스크로 칠한다 (2026-09-18). 원 색은 그대로, 호버 시 흰색 */
.fx-band-img { display: block; width: 34px; height: 34px; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fx-ico { width: 60px; height: 60px; }
.fx-ico .fx-band-img { width: 34px; height: 34px; }
.fx-effect-cards li:hover .fx-ico { background: var(--tg-med); color: #fff; }
.fx-ico { transition: background-color .2s, color .2s; }
@media (max-width: 560px) { .fx-band-img { width: 30px; height: 30px; } }
/* 처방 아이콘 한 단계 키움 34 → 40px (2026-09-18 요청). 원 크기는 그대로 */
.fx-band-img, .fx-ico .fx-band-img { width: 40px; height: 40px; }
@media (max-width: 560px) { .fx-band-img, .fx-ico .fx-band-img { width: 34px; height: 34px; } }

/* 회복 중의 고민 — 왼쪽 타이틀(+하단 안내), 오른쪽 흐르는 칩 (2026-09-18 요청) */
@media (min-width: 960px) {
  .fx-worry {
    display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    grid-template-areas: "title flow" "foot flow"; column-gap: 56px; align-items: center;
  }
  .fx-worry > .fx-h { grid-area: title; align-self: end; margin: 0; text-align: left; }
  .fx-worry > .fx-foot { grid-area: foot; align-self: start; margin: 20px 0 0; text-align: left; font-size: 16.5px; }
  .fx-worry > .fx-marquee { grid-area: flow; margin: 0; }
  .fx-worry .fx-foot br { display: none; }
}
/* 고민 칩 3줄 — 줄마다 속도를 조금씩 달리해 기계적으로 보이지 않게 (2026-09-18 요청) */
.fx-marquee { gap: 12px; }
.fx-marquee-row:nth-child(1) { animation-duration: 42s; }
.fx-marquee-row:nth-child(2) { animation-duration: 50s; }
.fx-marquee-row:nth-child(3) { animation-duration: 46s; }
/* 안내 문구는 문장 경계에서 두 줄로 (2026-09-18 요청) — 위에서 숨겼던 <br> 복원 */
@media (min-width: 960px) { .fx-worry .fx-foot br { display: inline; } }
/* 고민 칩 — 세 줄 모두 왼쪽에서 오른쪽으로 흐르게 (2026-09-18 요청) */
.fx-worry .fx-marquee-row { animation-direction: reverse; }
/* 고민 칩 — 줄마다 번갈아: 1·3줄 왼쪽→오른쪽, 2줄 오른쪽→왼쪽 (2026-09-18 요청) */
.fx-worry .fx-marquee-row:nth-child(odd)  { animation-direction: reverse; }
.fx-worry .fx-marquee-row:nth-child(even) { animation-direction: normal; }

/* 회복 단계 섹션 — 왼쪽 타이틀+설명, 오른쪽 단계 카드·산골가루 박스 (2026-09-18 요청) */
@media (min-width: 960px) {
  .fx-steps {
    display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    grid-template-areas: "title cards" "lead cards" "lead box" "lead ref";
    grid-template-rows: auto 1fr auto auto; column-gap: 56px; align-items: start;
  }
  .fx-steps > .fx-h   { grid-area: title; margin: 0 0 20px; }
  .fx-steps > .fx-lead { grid-area: lead; margin: 0; max-width: none; font-size: 17px; }
  .fx-steps > .fx-step-cards { grid-area: cards; }
  .fx-steps > .fx-herb-box { grid-area: box; }
  .fx-steps > .fx-ref { grid-area: ref; }
  .fx-steps .fx-step-cards li { padding: 26px 24px 28px; }
}

/* 회복 단계 섹션 새 디자인 (2026-09-18 요청) — 배경색 없이
   · 단계: 카드 대신 윗줄 진행선 + 점, 큰 번호, 제목·설명 (가로 3단)
   · 산골가루 박스: 왼쪽 이름 블록 + 오른쪽 설명의 가로형 노트 카드
   · 섹션 위에 얇은 구분선으로 앞 섹션과 나눈다 */
.fx-steps { border-top: 1px solid var(--tg-hair); }
.fx-steps .fx-step-cards { position: relative; gap: 0; counter-reset: fxs; }
.fx-steps .fx-step-cards li {
  position: relative; padding: 42px 28px 6px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
/* 진행선 — 각 단계 위에 선을 긋고 점을 얹는다. 첫 칸은 점에서 시작 */
.fx-steps .fx-step-cards li::before {
  content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--tg-med) 0%, rgba(19,122,82,.25) 100%);
}
.fx-steps .fx-step-cards li:first-child::before { left: 9px; }
.fx-steps .fx-step-cards li:last-child::before { right: 28px; background: linear-gradient(to right, rgba(19,122,82,.25), rgba(19,122,82,0)); }
.fx-steps .fx-step-cards li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tg-med); box-shadow: 0 0 0 5px rgba(19,122,82,.12);
}
.fx-steps .fx-step-cards li:first-child::after { background: var(--tg-med); }
.fx-steps .fx-step-cards span { margin-bottom: 10px; font-size: 13px; letter-spacing: .14em; }
.fx-steps .fx-step-cards b { font-size: 21px; margin-bottom: 10px; }
.fx-steps .fx-step-cards p { font-size: 16px; }

.fx-steps .fx-herb-box {
  margin-top: 40px; padding: 0; border: 1px solid var(--fx-line); border-left: 0; border-radius: 18px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); background: #fff;
}
@media (min-width: 760px) { .fx-steps .fx-herb-box { grid-template-columns: 220px minmax(0, 1fr); } }
.fx-herb-name { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 26px 28px;
  background: linear-gradient(150deg, var(--tg-deep) 0%, #1f5f4a 100%); color: #fff; }
.fx-herb-name em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .18em; color: #8fd3b4; }
.fx-steps .fx-herb-box .fx-herb-name b { margin: 0; font-size: 21px; font-weight: 600; color: #fff; }
.fx-herb-name span { font-size: 13.5px; color: rgba(255,255,255,.72); }
.fx-steps .fx-herb-box > p { margin: 0; padding: 26px 30px; align-self: center; font-size: 16.5px; }
.fx-steps .fx-ref summary { margin-top: 4px; }

@media (max-width: 759px) {
  .fx-steps .fx-step-cards li { padding: 0 0 26px 40px; }
  .fx-steps .fx-step-cards li::before { top: 20px; bottom: 0; left: 9px; right: auto; width: 2px; height: auto;
    background: linear-gradient(to bottom, var(--tg-med), rgba(19,122,82,.25)); }
  .fx-steps .fx-step-cards li:first-child::before { left: 9px; }
  .fx-steps .fx-step-cards li:last-child::before { display: none; }
}

/* 흐름도 점 확대 20 → 28px + 펄스 (2026-09-18 요청)
   점에서 번지는 링이 단계 순서대로 차례로 퍼진다. */
.fx-steps .fx-step-cards li { padding-top: 52px; }
.fx-steps .fx-step-cards li::after {
  width: 28px; height: 28px; border-width: 2.5px;
  box-shadow: 0 0 0 0 rgba(19,122,82,.35);
  animation: fxPulse 2.4s ease-out infinite;
}
.fx-steps .fx-step-cards li:nth-child(2)::after { animation-delay: .8s; }
.fx-steps .fx-step-cards li:nth-child(3)::after { animation-delay: 1.6s; }
.fx-steps .fx-step-cards li::before { top: 13px; }
.fx-steps .fx-step-cards li:first-child::before { left: 14px; }
@keyframes fxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(19,122,82,.38); }
  70%  { box-shadow: 0 0 0 16px rgba(19,122,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(19,122,82,0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-steps .fx-step-cards li::after { animation: none; box-shadow: 0 0 0 6px rgba(19,122,82,.12); }
}
@media (max-width: 759px) {
  .fx-steps .fx-step-cards li { padding: 0 0 26px 46px; }
  .fx-steps .fx-step-cards li::before, .fx-steps .fx-step-cards li:first-child::before { top: 28px; left: 13px; }
}

/* 관련 자료 보기 — 링크 진하고 크게, 펼친 내용 글자도 키움 (2026-09-18 요청) */
.fx-ref summary { font-size: 17px; font-weight: 600; color: var(--tg-deep); text-decoration-thickness: 1.5px; }
.fx-ref summary:hover { color: var(--tg-med); }
.fx-ref-body p { font-size: 17.5px; line-height: 1.85; color: var(--tg-ink); }
.fx-ref-body .fx-ref-cite { font-size: 15px !important; }
@media (max-width: 560px) {
  .fx-ref summary { font-size: 16px; }
  .fx-ref-body p { font-size: 16px; }
  .fx-ref-body .fx-ref-cite { font-size: 14px !important; }
}
/* 관련 자료 보기 링크 — 16px / 300 (2026-09-18 요청). 색은 진한 그린 유지 */
.fx-ref summary { font-size: 16px; font-weight: 300; }
/* 관련 자료 보기 밑줄 연하게 (2026-09-18 요청) — 1px, 반투명 그린 */
.fx-ref summary { text-decoration-thickness: 1px; text-decoration-color: rgba(19, 45, 39, .28); text-underline-offset: 5px; }
.fx-ref summary:hover { text-decoration-color: currentColor; }

/* 산골가루 카드 — 오른쪽 설명 아래에 '관련 자료 보기' 알약 버튼 (2026-09-18 요청) */
.fx-herb-body { padding: 26px 30px; align-self: center; }
.fx-steps .fx-herb-box .fx-herb-body > p { margin: 0; padding: 0; font-size: 16.5px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.fx-herb-body .fx-ref { margin: 16px 0 0; }
.fx-herb-body .fx-ref summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px 8px 18px;
  border-radius: 999px; border: 1px solid rgba(19, 122, 82, .35); background: var(--tg-med-soft);
  font-size: 15px; font-weight: 400; color: var(--tg-deep); text-decoration: none; transition: background-color .18s, color .18s, border-color .18s;
}
.fx-herb-body .fx-ref summary::-webkit-details-marker { display: none; }
.fx-herb-body .fx-ref summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .2s, margin .2s;
}
.fx-herb-body .fx-ref[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.fx-herb-body .fx-ref summary:hover,
.fx-herb-body .fx-ref[open] summary { background: var(--tg-med); border-color: var(--tg-med); color: #fff; }
.fx-herb-body .fx-ref-body { margin-top: 14px; padding: 18px 20px; border-radius: 12px; background: var(--fx-soft); }
@media (max-width: 560px) { .fx-herb-body { padding: 22px 20px; } .fx-herb-body .fx-ref summary { font-size: 14.5px; } }
/* 관련 자료 보기 버튼 축소 (2026-09-18 요청) */
.fx-herb-body .fx-ref summary { gap: 6px; padding: 5px 12px 5px 14px; font-size: 13.5px; }
.fx-herb-body .fx-ref summary::after { width: 5px; height: 5px; border-width: 1.4px; margin-top: -2px; }
.fx-herb-body .fx-ref[open] summary::after { margin-top: 2px; }
@media (max-width: 560px) { .fx-herb-body .fx-ref summary { font-size: 13px; } }
.fx-herb-body .fx-ref summary { line-height: 1.2; }
/* 관련 자료 펼친 내용 글자 축소 17.5 → 15.5px (2026-09-18 요청) */
.fx-herb-body .fx-ref-body p { font-size: 15.5px; line-height: 1.8; }
.fx-herb-body .fx-ref-body .fx-ref-cite { font-size: 13.5px !important; }
@media (max-width: 560px) { .fx-herb-body .fx-ref-body p { font-size: 15px; } .fx-herb-body .fx-ref-body .fx-ref-cite { font-size: 13px !important; } }

/* 비교 섹션 새 디자인 (2026-09-18 요청) — 왼쪽 타이틀, 오른쪽 두 장의 비교 카드
   산골가루(흰 카드) → 산골캡슐(진한 그린 카드). 항목 줄은 subgrid 로 좌우 높이를 맞춘다. */
.fx-compare { border-top: 1px solid var(--tg-hair); }
.fx-compare-hd .fx-sub { margin-bottom: 0; }
.fx-compare-note { margin: 22px 0 0; padding-left: 14px; border-left: 2px solid var(--tg-med);
  font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.fx-vs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
@media (min-width: 760px) {
  .fx-vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto repeat(4, auto); column-gap: 20px; row-gap: 0; margin-top: 0; }
  .fx-vs-col { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; }
  .fx-vs-col dl { display: grid; grid-row: 2 / span 4; grid-template-rows: subgrid; }
  .fx-vs-col dl > div { display: contents; }
}
.fx-vs-col { border-radius: 20px; padding: 30px 30px 14px; border: 1px solid var(--fx-line); background: #fff; }
.fx-vs-col.is-b { background: linear-gradient(160deg, var(--tg-deep) 0%, #1d5846 100%); border-color: transparent; color: #fff;
  box-shadow: 0 18px 40px rgba(19, 45, 39, .18); }
.fx-vs-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--fx-line); }
.fx-vs-col.is-b .fx-vs-head { border-bottom-color: rgba(255,255,255,.18); }
.fx-vs-head em { font-style: normal; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--tg-med-soft); color: var(--tg-med-deep); }
.fx-vs-col.is-b .fx-vs-head em { background: rgba(143, 211, 180, .2); color: #bfe8d5; }
.fx-vs-head b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--tg-ink); }
.fx-vs-col.is-b .fx-vs-head b { color: #fff; }
.fx-vs-col dl { margin: 0; }
.fx-vs-col dt { margin: 0; padding-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--tg-med); }
.fx-vs-col dd { margin: 0; padding: 4px 0 16px; border-bottom: 1px dashed var(--fx-line);
  font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.fx-vs-col dd:last-of-type { border-bottom: 0; }
.fx-vs-col.is-b dt { color: #8fd3b4; }
.fx-vs-col.is-b dd { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.fx-vs-arrow { display: none; }
@media (min-width: 760px) {
  .fx-vs-arrow { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; z-index: 2;
    width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; color: var(--tg-med);
    border: 1px solid var(--fx-line); box-shadow: 0 6px 16px rgba(19,45,39,.12); }
}
@media (min-width: 960px) {
  .fx-compare { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); column-gap: 56px; align-items: center; }
  .fx-compare-hd .fx-h { margin-bottom: 14px; }
}
@media (max-width: 560px) { .fx-vs-col { padding: 24px 22px 10px; } .fx-vs-head b { font-size: 22px; } .fx-vs-col dd { font-size: 16px; } }
/* 비교 카드 줄 맞춤 보정 — dt/dd 를 한 줄(div)로 묶어 subgrid 4행에 하나씩 배치 */
@media (min-width: 760px) { .fx-vs-col dl > div { display: block; } }
.fx-vs-col dl > div { border-bottom: 1px dashed var(--fx-line); }
.fx-vs-col dl > div:last-child { border-bottom: 0; }
.fx-vs-col.is-b dl > div { border-bottom-color: rgba(255,255,255,.16); }
.fx-vs-col dd, .fx-vs-col dd:last-of-type { border-bottom: 0; }

/* 상담 대상 섹션 새 디자인 (2026-09-18 요청) — 왼쪽 타이틀·안내·제품, 오른쪽 번호 카드 2×3 */
.fx-for { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
@media (min-width: 960px) { .fx-for { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); column-gap: 56px; align-items: center; } }
.fx-for-hd .fx-h { margin-bottom: 16px; }
.fx-for-hd .fx-small { margin: 0; font-size: 15.5px; color: var(--tg-ink-2); }
.fx-for-hd .fx-product { margin-top: 30px; max-width: 360px; padding: 22px; border-radius: 22px; }
.fx-for-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .fx-for-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-for-grid li {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 28px;
  border-radius: 18px; background: #fff; border: 1px solid var(--fx-line);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fx-for-grid li:hover { border-color: rgba(19,122,82,.4); box-shadow: 0 14px 30px rgba(19,45,39,.08); transform: translateY(-2px); }
.fx-for-grid span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--tg-med-soft); color: var(--tg-med); font-size: 14px; font-weight: 700; }
.fx-for-grid li:hover span { background: var(--tg-med); color: #fff; }
.fx-for-grid p { margin: 0; font-size: 17.5px; font-weight: 500; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.fx-for-grid li::after { content: ""; position: absolute; top: 28px; right: 26px; width: 18px; height: 18px; background: var(--tg-med); opacity: .35;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat; }
.fx-for-grid li:hover::after { opacity: 1; }
@media (max-width: 959px) { .fx-for-hd .fx-product { max-width: 280px; } }
@media (max-width: 560px) { .fx-for-grid p { font-size: 16.5px; } .fx-for-grid p br { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-for-grid li:hover { transform: none; } }
/* 상담 대상 — 제품 사진을 왼쪽 칸 폭 가득 (2026-09-18 요청) 360px → 칸 너비 */
.fx-for-hd .fx-product { max-width: none; width: 100%; padding: 26px 30px; }
@media (max-width: 959px) { .fx-for-hd .fx-product { max-width: 420px; } }
/* 상담 대상 제품컷 — 세로형 단품 병으로 교체 (2026-09-18 요청). 카드 안에서 병 높이를 제한해 섹션이 너무 길어지지 않게 */
.fx-for-hd .fx-product { display: grid; place-items: center; padding: 30px; }
.fx-for-hd .fx-product img { width: auto; max-width: 100%; max-height: 440px; }
@media (max-width: 959px) { .fx-for-hd .fx-product img { max-height: 340px; } }
/* 상담 대상 제품컷 — 흰 카드 없이 투명 배경으로 (2026-09-18 요청). 병 아래 은은한 그림자만 */
.fx-for-hd .fx-product { background: transparent; box-shadow: none; padding: 0; border-radius: 0; margin-top: 34px; }
.fx-for-hd .fx-product img { filter: drop-shadow(0 18px 26px rgba(19, 45, 39, .18)); }

/* 소개 블록 제품 카드 — 흰 배경 대신 제품 라벨의 청록색을 딴 그라데이션, 제품은 더 크게 (2026-09-21 요청)
   카드 폭 44% → 52%, 병은 카드 밖으로 살짝 튀어나오게 키운다. */
.fx-intro-prod {
  width: 52%; padding: 12px 14px 8px; overflow: visible;
  background: linear-gradient(155deg, #f2fbfb 0%, #cdeeee 48%, #8fd6d8 100%);
  border: 1px solid rgba(64, 191, 196, .35);
  box-shadow: 0 20px 44px rgba(28, 110, 114, .22);
}
.fx-intro-prod img { transform: scale(1.14) translateY(-6%); transform-origin: center bottom;
  filter: drop-shadow(0 14px 18px rgba(20, 60, 62, .25)); }
@media (max-width: 560px) { .fx-intro-prod { width: 56%; } }
/* 소개 블록 제품 — 테두리 그라데이션이 들어간 제품컷으로 교체 (2026-09-21 요청)
   이미지 자체에 외곽선이 있어 카드 배경·테두리·그림자는 없애고 병만 띄운다. */
.fx-intro-prod { width: 50%; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; left: -12px; bottom: -8px; }
.fx-intro-prod img { transform: none; filter: drop-shadow(0 16px 22px rgba(19, 45, 39, .22)); }
@media (max-width: 560px) { .fx-intro-prod { width: 54%; left: -6px; } }
/* 소개 블록 제품 확대 50% → 62% (2026-09-21 요청) */
.fx-intro-prod { width: 62%; left: -28px; bottom: -20px; }
@media (max-width: 560px) { .fx-intro-prod { width: 60%; left: -10px; bottom: -10px; } }
/* 소개 블록 제품 — 왼쪽으로 조금 이동 (2026-09-21 요청) -28 → -52px */
@media (min-width: 561px) { .fx-intro-prod { left: -52px; } }
/* 소개 블록 제품 — 왼쪽으로 한 번 더 (2026-09-21 요청) -52 → -66px */
@media (min-width: 561px) { .fx-intro-prod { left: -66px; } }
/* 소개 블록 제품 — 조금 축소 62% → 56% (2026-09-21 요청). 왼쪽 위치는 유지 */
@media (min-width: 561px) { .fx-intro-prod { width: 56%; } }

/* 특별한 이유 — 점을 각 카드 이미지의 세로 가운데에 정확히 맞춘다 (2026-09-21)
   이미지 높이 = (카드폭 - 좌우여백 44px) × 2/3 이므로, 카드폭을 컨테이너 단위(cqw)로 받아 계산.
   점 중심 = 윗여백 22px + 이미지 높이 ÷ 2 */
@media (min-width: 900px) {
  .fx-reason-list > li { container-type: inline-size; }
  .fx-reason-list > li::after { top: calc(22px + (100cqw - 44px) / 3 - 8px); }
}
/* 보정 — cqw 는 이미 좌우 여백을 뺀 안쪽 폭(=이미지 폭). 테두리 1px 감안 */
@media (min-width: 900px) {
  .fx-reason-list > li::after { top: calc(21px + 100cqw / 3 - 8px); }
  .fx-reason-list > li:nth-child(odd)::after { right: -70px; }
}
/* 1px 미세 보정 — 점 중심을 이미지 세로 중심·가운데 세로선에 정확히 */
@media (min-width: 900px) {
  .fx-reason-list > li::after { top: calc(22px + 100cqw / 3 - 8px); }
  .fx-reason-list > li:nth-child(odd)::after { right: -69px; }
  .fx-reason-list > li:nth-child(even)::after { left: -69px; }
}

/* 특별한 이유 — 카드 높이 통일 + 지그재그 (2026-09-21)
   오른쪽 카드의 margin-top(90px) 때문에 같은 행의 왼쪽 카드가 행 높이만큼 늘어나(629 vs 539px) 길이가 달랐다.
   늘어나지 않도록 위 정렬로 두고, 오른쪽 카드만 아래로 내려 지그재그를 만든다. */
@media (min-width: 900px) {
  .fx-reason-list { align-items: start; }
}
/* 지그재그 정리 — 오른쪽 카드를 margin 대신 transform 으로 내려, 행 높이는 카드 높이 그대로 두고
   좌우 기둥 모두 카드 간격 48px, 오른쪽만 90px 어긋나게 엇갈린다. 내려간 만큼 목록 아래 여백 보충 */
@media (min-width: 900px) {
  .fx-reason-list > li:nth-child(even) { margin-top: 0; transform: translateY(90px); }
  .fx-reason-list { padding-bottom: 90px; }
}

/* 특별한 이유 카드 재구성 (2026-09-21 요청)
   · 번호를 이미지 왼쪽 위에 얹고, 제목·설명은 이미지 아래에 둔다
   · 이미지 비율을 낮춰(3:2 → 16:9) 카드 세로 길이를 줄인다
   · 번호에서 가운데 점까지 가는 가는 연결선을 넣는다 */
@media (min-width: 900px) {
  .fx-reason-list > li { padding: 18px 18px 26px; text-align: center; }
  .fx-reason-list figure { margin-bottom: 18px; aspect-ratio: 16 / 9; }
  .fx-reason-list .fx-num {
    position: absolute; top: 34px; left: 34px; margin: 0; z-index: 2;
    width: 46px; height: 46px; font-size: 15px;
    background: rgba(12, 40, 32, .82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    box-shadow: 0 6px 16px rgba(9, 30, 24, .3);
  }
  /* 번호 중심(카드 위에서 57px)과 같은 높이에 점과 연결선 */
  .fx-reason-list > li::after { top: 49px; }
  .fx-reason-list > li::before {
    content: ""; position: absolute; top: 56px; height: 1px; width: 61px;
    background: linear-gradient(to right, rgba(19,122,82,.15), rgba(19,122,82,.55));
  }
  .fx-reason-list > li:nth-child(odd)::before { right: -61px; }
  .fx-reason-list > li:nth-child(even)::before { left: -61px;
    background: linear-gradient(to left, rgba(19,122,82,.15), rgba(19,122,82,.55)); }
  .fx-reason-list b { font-size: 21px; margin-bottom: 8px; }
  .fx-reason-list p { font-size: 16px; }
}

/* 특별한 이유 — 번호를 가운데 선 쪽 모서리로 (왼쪽 카드는 오른쪽 위, 오른쪽 카드는 왼쪽 위),
   배지는 그라데이션 + 숫자 크게 (2026-09-21 요청) */
@media (min-width: 900px) {
  .fx-reason-list .fx-num {
    width: 58px; height: 58px; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
    top: 30px; left: auto; right: 30px;
    background: linear-gradient(140deg, #2f8a68 0%, var(--tg-deep) 100%);
    box-shadow: 0 8px 18px rgba(9, 30, 24, .32);
  }
  .fx-reason-list > li:nth-child(even) .fx-num { right: auto; left: 30px; }
  /* 배지 중심(카드 위 59px)에 점과 연결선을 맞춘다 */
  .fx-reason-list > li::after { top: 51px; }
  .fx-reason-list > li::before { top: 58px; }
}

/* 특별한 이유 — 이미지를 카드 가로폭 전체로 넓힌다 (2026-09-21 요청)
   좌우·위 여백만큼 이미지를 밖으로 빼서 카드 모서리까지 채우고, 배지·점·연결선 높이를 다시 맞춘다. */
@media (min-width: 900px) {
  .fx-reason-list > li { padding: 0 0 28px; }
  .fx-reason-list figure { margin: 0 0 20px; border-radius: 23px 23px 0 0; }
  .fx-reason-list b, .fx-reason-list p { padding-inline: 24px; }
  .fx-reason-list .fx-num { top: 22px; right: 24px; }
  .fx-reason-list > li:nth-child(even) .fx-num { left: 24px; right: auto; }
  .fx-reason-list > li::after { top: 43px; }
  .fx-reason-list > li::before { top: 50px; }
}
/* 되돌리기 — 이미지 전폭 확장 취소, 카드 여백 안쪽으로 복귀 (2026-09-21 요청) */
@media (min-width: 900px) {
  .fx-reason-list > li { padding: 18px 18px 26px; }
  .fx-reason-list figure { margin: 0 0 18px; border-radius: 16px; }
  .fx-reason-list b, .fx-reason-list p { padding-inline: 0; }
  .fx-reason-list .fx-num { top: 30px; right: 30px; }
  .fx-reason-list > li:nth-child(even) .fx-num { left: 30px; right: auto; }
  .fx-reason-list > li::after { top: 51px; }
  .fx-reason-list > li::before { top: 58px; }
}
/* 특별한 이유 — 카드 폭 확대 (2026-09-21 요청) 목록 최대폭 1080 → 1280px */
@media (min-width: 900px) { .fx-reason-list { max-width: 1280px; } }
/* 특별한 이유 — 카드 아래 간격 48 → 100px (2026-09-21 요청) */
@media (min-width: 900px) { .fx-reason-list > li { margin-bottom: 100px; } }
/* 특별한 이유 — 설명을 한 줄로 (2026-09-21 요청). 카드가 넓어져 줄바꿈이 필요 없다 */
@media (min-width: 900px) { .fx-reason-list p br { display: none; } }
/* 특별한 이유 — 카드 위 여백 30px (2026-09-21 요청) */
@media (min-width: 900px) { .fx-reason-list > li { margin-top: 30px; } }
/* 오른쪽 카드도 같은 위 여백 — 지그재그 간격 90px 유지 */
@media (min-width: 900px) { .fx-reason-list > li:nth-child(even) { margin-top: 30px; } }
/* 오른쪽 카드만 위 여백 50px (2026-09-21 요청) */
@media (min-width: 900px) { .fx-reason-list > li:nth-child(even) { margin-top: 50px; } }
/* 오른쪽 카드 위 여백 50 → 80px (2026-09-21 요청) */
@media (min-width: 900px) { .fx-reason-list > li:nth-child(even) { margin-top: 80px; } }

/* 효과 카드 — 번호를 왼쪽 위에 큰 워터마크로 (2026-09-21 요청)
   숫자는 옅은 초록으로 카드 뒤에 깔고, 아이콘·제목·설명은 그 위에 올린다. */
.fx-effect-cards li { position: relative; overflow: hidden; padding-top: 34px; }
.fx-effect-cards em {
  position: absolute; top: -10px; left: 14px; margin: 0; z-index: 0;
  font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -.05em;
  color: rgba(19, 122, 82, .10); pointer-events: none;
}
.fx-effect-cards .fx-ico, .fx-effect-cards b, .fx-effect-cards p { position: relative; z-index: 1; }
@media (max-width: 560px) { .fx-effect-cards em { font-size: 76px; top: -6px; } }
/* 효과 카드 워터마크 숫자 — 왼쪽 위 → 오른쪽 위 (2026-09-21 요청) */
.fx-effect-cards em { left: auto; right: 18px; }
@media (max-width: 560px) { .fx-effect-cards em { right: 14px; } }

/* FAQ 섹션 — 왼쪽 타이틀, 오른쪽 질문 목록 (2026-09-21 요청) */
@media (min-width: 960px) {
  .fx-faq { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); column-gap: 56px; align-items: start; }
  .fx-faq-hd { position: sticky; top: 110px; }
}
.fx-faq-hd .fx-kicker { margin-bottom: 18px !important; }
.fx-faq-hd .fx-h { margin-bottom: 14px; }
.fx-faq-hd .fx-sub { margin-bottom: 0; }
.fx-faq-call { margin: 22px 0 0; padding-left: 14px; border-left: 2px solid var(--tg-med);
  font-size: 15.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fx-faq .fx-faq-list { max-width: none; margin: 0; border-top: 0; display: grid; gap: 12px; }
.fx-faq-list details {
  border: 1px solid var(--fx-line); border-radius: 16px; background: #fff; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.fx-faq-list details[open] { border-color: rgba(19,122,82,.4); box-shadow: 0 12px 28px rgba(19,45,39,.08); }
.fx-faq-list summary { padding: 22px 56px 22px 26px; }
.fx-faq-list summary:hover { color: var(--tg-med-deep); }
.fx-faq-list summary::after { right: 26px; }
.fx-faq-list details p { padding: 0 26px 24px; border-top: 0; }
.fx-faq-list details[open] summary { padding-bottom: 14px; }
@media (max-width: 560px) { .fx-faq-list summary { padding: 18px 44px 18px 18px; } .fx-faq-list details p { padding: 0 18px 20px; } }

/* 상담 대상 — 안내 문구를 카드 아래로, 제품 이미지는 더 크게 (2026-09-21 요청) */
@media (min-width: 960px) {
  .fx-for { grid-template-areas: "hd cards" "hd note"; grid-template-rows: auto auto; align-items: start; row-gap: 22px; }
  .fx-for-hd { grid-area: hd; align-self: center; }
  .fx-for-grid { grid-area: cards; }
  .fx-for > .fx-small { grid-area: note; margin: 0; }
}
.fx-for-hd .fx-product { margin-top: 30px; }
.fx-for-hd .fx-product img { max-height: 560px; }
@media (max-width: 959px) { .fx-for-hd .fx-product img { max-height: 400px; } }

/* 상담 대상 카드 재디자인 (2026-09-21 요청)
   세로형 카드 → 가로형 줄 카드. 왼쪽에 사각 번호 배지, 오른쪽에 문장. 체크 아이콘은 뺀다. */
.fx-for-grid li {
  flex-direction: row; align-items: center; gap: 18px;
  padding: 20px 24px; border-radius: 14px; border: 1px solid var(--fx-line);
  background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fx-for-grid li::after { display: none; }
.fx-for-grid span {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(140deg, #2f8a68 0%, var(--tg-deep) 100%); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: 0 6px 14px rgba(19, 45, 39, .18);
}
.fx-for-grid li:hover { border-color: rgba(19,122,82,.38); box-shadow: 0 10px 24px rgba(19,45,39,.08); transform: translateY(-2px); }
.fx-for-grid li:hover span { background: linear-gradient(140deg, #35a37a 0%, #14503e 100%); }
.fx-for-grid p { font-size: 17px; font-weight: 400; line-height: 1.5; }
@media (max-width: 560px) { .fx-for-grid li { padding: 16px 18px; gap: 14px; } .fx-for-grid span { width: 40px; height: 40px; border-radius: 11px; } }
/* 상담 대상 제품 이미지 축소 560 → 420px (2026-09-21 요청) */
.fx-for-hd .fx-product img { max-height: 420px; }
@media (max-width: 959px) { .fx-for-hd .fx-product img { max-height: 340px; } }

/* 상담 대상 카드 재디자인 2안 (2026-09-21) — 박스를 없애고 얇은 구분선 목록으로.
   왼쪽에 가는 큰 번호, 오른쪽에 문장. 마우스를 올리면 번호와 문장에만 색이 들어간다. */
.fx-for-grid { gap: 0 48px; }
.fx-for-grid li {
  padding: 22px 6px 20px; border: 0; border-top: 1px solid var(--fx-line);
  border-radius: 0; background: none; box-shadow: none; gap: 20px; align-items: baseline;
  transition: none;
}
.fx-for-grid li:hover { transform: none; box-shadow: none; border-color: var(--fx-line); }
.fx-for-grid span {
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  color: var(--tg-med); font-size: 30px; font-weight: 200; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; transition: color .2s;
}
.fx-for-grid li:hover span { background: none; color: var(--tg-med-deep); }
.fx-for-grid p { font-size: 17.5px; font-weight: 400; line-height: 1.6; color: var(--tg-ink); transition: color .2s; }
.fx-for-grid li:hover p { color: var(--tg-med-deep); }
@media (min-width: 640px) {
  /* 두 칸 모두 첫 줄 위에도 선이 보이도록 */
  .fx-for-grid li:nth-child(-n+2) { border-top: 1px solid var(--fx-line); }
}
@media (max-width: 560px) { .fx-for-grid span { font-size: 26px; } .fx-for-grid p { font-size: 16.5px; } }

/* 상담 대상 카드 — C안(아이콘 카드)로 확정 (2026-09-21) */
.fx-for-grid { gap: 14px; }
@media (min-width: 960px) { .fx-for-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-for-grid li {
  flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 26px 24px 28px; border: 1px solid var(--fx-line); border-radius: 16px; background: #fff;
  box-shadow: 0 6px 18px rgba(19, 45, 39, .05);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fx-for-grid li:hover { border-color: rgba(19,122,82,.4); box-shadow: 0 14px 30px rgba(19,45,39,.09); transform: translateY(-2px); }
.fx-for-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--tg-med-soft); color: var(--tg-med); transition: background-color .2s, color .2s;
}
.fx-for-grid li:hover .fx-for-ico { background: var(--tg-med); color: #fff; }
.fx-for-ico .fx-band-img { width: 28px; height: 28px; }
.fx-for-grid p { font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--tg-ink); }
@media (max-width: 560px) { .fx-for-grid li { padding: 22px 20px 24px; } .fx-for-ico { width: 46px; height: 46px; } .fx-for-grid p { font-size: 16px; } }
/* 이전 목록형 디자인의 span 규칙이 아이콘 원을 눌러 버려 특이도를 올린다 */
.fx-for-grid .fx-for-ico {
  width: 52px; height: 52px; border-radius: 50%; background: var(--tg-med-soft); color: var(--tg-med);
  font-size: 0; box-shadow: none;
}
.fx-for-grid li:hover .fx-for-ico { background: var(--tg-med); color: #fff; }
@media (max-width: 560px) { .fx-for-grid .fx-for-ico { width: 46px; height: 46px; } }
/* 상담 대상 1·5·6번 아이콘(PNG 마스크)이 이전 목록형 span 규칙에 눌려 색이 빠져 안 보였다 — 특이도 보정 (2026-09-21) */
.fx-for-grid .fx-band-img { background-color: currentColor; width: 28px; height: 28px; }
@media (max-width: 560px) { .fx-for-grid .fx-band-img { width: 26px; height: 26px; } }
/* 상담 대상 아이콘 확대 (2026-09-21 요청) — 원 52 → 64px, 아이콘 28 → 36px */
.fx-for-grid .fx-for-ico { width: 64px; height: 64px; }
.fx-for-grid .fx-band-img { width: 36px; height: 36px; }
.fx-for-grid .fx-for-ico svg { width: 32px; height: 32px; }
@media (max-width: 560px) {
  .fx-for-grid .fx-for-ico { width: 56px; height: 56px; }
  .fx-for-grid .fx-band-img { width: 32px; height: 32px; }
}
/* 상담 대상 카드 배치 3×2 → 2×3 (2026-09-21 요청) */
@media (min-width: 960px) { .fx-for-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 상담 대상 아이콘 호버 반전 확실히 (2026-09-21) — 이전 목록형 디자인의 span 규칙과 충돌하던 부분까지 덮는다 */
.fx-for-grid li:hover .fx-for-ico,
.fx-for-grid li:focus-within .fx-for-ico { background: var(--tg-med); color: #fff; }
.fx-for-grid li:hover .fx-for-ico .fx-band-img,
.fx-for-grid li:focus-within .fx-for-ico .fx-band-img { background-color: #fff; }
.fx-for-grid li:hover .fx-for-ico svg { color: #fff; stroke: currentColor; }
.fx-for-grid .fx-for-ico, .fx-for-grid .fx-band-img { transition: background-color .2s, color .2s; }
/* 제품 이미지 서로 교체 (2026-09-21 요청) — 소개는 세로형 단품, 상담 대상은 2병 컷.
   비율이 달라져 크기를 다시 맞춘다. */
@media (min-width: 561px) { .fx-intro-prod { width: 34%; left: -40px; bottom: -14px; } }
@media (max-width: 560px) { .fx-intro-prod { width: 38%; } }
.fx-for-hd .fx-product img { max-height: 380px; }
@media (max-width: 959px) { .fx-for-hd .fx-product img { max-height: 320px; } }

/* 효과 섹션 — 왼쪽 타이틀, 오른쪽 카드 (2026-09-21 요청). 안내 문구는 타이틀 아래로 */
@media (min-width: 960px) {
  .fx-effect { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); column-gap: 56px; align-items: center; }
  .fx-effect-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.fx-effect-hd .fx-h { margin-bottom: 14px; }
.fx-effect-hd .fx-sub { margin-bottom: 0; text-align: left; }
.fx-effect-hd .fx-disc { margin: 22px 0 0; padding: 0 0 0 14px; border: 0; border-left: 2px solid var(--tg-med);
  text-align: left; font-size: 14.5px; line-height: 1.7; }
@media (max-width: 959px) { .fx-effect-hd .fx-sub, .fx-effect-hd .fx-disc { text-align: left; } }
/* 상담 대상 제품 이미지 확대 380 → 470px (2026-09-21 요청) */
.fx-for-hd .fx-product img { max-height: 470px; }
@media (max-width: 959px) { .fx-for-hd .fx-product img { max-height: 360px; } }
/* 안내 문구 앞 초록 세로선 통일 (2026-09-21 요청) — 상담 대상 안내 문구에도 같은 선 */
.fx-for > .fx-small { padding-left: 14px; border-left: 2px solid var(--tg-med); color: var(--tg-ink-2); }
/* 함께 복용 섹션 — 제목·설명 가운데 정렬 (2026-09-21 요청) */
.fx-with > .fx-h, .fx-with > .fx-sub { text-align: center; }
.fx-with > .fx-sub { max-width: 62ch; margin-left: auto; margin-right: auto; }
/* 함께 복용 설명 — 한 줄로 (2026-09-21 요청). 넣어 둔 줄바꿈을 숨기고 폭 제한 해제 */
@media (min-width: 900px) { .fx-with > .fx-sub { max-width: none; } .fx-with > .fx-sub br { display: none; } }
/* 비교 섹션 화살표 — 고객 지정 아이콘으로 교체 (2026-09-21) */
.fx-vs-arrow .fx-band-img { width: 22px; height: 22px; background-color: currentColor; }
/* 비교 카드 사이 간격 20 → 44px (2026-09-21 요청). 화살표는 가운데 유지 */
@media (min-width: 760px) { .fx-vs { column-gap: 44px; } }
/* 비교 섹션 화살표 — 원·아이콘 확대해 두 카드에 걸치게 (2026-09-21 요청) */
@media (min-width: 760px) {
  .fx-vs-arrow { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-width: 2px; box-shadow: 0 8px 20px rgba(19,45,39,.16); }
  .fx-vs-arrow .fx-band-img { width: 30px; height: 30px; }
}
/* 비교 화살표 아이콘 30 → 38px (2026-09-21 요청) */
@media (min-width: 760px) { .fx-vs-arrow .fx-band-img { width: 38px; height: 38px; } }
/* 비교 화살표 한 단계 더 — 원 64 → 76px, 아이콘 38 → 46px (2026-09-21 요청) */
@media (min-width: 760px) {
  .fx-vs-arrow { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .fx-vs-arrow .fx-band-img { width: 46px; height: 46px; }
}
/* 원은 76px 유지, 화살표 아이콘만 46 → 56px (2026-09-21 요청) */
@media (min-width: 760px) { .fx-vs-arrow .fx-band-img { width: 56px; height: 56px; } }
/* 비교 화살표 — 원형 → 알약 형태 (2026-09-21 요청) */
@media (min-width: 760px) {
  .fx-vs-arrow { width: 124px; height: 64px; margin: -32px 0 0 -62px; border-radius: 999px; }
  .fx-vs-arrow .fx-band-img { width: 44px; height: 44px; }
}
/* 비교 화살표 알약 크기·위치 조정 (2026-09-21 요청 값 그대로) */
@media (min-width: 760px) {
  .fx-vs-arrow { width: 103px; height: 55px; margin: -28px 0 0 -69px; border-radius: 999px; }
}
/* 비교 화살표 아이콘 44 → 52px (2026-09-21 요청). 알약 높이 55px 안에서 최대치 */
@media (min-width: 760px) { .fx-vs-arrow .fx-band-img { width: 52px; height: 52px; } }
/* 비교 카드 내용 글자 17 → 19px, 모바일 비례 (2026-09-21 요청) */
.fx-vs-col dd { font-size: 19px; }
@media (max-width: 900px) { .fx-vs-col dd { font-size: 17.5px; } }
@media (max-width: 560px) { .fx-vs-col dd { font-size: 16.5px; } }
/* 하단 안내 문구 — '안내' 라벨 다음 줄부터 들여쓰기 맞춤 (2026-09-21 요청) */
.rx-disclaimer { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
.rx-disclaimer b { margin-right: 0; }
/* 안내 라벨과 본문 사이 간격 8 → 16px (2026-09-21 요청) */
.rx-disclaimer { column-gap: 16px; }

/* ── 오공환 페이지 추가 블록 (2026-09-21) ───────────────────────── */
/* 소개 하단 키워드 칩 */
.fx-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0 !important; }
.fx-keys em { font-style: normal; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--fx-line);
  font-size: 15px; color: var(--tg-med-deep); }

/* 구성 약재 5종 + 조제 안내 */
.fx-herbs-hd { max-width: 720px; }
.fx-herbs-hd .fx-sub { margin-bottom: 0; }
.fx-herb-cards { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px)  { .fx-herb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fx-herb-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fx-herb-cards li { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 28px; border-radius: 16px;
  background: #fff; border: 1px solid var(--fx-line); }
.fx-herb-cards span { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--tg-med); }
.fx-herb-cards b { font-size: 23px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.fx-herb-cards em { font-style: normal; margin-bottom: 8px; font-size: 14px; color: var(--tg-med-deep); }
.fx-herb-cards p { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fx-dose { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .fx-dose { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-dose li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 14px;
  background: var(--tg-med-soft); }
.fx-dose b { font-size: 17px; font-weight: 600; color: var(--tg-med-deep); }
.fx-dose span { font-size: 15.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }

/* 응급 안내 박스 */
.fx-alert { max-width: 880px; margin: 26px auto 0; padding: 20px 24px; border-radius: 14px;
  background: #fff5f2; border: 1px solid rgba(190, 80, 50, .28);
  font-size: 16px; font-weight: 300; line-height: 1.75; color: #6b2d19; word-break: keep-all; }
.fx-alert b { display: block; margin-bottom: 6px; font-size: 16.5px; font-weight: 600; color: #a33b1c; }
@media (max-width: 560px) { .fx-alert { font-size: 15px; padding: 18px 18px; } .fx-keys em { font-size: 14px; } }
/* 소개 블록 좌우 비율 1.02:0.98 → 0.9:1.1 (2026-09-21 요청) — 글 폭 줄이고 이미지 폭 확대 */
@media (min-width: 960px) { .fx-intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
/* 산골캡슐 소개 이미지 — 발뒤꿈치가 프레임 안쪽에 들어오도록 오른쪽으로 보정 (2026-09-21 요청) */
.fx-intro-pic img[src*="sg-fracture"] { object-position: 72% center; }
/* 발 이미지 전체가 보이도록 새로 만든 파일 — 위치 보정 원복 (2026-09-21) */
.fx-intro-pic img[src*="sg-fracture"] { object-position: center; }
/* 소개 이미지 확대 (2026-09-21 요청) — 왼쪽 여백 64 → 16px, 세로 비율 조금 키움 */
@media (min-width: 960px) {
  .fx-intro-visual .fx-intro-pic { margin-left: 16px; aspect-ratio: 5 / 4.7; }
}
/* 소개 이미지 박스 세로만 축소 (2026-09-21 요청) — 가로는 유지, 비율 5/4.7 → 5/4.0 */
@media (min-width: 960px) { .fx-intro-visual .fx-intro-pic { aspect-ratio: 5 / 4; } }
/* 소개 이미지 — 박스 크기는 두고 사진(발)만 확대 (2026-09-21 요청) */
.fx-intro-pic img[src*="sg-fracture"] { transform: scale(1.14); transform-origin: center; }
/* 소개 이미지 한 단계 더 확대 1.14 → 1.18 (2026-09-21 요청)
   발가락(왼쪽 끝)과 뒤꿈치가 잘리지 않도록 확대 기준점을 왼쪽(32%)으로 옮긴다 */
.fx-intro-pic img[src*="sg-fracture"] { transform: scale(1.18); transform-origin: 32% 50%; }
/* 되돌리기 — 1.14배, 가운데 기준으로 복귀 (2026-09-21 요청) */
.fx-intro-pic img[src*="sg-fracture"] { transform: scale(1.14); transform-origin: center; }
/* 소개 이미지 박스 세로 한 번 더 축소 (2026-09-21 요청) — 5/4 → 5/3.5, 가로 유지 */
@media (min-width: 960px) { .fx-intro-visual .fx-intro-pic { aspect-ratio: 5 / 3.5; } }
/* 박스가 낮아지며 발가락 끝이 1~2px 잘려 확대 기준점을 살짝 왼쪽(45%)으로 */
.fx-intro-pic img[src*="sg-fracture"] { transform-origin: 45% 50%; }

/* 구성 약재 섹션 재디자인 (2026-09-21 요청)
   왼쪽 타이틀 / 오른쪽 약재 카드. 핵심 약재(오공)는 진한 그린 대표 카드로 크게, 나머지 4종은 2×2.
   조제 안내 3칸은 한 장의 흰 띠로 묶고 칸 사이에 세로선. */
@media (min-width: 960px) {
  .fx-herbs { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    grid-template-areas: "hd cards" "dose dose"; column-gap: 56px; align-items: start; }
  .fx-herbs-hd { grid-area: hd; max-width: none; position: sticky; top: 110px; }
  .fx-herbs .fx-herb-cards { grid-area: cards; margin-top: 0; }
  .fx-herbs .fx-dose { grid-area: dose; }
}
.fx-herbs .fx-herb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 559px) { .fx-herbs .fx-herb-cards { grid-template-columns: minmax(0, 1fr); } }
.fx-herbs .fx-herb-cards li { position: relative; padding: 24px 24px 26px; border-radius: 18px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.fx-herbs .fx-herb-cards li:hover { border-color: rgba(19,122,82,.4); box-shadow: 0 12px 26px rgba(19,45,39,.08); transform: translateY(-2px); }
.fx-herbs .fx-herb-cards span { position: absolute; top: 18px; right: 22px; font-size: 40px; font-weight: 800; letter-spacing: -.04em;
  color: rgba(19,122,82,.12); line-height: 1; }
.fx-herbs .fx-herb-cards b { font-size: 24px; }
.fx-herbs .fx-herb-cards em { align-self: flex-start; margin: 2px 0 10px; padding: 4px 11px; border-radius: 999px;
  background: var(--tg-med-soft); font-size: 13.5px; font-weight: 500; color: var(--tg-med-deep); }
.fx-herbs .fx-herb-cards p { font-size: 16px; }
/* 핵심 약재 대표 카드 */
.fx-herbs .fx-herb-cards li:first-child { grid-column: 1 / -1; padding: 30px 32px 32px; border: 0;
  background: linear-gradient(140deg, var(--tg-deep) 0%, #1d5a47 60%, #2f8a68 100%); color: #fff;
  box-shadow: 0 16px 36px rgba(19,45,39,.18); }
.fx-herbs .fx-herb-cards li:first-child span { font-size: 64px; color: rgba(255,255,255,.12); top: 20px; right: 28px; }
.fx-herbs .fx-herb-cards li:first-child b { font-size: 32px; color: #fff; }
.fx-herbs .fx-herb-cards li:first-child em { background: rgba(143,211,180,.2); color: #bfe8d5; }
.fx-herbs .fx-herb-cards li:first-child p { max-width: 46ch; font-size: 17px; color: rgba(255,255,255,.88); }
.fx-herbs .fx-herb-cards li:first-child::before { content: "핵심 약재"; display: inline-block; align-self: flex-start; margin-bottom: 6px;
  padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--tg-deep); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
/* 조제 안내 — 한 장의 흰 띠 */
.fx-herbs .fx-dose { margin-top: 28px; gap: 0; border-radius: 18px; background: #fff; border: 1px solid var(--fx-line); overflow: hidden; }
.fx-herbs .fx-dose li { padding: 24px 28px; border-radius: 0; background: none; position: relative; }
.fx-herbs .fx-dose li + li { border-top: 1px solid var(--fx-line); }
@media (min-width: 760px) { .fx-herbs .fx-dose li + li { border-top: 0; border-left: 1px solid var(--fx-line); } }
.fx-herbs .fx-dose b { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.fx-herbs .fx-dose b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tg-med); box-shadow: 0 0 0 4px rgba(19,122,82,.14); }
@media (max-width: 560px) { .fx-herbs .fx-herb-cards li:first-child { padding: 24px 22px 26px; } .fx-herbs .fx-herb-cards li:first-child b { font-size: 26px; } }

/* 구성 약재 섹션 재디자인 2안 (2026-09-21) — '배합'이 보이도록 원형 약재 5개를 + 로 잇는다.
   제목은 가운데, 오공(핵심)만 진한 그린 원. 이전 좌우 분할·대표 카드 규칙은 무효화 */
.fx-herbs { display: block; }
.fx-herbs-hd { max-width: 760px; margin: 0 auto; text-align: center; position: static; }
.fx-herbs-hd .fx-h, .fx-herbs-hd .fx-sub { text-align: center; }
.fx-herbs-hd .fx-compare-note { display: inline-block; text-align: left; }
.fx-herbs .fx-herb-orbs { margin: 52px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 20px; }
@media (min-width: 640px)  { .fx-herbs .fx-herb-orbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fx-herbs .fx-herb-orbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fx-herbs .fx-herb-orbs li,
.fx-herbs .fx-herb-orbs li:first-child {
  position: relative; grid-column: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; transform: none; overflow: visible;
}
.fx-herbs .fx-herb-orbs li::before, .fx-herbs .fx-herb-orbs li:first-child::before { content: none; }
.fx-herbs .fx-herb-orbs li:hover { transform: none; box-shadow: none; }
.fx-orb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 132px; height: 132px; margin-bottom: 20px; border-radius: 50%;
  background: #fff; border: 1px solid var(--fx-line); box-shadow: 0 10px 24px rgba(19,45,39,.07);
  transition: transform .25s, box-shadow .25s;
}
.fx-herbs .fx-herb-orbs li:hover .fx-orb { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(19,45,39,.12); }
.fx-orb b, .fx-herbs .fx-herb-orbs li:first-child .fx-orb b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.fx-orb i { font-style: normal; font-size: 14px; letter-spacing: .12em; color: var(--tg-med); }
.fx-herbs .fx-herb-orbs li:first-child .fx-orb { background: linear-gradient(140deg, var(--tg-deep), #2f8a68); border: 0; box-shadow: 0 14px 30px rgba(19,45,39,.22); }
.fx-herbs .fx-herb-orbs li:first-child .fx-orb b { color: #fff; }
.fx-herbs .fx-herb-orbs li:first-child .fx-orb i { color: #bfe8d5; }
.fx-herbs .fx-herb-orbs em, .fx-herbs .fx-herb-orbs li:first-child em {
  align-self: center; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 13.5px; font-weight: 500;
}
.fx-herbs .fx-herb-orbs li:first-child em { background: var(--tg-med); color: #fff; }
.fx-herbs .fx-herb-orbs p, .fx-herbs .fx-herb-orbs li:first-child p { max-width: 22ch; margin: 0 auto; font-size: 15.5px; line-height: 1.7; color: var(--tg-ink-2); }
/* 원 사이 + 표시 (넓은 화면에서만) */
@media (min-width: 1100px) {
  .fx-herbs .fx-herb-orbs li + li::after {
    content: "+"; position: absolute; top: 50px; left: -21px; width: 22px; text-align: center;
    font-size: 26px; font-weight: 300; line-height: 1; color: var(--tg-med);
  }
}
.fx-herbs .fx-dose { margin-top: 56px; }
/* 구성 약재 섹션 — 안내 문구를 맨 아래 한 줄로 (2026-09-21 요청) */
.fx-herbs-note { margin: 22px 0 0; text-align: center; font-size: 15px; font-weight: 300; color: var(--tg-mute); word-break: keep-all; }

/* 약재 원 — 약재마다 다른 색 (2026-09-21 요청). 원은 그라데이션 + 흰 글자, 역할 태그도 같은 색 계열로 */
.fx-herbs .fx-herb-orbs li .fx-orb { border: 0; }
.fx-herbs .fx-herb-orbs li .fx-orb b { color: #fff; }
.fx-herbs .fx-herb-orbs li .fx-orb i { color: rgba(255,255,255,.78); }
.fx-herbs .fx-herb-orbs li:nth-child(1) .fx-orb { background: linear-gradient(140deg, #14352c, #2f8a68); box-shadow: 0 14px 30px rgba(20,53,44,.24); }
.fx-herbs .fx-herb-orbs li:nth-child(2) .fx-orb { background: linear-gradient(140deg, #8a5a12, #d4a23c); box-shadow: 0 14px 30px rgba(138,90,18,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(3) .fx-orb { background: linear-gradient(140deg, #6a2e3c, #b0606f); box-shadow: 0 14px 30px rgba(106,46,60,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(4) .fx-orb { background: linear-gradient(140deg, #5a3d26, #a3744c); box-shadow: 0 14px 30px rgba(90,61,38,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(5) .fx-orb { background: linear-gradient(140deg, #1a5a66, #3f9fa9); box-shadow: 0 14px 30px rgba(26,90,102,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(1) em { background: #e3f1ea; color: #14503e; }
.fx-herbs .fx-herb-orbs li:nth-child(2) em { background: #f8ecd4; color: #7a4f0f; }
.fx-herbs .fx-herb-orbs li:nth-child(3) em { background: #f6e3e7; color: #6a2e3c; }
.fx-herbs .fx-herb-orbs li:nth-child(4) em { background: #f1e7dd; color: #5a3d26; }
.fx-herbs .fx-herb-orbs li:nth-child(5) em { background: #dff0f2; color: #1a5a66; }
/* 약재 원 색 톤 다운 (2026-09-21 요청) — 채도를 낮춘 차분한 자연색 */
.fx-herbs .fx-herb-orbs li:nth-child(1) .fx-orb { background: linear-gradient(140deg, #2b4a40, #557d6c); box-shadow: 0 12px 26px rgba(43,74,64,.18); }
.fx-herbs .fx-herb-orbs li:nth-child(2) .fx-orb { background: linear-gradient(140deg, #7a6545, #a8916a); box-shadow: 0 12px 26px rgba(122,101,69,.16); }
.fx-herbs .fx-herb-orbs li:nth-child(3) .fx-orb { background: linear-gradient(140deg, #6b4d55, #94747c); box-shadow: 0 12px 26px rgba(107,77,85,.16); }
.fx-herbs .fx-herb-orbs li:nth-child(4) .fx-orb { background: linear-gradient(140deg, #5d4e41, #8a7865); box-shadow: 0 12px 26px rgba(93,78,65,.16); }
.fx-herbs .fx-herb-orbs li:nth-child(5) .fx-orb { background: linear-gradient(140deg, #3f5d61, #6d8e91); box-shadow: 0 12px 26px rgba(63,93,97,.16); }
.fx-herbs .fx-herb-orbs li:nth-child(1) em { background: #e6eeea; color: #2b4a40; }
.fx-herbs .fx-herb-orbs li:nth-child(2) em { background: #f1ebe0; color: #6a5639; }
.fx-herbs .fx-herb-orbs li:nth-child(3) em { background: #f0e7e9; color: #5e424a; }
.fx-herbs .fx-herb-orbs li:nth-child(4) em { background: #eee8e2; color: #53453a; }
.fx-herbs .fx-herb-orbs li:nth-child(5) em { background: #e5eded; color: #365255; }
/* 되돌리기 — 톤 다운 전 색으로 복귀 (2026-09-21 요청) */
.fx-herbs .fx-herb-orbs li:nth-child(1) .fx-orb { background: linear-gradient(140deg, #14352c, #2f8a68); box-shadow: 0 14px 30px rgba(20,53,44,.24); }
.fx-herbs .fx-herb-orbs li:nth-child(2) .fx-orb { background: linear-gradient(140deg, #8a5a12, #d4a23c); box-shadow: 0 14px 30px rgba(138,90,18,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(3) .fx-orb { background: linear-gradient(140deg, #6a2e3c, #b0606f); box-shadow: 0 14px 30px rgba(106,46,60,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(4) .fx-orb { background: linear-gradient(140deg, #5a3d26, #a3744c); box-shadow: 0 14px 30px rgba(90,61,38,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(5) .fx-orb { background: linear-gradient(140deg, #1a5a66, #3f9fa9); box-shadow: 0 14px 30px rgba(26,90,102,.22); }
.fx-herbs .fx-herb-orbs li:nth-child(1) em { background: #e3f1ea; color: #14503e; }
.fx-herbs .fx-herb-orbs li:nth-child(2) em { background: #f8ecd4; color: #7a4f0f; }
.fx-herbs .fx-herb-orbs li:nth-child(3) em { background: #f6e3e7; color: #6a2e3c; }
.fx-herbs .fx-herb-orbs li:nth-child(4) em { background: #f1e7dd; color: #5a3d26; }
.fx-herbs .fx-herb-orbs li:nth-child(5) em { background: #dff0f2; color: #1a5a66; }
/* 약재 원 채도 한 단계 낮춤 (2026-09-21 요청) — 원래 색과 톤다운 색의 중간 */
.fx-herbs .fx-herb-orbs li:nth-child(1) .fx-orb { background: linear-gradient(140deg, #1f3f36, #428370); box-shadow: 0 13px 28px rgba(31,63,54,.2); }
.fx-herbs .fx-herb-orbs li:nth-child(2) .fx-orb { background: linear-gradient(140deg, #82602c, #be9a53); box-shadow: 0 13px 28px rgba(130,96,44,.18); }
.fx-herbs .fx-herb-orbs li:nth-child(3) .fx-orb { background: linear-gradient(140deg, #6a3d48, #a26a75); box-shadow: 0 13px 28px rgba(106,61,72,.18); }
.fx-herbs .fx-herb-orbs li:nth-child(4) .fx-orb { background: linear-gradient(140deg, #5b4533, #967658); box-shadow: 0 13px 28px rgba(91,69,51,.18); }
.fx-herbs .fx-herb-orbs li:nth-child(5) .fx-orb { background: linear-gradient(140deg, #2c5b63, #56969d); box-shadow: 0 13px 28px rgba(44,91,99,.18); }
.fx-herbs .fx-herb-orbs li:nth-child(1) em { background: #e4f0ea; color: #1f4a3d; }
.fx-herbs .fx-herb-orbs li:nth-child(2) em { background: #f4ecdb; color: #72532a; }
.fx-herbs .fx-herb-orbs li:nth-child(3) em { background: #f3e5e8; color: #643843; }
.fx-herbs .fx-herb-orbs li:nth-child(4) em { background: #efe7df; color: #574030; }
.fx-herbs .fx-herb-orbs li:nth-child(5) em { background: #e2eff0; color: #28555c; }
/* 약재 설명 글자 15.5 → 17px (2026-09-21 요청) */
.fx-herbs .fx-herb-orbs p, .fx-herbs .fx-herb-orbs li:first-child p { font-size: 17px; max-width: 23ch; }
@media (max-width: 560px) { .fx-herbs .fx-herb-orbs p, .fx-herbs .fx-herb-orbs li:first-child p { font-size: 16px; } }
/* FAQ 응급 안내 박스가 왼쪽 칸(따라오는 타이틀 아래)으로 들어가 글자가 겹쳤다 — 오른쪽 질문 목록 아래로 (2026-09-21) */
@media (min-width: 960px) {
  .fx-faq > .fx-alert { grid-column: 2; margin: 16px 0 0; max-width: none; }
}
/* 함께 복용 섹션 위 구분선 (2026-09-21 요청) */
.fx-with { border-top: 1px solid var(--tg-hair); }
/* 함께 복용 카드 설명 글자 16 → 17.5px (2026-09-21 요청) */
.fx-with-card p { font-size: 17.5px; line-height: 1.7; }
@media (max-width: 560px) { .fx-with-card p { font-size: 16px; } }
/* 함께 복용 카드 사이 간격 20 → 36px (2026-09-21 요청) */
@media (min-width: 760px) { .fx-with-grid { gap: 36px; } }

/* 접골탕 (2026-09-21) — 가로형 제품컷(스틱·상자), 약재 3종 원, 처방 원칙 4칸, 관련 연구 블록 */
@media (min-width: 561px) { .fx-intro-prod.is-wide { width: 50%; left: -48px; bottom: -26px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide { width: 58%; } }
.fx-for-hd .fx-product.is-wide img { width: 100%; max-height: none; }
@media (min-width: 1100px) {
  .fx-herbs .fx-herb-orbs.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto; }
  .fx-herbs .fx-herb-orbs.is-three li + li::after { left: -21px; }
}
@media (min-width: 760px) { .fx-dose.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fx-dose.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1099px) {
  .fx-herbs .fx-dose.is-four li:nth-child(3) { border-left: 0; }
  .fx-herbs .fx-dose.is-four li:nth-child(n+3) { border-top: 1px solid var(--fx-line); }
}

.fx-research { margin-top: 64px; padding: 44px 48px 36px; border-radius: 22px; background: #fff; border: 1px solid var(--fx-line); }
.fx-research-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fx-research-hd em { font-style: normal; padding: 5px 13px; border-radius: 999px; background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 13.5px; font-weight: 500; }
.fx-research-hd b { font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--tg-ink); }
.fx-research-hd p { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fx-research-cards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .fx-research-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-research-cards li { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 26px; border-radius: 16px; background: var(--fx-soft); }
.fx-research-cards span { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--tg-med); }
.fx-research-cards b { font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.fx-research-cards p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fx-research-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 22px 0 0; padding: 16px 20px; border-radius: 12px; background: #fbf6ea; font-size: 15.5px; font-weight: 300; line-height: 1.7; color: #5c4a22; word-break: keep-all; }
.fx-research-note b { font-weight: 600; color: #7a5a14; }
.fx-research-cite { margin: 14px 0 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tg-mute); word-break: keep-all; }
@media (max-width: 560px) { .fx-research { padding: 30px 22px 26px; } .fx-research-hd b { font-size: 21px; } }

/* 상담 대상 아이콘 한 번 더 확대 (2026-09-21 요청) — 원 64 → 76px, 아이콘 36 → 44px */
.fx-for-grid .fx-for-ico { width: 76px; height: 76px; }
.fx-for-grid .fx-band-img { width: 44px; height: 44px; }
@media (max-width: 560px) {
  .fx-for-grid .fx-for-ico { width: 64px; height: 64px; }
  .fx-for-grid .fx-band-img { width: 38px; height: 38px; }
}

/* 소개 CASE 띠 아이콘 확대 (2026-09-21 요청) — 원 60 → 76px, 아이콘 40 → 48px */
.fx-band .fx-band-ico { width: 76px; height: 76px; }
.fx-band .fx-band-ico .fx-band-img { width: 48px; height: 48px; }
@media (max-width: 560px) {
  .fx-band .fx-band-ico { width: 64px; height: 64px; }
  .fx-band .fx-band-ico .fx-band-img { width: 40px; height: 40px; }
}

/* 구성 약재 섹션 설명 한 줄로 (2026-09-21 요청) — 넓은 화면에서만, 좁으면 자연 줄바꿈 */
@media (min-width: 1100px) {
  .fx-herbs-hd { max-width: none; }
  .fx-herbs-hd .fx-sub { white-space: nowrap; }
}

/* 관련 연구 카드 — 번호를 오른쪽 위 큰 워터마크로 (2026-09-21 요청, 효과 카드와 같은 방식) */
.fx-research-cards li { position: relative; overflow: hidden; padding-top: 30px; }
.fx-research-cards span {
  position: absolute; top: -8px; right: 16px; z-index: 0; pointer-events: none;
  font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: rgba(19, 122, 82, .10);
}
.fx-research-cards b, .fx-research-cards p { position: relative; z-index: 1; }
.fx-research-cards b { font-size: 19px; padding-right: 84px; }
@media (max-width: 560px) { .fx-research-cards span { font-size: 68px; right: 12px; top: -6px; } }

/* 상담 대상 카드 — 아이콘 왼쪽, 문구 오른쪽 가로 배치 (2026-09-21 요청) */
.fx-for-grid li { display: flex; flex-direction: row; align-items: center; gap: 22px; padding: 30px 35px; }
.fx-for-grid .fx-for-ico { flex-shrink: 0; }
.fx-for-grid p { margin: 0; min-width: 0; }
@media (max-width: 560px) { .fx-for-grid li { gap: 16px; padding: 18px 20px; } }
/* 상담 대상 카드 사이 간격 14 → 20px (2026-09-21 요청) */
.fx-for .fx-for-grid { gap: 20px; }
/* 상담 대상 카드 문구 — 마지막 줄에 '분' 한 글자만 떨어지지 않도록 줄 길이 균형 (2026-09-21 요청) */
.fx-for-grid p { text-wrap: balance; }

/* 발효계족환 (2026-09-21) — 일상 관절 관리 5카드, 함께복용 이미지 없는 카드(한자 문양) */
.fx-care-cards { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px)  { .fx-care-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fx-care-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fx-care-cards li { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 34px 26px 30px; border-radius: 18px; background: var(--fx-soft); border: 1px solid var(--fx-line); }
.fx-care-cards span { position: absolute; top: -8px; right: 14px; z-index: 0; pointer-events: none;
  font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: rgba(19, 122, 82, .10); }
.fx-care-cards b, .fx-care-cards p { position: relative; z-index: 1; margin: 0; }
.fx-care-cards b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.fx-care-cards p { font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) { .fx-care-cards li { padding: 28px 22px 24px; } .fx-care-cards span { font-size: 68px; } }
.fx-with-pic.is-text { display: grid; place-items: center; background: linear-gradient(140deg, #1f2a26, #3d4a44); }
.fx-with-pic.is-text em { font-style: normal; font-size: 64px; font-weight: 600; letter-spacing: .12em; color: #d9c08a; transition: transform .35s; }
.fx-with-card:hover .fx-with-pic.is-text em { transform: scale(1.06); }

/* 접골탕 소개 제품컷 확대 (2026-09-21 요청) — 50% → 60% */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="jg-product"]) { width: 60%; left: -56px; bottom: -34px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="jg-product"]) { width: 66%; } }

/* 발효계족환 소개 제품컷 확대 (2026-09-21 요청) — 50% → 60% */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="gj-product"]) { width: 60%; left: -104px; bottom: -34px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="gj-product"]) { width: 66%; } }

/* 함께 복용 제품 이미지 확대 (2026-09-21 요청) — 박스는 그대로, 제품만 1.15배 */
.fx-with-pic img { transform: scale(1.15); }
.fx-with-card:hover .fx-with-pic img { transform: scale(1.2); }

/* 일상 관절 관리 카드 — 위쪽 사진 추가 (2026-09-21 요청). 번호 워터마크는 사진 아래 본문 영역 오른쪽 위로 */
.fx-care-cards li { padding: 0 0 28px; background: #fff; }
.fx-care-pic { margin: 0 0 6px; aspect-ratio: 16 / 10; overflow: hidden; }
.fx-care-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.fx-care-cards li:hover .fx-care-pic img { transform: scale(1.05); }
.fx-care-cards b, .fx-care-cards p { padding: 0 24px; }
.fx-care-cards b { padding-right: 70px; margin-top: 16px; }
.fx-care-cards span { top: auto; right: 14px; margin-top: -6px; }
@media (max-width: 560px) { .fx-care-cards li { padding: 0 0 24px; } .fx-care-cards b, .fx-care-cards p { padding-left: 20px; padding-right: 20px; } .fx-care-cards b { padding-right: 60px; } }
/* 번호를 사진 바로 아래(카드 폭의 62.5% = 16:10 사진 높이)로, 제목은 한 줄 */
.fx-care-cards li { container-type: inline-size; }
.fx-care-cards span { top: calc(62.5cqw + 2px); margin-top: 0; }
.fx-care-cards b { padding-right: 24px; }
.fx-care-pic { position: relative; z-index: 2; }

/* 처방 안내 카드 — 위쪽 제품 이미지 영역 (2026-09-21 요청) */
.rx-card { overflow: hidden; }
.rx-card-pic { display: grid; place-items: center; height: 230px; margin: -30px -32px 10px;
  background: linear-gradient(160deg, #f3f8f5 0%, #e3efe8 100%); border-bottom: 1px solid rgba(19, 122, 82, .1); }
.rx-card-pic img { width: auto; height: auto; max-width: 78%; max-height: 190px; display: block;
  filter: drop-shadow(0 14px 18px rgba(19, 45, 39, .16)); transition: transform .35s; }
.rx-card:hover .rx-card-pic img { transform: scale(1.05); }
@media (max-width: 560px) { .rx-card-pic { height: 190px; margin: -24px -22px 8px; } .rx-card-pic img { max-height: 150px; } }

/* 처방 안내 섹션 — 제목 왼쪽 / 처방 카드 오른쪽 (2026-09-21 요청). 이전의 카드 전체 폭 규칙 해제 */
@media (min-width: 900px) {
  .hx-split > .rx-cards-wrap { grid-column: auto; }
  .hx-split:has(> .rx-cards-wrap) > .hx-split-hd { position: sticky; top: 110px; }
}

/* 처방 전에 먼저 확인하는 것 — 아이콘 교체 (2026-09-21 요청). 사이트 라인 아이콘(PNG 마스크)으로 통일, 조금 크게 */
.rx-spec-list li[data-ico="age"]    { --spec-ico: url("/assets/images/icons/rx-age.svg?v=1"); }
.rx-spec-list li[data-ico="bone"]   { --spec-ico: url("/assets/images/icons/rx-osteoporosis.png?v=1"); }
.rx-spec-list li[data-ico="digest"] { --spec-ico: url("/assets/images/icons/rx-stomach.png?v=1"); }
.rx-spec-list li[data-ico="pill"]   { --spec-ico: url("/assets/images/icons/rx-medicine.png?v=2"); }
.rx-spec-list li[data-ico="age"]::after, .rx-spec-list li[data-ico="bone"]::after,
.rx-spec-list li[data-ico="digest"]::after, .rx-spec-list li[data-ico="pill"]::after { width: 26px; height: 26px; left: 10px; margin-top: -13px; }

/* 처방 전에 먼저 확인하는 것 — 아이콘 더 크게, 더 선명하게 (2026-09-21 요청) 원 46 → 58px, 아이콘 26 → 34px, 밝은 색 */
.rx-spec-list li { grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; }
.rx-spec-list li::before { width: 58px; height: 58px; background: rgba(143, 211, 180, .22); border: 1px solid rgba(191, 238, 216, .5); }
.rx-spec-list li::after,
.rx-spec-list li[data-ico="age"]::after, .rx-spec-list li[data-ico="bone"]::after,
.rx-spec-list li[data-ico="digest"]::after, .rx-spec-list li[data-ico="pill"]::after {
  width: 34px; height: 34px; left: 12px; margin-top: -17px; background-color: #e6fbf1; }
@media (max-width: 560px) {
  .rx-spec-list li { grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; }
  .rx-spec-list li::before { width: 50px; height: 50px; }
  .rx-spec-list li::after,
  .rx-spec-list li[data-ico="age"]::after, .rx-spec-list li[data-ico="bone"]::after,
  .rx-spec-list li[data-ico="digest"]::after, .rx-spec-list li[data-ico="pill"]::after { width: 30px; height: 30px; left: 10px; margin-top: -15px; }
}
/* 나이 아이콘 — 고객 지정 모래시계 PNG로 교체 (2026-09-21) */
.rx-spec-list li[data-ico="age"] { --spec-ico: url("/assets/images/icons/rx-age.png?v=1"); }

/* 처방 전에 먼저 확인하는 것 — 원 테두리 제거, 원·아이콘·글자를 한 줄 세로 가운데로 정렬 (2026-09-21 요청)
   원(::before)과 아이콘(::after)을 모두 li 기준 absolute 로 두고 같은 중심(top 50%)을 쓴다. */
.rx-spec-list li { position: relative; display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 16px 0 16px 76px; }
.rx-spec-list li::before { position: absolute; left: 0; top: 50%; margin: -29px 0 0; width: 58px; height: 58px; border: 0; background: rgba(143, 211, 180, .2); }
.rx-spec-list li::after,
.rx-spec-list li[data-ico="age"]::after, .rx-spec-list li[data-ico="bone"]::after,
.rx-spec-list li[data-ico="digest"]::after, .rx-spec-list li[data-ico="pill"]::after { left: 12px; top: 50%; margin-top: -17px; }
.rx-spec-list b, .rx-spec-list span { margin: 0; line-height: 1.4; }
@media (max-width: 560px) {
  .rx-spec-list li { min-height: 78px; padding-left: 64px; }
  .rx-spec-list li::before { margin-top: -25px; }
  .rx-spec-list li::after,
  .rx-spec-list li[data-ico="age"]::after, .rx-spec-list li[data-ico="bone"]::after,
  .rx-spec-list li[data-ico="digest"]::after, .rx-spec-list li[data-ico="pill"]::after { left: 10px; margin-top: -15px; }
}
/* 아이콘 원과 제목 사이 간격 18 → 28px (2026-09-21 요청) */
.rx-spec-list li { padding-left: 86px; }
@media (max-width: 560px) { .rx-spec-list li { padding-left: 70px; } }

/* 생활 관리 카드 — 위쪽 사진 추가 (2026-09-21 요청). 사진이 들어가는 카드는 왼쪽 굵은 선 대신 얇은 테두리 */
.hc-caution.has-pic { gap: 20px; }
.hc-caution.has-pic li { padding: 0 0 28px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(19, 122, 82, .16); border-left-width: 1px; }
.hc-caution-pic { margin: 0 0 8px; aspect-ratio: 16 / 9; overflow: hidden; }
.hc-caution-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.hc-caution.has-pic li:hover .hc-caution-pic img { transform: scale(1.05); }
.hc-caution.has-pic b, .hc-caution.has-pic span { padding: 0 28px; }
@media (max-width: 560px) { .hc-caution.has-pic li { padding: 0 0 22px; } .hc-caution.has-pic b, .hc-caution.has-pic span { padding: 0 20px; } }

/* 뼈·관절·통증 개요 페이지만 섹션 사이 간격 확대 (2026-09-21 요청) 96 → 140px */
.herb-page.is-bone > .pg-sec { margin-bottom: 140px; }
.herb-page.is-bone > .pg-sec:last-of-type { margin-bottom: 0; }
@media (max-width: 560px) { .herb-page.is-bone > .pg-sec { margin-bottom: 88px; } }
/* 뼈·관절·통증 개요 — 첫 섹션 위 여백 +40px (본문 상단 56 → 96px) (2026-09-21 요청) */
.herb-page.is-bone > .pg-sec:first-child { margin-top: 40px; }
@media (max-width: 560px) { .herb-page.is-bone > .pg-sec:first-child { margin-top: 20px; } }
/* 뼈·관절·통증 개요 — 처방 카드 사이 간격 16 → 28px (2026-09-21 요청) */
.herb-page.is-bone .rx-cards { gap: 28px; }
@media (max-width: 560px) { .herb-page.is-bone .rx-cards { gap: 20px; } }
/* 뼈·관절·통증 개요 — 처방 카드 제품 이미지 확대 (2026-09-21 요청) 영역 230 → 270px, 이미지 최대 190 → 236px */
.herb-page.is-bone .rx-card-pic { height: 270px; }
.herb-page.is-bone .rx-card-pic img { max-height: 236px; max-width: 90%; }
@media (max-width: 560px) { .herb-page.is-bone .rx-card-pic { height: 210px; } .herb-page.is-bone .rx-card-pic img { max-height: 180px; } }

/* 교감단 (2026-09-21) — 체크 카드, 약재 원 2개, 소개 제품컷 크기 */
.fx-step-cards.is-check > li { gap: 12px; }
.fx-check { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-check li { position: relative; padding-left: 28px; font-size: 16.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.fx-check li::before { content: ""; position: absolute; left: 0; top: .28em; width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--tg-med); }
.fx-check li::after { content: ""; position: absolute; left: 5px; top: calc(.28em + 3px); width: 5px; height: 9px; border: solid var(--tg-med); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 640px) {
  .fx-herbs .fx-herb-orbs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1100px) { .fx-herbs .fx-herb-orbs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="gd-product"]) { width: 60%; left: -80px; bottom: -34px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="gd-product"]) { width: 66%; } }
/* 체크 항목은 바깥 단계 카드(li) 스타일을 물려받지 않도록 초기화 */
.fx-steps .fx-step-cards .fx-check li { display: block; padding: 0 0 0 28px; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
.fx-steps .fx-step-cards .fx-check li::before { content: ""; position: absolute; left: 0; top: .28em; right: auto; bottom: auto; width: 17px; height: 17px; margin: 0; border-radius: 4px; border: 1.5px solid var(--tg-med); background: none; box-shadow: none; animation: none; transform: none; }
.fx-steps .fx-step-cards .fx-check li::after { content: ""; position: absolute; left: 6px; top: calc(.28em + 3px); right: auto; bottom: auto; width: 5px; height: 9px; margin: 0; border: solid var(--tg-med); border-width: 0 2px 2px 0; border-radius: 0; background: none; box-shadow: none; animation: none; transform: rotate(45deg); }

/* 자율신경·순환 개요(.is-ov) — 뼈·관절 개요와 같은 간격·카드 이미지 (2026-09-21 요청) */
.herb-page.is-ov > .pg-sec { margin-bottom: 140px; }
.herb-page.is-ov > .pg-sec:last-of-type { margin-bottom: 0; }
.herb-page.is-ov > .pg-sec:first-child { margin-top: 40px; }
.herb-page.is-ov .rx-cards { gap: 28px; }
.herb-page.is-ov .rx-card-pic { height: 230px; }
.herb-page.is-ov .rx-card-pic img { max-height: 190px; max-width: 90%; }
@media (max-width: 560px) {
  .herb-page.is-ov > .pg-sec { margin-bottom: 88px; }
  .herb-page.is-ov > .pg-sec:first-child { margin-top: 20px; }
  .herb-page.is-ov .rx-cards { gap: 20px; }
  .herb-page.is-ov .rx-card-pic { height: 190px; }
}
/* 제품 사진이 아직 없는 처방 — 같은 영역에 큰 라인 아이콘 */
.rx-card-pic.is-ico > span { width: 96px; height: 96px; background-color: var(--tg-med);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; transition: transform .35s; }
.rx-card:hover .rx-card-pic.is-ico > span { transform: scale(1.06); }
/* 처방 전 확인 박스 — 수면·검사·음주 아이콘도 사이트 라인 아이콘으로 */
.rx-spec-list li[data-ico="sleep"] { --spec-ico: url("/assets/images/icons/rx-sleep.png?v=1"); }
.rx-spec-list li[data-ico="test"]  { --spec-ico: url("/assets/images/icons/rx-checkup.png?v=1"); }
.rx-spec-list li[data-ico="drink"] { --spec-ico: url("/assets/images/icons/rx-drink.svg?v=1"); }
/* 음주·흡연 아이콘 — 고객 지정 PNG로 교체 (2026-09-21) */
.rx-spec-list li[data-ico="drink"] { --spec-ico: url("/assets/images/icons/rx-drink.png?v=1"); }
/* 수면과 스트레스 아이콘 — 고객 지정 PNG로 교체 (2026-09-21) */
.rx-spec-list li[data-ico="sleep"] { --spec-ico: url("/assets/images/icons/rx-insomnia.png?v=1"); }
/* 기존 검사 결과 아이콘 — 고객 지정 PNG로 교체 (2026-09-21) */
.rx-spec-list li[data-ico="test"] { --spec-ico: url("/assets/images/icons/rx-checkup.png?v=2"); }

/* 축천환 (2026-09-21) — 배뇨 증상 4칸 단계 카드 */
@media (min-width: 760px) { .fx-step-cards.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fx-step-cards.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 환소단 (2026-09-21) — 약재 원 6개 3×2, 6번째 원 색 */
@media (min-width: 640px) { .fx-herbs .fx-herb-orbs.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto; row-gap: 48px; } }
@media (min-width: 1100px) {
  .fx-herbs .fx-herb-orbs.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-herbs .fx-herb-orbs.is-six li:nth-child(4)::after { content: none; }
}
.fx-herbs .fx-herb-orbs li:nth-child(6) .fx-orb { background: linear-gradient(140deg, #3f4a6e, #6f7aa0); box-shadow: 0 13px 28px rgba(63,74,110,.18); border: 0; }
.fx-herbs .fx-herb-orbs li:nth-child(6) .fx-orb b { color: #fff; }
.fx-herbs .fx-herb-orbs li:nth-child(6) .fx-orb i { color: rgba(255,255,255,.8); }
.fx-herbs .fx-herb-orbs li:nth-child(6) em { background: #e8eaf2; color: #3f4a6e; }

/* ═══ 자율신경센터 · 혀통증 (2026-09-21) — 흉살클리닉 컴포넌트를 초록 톤으로 재사용 ═══ */
.tg-ans-page { --tg-beauty: var(--tg-med); --tg-beauty-soft: var(--tg-med-soft); }
/* 리드 오른쪽 — 설진 색 띠 */
.tg-sul { margin: 0; padding: 26px 26px 22px; border-radius: 14px; background: var(--tg-deep, #14352c); color: #eef4f0; }
.tg-sul-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 18px; }
.tg-sul-hd b { font-size: 18px; font-weight: 500; }
.tg-sul-hd span { font-size: 14px; font-weight: 300; color: rgba(238,244,240,.7); }
.tg-sul-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(238,244,240,.18); border-radius: 8px; overflow: hidden; }
.tg-sul-row li { display: flex; flex-direction: column; gap: 2px; padding: 0 0 14px; border-right: 1px solid rgba(238,244,240,.18); }
.tg-sul-row li:last-child { border-right: 0; }
.tg-sul-row i { display: block; height: 118px; margin-bottom: 12px; }
.tg-sul-row b, .tg-sul-row span, .tg-sul-row em { padding: 0 12px; }
.tg-sul-row b { font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.tg-sul-row span { font-size: 13px; color: rgba(238,244,240,.72); }
.tg-sul-row em { font-style: normal; font-size: 13px; color: #9fdcc2; }
.tg-sul .c-danbaek { background: #ded6c5; } .tg-sul .c-danhong { background: #c8707c; }
.tg-sul .c-hong { background: #a92533; } .tg-sul .c-cheongja { background: #5a6a9b; }
.tg-sul-note { margin: 14px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: rgba(238,244,240,.66); word-break: keep-all; }
@media (max-width: 560px) { .tg-sul { padding: 20px 16px 18px; } .tg-sul-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tg-sul-row li:nth-child(2) { border-right: 0; } .tg-sul-row li:nth-child(-n+2) { border-bottom: 1px solid rgba(238,244,240,.18); } .tg-sul-row i { height: 70px; } }
/* 질환 카드의 한자 표기 */
.tg-han { margin: -4px 0 12px; font-size: 13.5px; letter-spacing: .04em; color: var(--tg-med); }
/* 혀 자체의 변화 — 작은 용어 카드 */
.tg-subhead { margin: 48px 0 6px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--tg-ink); }
.tg-subtxt { margin: 0 0 20px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.tg-gloss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .tg-gloss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-gloss li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: baseline;
  padding: 18px 20px; border-radius: 12px; background: #fff; border: 1px solid var(--tg-hair); }
.tg-gloss b { font-size: 17px; font-weight: 600; color: var(--tg-ink); }
.tg-gloss i { font-style: normal; font-size: 13px; color: var(--tg-med); }
.tg-gloss span { grid-column: 1 / -1; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
/* 변증 표 */
.tg-table-wrap { overflow-x: auto; border: 1px solid var(--tg-hair); border-radius: 12px; background: #fff; }
.tg-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.tg-table thead th { padding: 14px 16px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--tg-med-deep); background: var(--tg-med-soft); white-space: nowrap; }
.tg-table tbody th, .tg-table td { padding: 14px 16px; border-top: 1px solid var(--tg-hair); vertical-align: top; text-align: left; line-height: 1.6; word-break: keep-all; }
.tg-table tbody th { font-size: 15.5px; font-weight: 600; color: var(--tg-ink); white-space: nowrap; }
.tg-table tbody th i { display: block; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--tg-med); letter-spacing: .04em; }
.tg-table td { font-weight: 300; color: var(--tg-ink-2); }
.tg-ans-page .tx h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.tg-ans-page .tx h3 a:hover { color: var(--tg-med); }
/* 혀통증 — 흉살 컴포넌트에 남은 자주색 선·배경을 초록 톤으로 */
.tg-ans-page .pg-note { border-left-color: rgba(19, 122, 82, .4); }
.tg-ans-page .hc-factors { border-top-color: rgba(19, 122, 82, .3); }
.tg-ans-page .proc-card { background: #f4f9f6; border-color: rgba(19, 122, 82, .2); }
.tg-ans-page .proc-hd { border-bottom-color: rgba(19, 122, 82, .22); }
.tg-ans-page #hx-flow .pr-step::before { border-color: rgba(19, 122, 82, .35); }
.tg-ans-page #hx-flow .pr-step::after { background: rgba(19, 122, 82, .3); }
.tg-ans-page #hx-flow .pr-step:hover::before { animation-name: tgPulseGreen; }
@keyframes tgPulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(19, 122, 82, .4); }
  70%  { box-shadow: 0 0 0 14px rgba(19, 122, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(19, 122, 82, 0); }
}
.tg-ans-page #hx-faq summary::after, .tg-ans-page #hx-faq .faq-a::before { border-color: rgba(19, 122, 82, .35); }
.tg-ans-page .hx-alert-flags li { border-color: rgba(19, 122, 82, .3); }
.tg-ans-page .hx-alert-foot { border-top-color: rgba(19, 122, 82, .22); }
.tg-ans-page #hx-dx .proc-card { background: #f4f9f6; }
.tg-ans-page #hx-dx .proc-hd { border-bottom-color: rgba(19, 122, 82, .22); }
.tg-ans-page .hx-alert .hx-alert-foot { border-top-color: rgba(19, 122, 82, .22); }
/* 식사·음주 습관 아이콘 — 고객 지정 PNG (2026-09-21) */
.rx-spec-list li[data-ico="meal"] { --spec-ico: url("/assets/images/icons/rx-meal.png?v=1"); }
/* 배변 상태 아이콘 — 고객 지정 PNG (2026-09-21) */
.rx-spec-list li[data-ico="stool"] { --spec-ico: url("/assets/images/icons/rx-stool.png?v=1"); }
/* 임신·수유 여부 아이콘 — 고객 지정 PNG (2026-09-21) */
.rx-spec-list li[data-ico="pregnant"] { --spec-ico: url("/assets/images/icons/rx-pregnant.png?v=1"); }
/* 배뇨·배변 습관 아이콘 — 고객 지정 PNG (2026-09-21) */
.rx-spec-list li[data-ico="bladder"] { --spec-ico: url("/assets/images/icons/rx-bladder.png?v=1"); }
/* 생활 관리 카드 — 사진이 아직 없는 카드는 글만 자연스럽게 (위 여백 보정) */
.hc-caution.has-pic li:not(:has(.hc-caution-pic)) { padding-top: 28px; justify-content: flex-start; }
/* 호흡기·구강 처방 전 확인 아이콘 — 고객 지정 PNG (2026-09-21) */
.rx-spec-list li[data-ico="cycle"]   { --spec-ico: url("/assets/images/icons/rx-cycle.png?v=1"); }
.rx-spec-list li[data-ico="mic"]     { --spec-ico: url("/assets/images/icons/rx-voice.png?v=1"); }
.rx-spec-list li[data-ico="record"]  { --spec-ico: url("/assets/images/icons/rx-nose.png?v=1"); }
.rx-spec-list li[data-ico="allergy"] { --spec-ico: url("/assets/images/icons/rx-allergy.png?v=1"); }
/* 기력·회복·보약 처방 전 확인 — 피로·수술 아이콘 고객 지정 PNG (2026-09-21) */
.rx-spec-list li[data-ico="battery"] { --spec-ico: url("/assets/images/icons/rx-gloomy.png?v=1"); }
.rx-spec-list li[data-ico="pulse"]   { --spec-ico: url("/assets/images/icons/rx-surgery.png?v=1"); }

/* 준비 중 페이지 안내 (2026-09-21) — 관리자 안내 문구를 빼고 방문자용 한 줄만 */
.pg-ready { display: grid; place-items: center; min-height: 200px; margin: 20px 0 48px; padding: 48px 24px;
  border: 1px solid var(--tg-hair); border-radius: 16px; background: #f6faf8; text-align: center; }
.pg-ready p { margin: 0; font-size: 19px; font-weight: 400; color: var(--tg-ink-2); letter-spacing: -.01em; }

/* ═══ 의료진 소개 (2026-09-21) ═══ */
.dr-page { --dr-line: rgba(19, 122, 82, .16); --tg-beauty: var(--tg-med); --tg-beauty-soft: var(--tg-med-soft); }
.dr-lead { text-align: center; margin-top: 40px; }
.dr-lead .pg-h2, .dr-lead .hx-eyebrow { text-align: center; }
.dr-lead .pg-intro { max-width: 760px; margin: 18px auto 0; text-align: center; }
.dr-lead-keys { list-style: none; margin: 36px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px;
  border-top: 1px solid var(--dr-line); border-bottom: 1px solid var(--dr-line); }
.dr-lead-keys li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 8px; }
.dr-lead-keys li + li { border-left: 1px solid var(--dr-line); }
.dr-lead-keys b { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-med); }
.dr-lead-keys span { font-size: 15px; font-weight: 300; color: var(--tg-ink-2); }

.dr-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 900px) {
  .dr-card { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; }
  .dr-card.is-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .dr-card.is-rev .dr-photo { order: 2; }
}
.dr-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #eef6f2 0%, #dcebe3 100%); box-shadow: 0 18px 40px rgba(19, 45, 39, .10); }
.dr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.dr-photo.is-empty { display: grid; place-items: center; align-content: center; gap: 14px; }
.dr-mono { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: #fff; color: var(--tg-med); font-size: 56px; font-weight: 500; box-shadow: 0 10px 24px rgba(19, 45, 39, .08); }
.dr-photo.is-empty figcaption { font-size: 14px; color: var(--tg-ink-2); font-weight: 300; }
@media (max-width: 899px) { .dr-photo { max-width: 360px; } }

.dr-body { padding-top: 8px; }
.dr-role { display: inline-block; margin: 0 0 10px; padding: 5px 14px; border-radius: 999px; background: var(--tg-med-soft);
  color: var(--tg-med-deep); font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.dr-name { margin: 0 0 28px; font-size: 40px; font-weight: 500; letter-spacing: -.03em; color: var(--tg-ink); }
.dr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--tg-ink); }
.dr-col { padding: 22px 0; border-bottom: 1px solid var(--dr-line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .dr-col { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; } }
.dr-col h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--tg-med-deep); }
.dr-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dr-col li { position: relative; padding-left: 16px; font-size: 16.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.dr-col li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: rgba(19, 122, 82, .35); }
.dr-col li.is-now { font-weight: 500; color: var(--tg-ink); }
.dr-col li.is-now::before { background: var(--tg-med); }
@media (max-width: 560px) { .dr-name { font-size: 32px; margin-bottom: 20px; } .dr-lead-keys b { font-size: 24px; } }

/* ═══ 칼럼 (board/news) — 네이버 블로그 글 카드 (2026-09-22) ═══ */
.col-page { padding-top: 56px; padding-bottom: 96px; }
.col-head { text-align: center; margin-bottom: 40px; }
.col-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--tg-med); }
.col-title { margin: 0; font-size: 38px; font-weight: 500; letter-spacing: -.03em; color: var(--tg-ink); }
.col-desc { margin: 14px auto 0; max-width: 620px; font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.col-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.col-chips button { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(19, 122, 82, .22); background: #fff;
  font: inherit; font-size: 15px; color: var(--tg-ink-2); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.col-chips button:hover { border-color: var(--tg-med); color: var(--tg-med); }
.col-chips button.on { background: var(--tg-med); border-color: var(--tg-med); color: #fff; }
.col-chips button:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 2px; }

.col-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px; }
@media (min-width: 640px)  { .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col-card[hidden] { display: none; }
.col-card a { display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(19, 122, 82, .14); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; }
.col-card a:hover { transform: translateY(-3px); border-color: rgba(19, 122, 82, .35); box-shadow: 0 16px 34px rgba(19, 45, 39, .10); }
.col-card a:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 3px; }
.col-pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef5f1; }
.col-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.col-card a:hover .col-pic img { transform: scale(1.04); }
.col-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; letter-spacing: .3em; color: rgba(19, 122, 82, .45); }
.col-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 22px 24px; }
.col-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.col-meta em { font-style: normal; padding: 4px 11px; border-radius: 999px; background: var(--tg-med-soft); color: var(--tg-med-deep); font-weight: 500; }
.col-meta time { color: var(--tg-mute, #7a857f); }
.col-name { font-size: 18.5px; font-weight: 500; line-height: 1.45; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.col-sum { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.col-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--tg-med); }

.col-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.col-more, .col-blog { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 999px; font: inherit; font-size: 16px; cursor: pointer; text-decoration: none; }
.col-more { background: var(--tg-med); border: 1px solid var(--tg-med); color: #fff; }
.col-more[hidden] { display: none; }
.col-blog { background: #fff; border: 1px solid rgba(19, 122, 82, .35); color: var(--tg-med); }
.col-empty { padding: 60px 20px; text-align: center; color: var(--tg-ink-2); border: 1px solid var(--tg-hair); border-radius: 16px; }
@media (max-width: 560px) { .col-page { padding-top: 36px; } .col-title { font-size: 30px; } .col-name { font-size: 17px; } }
/* 메인 — 최신 칼럼 4건 (2026-09-22) */
.home-col-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; text-align: left; }
.home-col-head .tg-h2, .home-col-head .tg-sub { text-align: left; margin-left: 0; }
.home-col-all { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(19,122,82,.35);
  color: var(--tg-med); font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.home-col-all:hover { background: var(--tg-med); color: #fff; }
@media (min-width: 1024px) { .home-col-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.home-col-grid .col-name { font-size: 17.5px; }
.home-col-grid .col-sum { -webkit-line-clamp: 2; }
/* 칼럼 — 서브 배너 아래로, PC 한 줄 4개 (2026-09-22 요청) */
.col-page { padding-top: 40px; }
@media (min-width: 1200px) { .col-page .col-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; } .col-page .col-name { font-size: 17.5px; } }

/* ═══ 진료안내 (p/guide) — 2026-09-22 ═══ */
.gd-page { --tg-beauty: var(--tg-med); --tg-beauty-soft: var(--tg-med-soft); --gd-line: rgba(19, 122, 82, .16); }
.gd-page > .gd-sec { margin-bottom: 110px; }
.gd-page > .gd-sec:first-child { margin-top: 40px; }
.gd-page > .gd-sec:last-child { margin-bottom: 40px; }
.gd-hd { text-align: center; margin-bottom: 36px; }
.gd-hd .hx-eyebrow, .gd-hd .pg-h2, .gd-hd .pg-h2-sub { text-align: center; margin-left: auto; margin-right: auto; }

.gd-hours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 760px) { .gd-hours { grid-template-columns: 1.25fr 1fr 1fr; } }
.gd-hours li { display: flex; flex-direction: column; gap: 6px; padding: 30px 30px 32px; border-radius: 18px; background: #fff; border: 1px solid var(--gd-line); }
.gd-hours li.is-main { background: linear-gradient(150deg, #14352c 0%, #1f5e4a 100%); border-color: transparent; color: #fff; box-shadow: 0 18px 38px rgba(19, 45, 39, .18); }
.gd-tag { align-self: flex-start; margin-bottom: 8px; padding: 5px 13px; border-radius: 999px; background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 13.5px; font-weight: 500; }
.gd-hours li.is-main .gd-tag { background: rgba(255,255,255,.14); color: #bfe8d5; }
.gd-hours b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.gd-days { font-size: 15.5px; font-weight: 300; color: var(--tg-ink-2); }
.gd-hours li.is-main .gd-days { color: rgba(255,255,255,.75); }
.gd-hours strong { margin-top: 14px; font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-med); font-variant-numeric: tabular-nums; }
.gd-hours li.is-main strong { color: #fff; font-size: 40px; }
.gd-note { margin: 22px 0 0; text-align: center; font-size: 15px; font-weight: 300; color: var(--tg-ink-2); word-break: keep-all; }

.gd-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .gd-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gd-ct { display: flex; align-items: center; gap: 18px; padding: 26px 26px; border-radius: 16px; background: #f4f9f6; border: 1px solid var(--gd-line);
  text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.gd-ct:hover { transform: translateY(-2px); border-color: rgba(19,122,82,.4); box-shadow: 0 14px 30px rgba(19,45,39,.09); }
.gd-ct-ico { flex-shrink: 0; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--tg-med); transition: background-color .2s, color .2s; }
.gd-ct:hover .gd-ct-ico { background: var(--tg-med); color: #fff; }
.gd-ct-ico svg { width: 26px; height: 26px; }
.gd-ct-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-ct-txt em { font-style: normal; font-size: 14px; color: var(--tg-ink-2); }
.gd-ct-txt b { font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--tg-ink); }

.gd-loc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (min-width: 960px) { .gd-loc { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; } }
.gd-info { margin: 0; padding: 8px 28px; border-radius: 18px; background: #fff; border: 1px solid var(--gd-line); }
.gd-info > div { padding: 22px 0; border-bottom: 1px solid var(--gd-line); }
.gd-info > div:last-child { border-bottom: 0; }
.gd-info dt { margin-bottom: 8px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--tg-med); }
.gd-info dd { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.65; color: var(--tg-ink); word-break: keep-all; }
.gd-info dd.gd-dim { font-size: 15.5px; font-weight: 300; color: var(--tg-ink-2); }
.gd-line { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #747f00; color: #fff; font-size: 13px; font-weight: 700; vertical-align: 1px; }
.gd-map { min-height: 460px; border-radius: 18px; overflow: hidden; border: 1px solid var(--gd-line); background: #eef3f0; }
.gd-map .root_daum_roughmap { width: 100% !important; }
@media (max-width: 560px) { .gd-hours strong { font-size: 30px; } .gd-hours li.is-main strong { font-size: 34px; } .gd-page > .gd-sec { margin-bottom: 72px; } .gd-map { min-height: 360px; } }

/* ═══ 진료안내 v2 (2026-09-22 재디자인) — 요일별 시간표 · 큰 전화번호 · 지도 위 정보 카드 ═══ */
.gd2 { --tg-beauty: var(--tg-med); --tg-beauty-soft: var(--tg-med-soft); --gd2-hair: rgba(19, 122, 82, .15); }
.gd2 > .gd2-sec { margin-bottom: 120px; }
.gd2 > .gd2-sec:first-child { margin-top: 40px; }
.gd2 > .gd2-sec:last-of-type { margin-bottom: 40px; }

/* 지금 진료 중 */
.gd2-now { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 10px 18px; border-radius: 999px;
  background: #f1f3f2; color: var(--tg-ink-2); font-size: 15px; }
.gd2-now i { width: 9px; height: 9px; border-radius: 50%; background: #a5aca8; }
.gd2-now.is-open { background: var(--tg-med-soft); color: var(--tg-med-deep); font-weight: 500; }
.gd2-now.is-open i { background: var(--tg-med); box-shadow: 0 0 0 0 rgba(19,122,82,.5); animation: gd2Pulse 1.8s infinite; }
@keyframes gd2Pulse { 0% { box-shadow: 0 0 0 0 rgba(19,122,82,.45); } 70% { box-shadow: 0 0 0 9px rgba(19,122,82,0); } 100% { box-shadow: 0 0 0 0 rgba(19,122,82,0); } }
@media (prefers-reduced-motion: reduce) { .gd2-now.is-open i { animation: none; } }

/* 시간표 */
.gd2-tt { --lab: 72px; --tm: 132px; --gap: 20px; }
.gd2-axis, .gd2-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--tm); column-gap: var(--gap); align-items: center; }
.gd2-axis { position: relative; height: 26px; margin-bottom: 4px; }
.gd2-axis span { position: absolute; top: 0; left: calc(var(--lab) + var(--gap) + (100% - var(--lab) - var(--tm) - var(--gap) * 2) * var(--p));
  transform: translateX(-50%); font-size: 13px; color: var(--tg-mute, #7a857f); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd2-row { padding: 14px 0; border-top: 1px solid var(--gd2-hair); }
.gd2-row:last-of-type { border-bottom: 1px solid var(--gd2-hair); }
.gd2-row b { font-size: 17px; font-weight: 500; color: var(--tg-ink); }
.gd2-row em { font-style: normal; text-align: right; font-size: 17px; font-weight: 500; color: var(--tg-ink); font-variant-numeric: tabular-nums; }
.gd2-track { position: relative; height: 14px; border-radius: 999px; background: #edf2ef; }
.gd2-track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--e) * 100%); border-radius: 999px;
  background: linear-gradient(90deg, #5fb58f 0 63.64%, var(--tg-med) 63.64% 100%); }
.gd2-row.is-short .gd2-track i { background: #5fb58f; }
.gd2-row.is-hol b { font-size: 15.5px; }
.gd2-row.is-today { background: linear-gradient(90deg, rgba(19,122,82,.07), rgba(19,122,82,0)); }
.gd2-row.is-today b::after { content: "오늘"; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 11.5px; font-weight: 500; vertical-align: 2px; }
.gd2-legend { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; color: var(--tg-ink-2); }
.gd2-legend span { width: 22px; height: 8px; border-radius: 999px; background: var(--tg-med); }
@media (max-width: 560px) { .gd2-tt { --lab: 46px; --tm: 104px; --gap: 12px; } .gd2-row b, .gd2-row em { font-size: 15px; } .gd2-row.is-hol b { font-size: 13px; } .gd2-row.is-today b::after { display: none; } }

/* 상담·예약 */
.gd2-tel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lb go" "num go"; align-items: center; gap: 4px 20px;
  padding: 34px 36px; border-radius: 20px; background: linear-gradient(150deg, #14352c 0%, #1f5e4a 100%); color: #fff; text-decoration: none; }
.gd2-tel-lb { grid-area: lb; font-size: 15px; color: rgba(255,255,255,.72); }
.gd2-tel b { grid-area: num; font-size: 46px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gd2-tel-go { grid-area: go; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: #fff; color: var(--tg-med-deep); font-size: 15.5px; font-weight: 500; transition: transform .2s; }
.gd2-tel:hover .gd2-tel-go { transform: translateX(4px); }
.gd2-links { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 640px) { .gd2-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.gd2-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; border-bottom: 1px solid var(--gd2-hair); text-decoration: none; color: var(--tg-ink); }
.gd2-links a span { display: flex; flex-direction: column; gap: 4px; }
.gd2-links em { font-style: normal; font-size: 14px; color: var(--tg-ink-2); }
.gd2-links b { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.gd2-links svg { flex-shrink: 0; color: var(--tg-med); transition: transform .2s; }
.gd2-links a:hover b { color: var(--tg-med); }
.gd2-links a:hover svg { transform: translate(3px, -3px); }
@media (max-width: 560px) { .gd2-tel { grid-template-areas: "lb" "num" "go"; grid-template-columns: minmax(0, 1fr); padding: 26px 24px; gap: 6px; } .gd2-tel b { font-size: 34px; } .gd2-tel-go { justify-self: start; margin-top: 12px; } }

/* 오시는 길 — 지도 위 정보 카드 */
.gd2-loc { position: relative; }
.gd2-map { border-radius: 22px; overflow: hidden; min-height: 560px; background: #eef3f0; }
.gd2-map .root_daum_roughmap { width: 100% !important; }
.gd2-card { background: #fff; border-radius: 20px; padding: 34px 34px 30px; box-shadow: 0 24px 50px rgba(19, 45, 39, .16); }
@media (min-width: 960px) { .gd2-card { position: absolute; top: 36px; left: 36px; width: 360px; z-index: 2; } }
@media (max-width: 959px) { .gd2-card { position: relative; margin: -60px 16px 0; z-index: 2; } .gd2-map { min-height: 420px; } }
.gd2-card .hx-eyebrow { margin-bottom: 8px; }
.gd2-card-h { margin: 0 0 16px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--tg-ink); }
.gd2-addr { margin: 0 0 22px; font-size: 17px; line-height: 1.65; color: var(--tg-ink); word-break: keep-all; }
.gd2-route { list-style: none; margin: 0; padding: 0; position: relative; }
.gd2-route::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; background: var(--gd2-hair); }
.gd2-route li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 32px; font-size: 15.5px; color: var(--tg-ink-2); }
.gd2-route li::before { content: ""; position: absolute; left: 5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--tg-med); }
.gd2-route li:first-child::before { display: none; }
.gd2-route li:first-child { padding-left: 0; }
.gd2-route b { color: var(--tg-ink); font-weight: 600; }
.gd2-line { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #747f00; color: #fff; font-size: 12.5px; font-weight: 700; position: relative; z-index: 1; }
.gd2-park { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--gd2-hair); font-size: 14px; font-weight: 300; color: var(--tg-ink-2); }
/* 진료안내 — 오른쪽 고정 퀵메뉴에 시간·버튼이 가리지 않게 */
/* (10-16 삭제) 진료안내만 퀵메뉴 자리로 오른쪽 100px 비우던 규칙 — 다른 페이지와 좌우 여백을 맞춤 */

/* ═══ 메인 칼럼 v2 (2026-09-22) — 좌측 타이틀 + 우측 캐러셀 (김재영행정사 블로그 섹션과 같은 구조, 초록 톤) ═══ */
.home-col { background: #fff; }
.hc2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 1000px) { .hc2 { grid-template-columns: minmax(0, 1fr) minmax(0, 3.6fr); gap: 48px; } }
.hc2-aside { text-align: center; }
.hc2-aside .col-eyebrow { margin-bottom: 12px; }
.hc2-title { margin: 0 0 14px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.035em; color: var(--tg-ink); word-break: keep-all; }
.hc2-sub { margin: 0 0 26px; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.hc2-more { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border: 1.5px solid var(--tg-med); border-radius: 999px;
  font-size: 16px; font-weight: 500; color: var(--tg-med); text-decoration: none; transition: background .2s, color .2s; }
.hc2-more:hover { background: var(--tg-med); color: #fff; }
.hc2-more span { font-size: 21px; line-height: 1; }
.hc2-count { margin-top: 30px; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tg-ink-2); }
.hc2-count b { font-size: 24px; font-weight: 700; color: var(--tg-ink); }
.hc2-count i { margin: 0 7px; font-style: normal; opacity: .4; }
@media (max-width: 999px) { .hc2-count { display: none; } .hc2-sub br { display: none; } }

.hc2-main { position: relative; min-width: 0; }
.hc2-viewport { overflow: hidden; padding: 12px 0; }
.hc2-track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.5, 0, .2, 1); will-change: transform; }
.hc2-card { flex: 0 0 auto; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(19,122,82,.14); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; }
.hc2-card:hover { transform: translateY(-6px); border-color: var(--tg-med); box-shadow: 0 20px 44px rgba(19, 45, 39, .14); }
.hc2-card:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 3px; }
.hc2-thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(140deg, #14352c, #2f8a68); }
.hc2-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc2-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(10, 30, 24, .25)); }
.hc2-thumb em { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: #14352c; color: #fff; font-style: normal; font-size: 12px; font-weight: 500; }
.hc2-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.hc2-body b { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--tg-ink); word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.hc2-body time { font-size: 13px; color: #9aa6a0; font-variant-numeric: tabular-nums; }

.hc2-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(19,122,82,.2); background: #fff; color: var(--tg-ink); font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(19, 45, 39, .16);
  transition: background .2s, color .2s, opacity .2s; }
.hc2-arrow:hover { background: var(--tg-med); color: #fff; border-color: var(--tg-med); }
.hc2-arrow.is-off { opacity: .3; pointer-events: none; }
.hc2-arrow.prev { left: -18px; }
.hc2-arrow.next { right: -18px; }
@media (max-width: 999px) { .hc2-arrow.prev { left: 2px; } .hc2-arrow.next { right: 2px; } }
.hc2-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.hc2-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(19,122,82,.25); cursor: pointer; transition: background .2s, width .2s; }
.hc2-dots button.on { width: 28px; border-radius: 999px; background: var(--tg-med); }
/* 칼럼 카드 확대 (2026-09-22 요청) — 한 화면 3장, 왼쪽 타이틀 칸을 조금 줄여 카드 폭 확보 */
@media (min-width: 1000px) { .hc2 { grid-template-columns: minmax(0, 1fr) minmax(0, 4.2fr); gap: 40px; } }
.hc2-body b { font-size: 17px; }
.hc2-body { padding: 18px 18px 20px; }
/* 한의원안내 서브 배너 (2026-09-22) */
.pg-hero--about { background-color: #f2efe8; background-image: url("/assets/images/subhero-about.jpg?v=1"); }
.board-page.is-nav { padding-top: 40px; }

/* ═══ 메인 유튜브 영상 (2026-09-22) — 오시는 길 위, 4개 노출 + 더보기 + 채널 바로가기 ═══ */
.home-yt { background: #f5f9f7; }
.yt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.yt-head .tg-h2, .yt-head .tg-sub { text-align: left; margin-left: 0; }
.yt-head .col-eyebrow { margin-bottom: 10px; color: #d6002a; }
.yt-channel { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; background: #fff; border: 1px solid rgba(19,122,82,.22);
  color: var(--tg-ink); font-size: 15.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.yt-channel:hover { border-color: #ff0033; box-shadow: 0 10px 24px rgba(255, 0, 51, .12); }
.yt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 22px; }
@media (min-width: 600px)  { .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .yt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.yt-card[hidden] { display: none; }
.yt-card a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #dfe7e2; box-shadow: 0 10px 24px rgba(19,45,39,.08); }
.yt-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #ff0033; box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: transform .25s, background-color .25s, color .25s; }
.yt-play svg { margin-left: 3px; }
.yt-card a:hover .yt-thumb img { transform: scale(1.05); }
.yt-card a:hover .yt-play { transform: scale(1.08); background: #ff0033; color: #fff; }
.yt-card a:focus-visible .yt-thumb { outline: 2px solid var(--tg-med); outline-offset: 3px; }
.yt-title { font-size: 16.5px; font-weight: 500; line-height: 1.5; color: var(--tg-ink); word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-card a:hover .yt-title { color: var(--tg-med); }
.yt-foot { display: flex; justify-content: center; margin-top: 36px; }
.yt-more { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 999px; border: 1.5px solid var(--tg-med); background: #fff;
  color: var(--tg-med); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.yt-more:hover { background: var(--tg-med); color: #fff; }
.yt-more[hidden] { display: none; }
.yt-more span { font-size: 20px; line-height: 1; }

/* ═══ 혀통증 최종본 (2026-09-22) — 고객 아티팩트 전체 반영. .ta- 접두사 ═══ */
.ta-page .hx-split > .ta-full { grid-column: 1 / -1; min-width: 0; }
.ta-lede { margin: 0 0 16px; font-size: 17px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.ta-lede b { font-weight: 600; color: var(--tg-ink); }
.ta-page .hx-split-hd .tg-han { margin: 10px 0 0; }
.ta-tag { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--tg-med); }
.ta-dot { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ta-dot li { position: relative; padding-left: 16px; font-size: 15.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.ta-dot li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: rgba(19,122,82,.4); }
.ta-page .rx-callout.ta-callout { margin: 28px 0 0; }
.ta-sub { margin: 56px 0 18px; }
.ta-sub-h { margin: 0 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--tg-ink); text-wrap: balance; }
.ta-sub-p { margin: 0 0 16px; max-width: 72ch; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.ta-sub .ta-sub-p { margin-bottom: 0; }
.ta-page .ta-full > .pg-note { margin-top: 16px; }

/* 대표 질환 4 */
.ta-dz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 8px; }
@media (min-width: 820px) { .ta-dz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.ta-dz-card { padding: 30px 30px 32px; border: 1px solid rgba(19,122,82,.18); border-radius: 16px; background: #fff; }
.ta-dz-card h3 { margin: 0 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.ta-dz-card > p:not(.ta-tag):not(.tg-han) { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.ta-dz-card .ta-dot { padding-top: 16px; border-top: 1px dashed rgba(19,122,82,.22); }

/* 부가 증상 9 */
.ta-cond { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .ta-cond { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ta-cond { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ta-cond article { padding: 24px 24px 22px; border-radius: 14px; background: #f4f9f6; }
.ta-cond h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; color: var(--tg-ink); }
.ta-cond dl { margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
.ta-cond dt { font-size: 13px; font-weight: 600; color: var(--tg-med-deep); padding: 3px 8px; border-radius: 6px; background: #fff; align-self: start; }
.ta-cond dd { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.ta-page .tg-table.ta-cmp { min-width: 980px; }
.ta-page .tg-table.ta-cmp td { font-size: 14.5px; }
.ta-page .tg-table.is-narrow { min-width: 0; }

/* 3단 설명 */
.ta-trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
@media (min-width: 820px) { .ta-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ta-trio > div { padding: 26px 26px 24px; border-top: 2px solid var(--tg-med); background: #f4f9f6; border-radius: 0 0 12px 12px; }
.ta-trio h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.ta-trio p:not(.ta-tag) { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.72; color: var(--tg-ink-2); word-break: keep-all; }
.ta-trio.is-num { margin-top: 8px; }

/* 설진기 2단 */
.ta-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 52px; }
@media (min-width: 980px) { .ta-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; } }
.ta-tongue { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ta-tongue li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 16px 12px 12px; border: 1px solid var(--tg-hair); border-radius: 12px; background: #fff; }
.ta-tongue i { display: block; width: 58px; height: 46px; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; }
.ta-tongue b { font-size: 16.5px; font-weight: 600; color: var(--tg-ink); }
.ta-tongue b span { font-size: 13px; font-weight: 400; color: var(--tg-med); letter-spacing: .04em; margin-left: 4px; }
.ta-tongue p { margin: 3px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.ta-page .c-danbaek { background: #ded6c5; } .ta-page .c-danhong { background: #c8707c; }
.ta-page .c-hong { background: #a92533; } .ta-page .c-cheongja { background: #5a6a9b; }
.ta-notice { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 20px 0 0; padding: 16px 20px; border-radius: 12px; background: #fff8ec; border: 1px solid #f0e0bf;
  font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-notice b { flex: none; font-weight: 600; color: #8a5a12; }
@media (min-width: 700px) { .ta-notice { flex-wrap: nowrap; } }

/* 옴니핏 */
.ta-omni { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 56px; align-items: start; }
@media (min-width: 980px) { .ta-omni { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; } }
.ta-omni-hd h3 { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--tg-ink); }
.ta-omni-hd p:not(.ta-tag):not(.tg-han) { margin: 0 0 12px; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.ta-omni .tg-table { min-width: 560px; }

/* 결과지 예시 */
.ta-sheets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 900px) { .ta-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ta-sheet { margin: 0; padding: 26px 26px 24px; border-radius: 16px; background: #fff; border: 1px solid rgba(19,122,82,.2); box-shadow: 0 14px 34px rgba(19,45,39,.06); display: flex; flex-direction: column; gap: 18px; }
.ta-sheet figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--tg-ink); }
.ta-sheet figcaption b { font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.ta-sheet figcaption span { flex: none; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--tg-med-soft); color: var(--tg-med-deep); }
.ta-row-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ta-row-hd span { font-size: 14px; color: var(--tg-ink-2); }
.ta-row-hd b { font-size: 15px; font-weight: 600; color: var(--tg-med-deep); font-variant-numeric: tabular-nums; }
.ta-swatch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ta-swatch li { padding: 16px 4px 6px; border-radius: 8px; font-size: 12.5px; text-align: center; color: #fff; opacity: .35; }
.ta-swatch li.c-danbaek { color: #5b5242; }
.ta-swatch li.is-on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tg-ink); font-weight: 600; }
.ta-bar { position: relative; height: 8px; border-radius: 999px; background: #e7efeb; }
.ta-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--tg-med); }
.ta-bar.is-warm i { background: linear-gradient(90deg, #7fbf9f, #d99a3c); }
.ta-bar-lb { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; color: #7d8a84; }
.ta-bal { display: flex; height: 26px; border-radius: 8px; overflow: hidden; font-size: 12.5px; color: #fff; }
.ta-bal span { display: flex; align-items: center; padding: 0 10px; flex: var(--w) 1 0; }
.ta-bal-a { background: #7fbf9f; } .ta-bal-b { background: #d99a3c; justify-content: flex-end; }
.ta-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ta-pills li { padding: 5px 11px; border-radius: 999px; background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 13.5px; }
.ta-verdict { margin: auto 0 0; padding: 14px 16px; border-radius: 10px; background: #f4f9f6; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-verdict b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--tg-med-deep); }

/* 흐름 */
.ta-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .ta-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ta-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ta-flow > li { position: relative; padding: 22px 20px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.2); }
.ta-flow > li.is-mix { background: #14352c; border-color: transparent; }
.ta-flow > li.is-mix h3, .ta-flow > li.is-mix p { color: #eef4f0; }
.ta-flow > li.is-mix .ta-flow-no { color: #9fdcc2; }
.ta-flow > li.is-mix .ta-pills li { background: rgba(255,255,255,.12); color: #eef4f0; }
.ta-flow-no { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--tg-med); }
.ta-flow h3 { margin: 0 0 12px; font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.ta-flow p { margin: 0 0 12px; font-size: 14.5px; font-weight: 300; }
.ta-flow > li > ul:not(.ta-pills) { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ta-flow > li > ul:not(.ta-pills) li { position: relative; padding-left: 13px; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.ta-flow > li > ul:not(.ta-pills) li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: rgba(19,122,82,.45); }
.ta-loop { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 0; padding: 18px 22px; border-radius: 12px; background: #f4f9f6;
  font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-loop span { flex: none; font-size: 26px; line-height: 1; color: var(--tg-med); }

/* 치료 방법 */
.ta-txnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ta-txnav a { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19,122,82,.25); font-size: 14.5px; color: var(--tg-ink-2); text-decoration: none; }
.ta-txnav a:hover { border-color: var(--tg-med); color: var(--tg-med); text-decoration: none; }
.ta-tx { border-top: 2px solid var(--tg-ink); }
.ta-tx-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 40px 0; border-bottom: 1px solid rgba(19,122,82,.18); scroll-margin-top: calc(var(--header-h, 80px) + 20px); }
@media (min-width: 900px) { .ta-tx-item { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 56px; } }
.ta-tx-item header h3 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--tg-ink); }
.ta-tx-item header h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(19,122,82,.4); }
.ta-tx-item header h3 a:hover { color: var(--tg-med); }
@media (min-width: 900px) { .ta-tx-item header { position: sticky; top: calc(var(--header-h, 80px) + 24px); align-self: start; } }
.ta-tx-item.is-key header .ta-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--tg-med); color: #fff; }
.ta-tx-bd > p { margin: 0 0 14px; font-size: 16.5px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.ta-tx-bd > p b { font-weight: 600; color: var(--tg-ink); }
.ta-tx-bd > .ta-dot { margin-top: 4px; }
.ta-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 22px 0 0; }
@media (min-width: 760px) { .ta-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ta-why > div { padding: 20px 20px 18px; border-radius: 12px; background: #f4f9f6; }
.ta-why h4, .ta-steps h4, .ta-link h4 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; color: var(--tg-ink); }
.ta-why p, .ta-steps p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.68; color: var(--tg-ink-2); word-break: keep-all; }
.ta-notes { margin: 20px 0 0; border-top: 1px solid rgba(19,122,82,.18); }
.ta-notes > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(19,122,82,.12); }
@media (min-width: 640px) { .ta-notes > div { grid-template-columns: 130px minmax(0, 1fr); gap: 18px; } }
.ta-notes dt { font-size: 15px; font-weight: 600; color: var(--tg-med-deep); }
.ta-notes dd { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-notes.is-three { margin-bottom: 18px; }
.ta-link { margin-top: 24px; padding: 24px 24px 10px; border-radius: 14px; border: 1px solid rgba(19,122,82,.2); }
.ta-link h4 span { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--tg-med); }
.ta-link > p { margin: 0 0 6px; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-link dl { margin: 0; }
.ta-link dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--tg-hair); }
@media (min-width: 640px) { .ta-link dl > div { grid-template-columns: 190px minmax(0, 1fr); gap: 14px; } }
.ta-link dt { font-size: 14.5px; font-weight: 600; color: var(--tg-ink); }
.ta-link dd { margin: 0; font-size: 15.5px; font-weight: 400; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) { .ta-link dd { font-size: 14.5px; } }
.ta-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .ta-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ta-steps li { padding: 20px 20px 18px; border-radius: 12px; background: #14352c; }
.ta-steps span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: #9fdcc2; }
.ta-steps h4 { color: #fff; }
.ta-steps p { color: rgba(238,244,240,.78); }
.ta-tx-bd > p.ta-how { margin: 20px 0 0; padding: 18px 20px; border-left: 3px solid var(--tg-med); background: #f4f9f6; border-radius: 0 10px 10px 0; font-size: 15.5px; }
.ta-how b { display: block; margin-bottom: 4px; }

/* 리드 태그 */
.ta-tags { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ta-tags li { padding: 7px 13px; border-radius: 8px; background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 14.5px; font-weight: 500; }

@media (max-width: 560px) {
  .ta-dz-card { padding: 24px 20px 26px; }
  .ta-dz-card h3 { font-size: 21px; }
  .ta-sheet { padding: 20px 16px; }
  .ta-tx-item { padding: 30px 0; }
  .ta-tx-item header h3 { font-size: 22px; }
  .ta-link { padding: 18px 16px 6px; }
  .ta-lede { font-size: 16px; }
}

/* ═══ 고압산소치료 (2026-09-22) — 고객 아티팩트 반영. .hb- 접두사, 공통 .ta- 컴포넌트 재사용 ═══ */
.hb-gauge { margin: 0; padding: 28px 28px 24px; border-radius: 14px; background: #14352c; color: #eef4f0; }
.hb-gauge figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(238,244,240,.18); font-size: 12.5px; letter-spacing: .1em; color: rgba(238,244,240,.7); }
.hb-gauge figcaption em { font-style: normal; color: #9fdcc2; letter-spacing: .04em; }
.hb-gauge-num { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.hb-gauge-num b { font-size: 84px; font-weight: 500; line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.hb-gauge-num span { font-size: 20px; letter-spacing: .08em; color: #9fdcc2; }
.hb-gauge-lb { margin: 6px 0 0; font-size: 14px; color: rgba(238,244,240,.7); }
.hb-gauge-stat { margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hb-gauge-stat > div { padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.07); }
.hb-gauge-stat dt { font-size: 12.5px; color: rgba(238,244,240,.65); }
.hb-gauge-stat dd { margin: 4px 0 0; font-size: 24px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.hb-gauge-stat dd small { margin-left: 4px; font-size: 13px; font-weight: 400; color: #9fdcc2; }
.hb-spec { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(238,244,240,.18); display: grid; gap: 8px; }
.hb-spec > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; font-size: 14.5px; }
.hb-spec dt { color: rgba(238,244,240,.6); }
.hb-spec dd { margin: 0; color: #eef4f0; }
.hb-gauge-note { margin: 16px 0 0; font-size: 12.5px; color: rgba(238,244,240,.5); }

/* 도입 배경 */
.hb-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 44px; align-items: start; }
@media (min-width: 980px) { .hb-why { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; } }
.hb-photo { margin: 0; }
.hb-photo img { display: block; width: 100%; height: auto; border-radius: 16px; }
.hb-photo figcaption { margin-top: 10px; font-size: 13.5px; color: var(--tg-ink-2); }
.hb-why-txt > p:not(.hb-quote) { margin: 0 0 12px; font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.hb-quote { margin: 0 0 22px; font-size: 20px; font-weight: 400; line-height: 1.6; letter-spacing: -.01em; color: var(--tg-ink); word-break: keep-all; }
.hb-quote b { font-weight: 600; color: var(--tg-med-deep); }
.hb-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 22px; }
@media (min-width: 640px) { .hb-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; } }
.hb-pair > div { padding: 20px 20px 18px; border-radius: 12px; background: #f4f9f6; }
.hb-pair h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--tg-ink); }
.hb-pair p:not(.ta-tag) { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.hb-plus { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; background: var(--tg-med); color: #fff; font-size: 20px; }

/* 치료 원리 */
.hb-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 900px) { .hb-bar { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 48px; } }
.hb-bar figure { margin: 0; padding: 18px; border: 1px solid var(--tg-hair); border-radius: 14px; background: #fff; }
.hb-bar img { display: block; width: 100%; height: auto; }
.hb-fig { margin: 28px 0 0; }
.hb-fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--tg-hair); border-radius: 14px; background: #fff; }
.hb-fig-scroll img { display: block; width: 100%; min-width: 760px; height: auto; }
.hb-fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.hb-fig-hint { display: none; margin-bottom: 4px; font-size: 12.5px; color: var(--tg-med); }
@media (max-width: 820px) { .hb-fig-hint { display: block; } }
.hb-mech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; counter-reset: hbm; }
@media (min-width: 760px) { .hb-mech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hb-mech { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hb-mech li { counter-increment: hbm; padding: 22px 20px 20px; border-radius: 12px; background: #f4f9f6; }
.hb-mech li::before { content: "0" counter(hbm); display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--tg-med); }
.hb-mech b { display: block; margin-bottom: 6px; font-size: 16.5px; font-weight: 600; color: var(--tg-ink); }
.hb-mech span { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }

/* 챔버 */
.hb-chambers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 760px) { .hb-chambers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.hb-chambers article { border-radius: 16px; overflow: hidden; background: #f4f9f6; border: 1px solid rgba(19,122,82,.18); }
.hb-chambers figure { margin: 0; aspect-ratio: 8 / 5; overflow: hidden; }
.hb-chambers img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-ch-bd { padding: 22px 26px 26px; }
.hb-ata { margin: 0 0 6px; font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--tg-med); font-variant-numeric: tabular-nums; }
.hb-ata small { font-size: 14px; letter-spacing: .08em; }
.hb-ch-bd h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--tg-ink); }
.hb-ch-bd p:not(.hb-ata) { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.hb-chambers article.is-deep { background: #14352c; border-color: transparent; }
.hb-chambers article.is-deep .hb-ata { color: #9fdcc2; }
.hb-chambers article.is-deep h3 { color: #fff; }
.hb-chambers article.is-deep p:not(.hb-ata) { color: rgba(238,244,240,.78); }

/* 비교표 */
.ta-page .tg-table.hb-cmp { min-width: 720px; }
.ta-page .hb-cmp thead th i { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: var(--tg-med); }
.ta-page .hb-cmp tr.hb-grp th { padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--tg-med-deep); background: #f4f9f6; white-space: normal; }
.ta-page .hb-cmp tbody th { white-space: normal; font-weight: 500; }
.ta-page .hb-cmp td { white-space: nowrap; }
.hb-m { display: inline-block; width: 18px; font-weight: 600; }
.hb-m.is-on { color: var(--tg-med); } .hb-m.is-mid { color: #c48a2a; } .hb-m.is-no { color: #b5bfba; }
.hb-em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: #a9521c; white-space: normal; }
.hb-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; font-size: 13.5px; color: var(--tg-ink-2); }
.hb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hb-legend i { font-style: normal; }
.hb-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 820px) { .hb-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.hb-pick > div { padding: 28px 28px 26px; border-radius: 14px; background: #f4f9f6; }
.hb-pick > div.is-deep { background: #14352c; }
.hb-pick > div.is-deep .ta-tag { color: #9fdcc2; }
.hb-pick h3 { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.hb-pick p:not(.ta-tag) { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.hb-pick > div.is-deep h3 { color: #fff; }
.hb-pick > div.is-deep p:not(.ta-tag) { color: rgba(238,244,240,.8); }
.hb-ask { margin: 18px 0 0; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }

/* 적용 분야 */
.hb-ev { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: #eef1ef; color: #5b6a63; }
.hb-ev.is-yes { background: var(--tg-med-soft); color: var(--tg-med-deep); }
.ta-page .hx-split-bd .hb-legend { margin-top: 4px; }
.hb-use { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .hb-use { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hb-use { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hb-use li { padding: 26px 26px 24px; border-radius: 14px; border: 1px solid rgba(19,122,82,.18); background: #fff; }
.hb-use h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: var(--tg-ink); }
.hb-use h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(19,122,82,.4); }
.hb-use h3 a:hover { color: var(--tg-med); }
.hb-use p:not(.ta-tag) { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }

/* 증상별 상세 아코디언 */
.hb-acc { border-top: 2px solid var(--tg-ink); }
.hb-acc details { border-bottom: 1px solid rgba(19,122,82,.18); }
.hb-acc summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 18px 40px 18px 0; cursor: pointer; list-style: none; }
.hb-acc summary::-webkit-details-marker { display: none; }
.hb-acc summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.hb-acc details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.hb-acc summary b { font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.hb-acc summary span { font-size: 13px; color: var(--tg-med); }
.hb-acc dl { margin: 0; padding: 0 0 22px; display: grid; gap: 14px; }
.hb-acc dl > div { padding: 16px 18px; border-radius: 10px; background: #f4f9f6; }
.hb-acc dt { margin-bottom: 6px; font-size: 14.5px; font-weight: 600; color: var(--tg-med-deep); }
.hb-acc dd { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }

/* 진행 순서 */
.hb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .hb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.hb-steps li { padding: 24px 24px 22px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.2); }
.hb-steps span { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--tg-med); }
.hb-steps h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.hb-steps p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.68; color: var(--tg-ink-2); word-break: keep-all; }

/* 귀 압력 · 안전 */
.ta-trio.hb-ear-txt { margin-top: 8px; }
.ta-trio > div.is-alert { border-top-color: #c9612c; background: #fff8ec; }
.ta-trio > div.is-alert .ta-dot { margin-top: 10px; }
.ta-trio > div.is-alert .ta-dot li::before { background: #c9612c; }
.hb-notes { margin-top: 0; }
.hb-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { .hb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.hb-side .ta-notes { margin-top: 12px; }
.hb-side .pg-note { margin-top: 16px; }
.hb-faq-h { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--tg-med-deep); }
.hb-page .faq-list + .hb-faq-h { margin-top: 32px; }

/* 근거 자료 */
.hb-ref { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tg-ink); }
.hb-ref li { padding: 18px 0; border-bottom: 1px solid rgba(19,122,82,.15); }
.hb-ref .ta-tag { margin-bottom: 4px; }
.hb-ref a { display: inline-block; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--tg-ink); text-decoration: none; border-bottom: 1px solid rgba(19,122,82,.35); word-break: keep-all; }
.hb-ref a:hover { color: var(--tg-med); }
.hb-ref p:not(.ta-tag) { margin: 8px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }

@media (max-width: 560px) {
  .hb-gauge { padding: 22px 18px 20px; }
  .hb-gauge-num b { font-size: 64px; }
  .hb-use li, .hb-pick > div { padding: 22px 18px; }
  .hb-ch-bd { padding: 18px 18px 22px; }
}

/* ═══ 심적환 (2026-09-22) — 소개 블록 응급 안내 + 사진 약재 오브 + 특징 2칸 ═══ */
.fx-intro > .fx-alert-top { grid-column: 1 / -1; max-width: none; width: 100%; margin: 8px 0 0; }
.fx-orb.has-pic { padding: 0; overflow: hidden; }
.fx-orb.has-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-herbs .fx-herb-orbs.is-pic li:first-child .fx-orb { background: #fff; border: 1px solid var(--fx-line); box-shadow: 0 10px 24px rgba(19,45,39,.07); }
.fx-herbs .fx-herb-orbs.is-pic .fx-orb { width: 160px; height: 160px; }
@media (min-width: 760px) { .fx-dose.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 골인캡슐 — 약재 오브 4개 한 줄 (2026-09-22) */
@media (min-width: 640px) { .fx-herbs .fx-herb-orbs.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-left: auto; margin-right: auto; row-gap: 44px; } }
@media (min-width: 1100px) { .fx-herbs .fx-herb-orbs.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; } }
@media (min-width: 640px) and (max-width: 1099px) { .fx-herbs .fx-herb-orbs.is-four li:nth-child(3)::after { content: none; } }
/* 씨알공진단 — 단면 구조 이미지 + 부드러운 안내 박스 (2026-09-22) */
.fx-core { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; max-width: 720px; margin: 36px auto 0; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--fx-line, #e3e9e6); }
@media (min-width: 640px) { .fx-core { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } }
.fx-core img { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 14px; margin: 0 auto; }
.fx-core figcaption { display: grid; gap: 8px; font-size: 15.5px; font-weight: 300; color: var(--tg-ink-2); }
.fx-core figcaption b { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--tg-med); }
.fx-core figcaption span { padding-left: 14px; position: relative; }
.fx-core figcaption span::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-med); }
.fx-alert.is-soft { background: #f4f9f6; border-color: rgba(19,122,82,.25); color: var(--tg-ink-2); }
.fx-alert.is-soft b { color: var(--tg-med-deep); }
/* 을자탕 — 치핵·치열·치루 3종 비교 카드 (2026-09-22) */
.fx-types { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .fx-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.fx-types li { padding: 20px 20px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--fx-line, #e3e9e6); }
.fx-types figure { margin: 0 0 16px; border-radius: 12px; overflow: hidden; background: #fbf7f4; }
.fx-types img { display: block; width: 100%; height: auto; }
.fx-types b { display: block; margin-bottom: 8px; font-size: 20px; font-weight: 600; color: var(--tg-ink); }
.fx-types p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
/* 산후보약 — 제품 사진 대신 인물 사진을 쓰는 상담 대상 블록 (2026-09-22) */
.fx-for-hd .fx-product.is-photo { padding: 0; overflow: hidden; background: transparent; }
.fx-for-hd .fx-product.is-photo img { width: 100%; max-height: none; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 22px; }
/* 메인 유튜브 — 칼럼과 같은 hc2 캐러셀 구조 (2026-09-22). 썸네일 16:9 + 재생 버튼 */
.hc2-yt .col-eyebrow { color: #d6002a; }
.hc2-thumb.is-video { aspect-ratio: 16 / 9; background: #dfe7e2; }
.hc2-thumb.is-video::after { background: linear-gradient(transparent 55%, rgba(10, 30, 24, .32)); }
.hc2-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: #14352c; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .25s, background .25s, color .25s; }
.hc2-play svg { margin-left: 3px; }
.hc2-card:hover .hc2-play { transform: scale(1.08); background: #ff0033; color: #fff; }
.hc2-more-yt { gap: 10px; }
.hc2-more-yt:hover svg rect { fill: #fff; } .hc2-more-yt:hover svg path { fill: #ff0033; }
.hc2-yt .hc2-body { padding: 16px 16px 18px; }
/* 유튜브 썸네일 재생 버튼 → 유튜브 로고 모양(빨간 둥근 사각 + 흰 삼각) (2026-09-22 요청) */
.hc2-play { width: 66px; height: 46px; margin: -23px 0 0 -33px; border-radius: 14px; background: #ff0033; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.hc2-play svg { width: 26px; height: 26px; margin-left: 4px; }
.hc2-card:hover .hc2-play { transform: scale(1.08); background: #e6002e; color: #fff; }

/* ═══ 오시는 길 흰 바탕 + 푸터 진한 색 (2026-09-22 요청) ═══ */
.loc { background: #fff; }
.site-footer { background: var(--tg-deep); border-top: 0; color: rgba(238, 244, 240, .78); }
.site-footer .foot-brand img { filter: brightness(0) invert(1); opacity: .95; }
.site-footer .foot-col h3 { color: #9fdcc2; }
.site-footer .foot-addr, .site-footer .foot-hours dd { color: #eef4f0; }
.site-footer .foot-hours dt, .site-footer .foot-note, .site-footer .foot-biz { color: rgba(238, 244, 240, .62); }
.site-footer .foot-biz .sep { color: rgba(238, 244, 240, .25); }
.site-footer .foot-tel { color: #fff; }
.site-footer .foot-tel:hover { color: #9fdcc2; }
.site-footer .foot-kakao { background: rgba(255,255,255,.1); color: #eef4f0; }
.site-footer .foot-kakao:hover { background: rgba(255,255,255,.18); }
.site-footer .foot-bottom { border-top: 1px solid rgba(238, 244, 240, .14); color: rgba(238, 244, 240, .55); }
.site-footer .foot-bottom a { color: rgba(238, 244, 240, .7); }
.site-footer .foot-bottom a:hover { color: #fff; }
.site-footer .foot-admin { background: transparent; border-color: rgba(238, 244, 240, .3); color: rgba(238, 244, 240, .75); }
.site-footer .foot-admin:hover { background: rgba(255,255,255,.1); border-color: #9fdcc2; color: #fff; }
/* 푸터 상담·예약 전화번호 확대 (2026-09-22 요청) */
.site-footer .foot-tel { font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
@media (max-width: 560px) { .site-footer .foot-tel { font-size: 32px; } }
/* 푸터 상담·예약 — 전화번호 아래 네이버 예약 · 카카오톡 상담 버튼 (2026-09-22 요청) */
.foot-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.foot-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: filter .16s, transform .16s; }
.foot-cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
.foot-cta-btn.is-naver { background: #03c75a; color: #fff; }
.foot-cta-btn.is-kakao { background: #fee500; color: #191919; }
/* 푸터 3열 비율 1.6fr → 1.3fr (2026-09-22 요청) */
@media (min-width: 861px) { .site-footer .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding: 48px 0 36px; } }   /* 860px 이하 2열·1열 반응형(nav.css)은 그대로 */
/* 푸터 진료시간 글자 확대 (2026-09-22 요청) — 15.5/16.5 → 18/20 */
.site-footer .foot-hours { gap: 12px 20px; }
.site-footer .foot-hours dt { font-size: 18px; }
.site-footer .foot-hours dd { font-size: 20px; font-weight: 500; }
.site-footer .foot-note { font-size: 16px; margin-top: 18px; }
/* 푸터 로고 58px → 80px (2026-09-22 요청) */
.site-footer .foot-brand img { height: clamp(60px, 8vw, 80px); }   /* PC 80px, 화면 폭에 비례해 모바일(390)에서 60px 까지 */
/* 푸터 진료시간 행간 12px → 7px (2026-09-22 요청) */
.site-footer .foot-hours { gap: 7px 20px; }
.site-footer .foot-hours dt, .site-footer .foot-hours dd { line-height: 1.4; }
/* 푸터 칼럼 제목(진료시간·상담·예약) 14.5px/700 → 20px/500 (2026-09-22 요청) */
.site-footer .foot-col h3 { font-size: 20px; font-weight: 500; margin-bottom: 18px; }
/* 푸터 야간진료 안내 16px → 18px (2026-09-22 요청) */
.site-footer .foot-note { font-size: 18px; color: rgba(238, 244, 240, .8); }
/* 푸터 글자 — 모바일은 PC 의 약 85% 로 비례 축소 (2026-09-22 요청) */
@media (max-width: 560px) {
  .site-footer .foot-col h3 { font-size: 17px; margin-bottom: 14px; }
  .site-footer .foot-hours dt { font-size: 15.5px; }
  .site-footer .foot-hours dd { font-size: 17px; }
  .site-footer .foot-note { font-size: 15.5px; margin-top: 14px; }
  .site-footer .foot-addr { font-size: 15px; }
  .site-footer .foot-cta-btn { padding: 10px 15px; font-size: 13.5px; }
}
/* 푸터 3열 사이 가는 구분선 (2026-09-22 요청) — PC 에서만, 열 간격은 40px 유지 */
@media (min-width: 861px) {
  .site-footer .foot-grid { gap: 0; }
  .site-footer .foot-col { padding: 0 40px; }
  .site-footer .foot-col:first-child { padding-left: 0; }
  .site-footer .foot-col:last-child { padding-right: 0; }
  .site-footer .foot-col + .foot-col { border-left: 1px solid rgba(238, 244, 240, .16); }
}
/* 푸터 구분선 길이 80% — border 대신 세로 중앙의 가상요소 (2026-09-22 요청) */
@media (min-width: 861px) {
  .site-footer .foot-col { position: relative; }
  .site-footer .foot-col + .foot-col { border-left: 0; }
  .site-footer .foot-col + .foot-col::before { content: ""; position: absolute; left: 0; top: 10%; height: 80%; width: 1px; background: rgba(238, 244, 240, .16); }
}
/* 모바일 푸터 로고 중앙 정렬 (2026-09-22 요청) */
@media (max-width: 560px) { .site-footer .foot-brand img { margin-left: auto; margin-right: auto; } }
/* 푸터 자연스러운 줄바꿈 — 어절 단위 (2026-09-22 요청) */
.site-footer, .site-footer p, .site-footer address, .site-footer dt, .site-footer dd, .site-footer a { word-break: keep-all; overflow-wrap: break-word; }
/* 푸터 구분선 80% → 60% (2026-09-22 요청) */
@media (min-width: 861px) { .site-footer .foot-col + .foot-col::before { top: 20%; height: 60%; } }
/* 오시는 길 박스 — 좌측 패널색(--tg-deep) 테두리 + 네 귀퉁이 둥글게 (2026-09-22 요청) */
.loc-grid { border: 1px solid var(--tg-hair); border-radius: 22px; overflow: hidden; background: #fff; }   /* 진녹색 테두리는 취소 → 사이트 공통 연회색 선 */
.loc-map .root_daum_roughmap, .loc-map .cmap-frame { border-radius: 0; }
@media (max-width: 560px) { .loc-grid { border-radius: 16px; } }
/* 오시는 길 섹션 배경 — 고객 지정 지도 일러스트 (2026-09-22 요청). 흰 바탕 위에 cover 로 깔고 핀은 우측에 오게 */
.loc { background: #f3f5f4; }   /* 오시는 길 바탕 — 연한 그레이 (2026-09-22 요청) */
/* 퀵메뉴 TOP 버튼 — 진한 푸터 위에서도 보이게 흰 바탕 + 진녹 글자 + 그림자 (2026-09-22 요청) */
.qm-top { background: #fff; border-color: rgba(19, 45, 39, .18); color: var(--tg-deep); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.qm-top:hover { background: var(--tg-med); border-color: var(--tg-med); color: #fff; }
/* 메인 유튜브 섹션 — 흰 바탕 + 칼럼 섹션과의 사이에 가는 구분선 (2026-09-22 요청) */
.home-yt { background: #fff; }
/* 칼럼-유튜브 구분선은 넣었다가 취소 (2026-09-22) */
/* 오시는 길 박스 그림자 살짝 진하게 .09 → .13 (2026-09-22 요청) */
.loc-grid { box-shadow: 0 16px 44px rgba(12, 32, 24, .13); }
/* 캐러셀 카드 호버 그림자가 뷰포트(overflow hidden)에 잘리던 문제 — 사방에 여유를 두고 음수 마진으로 자리 보정 (2026-09-22) */
.hc2-viewport { padding: 28px 30px 40px; margin: -16px -30px -28px; }
/* 좌우 여유는 카드 간격(20px)까지만 — 더 넓히면 옆 페이지 카드가 살짝 비친다 (2026-09-22) */
.hc2-viewport { padding: 28px 20px 40px; margin: -16px -20px -28px; }
/* 오시는 길 박스 그림자 한 단계 더 (.13 → .18) (2026-09-22 요청) */
.loc-grid { box-shadow: 0 18px 48px rgba(12, 32, 24, .18); }
/* 캐러셀 카드 간격 20 → 21px (2026-09-22 요청). 뷰포트 좌우 여유도 같은 값 */
.hc2-track { gap: 21px; }
.hc2-viewport { padding-left: 21px; padding-right: 21px; margin-left: -21px; margin-right: -21px; }
/* 뷰포트 좌우 여유를 간격(21)보다 3px 작게 — 소수점 폭 반올림으로 옆 카드 테두리가 1px 비치던 문제 (2026-09-22) */
.hc2-viewport { padding-left: 18px; padding-right: 18px; margin-left: -18px; margin-right: -18px; }
/* 칼럼·유튜브 타이틀 영역 배경 펄스 — 은은한 원형 글로우가 천천히 숨 쉬듯 커졌다 작아진다 (2026-09-22 제안) */
.hc2-aside { position: relative; isolation: isolate; }
.hc2-aside::before, .hc2-aside::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; border-radius: 50%; pointer-events: none;
  width: 320px; height: 320px; margin: -160px 0 0 -160px;
  background: radial-gradient(circle, rgba(19, 122, 82, .16) 0%, rgba(19, 122, 82, .06) 45%, rgba(19, 122, 82, 0) 70%);
  animation: hc2Pulse 4.8s ease-in-out infinite;
}
.hc2-aside::after { width: 460px; height: 460px; margin: -230px 0 0 -230px; opacity: .55; animation-delay: -2.4s; }
.hc2-yt .hc2-aside::before, .hc2-yt .hc2-aside::after {
  background: radial-gradient(circle, rgba(214, 0, 42, .10) 0%, rgba(214, 0, 42, .04) 45%, rgba(214, 0, 42, 0) 70%);
}
@keyframes hc2Pulse { 0%, 100% { transform: scale(.88); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
@media (max-width: 999px) { .hc2-aside::before, .hc2-aside::after { width: 240px; height: 240px; margin: -120px 0 0 -120px; } .hc2-aside::after { width: 340px; height: 340px; margin: -170px 0 0 -170px; } }
@media (prefers-reduced-motion: reduce) { .hc2-aside::before, .hc2-aside::after { animation: none; } }
/* 고압산소 리드 — 압력 게이지 그래픽 + LIVE 표시 (2026-09-22 요청) */
.hb-gauge-arc { display: block; width: 100%; max-width: 360px; height: auto; margin: 10px auto 0; }
.hb-gauge-now { transform-origin: 92.2px 90.2px; animation: hbNow 2.2s ease-in-out infinite; }
@keyframes hbNow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.35); } }
.hb-live { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #9fdcc2; box-shadow: 0 0 0 0 rgba(159,220,194,.6); animation: hbLive 2s ease-out infinite; vertical-align: 1px; }
@keyframes hbLive { 0% { box-shadow: 0 0 0 0 rgba(159,220,194,.6); } 100% { box-shadow: 0 0 0 8px rgba(159,220,194,0); } }
.hb-gauge-num { margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(238,244,240,.14); }
@media (prefers-reduced-motion: reduce) { .hb-gauge-now, .hb-live { animation: none; } }

/* ═══ 혀통증 — 고객 제공 혀 일러스트 반영 (2026-09-22) ═══ */
/* 리드 설질 4색 → 실제 혀 사진 */
.tg-sul-row .tg-sul-pic { display: block; height: 118px; margin-bottom: 12px; overflow: hidden; background: #f6e3e3; }
.tg-sul-row .tg-sul-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
@media (max-width: 560px) { .tg-sul-row .tg-sul-pic { height: 84px; } }
/* 03 설질 색 목록 → 사진 */
.ta-tongue li { grid-template-columns: 64px minmax(0, 1fr); }
.ta-tongue .ta-tongue-pic { display: block; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #f6e3e3; }
.ta-tongue .ta-tongue-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
/* 건강한 혀 · 구역도 */
.ta-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .ta-figs { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; } }
.ta-figs figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid rgba(19,122,82,.18); align-items: center; }
@media (min-width: 640px) { .ta-figs figure { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 22px; } .ta-figs figure:last-child { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.ta-figs img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ta-figs figcaption b { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.ta-figs figcaption p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-figs figcaption ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ta-figs figcaption li { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.ta-figs figcaption li em { display: inline-block; min-width: 40px; margin-right: 6px; font-style: normal; font-weight: 600; color: var(--tg-med-deep); }
/* 몸의 신호 9 */
.ta-signs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .ta-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ta-signs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ta-signs li { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.18); }
.ta-signs img { grid-row: 1 / 3; width: 110px; height: 120px; object-fit: cover; object-position: 50% 60%; border-radius: 10px; display: block; }
.ta-signs b { font-size: 16.5px; font-weight: 600; color: var(--tg-ink); line-height: 1.4; }
.ta-signs b i { display: inline-block; margin-right: 8px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--tg-med); }
.ta-signs p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
/* 변증 유형 갤러리 */
.ta-pat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) { .ta-pat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.ta-pat article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: 16px; background: #f4f9f6; }
.ta-pat header b { font-size: 19px; font-weight: 600; color: var(--tg-ink); }
.ta-pat header i { margin-left: 8px; font-style: normal; font-size: 13px; letter-spacing: .06em; color: var(--tg-med); }
.ta-pat header p { margin: 6px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.ta-pat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ta-pat li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ta-pat li img { width: 100%; aspect-ratio: 1 / 1.03; object-fit: cover; border-radius: 10px; display: block; background: #f6e3e3; }
.ta-pat li span { font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--tg-ink-2); word-break: keep-all; }
/* 진료 과정 — 진맥·설진 사진 */
.ta-exam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.ta-exam figure { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--tg-hair); }
.ta-exam img { display: block; width: 100%; aspect-ratio: 480 / 400; object-fit: cover; }
.ta-exam figcaption { padding: 10px 14px; font-size: 14px; color: var(--tg-ink-2); }
.ta-exam figcaption b { font-weight: 600; color: var(--tg-med-deep); margin-right: 6px; }
/* 생활관리 — 음식 팁 */
.ta-food { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .ta-food { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ta-food li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.18); }
.ta-food img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.ta-food b { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 600; color: var(--tg-ink); }
.ta-food span { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
/* 리드 설질 4색 패널 — 혀끝까지 보이게 정사각 비율로 (2026-09-22 요청) */
.tg-sul-row .tg-sul-pic { height: auto; aspect-ratio: 1 / 1; }
.tg-sul-row .tg-sul-pic img { object-fit: cover; object-position: 50% 50%; }
@media (max-width: 560px) { .tg-sul-row .tg-sul-pic { height: auto; } }
/* 설진 패널 이미지 세로 더 길게 — 1:1 → 4:5 (2026-09-22 요청) */
.tg-sul-row .tg-sul-pic { aspect-ratio: 4 / 5; }
/* 설진 패널 이미지 아래 글자 확대 — 한자 16→19, 한글·설명 13→15 (2026-09-22 요청) */
.tg-sul-row b { font-size: 19px; }
.tg-sul-row span, .tg-sul-row em { font-size: 15px; }
.tg-sul-row li { gap: 4px; padding-bottom: 16px; }
.tg-sul-row b, .tg-sul-row span, .tg-sul-row em { padding: 0 14px; }
@media (max-width: 560px) { .tg-sul-row b { font-size: 17px; } .tg-sul-row span, .tg-sul-row em { font-size: 14px; } }

/* ═══ 혀통증 01 舌疾의 갈래 — 재디자인 (2026-09-22): 이미지·번호·핵심 한 줄로 위계, 세부는 접기 ═══ */
.ta-keychips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ta-keychips li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: #f4f9f6; border: 1px solid rgba(19,122,82,.16); font-size: 13.5px; color: var(--tg-ink-2); }
.ta-keychips b { font-size: 15.5px; font-weight: 600; color: var(--tg-med-deep); }
.ta-sub.is-first { margin-top: 24px; }
.ta-sub-no { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--tg-deep, #14352c); color: #fff; font-size: 14px; font-weight: 700; vertical-align: 3px; }
.ta-sub-p em { font-style: normal; font-weight: 600; color: var(--tg-med-deep); }

/* A. 대표 질환 4 */
.ta-dz2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 820px) { .ta-dz2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.ta-dz2-card { position: relative; overflow: hidden; padding: 26px 26px 22px; border-radius: 18px; background: #fff; border: 1px solid rgba(19,122,82,.18); }
.ta-dz2-no { position: absolute; right: 18px; top: 6px; font-size: 72px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(19,122,82,.07); pointer-events: none; }
.ta-dz2-hd { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 16px; }
.ta-dz2-pic { display: block; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #f6e3e3; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(19,122,82,.18); }
.ta-dz2-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.ta-dz2-hd .ta-tag { margin-bottom: 4px; }
.ta-dz2-hd h3 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.ta-dz2-hd .tg-han { margin: 0; }
.ta-dz2-key { margin: 0 0 10px; padding: 12px 16px; border-radius: 10px; background: #f4f9f6; border-left: 3px solid var(--tg-med); font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.ta-dz2-txt { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.72; color: var(--tg-ink-2); word-break: keep-all; }
.ta-more { margin-top: 12px; border-top: 1px dashed rgba(19,122,82,.22); }
.ta-more summary { list-style: none; cursor: pointer; padding: 12px 0 2px; font-size: 14px; font-weight: 600; color: var(--tg-med); display: flex; align-items: center; gap: 6px; }
.ta-more summary::-webkit-details-marker { display: none; }
.ta-more summary::after { content: "+"; font-size: 17px; line-height: 1; }
.ta-more[open] summary::after { content: "−"; }
.ta-more .ta-dot { margin-top: 8px; }

/* B. 부가 증상 9 — 카드형 아코디언 */
.ta-cond2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .ta-cond2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ta-cond2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.ta-cond2-card { border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.18); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.ta-cond2-card[open] { border-color: var(--tg-med); box-shadow: 0 12px 30px rgba(19,45,39,.10); }
.ta-cond2-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; }
.ta-cond2-card summary::-webkit-details-marker { display: none; }
.ta-cond2-pic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: #f6e3e3; }
.ta-cond2-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.ta-cond2-pic.is-han { background: var(--tg-med-soft); color: var(--tg-med-deep); font-size: 30px; font-weight: 600; }
.ta-cond2-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ta-cond2-t em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--tg-med); }
.ta-cond2-t b { font-size: 17.5px; font-weight: 600; color: var(--tg-ink); line-height: 1.3; }
.ta-cond2-t i { font-style: normal; font-size: 12.5px; color: #7d8a84; letter-spacing: .03em; }
.ta-cond2-t > span { margin-top: 4px; font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--tg-ink-2); word-break: keep-all; }
.ta-cond2-card summary::after { content: "원인 · 치료 보기 +"; display: block; grid-column: 2; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--tg-med); }
.ta-cond2-card[open] summary::after { content: "접기 −"; }
.ta-cond2-card dl { margin: 0; padding: 0 16px 16px; display: grid; gap: 8px; }
.ta-cond2-card dl > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 10px; background: #f4f9f6; }
.ta-cond2-card dt { font-size: 13px; font-weight: 600; color: var(--tg-med-deep); padding-top: 2px; }
.ta-cond2-card dd { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }

/* C. 비교표 접기 */
.ta-tbl { margin-top: 40px; border-radius: 16px; border: 1px solid rgba(19,122,82,.2); background: #fff; }
.ta-tbl > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 20px 24px; }
.ta-tbl > summary::-webkit-details-marker { display: none; }
.ta-tbl > summary b { font-size: 19px; font-weight: 600; color: var(--tg-ink); }
.ta-tbl > summary > span:not(.ta-sub-no) { flex-basis: 100%; padding-left: 40px; font-size: 14px; font-weight: 300; color: var(--tg-ink-2); }
.ta-tbl > summary::after { content: "펼치기 +"; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--tg-med); white-space: nowrap; }
.ta-tbl[open] > summary::after { content: "접기 −"; }
.ta-tbl .tg-table-wrap { margin: 0 16px; border-radius: 12px; }
.ta-tbl .pg-note { margin: 14px 24px 20px; }
@media (max-width: 560px) {
  .ta-dz2-card { padding: 20px 18px 18px; }
  .ta-dz2-hd { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .ta-dz2-pic { width: 72px; height: 72px; }
  .ta-dz2-hd h3 { font-size: 21px; }
  .ta-dz2-no { font-size: 56px; }
  .ta-tbl > summary { padding: 16px 18px; }
  .ta-tbl > summary > span:not(.ta-sub-no) { padding-left: 0; }
  .ta-tbl .tg-table-wrap { margin: 0 10px; }
}
/* 01 舌疾의 갈래 — 리드·칩은 좌측 타이틀 아래, 대표 질환 A 는 우측 칼럼 (2026-09-22 요청) */
.ta-page #tg-type .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #tg-type .hx-split-hd .ta-keychips li { padding: 10px 14px; }
.ta-page #tg-type .hx-split-bd .ta-sub.is-first { margin-top: 0; }
@media (min-width: 900px) and (max-width: 1199px) { .ta-page #tg-type .hx-split-bd .ta-dz2 { grid-template-columns: minmax(0, 1fr); } }
/* A 대표 질환 소제목 설명 — 한 줄로 (2026-09-22 요청) */
.ta-page #tg-type .hx-split-bd .ta-sub.is-first .ta-sub-p { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
@media (max-width: 1099px) { .ta-page #tg-type .hx-split-bd .ta-sub.is-first .ta-sub-p { white-space: normal; } }
/* 대표 질환 카드 우상단 워터마크 번호 제거 (2026-09-22 요청) */
/* .ta-dz2-no 숨김은 취소 — 워터마크 번호 다시 노출 (2026-09-22) */
/* "대표 질환 네 가지" 소제목 — A 배지 제거, 알약형 버튼 스타일 (2026-09-22 요청) */
.ta-page #tg-type .ta-sub.is-first .ta-sub-no { display: none; }
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { display: inline-block; margin-bottom: 12px; padding: 9px 20px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: 0; }
/* 대표 질환 카드 본문 글자 확대 (2026-09-22 요청) — 핵심 16→17.5, 본문 15→16.5, 세부 15.5→16 */
.ta-dz2-key { font-size: 17.5px; }
.ta-dz2-txt { font-size: 16.5px; line-height: 1.75; }
.ta-dz2-card .ta-dot li { font-size: 16px; }
.ta-more summary { font-size: 15px; }
/* A 소제목 줄 — 알약 버튼 좌측, 설명 문구 우측 정렬 한 줄 (2026-09-22 요청) */
.ta-page #tg-type .ta-sub.is-first { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { margin-bottom: 0; }
.ta-page #tg-type .ta-sub.is-first .ta-sub-p { flex: 1 1 auto; text-align: right; margin: 0; }
@media (max-width: 1099px) { .ta-page #tg-type .ta-sub.is-first .ta-sub-p { flex-basis: 100%; text-align: left; } }
/* "대표 질환 네 가지" 알약 글자 확대 15.5 → 18px (2026-09-22 요청) */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { font-size: 18px; padding: 11px 24px; }
/* 대표 질환 설명 문구 — 카드 아래로 이동 (2026-09-22 요청) */
.ta-dz2-foot { margin: 14px 0 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-page #tg-type .ta-sub.is-first { margin-bottom: 14px; }
/* 카드 아래 안내문의 '특징 더 보기' 강조 — 기울임 대신 굵은 녹색 (2026-09-22) */
.ta-dz2-foot em { font-style: normal; font-weight: 600; color: var(--tg-med-deep); }
/* B 소제목도 A 와 같은 알약 버튼, 설명은 카드 아래 (2026-09-22 요청) */
.ta-page #tg-type .ta-sub.is-b { margin: 48px 0 14px; }
.ta-page #tg-type .ta-sub.is-b .ta-sub-h { display: inline-block; margin: 0; padding: 11px 24px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0; }
/* B 구강 증상 9 — 우측 칼럼으로 이동, 한 줄 2장 (2026-09-22 요청) */
.ta-page #tg-type .hx-split-bd .ta-cond2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ta-page #tg-type .hx-split-bd .ta-cond2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.ta-page #tg-type .ta-tbl { margin-top: 8px; }
/* B 구강 증상 카드 글자 확대 (2026-09-22 요청) */
.ta-cond2-t em { font-size: 13px; }
.ta-cond2-t b { font-size: 19px; }
.ta-cond2-t i { font-size: 13.5px; }
.ta-cond2-t > span { font-size: 15.5px; line-height: 1.6; }
.ta-cond2-card summary::after { font-size: 13.5px; }
.ta-cond2-card dt { font-size: 14.5px; }
.ta-cond2-card dd { font-size: 15.5px; line-height: 1.7; }
.ta-cond2-card dl > div { grid-template-columns: 48px minmax(0, 1fr); }
.ta-cond2-card summary { grid-template-columns: 84px minmax(0, 1fr); }
.ta-cond2-pic { width: 84px; height: 84px; }
/* B 카드 이미지 84 → 110px (2026-09-22 요청) */
.ta-cond2-card summary { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
.ta-cond2-pic { width: 110px; height: 110px; border-radius: 14px; }
@media (max-width: 560px) { .ta-cond2-card summary { grid-template-columns: 88px minmax(0, 1fr); } .ta-cond2-pic { width: 88px; height: 88px; } }
/* C 비교표 — C 배지 제거, 제목을 알약 버튼으로 (2026-09-22 요청) */
.ta-tbl > summary .ta-sub-no { display: none; }
.ta-tbl > summary b { display: inline-block; padding: 11px 24px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 18px; font-weight: 600; }
.ta-tbl > summary > span:not(.ta-sub-no) { padding-left: 0; font-size: 15px; }
/* C 비교표 — 우측 칼럼으로 (2026-09-22 요청). 칼럼 폭에 맞춰 표는 가로 스크롤 */
.ta-page #tg-type .hx-split-bd .ta-tbl { margin-top: 28px; }
.ta-page #tg-type .hx-split-bd .tg-table.ta-cmp { min-width: 900px; }
/* 비교표 첫 열 — 혀 썸네일 + 병명 (2026-09-22 요청) */
.ta-page .ta-cmp tbody th { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 190px; }
.ta-cmp-pic { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #f6e3e3; }
.ta-cmp-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.ta-cmp-nm { display: block; white-space: nowrap; }
/* B 구강 증상 — 전체 폭, 한 줄 3장 (2026-09-22 요청) */
.ta-page #tg-type .ta-full .ta-cond2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ta-page #tg-type .ta-full .ta-cond2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ta-page #tg-type .ta-full .ta-cond2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.ta-page #tg-type .ta-full .ta-sub.is-b { margin-top: 24px; }
.ta-page #tg-type .ta-full .ta-tbl { margin-top: 36px; }
.ta-page #tg-type .ta-full .tg-table.ta-cmp { min-width: 980px; }
/* 비교표 — 썸네일 56 → 84px, 글자 14.5 → 16px (2026-09-22 요청) */
.ta-page .ta-cmp tbody th { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; min-width: 230px; font-size: 17px; }
.ta-page .ta-cmp tbody th i { font-size: 13.5px; }
.ta-cmp-pic { width: 84px; height: 84px; border-radius: 12px; }
.ta-page .tg-table.ta-cmp td { font-size: 16px; line-height: 1.65; }
.ta-page .tg-table.ta-cmp thead th { font-size: 15px; }
.ta-page #tg-type .ta-full .tg-table.ta-cmp { min-width: 1100px; }
/* 비교표 요약줄 — 알약 버튼 · 설명 · 펼치기 한 줄 (2026-09-22 요청) */
.ta-tbl > summary { flex-wrap: nowrap; gap: 16px; }
.ta-tbl > summary > span:not(.ta-sub-no) { flex: 1 1 auto; flex-basis: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-tbl > summary b { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 900px) { .ta-tbl > summary { flex-wrap: wrap; } .ta-tbl > summary > span:not(.ta-sub-no) { flex-basis: 100%; white-space: normal; } }
/* 구강 증상 카드 '원인 · 치료 보기' 13.5 → 15.5px (2026-09-22 요청) */
.ta-cond2-card summary::after { font-size: 15.5px; margin-top: 6px; }
/* 구강 증상 카드 — 원인(연한 살구) / 치료(연한 녹색) 배경 구분 (2026-09-22 요청) */
.ta-cond2-card dl > div:nth-child(1) { background: #fdf3ea; }
.ta-cond2-card dl > div:nth-child(1) dt { color: #b0561f; }
.ta-cond2-card dl > div:nth-child(2) { background: #eaf5f0; }
.ta-cond2-card dl > div:nth-child(2) dt { color: var(--tg-med-deep); }
/* '원인 · 치료 보기 +' — 이미지 아래(1열)로 배치 (2026-09-22 요청) */
.ta-cond2-card summary { align-items: start; row-gap: 8px; }
.ta-cond2-card summary .ta-cond2-t { align-self: center; grid-row: 1 / 3; }
.ta-cond2-card summary::after { grid-column: 1; grid-row: 2; margin-top: 0; width: 110px; text-align: center; white-space: normal; line-height: 1.3; font-size: 14px; }
@media (max-width: 560px) { .ta-cond2-card summary::after { width: 88px; font-size: 13px; } }
/* 구강 증상 카드 이미지 110 → 132px (2026-09-22 요청) */
.ta-cond2-card summary { grid-template-columns: 132px minmax(0, 1fr); }
.ta-cond2-pic { width: 132px; height: 132px; }
.ta-cond2-card summary::after { width: 132px; font-size: 14.5px; }
@media (max-width: 560px) { .ta-cond2-card summary { grid-template-columns: 100px minmax(0, 1fr); } .ta-cond2-pic { width: 100px; height: 100px; } .ta-cond2-card summary::after { width: 100px; font-size: 13px; } }
/* 접기/펼치기 버튼 문구 통일 — 16px / 500 (2026-09-22 요청) */
.ta-more summary { font-size: 16px; font-weight: 500; }
.ta-cond2-card summary::after { font-size: 16px; font-weight: 500; }
.ta-tbl > summary::after { font-size: 16px; font-weight: 500; }
@media (max-width: 560px) { .ta-cond2-card summary::after { font-size: 14px; } }
/* '원인 · 치료 보기 +' 붉은색 (2026-09-22 요청) */
.ta-cond2-card summary::after { color: #c9362b; }
/* 비교표 버튼 문구 '펼치기' → '펼쳐 보기' (2026-09-22 요청) */
.ta-tbl > summary::after { content: "펼쳐 보기 +"; }
.ta-tbl[open] > summary::after { content: "접기 −"; }
/* B 알약 버튼 옆으로 가는 구분선 (2026-09-22 요청) */
.ta-page #tg-type .ta-sub.is-b { display: flex; align-items: center; gap: 18px; }
.ta-page #tg-type .ta-sub.is-b::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(19,122,82,.22); }
/* A 알약 버튼 옆 구분선도 동일하게 (2026-09-22 요청) */
.ta-page #tg-type .ta-sub.is-first { justify-content: flex-start; gap: 18px; }
.ta-page #tg-type .ta-sub.is-first::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(19,122,82,.22); }
/* B 설명 문구 — 좌측 타이틀 아래(칩 다음)로 이동 (2026-09-22 요청) */
.ta-page #tg-type .hx-split-hd .ta-lede.is-b-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(19,122,82,.16); font-size: 15.5px; }
.ta-page #tg-type .hx-split-hd .ta-lede.is-b-note em { font-style: normal; font-weight: 600; color: var(--tg-med-deep); }
/* 핵심 3가지 — 박스 대신 체크 리스트 (2026-09-22 요청) */
.ta-page #tg-type .ta-keychips { display: flex; flex-direction: column; gap: 0; margin-top: 18px; border-top: 1px solid rgba(19,122,82,.16); }
.ta-page #tg-type .ta-keychips li { flex-direction: row; align-items: baseline; gap: 10px; padding: 12px 0 12px 30px; border: 0; border-bottom: 1px solid rgba(19,122,82,.16); border-radius: 0; background: transparent; position: relative; font-size: 15px; }
.ta-page #tg-type .ta-keychips li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 16px; height: 16px; border-radius: 50%; background: var(--tg-med); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M4.5 8.2l2.4 2.3 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M4.5 8.2l2.4 2.3 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ta-page #tg-type .ta-keychips b { font-size: 16.5px; min-width: 76px; }
.ta-page #tg-type .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ta-page #tg-type .hx-split-hd .ta-lede.is-b-note { border-top: 0; padding-top: 0; margin-top: 18px; }
/* 체크 아이콘 — data URI 마스크가 CSP 에 막혀 원만 보이던 문제 → CSS 로 체크 표시 (2026-09-22) */
.ta-page #tg-type .ta-keychips li { padding-left: 34px; }
.ta-page #tg-type .ta-keychips li::before { left: 0; top: 14px; width: 20px; height: 20px; -webkit-mask: none; mask: none; background: var(--tg-med); border-radius: 50%; }
.ta-page #tg-type .ta-keychips li::after { content: ""; position: absolute; left: 6px; top: 19px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
/* 원 없이 녹색 V 체크만 (2026-09-22 요청) */
.ta-page #tg-type .ta-keychips li { padding-left: 30px; }
.ta-page #tg-type .ta-keychips li::before { display: none; }
.ta-page #tg-type .ta-keychips li::after { left: 3px; top: 15px; width: 12px; height: 6px; border-left: 2.5px solid var(--tg-med); border-bottom: 2.5px solid var(--tg-med); transform: rotate(-45deg); }

/* 2026-09-22 혀통증 갈래 체크리스트 — 구분선 없이 가는 V 체크만 (레퍼런스 스타일) */
.ta-page #tg-type .ta-keychips { border-top: 0; margin-top: 16px; gap: 2px; }
.ta-page #tg-type .ta-keychips li { border-bottom: 0; padding: 7px 0 7px 30px; font-size: 15.5px; color: var(--tg-ink); }
.ta-page #tg-type .ta-keychips li::after { left: 2px; top: 13px; width: 14px; height: 7px; border-width: 0 0 1.5px 1.5px; opacity: .9; }
.ta-page #tg-type .ta-keychips b { font-size: 16px; font-weight: 500; }
.ta-page #tg-type .ta-lede.is-b-note br { display: block; }
/* 2026-09-22 대표 질환 네 가지 알약 — 진한 녹색으로 구분 (구강 증상 알약은 기존 --tg-med) */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { background: var(--tg-deep, #14352c); }
/* 2026-09-22 구강 증상 · 비교표 알약도 진한 녹색으로 통일 */
.ta-page #tg-type .ta-sub.is-b .ta-sub-h,
.ta-page #tg-type .ta-tbl > summary b { background: var(--tg-deep, #14352c); }
/* 2026-09-22 알약 3종 — 너무 진하다는 피드백, 중간 톤(--tg-deep-line)으로 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h,
.ta-page #tg-type .ta-sub.is-b .ta-sub-h,
.ta-page #tg-type .ta-tbl > summary b { background: var(--tg-deep-line, #2C5546); }
/* 2026-09-22 체크리스트 — .hx-split-hd 하위 padding 규칙(10px 14px)이 이겨서 체크와 텍스트가 붙던 문제 */
.ta-page #tg-type .hx-split-hd .ta-keychips li { padding: 7px 0 7px 32px; }
.ta-page #tg-type .hx-split-hd .ta-keychips li::after { left: 2px; }
/* 2026-09-22 대표 질환 안내 문장 우측 정렬 */
.ta-page #tg-type .ta-dz2-foot { text-align: right; }

/* ═══ 2026-09-22 혀통증 02 변증 섹션 재디자인 — 01(舌疾의 갈래)과 같은 문법: 좌 타이틀+리드+체크리스트 / 우 알약+카드 8 / 하단 비교표 접기 ═══ */
.ta-page #tg-pattern .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #tg-pattern .ta-keychips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-page #tg-pattern .ta-keychips li { position: relative; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; color: var(--tg-ink); }
.ta-page #tg-pattern .ta-keychips li::before { display: none; }
.ta-page #tg-pattern .ta-keychips li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 7px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); opacity: .9; }
.ta-page #tg-pattern .ta-keychips b { min-width: 76px; font-size: 16px; font-weight: 500; color: var(--tg-med-deep); }
.ta-page #tg-pattern .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ta-page #tg-pattern .ta-sub.is-first { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.ta-page #tg-pattern .ta-sub.is-first::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(19,122,82,.22); }
.ta-page #tg-pattern .ta-sub-h { display: inline-block; margin: 0; padding: 11px 24px; border-radius: 999px; background: var(--tg-deep-line, #2C5546); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 900px) and (max-width: 1199px) { .ta-page #tg-pattern .hx-split-bd .tp-grid { grid-template-columns: minmax(0, 1fr); } }
.tp-card { position: relative; overflow: hidden; padding: 22px 22px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(19,122,82,.18); }
.tp-no { position: absolute; right: 16px; top: 4px; font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(19,122,82,.07); pointer-events: none; }
.tp-hd { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; }
.tp-pic { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f6e3e3; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(19,122,82,.18); }
.tp-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.tp-hd h3 { margin: 0 0 2px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.tp-hd .tg-han { margin: 0; }
.tp-key { margin: 0 0 12px; font-size: 15.5px; font-weight: 400; line-height: 1.65; color: var(--tg-ink); word-break: keep-all; }
.tp-rows { margin: 0; display: grid; gap: 6px; }
.tp-rows > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fdf3ea; }
.tp-rows > div:last-child { background: #eaf5f0; }
.tp-rows dt { padding-top: 2px; font-size: 13.5px; font-weight: 600; color: #b0561f; }
.tp-rows > div:last-child dt { color: var(--tg-med-deep); }
.tp-rows dd { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.tp-rows dd b { font-weight: 600; color: var(--tg-ink); }
.ta-page #tg-pattern .ta-full .ta-tbl { margin-top: 36px; }
.ta-page #tg-pattern .ta-tbl > summary b { background: var(--tg-deep-line, #2C5546); }
.ta-page #tg-pattern .ta-full .tg-table.tp-cmp { min-width: 980px; }
.ta-page .tg-table.tp-cmp td { font-size: 16px; line-height: 1.65; }
.ta-page .tg-table.tp-cmp tbody th { font-size: 17px; white-space: nowrap; }
.ta-page .tg-table.tp-cmp tbody th i { font-size: 13.5px; }
.ta-page .tg-table.tp-cmp thead th { font-size: 15px; }
@media (max-width: 560px) {
  .tp-card { padding: 18px 16px 16px; }
  .tp-hd { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .tp-pic { width: 56px; height: 56px; }
  .tp-hd h3 { font-size: 18px; }
  .tp-no { font-size: 50px; }
}
/* 2026-09-22 비교표 설진 소견 — 혀색·설태 색 스와치 */
.ta-sw { display: inline-block; width: 12px; height: 12px; margin: 0 6px 0 0; border-radius: 3px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.08); }
.ta-sw.is-pale { background: #ecd6cb; }
.ta-sw.is-red { background: #b83232; }
.ta-sw.is-white { background: #f1ece2; }
.ta-sw.is-yellow { background: #d6a12f; }
.ta-sw.is-blue { background: #4c5d9c; }
.ta-sw.is-black { background: #3b3b3b; }
.ta-sw.is-thick { background: #d9cfb8; }
/* 2026-09-22 접기 표 안의 주석 — 표(tg-table-wrap, 좌우 16px)와 폭·정렬 맞춤 */
.ta-tbl .pg-note { max-width: none; margin: 14px 16px 20px; text-align: left; }
/* 2026-09-22 비교표 "펼쳐 보기" — 텍스트 → 아웃라인 알약 버튼 */
.ta-tbl > summary::after { display: inline-flex; align-items: center; padding: 9px 18px; border: 1px solid var(--tg-med); border-radius: 999px; background: #fff; color: var(--tg-med); font-size: 15px; font-weight: 500; line-height: 1; transition: background .18s, color .18s; }
.ta-tbl > summary:hover::after { background: var(--tg-med); color: #fff; }
.ta-tbl[open] > summary::after { background: var(--tg-med-soft, #eaf5f0); border-color: rgba(19,122,82,.3); }
.ta-tbl[open] > summary:hover::after { background: var(--tg-med); color: #fff; }
@media (max-width: 560px) { .ta-tbl > summary::after { padding: 8px 14px; font-size: 14px; } }
/* 2026-09-22 변증 카드 본문 폰트 — 01 대표 질환 카드(.ta-dz2)와 동일하게 */
.tp-hd h3 { font-size: 24px; }
.tp-key { font-size: 17.5px; font-weight: 500; line-height: 1.6; }
.tp-rows dt { font-size: 14.5px; }
.tp-rows dd { font-size: 16.5px; line-height: 1.75; }
@media (max-width: 560px) { .tp-hd h3 { font-size: 21px; } }
/* 2026-09-22 변증 카드 워터마크 번호 — 대표 질환 카드(.ta-dz2-no)와 동일 크기·위치 */
.tp-no { right: 18px; top: 6px; font-size: 72px; }
@media (max-width: 560px) { .tp-no { font-size: 56px; } }
/* 2026-09-22 변증 카드 주요 호소 폰트 16.5px */
.tp-key { font-size: 16.5px; font-weight: 500; line-height: 1.6; }
/* 2026-09-22 대표 질환 카드 핵심 문장도 16.5px */
.ta-dz2-key { font-size: 16.5px; }

/* ═══ 2026-09-22 혀통증 자율신경 섹션(#tg-ans) 재디자인 — 01·02와 같은 문법 + 교감/부교감 균형 스트립 ═══ */
.ta-page #tg-ans .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #tg-ans .ta-keychips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-page #tg-ans .ta-keychips li { position: relative; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; color: var(--tg-ink); }
.ta-page #tg-ans .ta-keychips li::before { display: none; }
.ta-page #tg-ans .ta-keychips li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 7px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); opacity: .9; }
.ta-page #tg-ans .ta-keychips b { min-width: 76px; font-size: 16px; font-weight: 500; color: var(--tg-med-deep); }
.ta-page #tg-ans .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ta-page #tg-ans .ta-sub.is-first { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.ta-page #tg-ans .ta-sub.is-first::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(19,122,82,.22); }
.ta-page #tg-ans .ta-sub-h { display: inline-block; margin: 0; padding: 11px 24px; border-radius: 999px; background: var(--tg-deep-line, #2C5546); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) { .ta-page #tg-ans .hx-split-bd .tp-grid { grid-template-columns: minmax(0, 1fr); } }
.an-card { padding: 24px 24px 22px; }
.an-card h3 { margin: 0 0 10px; padding-right: 56px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: var(--tg-ink); word-break: keep-all; }
.an-card p { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.an-balance { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
@media (min-width: 900px) { .an-balance { grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); gap: 0; align-items: stretch; } }
.an-side { padding: 26px 28px 24px; border-radius: 18px; border: 1px solid rgba(19,122,82,.18); background: #eaf5f0; }
.an-side.is-sym { background: #fdf3ea; border-color: rgba(176,86,31,.25); }
.an-side-tag { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--tg-med-deep); }
.an-side.is-sym .an-side-tag { color: #b0561f; }
.an-side b { display: block; margin-bottom: 12px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--tg-ink); word-break: keep-all; }
.an-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.an-side li { position: relative; padding-left: 16px; font-size: 15.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.an-side li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-med); }
.an-side.is-sym li::before { background: #c9612c; }
.an-mid { display: grid; place-items: center; }
.an-mid span { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--tg-deep-line, #2C5546); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(19,122,82,.2); }
@media (max-width: 899px) { .an-mid { padding: 6px 0; } .an-mid span { width: 76px; height: 76px; font-size: 13px; } }
.ta-page #tg-ans .ta-full .rx-callout { margin-top: 28px; }
@media (max-width: 560px) { .an-card { padding: 18px 16px 16px; } .an-card h3 { font-size: 18px; padding-right: 44px; } .an-side { padding: 20px 18px 18px; } }
/* 2026-09-22 자율신경 균형 배지 — 원 확대 + 펄스 링 */
@media (min-width: 900px) { .an-balance { grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr); } }
.an-mid { position: relative; isolation: isolate; }
.an-mid span { position: relative; z-index: 2; width: 120px; height: 120px; font-size: 16px; box-shadow: 0 0 0 7px #fff, 0 0 0 8px rgba(19,122,82,.22), 0 12px 28px rgba(19,45,39,.18); }
.an-mid::before, .an-mid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(19,122,82,.45); z-index: 1; pointer-events: none; animation: anPulse 2.8s ease-out infinite; }
.an-mid::after { animation-delay: 1.4s; }
@keyframes anPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
@media (max-width: 899px) { .an-mid { padding: 22px 0; } .an-mid span { width: 100px; height: 100px; font-size: 15px; } .an-mid::before, .an-mid::after { width: 100px; height: 100px; margin: -50px 0 0 -50px; } }
@media (prefers-reduced-motion: reduce) { .an-mid::before, .an-mid::after { animation: none; opacity: .35; transform: scale(1.25); } }
/* 펄스 링이 좌우 패널 위로 넘치지 않게 — 최대 168px(가운데 칸 폭) */
@keyframes anPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
/* 2026-09-22 자율신경 균형 스트립 — 심박변이(HRV) 파형 일러스트: 교감(들쭉날쭉) vs 부교감(완만) */
.an-side { position: relative; }
.an-art { position: absolute; right: 22px; top: 18px; width: 150px; height: 84px; pointer-events: none; }
.an-art-base { fill: none; stroke: rgba(19,45,39,.12); stroke-width: 1; stroke-dasharray: 3 4; }
.an-art-line { fill: none; stroke: var(--tg-med); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: anDraw 2.6s ease-out .3s forwards; }
.an-art-dot { fill: var(--tg-med); opacity: 0; animation: anDot .4s ease-out 2.6s forwards; }
.an-side.is-sym .an-art-line, .an-side.is-sym .an-art-dot { stroke: #c9612c; fill: #c9612c; }
.an-side.is-sym .an-art-line { fill: none; }
@keyframes anDraw { to { stroke-dashoffset: 0; } }
@keyframes anDot { to { opacity: 1; } }
@media (min-width: 900px) { .an-side { padding-right: 196px; } }
@media (max-width: 899px) { .an-art { width: 110px; height: 62px; right: 16px; top: 14px; } .an-side b { padding-right: 120px; } }
@media (prefers-reduced-motion: reduce) { .an-art-line { animation: none; stroke-dashoffset: 0; } .an-art-dot { animation: none; opacity: 1; } }
/* 2026-09-22 균형 스트립 태그 → 박스 상단 테두리에 걸치는 뱃지 */
.an-side { padding-top: 30px; overflow: visible; }
.an-side-tag { position: absolute; left: 24px; top: 0; transform: translateY(-50%); margin: 0; padding: 7px 16px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; box-shadow: 0 0 0 4px #fff; }
.an-side.is-sym .an-side-tag { background: #c9612c; color: #fff; }
.an-balance { margin-top: 44px; }
@media (max-width: 899px) { .an-balance { gap: 26px; } .an-side-tag { left: 18px; } }
/* 2026-09-22 파형 애니메이션 중간 정지 수정(pathLength 정규화) + 균형 원 축소·컬러 변경 */
.an-art-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: anDraw 2.4s ease-in-out .3s forwards; }
.an-art-dot { animation-delay: 2.5s; }
.an-mid span { width: 104px; height: 104px; font-size: 15px; background: linear-gradient(135deg, #c9612c 0%, #137a52 100%); box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(19,45,39,.16), 0 12px 26px rgba(19,45,39,.16); }
.an-mid::before, .an-mid::after { width: 104px; height: 104px; margin: -52px 0 0 -52px; border-color: rgba(19,45,39,.35); }
@keyframes anPulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.55); opacity: 0; } }
@media (max-width: 899px) { .an-mid span { width: 92px; height: 92px; font-size: 14px; } .an-mid::before, .an-mid::after { width: 92px; height: 92px; margin: -46px 0 0 -46px; } }
/* 2026-09-22 01 舌疾의 갈래 — 좌측 타이틀 칼럼 하단 진찰 사진 */
.ta-page #tg-type .hx-split-hd .ta-hd-pic { margin: 28px 0 0; border-radius: 22px; overflow: hidden; aspect-ratio: 1 / 1; background: #e8eef4; box-shadow: 0 14px 34px rgba(19,45,39,.14); }
.ta-page #tg-type .hx-split-hd .ta-hd-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .ta-page #tg-type .hx-split-hd .ta-hd-pic { aspect-ratio: 4 / 3; margin-top: 22px; } }
/* 2026-09-22 진찰 사진 — 세로를 줄인 원본 비율 그대로(크롭 없음) */
.ta-page #tg-type .hx-split-hd .ta-hd-pic { aspect-ratio: auto; }
.ta-page #tg-type .hx-split-hd .ta-hd-pic img { height: auto; }
@media (max-width: 899px) { .ta-page #tg-type .hx-split-hd .ta-hd-pic { aspect-ratio: auto; } }
/* 2026-09-22 자율신경 균형 원 텍스트 — 두께 500, 연한 골드 */
.an-mid span { font-weight: 500; color: #f6e7b8; letter-spacing: .01em; }
/* 2026-09-22 펄스 링 중심 보정 — 테두리 2px가 폭에 더해져 2px 치우치던 문제: border-box + inset 중앙 정렬 */
.an-mid::before, .an-mid::after { box-sizing: border-box; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transform-origin: 50% 50%; }
/* 2026-09-22 자율신경 균형 원 — 그라데이션 대신 단색(와인, --tg-beauty-deep) + 흰 글자 */
.an-mid span { background: var(--tg-beauty-deep, #82485c); color: #fff; }
.an-mid::before, .an-mid::after { border-color: rgba(130,72,92,.45); }
/* 2026-09-22 자율신경 섹션 콜아웃 가운데 정렬 */
.ta-page #tg-ans .ta-full .rx-callout { text-align: center; }
/* 2026-09-22 자율신경 콜아웃 — 박스 → 알약 형태, 균형 원과 같은 와인 계열 */
.ta-page #tg-ans .ta-full .rx-callout { display: block; max-width: 1040px; margin: 32px auto 0; padding: 18px 40px; border-radius: 999px; background: var(--tg-beauty-soft, #f7eff2); border: 1px solid rgba(130,72,92,.22); color: var(--tg-ink); }
.ta-page #tg-ans .ta-full .rx-callout b { color: var(--tg-beauty-deep, #82485c); }
@media (max-width: 899px) { .ta-page #tg-ans .ta-full .rx-callout { padding: 16px 22px; border-radius: 28px; } }
/* 알약 배경이 녹색으로 남던 문제 — 토큰 대신 고정값 */
.ta-page #tg-ans .ta-full .rx-callout.ta-callout { background: #f7eff2; }
/* 2026-09-22 자율신경 콜아웃 한 줄 — 폭 제한 해제, 내용 폭만큼(fit-content), 넓은 화면에서 줄바꿈 금지 */
.ta-page #tg-ans .ta-full .rx-callout.ta-callout { max-width: none; width: fit-content; margin: 32px auto 0; }
@media (min-width: 1280px) { .ta-page #tg-ans .ta-full .rx-callout.ta-callout { white-space: nowrap; } }

/* ═══ 2026-09-22 혀통증 03 설진기 섹션(#hx-dx) 헤더 재디자인 — 01·02와 같은 문법 + 하위 소제목 알약화 ═══ */
.ta-page #hx-dx .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #hx-dx .ta-keychips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-page #hx-dx .ta-keychips li { position: relative; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; color: var(--tg-ink); }
.ta-page #hx-dx .ta-keychips li::before { display: none; }
.ta-page #hx-dx .ta-keychips li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 7px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); opacity: .9; }
.ta-page #hx-dx .ta-keychips b { min-width: 96px; font-size: 16px; font-weight: 500; color: var(--tg-med-deep); }
.ta-page #hx-dx .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ta-page #hx-dx .ta-sub.is-first { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.ta-page #hx-dx .ta-sub.is-first::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(19,122,82,.22); }
.ta-page #hx-dx .ta-sub-h { display: inline-block; margin: 0; padding: 11px 24px; border-radius: 999px; background: var(--tg-deep-line, #2C5546); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0; white-space: nowrap; text-wrap: initial; }
.dx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) and (max-width: 899px) { .dx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.dx-grid .an-card h3 { font-size: 19px; padding-right: 52px; }
.dx-grid .an-card p { font-size: 15.5px; line-height: 1.7; }
/* 하위 소제목(.ta-sub) — 알약 + 구분선, 설명은 아래 줄 */
.ta-page #hx-dx .ta-full .ta-sub { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 12px; align-items: center; margin: 56px 0 20px; }
.ta-page #hx-dx .ta-full .ta-sub::after { content: ""; grid-row: 1; grid-column: 2; height: 1px; background: rgba(19,122,82,.22); }
.ta-page #hx-dx .ta-full .ta-sub .ta-sub-h { grid-row: 1; grid-column: 1; }
.ta-page #hx-dx .ta-full .ta-sub .ta-sub-p { grid-row: 2; grid-column: 1 / -1; margin: 0; max-width: none; font-size: 16px; }
/* 2단 블록(.ta-two) 소제목도 알약 */
.ta-page #hx-dx .ta-two .ta-sub-h { margin-bottom: 14px; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-sub-h { font-size: 16px; padding: 9px 18px; white-space: normal; } .ta-page #hx-dx .ta-keychips b { min-width: 0; } }
/* 2026-09-22 설질 4유형 스와치 — 담홍설 추가 */
.ta-sw.is-danhong { background: #e59a97; }
.tg-table.is-narrow .ta-sw { vertical-align: -1px; }
/* 2026-09-22 설진기 2단 블록(.ta-two)·촬영 전 안내 → 우측 칼럼으로 이동 */
.ta-page #hx-dx .hx-split-bd .ta-two { margin-top: 40px; gap: 28px; }
@media (min-width: 900px) { .ta-page #hx-dx .hx-split-bd .ta-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ta-page #hx-dx .hx-split-bd .ta-notice { margin-top: 24px; }
/* 2026-09-22 우측 칼럼의 2단 블록 → 한 줄에 하나씩(세로 배치) */
@media (min-width: 900px) { .ta-page #hx-dx .hx-split-bd .ta-two { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.ta-page #hx-dx .hx-split-bd .ta-two .ta-tongue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ta-page #hx-dx .hx-split-bd .ta-two .ta-tongue { grid-template-columns: minmax(0, 1fr); } }
/* 2026-09-22 우측 칼럼 2단 블록 설명문 — 칼럼 폭에 맞게(72ch 제한 해제) */
.ta-page #hx-dx .hx-split-bd .ta-two .ta-sub-p { max-width: none; }
/* 2026-09-22 설질 색이 말해주는 것 — 카드 이미지 확대 (64 → 96px) */
.ta-page #hx-dx .ta-tongue li { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 14px 18px 14px 14px; }
.ta-page #hx-dx .ta-tongue .ta-tongue-pic { width: 96px; height: 96px; border-radius: 14px; }
.ta-page #hx-dx .ta-tongue b { font-size: 18px; }
.ta-page #hx-dx .ta-tongue p { font-size: 15.5px; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-tongue li { grid-template-columns: 80px minmax(0, 1fr); } .ta-page #hx-dx .ta-tongue .ta-tongue-pic { width: 80px; height: 80px; } }
/* 2026-09-22 설질 카드 이미지 더 확대 (96 → 128px) */
.ta-page #hx-dx .ta-tongue li { grid-template-columns: 128px minmax(0, 1fr); gap: 20px; padding: 14px 20px 14px 14px; }
.ta-page #hx-dx .ta-tongue .ta-tongue-pic { width: 128px; height: 128px; border-radius: 16px; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-tongue li { grid-template-columns: 96px minmax(0, 1fr); } .ta-page #hx-dx .ta-tongue .ta-tongue-pic { width: 96px; height: 96px; } }
/* 2026-09-22 설진기 이유 카드 — 상단 사진(4:3, 카드 폭 가득) */
.dx-card { padding-top: 0; }
.dx-pic { margin: 0 -24px 18px; aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f0; }
.dx-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dx-card .tp-no { top: auto; bottom: 8px; }
.dx-card h3 { padding-right: 0; }
@media (max-width: 560px) { .dx-pic { margin: 0 -16px 16px; } }
/* 2026-09-22 알약 소제목 옆 구분선 전부 제거 (식상하다는 피드백) */
.ta-page #tg-type .ta-sub.is-first::after, .ta-page #tg-type .ta-sub.is-b::after,
.ta-page #tg-pattern .ta-sub.is-first::after,
.ta-page #tg-ans .ta-sub.is-first::after,
.ta-page #hx-dx .ta-sub.is-first::after,
.ta-page #hx-dx .ta-full .ta-sub::after { display: none; }
/* 2026-09-22 대표 질환 네 가지 — 알약 해제, 일반 소제목으로 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { display: block; padding: 0; margin: 0; border-radius: 0; background: transparent; color: var(--tg-ink); font-size: 22px; font-weight: 500; letter-spacing: -.02em; white-space: normal; }
.ta-page #tg-type .ta-sub.is-first { margin-bottom: 16px; }
/* 2026-09-22 대표 질환 네 가지 — 형광펜(마커) 밑줄 스타일 소제목 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { display: inline; padding: 0 4px; font-size: 23px; font-weight: 600; line-height: 1.5; background-image: linear-gradient(transparent 62%, rgba(19,122,82,.22) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page #tg-type .ta-sub.is-first { display: block; margin-bottom: 18px; }
/* 2026-09-22 대표 질환 네 가지 — 1번안: 왼쪽 세로 바 + 폰트 확대 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { display: block; padding: 2px 0 2px 16px; border-left: 4px solid var(--tg-med); background: none; font-size: 26px; font-weight: 600; line-height: 1.3; }
/* 2026-09-22 대표 질환 네 가지 — 형광펜 마커로 복귀 (폰트 26px 유지) */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { display: inline; padding: 0 4px; border-left: 0; font-size: 26px; font-weight: 600; line-height: 1.5; background-image: linear-gradient(transparent 62%, rgba(19,122,82,.22) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 2026-09-22 마커 컬러 — 녹색 → 형광 노랑 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(250, 216, 78, .6) 62%); }
/* 2026-09-22 대표 질환 네 가지 폰트 26 → 30px */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h { font-size: 30px; }
@media (max-width: 560px) { .ta-page #tg-type .ta-sub.is-first .ta-sub-h { font-size: 24px; } }
/* 2026-09-22 구강 증상 소제목 — 알약 → 형광펜 마커, 대표 질환과 동일 (30px/600) */
.ta-page #tg-type .ta-sub.is-b { display: block; }
.ta-page #tg-type .ta-sub.is-b .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 30px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(250, 216, 78, .6) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 560px) { .ta-page #tg-type .ta-sub.is-b .ta-sub-h { font-size: 24px; } }
/* 2026-09-22 마커 소제목 2종 — 28px / 500 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h, .ta-page #tg-type .ta-sub.is-b .ta-sub-h { font-size: 28px; font-weight: 500; }
@media (max-width: 560px) { .ta-page #tg-type .ta-sub.is-first .ta-sub-h, .ta-page #tg-type .ta-sub.is-b .ta-sub-h { font-size: 23px; } }
/* 2026-09-22 변증 여덟 가지 소제목 — 알약 → 형광펜 마커 28px/500 */
.ta-page #tg-pattern .ta-sub.is-first { display: block; margin-bottom: 18px; }
.ta-page #tg-pattern .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(250, 216, 78, .6) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 560px) { .ta-page #tg-pattern .ta-sub-h { font-size: 23px; } }
/* 2026-09-22 마커 컬러 — 노랑 → 분홍 (마커 소제목 3종 공통) */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h, .ta-page #tg-type .ta-sub.is-b .ta-sub-h, .ta-page #tg-pattern .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(249, 168, 201, .55) 62%); }
/* 2026-09-22 자율신경 영향 네 가지 소제목 — 알약 → 분홍 마커 28px/500 */
.ta-page #tg-ans .ta-sub.is-first { display: block; margin-bottom: 18px; }
.ta-page #tg-ans .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(249, 168, 201, .55) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 560px) { .ta-page #tg-ans .ta-sub-h { font-size: 23px; } }
/* 2026-09-22 설진기 섹션 — 세 가지 이유 / 읽어내는 것 / 설질 색 소제목 → 분홍 마커 28px/500 */
.ta-page #hx-dx .ta-sub.is-first { display: block; margin-bottom: 18px; }
.ta-page #hx-dx .ta-sub.is-first .ta-sub-h, .ta-page #hx-dx .ta-two .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(249, 168, 201, .55) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page #hx-dx .ta-two > div > .ta-sub-h + .ta-sub-p { margin-top: 14px; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-sub.is-first .ta-sub-h, .ta-page #hx-dx .ta-two .ta-sub-h { font-size: 23px; padding: 0 4px; } }
/* 2026-09-22 마커 컬러 더 연하게 — 분홍 55% → 38% (마커 소제목 7종 공통) */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h, .ta-page #tg-type .ta-sub.is-b .ta-sub-h, .ta-page #tg-pattern .ta-sub-h, .ta-page #tg-ans .ta-sub-h,
.ta-page #hx-dx .ta-sub.is-first .ta-sub-h, .ta-page #hx-dx .ta-two .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(249, 168, 201, .38) 62%); }
/* 2026-09-22 마커 소제목 7종 — 두께 500 → 400 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h, .ta-page #tg-type .ta-sub.is-b .ta-sub-h, .ta-page #tg-pattern .ta-sub-h, .ta-page #tg-ans .ta-sub-h,
.ta-page #hx-dx .ta-sub.is-first .ta-sub-h, .ta-page #hx-dx .ta-two .ta-sub-h { font-weight: 400; }
/* 2026-09-22 설진기 장치 설명문 → 좌측 칼럼(체크리스트 아래) */
.ta-page #hx-dx .hx-split-hd .ta-lede.is-b-note { margin-top: 20px; font-size: 15.5px; }
/* 2026-09-22 설진기 분석 표 — 비교표(.ta-cmp)와 같은 폰트 크기 */
.ta-page #hx-dx .ta-two .tg-table td { font-size: 16px; line-height: 1.65; }
.ta-page #hx-dx .ta-two .tg-table tbody th { font-size: 17px; }
.ta-page #hx-dx .ta-two .tg-table tbody th i { font-size: 13.5px; }
.ta-page #hx-dx .ta-two .tg-table thead th { font-size: 15px; }
/* 2026-09-22 "혀의 어디를, 무엇을 보나" — 알약 → 분홍 마커 28px/400 */
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type { display: block; }
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(249, 168, 201, .38) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-p { margin-top: 14px; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-h { font-size: 23px; padding: 0 4px; } }
/* 2026-09-22 마커 소제목이 인라인이라 아래 블록과 붙던 문제 — 다음 블록에 위 여백 */
.ta-page #hx-dx .ta-two > div > .ta-sub-h + .tg-table-wrap,
.ta-page #hx-dx .ta-two > div > .ta-sub-h + .ta-sub-p,
.ta-page #hx-dx .ta-two > div > .ta-sub-h + .ta-tongue { margin-top: 18px; }
.ta-page #hx-dx .ta-two > div > .ta-sub-p + .ta-tongue { margin-top: 16px; }
/* 타이틀-표 간격 조금 더 (18 → 24px) */
.ta-page #hx-dx .ta-two > div > .ta-sub-h + .tg-table-wrap,
.ta-page #hx-dx .ta-two > div > .ta-sub-h + .ta-sub-p,
.ta-page #hx-dx .ta-two > div > .ta-sub-h + .ta-tongue { margin-top: 24px; }
/* 2026-09-22 섹션별 마커 컬러 — 01 분홍 / 02 민트 / 자율신경 살구 / 03 하늘 */
.ta-page #tg-type .ta-sub.is-first .ta-sub-h, .ta-page #tg-type .ta-sub.is-b .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(249, 168, 201, .38) 62%); }
.ta-page #tg-pattern .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(110, 205, 160, .38) 62%); }
.ta-page #tg-ans .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(250, 178, 120, .40) 62%); }
.ta-page #hx-dx .ta-sub.is-first .ta-sub-h, .ta-page #hx-dx .ta-two .ta-sub-h, .ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140, 190, 245, .40) 62%); }
/* 2026-09-22 촬영 전 안내 → 좌측 칼럼 (장치 설명문 아래) */
.ta-page #hx-dx .hx-split-hd .ta-notice { margin-top: 22px; }
/* 2026-09-22 자율신경 균형 스트립 → 우측 칼럼, 세로 배치(교감 → 원 → 부교감) */
.ta-page #tg-ans .hx-split-bd .an-balance { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 44px; }
.ta-page #tg-ans .hx-split-bd .an-mid { padding: 26px 0; }
.ta-page #tg-ans .hx-split-bd .an-side { padding-right: 196px; }
@media (max-width: 899px) { .ta-page #tg-ans .hx-split-bd .an-side { padding-right: 28px; } }
/* 2026-09-22 자율신경 콜아웃 → 우측 칼럼 (칼럼 폭, 줄바꿈 허용) */
.ta-page #tg-ans .hx-split-bd .rx-callout.ta-callout { display: block; width: auto; max-width: none; margin: 28px 0 0; padding: 18px 36px; border-radius: 999px; background: #f7eff2; border: 1px solid rgba(130,72,92,.22); color: var(--tg-ink); text-align: center; white-space: normal; }
.ta-page #tg-ans .hx-split-bd .rx-callout.ta-callout b { color: var(--tg-beauty-deep, #82485c); }
@media (max-width: 899px) { .ta-page #tg-ans .hx-split-bd .rx-callout.ta-callout { padding: 16px 22px; border-radius: 28px; } }
/* 2026-09-22 균형 스트립 — 우측 칼럼 안에서 원래 3단(교감 | 원 | 부교감) 구조로, 파형은 내용 아래 */
@media (min-width: 900px) { .ta-page #tg-ans .hx-split-bd .an-balance { grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); gap: 0; } }
.ta-page #tg-ans .hx-split-bd .an-mid { padding: 0; }
.ta-page #tg-ans .hx-split-bd .an-side { padding: 30px 26px 22px; }
.ta-page #tg-ans .hx-split-bd .an-side .an-art { position: static; display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 160 / 90; margin: 14px auto 0; }
.ta-page #tg-ans .hx-split-bd .an-side b { padding-right: 0; }
@media (max-width: 899px) { .ta-page #tg-ans .hx-split-bd .an-mid { padding: 6px 0; } }
/* 파형이 DOM상 제목 앞에 있어 위에 그려지던 문제 — flex order 로 리스트 아래로 */
.ta-page #tg-ans .hx-split-bd .an-side { display: flex; flex-direction: column; }
.ta-page #tg-ans .hx-split-bd .an-side .an-art { order: 10; max-width: 220px; margin: 18px auto 0; }
/* 2026-09-22 자율신경 섹션 세로 간격 — 01 섹션(카드 → 비교표 36px)과 동일하게 */
.ta-page #tg-ans .hx-split-bd .an-balance { margin-top: 49px; } /* 뱃지가 13px 위로 걸치므로 눈에 보이는 간격 36px */
.ta-page #tg-ans .hx-split-bd .rx-callout.ta-callout { margin-top: 36px; }
/* 2026-09-22 "혀의 어디를, 무엇을 보나" + 혀 그림 2장 → 우측 칼럼 (세로 1열) */
.ta-page #hx-dx .hx-split-bd .ta-sub.is-zones { display: block; margin: 52px 0 20px; }
.ta-page #hx-dx .hx-split-bd .ta-sub.is-zones .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(140, 190, 245, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page #hx-dx .hx-split-bd .ta-sub.is-zones .ta-sub-p { margin: 14px 0 0; max-width: none; font-size: 16px; }
.ta-page #hx-dx .hx-split-bd .ta-figs { grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd .ta-sub.is-zones .ta-sub-h { font-size: 23px; } }
/* 풀폭 첫 소제목(이제 "혀로 보는 몸의 신호")은 다시 알약으로 */
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type { display: grid; }
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-h { display: inline-block; padding: 11px 24px; border-radius: 999px; background: var(--tg-deep-line, #2C5546); background-image: none; color: #fff; font-size: 18px; font-weight: 600; line-height: normal; letter-spacing: 0; white-space: nowrap; }
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-p { margin-top: 0; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-h { font-size: 16px; padding: 9px 18px; white-space: normal; } }
/* 2026-09-22 혀 그림 2장 — 우측 칼럼에서 한 줄에 2개, 카드 안은 이미지 위·설명 아래 */
@media (min-width: 640px) { .ta-page #hx-dx .hx-split-bd .ta-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.ta-page #hx-dx .hx-split-bd .ta-figs figure { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
.ta-page #hx-dx .hx-split-bd .ta-figs img { width: 100%; max-width: 320px; margin: 0 auto; }
/* 두 그림 높이 통일(세로형/가로형 섞임) — 높이 260px, 비율 유지, 가운데 */
.ta-page #hx-dx .hx-split-bd .ta-figs img { width: auto; max-width: 100%; height: 260px; object-fit: contain; margin: 0 auto; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd .ta-figs img { height: 220px; } }
/* 2026-09-22 설진으로 읽는 변증 유형 — 접기(펼쳐 보기) 처리, 비교표와 같은 .ta-tbl 스타일 */
.ta-page #hx-dx .ta-full .ta-tbl.ta-pat-tbl { margin-top: 56px; }
.ta-page #hx-dx .ta-full .ta-tbl.ta-pat-tbl > summary b { background: var(--tg-deep-line, #2C5546); }
.ta-page #hx-dx .ta-full .ta-tbl.ta-pat-tbl > summary > span { font-size: 15.5px; }
.ta-page #hx-dx .ta-full .ta-tbl.ta-pat-tbl .ta-pat { margin: 0 16px; }
.ta-page #hx-dx .ta-full .ta-tbl.ta-pat-tbl .pg-note { margin: 14px 16px 20px; max-width: none; text-align: left; }
/* 2026-09-22 혀 그림 2장 이미지 확대 (높이 260 → 340px) */
.ta-page #hx-dx .hx-split-bd .ta-figs img { height: 340px; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd .ta-figs img { height: 260px; } }
/* 2026-09-22 설질 4종 카드 제목 스와치 */
.ta-page #hx-dx .ta-tongue b .ta-sw { width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; border-radius: 4px; }
/* 2026-09-22 "혀로 보는 몸의 신호 아홉 가지" — 알약 → 하늘 마커 28px/400 */
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type { display: block; }
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(140, 190, 245, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-p { margin-top: 14px; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-full > div.ta-sub:first-of-type .ta-sub-h { font-size: 23px; padding: 0 4px; } }
/* 2026-09-22 혀로 보는 몸의 신호 아홉 가지 — 한 줄 4개, 사진 위·글 아래, 번호는 워터마크, 폰트는 다른 카드(.an-card)와 동일 */
@media (min-width: 1100px) { .ta-page #hx-dx .ta-signs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.ta-page #hx-dx .ta-signs li { position: relative; overflow: hidden; display: block; padding: 0 22px 20px; border-radius: 18px; }
.ta-page #hx-dx .ta-signs img { width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 4 / 3; margin: 0 -22px 16px; border-radius: 0; object-position: 50% 58%; }
.ta-page #hx-dx .ta-signs b { display: block; padding-right: 56px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; margin-bottom: 10px; word-break: keep-all; }
.ta-page #hx-dx .ta-signs b i { position: absolute; right: 18px; bottom: 8px; margin: 0; font-size: 72px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(19,122,82,.07); pointer-events: none; }
.ta-page #hx-dx .ta-signs p { font-size: 16.5px; font-weight: 300; line-height: 1.75; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-signs li { padding: 0 16px 16px; } .ta-page #hx-dx .ta-signs img { width: calc(100% + 32px); margin: 0 -16px 14px; } .ta-page #hx-dx .ta-signs b { font-size: 18px; padding-right: 44px; } .ta-page #hx-dx .ta-signs b i { font-size: 56px; } }
/* 2026-09-22 아홉 가지 카드 — 이전(3열 · 작은 사진 좌측) 레이아웃으로 복귀 */
@media (min-width: 1100px) { .ta-page #hx-dx .ta-signs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ta-page #hx-dx .ta-signs li { position: static; overflow: visible; display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; padding: 14px; border-radius: 14px; }
.ta-page #hx-dx .ta-signs img { grid-row: 1 / 3; width: 110px; max-width: 110px; height: 120px; aspect-ratio: auto; margin: 0; border-radius: 10px; object-fit: cover; object-position: 50% 60%; }
.ta-page #hx-dx .ta-signs b { display: block; padding-right: 0; margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.ta-page #hx-dx .ta-signs b i { position: static; display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: inherit; color: var(--tg-med); pointer-events: auto; }
.ta-page #hx-dx .ta-signs p { font-size: 14px; font-weight: 300; line-height: 1.6; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-signs li { padding: 14px; } .ta-page #hx-dx .ta-signs img { width: 110px; margin: 0; } .ta-page #hx-dx .ta-signs b { font-size: 16.5px; padding-right: 0; } .ta-page #hx-dx .ta-signs b i { font-size: 12px; } }
/* 2026-09-22 우측 칼럼 카드 → 아래 풀폭 블록 간격 통일(36px): 그리드 row-gap(60) + margin 이 겹쳐 96px 이던 문제 */
@media (min-width: 900px) { .ta-page #tg-pattern.hx-split, .ta-page #hx-dx.hx-split { row-gap: 36px; } }
.ta-page #tg-pattern .ta-full .ta-tbl { margin-top: 0; }
.ta-page #tg-pattern .ta-full .ta-trio { margin-top: 36px; }
.ta-page #hx-dx .ta-full > div.ta-sub:first-of-type { margin-top: 0; }
@media (max-width: 899px) { .ta-page #tg-pattern .ta-full .ta-tbl { margin-top: 10px; } .ta-page #hx-dx .ta-full > div.ta-sub:first-of-type { margin-top: 10px; } }
/* 2026-09-22 아홉 가지 카드 → 변증 유형 접기 바 간격 36px 통일 */
.ta-page #hx-dx .ta-full .ta-tbl.ta-pat-tbl { margin-top: 36px; }

/* ═══ 2026-09-22 옴니핏 자율신경 검사 블록 재디자인 — 좌 타이틀+리드+체크 / 우 마커 소제목+카드 4+안내 ═══ */
.ta-page #hx-dx .ta-omni.om-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 0; padding-top: 56px; border-top: 1px solid rgba(19,122,82,.14); align-items: start; }
@media (min-width: 900px) { .ta-page #hx-dx .ta-omni.om-split { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: 52px; } }
.ta-page #hx-dx .om-hd .hx-eyebrow { margin-bottom: 10px; }
.ta-page #hx-dx .om-title { margin: 0 0 6px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--tg-ink); }
.ta-page #hx-dx .om-hd .tg-han { margin: 0; }
.ta-page #hx-dx .om-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #hx-dx .om-hd .ta-lede.is-b-note { margin-top: 20px; font-size: 15.5px; }
.ta-page #hx-dx .om-bd .ta-sub.is-first { margin-bottom: 18px; }
.ta-page #hx-dx .om-card h3 { font-size: 20px; padding-right: 56px; }
.ta-page #hx-dx .om-card p { margin-bottom: 12px; font-size: 16.5px; }
.ta-page #hx-dx .om-card .tp-rows > div { background: #eaf5f0; }
.ta-page #hx-dx .om-card .tp-rows dt { color: var(--tg-med-deep); }
.ta-page #hx-dx .om-bd .ta-notice { margin-top: 24px; }
@media (max-width: 560px) { .ta-page #hx-dx .om-title { font-size: 25px; } .ta-page #hx-dx .ta-omni.om-split { padding-top: 40px; } }
/* 2026-09-22 검사 결과지 블록 → 옴니핏 우측 칼럼, 타이틀 하늘 마커 */
.ta-page #hx-dx .om-bd .ta-sub:not(.is-first) { display: block; margin: 48px 0 18px; }
.ta-page #hx-dx .om-bd .ta-sub:not(.is-first) .ta-sub-h { display: inline; padding: 0 4px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; white-space: normal; background-image: linear-gradient(transparent 62%, rgba(140, 190, 245, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page #hx-dx .om-bd .ta-sheets { margin-top: 0; }
.ta-page #hx-dx .om-bd .pg-note { max-width: none; margin-top: 16px; }
@media (max-width: 560px) { .ta-page #hx-dx .om-bd .ta-sub:not(.is-first) .ta-sub-h { font-size: 23px; } }
/* 2026-09-22 옴니핏 카드 아이콘 (저울=균형 / 게이지=스트레스 / 배터리=회복력 / 뇌파=뇌 활성도) */
.om-ico { display: grid; place-items: center; width: 46px; height: 46px; margin: 4px 0 14px; border-radius: 13px; background: #eaf5f0; color: var(--tg-med); }
.om-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.om-ico svg circle { fill: currentColor; stroke: none; }
/* 2026-09-22 옴니핏 카드 아이콘 — 사이트 공용 PNG 아이콘 세트(rx-*)로 교체 */
.om-ico .fx-band-img { width: 28px; height: 28px; }
/* 2026-09-22 옴니핏 카드 아이콘 확대 (박스 46 → 64px, 아이콘 28 → 42px) */
.om-ico { width: 64px; height: 64px; border-radius: 16px; margin: 4px 0 16px; }
.om-ico .fx-band-img { width: 42px; height: 42px; }
/* 2026-09-22 옴니핏 카드 — 아이콘 옆에 타이틀 */
.om-hd2 { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; padding-right: 56px; }
.om-hd2 .om-ico { flex: 0 0 auto; margin: 0; }
.ta-page #hx-dx .om-card .om-hd2 h3 { margin: 0; padding-right: 0; }

/* ═══ 2026-09-23 고객 요청 — 진단기기 임팩트 밴드 + 설진기 실사 마퀴 + 옴니핏 결과서 ═══ */
.dx-dev { margin-top: 56px; padding: 44px 40px 40px; border-radius: 26px; background: var(--tg-deep, #16332A); color: #fff; }
.dx-dev-hd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; margin-bottom: 30px; }
@media (min-width: 900px) { .dx-dev-hd { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; } }
.dx-dev-hd .hx-eyebrow { color: rgba(255,255,255,.62); margin-bottom: 10px; }
.dx-dev-hd h3 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.28; color: #fff; }
.dx-dev-hd > p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.78); word-break: keep-all; }
.dx-dev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .dx-dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.dx-dev-card { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; background: #fff; color: var(--tg-ink); overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.dx-dev-pic { margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; border-bottom: 1px solid var(--tg-hair); padding: 18px; }
.dx-dev-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dx-dev-pic.is-omni { background: #f4f8fc; }
.dx-dev-body { padding: 24px 26px 26px; }
.dx-dev-tag { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--tg-med); }
.dx-dev-body h4 { margin: 0 0 10px; font-size: 23px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.dx-dev-body > p { margin: 0 0 14px; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.dx-dev-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dx-dev-chips li { padding: 7px 13px; border-radius: 999px; background: var(--tg-med-soft, #eaf5f0); color: var(--tg-med-deep); font-size: 13.5px; font-weight: 500; }
@media (max-width: 560px) { .dx-dev { padding: 30px 20px 24px; border-radius: 20px; } .dx-dev-hd h3 { font-size: 26px; } .dx-dev-body { padding: 20px 18px 20px; } }

.dx-real { margin-top: 56px; }
.dx-real-hd { text-align: center; margin-bottom: 26px; }
.dx-real-hd h3 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.dx-real-track { position: relative; display: flex; gap: 18px; width: 100%; overflow: hidden; padding: 6px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.dx-real-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex: 0 0 auto; animation: dxReal 95s linear infinite; }
.dx-real-list li { flex: 0 0 auto; width: 236px; height: 236px; border-radius: 50%; overflow: hidden; background: #2a1a17; box-shadow: 0 10px 26px rgba(19,45,39,.16); }
.dx-real-list img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.dx-real-track:hover .dx-real-list { animation-play-state: paused; }
@keyframes dxReal { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 18px)); } }
@media (max-width: 560px) { .dx-real-list li { width: 160px; height: 160px; } .dx-real-list, .dx-real-track { gap: 12px; } @keyframes dxReal { to { transform: translateX(calc(-100% - 12px)); } } .dx-real-hd h3 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .dx-real-list { animation: none; } .dx-real-track { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .dx-real-list[aria-hidden="true"] { display: none; } }

.ta-page #hx-dx .om-report { margin: 24px 0 0; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--tg-hair); box-shadow: 0 12px 30px rgba(19,45,39,.10); }
.ta-page #hx-dx .om-report img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ta-page #hx-dx .om-report figcaption { margin-top: 10px; text-align: center; font-size: 13px; color: var(--tg-ink-2); }
/* 2026-09-23 설진기 섹션 우측 첫머리 — 장비 사진 */
.ta-page #hx-dx .dx-hero { position: relative; margin: 0 0 28px; border-radius: 22px; overflow: hidden; background: #f7f9f8; border: 1px solid var(--tg-hair); aspect-ratio: 16 / 8; box-shadow: 0 14px 34px rgba(19,45,39,.10); }
.ta-page #hx-dx .dx-hero img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 18px 24px 44px; }
.ta-page #hx-dx .dx-hero figcaption { position: absolute; left: 22px; bottom: 18px; display: flex; align-items: baseline; gap: 12px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid rgba(19,122,82,.18); backdrop-filter: blur(4px); }
.ta-page #hx-dx .dx-hero figcaption b { font-size: 15px; font-weight: 600; color: var(--tg-ink); }
.ta-page #hx-dx .dx-hero figcaption span { font-size: 12.5px; color: var(--tg-ink-2); }
@media (max-width: 560px) { .ta-page #hx-dx .dx-hero { aspect-ratio: 4 / 3; border-radius: 16px; } .ta-page #hx-dx .dx-hero img { padding: 12px 12px 52px; } .ta-page #hx-dx .dx-hero figcaption { left: 12px; right: 12px; bottom: 12px; flex-direction: column; gap: 2px; align-items: flex-start; } }
/* 2026-09-23 옴니핏 장비 사진 → 옴니핏 블록 우측 첫머리 (진단기기 밴드는 제거) */
.ta-page #hx-dx .om-bd .dx-hero.is-omni { background: #f4f8fc; aspect-ratio: 16 / 8; }
.ta-page #hx-dx .om-bd .dx-hero.is-omni img { padding: 14px 24px 44px; }
.ta-page #hx-dx .dx-real { margin-top: 48px; }
/* 2026-09-23 설진기 장비 사진 — 더 크게, 박스 배경·테두리·그림자 제거 */
.ta-page #hx-dx .hx-split-bd > .dx-hero { aspect-ratio: 16 / 10; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.ta-page #hx-dx .hx-split-bd > .dx-hero img { padding: 0 0 30px; }
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { left: 0; bottom: 0; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd > .dx-hero { aspect-ratio: 4 / 3; } .ta-page #hx-dx .hx-split-bd > .dx-hero img { padding: 0 0 56px; } }
/* 2026-09-23 설진기 사진 캡션 — 하단 가운데 정렬 */
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { left: 50%; right: auto; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { left: 50%; right: auto; transform: translateX(-50%); align-items: center; white-space: normal; text-align: center; width: max-content; max-width: 92%; } }
/* 2026-09-23 설진기 사진 ↔ 아래 소제목 간격 28 → 44px */
.ta-page #hx-dx .hx-split-bd > .dx-hero { margin-bottom: 44px; }
/* 2026-09-23 설진기 캡션 부제 — 12.5 → 15px, 두께 400 */
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption span { font-size: 15px; font-weight: 400; color: var(--tg-ink-2); }
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption b { font-size: 16px; }
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { padding: 10px 20px; gap: 14px; }
/* 2026-09-23 설진기 캡션 — 패딩 4px 20px, 제품 이미지에 더 가깝게 */
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { padding: 4px 20px; gap: 14px; bottom: 30px; }
.ta-page #hx-dx .hx-split-bd > .dx-hero img { padding: 0; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { bottom: 10px; } .ta-page #hx-dx .hx-split-bd > .dx-hero img { padding: 0 0 40px; } }
/* 2026-09-23 설진기 캡션 — 이미지를 가려서 좌측 하단으로 */
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { left: 0; transform: none; bottom: 22px; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { left: 0; transform: none; align-items: flex-start; text-align: left; } }
/* 2026-09-23 설진기 캡션 — 살짝 위로(22→32px), 우측으로(0→40px) */
.ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { left: 40px; bottom: 32px; }
@media (max-width: 560px) { .ta-page #hx-dx .hx-split-bd > .dx-hero figcaption { left: 12px; bottom: 10px; } }
/* 2026-09-23 실사 슬라이드 원형 크기 236 → 190px */
.dx-real-list li { width: 190px; height: 190px; }
@media (max-width: 560px) { .dx-real-list li { width: 140px; height: 140px; } }
/* 2026-09-23 실사 슬라이드 아래 가로선 제거 — 옴니핏 블록 상단 border 였음 */
.ta-page #hx-dx .ta-omni.om-split { border-top: 0; padding-top: 40px; }
/* 2026-09-23 설진기 2단 블록 → 풀폭, 좌(분석 표) · 우(설질 4종) 나란히 */
.ta-page #hx-dx .ta-full > .ta-two { margin-top: 0; gap: 40px; }
@media (min-width: 900px) { .ta-page #hx-dx .ta-full > .ta-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: start; } }
.ta-page #hx-dx .ta-full > .ta-two .ta-sub-p { max-width: none; }
.ta-page #hx-dx .ta-full > .ta-two .ta-tongue { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .ta-page #hx-dx .ta-full > .ta-two .ta-tongue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ta-page #hx-dx .ta-full > .ta-two .ta-tongue li { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 16px 14px 14px; }
.ta-page #hx-dx .ta-full > .ta-two .ta-tongue .ta-tongue-pic { width: 110px; height: 110px; }
.ta-page #hx-dx .ta-full > .ta-two .ta-two-h { margin-bottom: 0; }
/* 설질 카드 제목 — 스와치와 이름이 한 줄에 */
.ta-page #hx-dx .ta-tongue b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.ta-page #hx-dx .ta-tongue b .ta-sw { margin-right: 0; flex: 0 0 auto; }
.ta-page #hx-dx .dx-real { margin-top: 56px; }
/* 2026-09-23 분석 표 행 제목 — 한자를 같은 줄에 (설태 舌苔) */
.ta-page #hx-dx .ta-two .tg-table tbody th i { display: inline; margin: 0 0 0 8px; font-size: 13.5px; font-weight: 400; vertical-align: baseline; }
.ta-page #hx-dx .ta-two .tg-table tbody th { white-space: nowrap; }
/* 2026-09-23 실사 슬라이드 — 아이브로 가운데 정렬(제목과 축 맞춤), 가장자리 페이드 축소, 사진 선명하게 */
.dx-real-hd { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dx-real-hd .hx-eyebrow { display: inline-flex; justify-content: center; text-align: center; margin: 0; }
.dx-real-hd h3 { margin: 0; }
.dx-real-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.dx-real-list li { box-shadow: 0 8px 20px rgba(19,45,39,.14); border: 3px solid #fff; outline: 1px solid rgba(19,45,39,.10); }
.dx-real-list img { transform: none; filter: saturate(1.04) contrast(1.03); }
/* 2026-09-23 실사 슬라이드 사진 간격 18 → 28px (키프레임 이동량도 맞춤) */
.dx-real-track, .dx-real-list { gap: 28px; }
@keyframes dxReal { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 28px)); } }
@media (max-width: 560px) { .dx-real-track, .dx-real-list { gap: 16px; } @keyframes dxReal { to { transform: translateX(calc(-100% - 16px)); } } }
/* 2026-09-23 비교표 셀 세로 가운데 정렬 */
.ta-page .tg-table.ta-cmp td, .ta-page .tg-table.ta-cmp tbody th,
.ta-page .tg-table.tp-cmp td, .ta-page .tg-table.tp-cmp tbody th { vertical-align: middle; }
.ta-page .ta-cmp tbody th { align-items: center; }
/* 2026-09-23 옴니핏 장비 사진 — 박스 배경 제거, 확대(16:10), 상단 여백 */
.ta-page #hx-dx .om-bd .dx-hero.is-omni { margin: 24px 0 44px; aspect-ratio: 16 / 10; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.ta-page #hx-dx .om-bd .dx-hero.is-omni img { padding: 0; }
.ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { left: 0; bottom: 24px; padding: 4px 20px; gap: 14px; }
.ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption b { font-size: 16px; }
.ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption span { font-size: 15px; font-weight: 400; color: var(--tg-ink-2); }
@media (max-width: 560px) { .ta-page #hx-dx .om-bd .dx-hero.is-omni { aspect-ratio: 1 / 1; margin: 12px 0 32px; } .ta-page #hx-dx .om-bd .dx-hero.is-omni img { padding: 0 0 48px; } .ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { left: 0; bottom: 0; } }
/* 옴니핏 캡션 — 사진(프린터 부분)을 가려서 사진 아래 가운데로 */
.ta-page #hx-dx .om-bd .dx-hero.is-omni { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ta-page #hx-dx .om-bd .dx-hero.is-omni img { width: 100%; height: 588px; object-fit: contain; }
.ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { position: static; transform: none; }
@media (max-width: 560px) { .ta-page #hx-dx .om-bd .dx-hero.is-omni img { height: auto; aspect-ratio: 1 / 1; padding: 0; } .ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { position: static; flex-direction: column; align-items: center; text-align: center; } }
/* 2026-09-23 옴니핏 캡션 — 우측 정렬 */
.ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { align-self: flex-end; }
@media (max-width: 560px) { .ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { align-self: flex-end; align-items: flex-end; text-align: right; } }
/* 2026-09-23 실사 슬라이드 ↔ 옴니핏 블록 간격 40 → 96px */
.ta-page #hx-dx .ta-omni.om-split { padding-top: 96px; }
@media (max-width: 560px) { .ta-page #hx-dx .ta-omni.om-split { padding-top: 64px; } }
/* 2026-09-23 옴니핏 캡션 — 사진 쪽으로 살짝 위로 */
.ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { margin-top: -28px; }
@media (max-width: 560px) { .ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { margin-top: -8px; } }
/* 2026-09-23 검사 결과지 블록 — 설진기 + 옴니핏 결과지, 별도 타이틀 */
.dx-results { margin-top: 88px; }
.dx-results-hd { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 30px; }
.dx-results-hd .hx-eyebrow { margin: 0; }
.dx-results-hd h3 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.dx-results-hd p { margin: 4px 0 0; max-width: 720px; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
@media (min-width: 900px) { .dx-results .ta-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.dx-results .pg-note { max-width: none; margin-top: 18px; }
@media (max-width: 560px) { .dx-results { margin-top: 56px; } .dx-results-hd h3 { font-size: 24px; } }
/* 2026-09-23 검사 결과지 블록 — 좌 타이틀 / 우 결과지 2장 (섹션 공통 2단 비율) */
.dx-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
@media (min-width: 900px) { .dx-results { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: 52px; } }
.dx-results-hd { align-items: flex-start; text-align: left; margin-bottom: 0; }
.dx-results-hd h3 { font-size: 30px; line-height: 1.3; }
.dx-results-hd p { margin-top: 10px; max-width: none; }
.dx-results .ta-sheets { grid-column: 2; }
.dx-results .pg-note { grid-column: 2; margin-top: 0; }
@media (min-width: 900px) { .dx-results .ta-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 899px) { .dx-results .ta-sheets, .dx-results .pg-note { grid-column: 1; } }
/* 2026-09-23 검사 전 안내 → 옴니핏 좌측, 결과서 이미지 위 */
.ta-page #hx-dx .om-hd .ta-notice { margin-top: 22px; }
.ta-page #hx-dx .om-hd .ta-notice + .om-report { margin-top: 18px; }
/* 2026-09-23 옴니핏 좌·우 칼럼 하단 맞춤 — 좌측 결과서 이미지가 남는 높이만큼만 차지(아래쪽 크롭) */
@media (min-width: 900px) {
  .ta-page #hx-dx .ta-omni.om-split { align-items: stretch; }
  .ta-page #hx-dx .om-hd { display: flex; flex-direction: column; min-height: 0; }
  .ta-page #hx-dx .om-hd .om-report { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .ta-page #hx-dx .om-hd .om-report img { flex: 1 1 auto; min-height: 0; height: 0; width: 100%; object-fit: cover; object-position: top center; }
  .ta-page #hx-dx .om-hd .om-report figcaption { flex: 0 0 auto; }
}
/* 2026-09-23 결과지·실사 블록 아이브로 크기 축소 */
.ta-page .dx-results-hd .hx-eyebrow, .ta-page .dx-real-hd .hx-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .18em; }
/* 아이브로 더 작게 — 영문 대문자라 커 보임: 11px / 400 */
.ta-page .dx-results-hd .hx-eyebrow, .ta-page .dx-real-hd .hx-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .16em; }
/* 2026-09-23 결과지 블록 타이틀 — 하늘 마커 소제목 스타일(28px/400)로 통일 */
.ta-page .dx-results-hd h3 { display: inline; align-self: flex-start; padding: 0 4px; margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, rgba(140, 190, 245, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page .dx-results-hd p { margin-top: 14px; }
@media (max-width: 560px) { .ta-page .dx-results-hd h3 { font-size: 23px; } }
/* 2026-09-23 결과지 2장 — 서류 느낌: 라운드 0, 종이 그림자, 상단 얇은 띠 */
.dx-results .ta-sheet { border-radius: 0; border: 1px solid rgba(19,45,39,.14); box-shadow: 0 1px 2px rgba(19,45,39,.08), 0 16px 34px rgba(19,45,39,.10); background: #fff; position: relative; }
.dx-results .ta-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tg-med); }
.dx-results .ta-sheet figcaption, .dx-results .ta-sheet .ta-row, .dx-results .ta-sheet .ta-verdict { border-radius: 0; }
.dx-results .ta-sheet .ta-bar, .dx-results .ta-sheet .ta-bar i, .dx-results .ta-sheet .ta-bal, .dx-results .ta-sheet .ta-bal span, .dx-results .ta-sheet .ta-pills li, .dx-results .ta-sheet .ta-swatch li { border-radius: 2px; }
/* 2026-09-23 결과지 컬러 — 고객 제공 옴니핏 결과서(네이비·블루, 스트레스 척도 오렌지/레드) 톤으로 */
.dx-results .ta-sheet { --rs-navy: #17407a; --rs-blue: #2f7fd6; --rs-light: #e8f1fb; --rs-warm: #f08a24; --rs-red: #e05a4e; }
.dx-results .ta-sheet::before { background: var(--rs-navy); }
.dx-results .ta-sheet figcaption { border-bottom-color: var(--rs-navy); }
.dx-results .ta-sheet figcaption b { color: var(--rs-navy); }
.dx-results .ta-sheet figcaption span { color: #6b7a90; letter-spacing: .08em; }
.dx-results .ta-sheet .ta-row-hd span { color: #5b6b80; }
.dx-results .ta-sheet .ta-row-hd b { color: var(--rs-navy); }
.dx-results .ta-sheet .ta-bar { background: var(--rs-light); }
.dx-results .ta-sheet .ta-bar i { background: var(--rs-blue); }
.dx-results .ta-sheet .ta-bar.is-warm i { background: var(--rs-warm); }
.dx-results .ta-sheet .ta-bal-a { background: var(--rs-blue); }
.dx-results .ta-sheet .ta-bal-b { background: var(--rs-red); }
.dx-results .ta-sheet .ta-pills li { background: var(--rs-light); color: var(--rs-navy); border: 1px solid rgba(23,64,122,.18); }
.dx-results .ta-sheet .ta-swatch li.is-on { outline: 2px solid var(--rs-navy); outline-offset: 2px; }
.dx-results .ta-sheet .ta-verdict { background: #f3f6fb; border-left: 3px solid var(--rs-navy); }
.dx-results .ta-sheet .ta-verdict b { color: var(--rs-navy); }
.dx-results .ta-sheet .ta-bar-lb { color: #6b7a90; }
/* 2026-09-23 결과지 컬러 — 고객 시안(혀통증.html) 토큰 그대로: paper/jade/vermilion + 설질 스와치 */
.dx-results .ta-sheet { --rs-paper: #FBFBF7; --rs-paper-2: #E8EAE2; --rs-paper-3: #DDE0D7; --rs-ink: #141D1B; --rs-ink-2: #39443F; --rs-muted: #6E7A75; --rs-line: rgba(20,29,27,.13);
  --rs-jade: #17604F; --rs-jade-mid: #2C8068; --rs-jade-soft: #D9E5DE; --rs-verm: #A33B2E; --s-danbaek: #DED6C5; --s-danhong: #C8707C; --s-hong: #A92533; --s-cheongja: #5A6A9B;
  background: var(--rs-paper); border-color: rgba(20,29,27,.16); color: var(--rs-ink-2); }
.dx-results .ta-sheet::before { background: var(--rs-jade); }
.dx-results .ta-sheet figcaption { border-bottom-color: var(--rs-ink); }
.dx-results .ta-sheet figcaption b { color: var(--rs-ink); }
.dx-results .ta-sheet figcaption span { background: var(--rs-paper-2); color: var(--rs-muted); border-radius: 3px; letter-spacing: .06em; }
.dx-results .ta-sheet .ta-row-hd span { color: var(--rs-muted); }
.dx-results .ta-sheet .ta-row-hd b { color: var(--rs-ink); }
.dx-results .ta-sheet .ta-bar { background: var(--rs-paper-3); height: 9px; }
.dx-results .ta-sheet .ta-bar i { background: var(--rs-jade-mid); }
.dx-results .ta-sheet .ta-bar.is-warm i { background: var(--rs-verm); }
.dx-results .ta-sheet .ta-bar-lb { color: var(--rs-muted); }
.dx-results .ta-sheet .ta-bal { background: linear-gradient(90deg, var(--s-cheongja) 0%, var(--rs-paper-3) 50%, var(--rs-verm) 100%); border-radius: 999px; }
.dx-results .ta-sheet .ta-bal-a, .dx-results .ta-sheet .ta-bal-b { background: transparent; color: var(--rs-ink-2); }
.dx-results .ta-sheet .ta-swatch li.c-danbaek { background: var(--s-danbaek); color: #5b5242; }
.dx-results .ta-sheet .ta-swatch li.c-danhong { background: var(--s-danhong); }
.dx-results .ta-sheet .ta-swatch li.c-hong { background: var(--s-hong); }
.dx-results .ta-sheet .ta-swatch li.c-cheongja { background: var(--s-cheongja); }
.dx-results .ta-sheet .ta-swatch li { border-radius: 4px; border: 1px solid rgba(20,29,27,.14); }
.dx-results .ta-sheet .ta-swatch li.is-on { outline: 2px solid var(--rs-jade); outline-offset: 2px; box-shadow: none; }
.dx-results .ta-sheet .ta-pills li { background: var(--rs-jade-soft); color: var(--rs-jade); border: 0; border-radius: 3px; font-weight: 600; font-size: 12.5px; padding: 4px 10px; }
.dx-results .ta-sheet .ta-verdict { background: transparent; border: 0; border-top: 1px solid var(--rs-line); border-radius: 0; padding: 16px 0 0; color: var(--rs-ink-2); }
.dx-results .ta-sheet .ta-verdict b { color: var(--rs-ink); }
/* 균형 바 — 시안처럼 경계에 잉크 마커 */
.dx-results .ta-sheet .ta-bal { position: relative; height: 12px; overflow: visible; }
.dx-results .ta-sheet .ta-bal-a { position: relative; }
.dx-results .ta-sheet .ta-bal-a::after { content: ""; position: absolute; right: -1.5px; top: -4px; width: 3px; height: 20px; border-radius: 2px; background: #141D1B; }
.dx-results .ta-sheet .ta-bal-a, .dx-results .ta-sheet .ta-bal-b { font-size: 11.5px; line-height: 12px; }
/* 균형 바 라벨 — 시안처럼 바 바깥 좌우에 (안쪽 텍스트는 숨김) */
.dx-results .ta-sheet .ta-bal { margin: 6px 40px 0 54px; border-radius: 999px; }
.dx-results .ta-sheet .ta-bal span { color: transparent; font-size: 0; padding: 0; }
.dx-results .ta-sheet .ta-bal::before, .dx-results .ta-sheet .ta-bal::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11.5px; line-height: 1; color: #39443F; white-space: nowrap; }
.dx-results .ta-sheet .ta-bal::before { content: "부교감"; right: calc(100% + 12px); }
.dx-results .ta-sheet .ta-bal::after { content: "교감"; left: calc(100% + 12px); }
/* 설질 색상 스와치 — 시안처럼 전부 진한 원색, 선택만 외곽선 */
.dx-results .ta-sheet .ta-swatch li { opacity: 1; }
.dx-results .ta-sheet .ta-swatch li.c-danbaek { color: #5b5242; }
.dx-results .ta-sheet .ta-swatch li.is-on { font-weight: 600; }

/* ═══ 2026-09-23 진단·치료 흐름(#ta-flow) 재디자인 — 좌 타이틀+리드+체크 / 우 라벤더 마커 소제목 / 풀폭 5단계 스테퍼 ═══ */
.ta-page #ta-flow .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #ta-flow .ta-keychips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-page #ta-flow .ta-keychips li { position: relative; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; color: var(--tg-ink); }
.ta-page #ta-flow .ta-keychips li::before { display: none; }
.ta-page #ta-flow .ta-keychips li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 7px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); opacity: .9; }
.ta-page #ta-flow .ta-keychips b { min-width: 60px; font-size: 16px; font-weight: 500; color: var(--tg-med-deep); }
.ta-page #ta-flow .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ta-page #ta-flow .ta-sub.is-first { display: block; margin: 0 0 18px; }
.ta-page #ta-flow .ta-sub-h { display: inline; padding: 0 4px; margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, rgba(178, 160, 235, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (min-width: 900px) { .ta-page #ta-flow.hx-split { row-gap: 8px; } .ta-page #ta-flow .hx-split-bd { align-self: end; } }
/* 스테퍼 */
.ta-page #ta-flow .ta-flow { position: relative; counter-reset: step; gap: 18px; padding-top: 34px; }
@media (min-width: 1180px) { .ta-page #ta-flow .ta-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 13px; height: 2px; background: linear-gradient(90deg, rgba(19,122,82,.12), rgba(19,122,82,.45) 20%, rgba(19,122,82,.45) 80%, rgba(19,122,82,.12)); } }
.ta-page #ta-flow .ta-flow > li { counter-increment: step; overflow: hidden; padding: 24px 22px 22px; border-radius: 18px; border: 1px solid rgba(19,122,82,.18); }
.ta-page #ta-flow .ta-flow > li::before { content: "0" counter(step); position: absolute; right: 16px; top: 6px; font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(19,122,82,.07); pointer-events: none; }
@media (min-width: 1180px) { .ta-page #ta-flow .ta-flow > li::after { content: ""; position: absolute; left: 50%; top: -34px; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--tg-med); box-shadow: 0 0 0 4px #fff; } .ta-page #ta-flow .ta-flow > li { overflow: visible; } .ta-page #ta-flow .ta-flow > li.is-mix::after { background: var(--tg-med); } }
.ta-page #ta-flow .ta-flow-no { font-size: 12px; letter-spacing: .12em; }
.ta-page #ta-flow .ta-flow h3 { font-size: 20px; letter-spacing: -.02em; padding-right: 40px; }
.ta-page #ta-flow .ta-flow > li > ul:not(.ta-pills) li { font-size: 15.5px; line-height: 1.7; }
.ta-page #ta-flow .ta-flow p { font-size: 15.5px; }
.ta-page #ta-flow .ta-flow > li.is-mix { background: var(--tg-deep-line, #2C5546); }
.ta-page #ta-flow .ta-flow > li.is-mix::before { color: rgba(255,255,255,.10); }
.ta-page #ta-flow .ta-flow > li.is-mix .ta-pills li { border-radius: 999px; font-size: 13.5px; }
/* 반복 안내 → 알약 */
.ta-page #ta-flow .ta-loop { display: block; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 14px 28px; border-radius: 999px; background: rgba(178,160,235,.16); border: 1px solid rgba(120,100,190,.25); color: var(--tg-ink); font-size: 15.5px; line-height: 1.7; text-align: center; word-break: keep-all; }
.ta-page #ta-flow .ta-loop span { color: #6a55b8; font-weight: 600; margin-right: 8px; }
@media (max-width: 560px) { .ta-page #ta-flow .ta-sub-h { font-size: 23px; } .ta-page #ta-flow .ta-flow { padding-top: 0; } .ta-page #ta-flow .ta-flow > li { padding: 20px 18px 18px; } .ta-page #ta-flow .ta-flow > li::before { font-size: 50px; } .ta-page #ta-flow .ta-loop { border-radius: 22px; padding: 14px 18px; } }
/* 2026-09-23 흐름 섹션 — 소제목을 풀폭 스테퍼 위로 (우측 빈 칼럼 제거) */
.ta-page #ta-flow .ta-full .ta-sub.is-first { margin: 0 0 22px; }
@media (min-width: 900px) { .ta-page #ta-flow.hx-split { row-gap: 40px; } }
/* 2026-09-23 흐름 섹션 — 우측 칼럼 세로 타임라인 */
.ta-page #ta-flow .hx-split-bd .ta-sub.is-first { margin: 0 0 22px; }
@media (min-width: 900px) { .ta-page #ta-flow.hx-split { row-gap: 26px; } .ta-page #ta-flow .hx-split-bd { align-self: start; } }
.ta-page #ta-flow .hx-split-bd .ta-flow { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; padding: 0 0 0 44px; }
.ta-page #ta-flow .hx-split-bd .ta-flow::before { content: ""; display: block; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; height: auto; right: auto; background: linear-gradient(180deg, rgba(19,122,82,.15), rgba(19,122,82,.45) 12%, rgba(19,122,82,.45) 88%, rgba(19,122,82,.15)); }
.ta-page #ta-flow .hx-split-bd .ta-flow > li { overflow: visible; display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 28px; row-gap: 10px; align-items: start; padding: 22px 24px; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li::after { content: ""; position: absolute; left: -38px; top: 26px; transform: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--tg-med); box-shadow: 0 0 0 4px #fff; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix::after { background: var(--tg-med); }
.ta-page #ta-flow .hx-split-bd .ta-flow-no { grid-column: 1; margin: 0; }
.ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-column: 1; margin: 0; padding-right: 0; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills) { grid-column: 2; grid-row: 1 / span 2; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-column: 2; grid-row: 1; margin: 0; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-column: 2; grid-row: 2; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li::before { right: 14px; top: 4px; font-size: 56px; }
.ta-page #ta-flow .hx-split-bd .ta-loop { margin: 24px 0 0 44px; width: auto; text-align: left; }
@media (max-width: 640px) { .ta-page #ta-flow .hx-split-bd .ta-flow { padding-left: 0; } .ta-page #ta-flow .hx-split-bd .ta-flow::before, .ta-page #ta-flow .hx-split-bd .ta-flow > li::after { display: none; } .ta-page #ta-flow .hx-split-bd .ta-flow > li { grid-template-columns: minmax(0, 1fr); } .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p, .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-column: 1; grid-row: auto; } .ta-page #ta-flow .hx-split-bd .ta-loop { margin-left: 0; } }
/* 2026-09-23 흐름 카드 — 작은 STEP 라벨 대신 "STEP 01" 워터마크를 크게 */
.ta-page #ta-flow .hx-split-bd .ta-flow-no { display: none; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li::before { content: "STEP 0" counter(step); right: 18px; top: 8px; font-size: 76px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: rgba(19,122,82,.07); }
.ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix::before { color: rgba(255,255,255,.10); }
.ta-page #ta-flow .hx-split-bd .ta-flow h3 { margin-top: 2px; }
@media (max-width: 640px) { .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { font-size: 52px; } }
/* 2026-09-23 흐름 카드 아이콘 (사이트 공용 rx-* 세트) */
.ta-page #ta-flow .fl-ico { grid-column: 1; width: 52px; height: 52px; border-radius: 14px; margin: 0 0 4px; background: #eaf5f0; color: var(--tg-med); }
.ta-page #ta-flow .fl-ico .fx-band-img { width: 30px; height: 30px; }
.ta-page #ta-flow .ta-flow > li.is-mix .fl-ico { background: rgba(255,255,255,.14); color: #fff; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li { row-gap: 8px; }
/* 2026-09-23 흐름 카드 — STEP 01 을 타이틀 위에 워터마크 톤으로, 크기 축소 (우측 상단 워터마크는 제거) */
.ta-page #ta-flow .hx-split-bd .ta-flow > li::before { display: none; }
.ta-page #ta-flow .hx-split-bd .ta-flow-no { display: block; grid-column: 1; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: rgba(19,122,82,.22); }
.ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix .ta-flow-no { color: rgba(255,255,255,.32); }
.ta-page #ta-flow .hx-split-bd .ta-flow h3 { margin-top: 0; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li { row-gap: 6px; }
.ta-page #ta-flow .fl-ico { margin-bottom: 6px; }
@media (max-width: 640px) { .ta-page #ta-flow .hx-split-bd .ta-flow-no { font-size: 22px; } }
/* 카드 안 순서 고정 — 아이콘 → STEP → 제목 (좌측 칼럼), 내용은 우측 칼럼 전체 행 */
@media (min-width: 641px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li { grid-template-rows: auto auto auto; }
  .ta-page #ta-flow .hx-split-bd .fl-ico { grid-row: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { grid-row: 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-row: 3; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills) { grid-row: 1 / span 3; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-row: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-row: 2 / span 2; align-self: start; }
}
/* 2026-09-23 흐름 — 가운데 세로 구분선 + 단계 좌우 지그재그 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 72px; row-gap: 22px; padding: 0; }
  .ta-page #ta-flow .hx-split-bd .ta-flow::before { left: 50%; transform: translateX(-50%); top: 12px; bottom: 12px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; column-gap: 0; row-gap: 8px; padding: 22px 24px 22px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(odd) { grid-column: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(even) { grid-column: 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(1) { grid-row: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(2) { grid-row: 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(3) { grid-row: 3; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(4) { grid-row: 4; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(5) { grid-row: 5; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(odd)::after { left: auto; right: -43px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(even)::after { left: -43px; right: auto; }
  .ta-page #ta-flow .hx-split-bd .fl-ico, .ta-page #ta-flow .hx-split-bd .ta-flow-no, .ta-page #ta-flow .hx-split-bd .ta-flow h3,
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p, .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-column: 1; grid-row: auto; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { margin-bottom: 4px; }
  .ta-page #ta-flow .hx-split-bd .ta-loop { margin: 26px auto 0; width: fit-content; max-width: 100%; text-align: center; }
}
/* 지그재그 보정 — 점 중심을 구분선에 정확히, 카드 안 순서 아이콘→STEP→제목→내용 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::after { box-sizing: border-box; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li { grid-template-rows: auto auto auto auto auto; }
  .ta-page #ta-flow .hx-split-bd .fl-ico { grid-row: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { grid-row: 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-row: 3; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-row: 4; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-row: 5; }
}
/* 2026-09-23 흐름 카드 — STEP 01 과 제목을 한 줄에 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; grid-template-rows: auto auto auto auto; align-items: baseline; }
  .ta-page #ta-flow .hx-split-bd .fl-ico { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { grid-column: 1; grid-row: 2; font-size: 22px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-column: 2; grid-row: 2; margin: 0; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-column: 1 / -1; grid-row: 3; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 1099px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li { display: block; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { display: inline-block; font-size: 20px; margin: 0 10px 8px 0; vertical-align: baseline; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { display: inline; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul, .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { margin-top: 12px; }
  .ta-page #ta-flow .fl-ico { margin-bottom: 10px; }
}
/* 2026-09-23 흐름 카드 아이콘 제거 — STEP+제목이 첫 행 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li { grid-template-rows: auto auto auto; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { grid-row: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-row: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-row: 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-row: 3; }
}
/* 2026-09-23 흐름 카드 STEP·제목 폰트 확대 — STEP 22 → 26px, 제목 20 → 24px */
.ta-page #ta-flow .hx-split-bd .ta-flow-no { font-size: 26px; }
.ta-page #ta-flow .hx-split-bd .ta-flow h3 { font-size: 24px; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { margin-top: 4px; }
@media (max-width: 899px) { .ta-page #ta-flow .hx-split-bd .ta-flow-no { font-size: 22px; } .ta-page #ta-flow .hx-split-bd .ta-flow h3 { font-size: 21px; } }
/* 2026-09-23 흐름 카드 내용 폰트 확대 — 15.5 → 16.5px (다른 카드 본문과 동일) */
.ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills) li { font-size: 16.5px; line-height: 1.75; padding-left: 14px; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills) li::before { top: .78em; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li > p { font-size: 16.5px; line-height: 1.7; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix .ta-pills li { font-size: 14.5px; padding: 6px 13px; }
.ta-page #ta-flow .hx-split-bd .ta-loop { font-size: 16px; }
/* 2026-09-23 흐름 가운데 구분선 — 가늘고 진하게 (1px, 진녹 단색) */
@media (min-width: 900px) { .ta-page #ta-flow .hx-split-bd .ta-flow::before { width: 1px; background: var(--tg-deep-line, #2C5546); opacity: .9; } }
.ta-page #ta-flow .hx-split-bd .ta-flow > li::after { border-color: var(--tg-deep-line, #2C5546); }
.ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix::after { background: var(--tg-deep-line, #2C5546); }
/* 2026-09-23 흐름 점 펄스 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::after { animation: flowPulse 2.6s ease-out infinite; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(2)::after { animation-delay: .5s; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(3)::after { animation-delay: 1s; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(4)::after { animation-delay: 1.5s; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(5)::after { animation-delay: 2s; }
}
@keyframes flowPulse { 0% { box-shadow: 0 0 0 4px #fff, 0 0 0 4px rgba(44,85,70,.5); } 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 18px rgba(44,85,70,0); } }
@media (prefers-reduced-motion: reduce) { .ta-page #ta-flow .hx-split-bd .ta-flow > li::after { animation: none; } }
/* 2026-09-23 구분선 원 테두리 3 → 1.5px, 흰 링 4 → 3px */
.ta-page #ta-flow .hx-split-bd .ta-flow > li::after { border-width: 1.5px; width: 14px; height: 14px; }
@keyframes flowPulse { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(44,85,70,.5); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 16px rgba(44,85,70,0); } }
/* 2026-09-23 구분선 원 — 보라(섹션 마커색 계열) */
.ta-page #ta-flow .hx-split-bd .ta-flow > li::after { border-color: #7A64C8; }
.ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix::after { background: #7A64C8; border-color: #7A64C8; }
@keyframes flowPulse { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(122,100,200,.55); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 16px rgba(122,100,200,0); } }
/* 2026-09-23 구분선 원 확대 14 → 20px (중심은 구분선 위 유지) */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::after { width: 20px; height: 20px; top: 24px; border-width: 1.5px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(odd)::after { right: -46px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(even)::after { left: -46px; }
}
@keyframes flowPulse { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(122,100,200,.55); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 20px rgba(122,100,200,0); } }
/* 2026-09-23 구분선 원 — 다시 녹색 (구분선과 같은 진녹) */
.ta-page #ta-flow .hx-split-bd .ta-flow > li::after { border-color: var(--tg-deep-line, #2C5546); }
.ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix::after { background: var(--tg-deep-line, #2C5546); border-color: var(--tg-deep-line, #2C5546); }
@keyframes flowPulse { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(44,85,70,.5); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 20px rgba(44,85,70,0); } }
/* 2026-09-23 흐름 지그재그 — 카드가 절반씩 겹쳐 내려오도록(2행 스팬) 하여 단계 간 빈 공간 제거 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow { grid-template-rows: repeat(6, auto); row-gap: 0; column-gap: 72px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(1) { grid-row: 1 / span 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(2) { grid-row: 2 / span 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(3) { grid-row: 3 / span 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(4) { grid-row: 4 / span 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(5) { grid-row: 5 / span 2; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li { align-self: start; margin-bottom: 22px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:last-child { margin-bottom: 0; }
}
/* ═══ 2026-09-23 흐름 — 박스 없는 세로 타임라인 (좌측 레일 + 번호 원 + 우측 제목/내용) ═══ */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none; row-gap: 0; column-gap: 0; padding: 0; counter-reset: step; }
  .ta-page #ta-flow .hx-split-bd .ta-flow::before { left: 27px; transform: none; top: 28px; bottom: 28px; width: 1px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li,
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { grid-column: 1; grid-row: auto; margin: 0; align-self: auto;
    display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 24px; row-gap: 6px; align-items: start;
    padding: 26px 0 26px; background: transparent; border: 0; border-bottom: 1px solid rgba(19,122,82,.14); border-radius: 0; overflow: visible; box-shadow: none; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:first-child { padding-top: 0; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:last-child { border-bottom: 0; padding-bottom: 0; }
  /* 번호 원 (레일 위) */
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::after { display: none; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { content: "0" counter(step); counter-increment: step; display: grid; place-items: center; position: static; grid-column: 1; grid-row: 1 / span 3; align-self: start; justify-self: start;
    width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid var(--tg-deep-line, #2C5546); color: var(--tg-deep-line, #2C5546); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1; box-shadow: 0 0 0 6px #fff; animation: flowPulse 2.6s ease-out infinite; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(2)::before { animation-delay: .5s; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(3)::before { animation-delay: 1s; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(4)::before { animation-delay: 1.5s; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(5)::before { animation-delay: 2s; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix::before { background: var(--tg-deep-line, #2C5546); color: #fff; }
  /* 텍스트 */
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { display: none; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-column: 2; grid-row: 1; margin: 6px 0 4px; font-size: 24px; color: var(--tg-ink); }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-column: 2; grid-row: 2; margin: 0; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-column: 2; grid-row: 3; margin-top: 6px; }
  /* STEP 04 — 어두운 박스 대신 연한 틴트 */
  .ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix { background: transparent; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix h3, .ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix p { color: var(--tg-ink); }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix p { color: var(--tg-ink-2); }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix .ta-pills li { background: var(--tg-med-soft, #eaf5f0); color: var(--tg-med-deep); }
  .ta-page #ta-flow .hx-split-bd .ta-loop { margin: 26px 0 0 80px; width: auto; text-align: left; }
}
@keyframes flowPulse { 0% { box-shadow: 0 0 0 6px #fff, 0 0 0 6px rgba(44,85,70,.45); } 100% { box-shadow: 0 0 0 6px #fff, 0 0 0 22px rgba(44,85,70,0); } }
/* 2026-09-23 결과지 주석 좌측 정렬 */
.dx-results .pg-note { text-align: left; }
/* 숫자 이중 증가 수정 — li 에서만 카운트 (::before 는 표시만) */
@media (min-width: 900px) { .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { counter-increment: none; } }
/* 2026-09-23 번호 원 ↔ 내용 간격 24 → 40px */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li, .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { column-gap: 40px; }
  .ta-page #ta-flow .hx-split-bd .ta-loop { margin-left: 96px; }
}
/* 2026-09-23 단계 사이 가로 구분선 제거 */
@media (min-width: 900px) { .ta-page #ta-flow .hx-split-bd .ta-flow > li, .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { border-bottom: 0; padding: 22px 0; } .ta-page #ta-flow .hx-split-bd .ta-flow > li:first-child { padding-top: 0; } .ta-page #ta-flow .hx-split-bd .ta-flow > li:last-child { padding-bottom: 0; } }
/* 2026-09-23 번호 원 56 → 68px, 숫자 800 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li, .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { grid-template-columns: 68px minmax(0, 1fr); }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { width: 68px; height: 68px; font-size: 21px; font-weight: 800; }
  .ta-page #ta-flow .hx-split-bd .ta-flow::before { left: 33.5px; top: 34px; bottom: 34px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { margin-top: 12px; }
  .ta-page #ta-flow .hx-split-bd .ta-loop { margin-left: 108px; }
}
/* 2026-09-23 번호 숫자 21 → 26px */
@media (min-width: 900px) { .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { font-size: 26px; letter-spacing: -.02em; } }
/* 2026-09-23 타이틀 앞 작은 STEP 라벨 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li, .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { grid-template-columns: 68px auto minmax(0, 1fr); }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { grid-column: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { display: inline-block; grid-column: 2; grid-row: 1; align-self: baseline; margin: 12px 0 0; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--tg-med); background: none; line-height: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-column: 3; grid-row: 1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-column: 2 / -1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-column: 2 / -1; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li, .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { column-gap: 14px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { margin-right: 26px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li.is-mix .ta-flow-no { color: var(--tg-med); }
}
/* 원↔라벨 간격 40px 복구(첫 트랙 94px), 라벨·제목 기준선 정렬 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li, .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { grid-template-columns: 94px auto minmax(0, 1fr); column-gap: 14px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { margin-right: 0; justify-self: start; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { align-self: baseline; margin-top: 0; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { align-self: baseline; margin-top: 12px; }
}
/* 2026-09-23 STEP 라벨 위 / 제목 아래 2줄, 원↔내용 간격 40 → 56px */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li, .ta-page #ta-flow .hx-split-bd .ta-flow > li:nth-child(n) { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 0; row-gap: 4px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li::before { grid-column: 1; grid-row: 1 / span 4; }
  .ta-page #ta-flow .hx-split-bd .ta-flow-no { grid-column: 2; grid-row: 1; align-self: start; margin: 8px 0 0; display: block; }
  .ta-page #ta-flow .hx-split-bd .ta-flow h3 { grid-column: 2; grid-row: 2; align-self: start; margin: 0 0 6px; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul:not(.ta-pills), .ta-page #ta-flow .hx-split-bd .ta-flow > li > p { grid-column: 2; grid-row: 3; }
  .ta-page #ta-flow .hx-split-bd .ta-flow > li > ul.ta-pills { grid-column: 2; grid-row: 4; }
  .ta-page #ta-flow .hx-split-bd .ta-loop { margin-left: 124px; }
}
/* 2026-09-23 "다섯 단계로 진행됩니다" ↔ 플로우 간격 22 → 40px */
.ta-page #ta-flow .hx-split-bd .ta-sub.is-first { margin-bottom: 40px; }

/* ═══ 2026-09-23 04 치료(#hx-tx) 헤더 재디자인 — 좌 타이틀+리드+체크 / 우 골드 마커 소제목 + 치료 칩 / 항목 번호 워터마크 ═══ */
.ta-page #hx-tx .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #hx-tx .ta-keychips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-page #hx-tx .ta-keychips li { position: relative; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; color: var(--tg-ink); word-break: keep-all; }
.ta-page #hx-tx .ta-keychips li::before { display: none; }
.ta-page #hx-tx .ta-keychips li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 7px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); opacity: .9; }
.ta-page #hx-tx .ta-keychips b { min-width: 60px; flex: 0 0 auto; font-size: 16px; font-weight: 500; color: var(--tg-med-deep); }
.ta-page #hx-tx .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ta-page #hx-tx .ta-sub.is-first { display: block; margin: 0 0 14px; }
.ta-page #hx-tx .ta-sub-h { display: inline; padding: 0 4px; margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, rgba(250, 216, 78, .45) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-page #hx-tx .ta-txnav-p { margin: 0 0 14px; font-size: 15px; font-weight: 300; color: var(--tg-ink-2); }
.ta-page #hx-tx .ta-txnav { gap: 10px; margin-top: 0; }
.ta-page #hx-tx .ta-txnav a { padding: 10px 18px; font-size: 15px; font-weight: 500; color: var(--tg-ink); background: #fff; border-color: rgba(19,122,82,.22); transition: background .18s, color .18s, border-color .18s; }
.ta-page #hx-tx .ta-txnav a:hover { background: var(--tg-med); color: #fff; border-color: var(--tg-med); }
@media (min-width: 900px) { .ta-page #hx-tx.hx-split { row-gap: 36px; } .ta-page #hx-tx .hx-split-bd { align-self: end; } }
/* 항목 번호 워터마크 + 헤더 톤 */
.ta-page #hx-tx .ta-tx { counter-reset: tx; }
.ta-page #hx-tx .ta-tx-item { counter-increment: tx; position: relative; }
.ta-page #hx-tx .ta-tx-item header::before { content: "0" counter(tx); display: block; margin-bottom: 4px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: rgba(19,122,82,.14); }
.ta-page #hx-tx .ta-tx-item header .ta-tag { margin-bottom: 8px; }
.ta-page #hx-tx .ta-tx-item { border-bottom-color: rgba(19,122,82,.14); }
@media (max-width: 560px) { .ta-page #hx-tx .ta-sub-h { font-size: 23px; } .ta-page #hx-tx .ta-keychips b { min-width: 0; } .ta-page #hx-tx .ta-tx-item header::before { font-size: 32px; } }

/* ═══ 2026-09-23 자주 묻는 질문(#hx-faq) 재디자인 — 좌 타이틀+리드+체크 / 우 청록 마커 소제목 + 번호 Q 리스트 ═══ */
.ta-page #hx-faq .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ta-page #hx-faq .ta-keychips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-page #hx-faq .ta-keychips li { position: relative; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; color: var(--tg-ink); word-break: keep-all; }
.ta-page #hx-faq .ta-keychips li::before { display: none; }
.ta-page #hx-faq .ta-keychips li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 7px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); opacity: .9; }
.ta-page #hx-faq .ta-keychips b { min-width: 76px; flex: 0 0 auto; font-size: 16px; font-weight: 500; color: var(--tg-med-deep); }
.ta-page #hx-faq .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ta-page #hx-faq .ta-sub.is-first { display: block; margin: 0 0 18px; }
.ta-page #hx-faq .ta-sub-h { display: inline; padding: 0 4px; margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, rgba(120, 205, 220, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Q 리스트 — 번호 원 + 큰 질문 + 여유 있는 답 */
.ta-page #hx-faq .faq-list { border-top: 0; counter-reset: faq; gap: 10px; }
.ta-page #hx-faq .faq { counter-increment: faq; border: 1px solid rgba(19,122,82,.16); border-radius: 16px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ta-page #hx-faq .faq[open] { border-color: rgba(19,122,82,.35); box-shadow: 0 12px 28px rgba(19,45,39,.08); }
.ta-page #hx-faq .faq > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; column-gap: 16px; padding: 20px 22px; }
.ta-page #hx-faq .faq-part { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tg-med-soft, #eaf5f0); color: var(--tg-med-deep); font-size: 0; }
.ta-page #hx-faq .faq-part::before { content: "Q" counter(faq); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.ta-page #hx-faq .faq-subject { font-size: 18.5px; font-weight: 500; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.ta-page #hx-faq .faq > summary::after { position: static; grid-column: 3; justify-self: end; margin: 0; border-color: var(--tg-med); }
.ta-page #hx-faq .faq[open] > summary::after { margin-top: 0; transform: rotate(-135deg) translate(-3px, -3px); }
.ta-page #hx-faq .faq-a { padding: 0 22px 24px 82px; }
.ta-page #hx-faq .faq-a p { font-size: 16px; line-height: 1.8; color: var(--tg-ink-2); }
@media (max-width: 560px) { .ta-page #hx-faq .ta-sub-h { font-size: 23px; } .ta-page #hx-faq .faq > summary { grid-template-columns: 36px minmax(0, 1fr) 20px; padding: 16px 16px; column-gap: 12px; } .ta-page #hx-faq .faq-part { width: 36px; height: 36px; } .ta-page #hx-faq .faq-subject { font-size: 16.5px; } .ta-page #hx-faq .faq-a { padding: 0 16px 18px 64px; } .ta-page #hx-faq .ta-keychips b { min-width: 0; } }
/* 2026-09-23 치료 11항목 → 우측 칼럼으로 (좌측 타이틀은 상단 고정 아님) */
@media (min-width: 900px) { .ta-page #hx-tx .hx-split-bd { align-self: start; } }
.ta-page #hx-tx .hx-split-bd .ta-tx { margin-top: 40px; border-top: 1px solid rgba(19,122,82,.14); }
.ta-page #hx-tx .hx-split-bd .ta-tx-item { padding: 34px 0; }
@media (min-width: 900px) { .ta-page #hx-tx .hx-split-bd .ta-tx-item { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 40px; } }
.ta-page #hx-tx .hx-split-bd .ta-tx-item:last-child { border-bottom: 0; }
/* 2026-09-23 치료 항목 번호 워터마크 제거 */
.ta-page #hx-tx .ta-tx-item header::before { display: none; }
/* 2026-09-23 치료 바로가기 탭 → 좌측 칼럼 (체크리스트 아래) */
.ta-page #hx-tx .hx-split-hd .ta-txnav-p { margin: 26px 0 10px; font-size: 14.5px; }
.ta-page #hx-tx .hx-split-hd .ta-txnav { gap: 8px; }
.ta-page #hx-tx .hx-split-hd .ta-txnav a { padding: 5px 14px; font-size: 15px; }
@media (max-width: 560px) { .ta-page #hx-tx .hx-split-hd .ta-txnav a { padding: 4px 12px; font-size: 13.5px; } }
.ta-page #hx-tx .hx-split-bd .ta-tx { margin-top: 0; border-top: 0; }
.ta-page #hx-tx .hx-split-bd .ta-tx-item:first-child { padding-top: 0; }
@media (min-width: 900px) { .ta-page #hx-tx .hx-split-hd { position: sticky; top: calc(var(--header-h, 80px) + 24px); align-self: start; } }
/* 2026-09-23 치료 좌측 칼럼 순서 — 타이틀 → 탭 → 내용 */
.ta-page #hx-tx .hx-split-hd .ta-txnav-p { margin: 20px 0 10px; }
.ta-page #hx-tx .hx-split-hd .ta-txnav + .ta-lede { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(19,122,82,.14); }
/* 좌측 칼럼이 길어져(804px) 화면에 안 들어오므로 고정 해제 */
@media (min-width: 900px) { .ta-page #hx-tx .hx-split-hd { position: static; } }
/* 2026-09-23 탭 안내 문장 진하게 */
.ta-page #hx-tx .hx-split-hd .ta-txnav-p { color: var(--tg-ink); font-weight: 500; }

/* ═══ 2026-09-23 고압산소 페이지 — 고객 요청 6항목 (챔버 실사, 히어로 챔버, 두 챔버 강조, CASE 이미지, 세션 사진, 귀 압력 픽토그램) ═══ */
.hb-hero { margin: 0; padding: 18px 18px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--tg-hair); box-shadow: 0 18px 40px rgba(19,45,39,.10); }
.hb-hero-pic { border-radius: 12px; overflow: hidden; background: #f6f8f7; }
.hb-hero-pic img { display: block; width: 100%; height: auto; }
.hb-hero-two { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 18px; }
.hb-hero-two > div { padding: 12px 14px; border-radius: 12px; background: #f4f9f6; text-align: center; }
.hb-hero-two b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--tg-deep, #16332A); font-variant-numeric: tabular-nums; }
.hb-hero-two b small { margin-left: 4px; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--tg-med); }
.hb-hero-two span { display: block; margin-top: 6px; font-size: 13px; color: var(--tg-ink-2); }
.hb-hero-two i { font-style: normal; font-size: 22px; font-weight: 300; color: var(--tg-med); }
.hb-hero-note { margin: 14px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.hb-hero-note b { color: var(--tg-ink); font-weight: 600; }
.hb-hero .hb-spec { border-top-color: var(--tg-hair); }
.hb-hero .hb-spec dt { color: var(--tg-mute, #7d8a84); }
.hb-hero .hb-spec dd { color: var(--tg-ink); }
.hb-two-callout { margin: 20px 0 0; padding: 14px 18px; border-radius: 12px; background: #f4f9f6; border-left: 3px solid var(--tg-med); font-size: 15.5px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.hb-two-callout b { color: var(--tg-ink); font-weight: 600; }
/* CASE 카드 상단 사진 */
.hb-page .ta-trio > div:has(> .hb-case-pic) { padding-top: 0; overflow: hidden; border-radius: 0 0 12px 12px; }
.hb-case-pic { margin: 0 -26px 18px; aspect-ratio: 3 / 2; overflow: hidden; }
.hb-case-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 귀 압력 조절 — 픽토그램 6단계 */
.hb-ear-steps { margin-top: 28px; }
.hb-ear-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: ear; }
@media (min-width: 900px) { .hb-ear-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.hb-ear-steps li { position: relative; counter-increment: ear; display: grid; grid-template-rows: auto auto auto; row-gap: 6px; padding: 0 20px 20px; border-radius: 16px; background: #fff; border: 1px solid rgba(19,122,82,.16); overflow: hidden; }
.hb-ear-steps li::before { content: "0" counter(ear); position: absolute; left: 14px; top: 12px; z-index: 1; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--tg-deep-line, #2C5546); color: #fff; font-size: 13px; font-weight: 700; }
.hb-ear-steps img { display: block; width: calc(100% + 40px); max-width: none; margin: 0 -20px 12px; aspect-ratio: 1 / 1; object-fit: cover; background: #eef0ee; }
.hb-ear-steps b { font-size: 17.5px; font-weight: 600; color: var(--tg-ink); }
.hb-ear-steps span { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.hb-ear-cap { margin: 16px 0 0; padding: 14px 18px; border-radius: 12px; background: #fff8ec; border-left: 3px solid #c9612c; font-size: 14.5px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) { .hb-ear-steps ol { grid-template-columns: minmax(0, 1fr); } .hb-hero { padding: 14px 14px 18px; } .hb-hero-two b { font-size: 26px; } .hb-case-pic { margin: 0 -18px 16px; } }

/* ═══ 2026-09-23 자율신경실조증 페이지 (auto-dysautonomia, .ad-page) — 고객 시안을 혀통증 페이지 문법(좌 타이틀+리드+V체크 / 우 마커 소제목+카드)으로 재구성 ═══ */
/* 공통: V 체크 리스트 · 형광펜 마커 소제목(섹션별 --mk) */
.ad-page .hx-split-hd .ta-lede { margin-top: 18px; font-size: 16px; }
.ad-page .ta-keychips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border: 0; }
.ad-page .ta-keychips li { position: relative; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; color: var(--tg-ink); word-break: keep-all; }
.ad-page .ta-keychips li::before { display: none; }
.ad-page .ta-keychips li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 7px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); opacity: .9; }
.ad-page .ta-keychips b { min-width: 64px; flex: 0 0 auto; font-size: 16px; font-weight: 500; color: var(--tg-med-deep); }
.ad-page .ta-keychips b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.ad-page .hx-split-hd .ta-lede.is-b-note { margin-top: 22px; padding: 14px 18px; border-radius: 12px; background: #fff8ec; border-left: 3px solid #c9612c; font-size: 14.5px; line-height: 1.7; color: var(--tg-ink-2); }
.ad-page .ta-sub { margin: 56px 0 22px; }
.ad-page .ta-sub.is-first { margin-top: 0; }
.ad-page .ta-sub-h { display: inline; padding: 0 4px; margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, var(--mk, rgba(250,216,78,.45)) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ad-page #ad-check { --mk: rgba(255,170,190,.42); }
.ad-page #ad-why   { --mk: rgba(140,225,190,.45); }
.ad-page #ad-mech  { --mk: rgba(255,200,150,.48); }
.ad-page #ad-link  { --mk: rgba(150,205,255,.45); }
.ad-page #ta-flow  { --mk: rgba(200,180,245,.45); }
.ad-page #ta-flow .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(200,180,245,.45) 62%); }
.ad-page #hx-tx .hx-split-bd .ta-sub:not(.is-first) { margin-top: 48px; }
@media (min-width: 900px) { .ad-page .hx-split-bd { align-self: start; } }

/* 히어로 — 사진 + 증상 태그 */
.ad-hero { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--tg-hair); box-shadow: 0 18px 40px rgba(19,45,39,.10); }
.ad-hero-pic img { display: block; width: 100%; height: auto; }
.ad-hero-hd { margin: 0; padding: 18px 20px 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--tg-med); }
.ad-hero-tags { list-style: none; margin: 0; padding: 10px 20px 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.ad-hero-tags li { padding: 7px 13px; border-radius: 999px; background: #f4f9f6; font-size: 13.5px; color: var(--tg-ink-2); }

/* 01 자가점검 */
.ad-chk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
@media (min-width: 700px) { .ad-chk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.ad-chk-col { min-width: 0; padding: 20px 22px 12px; border-radius: 18px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.ad-chk-col h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.ad-chk-col h4 b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.ad-chk-col h4 span { font-size: 14px; font-weight: 400; color: var(--tg-ink-2); }
.ad-chk-col.is-heat h4 b { color: #c9612c; }
.ad-chk-col.is-cold h4 b { color: #2f6fb3; }
.ad-chk-col label { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(19,122,82,.10); font-size: 15.5px; line-height: 1.55; color: var(--tg-ink); cursor: pointer; word-break: keep-all; }
.ad-chk-col h4 + label { border-top: 0; }
.ad-chk-col input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tg-med); cursor: pointer; }
.ad-chk-col.is-heat input { accent-color: #c9612c; }
.ad-chk-col.is-cold input { accent-color: #2f6fb3; }
.ad-chk-col label:has(input:checked) span { font-weight: 500; }
.ad-chk-res { margin-top: 20px; padding: 24px 26px; border-radius: 18px; background: #f4f9f6; }
.ad-chk-bar { position: relative; height: 14px; border-radius: 999px; background: #e1e9e5; overflow: hidden; }
.ad-chk-bar::before, .ad-chk-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; transition: width .35s ease; }
.ad-chk-bar::before { left: 0; width: var(--hp, 0%); background: linear-gradient(90deg, #efc3a6, #c9612c); }
.ad-chk-bar::after { right: 0; width: var(--cp, 0%); background: linear-gradient(90deg, #2f6fb3, #a9cbee); }
.ad-chk-nums { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 14px; color: var(--tg-ink-2); }
.ad-chk-nums b { display: inline-block; min-width: 1.2em; margin-right: 8px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ad-chk-nums .is-heat b { color: #c9612c; }
.ad-chk-nums .is-cold b { color: #2f6fb3; }
.ad-chk-nums .is-cold { text-align: right; }
.ad-chk-msg { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-ink); word-break: keep-all; }
.ad-chk-res:not(.is-on) .ad-chk-msg { color: var(--tg-ink-2); }

/* 02 왜 아픈가 */
.ad-prose p { margin: 0 0 14px; font-size: 16.5px; font-weight: 300; line-height: 1.85; color: var(--tg-ink-2); word-break: keep-all; }
.ad-prose p:last-child { margin-bottom: 0; }
.ad-prose b { font-weight: 600; color: var(--tg-ink); }
.ad-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 26px; }
@media (min-width: 760px) { .ad-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-duo > div { padding: 24px 24px 22px; border-radius: 16px; background: #f4f9f6; }
.ad-duo h4 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--tg-ink); word-break: keep-all; }
.ad-duo p { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.ad-quote { margin: 24px 0 0; padding: 22px 26px; border: 1px solid rgba(19,122,82,.16); border-left: 3px solid var(--tg-med); border-radius: 0 14px 14px 0; background: #fff; }
.ad-quote p { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.75; color: var(--tg-ink); word-break: keep-all; }
.ad-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13.5px; line-height: 1.6; color: var(--tg-ink-2); }
.ad-quote.is-han { margin: 0 0 16px; background: #f4f9f6; border-color: transparent; border-left-color: var(--tg-med); }
.ad-order { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ad-order { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-order .an-card h3 { margin: 0 0 10px; padding-right: 56px; font-size: 21px; }
.ad-order .an-card h3 small { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; color: var(--tg-med); }
.ad-order .an-card p { font-size: 16px; }

/* 03 병기 — 인포그래픽 2장 + 증상 지도 표 */
.ad-infog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px) { .ad-infog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ad-infog figure { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.ad-infog img { display: block; width: 100%; height: auto; }
.ad-infog figcaption { padding: 18px 22px 22px; border-top: 1px solid rgba(19,122,82,.10); }
.ad-infog figcaption b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.ad-infog figcaption b i { font-style: normal; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.ad-infog .is-ok figcaption b i { background: #eaf5f0; color: var(--tg-med-deep); }
.ad-infog .is-ng figcaption b i { background: #fdeee6; color: #c9612c; }
.ad-infog figcaption span { display: block; margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.72; color: var(--tg-ink-2); word-break: keep-all; }
.ad-map-p { margin: 0 0 16px; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.ad-map { min-width: 560px; }
.ad-map th, .ad-map td { vertical-align: middle; }
.ad-map tbody th { white-space: nowrap; }
.ad-map td.is-none { color: #b7c1bc; text-align: center; }
.ad-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.ad-dot.is-heat { background: #d96b3a; }
.ad-dot.is-cold { background: #3d7fc4; }

/* 04 동반 증상 — 사진 카드 5 + 기타 카드 */
.ad-link-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ad-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-link-grid .an-card h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(19,122,82,.35); }
.ad-link-grid .an-card h3 a:hover { color: var(--tg-med); }
.ad-link-grid .an-card h3 .tg-han { display: block; margin: 5px 0 0; font-size: 13px; }
.ad-link-grid .ad-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: #f4f9f6; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.ad-link-grid .ad-note b { margin-right: 8px; font-weight: 600; color: var(--tg-med-deep); }
.ad-more-card { display: flex; flex-direction: column; justify-content: center; background: #f4f9f6; border-style: dashed; }
.ad-more-card h3 { margin: 0 0 14px; padding: 0; font-size: 19px; font-weight: 600; color: var(--tg-ink); }
.ad-more-card .ta-pills { gap: 8px; }
.ad-more-card .ta-pills li { padding: 8px 14px; background: #fff; font-size: 14px; color: var(--tg-ink); }

/* 05 특화 치료 — 순서 스트립 + 항목 본문 */
.ad-seq { margin: 0; padding: 22px 24px 20px; border-radius: 18px; background: #f4f9f6; }
.ad-seq ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: seq; }
@media (min-width: 760px) { .ad-seq ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.ad-seq li { position: relative; counter-increment: seq; padding: 14px 16px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.ad-seq li::before { content: "0" counter(seq); display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--tg-med); }
.ad-seq li b { display: block; font-size: 16.5px; font-weight: 600; color: var(--tg-ink); word-break: keep-all; }
.ad-seq li span { display: block; margin-top: 3px; font-size: 13px; color: var(--tg-ink-2); }
@media (min-width: 760px) { .ad-seq li:not(:last-child)::after { content: "›"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: var(--tg-med); } }
.ad-seq p { margin: 16px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ad-seq p b { color: var(--tg-ink); font-weight: 600; }
.ad-tx-key { margin: 0 0 12px; font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.ad-tx-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.ad-tx-list li { position: relative; padding-left: 24px; font-size: 15.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.ad-tx-list li b { font-weight: 600; color: var(--tg-ink); }
.ad-tx-list li::after { content: ""; position: absolute; left: 2px; top: 10px; width: 11px; height: 6px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); }
.ad-tx-why { margin: 16px 0 0; padding: 14px 18px; border-radius: 12px; background: #f4f9f6; border-left: 3px solid var(--tg-med); font-size: 15px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ad-tx-why b { color: var(--tg-ink); font-weight: 600; }
.ad-tx-h4 { margin: 20px 0 10px; font-size: 16.5px; font-weight: 600; color: var(--tg-ink); }
.ad-steps { list-style: none; margin: 0 0 4px; padding: 0; counter-reset: st; display: grid; gap: 8px; }
.ad-steps li { position: relative; counter-increment: st; padding-left: 34px; font-size: 15.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.ad-steps li::before { content: counter(st); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tg-med); color: #fff; font-size: 12px; font-weight: 700; }
.ad-axis { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ad-axis li { padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.ad-axis .a1, .ad-ax.a1 { background: #fdeee6; color: #b0561f; }
.ad-axis .a2, .ad-ax.a2 { background: #eaf5f0; color: var(--tg-med-deep); }
.ad-axis .a3, .ad-ax.a3 { background: #eef3fb; color: #2f6fb3; }
.ad-ax { display: inline-block; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ad-page #hx-tx .ta-tbl { margin-top: 18px; }
.ad-rx { min-width: 760px; }
.ad-rx th, .ad-rx td { vertical-align: middle; }
.ad-rx tbody th { white-space: nowrap; }
.ad-rx tbody th i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--tg-med); }
.ad-page #hx-tx .ta-tx-bd > p:not([class]) { margin: 0 0 12px; font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.ad-page #hx-tx .ta-tx-bd > p:not([class]) b { font-weight: 600; color: var(--tg-ink); }
.ad-page #hx-tx .ta-tx-bd .pg-note { margin-top: 16px; }

/* 06 치료 과정 — 3단계 타임라인 + 지표 */
.ad-page #ta-flow .ta-flow h3 small { margin-left: 8px; font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--tg-med); }
.ad-page #ta-flow .ta-flow > li > ul.ta-pills li { background: #eaf5f0; color: var(--tg-med-deep); font-weight: 500; }
.ad-ind { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
@media (min-width: 640px) { .ad-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ad-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ad-ind > div { padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.ad-ind dt { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--tg-med); }
.ad-ind dd { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.ad-ind-note { margin: 16px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }

@media (max-width: 560px) {
  .ad-page .ta-sub-h { font-size: 23px; }
  .ad-page .ta-keychips b { min-width: 0; }
  .ad-chk-col { padding: 16px 16px 8px; }
  .ad-chk-res { padding: 18px 18px; }
  .ad-chk-nums b { font-size: 24px; }
  .ad-seq { padding: 16px 16px 14px; }
  .ad-hero-tags { padding: 8px 16px 16px; }
}

/* ═══ 2026-09-23 불면증 페이지 (auto-insomnia, .ad-page.in-page) — 공통 문법은 .ad-page 블록 재사용 ═══ */
.in-page #in-why     { --mk: rgba(255,170,190,.42); }
.in-page #in-view    { --mk: rgba(140,225,190,.45); }
.in-page #in-geumjin { --mk: rgba(255,200,150,.48); }
.in-page #in-hbot    { --mk: rgba(150,205,255,.45); }
.in-page #in-taper   { --mk: rgba(255,222,120,.5); }
.in-page .ad-hero-hd { letter-spacing: .02em; }
.in-page .hx-split-hd .ta-lede.is-b-note a { color: var(--tg-med-deep); text-decoration: underline; text-underline-offset: 3px; }
.in-page .hx-split-hd .in-hd-pic { margin: 28px 0 0; border-radius: 22px; overflow: hidden; background: #e8eef4; box-shadow: 0 14px 34px rgba(19,45,39,.14); }
.in-page .hx-split-hd .in-hd-pic img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) { .in-page .hx-split-hd .in-hd-pic { margin-top: 22px; } }

/* 01 수면제 vs 한의원 */
.in-vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .in-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.in-vs-col { padding: 24px 24px 20px; border-radius: 18px; border: 1px solid rgba(19,122,82,.16); background: #fff; }
.in-vs-col.is-pill { background: #fbf6f2; border-color: rgba(201,97,44,.18); }
.in-vs-col.is-km { background: #f4f9f6; }
.in-vs-col .ta-tag { margin-bottom: 6px; }
.in-vs-col.is-pill .ta-tag { color: #b0561f; }
.in-vs-col h4 { margin: 0 0 14px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.in-vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.in-vs-col li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 300; line-height: 1.68; color: var(--tg-ink-2); word-break: keep-all; }
.in-vs-col.is-pill li::before { content: "!"; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #c9612c; color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
.in-vs-col.is-km li::after { content: ""; position: absolute; left: 3px; top: 9px; width: 11px; height: 6px; border-left: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(-45deg); }
.in-voice { margin-top: 24px; padding: 24px 28px; border-radius: 18px; background: var(--tg-deep, #16332A); color: #fff; }
.in-voice-q { margin: 0 0 12px; font-size: 19px; font-weight: 500; line-height: 1.6; letter-spacing: -.01em; word-break: keep-all; }
.in-voice p:not(.in-voice-q) { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.82); word-break: keep-all; }
.in-page #in-why .ta-tbl { margin-top: 28px; }
.in-cmp { min-width: 640px; }
.in-cmp th, .in-cmp td { vertical-align: middle; }
.in-cmp tbody th { white-space: nowrap; }
.in-cmp td:nth-child(3) { color: var(--tg-ink); font-weight: 400; }

/* 02 여섯 유형 */
.in-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; font-size: 14.5px; color: var(--tg-ink-2); }
.in-group-h b { font-size: 17px; font-weight: 600; color: var(--tg-ink); }
.in-group-h b::after { content: "·"; margin-left: 10px; color: rgba(19,122,82,.4); }
.in-types + .in-group-h { margin-top: 28px; }
.in-types { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .in-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1099px) { .in-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.in-types .an-card h3 { padding-right: 48px; font-size: 20px; }
.in-types .an-card h3 .tg-han { display: block; margin: 4px 0 0; font-size: 13px; }
.in-types .an-card p { font-size: 15.5px; }
.in-types .ad-note { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: #f4f9f6; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.in-types .ad-note b { margin-right: 8px; font-weight: 600; color: var(--tg-med-deep); }
.in-page #in-view .pg-note { margin-top: 18px; }

/* 03 흐름 6칸 */
@media (min-width: 760px) { .in-seq ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .in-seq ol { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .in-seq li { padding: 12px 12px 10px; } .in-seq li b { font-size: 15px; } .in-seq li span { font-size: 12px; } .in-seq li:not(:last-child)::after { right: -11px; } }
@media (min-width: 760px) and (max-width: 1099px) { .in-seq li:nth-child(3)::after { display: none; } }
.in-page #hx-tx .ta-tx-bd a { color: var(--tg-med-deep); text-decoration: underline; text-underline-offset: 3px; }

/* 04 금진옥액 — 와이드 도식 + 4단계 + 기전 카드 */
.in-wide { margin: 0 0 18px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.in-wide img { display: block; width: 100%; height: auto; }
.in-steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .in-steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.in-steps4 li { padding: 16px 16px 14px; border-radius: 14px; background: #f4f9f6; }
.in-steps4 span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--tg-med); }
.in-steps4 b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.in-steps4 p { margin: 6px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.in-page #in-geumjin .pg-note { margin-top: 14px; }
.in-mech { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .in-mech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.in-mech .an-card h3 .tg-han { display: block; margin: 4px 0 0; font-size: 13px; }
.in-mech .an-card p { font-size: 15.5px; }
.in-page #in-geumjin .ta-notes { margin-top: 24px; }

/* 05 고압산소 — 4단계 일러스트 + 다섯 이유 */
.in-hb4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .in-hb4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.in-hb4 li { padding: 0 16px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(19,122,82,.16); overflow: hidden; }
.in-hb4 img { display: block; width: calc(100% + 32px); max-width: none; margin: 0 -16px 10px; aspect-ratio: 1 / 1; object-fit: cover; background: #fff; }
.in-hb4 span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--tg-med); }
.in-hb4 b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.in-hb4 p { margin: 6px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.in-page #in-hbot .pg-note { margin-top: 14px; }
.in-reasons { list-style: none; margin: 0; padding: 0; counter-reset: rs; display: grid; gap: 10px; }
.in-reasons li { position: relative; counter-increment: rs; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 18px 22px 18px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.in-reasons li::before { content: "0" counter(rs); grid-row: 1 / span 2; align-self: start; font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(19,122,82,.22); }
.in-reasons b { font-size: 17.5px; font-weight: 600; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.in-reasons p { grid-column: 2; margin: 6px 0 0; font-size: 15px; font-weight: 300; line-height: 1.72; color: var(--tg-ink-2); word-break: keep-all; }
.in-rec { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: #f4f9f6; }
.in-rec .ta-tag { margin-bottom: 10px; }
.in-rec .ta-pills { gap: 8px; }
.in-rec .ta-pills li { padding: 8px 14px; background: #fff; font-size: 14px; color: var(--tg-ink); }
.in-page #in-hbot .in-rec + .pg-note { margin-top: 18px; }

/* 06 검사 카드 (장비 이미지 contain) */
.in-exam { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .in-exam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.in-exam .dx-pic.is-dev { background: #fff; border-bottom: 1px solid rgba(19,122,82,.10); }
.in-exam .dx-pic.is-dev img { object-fit: contain; padding: 18px; }
.in-exam .an-card h3 .tg-han { display: block; margin: 4px 0 0; font-size: 13px; }
.in-exam .an-card p { font-size: 15.5px; }
.in-page #ta-flow .pg-note { margin-top: 16px; }

/* 07 감량 4단계 — 용량 막대 */
.in-phase { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .in-phase { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.in-phase li { position: relative; display: grid; grid-template-rows: 120px auto auto 1fr auto; row-gap: 6px; padding: 18px 18px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.in-phase i { position: relative; display: block; height: 120px; border-radius: 10px; background: #f1f5f3; overflow: hidden; }
.in-phase i::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: var(--dose, 100%); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #e9b79b, #c9612c); transition: height .4s; }
.in-phase li.is-free i::after { background: linear-gradient(180deg, #bfe3d2, var(--tg-med)); }
.in-phase span { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--tg-med); }
.in-phase b { font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.in-phase p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.in-phase em { justify-self: start; margin-top: 8px; padding: 5px 11px; border-radius: 999px; background: #fdeee6; color: #b0561f; font-style: normal; font-size: 12.5px; font-weight: 600; }
.in-phase li.is-free em { background: #eaf5f0; color: var(--tg-med-deep); }
.in-page #in-taper .pg-note { margin-top: 16px; }

/* 08 FAQ 그룹 소제목 */
.in-page #hx-faq .hx-split-bd .ta-sub:not(.is-first) { margin-top: 40px; }
.in-page #hx-faq .hx-split-bd .ta-sub { margin-bottom: 16px; }

@media (max-width: 560px) {
  .in-steps4, .in-hb4, .in-phase { grid-template-columns: minmax(0, 1fr); }
  .in-voice { padding: 20px 20px; }
  .in-voice-q { font-size: 17px; }
  .in-reasons li { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 16px 16px 14px; }
  .in-reasons li::before { font-size: 24px; }
}

/* ═══ 2026-09-23 금진옥액 페이지 (auto-geumjin, .ad-page.gj-page) — 공통 문법은 .ad-page / .in-page 블록 재사용 ═══ */
.gj-page #gj-intro    { --mk: rgba(255,170,190,.42); }
.gj-page #gj-mech     { --mk: rgba(255,200,150,.48); }
.gj-page #gj-exam     { --mk: rgba(140,225,190,.45); }
.gj-page #gj-who      { --mk: rgba(150,205,255,.45); }
.gj-page #gj-evidence { --mk: rgba(200,180,245,.45); }
.gj-page #gj-combo    { --mk: rgba(250,216,78,.45); }
.gj-page #gj-care     { --mk: rgba(255,170,190,.42); }

/* 壹 도해 + 인용 */
.gj-anat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 26px; }
@media (min-width: 760px) { .gj-anat { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: center; } }
.gj-anat-pic { margin: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(19,122,82,.16); box-shadow: 0 14px 34px rgba(19,45,39,.10); }
.gj-anat-pic img { display: block; width: 100%; height: auto; }
.gj-anat-txt dl { margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gj-anat-txt dl > div { padding: 14px 16px; border-radius: 12px; background: #f4f9f6; }
.gj-anat-txt dt { font-size: 17px; font-weight: 600; color: var(--tg-med-deep); }
.gj-anat-txt dd { margin: 4px 0 0; font-size: 13.5px; color: var(--tg-ink-2); }
.gj-anat-txt p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.gj-quote { margin-top: 26px; padding: 26px 30px; background: #f4f9f6; border-color: transparent; border-left-color: var(--tg-med); }
.gj-quote p { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.gj-quote span { display: block; margin-top: 12px; font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--tg-ink-2); word-break: keep-all; }
.gj-quote span b { font-weight: 600; color: var(--tg-med-deep); }
.gj-quote cite { margin-top: 12px; font-weight: 500; color: var(--tg-ink); }

/* 한방이 보는 몸 — 비교 사진 · 표 · 혀 상태 카드 */
.gj-cmp figcaption span { font-size: 14.5px; }
.gj-cmp-tbl { margin-top: 18px; }
.ad-dot.is-ok { background: var(--tg-med); }
.gj-page .ad-map { min-width: 600px; }
.gj-page .ad-map td .ta-sw { margin-right: 6px; }
.gj-page #gj-mech .ad-tx-why { margin-top: 18px; }
.gj-states { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .gj-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gj-state { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.gj-state-pic { grid-row: 1 / span 2; display: block; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: #fbeeee; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(19,122,82,.16); }
.gj-state-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.gj-state h3 { grid-column: 2; margin: 4px 0 8px; padding-right: 40px; font-size: 18.5px; }
.gj-state p { grid-column: 2; font-size: 15px; }
.gj-page #gj-mech .ta-tbl { margin-top: 28px; }
.gj-self { padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.gj-self > p:first-child { margin: 0 0 10px; font-size: 15.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.gj-self .ad-tx-list { margin: 0; }
.gj-self .ad-tx-list li { font-size: 16px; color: var(--tg-ink); font-weight: 400; }
.gj-self .pg-note { margin-top: 14px; }

/* 貳 설진기 — 좌측 장비 + 실제 사진 슬라이드 + 5단계 */
.gj-hd-dev { position: relative; margin: 26px 0 0; border-radius: 22px; overflow: hidden; background: #f7f9f8; border: 1px solid var(--tg-hair); box-shadow: 0 14px 34px rgba(19,45,39,.10); }
.gj-hd-dev img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 14px 18px 56px; }
.gj-hd-dev figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid rgba(19,122,82,.16); }
.gj-hd-dev figcaption b { font-size: 14.5px; font-weight: 600; color: var(--tg-ink); }
.gj-hd-dev figcaption span { font-size: 12.5px; color: var(--tg-ink-2); }
.gj-real { margin-top: 0; }
.gj-real .dx-real-list li { width: 200px; height: 200px; background: #3b1c19; }
.gj-real .dx-real-list img { transform: none; }
.gj-real .pg-note { margin-top: 14px; }
.gj-steps5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .gj-steps5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .gj-steps5 li { padding: 14px 14px 12px; } }
.gj-steps5 span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tg-med); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0; margin-bottom: 10px; }
.gj-steps5 b { font-size: 15px; }
.gj-steps5 p { font-size: 13px; }
.gj-page #gj-exam .ad-tx-why { margin-top: 18px; }
.gj-page #gj-exam .pg-note { margin-top: 14px; }

/* 參 시술 과정 — 사진 2장 + 수치 3 */
.gj-photos { margin-top: 36px; }
.gj-photos figure img { aspect-ratio: 16 / 9; object-fit: cover; }
.gj-photos figcaption span { font-size: 14.5px; }
.gj-stats { margin-top: 18px; }
.gj-stats dd { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.gj-stats dd small { display: block; margin-top: 4px; font-size: 13px; font-weight: 300; color: var(--tg-ink-2); }

/* 肆 추천 대상 — 한자 배지 리스트 */
.gj-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 700px) { .gj-who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.gj-who li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.gj-who b { flex: 0 0 auto; display: grid; place-items: center; min-width: 54px; height: 54px; padding: 0 8px; border-radius: 12px; background: #f4f9f6; font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--tg-med-deep); }
.gj-who span { font-size: 15.5px; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }

/* 伍 근거 카드 */
.gj-ev .an-card h3 { font-size: 18px; line-height: 1.45; }
.gj-ev .an-card p { font-size: 15px; }
.gj-ev cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; color: var(--tg-ink-2); }
.gj-page #gj-evidence .pg-note { margin-top: 18px; }

/* 陸 병행 치료 카드 */
.gj-combo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .gj-combo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gj-combo .an-card h3 { font-size: 19px; }
.gj-combo .an-card h3 .tg-han { display: block; margin: 4px 0 0; font-size: 13px; }
.gj-combo .an-card h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(19,122,82,.35); }
.gj-combo .an-card p { font-size: 15px; }

/* 柒 주의 */
.gj-warn li { font-size: 15.5px; }
.gj-warn li b { font-weight: 600; color: var(--tg-ink); }
.gj-prepost { margin-top: 20px; }
.gj-prepost .ad-tx-list { margin: 0; }
.gj-prepost h4 { margin-bottom: 12px; }

@media (max-width: 560px) {
  .gj-state { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; }
  .gj-state-pic { width: 84px; height: 84px; }
  .gj-quote { padding: 20px 20px; }
  .gj-quote p { font-size: 19px; }
  .gj-steps5 { grid-template-columns: minmax(0, 1fr); }
  .gj-real .dx-real-list li { width: 150px; height: 150px; }
}

/* ═══ 2026-09-23 금주클리닉 페이지 (auto-alcohol, .ad-page.al-page) — 공통 문법은 .ad-page / .in-page / .gj-page 블록 재사용 ═══ */
.al-page #al-why     { --mk: rgba(255,170,190,.42); }
.al-page #al-loop    { --mk: rgba(140,225,190,.45); }
.al-page #al-bridge  { --mk: rgba(255,200,150,.48); }
.al-page #al-doc     { --mk: rgba(150,205,255,.45); }
.al-page #al-penalty { --mk: rgba(255,200,150,.48); }
.al-page #al-remedy  { --mk: rgba(200,180,245,.45); }
.al-page #al-org     { --mk: rgba(140,225,190,.45); }
.al-page #al-docs    { --mk: rgba(150,205,255,.45); }
.al-page .ad-hero-pic { aspect-ratio: 4 / 3; overflow: hidden; }
.al-page .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.al-page .hx-keys li b { font-weight: 600; color: var(--tg-ink); }
.al-page .hx-chips a { padding: 10px 16px; font-size: 14.5px; }

/* 01 네 가지 이유 — 배지 카드 */
.al-why { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .al-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.al-badge { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; margin-bottom: 14px; border-radius: 12px; background: #f4f9f6; font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--tg-med-deep); }
.al-why .an-card h3 { padding-right: 0; font-size: 19px; }
.al-why .an-card p { font-size: 15.5px; }
.al-page .gj-quote { margin-top: 24px; }

/* 03 한 장 요약 — 두 기둥 */
.al-loop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .al-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.al-loop-col { padding: 24px 24px 20px; border-radius: 18px; border: 1px solid rgba(19,122,82,.16); background: #fff; }
.al-loop-col.is-a { background: #fbf6f2; border-color: rgba(201,97,44,.18); }
.al-loop-col.is-a .ta-tag { color: #b0561f; }
.al-loop-col.is-b { background: #f4f9f6; }
.al-loop-col ol { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: lp; }
.al-loop-col li { position: relative; counter-increment: lp; padding: 12px 0 12px 44px; }
.al-loop-col li + li::before { content: "↓"; position: absolute; left: 10px; top: -8px; font-size: 13px; color: rgba(19,122,82,.45); }
.al-loop-col.is-a li + li::before { color: rgba(201,97,44,.5); }
.al-loop-col li::after { content: counter(lp); position: absolute; left: 0; top: 13px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid rgba(19,122,82,.25); font-size: 13px; font-weight: 700; color: var(--tg-med-deep); }
.al-loop-col.is-a li::after { border-color: rgba(201,97,44,.35); color: #b0561f; }
.al-loop-col.is-b li::after { background: var(--tg-med); border-color: var(--tg-med); color: #fff; }
.al-loop-col li b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.al-loop-col li span { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.al-loop-foot { margin: 12px 0 0; padding-top: 14px; border-top: 1px dashed rgba(19,122,82,.25); font-size: 14.5px; line-height: 1.65; color: var(--tg-ink); word-break: keep-all; }
.al-loop-col.is-a .al-loop-foot { border-top-color: rgba(201,97,44,.3); }

/* 04 말 vs 기록 */
.al-vs { margin-top: 20px; }
.al-vs .in-vs-col h4 { font-size: 19px; }
.al-vs-p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }

/* 06 표 */
.al-tbl { margin-top: 16px; }
.al-page .ad-map { min-width: 560px; }
.al-page .ad-map td b { font-weight: 600; color: var(--tg-ink); }
.al-page .ad-map td small { display: block; font-size: 12.5px; color: var(--tg-ink-2); }
.al-org tbody th i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--tg-med); }
.al-page .ad-map-p + .ad-tx-list { margin-top: 0; }
.al-page #al-penalty .pg-note { margin-top: 14px; }

/* 07 구제절차 */
.al-remedy li { grid-template-columns: minmax(0, 1fr); padding: 20px 22px; }
.al-remedy li::before { display: none; }
.al-remedy b em { display: inline-block; margin-right: 10px; padding: 3px 10px; border-radius: 999px; background: #eaf5f0; font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--tg-med-deep); vertical-align: 2px; }
.al-remedy li:first-child b em { background: #fdeee6; color: #b0561f; }
.al-remedy p { grid-column: 1; }
.al-remedy .ta-pills { grid-column: 1; margin-top: 12px; gap: 6px; }
.al-remedy .ta-pills li { display: block; padding: 5px 11px; border: 0; background: #f4f9f6; font-size: 13px; }

/* 08 공신력 카드 */
.al-trust .an-card.is-note { background: #fff8ec; border-color: rgba(201,97,44,.22); }
.al-trust .an-card.is-note .tp-no { color: rgba(201,97,44,.12); }
.al-trust .an-card.is-note h3 small { color: #b0561f; }

/* 10 발급 서류 */
.al-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .al-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.al-docs article { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: 0; background: #fff; border: 1px solid rgba(19,122,82,.2); box-shadow: 0 10px 26px rgba(19,45,39,.08); }
.al-docs article::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; background: var(--tg-med); }
.al-docs span { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--tg-med); }
.al-docs h3 { margin: 8px 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.al-docs p { flex: 1; margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.al-docs em { align-self: flex-start; margin-top: 16px; padding: 5px 11px; border-radius: 999px; background: #f4f9f6; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--tg-med-deep); }

@media (max-width: 560px) {
  .al-loop-col { padding: 18px 16px 16px; }
  .al-remedy li { padding: 16px 16px; }
  .al-page .hx-chips a { padding: 9px 13px; font-size: 13.5px; }
}

/* ═══ 2026-09-23 통증매선 페이지 (pain-maeseon, .ad-page.ms-page) — 공통 문법 재사용 + 히어로 4단계·자극 지속 도해·타임라인·곡선 ═══ */
.ms-page #ms-why      { --mk: rgba(255,170,190,.42); }
.ms-page #ms-how      { --mk: rgba(140,225,190,.45); }
.ms-page #ms-where    { --mk: rgba(150,205,255,.45); }
.ms-page #ms-face     { --mk: rgba(255,200,150,.48); }
.ms-page #ms-combo    { --mk: rgba(250,216,78,.45); }
.ms-page #ms-compare  { --mk: rgba(200,180,245,.45); }
.ms-page #ms-evidence { --mk: rgba(140,225,190,.45); }
.ms-page .hx-chips a { padding: 10px 16px; font-size: 14.5px; }

/* 히어로 — 4단계 도해 */
.ms-hero { padding: 18px 18px 18px; }
.ms-hero .ad-hero-hd { padding: 0 2px 12px; }
.ms-hero-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ms-hero-steps li { border-radius: 12px; overflow: hidden; background: #f4f9f6; border: 1px solid rgba(19,122,82,.14); }
.ms-hero-steps img { display: block; width: 100%; height: auto; aspect-ratio: 563 / 336; object-fit: cover; }
.ms-hero-steps span { display: block; padding: 10px 12px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--tg-med); }
.ms-hero-steps b { display: block; padding: 3px 12px 0; font-size: 15.5px; font-weight: 600; color: var(--tg-ink); }
.ms-hero-steps p { margin: 0; padding: 4px 12px 12px; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--tg-ink-2); word-break: keep-all; }
.ms-hero-note { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ms-hero-note b { color: var(--tg-ink); font-weight: 600; }

/* 카드 그리드 */
.ms-three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ms-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1099px) { .ms-three { grid-template-columns: minmax(0, 1fr); } }
.ms-three .an-card h3 { padding-right: 44px; font-size: 19px; }
.ms-three .an-card p { font-size: 15px; }
.ms-three .ad-note, .ms-four .ad-note, .ms-where .ad-note, .ms-ev .ad-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f4f9f6; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.ms-three .ad-note b, .ms-four .ad-note b, .ms-where .ad-note b, .ms-ev .ad-note b { margin-right: 8px; font-weight: 600; color: var(--tg-med-deep); }
.ms-four .an-card h3 { font-size: 19px; }
.ms-four .an-card p { font-size: 15px; }
.ms-where { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ms-where { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-where .an-card h3 { padding-right: 0; font-size: 19px; }
.ms-where .an-card p { font-size: 15px; }
.ms-ev .an-card h3 { font-size: 18px; line-height: 1.45; }
.ms-ev .an-card p { font-size: 15px; }
.ms-ev cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--tg-ink-2); }

/* 자극 지속 도해 */
.ms-dur { padding: 22px 24px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.ms-dur-axis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 12px 110px; font-size: 12.5px; color: var(--tg-ink-2); }
.ms-dur-axis span:not(:first-child) { text-align: center; }
.ms-dur-axis span:last-child { text-align: right; }
.ms-dur-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 0; }
.ms-dur-row + .ms-dur-row { border-top: 1px dashed rgba(19,122,82,.18); }
.ms-dur-row b { font-size: 15px; font-weight: 600; color: var(--tg-ink); }
.ms-dur-bar { position: relative; height: 16px; border-radius: 999px; background: #eef2f0; overflow: hidden; }
.ms-dur-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.ms-dur-bar.is-acu i { width: 4%; background: #c9612c; }
.ms-dur-bar.is-ms i { width: 78%; background: linear-gradient(90deg, var(--tg-med), rgba(19,122,82,.15)); }
.ms-dur-row span { grid-column: 2; margin-top: 4px; font-size: 13px; color: var(--tg-ink-2); }
.ms-count { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ms-count { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-count dd, .ms-stats dd { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.ms-count dd small, .ms-stats dd small { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); letter-spacing: 0; }
.ms-stats { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-page .ad-ind + .pg-note, .ms-page .ms-dur + .pg-note { margin-top: 14px; }

/* 회복 타임라인 */
.ms-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; counter-reset: tl; }
@media (min-width: 900px) { .ms-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } }
.ms-timeline li { position: relative; padding: 18px 16px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.ms-timeline li::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--tg-med), rgba(19,122,82,.25)); }
.ms-timeline li:nth-child(n+4)::before { background: var(--tg-med); }
.ms-timeline span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #eaf5f0; font-size: 12.5px; font-weight: 700; color: var(--tg-med-deep); }
.ms-timeline b { display: block; margin-top: 10px; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.ms-timeline p { margin: 6px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.62; color: var(--tg-ink-2); word-break: keep-all; }
.ms-page #ta-flow .ms-timeline + .pg-note { margin-top: 14px; }

/* 얼굴 표 · vs 상세 */
.ms-face-tbl { min-width: 640px; }
.ms-face-tbl tbody th { white-space: nowrap; }
.ms-page .in-vs-col h4 { font-size: 18px; }
.ms-vs-dl { margin: 14px 0 0; display: grid; gap: 8px; }
.ms-vs-dl > div { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.7); }
.ms-vs-dl dt { font-size: 13px; font-weight: 600; color: var(--tg-med-deep); }
.ms-vs-a .ms-vs-dl dt { color: #b0561f; }
.ms-vs-dl dd { margin: 3px 0 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }

/* 곡선 도해 */
.ms-curve { margin: 0; padding: 20px 20px 14px; border-radius: 18px; background: #fff; border: 1px solid rgba(19,122,82,.16); }
.ms-curve svg { display: block; width: 100%; height: auto; }
.ms-curve svg text { font-family: inherit; }
.ms-curve figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 13.5px; color: var(--tg-ink-2); }
.ms-curve figcaption span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: 3px; border-radius: 2px; }
.ms-curve figcaption .is-a::before { background: #c9612c; }
.ms-curve figcaption .is-b::before { background: #137a52; }
.ms-page .ms-curve + .pg-note { margin-top: 14px; }

/* 3치료 비교표 */
.ms-cmp { min-width: 760px; }
.ms-cmp thead th i { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; color: var(--tg-med); }
.ms-cmp th, .ms-cmp td { vertical-align: middle; }
.ms-cmp tbody th { white-space: nowrap; }
.ms-cmp td:last-child { color: var(--tg-ink); font-weight: 400; background: rgba(19,122,82,.03); }

/* 근거 한계 · 참고문헌 */
.ms-limits li b { font-weight: 600; color: var(--tg-ink); }
.ms-refs ol { margin: 0; padding: 0 24px 4px 44px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.ms-refs .pg-note { padding: 0 24px 20px; }
.ms-page #ms-evidence .ta-tbl { margin-top: 28px; }

@media (max-width: 560px) {
  .ms-hero { padding: 14px; }
  .ms-hero-steps { grid-template-columns: minmax(0, 1fr); }
  .ms-dur-axis { margin-left: 0; }
  .ms-dur-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .ms-dur-row span { grid-column: 1; }
  .ms-page .hx-chips a { padding: 9px 13px; font-size: 13.5px; }
}

/* ═══ 2026-09-23 한약 8종 fx 페이지 — 09 진료 과정 5단계 블록 ═══ */
.fx-flow5 .fx-h.ctr { margin-bottom: 28px; }
.fx-flow5 .fx-step-cards { counter-reset: none; }
.fx-flow5 .fx-small.ctr { text-align: center; margin-top: 20px; }
.fx-herbs .fx-herb-box + .fx-dose { margin-top: 18px; }
.fx-flow5 .fx-herb-box { margin-top: 24px; }

/* 2026-09-28 혀통증 자율신경 균형 — 펄스 링이 우측 카드에 가려지지 않도록 가운데 원을 카드 위로 */
.an-balance .an-mid { z-index: 3; }

/* 2026-09-28 혀통증 치료 목록 — 라벨(기본 치료·약침 등)을 알약형으로 */
.ta-page:not(.hb-page) #hx-tx .ta-tx-item header .ta-tag { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13px; font-weight: 400; letter-spacing: .04em; line-height: 1; }
.ta-page:not(.hb-page) #hx-tx .ta-tx-item.is-key header .ta-tag { background: var(--tg-deep-line, #2C5546); }

/* 2026-09-28 혀통증 자율신경 균형 — 펄스 링 테두리 5px, 원 안 글자 18px */
.an-mid::before, .an-mid::after { border-width: 5px; }
.an-mid span { font-size: 18px; }
@media (max-width: 899px) { .an-mid span { font-size: 18px; } }

/* 2026-09-28 치료 항목 하단 "더 자세히 알아보기" 링크 + 링크 호버 시 밑줄 제거 */
.ta-tx-item .ta-more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(19,122,82,.3); background: #fff; font-size: 15px; font-weight: 500; color: var(--tg-med-deep); text-decoration: none; transition: background .18s, color .18s, border-color .18s; }
.ta-tx-item .ta-more-link span { transition: transform .18s; }
.ta-tx-item .ta-more-link:hover, .ta-tx-item .ta-more-link:focus-visible { background: var(--tg-med); border-color: var(--tg-med); color: #fff; text-decoration: none; }
.ta-tx-item .ta-more-link:hover span { transform: translateX(3px); }
.ta-tx-item header h3 a:hover, .ta-tx-item header h3 a:focus-visible { text-decoration: none; border-bottom-color: transparent; }
@media (max-width: 560px) { .ta-tx-item .ta-more-link { padding: 8px 15px; font-size: 14px; } }
/* 2026-09-28 "더 자세히 알아보기"를 제목 하단으로 이동 · 제목 밑줄 제거 */
.ta-tx-item header h3 a { border-bottom: 0; }
.ta-tx-item header .ta-more-link { margin-top: 14px; }

/* 2026-09-28 혀통증 치료 섹션 — 우측 상단 치료 조합 플로우 그래픽 (.txf) */
.txf { margin: 0 0 44px; padding: 26px 24px 20px; border-radius: 20px; background: #f4f9f6; border: 1px solid rgba(19,122,82,.12); }
.txf-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 900px) { .txf-row { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.75fr); gap: 26px; align-items: stretch; } }
.txf-step { position: relative; display: flex; flex-direction: column; padding: 18px 16px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(19,122,82,.18); }
.txf-step:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -20px; width: 10px; height: 10px; margin-left: -6px; border-top: 2px solid var(--tg-med); border-right: 2px solid var(--tg-med); transform: rotate(135deg); }
@media (min-width: 900px) { .txf-step:not(:last-child)::after { left: auto; right: -19px; top: 50%; bottom: auto; margin: -6px 0 0; transform: rotate(45deg); } }
.txf-no { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--tg-med); }
.txf-step b { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--tg-ink); word-break: keep-all; }
.txf-step b a { color: inherit; text-decoration: none; border: 0; }
.txf-step p { margin: 6px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--tg-ink-2); word-break: keep-all; }
.txf-step.is-base { background: var(--tg-med); border-color: var(--tg-med); }
.txf-step.is-core { background: var(--tg-deep-line, #2C5546); border-color: var(--tg-deep-line, #2C5546); }
.txf-step.is-base .txf-no, .txf-step.is-core .txf-no { color: rgba(255,255,255,.75); }
.txf-step.is-base b, .txf-step.is-core b, .txf-step.is-base p, .txf-step.is-core p { color: #fff; }
.txf-step.is-base p, .txf-step.is-core p { color: rgba(255,255,255,.85); }
.txf-plus { align-self: flex-start; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.35; text-decoration: none; }
.txf-plus:hover { background: #fff; color: var(--tg-med-deep); text-decoration: none; }
.txf-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.txf-chips a { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #eaf5f0; color: var(--tg-med-deep); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .18s, color .18s; }
.txf-chips a:hover { background: var(--tg-med); color: #fff; text-decoration: none; }
.txf-step b a:hover { text-decoration: none; opacity: .85; }
.txf-loop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(19,122,82,.25); font-size: 14px; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.txf-loop span { font-size: 18px; color: var(--tg-med); }
.txf-loop b { color: var(--tg-ink); font-weight: 600; }
@media (max-width: 560px) { .txf { padding: 18px 16px 16px; } }
/* 2026-09-28 플로우 STEP 04 칩 제거(좌측 바로가기와 중복) → 네 칸 같은 너비 */
@media (min-width: 900px) { .txf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 2026-09-28 혀통증 치료 섹션 — "함께 챙기실 것" 안내를 좌측 열로 */
.ta-page #hx-tx .hx-split-hd .rx-callout.ta-callout { margin: 28px 0 0; font-size: 15px; line-height: 1.75; word-break: keep-all; }
.ta-page #hx-tx .hx-split-hd .rx-callout.ta-callout { background: #fdf3ea; border-color: rgba(176,86,31,.22); }
.ta-page #hx-tx .hx-split-hd .rx-callout.ta-callout b { color: #b0561f; }

/* 2026-09-28 혀통증 금진옥액 항목 — 질문형 3단(아이콘) + 시행 4단계 세로 타임라인 */
.ta-why.is-q { gap: 0; margin-top: 26px; }
.ta-why.is-q > div { padding: 2px 0 18px; border-radius: 0; background: none; border-bottom: 1px solid rgba(19,122,82,.14); }
.ta-why.is-q > div + div { padding-top: 18px; }
.ta-why.is-q > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 760px) {
  .ta-why.is-q { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ta-why.is-q > div, .ta-why.is-q > div + div { padding: 2px 20px 0; border-bottom: 0; border-left: 1px solid rgba(19,122,82,.16); }
  .ta-why.is-q > div:first-child { padding-left: 0; border-left: 0; }
  .ta-why.is-q > div:last-child { padding-right: 0; }
}
.tq-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; background: #eaf5f0; color: var(--tg-med); }
.tq-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ta-why.is-q h4 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; word-break: keep-all; }
.ta-why.is-q h4 em { margin-right: 5px; font-style: normal; font-weight: 700; color: var(--tg-med); }
.ta-why.is-q p { font-size: 14.5px; line-height: 1.7; }
.tq-tl { margin-top: 30px; padding: 22px 24px 22px; border-radius: 16px; background: #f4f9f6; }
.tq-tl-hd { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--tg-med); }
.tq-tl ol { list-style: none; margin: 0; padding: 0; }
.tq-tl li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; padding-bottom: 20px; }
.tq-tl li:last-child { padding-bottom: 0; }
.tq-tl li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; border-radius: 2px; background: rgba(19,122,82,.22); }
.tq-tl-no { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tg-med); color: #fff; font-size: 14px; font-weight: 700; }
.tq-tl li b { align-self: center; font-size: 16px; font-weight: 600; color: var(--tg-ink); line-height: 34px; }
.tq-tl li p { grid-column: 2; margin: 2px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) { .tq-tl { padding: 18px 16px; } .tq-tl li { column-gap: 12px; } }
.tq-ico .fx-band-img { width: 26px; height: 26px; }
/* 2026-09-28 금진옥액 질문형 아이콘 확대 */
.tq-ico { width: 64px; height: 64px; }
.tq-ico .fx-band-img { width: 36px; height: 36px; }
/* 2026-09-28 금진옥액 질문형 아이콘 → 각 칸 우측 하단 워터마크 */
.ta-why.is-q > div { position: relative; overflow: hidden; }
.ta-why.is-q h4, .ta-why.is-q p { position: relative; z-index: 1; }
.ta-why.is-q .tq-ico { position: absolute; right: 12px; bottom: 0; z-index: 0; width: auto; height: auto; margin: 0; border-radius: 0; background: none; pointer-events: none; }
.ta-why.is-q > div:last-child .tq-ico { right: 0; }
.ta-why.is-q .tq-ico .fx-band-img { width: 118px; height: 118px; background-color: rgba(19,122,82,.08); }
@media (max-width: 759px) { .ta-why.is-q .tq-ico { right: 0; bottom: 8px; } .ta-why.is-q .tq-ico .fx-band-img { width: 96px; height: 96px; } }
.ta-why.is-q h4 { font-size: 18px; }
.ta-why.is-q p { font-size: 15.5px; }
/* 2026-09-28 금진옥액 타임라인 — 글자 +1px, 번호 원·숫자 확대 */
.tq-tl li { grid-template-columns: 42px minmax(0, 1fr); column-gap: 18px; }
.tq-tl-no { width: 42px; height: 42px; font-size: 17px; }
.tq-tl li:not(:last-child)::before { left: 20px; top: 46px; }
.tq-tl li b { font-size: 17px; line-height: 42px; }
.tq-tl li p { font-size: 15.5px; }
@media (max-width: 560px) { .tq-tl li { column-gap: 14px; } }
.tq-tl li:not(:last-child)::before { left: 21px; width: 1px; border-radius: 0; transform: translateX(-50%); background: var(--tg-med); }
/* 2026-09-28 금진옥액 타임라인 — "시행 전부터 경과 확인까지"를 카드 상단에 걸친 알약 라벨로 */
.tq-tl { position: relative; margin-top: 44px; padding-top: 34px; }
.tq-tl-hd { position: absolute; left: 24px; top: 0; transform: translateY(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
@media (max-width: 560px) { .tq-tl { padding-top: 30px; } .tq-tl-hd { left: 16px; } }
/* 2026-09-28 .ta-link dd 와 같은 설명 글자 설정을 다른 페이지의 항목-설명 목록(.ta-notes)에도 */
.ta-notes dd { font-size: 15.5px; font-weight: 400; line-height: 1.65; }
@media (max-width: 560px) { .ta-notes dd { font-size: 14.5px; } }
/* 2026-09-28 치료 항목 제목 영역 제품 이미지 (혀통증 교감단) */
.ta-tx-item header .ta-tx-prod { margin: 16px 0 0; max-width: 240px; }
.ta-tx-item header .ta-tx-prod img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px rgba(19,45,39,.16)); }
.ta-tx-item header .ta-tx-prod + .ta-more-link { margin-top: 16px; }
@media (max-width: 899px) { .ta-tx-item header .ta-tx-prod { max-width: 260px; } }
/* 2026-09-28 혀통증 경추추나 "왜 혀질환에 중요한가" — 번호를 워터마크 숫자로 */
.ta-why.is-num > div { position: relative; overflow: hidden; }
.ta-why.is-num h4, .ta-why.is-num p { position: relative; z-index: 1; }
.ta-why.is-num h4 { padding-right: 56px; }
.ta-why-no { position: absolute; right: 14px; top: 6px; z-index: 0; font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(19,122,82,.09); pointer-events: none; }
@media (max-width: 560px) { .ta-why-no { font-size: 52px; } }
.ta-why.is-num h4 { padding-right: 0; }
/* 2026-09-28 혀통증 경추추나 — "치료는 이렇게 진행합니다"를 제목 아래(주황 계열)로 */
.ta-tx-item header p.ta-how { margin: 16px 0 0; padding: 16px 18px; border-left: 3px solid #c9612c; border-radius: 0 10px 10px 0; background: #fdf3ea; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.ta-tx-item header p.ta-how b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: #b0561f; }
/* 2026-09-28 혀통증 흉추 협척혈 — 침 + 약침 + 부항 조합 도식 */
.tq-combo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 24px 0 20px; padding: 24px 22px; border-radius: 16px; background: #f4f9f6; }
.tq-combo > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.tq-combo-c { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--tg-med); color: var(--tg-med-deep); font-size: 16px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 6px 14px rgba(19,45,39,.08); }
.tq-combo p { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.tq-combo-plus { justify-self: start; width: 64px; text-align: center; font-style: normal; font-size: 22px; font-weight: 300; line-height: 1; color: var(--tg-med); }
@media (min-width: 760px) {
  .tq-combo { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 10px; align-items: start; }
  .tq-combo > div { grid-template-columns: minmax(0, 1fr); row-gap: 14px; justify-items: center; text-align: center; }
  .tq-combo-c { width: 76px; height: 76px; font-size: 17px; }
  .tq-combo-plus { width: auto; margin-top: 26px; font-size: 26px; }
}
.ta-tx-item header p.ta-how { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
.ta-how .nw { white-space: nowrap; }
/* 2026-09-28 흉추 협척혈 조합 도식 — 원 안 아이콘(침·주사기·부항), 이름은 원 아래 */
.tq-combo > div { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 2px; align-items: start; }
.tq-combo-c { grid-row: 1 / span 2; color: var(--tg-med); }
.tq-combo-c .fx-band-img { width: 32px; height: 32px; }
.tq-combo-t { grid-column: 2; margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--tg-med-deep); }
.tq-combo p { grid-column: 2; }
@media (min-width: 760px) {
  .tq-combo > div { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 0; justify-items: center; }
  .tq-combo-c { grid-row: auto; }
  .tq-combo-c .fx-band-img { width: 40px; height: 40px; }
  .tq-combo-t { grid-column: 1; margin-top: 12px; font-size: 17px; }
  .tq-combo p { grid-column: 1; margin-top: 6px; }
}
/* 2026-09-28 진료 흐름 타임라인 — 마지막 원 아래로 내려가는 연결선 가리기 */
@media (min-width: 900px) {
  .ta-page #ta-flow .hx-split-bd .ta-flow > li:last-child { position: relative; background: linear-gradient(#fff, #fff) no-repeat 0 56px / 70px calc(100% - 56px); }
}
/* 2026-09-28 좌측 안내 박스(is-b-note) — 둥근 주황 박스 → 혀통증 안내(pg-note)처럼 각진 직선형 */
.ad-page .hx-split-hd .ta-lede.is-b-note { padding: 18px 22px; border-radius: 0; border-left: 3px solid rgba(19,122,82,.4); background: #eff3f2; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: #5d6b64; }
.ad-page .hx-split-hd .ta-lede.is-b-note b { color: var(--tg-ink); }
.ad-page .hx-split-hd .ta-lede.is-b-note { border-left-color: #c9612c; background: #fdf3ea; color: var(--tg-ink-2); }
.ad-page .hx-split-hd .ta-lede.is-b-note b { color: #b0561f; }
/* 2026-09-28 자율신경실조증 진료의 순서 — 카드 4개 → 가로 플로우 */
.ad-order-flow { margin: 0; }
.ad-order-flow .txf-step b { font-size: 19px; }
.ad-order-flow .txf-step p { font-size: 14.5px; line-height: 1.65; }
/* 2026-09-28 자율신경실조증 진료의 순서 — 원형 4단계 플로우 */
.adc { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.adc::before { content: ""; position: absolute; left: 47px; top: 48px; bottom: 48px; width: 1px; background: var(--tg-med); }
.adc > li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: center; }
.adc-c { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; width: 96px; height: 96px; border-radius: 50%; background: #fff; border: 2px solid var(--tg-med); box-shadow: 0 0 0 6px #fff, 0 10px 22px rgba(19,45,39,.10); text-align: center; }
.adc-c em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--tg-med); line-height: 1; }
.adc-c b { margin-top: 5px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--tg-ink); word-break: keep-all; }
.adc > li:nth-child(3) .adc-c { background: var(--tg-med); border-color: var(--tg-med); }
.adc > li:nth-child(4) .adc-c { background: var(--tg-deep-line, #2C5546); border-color: var(--tg-deep-line, #2C5546); }
.adc > li:nth-child(n+3) .adc-c em { color: rgba(255,255,255,.75); }
.adc > li:nth-child(n+3) .adc-c b { color: #fff; }
.adc p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
@media (min-width: 760px) {
  .adc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; }
  .adc::before { left: 12.5%; right: 12.5%; top: 55px; bottom: auto; width: auto; height: 1px; }
  .adc > li { grid-template-columns: minmax(0, 1fr); row-gap: 18px; justify-items: center; align-items: start; text-align: center; }
  .adc-c { width: 110px; height: 110px; }
  .adc-c b { font-size: 18px; }
}
@media (min-width: 760px) { .adc > li { align-content: start; } }
/* 2026-09-28 자율신경실조증 진료의 순서 — 혀통증 진료 흐름처럼 세로 타임라인(펄스 원) */
.adc.is-v { display: block; gap: 0; }
.adc.is-v::before { left: 34px; right: auto; top: 34px; bottom: 34px; width: 1px; height: auto; background: var(--tg-deep-line, #2C5546); }
.adc.is-v > li { display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 28px; row-gap: 0; justify-items: stretch; align-items: start; text-align: left; padding: 0 0 36px; }
.adc.is-v > li:last-child { padding-bottom: 0; background: linear-gradient(#fff, #fff) no-repeat 0 34px / 70px calc(100% - 34px); }
.adc.is-v .adc-c { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 1px solid var(--tg-deep-line, #2C5546); color: var(--tg-deep-line, #2C5546); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1; box-shadow: 0 0 0 3px #fff; animation: flowPulse 2.6s ease-out infinite; }
.adc.is-v > li:nth-child(2) .adc-c { animation-delay: .5s; }
.adc.is-v > li:nth-child(3) .adc-c { animation-delay: 1s; }
.adc.is-v > li:nth-child(4) .adc-c { animation-delay: 1.5s; background: var(--tg-deep-line, #2C5546); color: #fff; }
.adc.is-v > li:nth-child(3) .adc-c { background: #fff; border-color: var(--tg-deep-line, #2C5546); }
.adc.is-v .adc-no { grid-column: 2; margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--tg-med); }
.adc.is-v h4 { grid-column: 2; margin: 4px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--tg-ink); }
.adc.is-v p { grid-column: 2; margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
@media (prefers-reduced-motion: reduce) { .adc.is-v .adc-c { animation: none; } }
@media (max-width: 560px) { .adc.is-v > li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; } .adc.is-v::before { left: 28px; top: 28px; } .adc.is-v .adc-c { width: 56px; height: 56px; font-size: 19px; } .adc.is-v > li:last-child { background-position: 0 28px; background-size: 58px calc(100% - 28px); } .adc.is-v .adc-no { margin-top: 4px; } .adc.is-v h4 { font-size: 19px; } }
/* 2026-09-28 진료의 순서 — "STEP 01 / 배제" 옆으로 설명 배치 (PC) */
@media (min-width: 760px) {
  .adc.is-v > li { grid-template-columns: 68px 120px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 26px; align-items: center; }
  .adc.is-v .adc-c { grid-row: 1 / span 2; }
  .adc.is-v .adc-no { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
  .adc.is-v h4 { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; }
  .adc.is-v p { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
/* 2026-09-28 자율신경실조증 진료의 순서 — 화살표(쉐브론) 띠 플로우 */
.adp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.adp-h { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 16px 20px 28px; text-align: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px)); }
.adp-h em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; line-height: 1; }
.adp-h b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.adp > li:nth-child(1) .adp-h { background: #e3f1ea; color: var(--tg-med-deep); }
.adp > li:nth-child(2) .adp-h { background: #b8dcc9; color: #0f5a3d; }
.adp > li:nth-child(3) .adp-h { background: var(--tg-med); color: #fff; }
.adp > li:nth-child(4) .adp-h { background: var(--tg-deep-line, #2C5546); color: #fff; }
.adp > li:nth-child(1) .adp-h em, .adp > li:nth-child(2) .adp-h em { color: var(--tg-med); }
.adp > li:nth-child(n+3) .adp-h em { color: rgba(255,255,255,.72); }
.adp p { margin: 12px 4px 18px; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); text-align: center; word-break: keep-all; }
@media (min-width: 760px) {
  .adp { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .adp > li + li { margin-left: -14px; }
  .adp-h { height: 88px; padding: 0 30px 0 38px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%); }
  .adp > li:first-child .adp-h { padding-left: 24px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
  .adp > li:last-child .adp-h { padding-right: 24px; }
  .adp p { margin: 16px 0 0; padding: 0 22px 0 30px; font-size: 14.5px; }
  .adp > li:first-child p { padding-left: 14px; }
}
.adp p { font-size: 16px; }
@media (min-width: 760px) { .adp p { font-size: 15.5px; } }
/* 2026-09-28 자율신경실조증 히어로 — 증상 태그를 흐르는 알약 2줄로 */
.ad-hero-mq { --fx-soft: #f1f7f4; --fx-line: rgba(19, 122, 82, .16); margin: 12px 0 0; padding: 0 0 20px; gap: 10px; }
.ad-hero-mq .fx-marquee-row { gap: 10px; animation-duration: 36s; }
.ad-hero-mq .fx-marquee-row.is-rev { animation-duration: 32s; }
.ad-hero-mq .fx-marquee-row li { gap: 8px; padding: 9px 16px 9px 9px; font-size: 14.5px; }
.ad-hero-mq .fx-marquee-row li span { width: 24px; height: 24px; font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .ad-hero-mq .fx-marquee-row { animation: none; } }
.ad-hero-mq .fx-marquee-row li { padding-right: 19px; }
/* 2026-09-28 자율신경실조증 — 흐르는 증상을 히어로 사진에서 분리한 별도 섹션 */
.ad-page #ad-sym .hx-split-bd { align-self: center; min-width: 0; }
.ad-sym-mq { --fx-soft: #f1f7f4; --fx-line: rgba(19, 122, 82, .16); margin: 0; gap: 14px; }
.ad-sym-mq .fx-marquee-row { animation-duration: 60s; }
.ad-sym-mq .fx-marquee-row.is-rev { animation-duration: 54s; }
.ad-sym-mq .fx-marquee-row li { font-size: 16px; }
@media (max-width: 560px) { .ad-sym-mq { gap: 10px; } .ad-sym-mq .fx-marquee-row li { padding: 10px 16px 10px 10px; font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .ad-sym-mq .fx-marquee-row { animation: none; } }
.adp p { text-align: left; }
.adp p { font-weight: 400; color: #000; }
.ad-map thead th { font-size: 15.5px; }
@media (max-width: 560px) { .ad-map thead th { font-size: 14.5px; } }
.ad-map tbody td { font-size: 16.5px; }
@media (max-width: 560px) { .ad-map tbody td { font-size: 15px; } }
.ad-map tbody td { font-weight: 400; }

/* 자율신경실조증 · 그 밖에 함께 옵니다 — 크기 다른 원 버블 */
.ad-bub { position: relative; width: 100%; aspect-ratio: 440 / 500; margin: 6px 0 0; padding: 0; list-style: none; }
.ad-bub li { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em; aspect-ratio: 1; border: 2px solid var(--bc); border-radius: 50%; background: #fff; text-align: center; line-height: 1.3; font-size: 15px; color: var(--tg-ink); word-break: keep-all; }
.ad-bub li span:first-child { font-weight: 600; color: var(--bc); }
.ad-bub li span + span { font-size: .92em; }
.ad-bub .b-a { --bc: #2f7d5b; width: 38.6%; left: 3.4%; top: 3%; }
.ad-bub .b-b { --bc: #c9612c; width: 43.2%; left: 51.1%; top: 5%; font-size: 16px; }
.ad-bub .b-c { --bc: #3a86a8; width: 29.5%; left: 31.8%; top: 39.4%; }
.ad-bub .b-d { --bc: #b58a1e; width: 36.4%; left: 1.1%; top: 55%; }
.ad-bub .b-e { --bc: #a3527a; width: 34.1%; left: 60.2%; top: 52%; }
.ad-bub .b-f { --bc: #5f9e3c; width: 29.5%; left: 34.6%; top: 72.6%; }
@media (max-width: 1100px) { .ad-bub li { font-size: 14px; } .ad-bub .b-b { font-size: 14.5px; } }
@media (max-width: 420px) { .ad-bub li { font-size: 13px; } .ad-bub .b-b { font-size: 13.5px; } }
/* 버블 v2 — 글자 키움 · 옅은 테두리 · 바깥으로 퍼지는 펄스 */
.ad-bub { isolation: isolate; }
.ad-bub li { --bl: color-mix(in srgb, var(--bc) 38%, #fff); border-color: var(--bl); font-size: 17px; }
.ad-bub .b-b { font-size: 18px; }
.ad-bub li::before, .ad-bub li::after { content: ""; position: absolute; inset: -2px; z-index: -1; border: 2px solid var(--bl); border-radius: 50%; animation: adBubPulse 3.2s ease-out infinite; animation-delay: var(--dl, 0s); pointer-events: none; }
.ad-bub li::after { animation-delay: calc(var(--dl, 0s) + 1.6s); }
.ad-bub .b-b { --dl: .5s; } .ad-bub .b-c { --dl: 1.1s; } .ad-bub .b-d { --dl: .8s; } .ad-bub .b-e { --dl: 1.4s; } .ad-bub .b-f { --dl: .3s; }
@keyframes adBubPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ad-bub li::before, .ad-bub li::after { animation: none; opacity: 0; } }
@media (max-width: 1100px) { .ad-bub li { font-size: 15.5px; } .ad-bub .b-b { font-size: 16px; } }
@media (max-width: 420px) { .ad-bub li { font-size: 14px; } .ad-bub .b-b { font-size: 14.5px; } }
.ad-bub li { background: color-mix(in srgb, var(--bc) 11%, #fff); }
.ad-bub li { background: linear-gradient(145deg, color-mix(in srgb, var(--bc) 3%, #fff) 15%, color-mix(in srgb, var(--bc) 22%, #fff) 100%); }
.ad-bub li { background: radial-gradient(circle at center, color-mix(in srgb, var(--bc) 2%, #fff) 35%, color-mix(in srgb, var(--bc) 24%, #fff) 100%); }
.ad-bub li::before, .ad-bub li::after { inset: 0; border: 0; background: color-mix(in srgb, var(--bc) 30%, #fff); }
@keyframes adBubPulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.3); opacity: 0; } }
.ad-bub li { border: 0; }
.ad-more-card { background: #fff; }
.ad-bub .b-a { left: 5.4%; top: 8%; }
.ad-bub .b-b { top: 1%; }
.ad-more-card h3 { font-size: 22px; text-align: center; }
@media (max-width: 600px) { .ad-more-card h3 { font-size: 20px; } }

/* 자율신경실조증 · 네 치료를 놓는 순서 — 층위가 깊어지는 계단 */
.ad-seq.is-stair { padding: 0; border-radius: 0; background: none; }
.ad-seq.is-stair ol { gap: 10px; align-items: end; }
.ad-seq.is-stair li { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; padding: 18px 20px 20px; border: 0; border-radius: 16px; }
.ad-seq.is-stair li::before { position: absolute; top: 10px; right: 14px; margin: 0; font-size: 44px; font-weight: 700; letter-spacing: 0; line-height: 1; color: currentColor; opacity: .14; }
.ad-seq.is-stair li::after { content: none !important; }
.ad-seq.is-stair li span { order: -1; margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: inherit; opacity: .8; }
.ad-seq.is-stair li b { font-size: 18px; color: inherit; }
.ad-seq.is-stair li:nth-child(1) { min-height: 118px; background: #eaf5ef; color: #1f5a41; }
.ad-seq.is-stair li:nth-child(2) { min-height: 148px; background: #cfe8da; color: #174c36; }
.ad-seq.is-stair li:nth-child(3) { min-height: 178px; background: #5fa883; color: #fff; }
.ad-seq.is-stair li:nth-child(4) { min-height: 208px; background: var(--tg-med); color: #fff; }
.ad-seq.is-stair li:nth-child(n+3) span { opacity: .9; }
.ad-seq.is-stair p { margin: 18px 0 0; padding: 16px 20px; border-left: 3px solid #c9612c; background: #fdf3ea; font-size: 15.5px; font-weight: 400; line-height: 1.7; color: #333; }
.ad-seq.is-stair p b { display: block; margin-bottom: 4px; color: #b0561f; }
@media (max-width: 759px) {
  .ad-seq.is-stair { padding: 0; }
  .ad-seq.is-stair ol { grid-template-columns: 1fr; gap: 8px; }
  .ad-seq.is-stair li { min-height: 0 !important; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 15px 18px; }
  .ad-seq.is-stair li::before { top: 50%; transform: translateY(-50%); font-size: 34px; }
  .ad-seq.is-stair li b { font-size: 16.5px; }
  .ad-seq.is-stair li span { order: 1; font-size: 13px; }
  .ad-seq.is-stair li:nth-child(2) { margin-left: 14px; }
  .ad-seq.is-stair li:nth-child(3) { margin-left: 28px; }
  .ad-seq.is-stair li:nth-child(4) { margin-left: 42px; }
  .ad-seq.is-stair p { padding: 14px 16px; font-size: 15px; }
}

/* 자율신경실조증 · 일곱 가지 치료 조합 — 인체 층위 도해 + 카드 목록 */
.adx { container: adx / inline-size; margin: 0 0 34px; }
.adx-cap { margin: 0 0 18px; font-size: 14.5px; color: var(--tg-ink-2); letter-spacing: .01em; }
.adx-grid { display: grid; gap: 22px; }
.adx-fig { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.adx-body { display: block; width: 100%; height: auto; overflow: visible; }
.adx-body text { font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: central; letter-spacing: .02em; }
.adx-body .adx-ln { display: none; }
.adx-legend { margin: 0; padding: 16px 16px 14px; border: 1px solid #e3e8e5; border-radius: 4px; background: #f6f8f7; }
.adx-legend dt { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; color: var(--tg-med); }
.adx-legend dd { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: #333; word-break: keep-all; }
.adx-legend dd:last-child { margin-bottom: 0; }
.adx-legend dd b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 700; }
.adx-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.adx-list > li > a { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 92px; padding: 12px 18px 12px 16px; border: 1px solid #e3e8e5; border-left: 3px solid var(--c); border-radius: 4px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.adx-list > li > a:hover { box-shadow: 0 8px 20px rgba(20, 50, 40, .08); transform: translateX(2px); }
.adx-list > li > a:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.adx-list > li > a > em { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.adx-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adx-t i { font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: .12em; color: var(--c); }
.adx-t b { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--tg-ink); word-break: keep-all; }
.adx-t small { font-size: 14.5px; line-height: 1.5; color: #555; word-break: keep-all; }
.adx-tag { padding: 6px 16px; border: 1px solid var(--c); border-radius: 999px; font-size: 13px; line-height: 1; color: var(--c); white-space: nowrap; }
@container adx (min-width: 640px) {
  .adx-grid { grid-template-columns: 196px minmax(0, 1fr); gap: 0; align-items: start; }
  .adx-fig { display: block; }
  .adx-body { width: 196px; }
  .adx-body text { font-size: 15px; }
  .adx-body .adx-ln { display: inline; }
  .adx-legend { margin-top: 18px; margin-right: 20px; }
  .adx-list { padding-top: 64px; }
  .adx-list > li > a { height: 92px; }
}
@media (max-width: 560px) {
  .adx-fig { grid-template-columns: 130px minmax(0, 1fr); }
  .adx-list > li > a { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 12px; }
  .adx-list > li > a > em { width: 36px; height: 36px; font-size: 13px; }
  .adx-t b { font-size: 17px; }
  .adx-t small { font-size: 14px; }
  .adx-tag { position: absolute; top: 12px; right: 12px; padding: 4px 10px; font-size: 11.5px; }
}
@media (max-width: 560px) { .adx-body text { font-size: 19px; } }
/* 인체 도해는 좌측(요약 칩 아래), 카드는 우측 */
.adx-side { margin: 28px 0 0; }
.adx-side .adx-fig { grid-template-columns: 180px minmax(0, 1fr); gap: 4px; }
.adx-side .adx-body text { font-size: 16px !important; }
.hx-split-bd .adx .adx-list { padding-top: 0; }
@media (max-width: 560px) { .adx-side .adx-fig { grid-template-columns: 140px minmax(0, 1fr); gap: 8px; } .adx-side .adx-body text { font-size: 18px !important; } }
.adx-side .adx-body text { font-size: 24px !important; }
@media (max-width: 560px) { .adx-side .adx-body text { font-size: 28px !important; } }
/* 인체 실루엣(이미지 마스크) 버전 — 우측 카드 옆, 전체 폭 축소 */
.hx-split-bd .adx { max-width: 860px; }
@container adx (min-width: 640px) {
  .adx-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .adx-body { width: 220px; }
  .hx-split-bd .adx .adx-list { padding-top: 50px; }
}
@media (max-width: 560px) { .hx-split-bd .adx .adx-body text { font-size: 22px; } }
/* 인체 이미지 키움 */
.hx-split-bd .adx { max-width: 900px; }
@container adx (min-width: 640px) {
  .adx-grid { grid-template-columns: 270px minmax(0, 1fr); }
  .adx-body { width: 270px; }
  .hx-split-bd .adx .adx-list { padding-top: 107px; }
  .adx-legend { margin-right: 40px; }
}
@media (max-width: 560px) { .hx-split-bd .adx .adx-body text { font-size: 26px; } }
/* 도해–카드 간격 확보, 블록은 칸 전체 폭 */
.hx-split-bd .adx { max-width: none; }
@container adx (min-width: 640px) {
  .adx-grid { grid-template-columns: 330px minmax(0, 1fr); }
  .adx-body { width: 330px; }
  .adx-legend { margin-right: 76px; }
}
@container adx (max-width: 639px) {
  .hx-split-bd .adx .adx-body { width: 230px; margin-right: -80px; }
  .hx-split-bd .adx .adx-body text { font-size: 20px; }
}
@container adx (max-width: 480px) {
  .hx-split-bd .adx .adx-body { width: 200px; margin-right: -70px; }
  .hx-split-bd .adx .adx-body text { font-size: 22px; }
}
/* 인체 이미지 한 단계 더 키움 */
@container adx (min-width: 640px) {
  .adx-grid { grid-template-columns: 360px minmax(0, 1fr); }
  .adx-body { width: 360px; }
  .hx-split-bd .adx .adx-list { padding-top: 150px; }
  .adx-legend { margin: 18px 90px 0 16px; }
}
@container adx (max-width: 639px) { .hx-split-bd .adx .adx-body { width: 230px; margin-right: -80px; } }
@container adx (max-width: 480px) {
  .hx-split-bd .adx .adx-fig { grid-template-columns: 150px minmax(0, 1fr); }
  .hx-split-bd .adx .adx-body { width: 210px; margin-right: -60px; }
}
/* 간격 줄이고 연결선 직선 */
@container adx (min-width: 640px) {
  .adx-grid { grid-template-columns: 320px minmax(0, 1fr); }
  .adx-body { width: 320px; }
  .adx-legend { margin: 18px 50px 0 16px; }
}
@container adx (max-width: 639px) { .hx-split-bd .adx .adx-body { width: 210px; margin-right: -60px; } }
@container adx (max-width: 480px) { .hx-split-bd .adx .adx-body { width: 195px; margin-right: -45px; } }
@container adx (min-width: 640px) { .hx-split-bd .adx .adx-list { padding-top: 110px; } }
/* 인체 이미지 살짝 축소 */
@container adx (min-width: 640px) {
  .adx-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .adx-body { width: 300px; }
  .hx-split-bd .adx .adx-list { padding-top: 100px; }
  .adx-legend { margin: 18px 46px 0 14px; }
}
.adx-list { gap: 16px; }
.hx-split-bd .adx { margin-bottom: 72px; }
@media (max-width: 560px) { .hx-split-bd .adx { margin-bottom: 48px; } }
/* 좁은 화면: 치료 분류를 인체 아래로 */
@container adx (max-width: 639px) {
  .hx-split-bd .adx .adx-fig { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hx-split-bd .adx .adx-body { width: 240px; margin: 0 auto; transform: translateX(11px); }
  .hx-split-bd .adx .adx-body text { font-size: 19px; }
  .hx-split-bd .adx .adx-legend { margin: 0; }
}
/* 변증 처방 비교 — 비교표·배합 원칙은 항목 전체 폭 */
.ta-tx-item > .ad-rx-full { grid-column: 1 / -1; min-width: 0; margin-top: 8px; }
.ta-tx-item:has(> .ad-rx-full) > header { position: static; }
/* 3축 — 큰 숫자 워터마크 카드 */
.ad-axis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 8px; }
.ad-axis li { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; border-radius: 14px; font-size: 13.5px; font-weight: 400; }
.ad-axis li em { position: absolute; right: 10px; bottom: -14px; font-style: normal; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: currentColor; opacity: .12; pointer-events: none; }
.ad-axis li b { position: relative; font-size: 16px; font-weight: 700; }
.ad-axis li span { position: relative; font-size: 13.5px; opacity: .85; }
@media (max-width: 560px) {
  .ad-axis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ad-axis li { padding: 14px 18px; }
  .ad-axis li em { font-size: 52px; bottom: -10px; }
}
details.ta-tbl > .tg-table-wrap:last-child { margin-bottom: 16px; }
/* 일곱 가지 치료 상세 — 라벨·강조박스를 인체 도해/카드 색으로 */
#hx-tx:has(.adx) #tx-chuna      { --ac: #d0632a; --at: #fbe7dc; }
#hx-tx:has(.adx) #tx-hyeopcheok { --ac: #1f5e4a; --at: #e3eee8; }
#hx-tx:has(.adx) #tx-taeban     { --ac: #b5501c; --at: #f6d9c7; }
#hx-tx:has(.adx) #tx-hbot       { --ac: #2e6b55; --at: #e6eeea; }
#hx-tx:has(.adx) #tx-gyogam     { --ac: #164a3a; --at: #e4ece9; }
#hx-tx:has(.adx) #tx-rx         { --ac: #3d7a62; --at: #e8f1ec; }
#hx-tx:has(.adx) #tx-geumjin    { --ac: #8e3322; --at: #f6e5e1; }
#hx-tx#hx-tx:has(.adx) .ta-tx-item header .ta-tag { background: var(--ac); }
#hx-tx#hx-tx:has(.adx) .ta-tx-item .ad-tx-why { background: var(--at); border-left-color: var(--ac); }
#hx-tx#hx-tx:has(.adx) .ta-tx-item .ad-tx-why { border-radius: 0; }

/* 교감단(05) 상세 — 인용·처방명 풀이·카드 */
#tx-gyogam .gq { position: relative; margin: 18px 0 22px; padding: 30px 32px 24px; background: var(--ac, #164a3a); color: #fff; overflow: hidden; }
#tx-gyogam .gq::before { content: "\201C"; position: absolute; top: -22px; right: 18px; font-family: Georgia, serif; font-size: 150px; line-height: 1; color: #fff; opacity: .1; }
#tx-gyogam .gq-han { position: relative; margin: 0 0 12px; font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-size: 26px; font-weight: 600; line-height: 1.45; letter-spacing: .12em; }
#tx-gyogam .gq-ko { position: relative; margin: 0 0 14px; font-size: 16px; line-height: 1.7; opacity: .92; }
#tx-gyogam .gq cite { display: block; font-style: normal; font-size: 13px; letter-spacing: .06em; opacity: .7; }
#tx-gyogam .gq-lead { margin-bottom: 8px; }
#tx-gyogam .gq-sub { margin: 0 0 22px; padding: 4px 0 4px 18px; border-left: 2px solid var(--ac, #164a3a); }
#tx-gyogam .gq-sub p { margin: 0 0 6px; color: #444; line-height: 1.8; }
#tx-gyogam .gq-sub cite { font-style: normal; font-size: 13px; color: var(--ac, #164a3a); letter-spacing: .06em; }
#tx-gyogam .gq-name { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; margin: 22px 0; padding: 22px 24px; background: var(--at, #e4ece9); }
#tx-gyogam .gq-name > p { margin: 0; }
#tx-gyogam .gq-fig { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#tx-gyogam .gq-orb { display: grid; place-items: center; align-content: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; }
#tx-gyogam .gq-orb b { font-family: "Noto Serif KR", serif; font-size: 24px; font-weight: 700; line-height: 1.1; }
#tx-gyogam .gq-orb i { font-style: normal; font-size: 11px; opacity: .8; }
#tx-gyogam .gq-orb.is-fire { color: #d0632a; box-shadow: inset 0 0 0 2px #f2c3aa; }
#tx-gyogam .gq-orb.is-water { color: #2f6fb3; box-shadow: inset 0 0 0 2px #bcd3ee; }
#tx-gyogam .gq-flow { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; line-height: 1.3; }
#tx-gyogam .gq-flow em { font-style: normal; color: #555; }
#tx-gyogam .gq-flow em:first-child { color: #d0632a; }
#tx-gyogam .gq-flow em:last-child { color: #2f6fb3; }
#tx-gyogam .gq-flow strong { padding: 2px 10px; background: var(--ac, #164a3a); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
#tx-gyogam .gq-cards > div { border-radius: 0; border-top: 3px solid var(--ac, #164a3a); background: #f6f8f7; }
#tx-gyogam .gq-cards > div h4 { color: var(--ac, #164a3a); }
#tx-gyogam .gq-cards > div.is-warn { border-top-color: #c9612c; background: #fdf3ea; }
#tx-gyogam .gq-cards > div.is-warn h4 { color: #b0561f; }
#tx-gyogam .gq-ev { border-radius: 0; }
#tx-gyogam .gq-ev > b { display: block; margin-bottom: 4px; font-size: 12.5px; letter-spacing: .12em; color: var(--ac, #164a3a); }
@media (max-width: 560px) {
  #tx-gyogam .gq { padding: 24px 20px 20px; }
  #tx-gyogam .gq-han { font-size: 21px; }
  #tx-gyogam .gq-name { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
  #tx-gyogam .gq-fig { flex-direction: row; justify-content: center; gap: 10px; }
  #tx-gyogam .gq-flow em:first-child::after { content: ""; }
}

/* 일곱 가지 치료 — 컨테이너 전체 폭, 좌 인체 / 우 제목 클릭 시 내용 펼침 */
#hx-tx > .adx-wide { grid-column: 1 / -1; min-width: 0; margin-top: 30px; }
.adx-wide .adx { margin-bottom: 0; }
.adx.is-acc .adx-panel { display: none; }
.adx.is-acc .adx-list > li.is-open > .adx-panel { display: block; animation: adxIn .35s ease-out; }
@keyframes adxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.adx-panel { margin: 0 0 6px; padding: 30px 30px 26px; border: 1px solid #e3e8e5; border-top: 0; background: #fff; }
.adx-panel > .ta-tx-item { margin: 0; padding: 0 !important; border: 0 !important; }
.adx-panel > .ta-tx-item > header .ta-tag,
.adx-panel > .ta-tx-item > header h3 { display: none; }
.adx-list > li.is-open > a { background: color-mix(in srgb, var(--c) 7%, #fff); border-color: color-mix(in srgb, var(--c) 40%, #fff); border-left-color: var(--c); }
.adx.is-acc .adx-list > li > a::after { content: ""; position: absolute; right: 22px; bottom: 14px; width: 7px; height: 7px; border-right: 1.5px solid var(--c); border-bottom: 1.5px solid var(--c); transform: rotate(45deg); opacity: .6; transition: transform .2s; }
.adx.is-acc .adx-list > li.is-open > a::after { transform: rotate(225deg) translate(-3px, -3px); opacity: 1; }
.adx .adx-ln { transition: opacity .25s; }
.adx.has-open .adx-ln { opacity: 0; }
.adx-hl { opacity: 0; transition: opacity .3s; }
.adx-hl[data-b="tx-chuna"] { fill: #d0632a; }
.adx-hl[data-b="tx-hyeopcheok"] { fill: #1f5e4a; }
.adx-hl[data-b="tx-taeban"] { fill: #b5501c; }
.adx-hl[data-b="tx-hbot"] { fill: #2e6b55; }
.adx-hl.is-on { opacity: .28; }
@container adx (min-width: 640px) {
  .adx-wide .adx-fig { position: sticky; top: 100px; }
}
@media (max-width: 560px) {
  .adx-panel { padding: 20px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .adx.is-acc .adx-list > li.is-open > .adx-panel { animation: none; } }
#hx-tx#hx-tx .adx-panel > .ta-tx-item > header .ta-tag,
#hx-tx#hx-tx .adx-panel > .ta-tx-item > header h3 { display: none; }
/* 전체 폭 버전 — 인체 키움 */
@container adx (min-width: 640px) {
  .adx-wide .adx-grid { grid-template-columns: 380px minmax(0, 1fr); }
  .adx-wide .adx-body { width: 380px; }
  .adx-wide .adx-body text { font-size: 17px; }
  .adx-wide .adx .adx-list { padding-top: 160px; }
  .adx-wide .adx-legend { margin: 20px 70px 0 20px; }
}
@container adx (max-width: 639px) { .adx-wide .adx .adx-body { width: 260px; transform: translateX(10px); } .adx-wide .adx .adx-body text { font-size: 22px; } }
/* 제목·안내 문구는 우측 카드 위 */
.adx-r { min-width: 0; }
.adx-r-hd { margin-bottom: 18px; }
.adx-r-hd .ta-sub { margin-top: 0; }
.adx-r-hd .adx-cap { margin: 6px 0 0; }
@container adx (min-width: 640px) {
  .adx-wide .adx-r { position: relative; padding-top: 160px; }
  .adx-wide .adx .adx-list { padding-top: 0; }
  .adx-wide .adx-r-hd { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
}
@container adx (min-width: 640px) {
  .adx-wide .adx-grid { grid-template-columns: 430px minmax(0, 1fr); }
  .adx-wide .adx-body { width: 430px; }
  .adx-wide .adx-legend { margin: 20px 120px 0 20px; }
}
@container adx (max-width: 639px) { .adx-wide .adx .adx-body { width: 294px; transform: translateX(27px); } }

/* 네 치료를 놓는 순서 — 세로 플로우 */
.ad-seq.is-vflow { padding: 0; border-radius: 0; background: none; }
.ad-vflow { list-style: none; margin: 0; padding: 0; }
.ad-vflow > li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding-bottom: 14px; }
.ad-vflow > li:last-child { padding-bottom: 0; }
.ad-vflow > li:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: linear-gradient(var(--c), #d9e2dd); }
.ad-vflow em { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-top: 10px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.ad-vflow > li > div { padding: 16px 22px 17px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 6%, #fff); }
.ad-vflow i { display: block; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--c); }
.ad-vflow b { display: block; margin-top: 3px; font-size: 19px; font-weight: 700; color: var(--tg-ink); }
.ad-vflow p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.7; color: #444; word-break: keep-all; }
.ad-seq.is-vflow > p { margin: 22px 0 0; padding: 16px 20px; border-left: 3px solid #c9612c; background: #fdf3ea; font-size: 15.5px; font-weight: 400; line-height: 1.7; color: #333; }
.ad-seq.is-vflow > p b { display: block; margin-bottom: 4px; color: #b0561f; }
@media (max-width: 560px) {
  .ad-vflow > li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .ad-vflow > li:not(:last-child)::before { left: 19px; top: 44px; }
  .ad-vflow em { width: 40px; height: 40px; margin-top: 12px; font-size: 14px; }
  .ad-vflow > li > div { padding: 14px 16px; }
  .ad-vflow b { font-size: 17px; }
  .ad-vflow p { font-size: 15px; }
  .ad-seq.is-vflow > p { padding: 14px 16px; font-size: 15px; }
}
/* 기존 .ad-seq ol/li 규칙 무력화 */
.ad-seq.is-vflow ol.ad-vflow { display: block; }
.ad-seq.is-vflow .ad-vflow > li { padding: 0 0 14px; border: 0; border-radius: 0; background: none; counter-increment: none; }
.ad-seq.is-vflow .ad-vflow > li:last-child { padding-bottom: 0; }
.ad-seq.is-vflow .ad-vflow > li:last-child::before { content: none; }
.ad-seq.is-vflow .ad-vflow > li::after { content: none !important; }
.ad-seq.is-vflow .ad-vflow > li:not(:last-child)::before { content: ""; display: block; margin: 0; }
.ad-seq.is-vflow .ad-vflow b { font-size: 19px; }
@media (max-width: 560px) { .ad-seq.is-vflow .ad-vflow b { font-size: 17px; } }
/* 세로 플로우 — 박스 왼쪽 굵은 선 대신 원을 가리키는 말풍선 꼬리 */
.ad-vflow > li > div { position: relative; border-left: 0; }
.ad-vflow > li > div::before { content: ""; position: absolute; left: -9px; top: 27px; border: 9px solid transparent; border-left: 0; border-right-color: color-mix(in srgb, var(--c) 6%, #fff); }
@media (max-width: 560px) { .ad-vflow > li > div::before { top: 23px; } }
.ad-vflow > li { gap: 34px; }
.ad-vflow > li > div::before { left: -14px; top: 22px; border-width: 14px; border-left: 0; }
@media (max-width: 560px) {
  .ad-vflow > li { gap: 20px; }
  .ad-vflow > li > div::before { left: -11px; top: 21px; border-width: 11px; border-left: 0; }
}
/* 순서 안내 — 단계 박스 폭에 맞춘 보라 알약 (혀통증 ta-loop 동일 톤) */
.ad-seq.is-vflow > p { margin: 24px 0 0 86px; padding: 14px 28px; border: 1px solid rgba(120,100,190,.25); border-radius: 999px; background: rgba(178,160,235,.16); color: var(--tg-ink); font-size: 15.5px; line-height: 1.7; }
.ad-seq.is-vflow > p b { display: inline; margin: 0 8px 0 0; color: #6a55b8; font-weight: 600; }
@media (max-width: 560px) { .ad-seq.is-vflow > p { margin-left: 0; padding: 14px 18px; border-radius: 22px; font-size: 15px; } }
/* 인체 한 단계 더 키움 */
@container adx (min-width: 640px) {
  .adx-wide .adx-grid { grid-template-columns: 470px minmax(0, 1fr); }
  .adx-wide .adx-body { width: 470px; }
  .adx-wide .adx-body text { font-size: 18px; }
  .adx-wide .adx-r { padding-top: 235px; }
  .adx-wide .adx-legend { margin: 20px 140px 0 24px; }
}
@container adx (max-width: 639px) { .adx-wide .adx .adx-body { width: 290px; transform: translateX(23px); } .adx-wide .adx .adx-body text { font-size: 24px; } }
/* 카드 목록 위로 — 간격 28px 로 부위 정렬 유지 */
@container adx (min-width: 640px) {
  .adx-wide .adx-r { padding-top: 190px; }
  .adx-wide .adx-list { gap: 28px; }
}
/* 펼침 화살표(v)를 분류 알약 오른쪽에 */
@container adx (min-width: 481px) {
  .adx.is-acc .adx-list > li > a { padding-right: 50px; }
  .adx.is-acc .adx-list > li > a::after { right: 24px; bottom: auto; top: calc(50% - 3px); }
}
/* 카드엔 한자·영문 표기, 핵심 문장은 펼친 내용 첫 줄로 */
.adx-t small.adx-han { font-size: 13.5px; letter-spacing: .04em; color: var(--tg-med); }
#hx-tx#hx-tx .adx-panel > .ta-tx-item > header .tg-han { display: none; }
.adx-panel > .ta-tx-item:not(:has(> header .ta-tx-prod, > header .ta-more-link)) { grid-template-columns: minmax(0, 1fr); }
.adx-panel > .ta-tx-item:not(:has(> header .ta-tx-prod, > header .ta-more-link)) > header { display: none; }
#hx-tx#hx-tx .adx-panel > .ta-tx-item:not(:has(> header .ta-tx-prod, > header .ta-more-link)) { grid-template-columns: minmax(0, 1fr); }
#hx-tx#hx-tx .adx-panel .ad-tx-key b { color: var(--ac); font-weight: 700; }
#hx-tx#hx-tx:has(.adx) .ta-tx-item .ad-tx-why { border-left: 0; }
#hx-tx#hx-tx:has(.adx) .ta-tx-item .ad-tx-why { background: color-mix(in srgb, var(--at) 50%, #fff); }
/* 카드 세로 길이 92 → 104 */
@container adx (min-width: 640px) { .adx-wide .adx-list > li > a { height: 104px; } }
/* 카드 클릭 안내 */
.adx-cap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 6px; }
.adx-cap-row .adx-cap { margin: 0; }
.adx-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 12px; border: 1px solid #dfe6e2; border-radius: 999px; background: #fff; font-size: 13px; color: #56645d; white-space: nowrap; }
.adx-hint span { width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid var(--tg-med); border-bottom: 1.5px solid var(--tg-med); transform: rotate(45deg); }
.adx:not(.is-acc) .adx-hint { display: none; }
@media (max-width: 560px) { .adx-hint { font-size: 12.5px; } }
/* 펼친 내용: 모든 항목 전체 폭, '더 자세히 알아보기'는 본문 아래 */
#hx-tx#hx-tx .adx-panel > .ta-tx-item { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
#hx-tx#hx-tx .adx-panel > .ta-tx-item > header { order: 2; position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 24px 0 0; padding: 0; }
#hx-tx#hx-tx .adx-panel > .ta-tx-item > header .ta-tx-prod { width: 220px; max-width: 100%; margin: 0; }
#hx-tx#hx-tx .adx-panel > .ta-tx-item > header .ta-more-link { margin: 0; }
#hx-tx#hx-tx .adx-panel > .ta-tx-item > .ad-rx-full { order: 1; }
/* 카드용 .adx-list a 규칙이 펼친 내용 속 링크에 번지지 않게 */
.adx .adx-panel a { height: auto !important; min-height: 0; grid-template-columns: none; }
.adx .adx-panel a:hover { transform: none; box-shadow: none; }
@container adx (min-width: 640px) { .adx-wide .adx-list > li > a { padding-top: 6px; padding-bottom: 18px; } }
/* 心·腎 도해 글자 줄바꿈 방지 */
#tx-gyogam .gq-flow em, #tx-gyogam .gq-flow strong, #tx-gyogam .gq-orb i { white-space: nowrap; word-break: keep-all; }
#tx-gyogam .gq-flow { gap: 4px; font-size: 12.5px; }
@container adx (min-width: 640px) { .adx-wide .adx-r { padding-top: 160px; } }
@container adx (min-width: 640px) { .adx-wide .adx-list > li > a { height: 95px; padding-top: 10px; padding-bottom: 18px; } }
@container adx (min-width: 640px) { .adx-wide .adx.is-acc .adx-list > li > a::after { top: 40.5px; } .adx-wide .adx.is-acc .adx-list > li.is-open > a::after { top: 41px; } }
/* 인체 속 부위 글자 키움 · 500 */
.adx-wide .adx-body text { font-weight: 500 !important; }
@container adx (min-width: 640px) { .adx-wide .adx-body text { font-size: 21px; } }
@container adx (max-width: 639px) { .adx-wide .adx .adx-body text { font-size: 28px; } }
/* 클릭 안내 — 알약 없이 강조색 텍스트 */
.adx-hint { padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 600; color: #c9612c; }
.adx-hint span { border-color: #c9612c; }
/* 카드 번호 원·숫자 키움 */
@container adx (min-width: 640px) {
  .adx-wide .adx-list > li > a { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; }
  .adx-wide .adx-list > li > a > em { width: 52px; height: 52px; font-size: 18px; }
}
@container adx (max-width: 639px) {
  .adx-wide .adx-list > li > a { grid-template-columns: 42px minmax(0, 1fr); }
  .adx-wide .adx-list > li > a > em { width: 42px; height: 42px; font-size: 15px; }
}
@container adx (min-width: 640px) { .adx-wide .adx-fig { margin-top: -40px; } }
/* 교감단 인용 박스(초록)에 제품 이미지 */
#tx-gyogam .gq { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 24px; }
#tx-gyogam .gq-prod { position: relative; margin: -6px -8px -10px 0; }
#tx-gyogam .gq-prod img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .28)); }
@media (max-width: 760px) {
  #tx-gyogam .gq { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #tx-gyogam .gq-prod { width: 78%; max-width: 300px; margin: 0 auto -6px; }
}
#tx-gyogam .gq::before { right: auto; left: 14px; top: -26px; }
#tx-gyogam .gq-name { grid-template-columns: minmax(0, 1fr); }

/* 금진옥액(07) — 혈위 정보 카드 + 가로 시술 절차 */
#tx-geumjin .gjx-info { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 22px 0 30px; }
#tx-geumjin .gjx-info > div { padding: 18px 20px; background: color-mix(in srgb, var(--at, #f6e5e1) 60%, #fff); }
#tx-geumjin .gjx-info span { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--ac, #8e3322); }
#tx-geumjin .gjx-info p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
#tx-geumjin .gjx-info small { display: block; margin-top: 6px; font-size: 13px; color: #6a6f6c; }
#tx-geumjin .gjx-info ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
#tx-geumjin .gjx-info li { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--ac, #8e3322) 25%, #fff); font-size: 13px; color: #555; }
#tx-geumjin .gjx-info li b { font-family: "Noto Serif KR", serif; font-size: 17px; font-weight: 700; color: var(--ac, #8e3322); }
#tx-geumjin .gjx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 14px 0 26px; padding: 0; list-style: none; counter-reset: none; }
#tx-geumjin .gjx-steps > li { position: relative; margin: 0; padding: 0; }
#tx-geumjin .gjx-steps > li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 54px; right: -10px; height: 2px; background: color-mix(in srgb, var(--ac, #8e3322) 22%, #fff); }
#tx-geumjin .gjx-steps em { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--ac, #8e3322); color: #fff; font-style: normal; font-size: 15px; font-weight: 700; }
#tx-geumjin .gjx-steps b { display: block; margin-bottom: 6px; font-size: 16.5px; font-weight: 700; color: var(--tg-ink); }
#tx-geumjin .gjx-steps p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #555; word-break: keep-all; }
@media (max-width: 760px) {
  #tx-geumjin .gjx-info { grid-template-columns: minmax(0, 1fr); }
  #tx-geumjin .gjx-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #tx-geumjin .gjx-steps > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-bottom: 18px; }
  #tx-geumjin .gjx-steps > li:last-child { padding-bottom: 0; }
  #tx-geumjin .gjx-steps em { grid-row: 1 / span 2; margin: 0; }
  #tx-geumjin .gjx-steps b { margin-top: 10px; }
  #tx-geumjin .gjx-steps > li:not(:last-child)::after { top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; }
}
/* 치료 분류 — 발 쪽으로 붙이고, 배경 없이, 제목은 상단에 걸친 라벨 */
.adx-wide .adx-legend { position: relative; padding: 26px 18px 16px; background: none; }
.adx-wide .adx-legend dt { position: absolute; top: 0; left: 18px; transform: translateY(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; line-height: 1; }
@container adx (min-width: 640px) { .adx-wide .adx-legend { margin-top: -14px; } }
@container adx (max-width: 639px) { .adx-wide .adx .adx-legend { margin-top: 12px; } }
@container adx (min-width: 640px) { .adx-wide .adx-legend { margin-left: 51px; margin-right: 127px; } }

/* 반응을 확인하는 지표 — 아이콘 카드 */
.ad-ind.is-icon { gap: 14px; }
.ad-ind.is-icon > div { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 20px 22px; border: 1px solid #e3e8e5; border-radius: 0; background: #fff; }
.ad-ind.is-icon > div::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--tg-med); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.ad-ind.is-icon > div:hover::after { transform: scaleX(1); }
.ad-ind.is-icon .ai-ico { grid-row: 1 / span 2; display: block; width: 52px; height: 52px; border-radius: 50%; background: #eaf5ef; position: relative; }
.ad-ind.is-icon .ai-ico::before { content: ""; position: absolute; inset: 13px; background: var(--tg-med); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ad-ind.is-icon dt { align-self: end; font-size: 16.5px; font-weight: 700; letter-spacing: 0; color: var(--tg-ink); }
.ad-ind.is-icon dd { align-self: start; margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: #5a615d; }
@media (prefers-reduced-motion: reduce) { .ad-ind.is-icon > div::after { transition: none; } }
@media (max-width: 560px) { .ad-ind.is-icon > div { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; } .ad-ind.is-icon .ai-ico { width: 44px; height: 44px; } .ad-ind.is-icon .ai-ico::before { inset: 11px; } }
/* 지표 아이콘 키움 */
.ad-ind.is-icon > div { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
.ad-ind.is-icon .ai-ico { width: 64px; height: 64px; }
.ad-ind.is-icon .ai-ico::before { inset: 13px; }
@media (max-width: 560px) { .ad-ind.is-icon > div { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; } .ad-ind.is-icon .ai-ico { width: 52px; height: 52px; } .ad-ind.is-icon .ai-ico::before { inset: 11px; } }
.ad-ind.is-icon > div { grid-template-columns: 76px minmax(0, 1fr); column-gap: 20px; }
.ad-ind.is-icon .ai-ico { width: 76px; height: 76px; }
.ad-ind.is-icon .ai-ico::before { inset: 13px; }
@media (max-width: 560px) { .ad-ind.is-icon > div { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; } .ad-ind.is-icon .ai-ico { width: 60px; height: 60px; } .ad-ind.is-icon .ai-ico::before { inset: 10px; } }
.ad-ind.is-icon dt { font-size: 17.5px; } .ad-ind.is-icon dd { font-size: 15.5px; }

/* 불면증 — 자율신경실조증 인체 도해/펼침 카드 재사용 (연결선 없음) */
#hx-tx:has(.adx) #tx-herb    { --ac: #164a3a; --at: #e4ece9; }
#hx-tx:has(.adx) #tx-cup     { --ac: #d0632a; --at: #fbe7dc; }
#hx-tx:has(.adx) #tx-abdomen { --ac: #b5501c; --at: #f6d9c7; }
.adx-hl[data-b="tx-geumjin"] { fill: #8e3322; }
.adx-hl[data-b="tx-cup"] { fill: #d0632a; }
.adx-hl[data-b="tx-abdomen"] { fill: #b5501c; }
@container adx (min-width: 640px) {
  .in-page .adx-wide .adx-r { padding-top: 40px; }
  .in-page .adx-wide .adx-r-hd { position: static; margin: 0 0 24px; }
  .in-page .adx-wide .adx-fig { margin-top: 0; }
}
.in-page .adx-r-hd .ta-sub { margin-top: 0 !important; padding-top: 0; }
@container adx (min-width: 640px) { .in-page .adx-wide .adx-r { padding-top: 40px; } }
@media (max-width: 560px) { details.ta-tbl > summary b { white-space: normal; max-width: 100%; line-height: 1.35; } }
/* 수면제 vs 한의원 — 라벨을 박스 상단 중앙에 걸친 알약으로 */
#in-why .in-vs { margin-top: 18px; row-gap: 34px; }
#in-why .in-vs-col { position: relative; padding-top: 38px; }
#in-why .in-vs-col .ta-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
#in-why .in-vs-col.is-pill .ta-tag { background: #c9612c; color: #fff; }
#in-why .in-vs-col .ta-tag { padding: 10px 22px; font-size: 16.5px; }
#in-why .in-vs-col { padding-top: 42px; }
@media (max-width: 560px) { #in-why .in-vs-col .ta-tag { padding: 9px 18px; font-size: 15.5px; } }
/* 환자 고민 인용 — 네이비 2단 박스 */
#in-why .in-voice { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 0; margin-top: 28px; padding: 40px 0; border-radius: 18px; background: #0f1a33; }
#in-why .in-voice > p { margin: 0; padding: 0 40px; }
#in-why .in-voice-q { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-size: 19px; font-weight: 500; line-height: 1.75; color: #fff; }
#in-why .in-voice-q em { font-style: normal; color: #e0b25c; }
#in-why .in-voice > p:not(.in-voice-q) { border-left: 1px solid rgba(255,255,255,.18); font-size: 14.5px; line-height: 1.85; color: rgba(255,255,255,.72); }
@media (max-width: 760px) {
  #in-why .in-voice { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 0; }
  #in-why .in-voice > p { padding: 0 22px; }
  #in-why .in-voice-q { font-size: 17px; }
  #in-why .in-voice > p:not(.in-voice-q) { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); margin: 0 22px; padding: 16px 0 0; }
}

/* 불면 여섯 유형 — 補(보충) / 瀉(해소) 2단 대비 */
.in-types2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 6px; }
.in-types2 .it-col { --g: #c9612c; --gt: #fdf3ea; padding: 22px 20px 20px; background: var(--gt); }
.in-types2 .it-col.is-clear { --g: var(--tg-med); --gt: #eef6f1; }
.in-types2 .it-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.in-types2 .it-han { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--g); color: #fff; font-family: "Noto Serif KR", serif; font-size: 24px; font-weight: 700; }
.in-types2 .it-hd strong { display: block; font-size: 18px; font-weight: 700; color: var(--tg-ink); }
.in-types2 .it-hd span { display: block; margin-top: 2px; font-size: 14px; color: var(--g); }
.in-types2 .it-list { display: grid; gap: 10px; }
.in-types2 .tp-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; margin: 0; padding: 18px 20px 18px 18px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.in-types2 .tp-card > * { grid-column: 2; }
.in-types2 .tp-card .tp-no { grid-column: 1; grid-row: 1 / span 3; position: static; align-self: start; margin: 0; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--g); opacity: 1; }
.in-types2 .tp-card h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 700; }
.in-types2 .tp-card h3 .tg-han { display: inline; margin: 0 0 0 8px; font-size: 13px; font-weight: 500; color: var(--g); }
.in-types2 .tp-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: #4a524e; word-break: keep-all; }
.in-types2 .tp-card .ad-note { margin: 10px 0 0; padding: 0; border-radius: 0; background: none; font-size: 14px; color: #555; }
.in-types2 .tp-card .ad-note b { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 999px; background: var(--gt); color: var(--g); font-size: 12.5px; font-weight: 700; }
@media (max-width: 900px) { .in-types2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .in-types2 .it-col { padding: 18px 14px 14px; }
  .in-types2 .tp-card { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 16px 16px 16px 14px; }
  .in-types2 .tp-card .tp-no { font-size: 22px; }
  .in-types2 .tp-card h3 { font-size: 18px; }
}
.in-types2 + .pg-note { max-width: none; margin-top: 18px; }
.in-src-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-weight: 600; color: var(--tg-med); text-decoration: none; white-space: nowrap; }
.in-src-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 금진옥액 흐름 4단계 — 원형 일러스트 + 코딩 라벨 */
.gjf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 10px 0 14px; padding: 0; list-style: none; counter-reset: none; }
.gjf > li { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; text-align: center; }
.gjf > li::before { content: none !important; }
.gjf > li:not(:last-child)::after { content: ""; position: absolute; top: calc(38px + (100% - 0px) * 0); right: -24px; width: 18px; height: 14px; margin-top: 0; background: #c9a24a; -webkit-clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%); clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%); }
.gjf-no { display: inline-block; margin-bottom: 14px; padding: 6px 16px; border: 1.5px solid #c9a24a; border-radius: 999px; background: #fffdf7; color: #9a7a2e; font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1; }
.gjf figure { width: 100%; max-width: 190px; margin: 0 0 16px; }
.gjf figure img { display: block; width: 100%; height: auto; }
.gjf b { display: block; margin-bottom: 8px; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: #1d2b4f; word-break: keep-all; }
.gjf p { margin: 0; font-size: 14px; line-height: 1.65; color: #7a7f86; word-break: keep-all; }
@media (max-width: 1100px) { .gjf b br, .gjf p br { display: none; } }
@media (max-width: 760px) {
  .gjf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .gjf > li::after { display: none; }
  .gjf figure { max-width: 150px; }
  .gjf b { font-size: 15.5px; }
  .gjf p { font-size: 13.5px; }
}
.gjf figure { position: relative; max-width: none; }
.gjf > li:not(:last-child)::after { content: none; }
.gjf > li:not(:last-child) figure::after { content: ""; position: absolute; top: calc(50% - 7px); right: -25px; width: 20px; height: 14px; background: #c9a24a; -webkit-clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%); clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%); }
@media (max-width: 760px) { .gjf figure { max-width: 150px; } .gjf > li figure::after { display: none; } }
.gjf b { letter-spacing: -.02em; }
/* 불면증 교감단(tx-herb) — 내용 좌 / 제품 이미지 우 */
@media (min-width: 761px) {
  #hx-tx#hx-tx .adx-panel > #tx-herb { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 32px; align-items: center; }
  #hx-tx#hx-tx .adx-panel > #tx-herb > header { order: 2; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
  #hx-tx#hx-tx .adx-panel > #tx-herb > .ta-tx-bd { order: 1; }
  #hx-tx#hx-tx .adx-panel > #tx-herb > header .ta-tx-prod { width: 100%; }
}
@container adx (min-width: 640px) { .in-page .adx-wide .adx-fig { margin-top: -40px; } }
/* 혀통증 경추추나 — '치료는 이렇게 진행합니다' 우측 본문 끝, 연보라 알약 */
.ta-page #tx-chuna .ta-tx-bd > p.ta-how { margin: 26px 0 0; padding: 20px 34px; border: 1px solid rgba(120,100,190,.25); border-radius: 999px; background: rgba(178,160,235,.16); font-size: 15.5px; font-weight: 400; line-height: 1.75; color: var(--tg-ink); word-break: keep-all; }
.ta-page #tx-chuna .ta-tx-bd > p.ta-how b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 700; color: #6a55b8; }
@media (max-width: 560px) { .ta-page #tx-chuna .ta-tx-bd > p.ta-how { padding: 16px 20px; border-radius: 22px; font-size: 15px; } .ta-page #tx-chuna .ta-tx-bd > p.ta-how br { display: none; } }
@media (min-width: 561px) { .ta-page #tx-chuna .ta-tx-bd > p.ta-how { border-radius: 48px; padding: 24px 40px; } }
/* 경추추나 진행 안내 — 항목 전체 폭 */
.ta-page #tx-chuna > p.ta-how { grid-column: 1 / -1; margin: 26px 0 0; padding: 24px 40px; border: 1px solid rgba(120,100,190,.25); border-radius: 48px; background: rgba(178,160,235,.16); font-size: 15.5px; font-weight: 400; line-height: 1.75; color: var(--tg-ink); word-break: keep-all; }
.ta-page #tx-chuna > p.ta-how b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 700; color: #6a55b8; }
@media (max-width: 560px) { .ta-page #tx-chuna > p.ta-how { padding: 16px 20px; border-radius: 22px; font-size: 15px; } .ta-page #tx-chuna > p.ta-how br { display: none; } }
.ta-page #tx-chuna > p.ta-how { border-radius: 0 !important; }
.ta-page #tx-chuna .ta-tx-bd > p.ta-how { border-radius: 0 !important; }
/* 금진옥액 흐름 화살표 키움 */
@media (min-width: 761px) {
  .gjf { gap: 40px; }
  .gjf > li:not(:last-child) figure::after { top: calc(50% - 11px); right: -33px; width: 26px; height: 22px; }
}
.in-page .hx-split-bd .pg-note { max-width: none; }
.adx-wide > .adx-disc { max-width: none; margin: 28px 0 0; }
.adx-r > .adx-disc { max-width: none; margin: 20px 0 0; }

/* 불면 · 금진옥액 네 가지 기전 — 번호 원 + 색 키워드, 시행/적합성은 라벨 박스 */
#in-geumjin .in-mech { gap: 14px; }
#in-geumjin .in-mech .tp-card { --m: #d0632a; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-content: start; margin: 0; padding: 24px 24px 22px; border: 1px solid #e3e8e5; border-radius: 0; background: #fff; box-shadow: none; }
#in-geumjin .in-mech .tp-card:nth-child(2) { --m: #8e3322; }
#in-geumjin .in-mech .tp-card:nth-child(3) { --m: #2f6fb3; }
#in-geumjin .in-mech .tp-card:nth-child(4) { --m: var(--tg-med); }
#in-geumjin .in-mech .tp-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--m); }
#in-geumjin .in-mech .tp-card > * { grid-column: 2; }
#in-geumjin .in-mech .tp-no { grid-column: 1; grid-row: 1 / span 2; position: static; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; border-radius: 50%; background: var(--m); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1; opacity: 1; }
#in-geumjin .in-mech .tp-card h3 { margin: 0; padding: 0; font-size: 19px; font-weight: 700; }
#in-geumjin .in-mech .tp-card h3 .tg-han { display: block; margin: 5px 0 0; font-size: 13.5px; font-weight: 600; color: var(--m); }
#in-geumjin .in-mech .tp-card p { grid-column: 1 / -1; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed #dfe5e2; font-size: 15px; line-height: 1.75; color: #4a524e; }
#in-geumjin .ta-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; border: 0; }
#in-geumjin .ta-notes > div { position: relative; display: block; padding: 28px 22px 18px; border: 1px solid #e3e8e5; background: #f8faf9; }
#in-geumjin .ta-notes dt { position: absolute; top: 0; left: 20px; transform: translateY(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
#in-geumjin .ta-notes dd { margin: 0; font-size: 15px; line-height: 1.75; color: #4a524e; }
@media (max-width: 700px) { #in-geumjin .ta-notes { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } #in-geumjin .in-mech .tp-card { padding: 20px 18px 18px; } }
/* 고압산소 4단계 — STEP 라벨을 카드(이미지) 상단 중앙에 걸친 알약 */
.in-hb4 { row-gap: 30px; margin-top: 18px; }
.in-hb4 li { position: relative; overflow: visible; }
.in-hb4 img { border-radius: 15px 15px 0 0; }
.in-hb4 li > span { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 7px 16px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1; white-space: nowrap; z-index: 1; }
.in-hb4 b { margin-top: 4px; }
.in-hb4 { margin-top: 40px; }
.gjf { margin-top: 28px; }

/* 고압산소 다섯 가지 이유 — 번호·제목·설명 3단 행, 권장 대상은 라벨 박스 */
#in-hbot .in-reasons { gap: 0; margin-top: 8px; border-top: 2px solid #2f6fb3; }
#in-hbot .in-reasons li { grid-template-columns: 72px minmax(0, 250px) minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 24px 8px 24px 4px; border: 0; border-bottom: 1px solid #e3e8e5; border-radius: 0; background: none; transition: background .25s; }
#in-hbot .in-reasons li:hover { background: #f5f9fd; }
#in-hbot .in-reasons li::before { grid-row: auto; font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: #2f6fb3; opacity: .9; }
#in-hbot .in-reasons b { padding-top: 6px; font-size: 17.5px; font-weight: 700; line-height: 1.45; }
#in-hbot .in-reasons p { grid-column: 3; margin: 0; padding-top: 6px; font-size: 15px; line-height: 1.75; color: #4a524e; }
#in-hbot .in-rec { position: relative; margin-top: 44px; padding: 30px 22px 20px; border: 1px solid #d6e3f2; border-radius: 0; background: #f3f7fc; }
#in-hbot .in-rec .ta-tag { position: absolute; top: 0; left: 22px; transform: translateY(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: #2f6fb3; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
#in-hbot .in-rec .ta-pills li { position: relative; padding: 9px 16px 9px 34px; border: 1px solid #d6e3f2; border-radius: 999px; background: #fff; font-size: 14.5px; }
#in-hbot .in-rec .ta-pills li::before { content: ""; position: absolute; left: 15px; top: 50%; width: 9px; height: 5px; margin-top: -4px; border-left: 2px solid #2f6fb3; border-bottom: 2px solid #2f6fb3; transform: rotate(-45deg); }
@media (max-width: 760px) {
  #in-hbot .in-reasons li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 20px 4px; }
  #in-hbot .in-reasons li::before { grid-row: 1 / span 2; font-size: 30px; }
  #in-hbot .in-reasons b { padding-top: 2px; }
  #in-hbot .in-reasons p { grid-column: 2; padding-top: 6px; }
}

/* 고압산소 다섯 가지 이유 v2 — 아이콘 원 + 워터마크 번호 카드 */
#in-hbot .in-reasons { gap: 12px; margin-top: 8px; border-top: 0; }
#in-hbot .in-reasons li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 24px 100px 24px 24px; border: 1px solid #dfe8f2; border-radius: 0; background: #fff; overflow: hidden; }
#in-hbot .in-reasons li:hover { background: #fff; border-color: #b9cfe8; }
#in-hbot .in-reasons li::before { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); grid-row: auto; font-size: 64px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #2f6fb3; opacity: .1; pointer-events: none; }
#in-hbot .in-reasons .rs-ico { grid-row: 1 / span 2; position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; background: #eaf2fb; }
#in-hbot .in-reasons .rs-ico::before { content: ""; position: absolute; inset: 15px; background: #2f6fb3; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#in-hbot .in-reasons b { grid-column: 2; align-self: end; padding: 0; font-size: 18px; font-weight: 700; }
#in-hbot .in-reasons p { grid-column: 2; align-self: start; margin: 6px 0 0; padding: 0; font-size: 15px; line-height: 1.7; color: #4a524e; }
@media (max-width: 760px) {
  #in-hbot .in-reasons li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; align-items: start; }
  #in-hbot .in-reasons li::before { top: 16px; transform: none; right: 14px; font-size: 44px; }
  #in-hbot .in-reasons .rs-ico { width: 48px; height: 48px; } #in-hbot .in-reasons .rs-ico::before { inset: 11px; }
  #in-hbot .in-reasons b { padding-right: 44px; font-size: 17px; }
}
.in-page .hx-split-hd .ta-lede.is-b-note { border-left: 0; }
#in-hbot .hx-split-hd .in-rec { margin-top: 40px; }
/* 근거 안내 — 관련 연구 링크 */
.pg-note .in-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.pg-note .in-refs em { font-style: normal; font-weight: 600; color: var(--tg-ink); }
.pg-note .in-refs a { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--tg-med); text-decoration: none; }
.pg-note .in-refs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-note .in-refs i { font-style: normal; font-size: .9em; }
/* 불면증 진료 과정 — 단계별 색 원 */
.in-page #ta-flow#ta-flow .ta-flow > li { --sc: #c9612c; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(2) { --sc: #b58a1e; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(3) { --sc: #2f6fb3; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(4) { --sc: #137a52; }
.in-page #ta-flow#ta-flow .ta-flow > li::before { background: var(--sc); border-color: var(--sc); color: #fff; animation: none; box-shadow: 0 0 0 6px #fff, 0 0 0 12px color-mix(in srgb, var(--sc) 20%, #fff); }
.in-page #ta-flow#ta-flow .ta-flow > li::after { border-color: var(--sc); }
.in-page #ta-flow#ta-flow .ta-flow > li .ta-flow-no, .in-page #ta-flow#ta-flow .ta-flow > li > span:first-child { color: var(--sc); }
/* 진료 과정 — 차분한 톤 + 연결선도 단계 색 */
.in-page #ta-flow#ta-flow .ta-flow > li { --sc: #cf8a66; --pc: transparent; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(2) { --sc: #c2a15e; --pc: #cf8a66; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(3) { --sc: #7494b8; --pc: #c2a15e; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(4) { --sc: #5f9a80; --pc: #7494b8; }
.in-page #ta-flow#ta-flow .ta-flow::before { background: transparent; }
.in-page #ta-flow#ta-flow .ta-flow > li { background: linear-gradient(var(--pc), var(--pc)) no-repeat 33.5px 0 / 1px 34px, linear-gradient(var(--sc), var(--sc)) no-repeat 33.5px 34px / 1px calc(100% - 34px); }
.in-page #ta-flow#ta-flow .ta-flow > li:last-child { background: linear-gradient(var(--pc), var(--pc)) no-repeat 33.5px 0 / 1px 34px; }
@media (max-width: 640px) { .in-page #ta-flow#ta-flow .ta-flow > li, .in-page #ta-flow#ta-flow .ta-flow > li:last-child { background: none; } }
/* 진료 과정 — 깨어 있는 밤(남색) → 새벽 → 회복(브랜드 초록) */
.in-page #ta-flow#ta-flow .ta-flow > li { --sc: #2b3a67; --pc: transparent; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(2) { --sc: #4a5a9a; --pc: #2b3a67; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(3) { --sc: #3a8795; --pc: #4a5a9a; }
.in-page #ta-flow#ta-flow .ta-flow > li:nth-child(4) { --sc: #137a52; --pc: #3a8795; }
/* 혀통증 진료 과정 — 붉게 달아오른 혀(열) → 식어가며 → 회복(브랜드 초록) */
@media (min-width: 641px) {
  .ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow::before { background: transparent; }
  .ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li { background: linear-gradient(var(--pc), var(--pc)) no-repeat 33.5px 0 / 1px 34px, linear-gradient(var(--sc), var(--sc)) no-repeat 33.5px 34px / 1px calc(100% - 34px); }
  .ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li:last-child { background: linear-gradient(var(--pc), var(--pc)) no-repeat 33.5px 0 / 1px 34px; }
}
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li { --sc: #b8483e; --pc: transparent; }
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li:nth-child(2) { --sc: #c9785c; --pc: #b8483e; }
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li:nth-child(3) { --sc: #8f9f7c; --pc: #c9785c; }
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li:nth-child(4) { --sc: #4f9474; --pc: #8f9f7c; }
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li:nth-child(5) { --sc: #137a52; --pc: #4f9474; }
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li::before { background: var(--sc); border-color: var(--sc); color: #fff; animation: none; box-shadow: 0 0 0 6px #fff, 0 0 0 12px color-mix(in srgb, var(--sc) 20%, #fff); }
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li::after { border-color: var(--sc); }
.ta-page:not(.ad-page):not(.hb-page) #ta-flow#ta-flow .ta-flow > li .ta-flow-no { color: var(--sc); }
/* 자율신경실조증 치료 과정 — 상열(증상 완화) → 조절(균형) → 근본(뿌리) */
.ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li { --sc: #c0603f; --pc: transparent; }
.ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li:nth-child(2) { --sc: #3a8795; --pc: #c0603f; }
.ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li:nth-child(3) { --sc: #137a52; --pc: #3a8795; }
.ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li::before { background: var(--sc); border-color: var(--sc); color: #fff; animation: none; box-shadow: 0 0 0 6px #fff, 0 0 0 12px color-mix(in srgb, var(--sc) 20%, #fff); }
.ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li::after { border-color: var(--sc); }
.ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li .ta-flow-no { color: var(--sc); }
@media (min-width: 641px) {
  .ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow::before { background: transparent; }
  .ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li { background: linear-gradient(var(--pc), var(--pc)) no-repeat 33.5px 0 / 1px 34px, linear-gradient(var(--sc), var(--sc)) no-repeat 33.5px 34px / 1px calc(100% - 34px); }
  .ad-page:has(#tx-chuna) #ta-flow#ta-flow .ta-flow > li:last-child { background: linear-gradient(var(--pc), var(--pc)) no-repeat 33.5px 0 / 1px 34px; }
}
/* 고압산소 4단계 라벨 — 산소(하늘) → 혈장 산소(파랑) → 이완(남보라) → 잠(밤 남색) */
.in-hb4 li:nth-child(1) > span { background: #5b9bd5; }
.in-hb4 li:nth-child(2) > span { background: #2f6fb3; }
.in-hb4 li:nth-child(3) > span { background: #4a5a9a; }
.in-hb4 li:nth-child(4) > span { background: #2b3a67; }
/* 금진옥액 흐름 라벨 — 열(적) → 열 내림(테라코타) → 순환·이완(파랑) → 잠(밤 남색) */
.gjf > li { --lc: #c0503f; }
.gjf > li:nth-child(2) { --lc: #c7734f; }
.gjf > li:nth-child(3) { --lc: #4f86c0; }
.gjf > li:nth-child(4) { --lc: #2b3a67; }
.gjf-no { border-color: var(--lc); background: var(--lc); color: #fff; }

/* 수면제 감량 4단계 — 하나의 용량 그래프 패널 */
#in-taper .in-phase { position: relative; gap: 0; margin-top: 10px; padding-top: 46px; border: 1px solid #e3e8e5; background: #fff; }
#in-taper .in-phase::before { content: "수면제 용량 (개념도)"; position: absolute; top: 16px; left: 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: #8a918d; }
#in-taper .in-phase li { grid-template-rows: 150px auto auto 1fr auto; row-gap: 8px; padding: 0 22px 22px; border: 0; border-radius: 0; background: none; }
#in-taper .in-phase li + li { border-left: 1px dashed #dfe5e2; }
#in-taper .in-phase i { height: 150px; margin: 0 -22px; border-radius: 0; background: repeating-linear-gradient(0deg, transparent 0 29px, #f0f3f1 29px 30px); border-bottom: 2px solid #cfd8d4; overflow: visible; }
#in-taper .in-phase i::after { left: 26%; right: 26%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #e8a57f, #c9612c); }
#in-taper .in-phase li:nth-child(3) i::after { background: linear-gradient(180deg, #efc2a6, #d98556); }
#in-taper .in-phase li.is-free i::after { background: linear-gradient(180deg, #9ed1b8, var(--tg-med)); }
#in-taper .in-phase span { justify-self: start; margin-top: 18px; padding: 6px 12px; border-radius: 999px; background: #c9612c; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1; }
#in-taper .in-phase li:nth-child(3) span { background: #d98556; }
#in-taper .in-phase li.is-free span { background: var(--tg-med); }
#in-taper .in-phase b { font-size: 17px; font-weight: 700; }
#in-taper .in-phase p { font-size: 14.5px; line-height: 1.7; color: #4a524e; }
#in-taper .in-phase em { border-radius: 0; padding: 0 0 0 16px; background: none; position: relative; color: #b0561f; font-size: 13.5px; font-weight: 700; }
#in-taper .in-phase em::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; }
#in-taper .in-phase li.is-free em { background: none; color: var(--tg-med); }
@media (max-width: 1099px) {
  #in-taper .in-phase li + li { border-left: 0; }
  #in-taper .in-phase li:nth-child(even) { border-left: 1px dashed #dfe5e2; }
  #in-taper .in-phase li:nth-child(n+3) { padding-top: 22px; border-top: 1px dashed #dfe5e2; }
}
@media (max-width: 560px) {
  #in-taper .in-phase li { border-left: 0 !important; }
  #in-taper .in-phase li + li { padding-top: 22px; border-top: 1px dashed #dfe5e2; }
  #in-taper .in-phase li { grid-template-rows: 120px auto auto 1fr auto; }
  #in-taper .in-phase i { height: 120px; }
}
/* 감량 단계 아이콘 — 그래프 영역 좌상단 */
#in-taper .in-phase li { position: relative; }
#in-taper .in-phase .ph-ico { position: absolute; top: 12px; left: 16px; width: 46px; height: 46px; margin: 0; padding: 0; border: 1px solid #e3e8e5; border-radius: 50%; background: #fff; }
#in-taper .in-phase .ph-ico::before { content: ""; position: absolute; inset: 10px; background: #c9612c; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#in-taper .in-phase li:nth-child(3) .ph-ico::before { background: #d98556; }
#in-taper .in-phase li.is-free .ph-ico::before { background: var(--tg-med); }
/* 감량 그래프 색 — 수면제(밤 남색) → 줄어듦(옅은 남색) → 약 없는 밤(초록) */
#in-taper .in-phase li { --ph: #3b4a86; --ph2: #7d8bc2; }
#in-taper .in-phase li:nth-child(3) { --ph: #7d8bc2; --ph2: #b7c0e3; }
#in-taper .in-phase li.is-free { --ph: var(--tg-med); --ph2: #9ed1b8; }
#in-taper .in-phase li i::after, #in-taper .in-phase li:nth-child(3) i::after, #in-taper .in-phase li.is-free i::after { background: linear-gradient(180deg, var(--ph2), var(--ph)); }
#in-taper .in-phase li > span:not(.ph-ico), #in-taper .in-phase li:nth-child(3) > span:not(.ph-ico), #in-taper .in-phase li.is-free > span:not(.ph-ico) { background: var(--ph); }
#in-taper .in-phase li em, #in-taper .in-phase li.is-free em { color: var(--ph); }
#in-taper .in-phase li > span.ph-ico { position: absolute; top: 12px; left: 16px; width: 46px; height: 46px; margin: 0; padding: 0; border: 1px solid #e3e8e5; border-radius: 50%; background: #fff; }
#in-taper .in-phase li > span.ph-ico::before { background: var(--ph); }
#in-taper .in-phase li:nth-child(n) > span.ph-ico::before { background: var(--ph); }
/* 감량 단계 — PHASE 라벨은 막대 위, 아이콘은 제목 위 */
#in-taper .in-phase { counter-reset: ph; }
#in-taper .in-phase li { counter-increment: ph; }
#in-taper .in-phase li i::after { height: calc(var(--dose, 100%) * .72); }
#in-taper .in-phase li i::before { content: "PHASE " counter(ph); position: absolute; left: 50%; bottom: calc(var(--dose, 100%) * .72 + 10px); transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--ph); color: #fff; font-size: 12px; font-weight: 700; font-style: normal; letter-spacing: .1em; line-height: 1; white-space: nowrap; }
#in-taper .in-phase li > span:not(.ph-ico) { display: none; }
#in-taper .in-phase li > span.ph-ico { position: relative; top: auto; left: auto; justify-self: start; margin-top: 20px; }
/* 감량 단계 아이콘 — 가운데, 크게 */
#in-taper .in-phase li > span.ph-ico { justify-self: center; width: 78px; height: 78px; margin-top: 22px; }
#in-taper .in-phase li > span.ph-ico::before { inset: 16px; }
/* 고압산소 4단계 — 모바일 2개씩 */
@media (max-width: 1099px) {
  .in-page .in-hb4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 30px; }
  .in-page .in-hb4 li { padding: 0 12px 14px; }
  .in-page .in-hb4 img { width: calc(100% + 24px); margin: 0 -12px 10px; }
  .in-page .in-hb4 li > span { padding: 6px 12px; font-size: 11.5px; }
  .in-page .in-hb4 b { font-size: 14.5px; }
  .in-page .in-hb4 p { font-size: 13px; }
}
/* 감량 4단계 — 모바일: 단계별 카드 분리, 왼쪽 막대 / 오른쪽 내용 */
@media (max-width: 560px) {
  #in-taper .in-phase { gap: 12px; padding-top: 30px; border: 0; background: none; }
  #in-taper .in-phase::before { top: 4px; left: 2px; }
  #in-taper .in-phase li, #in-taper .in-phase li + li { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 16px; row-gap: 6px; padding: 18px 16px; border: 1px solid #e3e8e5 !important; background: #fff; }
  #in-taper .in-phase li i { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; height: auto; min-height: 150px; margin: 0; border-radius: 0; }
  #in-taper .in-phase li i::after { left: 22%; right: 22%; }
  #in-taper .in-phase li > span.ph-ico { grid-column: 2; grid-row: 1; justify-self: start; width: 52px; height: 52px; margin: 0 0 4px; }
  #in-taper .in-phase li > span.ph-ico::before { inset: 11px; }
  #in-taper .in-phase li b, #in-taper .in-phase li p, #in-taper .in-phase li em { grid-column: 2; }
  #in-taper .in-phase li b { font-size: 16px; }
  #in-taper .in-phase li p { font-size: 14px; }
  #in-taper .in-phase li i::before { font-size: 10.5px; padding: 5px 9px; letter-spacing: .06em; }
}
@media (max-width: 560px) { #in-taper .in-phase li i { align-self: start; height: 170px; min-height: 0; } }
/* 불면증 모바일 — 자연스러운 줄바꿈 (단어 단위 + 마지막 줄 외톨이 방지, 본문 강제 줄바꿈 해제) */
@media (max-width: 560px) {
  .in-page p, .in-page li, .in-page dd, .in-page dt, .in-page b, .in-page h3, .in-page h4, .in-page small, .in-page em { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
  .in-page .hx-split-bd p br, .in-page .hx-split-hd .ta-lede br, .in-page .pg-intro br, .in-page .pg-note br, .in-page dd br, .in-page .gjf br { display: none; }
}
#in-taper .in-phase::before { left: auto; right: 22px; font-weight: 400; color: #4a524e; }
@media (max-width: 560px) { #in-taper .in-phase::before { left: auto; right: 2px; } }
/* 감량 단계 — 아이콘 축소 + 내용 가운데 정렬 (PC·태블릿) */
@media (min-width: 561px) {
  #in-taper .in-phase li > span.ph-ico { width: 60px; height: 60px; }
  #in-taper .in-phase li > span.ph-ico::before { inset: 13px; }
  #in-taper .in-phase li b, #in-taper .in-phase li p { text-align: center; }
  #in-taper .in-phase li em { justify-self: center; }
}
#in-taper .in-phase li:nth-child(1) { --ph: #26335e; --ph2: #56659f; }

/* 고압산소 — 불면증과 같은 정리: 안내 박스 전체 폭, 진행 순서 라벨·단계 색, 모바일 줄바꿈 */
.hb-page .pg-note { max-width: none; }
.hb-page .hb-steps { row-gap: 32px; margin-top: 16px; }
.hb-page .hb-steps li { --sc: #6f8a80; position: relative; padding-top: 34px; border-radius: 0; border-color: #e3e8e5; }
.hb-page .hb-steps li:nth-child(2) { --sc: #6f8a80; }
.hb-page .hb-steps li:nth-child(3) { --sc: #5b9bd5; }
.hb-page .hb-steps li:nth-child(4) { --sc: #2f6fb3; }
.hb-page .hb-steps li:nth-child(5) { --sc: #3a8795; }
.hb-page .hb-steps li:nth-child(6) { --sc: #137a52; }
.hb-page .hb-steps li::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--sc); }
.hb-page .hb-steps span { position: absolute; top: 0; left: 22px; transform: translateY(-50%); z-index: 1; margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--sc); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; line-height: 1; }
@media (max-width: 560px) {
  .hb-page p, .hb-page li, .hb-page dd, .hb-page dt, .hb-page b, .hb-page h3, .hb-page h4, .hb-page small { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
  .hb-page .hx-split-bd p br, .hb-page .ta-full p br, .hb-page .pg-intro br, .hb-page .pg-note br, .hb-page dd br { display: none; }
}
#hb-why .hx-split-bd .ta-trio { margin-top: 30px; }
/* 고압산소 — 아래 사진 제거 후 1단, 맨 위 사진 키움 */
.hb-page .hb-why { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hb-page .hx-lead { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; } }
.hb-page .hx-lead .ad-hero-pic { aspect-ratio: 4 / 3; overflow: hidden; }
.hb-page .hx-lead .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
@media (max-width: 560px) { .hb-page .hx-lead .ad-hero-pic { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .hb-page .hx-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }
.hb-page .hx-lead .ad-hero-pic { aspect-ratio: 3 / 2; }
@media (max-width: 560px) { .hb-page .hx-lead .ad-hero-pic { aspect-ratio: 3 / 2; } }
#hb-why .hx-split-bd .hb-why { margin-top: 40px; }
/* 고압산소 — 전체 화면 자연스러운 줄바꿈 (단어 단위, 외톨이 줄 방지, 제목은 균형) */
.hb-page p, .hb-page li, .hb-page dd, .hb-page dt, .hb-page span, .hb-page td, .hb-page th, .hb-page figcaption { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
.hb-page h2, .hb-page h3, .hb-page h4, .hb-page summary b, .hb-page .hb-quote { word-break: keep-all; text-wrap: balance; }

/* 고압산소 도입 배경 — 한약 + 고압산소 = 함께 설계 */
#hb-why .hb-pair { gap: 16px; margin: 30px 0 0; }
#hb-why .hb-pair > div { --c: #137a52; --t: #eef6f1; position: relative; padding: 34px 22px 22px; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); border-top: 3px solid var(--c); border-radius: 0; background: #fff; text-align: center; }
#hb-why .hb-pair > div.is-o2 { --c: #2f6fb3; --t: #eef4fb; }
#hb-why .hb-pair .hp-ico { position: relative; display: block; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--t); }
#hb-why .hb-pair .hp-ico::before { content: ""; position: absolute; inset: 15px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#hb-why .hb-pair .ta-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 7px 16px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
#hb-why .hb-pair h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
#hb-why .hb-pair p:not(.ta-tag) { font-size: 15px; line-height: 1.7; color: #4a524e; }
#hb-why .hb-plus { width: 40px; height: 40px; background: linear-gradient(135deg, #137a52, #2f6fb3); font-size: 22px; font-weight: 700; }
#hb-why .hb-sum { position: relative; display: flex; align-items: center; gap: 18px; margin: 22px 0 0; padding: 22px 26px; background: linear-gradient(120deg, #0c7149 0%, #1c4f7d 100%); color: #fff; }
#hb-why .hb-eq { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 24px; font-weight: 700; line-height: 1; }
#hb-why .hb-sum b { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 700; }
#hb-why .hb-sum p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.88); }
#hb-why .hb-why-note { display: flex; align-items: flex-start; gap: 14px; margin: 18px 0 0; padding: 0; font-size: 15px; line-height: 1.75; color: #4a524e; }
#hb-why .hb-atas { flex: none; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
#hb-why .hb-atas i { padding: 5px 10px; border: 1px solid #cfdad5; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--tg-med); white-space: nowrap; line-height: 1; text-align: center; }
#hb-why .hb-atas i + i { border-color: #c9d8ea; color: #2f6fb3; }
@media (max-width: 639px) {
  #hb-why .hb-pair { row-gap: 26px; }
  #hb-why .hb-plus { margin: -10px auto; }
  #hb-why .hb-sum { padding: 18px; gap: 14px; }
  #hb-why .hb-why-note { flex-direction: column; gap: 10px; }
  #hb-why .hb-atas { flex-direction: row; }
}
@media (min-width: 640px) { #hb-why .hb-pair { align-items: stretch; } #hb-why .hb-plus { align-self: center; } }
#hb-why .hb-quote { text-align: center; }
#hb-why .hb-why-note { display: block; }
#hb-why .hb-sum p.hb-sum-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.22); font-size: 14.5px; color: rgba(255,255,255,.8); }
#hb-why .hx-split-hd .hb-why-lede { margin-top: 20px; }
#hb-mech .hx-split-bd > .hb-bar { margin-top: 34px; }
/* 치료 원리 — 오른쪽 칸에 맞춰 5가지 변화를 가로 행 목록으로 */
#hb-mech .hb-mech { grid-template-columns: minmax(0, 1fr); gap: 10px; }
#hb-mech .hb-mech li { display: grid; grid-template-columns: 44px 190px minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 20px 22px; border-radius: 0; }
#hb-mech .hb-mech li::before { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0; }
#hb-mech .hb-mech b { margin: 0; font-size: 17px; font-weight: 700; }
#hb-mech .hb-mech span { font-size: 15px; line-height: 1.7; color: #4a524e; }
@media (max-width: 760px) {
  #hb-mech .hb-mech li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 6px; padding: 18px 16px; }
  #hb-mech .hb-mech span { grid-column: 2; }
}
/* 고압산소 — 모든 섹션 내용 오른쪽 칸: 첫 블록 간격 */
.hb-page .hx-split-bd > .ta-lede + *:not(.hb-legend), .hb-page .hx-split-bd > .hb-legend + * { margin-top: 30px; }
@media (min-width: 640px) { #hb-use .hb-use { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 고압산소 — 증상별 자세한 안내: 번호 원 + 태그 알약, 펼치면 3단 카드 */
#hb-detail .hb-acc { counter-reset: hbd; border-top: 2px solid #2f6fb3; }
#hb-detail .hb-acc details { counter-increment: hbd; border-bottom: 1px solid #e3e8e5; transition: background .2s; }
#hb-detail .hb-acc details[open] { background: #f5f9fd; }
#hb-detail .hb-acc summary { align-items: center; gap: 8px 14px; padding: 18px 52px 18px 16px; }
#hb-detail .hb-acc summary::before { content: counter(hbd, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #eaf2fb; color: #2f6fb3; font-size: 14px; font-weight: 700; }
#hb-detail .hb-acc details[open] summary::before { background: #2f6fb3; color: #fff; }
#hb-detail .hb-acc summary::after { right: 22px; border-color: #2f6fb3; }
#hb-detail .hb-acc summary b { font-size: 18px; font-weight: 700; }
#hb-detail .hb-acc summary span { padding: 4px 10px; border: 1px solid #c9d8ea; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #2f6fb3; line-height: 1; }
#hb-detail .hb-acc dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 16px 22px; }
#hb-detail .hb-acc dl > div { --c: #2f6fb3; position: relative; padding: 18px 18px 16px; border: 1px solid #e3e8e5; border-top: 3px solid var(--c); border-radius: 0; background: #fff; }
#hb-detail .hb-acc dl > div:nth-child(2) { --c: #137a52; }
#hb-detail .hb-acc dl > div:nth-child(3) { --c: #3a8795; }
#hb-detail .hb-acc dt { margin-bottom: 8px; font-size: 14.5px; font-weight: 700; color: var(--c); }
#hb-detail .hb-acc dd { font-size: 14.5px; line-height: 1.75; color: #4a524e; }
@media (max-width: 760px) {
  #hb-detail .hb-acc dl { grid-template-columns: minmax(0, 1fr); padding: 0 12px 18px; }
  #hb-detail .hb-acc summary { padding: 16px 44px 16px 10px; gap: 6px 10px; }
  #hb-detail .hb-acc summary::before { width: 32px; height: 32px; font-size: 12.5px; }
  #hb-detail .hb-acc summary b { font-size: 16.5px; }
  #hb-detail .hb-acc summary::after { right: 16px; }
}

/* 고압산소 — FAQ: 파란 Q 원, 그룹 제목은 라벨 */
#hb-faq .hb-faq-h { display: inline-block; margin: 0 0 14px; padding: 7px 16px; border-radius: 999px; background: #2f6fb3; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
#hb-faq .faq-list + .hb-faq-h { margin-top: 36px; }
#hb-faq .faq-list { border-top: 2px solid #2f6fb3; }
#hb-faq .faq { background: transparent; transition: background-color .2s; }
#hb-faq .faq[open] { background: #f5f9fd; }
#hb-faq .faq > summary { align-items: center; gap: 16px; }
#hb-faq .faq-part { width: 36px; height: 36px; padding: 0; border-radius: 50%; justify-content: center; background: #eaf2fb; color: #2f6fb3; font-size: 15px; font-weight: 700; }
#hb-faq .faq[open] .faq-part { background: #2f6fb3; color: #fff; }
#hb-faq .faq-subject { font-size: 17px; font-weight: 500; }
@media (min-width: 561px) { #hb-faq .faq-list.tight .faq-a { padding-left: 52px; } }

/* 고압산소 — 근거 자료: 분류 알약 좌측 / 제목·설명 우측 */
#hb-ref .hb-ref { border-top: 2px solid #2f6fb3; }
#hb-ref .hb-ref li { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 20px 4px; border-bottom: 1px solid #e3e8e5; }
#hb-ref .hb-ref li > * { grid-column: 2; }
#hb-ref .hb-ref .ta-tag { grid-column: 1; grid-row: 1 / span 3; justify-self: start; margin: 2px 0 0; padding: 6px 12px; border-radius: 999px; background: #eaf2fb; color: #2f6fb3; font-size: 12.5px; font-weight: 700; letter-spacing: 0; line-height: 1.2; text-align: center; }
#hb-ref .hb-ref a { font-size: 16px; font-weight: 700; border-bottom: 0; }
#hb-ref .hb-ref a::after { content: " ↗"; font-weight: 400; color: #2f6fb3; }
#hb-ref .hb-ref a:hover { color: #2f6fb3; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  #hb-ref .hb-ref li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  #hb-ref .hb-ref li > *, #hb-ref .hb-ref .ta-tag { grid-column: 1; grid-row: auto; }
}

/* 고압산소 — 치료 원리 섹션 디자인 */
#hb-mech .ta-lede b { color: #2f6fb3; }
#hb-mech .hb-bar { align-items: center; gap: 36px; padding: 28px; border: 1px solid #dfe8f2; background: #f7fafd; }
@media (min-width: 900px) { #hb-mech .hb-bar { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
#hb-mech .hb-bar figure { padding: 18px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 6px 18px rgba(30, 60, 100, .06); }
#hb-mech .hb-bar .ta-sub-h { margin: 0 0 14px; }
#hb-mech .hb-key { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 14px 18px; background: #fff; border-left: 0; }
#hb-mech .hb-key b { flex: none; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #2f6fb3; }
#hb-mech .hb-key span { font-size: 13.5px; line-height: 1.55; color: #4a524e; }
#hb-mech .hb-bar .ta-sub-p { max-width: none; font-size: 15px; }
#hb-mech .hb-bar .ta-sub-p:last-child { margin-bottom: 0; }
#hb-mech { counter-reset: hbfig; }
#hb-mech .hb-fig { counter-increment: hbfig; position: relative; margin-top: 44px; }
#hb-mech .hb-fig::before { content: "그림 " counter(hbfig) "  ·  " attr(data-t); position: absolute; top: 0; left: 20px; z-index: 1; transform: translateY(-50%); padding: 7px 16px; border-radius: 999px; background: #2f6fb3; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: pre; }
#hb-mech .hb-fig-scroll { border-color: #dfe8f2; border-radius: 0; }
#hb-mech .hb-fig figcaption { font-size: 14px; color: #5a615d; }
#hb-mech .ta-sub { margin-top: 48px; }
#hb-mech .hb-mech li { border: 1px solid #e3eaf2; background: #fff; }
#hb-mech .hb-mech li::before { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2f6fb3, #137a52); color: #fff; font-size: 14px; font-weight: 700; align-self: center; }
#hb-mech .hb-mech li { align-items: center; }
@media (max-width: 760px) {
  #hb-mech .hb-bar { padding: 16px; gap: 20px; }
  #hb-mech .hb-key b { font-size: 28px; }
  #hb-mech .hb-fig::before { left: 12px; font-size: 12px; padding: 6px 12px; }
  #hb-mech .hb-mech li::before { width: 34px; height: 34px; font-size: 12.5px; align-self: start; }
}
@media (max-width: 560px) { .hb-page figcaption br, .hb-page .ta-sub-p br, .hb-page .ta-lede br { display: none; } }

/* 고압산소 — 본문 글자 크기를 혀통증과 통일 (본문 16.5 / 카드·목록 15.5 / 좌측 설명 16 / FAQ Q 18.5·A 16 / 소제목 28) */
.hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hx-split-hd .ta-lede { font-size: 16px; line-height: 1.8; }
.hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hx-split-bd > .ta-lede, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hx-split-bd > p:not([class]), .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-why-txt > p:not(.hb-quote), .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-sum p, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .ta-sub-p, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-bar .ta-sub-p { font-size: 16.5px; line-height: 1.8; }
.hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-pair p:not(.ta-tag), .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-steps p, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-ch-bd > p:not(.hb-ata), .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-pick p:not(.ta-tag), .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-use p:not(.ta-tag), .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-mech span, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .ta-trio p, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) dd, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) td, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-ref p:not(.ta-tag), .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .ta-dot li, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .hb-ask, .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .rx-callout { font-size: 15.5px; line-height: 1.7; }
.hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .faq-subject { font-size: 18.5px; font-weight: 500; }
.hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .faq-a p { font-size: 16px; line-height: 1.8; }
.hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .ta-sub-h { font-size: 28px; font-weight: 400; }
@media (max-width: 560px) {
  .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .faq-subject { font-size: 16.5px; }
  .hb-page :is(#hb-why,#hb-mech,#hb-chamber,#hb-compare,#hb-use,#hb-detail,#hb-flow,#hb-ear,#hb-safe,#hb-faq,#hb-ref) .ta-sub-h { font-size: 23px; }
}

/* 고압산소 — 조직에서 회복이 일어나는 조건: 산소(출발) → 다섯 가지 변화 허브 */
#hb-mech .hb-hub { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0; margin-top: 24px; border: 1px solid #dfe8f2; }
#hb-mech .hb-hub-src { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 28px 24px; background: linear-gradient(160deg, #2f6fb3 0%, #137a52 100%); color: #fff; }
#hb-mech .hb-hub-src::after { content: ""; position: absolute; right: -12px; top: 50%; margin-top: -12px; border: 12px solid transparent; border-right: 0; border-left-color: #2a7382; z-index: 1; }
#hb-mech .hb-hub-src .o2 { display: grid; place-items: center; width: 60px; height: 60px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 50%; font-size: 22px; font-weight: 800; }
#hb-mech .hb-hub-src .o2 sub { font-size: 12px; margin-top: 8px; }
#hb-mech .hb-hub-src b { font-size: 20px; font-weight: 700; }
#hb-mech .hb-hub-src p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.88); }
#hb-mech .hb-hub .hb-mech { gap: 0; margin: 0; padding: 6px 26px 6px 34px; background: #fff; }
#hb-mech .hb-hub .hb-mech li { grid-template-columns: 48px 170px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 0; border: 0; border-bottom: 1px dashed #dde6ee; background: none; }
#hb-mech .hb-hub .hb-mech li:last-child { border-bottom: 0; }
#hb-mech .hb-hub .hb-mech li::before { content: none; }
#hb-mech .hb-hub .mi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #eaf2fb; color: #2f6fb3; }
#hb-mech .hb-hub li:nth-child(2) .mi { background: #fdeee6; color: #c9612c; }
#hb-mech .hb-hub li:nth-child(3) .mi { background: #e8f3ee; color: #137a52; }
#hb-mech .hb-hub li:nth-child(4) .mi { background: #fbf3df; color: #b58a1e; }
#hb-mech .hb-hub li:nth-child(5) .mi { background: #eef0fa; color: #4a5a9a; }
#hb-mech .hb-hub .mi svg { width: 24px; height: 24px; }
#hb-mech .hb-hub .hb-mech b { font-size: 17px; font-weight: 700; }
@media (max-width: 760px) {
  #hb-mech .hb-hub { grid-template-columns: minmax(0, 1fr); }
  #hb-mech .hb-hub-src { padding: 22px 20px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  #hb-mech .hb-hub-src p { flex-basis: 100%; }
  #hb-mech .hb-hub-src::after { right: auto; left: 50%; top: auto; bottom: -12px; margin: 0 0 0 -12px; border: 12px solid transparent; border-bottom: 0; border-top-color: #1f7466; }
  #hb-mech .hb-hub .hb-mech { padding: 10px 16px; }
  #hb-mech .hb-hub .hb-mech li { grid-template-columns: 44px minmax(0, 1fr); row-gap: 4px; align-items: start; }
  #hb-mech .hb-hub .mi { width: 44px; height: 44px; grid-row: 1 / span 2; }
  #hb-mech .hb-hub .hb-mech b { align-self: end; }
  #hb-mech .hb-hub .hb-mech span:not(.mi) { grid-column: 2; }
}
#hb-mech .hb-hub .hb-mech li > .mi { grid-column: 1; grid-row: auto; } @media (max-width: 760px) { #hb-mech .hb-hub .hb-mech li > .mi { grid-column: 1; grid-row: 1 / span 2; } }
#hb-mech .hb-hub-src .o2 { display: flex; align-items: center; justify-content: center; line-height: 1; }
#hb-mech .hb-hub-src .o2 sub { margin: 10px 0 0 1px; font-size: 13px; line-height: 1; }
#hb-mech .hb-hub .mi svg { width: 26px; height: 26px; }
/* 다섯 가지 변화 — 아이콘 이미지(마스크) */
#hb-mech .hb-hub .mi { position: relative; width: 52px; height: 52px; }
#hb-mech .hb-hub .mi::before { content: ""; position: absolute; inset: 12px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#hb-mech .hb-hub .hb-mech li { grid-template-columns: 52px 170px minmax(0, 1fr); }
@media (max-width: 760px) { #hb-mech .hb-hub .hb-mech li { grid-template-columns: 46px minmax(0, 1fr); } #hb-mech .hb-hub .mi { width: 46px; height: 46px; } #hb-mech .hb-hub .mi::before { inset: 11px; } }
#hb-mech .hb-hub .mi::before { inset: 9px; }
@media (max-width: 760px) { #hb-mech .hb-hub .mi::before { inset: 8px; } }

/* ═══ 홈 — 두 원장 / 진료 철학 (고객 요청 260928, 2026-09-29) ═══ */
.hist .tg-sub br { display: inline; }
@media (max-width: 760px) { .hist-card b br { display: none; } }

.home-dr .hdr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 16px; }
@media (min-width: 860px) { .home-dr .hdr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
.hdr { --c: var(--tg-med); --cs: var(--tg-med-soft); position: relative; display: flex; flex-direction: column;
       background: #fff; border: 1px solid #e1e8e4; padding: 46px 40px 30px; }
.hdr[data-track="beauty"] { --c: var(--tg-beauty); --cs: var(--tg-beauty-soft); }
.hdr-tag { position: absolute; top: 0; left: 40px; transform: translateY(-50%); background: var(--c); color: #fff;
           padding: 7px 17px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.hdr-name { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 29px); font-weight: 700; letter-spacing: -.03em; color: var(--tg-ink); }
.hdr-desc { margin: 0 0 24px; font-size: 16px; line-height: 1.8; color: var(--tg-body); word-break: keep-all; }
.hdr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.hdr-chips a, .hdr-chips span { display: block; padding: 7px 13px; background: var(--cs); color: var(--c); border: 1px solid transparent;
                                font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s, background .2s; }
.hdr-chips a:hover { border-color: var(--c); background: #fff; text-decoration: none; }
.hdr-more { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 18px;
            border-top: 1px solid #edf1ef; font-size: 15px; font-weight: 600; color: var(--c); text-decoration: none; }
.hdr-more svg { transition: transform .2s; }
.hdr-more:hover { text-decoration: none; }
.hdr-more:hover svg { transform: translateX(4px); }

.home-hard { background: #fff; }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 960px) { .hh-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; } }
.hh-eyebrow { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .18em; color: var(--tg-med); }
.hh-head .tg-h2 { margin: 0 0 22px; text-align: left; }
.hh-txt { margin: 0 0 10px; font-size: 16.5px; line-height: 1.8; color: var(--tg-body); word-break: keep-all; }
.hh-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tg-ink); }
.hh-list > li { --c: var(--tg-med); --cs: var(--tg-med-soft); }
.hh-list > li:nth-child(3) { --c: var(--tg-beauty); --cs: var(--tg-beauty-soft); }
.hh-item { display: grid; grid-template-columns: 68px minmax(0, 1fr) 22px; align-items: center; gap: 18px; padding: 26px 12px;
           border-bottom: 1px solid var(--tg-hair); color: inherit; text-decoration: none; transition: background .2s; }
a.hh-item:hover { background: var(--cs); text-decoration: none; }
.hh-no { font-family: "Poppins", sans-serif; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em;
         color: var(--c); opacity: .22; }
.hh-body b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); word-break: keep-all; }
.hh-body em { display: block; margin-top: 5px; font-style: normal; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.hh-go { color: var(--c); transition: transform .2s; }
a.hh-item:hover .hh-go { transform: translateX(4px); }
.hh-quote { margin: 64px 0 0; padding: 42px 32px 38px; text-align: center; background: #f4f8f6; border-top: 2px solid var(--tg-med); }
.hh-quote blockquote { margin: 0; font-size: clamp(19px, 2.3vw, 25px); font-weight: 600; line-height: 1.55; letter-spacing: -.025em; color: var(--tg-ink); word-break: keep-all; }
.hh-quote figcaption { margin-top: 14px; font-size: 15px; color: var(--tg-mute); }
.hh-quote figcaption::before { content: "— "; }
.hh-note { margin: 16px 0 0; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--tg-mute); word-break: keep-all; }

@media (max-width: 760px) {
  .hdr { padding: 38px 22px 24px; }
  .hdr-tag { left: 22px; font-size: 13px; padding: 6px 14px; }
  .hdr-desc { font-size: 15.5px; }
  .hdr-chips a, .hdr-chips span { font-size: 13.5px; padding: 6px 11px; }
  .hh-item { grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 12px; padding: 20px 4px; }
  .hh-no { font-size: 32px; }
  .hh-body b { font-size: 17.5px; }
  .hh-body em { font-size: 14px; }
  .hh-txt { font-size: 15.5px; }
  .hh-quote { margin-top: 44px; padding: 30px 20px 28px; }
}

/* 금진옥액 실제 혀밑 — 5장→17장(고객 260928). 흐르는 속도를 맞춘다 (2026-09-29) */
.gj-real .dx-real-list { animation-duration: 120s; }

/* 혀통증 — 설진맵 3분할 참고도 (고객 260928, 2026-09-29). 세 장의 높이를 같게 두려고 원본 폭 비율로 칸을 나눈다 */
#hx-dx .tmap-hd { margin-top: 64px; }
.tmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 460px; margin-inline: auto; }
@media (min-width: 900px) { .tmap { grid-template-columns: minmax(0, 592fr) minmax(0, 493fr) minmax(0, 490fr); gap: 20px; max-width: none; } }
.tmap li { background: #fff; border: 1px solid var(--tg-hair); padding: 14px; }
.tmap img { display: block; width: 100%; height: auto; }
.tmap-note { margin: 16px 0 0; text-align: center; font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.tmap-note b { color: var(--tg-ink); font-weight: 600; }
@media (max-width: 760px) { #hx-dx .tmap-hd { margin-top: 44px; } .tmap li { padding: 10px; } .tmap-note { font-size: 13.5px; } }

/* ═══ 교통사고 후유증 (pain-accident) — 고객 초안 260928 재구성, 2026-09-29
   색: 통증이 커지는 흐름 = 적색 계열, 회복 = 초록. 모서리 직각, 라벨은 박스 상단에 걸친 알약 ═══ */
.ac-page { --ac-red: #b8483e; --ac-red-soft: #fbefeb; --ac-green: #137a52; --ac-green-soft: #eaf5f0; }
.ac-page .hx-split-hd .ta-lede { font-size: 16px; line-height: 1.8; }
.ac-page .ta-sub { margin-top: 56px; }
.ac-page .hx-split-bd > .pg-note { margin-top: 14px; }

/* 통증 타임라인 */
.ac-time { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tg-ink); border-bottom: 2px solid var(--tg-ink); }
.ac-time > li { display: grid; grid-template-columns: 132px minmax(0, 1fr) 92px; gap: 24px; align-items: center; padding: 26px 6px; border-bottom: 1px solid var(--tg-hair); }
.ac-time > li:last-child { border-bottom: 0; }
.ac-time > li:nth-child(1) { --c: #dca08f; } .ac-time > li:nth-child(2) { --c: #d3806b; } .ac-time > li:nth-child(3) { --c: #c9654f; }
.ac-time > li:nth-child(4) { --c: #b8483e; } .ac-time > li:nth-child(5) { --c: #9a3329; }
.ac-d b { display: block; font-family: "Poppins", sans-serif; font-size: 23px; font-weight: 600; letter-spacing: -.01em; color: var(--c); white-space: nowrap; }
.ac-d span { display: block; margin-top: 4px; font-size: 14px; color: var(--tg-mute); }
.ac-t h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.ac-t p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.ac-lv { display: grid; grid-template-columns: repeat(5, 12px); gap: 4px; align-items: end; justify-content: end; }
.ac-lv i { display: block; background: #efe6e2; }
.ac-lv i:nth-child(1) { height: 8px; } .ac-lv i:nth-child(2) { height: 13px; } .ac-lv i:nth-child(3) { height: 18px; }
.ac-lv i:nth-child(4) { height: 23px; } .ac-lv i:nth-child(5) { height: 28px; }
.ac-time > li:nth-child(1) .ac-lv i:nth-child(-n+1), .ac-time > li:nth-child(2) .ac-lv i:nth-child(-n+2),
.ac-time > li:nth-child(3) .ac-lv i:nth-child(-n+3), .ac-time > li:nth-child(4) .ac-lv i:nth-child(-n+4),
.ac-time > li:nth-child(5) .ac-lv i:nth-child(-n+5) { background: var(--c); }
.ac-lv span { grid-column: 1 / -1; margin-top: 6px; text-align: right; font-size: 13px; font-weight: 600; color: var(--c); white-space: nowrap; }

/* 알약 라벨(박스 상단 걸침) */
.ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 5px 13px; border-radius: 999px; background: var(--ac-red); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

/* 부위별 증상 */
.ac-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 20px; padding-top: 14px; }
@media (min-width: 700px) { .ac-area { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-area article { position: relative; padding: 30px 24px 24px; background: #fff; border: 1px solid #e6e1de; }
.ac-area h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.ac-area p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }

/* 셀프 체크 */
.ac-check { margin-top: 48px; padding: 32px 30px 28px; background: #f6f8f7; border: 1px solid #e3e8e5; }
.ac-check-hd h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.ac-check-hd p { margin: 0 0 20px; font-size: 15.5px; color: var(--tg-body); }
.ac-check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 700px) { .ac-check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-check-list label { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; border: 1px solid #e3e8e5; cursor: pointer; transition: border-color .2s, background .2s; }
.ac-check-list input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border: 1.5px solid #b9c4be; background: #fff; display: grid; place-content: center; cursor: pointer; }
.ac-check-list input::before { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ac-check-list input:checked { background: var(--ac-red); border-color: var(--ac-red); }
.ac-check-list input:checked::before { opacity: 1; }
.ac-check-list input:focus-visible { outline: 2px solid var(--ac-red); outline-offset: 2px; }
.ac-check-list label:has(input:checked) { border-color: var(--ac-red); background: var(--ac-red-soft); }
.ac-check-list span { font-size: 15.5px; line-height: 1.5; color: var(--tg-ink); word-break: keep-all; }
.ac-check-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 22px 0 0; }
.ac-check-n { font-family: "Poppins", sans-serif; font-size: 34px; font-weight: 600; line-height: 1; color: #b9c4be; transition: color .2s; }
.ac-check.is-on .ac-check-n { color: var(--ac-red); }
.ac-check-sum > span { font-size: 15px; font-weight: 600; color: var(--tg-ink); margin-right: 12px; }
.ac-check-sum em { font-style: normal; font-size: 15px; color: var(--tg-body); word-break: keep-all; }

/* 내원 절차 */
.ac-visit-pic { margin: 28px 0 0; }
.ac-visit-pic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ac-steps { list-style: none; margin: 0; padding: 0; }
.ac-steps > li:not(.ac-phase) { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; padding-bottom: 28px; }
.ac-steps > li:not(.ac-phase)::before { content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: #d6e6de; }
.ac-steps > li.is-end::before { display: none; }
.ac-steps > li.is-end { padding-bottom: 0; }
.ac-no { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ac-green); color: var(--ac-green); background: #fff; display: grid; place-items: center; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600; }
.ac-steps li.is-key .ac-no { border-color: var(--ac-red); color: var(--ac-red); }
.ac-steps li.is-end .ac-no { background: var(--tg-ink); border-color: var(--tg-ink); color: #fff; }
.ac-steps h3 { margin: 9px 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.ac-steps p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.ac-steps em { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: var(--ac-green-soft); color: var(--ac-green); font-style: normal; font-size: 13px; font-weight: 600; }
.ac-steps em.is-warn { background: var(--ac-red-soft); color: var(--ac-red); }
.ac-phase { margin: 6px 0 16px 66px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--ac-green); }
.ac-phase::before { content: "— "; }
.ac-tx-chips { list-style: none; margin: 14px 0 0; padding: 16px; display: flex; flex-wrap: wrap; gap: 8px; background: var(--ac-red-soft); }
.ac-tx-chips li { padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid #efd3ca; font-size: 14px; font-weight: 500; color: var(--tg-ink); }
.ac-tx-chips small { font-size: 12px; color: var(--ac-red); }
.ac-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
@media (min-width: 700px) { .ac-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-notes > div { padding: 22px 22px 20px; background: #f6f8f7; border: 1px solid #e3e8e5; }
.ac-notes h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; color: var(--tg-ink); }
.ac-notes p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }

/* 치료 프로그램 */
.ac-tx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 18px; padding-top: 14px; }
@media (min-width: 640px) { .ac-tx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ac-tx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ac-tx article { position: relative; display: flex; flex-direction: column; padding: 30px 22px 22px; background: #fff; border: 1px solid #e3e8e5; }
.ac-tx .ac-pill { background: var(--ac-green); }
.ac-tx h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--tg-ink); }
.ac-tx p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.ac-tx ul { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-tx ul li { padding: 4px 10px; background: var(--ac-green-soft); color: var(--ac-green); font-size: 13px; font-weight: 600; }
.ac-page .tg-table.ac-table { min-width: 760px; }
.ac-page .ac-table tbody th { white-space: nowrap; font-weight: 700; color: var(--tg-ink); }
.ac-page .ac-table td { font-size: 15px; line-height: 1.65; }
.ac-page .ac-table td b { display: inline-block; margin-right: 4px; font-size: 13px; color: var(--ac-green); }
.ac-herb { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 18px; }
@media (min-width: 760px) { .ac-herb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ac-herb > li { position: relative; display: flex; flex-direction: column; padding: 30px 22px 22px; background: #fff; border: 1px solid #e3e8e5; }
.ac-wk { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 5px 14px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13.5px; font-weight: 700; }
.ac-herb h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--c); }
.ac-herb h3 small { margin-left: 4px; font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 500; color: var(--tg-mute); }
.ac-herb p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.ac-herb ul { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-herb ul li { padding: 4px 10px; border: 1px solid var(--c); color: var(--c); font-size: 13px; font-weight: 600; }

/* 진료시간 */
.ac-hours { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .ac-hours { grid-template-columns: 1.3fr 1fr 1fr; } }
.ac-hours > div { padding: 24px 22px; background: #fff; border: 1px solid #e3e8e5; }
.ac-hours > div.is-night { background: #16332a; border-color: #16332a; color: #fff; }
.ac-hours span { display: block; font-size: 14.5px; font-weight: 600; color: var(--tg-mute); }
.ac-hours .is-night span, .ac-hours .is-night em { color: #9bb2a6; }
.ac-hours b { display: block; margin: 8px 0 4px; font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--tg-ink); white-space: nowrap; }
.ac-hours .is-night b { color: #fff; }
.ac-hours em { font-style: normal; font-size: 13.5px; color: var(--tg-mute); }
.ac-page .ac-why { margin-top: 36px; }
.ac-page .ac-why > div { border-radius: 0; }
.ac-page .ac-why p:not(.ta-tag) { font-size: 15.5px; line-height: 1.7; }


@media (max-width: 760px) {
  .ac-time > li { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 20px 2px; }
  .ac-time .ac-d { grid-column: 1; }
  .ac-time .ac-lv { grid-column: 2; grid-row: 1; }
  .ac-time .ac-t { grid-column: 1 / -1; }
  .ac-d b { font-size: 20px; }
  .ac-t h3, .ac-area h3, .ac-steps h3 { font-size: 17.5px; }
  .ac-t p, .ac-area p, .ac-steps p, .ac-tx p, .ac-herb p { font-size: 15px; }
  .ac-check { padding: 24px 18px 22px; }
  .ac-steps > li:not(.ac-phase) { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .ac-no { width: 40px; height: 40px; font-size: 14.5px; }
  .ac-steps > li:not(.ac-phase)::before { left: 19px; top: 40px; }
  .ac-phase { margin-left: 54px; }
  .ac-steps h3 { margin-top: 6px; }
  .ac-hours b { font-size: 23px; }
  .ac-page .hx-split-bd p br { display: none; }
}
.ac-page .ta-trio h3 { word-break: keep-all; }
.ac-page a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 639px) { .ac-hours > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 16px 18px; } .ac-hours b { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 21px; } .ac-hours em { font-size: 13px; } }

/* 교통사고 타임라인 v2 (2026-09-29 요청: 검은 굵은 선 제거) — 세로 레일 + 원형 노드 + 카드. 막대그래프 유지 */
.ac-time { position: relative; display: grid; gap: 12px; padding-left: 36px; border: 0; }
.ac-time::before { content: ""; position: absolute; left: 10px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(to bottom, #ecc8bd, #9a3329); }
.ac-time > li, .ac-time > li:last-child { position: relative; padding: 22px 26px; background: #fff; border: 1px solid #efe4e0; }
.ac-time > li::before { content: ""; position: absolute; left: -33px; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid var(--c); }
.ac-time > li:last-child::before { background: var(--c); }
@media (max-width: 760px) { .ac-time { padding-left: 26px; gap: 10px; } .ac-time::before { left: 6px; } .ac-time > li, .ac-time > li:last-child { padding: 18px 16px; } .ac-time > li::before { left: -27px; width: 14px; height: 14px; margin-top: -7px; } }
.ac-time::before { display: none; }
.ac-time > li::after { content: ""; position: absolute; left: -26px; top: 50%; height: calc(100% + 12px); width: 2px; background: linear-gradient(to bottom, var(--c), var(--c2)); z-index: 0; }
.ac-time > li:last-child::after { display: none; }
.ac-time > li::before { z-index: 1; }
.ac-time > li:nth-child(1) { --c2: #d3806b; } .ac-time > li:nth-child(2) { --c2: #c9654f; } .ac-time > li:nth-child(3) { --c2: #b8483e; } .ac-time > li:nth-child(4) { --c2: #9a3329; }
@media (max-width: 760px) { .ac-time > li::after { left: -21px; height: calc(100% + 10px); } }
/* 초안 재구성 페이지 공통 — 지정 줄바꿈은 데스크톱에서만, 모바일은 자연 줄바꿈(br 앞 공백 유지) */
@media (max-width: 760px) { .ac-page .hx-split-hd .ta-lede br, .ac-page .hx-split-hd .pg-h2-sub br { display: none; } }
/* 교통사고 — 안내문 배경을 위 콘텐츠 폭에 맞춘다(96ch 제한 해제) */
.ac-page .hx-split-bd .pg-note { max-width: none; box-sizing: border-box; }
/* 교통사고 타임라인 — 원 키움 (2026-09-29) */
.ac-time > li::before { left: -36px; width: 22px; height: 22px; margin-top: -11px; border-width: 3px; }
@media (max-width: 760px) { .ac-time { padding-left: 30px; } .ac-time > li::before { left: -29px; width: 18px; height: 18px; margin-top: -9px; } }
/* 교통사고 타임라인 — 원 더 키우고 카드와 간격 확대 (2026-09-29) */
.ac-time { padding-left: 56px; }
.ac-time > li::before { left: -56px; width: 28px; height: 28px; margin-top: -14px; border-width: 4px; }
.ac-time > li::after { left: -43px; }
@media (max-width: 760px) { .ac-time { padding-left: 40px; } .ac-time > li::before { left: -40px; width: 22px; height: 22px; margin-top: -11px; border-width: 3px; } .ac-time > li::after { left: -30px; } }
/* 교통사고 부위별 증상 — 아이콘 (2026-09-29) */
.ac-area article { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-content: start; }
.ac-area article > h3, .ac-area article > p { grid-column: 2; }
.ac-ico { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 64px; height: 64px; border-radius: 50%; background: var(--ac-red-soft); display: grid; place-items: center; }
.ac-ico::before { content: ""; width: 38px; height: 38px; background: var(--ac-red); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ac-area h3 { margin-top: 4px; }
@media (max-width: 760px) { .ac-area article { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; } .ac-ico { width: 52px; height: 52px; } .ac-ico::before { width: 31px; height: 31px; } }
/* 교통사고 — 알약 라벨을 사이트 공통값(7px 16px · 13px/600 · .04em · lh 1)으로 통일, 아이콘 키움 (2026-09-29) */
.ac-pill, .ac-wk { padding: 7px 16px; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.ac-area article { grid-template-columns: 76px minmax(0, 1fr); }
.ac-ico { width: 76px; height: 76px; }
.ac-ico::before { width: 48px; height: 48px; }
@media (max-width: 760px) { .ac-area article { grid-template-columns: 60px minmax(0, 1fr); } .ac-ico { width: 60px; height: 60px; } .ac-ico::before { width: 38px; height: 38px; } }
/* 교통사고 — 상단 이미지 직각 (2026-09-29) */
.ac-page .ad-hero, .ac-page .ad-hero img { border-radius: 0; }
/* 상단 사진 — 전 페이지 직각 (2026-09-29 요청) */
.ad-hero, .ad-hero .ad-hero-pic, .ad-hero img { border-radius: 0; }
/* 교통사고 내원 절차 — 원 키우고 간격 확대, 05 칩 배경 제거 (2026-09-29) */
.ac-steps > li:not(.ac-phase) { grid-template-columns: 56px minmax(0, 1fr); gap: 28px; }
.ac-no { width: 56px; height: 56px; font-size: 18px; }
.ac-steps > li:not(.ac-phase)::before { left: 27px; top: 56px; }
.ac-phase { margin-left: 84px; }
.ac-steps h3 { margin-top: 14px; }
.ac-tx-chips { padding: 0; background: none; }
@media (max-width: 760px) { .ac-steps > li:not(.ac-phase) { grid-template-columns: 46px minmax(0, 1fr); gap: 18px; } .ac-no { width: 46px; height: 46px; font-size: 15.5px; } .ac-steps > li:not(.ac-phase)::before { left: 22px; top: 46px; } .ac-phase { margin-left: 64px; } .ac-steps h3 { margin-top: 10px; } }
/* 교통사고 치료 프로그램 — 아이콘 (제목 위, 초록) (2026-09-29) */
.ac-tx .ac-ico { margin: 4px 0 14px; background: var(--ac-green-soft); }
.ac-tx .ac-ico::before { background: var(--ac-green); }
/* 교통사고 치료 카드 — 아이콘 옆에 제목 (2026-09-29) */
.ac-tx article { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: center; }
.ac-tx .ac-ico { grid-column: 1; grid-row: 1; margin: 4px 0 16px; }
.ac-tx article > h3 { grid-column: 2; grid-row: 1; margin: 4px 0 16px; }
.ac-tx article > p { grid-column: 1 / -1; grid-row: 2; align-self: start; }
.ac-tx article > ul { grid-column: 1 / -1; grid-row: 3; align-self: end; }
@media (max-width: 760px) { .ac-tx article { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; } }
/* 교통사고 — 소제목 형광 마커 (혀통증 #hx-dx 방식, 색만 페이지 톤 코랄) (2026-09-29) */
.ac-page .ta-sub .ta-sub-h { display: inline; padding: 0 4px; margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, rgba(232, 140, 120, .35) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ac-page .ta-sub .ta-sub-h + .ta-sub-p { margin-top: 14px; }
@media (max-width: 560px) { .ac-page .ta-sub .ta-sub-h { font-size: 23px; } }
/* 교통사고 셀프체크 제목 — 형광 마커 (2026-09-29) */
.ac-check-hd h3 { display: inline; padding: 0 4px; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; background-image: linear-gradient(transparent 62%, rgba(232, 140, 120, .35) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ac-check-hd p { margin-top: 14px; }
@media (max-width: 560px) { .ac-check-hd h3 { font-size: 23px; } }
/* 셀프체크 합계 줄 — 우측 정렬 (2026-09-29) */
.ac-check-sum { justify-content: flex-end; text-align: right; }
.ac-check-sum > span { margin-right: 14px; }
/* 내원 절차 — STEP 문구를 단계 제목에 가깝게 (30px → 8px) (2026-09-29) */
.ac-phase { margin-bottom: -6px; }
@media (max-width: 760px) { .ac-phase { margin-bottom: -2px; } }
/* 내원 절차 — STEP 문구가 아래 원(06 등)에 닿지 않게: 문구와 원 사이 8px, 제목은 원 윗쪽에 맞춤 (2026-09-29) */
.ac-phase { margin-bottom: 8px; }
.ac-steps > li.ac-phase + li h3 { margin-top: 6px; }
@media (max-width: 760px) { .ac-phase { margin-bottom: 8px; } .ac-steps > li.ac-phase + li h3 { margin-top: 4px; } }
/* 내원 절차 — 모든 단계 제목 높이 통일(원 윗쪽 기준) */
.ac-steps h3 { margin-top: 6px; }
@media (max-width: 760px) { .ac-steps h3 { margin-top: 4px; } }
/* 형광펜 — 섹션마다 다른 색 (2026-09-29): 부위별 증상 = 코랄, 치료 프로그램 = 초록 */
#ac-tx .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(110, 205, 160, .38) 62%); }
/* 내원 절차 — 원과 내용 간격 확대 28→40 (모바일 18→26) (2026-09-29) */
.ac-steps > li:not(.ac-phase) { gap: 40px; }
.ac-phase { margin-left: 96px; }
@media (max-width: 760px) { .ac-steps > li:not(.ac-phase) { gap: 26px; } .ac-phase { margin-left: 72px; } }
/* 내원 절차 — 단계 사이 하단 여백 확대 28→44 (모바일 36) (2026-09-29) */
.ac-steps > li:not(.ac-phase) { padding-bottom: 44px; }
.ac-steps > li.is-end { padding-bottom: 0; }
@media (max-width: 760px) { .ac-steps > li:not(.ac-phase) { padding-bottom: 36px; } .ac-steps > li.is-end { padding-bottom: 0; } }
/* 내원 절차 — 라벨을 단계 제목 옆으로 (2026-09-29) */
.ac-steps h3 em { margin: 0 0 0 12px; vertical-align: 3px; line-height: 1; padding: 7px 12px; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 760px) { .ac-steps h3 em { margin-left: 8px; vertical-align: 2px; } }
/* 교통사고 치료법 비교표 — 바깥 테두리·둥근 모서리 제거 (행 구분선은 유지) (2026-09-29) */
#ac-tx .tg-table-wrap { border: 0; border-radius: 0; }
/* 교통사고 치료법 비교표 — 외곽선은 보이게(직각), 안쪽 행 구분선 제거 (2026-09-29) */
#ac-tx .tg-table-wrap { border: 1px solid #e6ebe9; border-radius: 0; }
#ac-tx .tg-table th, #ac-tx .tg-table td { border: 0; }
/* 교통사고 치료법 비교표 — 행 사이 구분선 복원 (외곽선 직각 유지) (2026-09-29) */
#ac-tx .tg-table tbody th, #ac-tx .tg-table tbody td { border-top: 1px solid #e6ebe9; }
/* 교통사고 치료법 비교표 — 치료법 아이콘 (2026-09-29) */
#ac-tx .ac-table tbody th { white-space: nowrap; vertical-align: middle; }
.ac-tico { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; background: var(--ac-green-soft); vertical-align: middle; }
.ac-tico::before { content: ""; width: 22px; height: 22px; background: var(--ac-green); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* 교통사고 비교표 — 글자 크기를 혀통증·불면증·자율신경 비교표와 통일 (2026-09-29) */
.ac-page .ac-table thead th { font-size: 15px; font-weight: 600; }
.ac-page .ac-table tbody th { font-size: 17px; font-weight: 600; }
.ac-page .ac-table td { font-size: 16px; font-weight: 300; line-height: 1.65; }
.ac-page .ac-table td b { font-size: 13.5px; }
/* 교통사고 비교표 — 모든 칸 세로 가운데 정렬 (2026-09-29) */
.ac-page .ac-table th, .ac-page .ac-table td { vertical-align: middle; }
/* 교통사고 — 소제목 설명 문단 폭 제한 해제(데스크톱 한 줄) (2026-09-29) */
.ac-page .ta-sub .ta-sub-p { max-width: none; }
/* 교통사고 치료 카드 — 아이콘 조금 줄임 76/48 → 66/42 (모바일 60/38 → 54/34) (2026-09-29) */
.ac-tx article { grid-template-columns: 66px minmax(0, 1fr); }
.ac-tx .ac-ico { width: 66px; height: 66px; }
.ac-tx .ac-ico::before { width: 42px; height: 42px; }
@media (max-width: 760px) { .ac-tx article { grid-template-columns: 54px minmax(0, 1fr); } .ac-tx .ac-ico { width: 54px; height: 54px; } .ac-tx .ac-ico::before { width: 34px; height: 34px; } }
/* 교통사고 — 강제 줄바꿈 대신 자연 줄바꿈(균형) 제목 (2026-09-29) */
.ac-page .pg-h2.is-flow { text-wrap: balance; word-break: keep-all; }
/* 교통사고 비교표 — "주로 쓰는 상황" 열은 줄바꿈 없이 한 줄 (2026-09-29) */
.ac-page .ac-table td:nth-of-type(2) { white-space: nowrap; }

/* ═══ 교통사고 진료시간 재디자인 (2026-09-29) — 10~21시 가로 시간표, 18시 이후 = 야간(딥그린) ═══ */
.ac-sched { padding: 26px 28px 22px; background: #fff; border: 1px solid #e3e8e5; }
.ac-sched-axis, .ac-sched-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 132px; column-gap: 22px; align-items: center; }
.ac-sched-axis { position: relative; height: 22px; margin-bottom: 6px; }
.ac-sched-axis::before { content: ""; grid-column: 1; }
.ac-sched-axis span { position: absolute; top: 0; left: calc(130px + 22px + (100% - 130px - 22px - 22px - 132px) * var(--x)); transform: translateX(-50%); font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 500; color: var(--tg-mute); white-space: nowrap; }
.ac-sched-row { padding: 12px 0; }
.ac-sched-row + .ac-sched-row { border-top: 1px solid #eef1ef; }
.ac-sched-day { font-size: 16.5px; font-weight: 700; color: var(--tg-ink); line-height: 1.3; }
.ac-sched-day small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--tg-mute); }
.ac-sched-track { position: relative; height: 34px; background: repeating-linear-gradient(to right, #f3f6f4 0, #f3f6f4 calc(100% / 11 - 1px), #e4eae7 calc(100% / 11 - 1px), #e4eae7 calc(100% / 11)); }
.ac-sched-track i { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100%); width: calc((var(--e) - var(--s)) * 100%); background: var(--ac-green); display: flex; align-items: center; justify-content: center; }
.ac-sched-track i.is-we { background: #5fae8c; }
.ac-sched-track i.is-night { background: #16332a; }
.ac-sched-track em { font-style: normal; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: #fff; white-space: nowrap; }
.ac-sched-t { font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 600; color: var(--tg-ink); text-align: right; white-space: nowrap; }
.ac-sched-row:first-of-type .ac-sched-t { color: #16332a; }
.ac-sched-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ac-sched-chips li { padding: 8px 15px; border-radius: 999px; background: var(--ac-green-soft); color: var(--ac-green); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ac-sched-chips a { color: inherit; white-space: nowrap; }
.ac-why2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .ac-why2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ac-why2 article { position: relative; overflow: hidden; padding: 30px 24px 26px; background: #fff; border: 1px solid #e3e8e5; }
.ac-wm { position: absolute; top: 6px; right: 14px; font-family: "Poppins", sans-serif; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: rgba(19, 122, 82, .1); pointer-events: none; }
.ac-why2 h3 { position: relative; margin: 26px 0 10px; font-size: 18.5px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); word-break: keep-all; }
.ac-why2 p { position: relative; margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 760px) {
  .ac-sched { padding: 18px 16px 14px; }
  .ac-sched-axis, .ac-sched-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .ac-sched-row { grid-template-areas: "day time" "track track"; row-gap: 8px; }
  .ac-sched-day { grid-area: day; } .ac-sched-t { grid-area: time; font-size: 16.5px; } .ac-sched-track { grid-area: track; height: 30px; }
  .ac-sched-day small { display: inline; margin: 0 0 0 6px; }
  .ac-sched-axis { height: 18px; margin-bottom: 0; }
  .ac-sched-axis span { left: calc(100% * var(--x)); font-size: 11px; }
  .ac-sched-axis span:first-child { transform: none; } .ac-sched-axis span:last-child { transform: translateX(-100%); }
  .ac-sched-chips li { font-size: 13.5px; }
  .ac-wm { font-size: 54px; }
}

/* ═══ 교통사고 진료시간 v2 (2026-09-29) — 요일 띠 · 오늘/현재 시각 · 아이콘 카드 ═══ */
.ac-sched { position: relative; margin-top: 14px; padding: 36px 30px 24px; }
.ac-sched-tag { position: absolute; top: 0; left: 28px; transform: translateY(-50%); padding: 7px 16px; border-radius: 999px; background: var(--ac-green); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.ac-sched-hd h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--tg-ink); word-break: keep-all; }
.ac-sched-hd p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }

/* 요일 띠 — 평일(야간) 딥그린, 주말·공휴일 연초록 */
.ac-week { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 6px; }
.ac-week li { position: relative; padding: 13px 4px 11px; text-align: center; background: #e3f1ea; color: var(--ac-green); }
.ac-week li.is-night { background: #16332a; color: #fff; }
.ac-week b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; }
.ac-week span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; opacity: .8; white-space: nowrap; }
.ac-week li.is-today { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ac-red); }
.ac-week li.is-today::before { content: "오늘"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -60%); padding: 4px 9px; border-radius: 999px; background: var(--ac-red); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }

/* 시간표 — 오늘 행 강조, 현재 시각 선 */
.ac-sched-grid { padding-top: 4px; border-top: 1px solid #eef1ef; }
.ac-sched-axis { margin-top: 14px; }
.ac-sched-row:first-of-type .ac-sched-t { color: var(--tg-ink); }
.ac-sched-row[data-days^="1"] .ac-sched-t { color: #16332a; }
.ac-sched-row.is-today { background: #f3f9f6; box-shadow: 0 0 0 12px #f3f9f6; position: relative; z-index: 0; padding-top: 30px; }
.ac-sched-row.is-today .ac-sched-day::after { content: "오늘"; display: inline-block; margin-left: 8px; padding: 4px 9px; border-radius: 999px; background: var(--ac-red); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; vertical-align: 2px; }
.ac-sched-row.is-today .ac-sched-day small { margin-top: 4px; }
.ac-now { position: absolute; top: -8px; bottom: -8px; left: calc(var(--x) * 100%); width: 2px; margin-left: -1px; background: var(--ac-red); z-index: 2; }
.ac-now em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: 4px 8px; border-radius: 999px; background: var(--ac-red); color: #fff; font-style: normal; font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.ac-moon { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: #fff; -webkit-mask: url('/assets/images/icons/rx-night.png?v=1') center / contain no-repeat; mask: url('/assets/images/icons/rx-night.png?v=1') center / contain no-repeat; }

/* 이유 카드 — 아이콘 + 워터마크 번호 */
.ac-why2 .ac-ico { display: grid; width: 56px; height: 56px; margin: 0 0 18px; background: var(--ac-green-soft); }
.ac-why2 .ac-ico::before { width: 34px; height: 34px; background: var(--ac-green); }
.ac-why2 h3 { margin-top: 0; }

@media (max-width: 760px) {
  .ac-sched { padding: 30px 16px 16px; }
  .ac-sched-tag { left: 16px; }
  .ac-sched-hd h3 { font-size: 19px; }
  .ac-sched-hd p { font-size: 14.5px; }
  .ac-week { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; margin: 22px 0 22px; }
  .ac-week b { font-size: 15.5px; }
  .ac-week span { font-size: 11.5px; }
  .ac-sched-row.is-today { box-shadow: 0 0 0 8px #f3f9f6; padding-top: 28px; }
  .ac-why2 .ac-ico { width: 50px; height: 50px; }
  .ac-why2 .ac-ico::before { width: 30px; height: 30px; }
}
/* 현재 시각 선 — 막대(.ac-sched-track i) 규칙보다 우선 */
.ac-sched-track .ac-now { display: block; top: -8px; bottom: -8px; left: calc(var(--x) * 100%); width: 2px; margin-left: -1px; background: var(--ac-red); }
/* 이유 카드 — 아이콘 제거, 워터마크 번호 아래로 제목 */
.ac-why2 h3 { margin-top: 26px; }
/* 오늘 라벨을 요일명 옆으로 */
.ac-sched-row.is-today .ac-sched-day { display: flex; flex-wrap: wrap; align-items: center; }
.ac-sched-row.is-today .ac-sched-day::after { order: 2; }
.ac-sched-row.is-today .ac-sched-day small { order: 3; flex-basis: 100%; }
@media (max-width: 760px) { .ac-sched-row.is-today .ac-sched-day small { flex-basis: auto; margin-left: 6px; } }
/* 오늘 행 — 배경 강조 제거, 깔끔하게 (2026-09-29) */
.ac-sched-row.is-today { background: none; box-shadow: none; }
@media (max-width: 760px) { .ac-sched-row.is-today { box-shadow: none; } }
/* FAQ(#hx-faq 공통) — 펼침 시 닫기 버튼을 ㅡ 로(회전 제거), Q번호 원 정중앙 (2026-09-29) */
.ta-page #hx-faq .faq[open] > summary::after { transform: none; }
.ta-page #hx-faq .faq-part::before { display: block; line-height: 1; }

/* ═══ 교통사고 FAQ — 흉살클리닉 방식(평평한 목록 · Q/A 원 · +/− 버튼), 색은 초록 (2026-09-29) ═══ */
.ac-page #hx-faq .faq-list { display: block; gap: 0; border-top: 1px solid var(--tg-hair); counter-reset: none; }
.ac-page #hx-faq .faq { border: 0; border-bottom: 1px solid var(--tg-hair); border-radius: 0; box-shadow: none; overflow: visible; background: transparent; transition: background-color .2s; }
.ac-page #hx-faq .faq[open] { background: #f5faf7; border-color: var(--tg-hair); box-shadow: none; }
.ac-page #hx-faq .faq > summary { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 72px 22px 20px; }
.ac-page #hx-faq .faq-part { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--ac-green-soft); color: var(--ac-green); font-size: 0; }
.ac-page #hx-faq .faq-part::before { content: "Q"; display: block; font-size: 16px; font-weight: 400; line-height: 1; }
.ac-page #hx-faq .faq[open] .faq-part { background: var(--ac-green); color: #fff; }
.ac-page #hx-faq .faq-subject { font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); }
.ac-page #hx-faq .faq > summary:hover .faq-subject, .ac-page #hx-faq .faq[open] .faq-subject { color: var(--ac-green); }
.ac-page #hx-faq .faq > summary::after,
.ac-page #hx-faq .faq[open] > summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 34px; height: 34px; margin: -17px 0 0; box-sizing: border-box; border: 1px solid rgba(19, 122, 82, .35); border-radius: 50%; transform: none; transition: background-size .2s, border-color .2s; }
.ac-page #hx-faq .faq > summary::after { background: linear-gradient(var(--ac-green), var(--ac-green)) center / 12px 1.5px no-repeat, linear-gradient(var(--ac-green), var(--ac-green)) center / 1.5px 12px no-repeat; }
.ac-page #hx-faq .faq[open] > summary::after { border-color: var(--ac-green); background: linear-gradient(var(--ac-green), var(--ac-green)) center / 12px 1.5px no-repeat, linear-gradient(var(--ac-green), var(--ac-green)) center / 1.5px 0 no-repeat; }
.ac-page #hx-faq .faq-a, .ac-page #hx-faq .faq-list.tight .faq-a { position: relative; padding: 0 72px 30px 78px; }
.ac-page #hx-faq .faq-a::before { content: "A"; position: absolute; left: 20px; top: -2px; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(19, 122, 82, .45); background: #fff; color: var(--ac-green); font-size: 16px; font-weight: 400; line-height: 1; }
.ac-page #hx-faq .faq-a p { max-width: none; padding-top: 6px; font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--tg-ink-2); }
.ac-page #hx-faq .faq-a p + p { margin-top: 8px; padding-top: 0; }
@media (max-width: 560px) {
  .ac-page #hx-faq .faq > summary { gap: 12px; padding: 18px 56px 18px 12px; }
  .ac-page #hx-faq .faq-part { width: 32px; height: 32px; }
  .ac-page #hx-faq .faq-part::before { font-size: 14px; }
  .ac-page #hx-faq .faq-subject { font-size: 17px; }
  .ac-page #hx-faq .faq > summary::after, .ac-page #hx-faq .faq[open] > summary::after { right: 12px; width: 30px; height: 30px; margin-top: -15px; }
  .ac-page #hx-faq .faq-a, .ac-page #hx-faq .faq-list.tight .faq-a { padding: 0 16px 24px 56px; }
  .ac-page #hx-faq .faq-a::before { left: 12px; width: 32px; height: 32px; font-size: 14px; }
  .ac-page #hx-faq .faq-a p { font-size: 15.5px; padding-top: 3px; }
}
/* FAQ Q 원 — 숨긴 원문 글자가 만드는 빈 줄 때문에 위로 뜨던 것 교정(내용을 세로 가운데로 모음) (2026-09-29) */
#hx-faq .faq-part { align-content: center; justify-content: center; }
/* 교통사고 FAQ 안내문 — 좌측 칼럼 작은 글씨 */
.ac-disc { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--tg-hair); font-size: 14px; line-height: 1.75; color: var(--tg-mute); word-break: keep-all; }
/* 교통사고 FAQ 안내문 — 글자색 진하게 (2026-09-29) */
.ac-disc { color: #4a5751; }
/* 교통사고 FAQ — 펼쳤을 때 질문 아래 공간 확대 (2026-09-29) */
.ac-page #hx-faq .faq[open] > summary { padding-bottom: 34px; }
@media (max-width: 560px) { .ac-page #hx-faq .faq[open] > summary { padding-bottom: 26px; } }
/* 교통사고 FAQ 전화번호 — 크게·굵게, 호버 시 밑줄 제거 + 색 변경 (2026-09-29) */
.ac-page #hx-faq .pg-h2-sub a[href^="tel:"] { font-size: 17px; font-weight: 700; color: var(--ac-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
.ac-page #hx-faq .pg-h2-sub a[href^="tel:"]:hover, .ac-page #hx-faq .pg-h2-sub a[href^="tel:"]:focus-visible { color: var(--ac-red); text-decoration: none; }
/* 교통사고 — 마지막 FAQ와 하단 상담 배너 사이 여백 확대 40 → 96 (모바일 64) (2026-09-29) */
.ac-page + .pg-cta { margin-top: 96px; }
@media (max-width: 760px) { .ac-page + .pg-cta { margin-top: 64px; } }

/* ═══ 공용 평평한 FAQ(.faq-flat) — 흉살클리닉 방식, 초록. 섹션에 class="faq-flat" 만 붙이면 적용 (2026-09-29, 자율신경실조증부터) ═══ */
.ta-page #hx-faq.faq-flat .faq-list { display: block; gap: 0; border-top: 1px solid var(--tg-hair); counter-reset: none; }
.ta-page #hx-faq.faq-flat .faq { border: 0; border-bottom: 1px solid var(--tg-hair); border-radius: 0; box-shadow: none; overflow: visible; background: transparent; transition: background-color .2s; }
.ta-page #hx-faq.faq-flat .faq[open] { background: #f5faf7; border-color: var(--tg-hair); box-shadow: none; }
.ta-page #hx-faq.faq-flat .faq > summary { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 72px 22px 20px; }
.ta-page #hx-faq.faq-flat .faq-part { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--tg-med-soft); color: var(--tg-med); font-size: 0; }
.ta-page #hx-faq.faq-flat .faq-part::before { content: "Q"; display: block; font-size: 16px; font-weight: 400; line-height: 1; }
.ta-page #hx-faq.faq-flat .faq[open] .faq-part { background: var(--tg-med); color: #fff; }
.ta-page #hx-faq.faq-flat .faq-subject { font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); }
.ta-page #hx-faq.faq-flat .faq > summary:hover .faq-subject, .ta-page #hx-faq.faq-flat .faq[open] .faq-subject { color: var(--tg-med); }
.ta-page #hx-faq.faq-flat .faq > summary::after,
.ta-page #hx-faq.faq-flat .faq[open] > summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 34px; height: 34px; margin: -17px 0 0; box-sizing: border-box; border: 1px solid rgba(19, 122, 82, .35); border-radius: 50%; transform: none; transition: background-size .2s, border-color .2s; }
.ta-page #hx-faq.faq-flat .faq > summary::after { background: linear-gradient(var(--tg-med), var(--tg-med)) center / 12px 1.5px no-repeat, linear-gradient(var(--tg-med), var(--tg-med)) center / 1.5px 12px no-repeat; }
.ta-page #hx-faq.faq-flat .faq[open] > summary::after { border-color: var(--tg-med); background: linear-gradient(var(--tg-med), var(--tg-med)) center / 12px 1.5px no-repeat, linear-gradient(var(--tg-med), var(--tg-med)) center / 1.5px 0 no-repeat; }
.ta-page #hx-faq.faq-flat .faq-a, .ta-page #hx-faq.faq-flat .faq-list.tight .faq-a { position: relative; padding: 0 72px 30px 78px; }
.ta-page #hx-faq.faq-flat .faq-a::before { content: "A"; position: absolute; left: 20px; top: -2px; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(19, 122, 82, .45); background: #fff; color: var(--tg-med); font-size: 16px; font-weight: 400; line-height: 1; }
.ta-page #hx-faq.faq-flat .faq-a p { max-width: none; padding-top: 6px; font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--tg-ink-2); }
.ta-page #hx-faq.faq-flat .faq-a p + p { margin-top: 8px; padding-top: 0; }
@media (max-width: 560px) {
  .ta-page #hx-faq.faq-flat .faq > summary { gap: 12px; padding: 18px 56px 18px 12px; }
  .ta-page #hx-faq.faq-flat .faq-part { width: 32px; height: 32px; }
  .ta-page #hx-faq.faq-flat .faq-part::before { font-size: 14px; }
  .ta-page #hx-faq.faq-flat .faq-subject { font-size: 17px; }
  .ta-page #hx-faq.faq-flat .faq > summary::after, .ta-page #hx-faq.faq-flat .faq[open] > summary::after { right: 12px; width: 30px; height: 30px; margin-top: -15px; }
  .ta-page #hx-faq.faq-flat .faq-a, .ta-page #hx-faq.faq-flat .faq-list.tight .faq-a { padding: 0 16px 24px 56px; }
  .ta-page #hx-faq.faq-flat .faq-a::before { left: 12px; width: 32px; height: 32px; font-size: 14px; }
  .ta-page #hx-faq.faq-flat .faq-a p { font-size: 15.5px; padding-top: 3px; }
}
.ta-page #hx-faq.faq-flat .faq[open] > summary { padding-bottom: 34px; }
@media (max-width: 560px) { .ta-page #hx-faq.faq-flat .faq[open] > summary { padding-bottom: 26px; } }

/* ═══ 공용 평평한 FAQ — 페이지별 색 변수화 (2026-09-29). 기본 초록, 페이지마다 --fq 만 바꾼다 ═══ */
.ta-page #hx-faq.faq-flat { --fq: #137a52; --fq-soft: #eaf5f0; --fq-bg: #f5faf7; --fq-ring: rgba(19, 122, 82, .35); --fq-ring2: rgba(19, 122, 82, .45); }
.ta-page #hx-faq.faq-flat .faq[open] { background: var(--fq-bg); }
.ta-page #hx-faq.faq-flat .faq-part { background: var(--fq-soft); color: var(--fq); }
.ta-page #hx-faq.faq-flat .faq[open] .faq-part { background: var(--fq); color: #fff; }
.ta-page #hx-faq.faq-flat .faq > summary:hover .faq-subject, .ta-page #hx-faq.faq-flat .faq[open] .faq-subject { color: var(--fq); }
.ta-page #hx-faq.faq-flat .faq > summary::after { border-color: var(--fq-ring); background: linear-gradient(var(--fq), var(--fq)) center / 12px 1.5px no-repeat, linear-gradient(var(--fq), var(--fq)) center / 1.5px 12px no-repeat; }
.ta-page #hx-faq.faq-flat .faq[open] > summary::after { border-color: var(--fq); background: linear-gradient(var(--fq), var(--fq)) center / 12px 1.5px no-repeat, linear-gradient(var(--fq), var(--fq)) center / 1.5px 0 no-repeat; }
.ta-page #hx-faq.faq-flat .faq-a::before { border-color: var(--fq-ring2); color: var(--fq); }
/* 페이지별 색 — 내용에 맞춘 색 */
.in-page #hx-faq.faq-flat { --fq: #2b3a67; --fq-soft: #e9ecf5; --fq-bg: #f5f6fb; --fq-ring: rgba(43, 58, 103, .35); --fq-ring2: rgba(43, 58, 103, .45); }
.hb-page #hx-faq.faq-flat { --fq: #2f6fb3; --fq-soft: #eaf2fb; --fq-bg: #f5f9fd; --fq-ring: rgba(47, 111, 179, .35); --fq-ring2: rgba(47, 111, 179, .45); }
.al-page #hx-faq.faq-flat { --fq: #b0561f; --fq-soft: #fbeee4; --fq-bg: #fdf7f2; --fq-ring: rgba(176, 86, 31, .35); --fq-ring2: rgba(176, 86, 31, .45); }
.ms-page #hx-faq.faq-flat { --fq: #c9612c; --fq-soft: #fbeee6; --fq-bg: #fdf7f3; --fq-ring: rgba(201, 97, 44, .35); --fq-ring2: rgba(201, 97, 44, .45); }
.gj-page #hx-faq.faq-flat { --fq: #9a3a3a; --fq-soft: #f7e9e9; --fq-bg: #fcf5f5; --fq-ring: rgba(154, 58, 58, .35); --fq-ring2: rgba(154, 58, 58, .45); }
.tn-page #hx-faq.faq-flat { --fq: #6a55b8; --fq-soft: #efecf8; --fq-bg: #f8f7fc; --fq-ring: rgba(106, 85, 184, .35); --fq-ring2: rgba(106, 85, 184, .45); }
/* 고압산소 — 그룹 라벨(치료에 대해 / 방문과 준비) 유지 */
.hb-page #hx-faq .hb-faq-h { display: inline-block; margin: 0 0 14px; padding: 7px 16px; border-radius: 999px; background: #2f6fb3; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.hb-page #hx-faq .faq-list + .hb-faq-h { margin-top: 40px; }

/* ═══ 구안와사 (pain-facial) — 교통사고(ac-) 컴포넌트 공유, 페이지 색 = 청록 #1d7488 (신경), 급성기·경고 = 적색 (2026-09-29) ═══ */
.fp-page { --ac-green: #1d7488; --ac-green-soft: #e6f2f4; --fp: #1d7488; --fp-soft: #e6f2f4; --fp-bg: #f4f9fa; }
.fp-page #hx-faq.faq-flat { --fq: #1d7488; --fq-soft: #e6f2f4; --fq-bg: #f4f9fa; --fq-ring: rgba(29, 116, 136, .35); --fq-ring2: rgba(29, 116, 136, .45); }
.fp-page .hx-split-bd > .ta-sub.is-first { margin-top: 0; }
.fp-page .hx-split-bd > .ta-lede { font-size: 16.5px; line-height: 1.8; }
/* 형광펜 — 섹션마다 다른 색 */
#fp-about .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(94, 178, 196, .32) 62%); }
#fp-tx .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(110, 205, 160, .38) 62%); }

/* 경고 · 안내 박스 (상단 걸침 알약) */
.fp-warn { position: relative; margin-top: 30px; padding: 30px 24px 20px; background: #fdf6f3; border: 1px solid #efd3ca; }
.fp-warn p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.fp-warn b { color: var(--ac-red); }
.fp-warn.is-info { background: var(--fp-bg); border-color: #cfe3e7; margin-top: 36px; }
.fp-warn.is-info .ac-pill { background: var(--fp); }
.fp-warn.is-info b { color: var(--fp); }

/* 말초성 · 중추성 */
.fp-type { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 18px; padding-top: 14px; }
@media (min-width: 640px) { .fp-type { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-type article { --c: var(--fp); position: relative; padding: 34px 24px 22px; background: #fff; border: 1px solid #e3e8e5; text-align: center; }
.fp-type article.is-central { --c: var(--ac-red); }
.fp-type .ac-pill { left: 50%; transform: translate(-50%, -50%); background: var(--c); }
.fp-type img { display: block; width: 128px; height: 128px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: #fdf3e7; }
.fp-type-sign { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.fp-type-sign li { font-size: 15.5px; font-weight: 600; color: var(--c); }
.fp-type dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; padding-top: 16px; border-top: 1px solid #eef1ef; text-align: left; }
.fp-type dt { align-self: start; padding: 4px 10px; border-radius: 999px; background: #f3f5f4; color: var(--tg-ink); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.fp-type dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }

/* 원인 6 카드 — 마지막은 안내 카드 */
.ac-why2.fp-cause { margin-top: 0; padding-top: 4px; }
.fp-cause article.is-note { background: var(--fp-bg); border-color: #cfe3e7; }
.fp-cause article.is-note h3 { margin-top: 0; color: var(--fp); }

/* 증상 체크 — 항목 설명 */
.fp-check-list label { align-items: flex-start; }
.fp-check-list input { margin-top: 2px; }
.fp-check-list small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; color: var(--tg-mute); }

/* 시기별 경과 — 初 · 中 · 後 */
.fp-stage { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 18px; }
@media (min-width: 900px) { .fp-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-stage > li { position: relative; padding: 34px 22px 22px; background: #fff; border: 1px solid #e3e8e5; }
.fp-stage .ac-pill { background: var(--c); }
.fp-hanja { position: absolute; top: 10px; right: 16px; font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-size: 64px; font-weight: 700; line-height: 1; color: var(--c); opacity: .12; pointer-events: none; }
.fp-stage h3 { position: relative; margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--c); }
.fp-stage p { position: relative; margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.fp-stage ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #eef1ef; display: grid; gap: 7px; }
.fp-stage ul li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.fp-stage ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

/* 72시간 타임라인 — 데스크톱 가로 */
.fp-gt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.fp-gt > li { position: relative; padding-top: 38px; }
.fp-gt > li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 4px solid var(--c); z-index: 1; }
.fp-gt > li.is-key::before { background: var(--c); }
.fp-gt > li::after { content: ""; position: absolute; left: 22px; right: -14px; top: 10px; height: 2px; background: #dfe6e3; }
.fp-gt > li:last-child::after { display: none; }
.fp-gt b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--c); }
.fp-gt li.is-key b { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13.5px; line-height: 1; margin-bottom: 8px; }
.fp-gt h4 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.fp-gt p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }

/* 두 갈래 길 */
.fp-path { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 18px; padding-top: 14px; }
@media (min-width: 700px) { .fp-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-path > div { --c: var(--fp); position: relative; padding: 32px 24px 22px; background: var(--fp-bg); border: 1px solid #cfe3e7; }
.fp-path > div.is-late { --c: var(--ac-red); background: #fdf6f3; border-color: #efd3ca; }
.fp-path .ac-pill { background: var(--c); }
.fp-path ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fp-path li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.fp-path li::before { content: ""; position: absolute; left: 0; top: .25em; width: 16px; height: 16px; border-radius: 50%; background: var(--c); -webkit-mask: radial-gradient(circle, #000 34%, transparent 36%); mask: radial-gradient(circle, #000 34%, transparent 36%); }
.fp-path li::after { content: ""; position: absolute; left: 0; top: .25em; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--c); opacity: .45; }

/* 인용 + 후유증 칩 */
.fp-quote { margin: 44px 0 0; padding: 34px 28px 28px; text-align: center; background: #f4f7f6; border-top: 2px solid var(--fp); }
.fp-quote blockquote { margin: 0; font-size: clamp(19px, 2.1vw, 23px); font-weight: 600; letter-spacing: -.025em; line-height: 1.5; color: var(--tg-ink); word-break: keep-all; }
.fp-quote figcaption { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.fp-quote ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fp-quote ul li { padding: 7px 13px; background: #fff; border: 1px solid #e3e8e5; font-size: 14px; font-weight: 500; color: var(--tg-ink); }

/* 왜 한의원 — 번호 목록 */
.fp-why { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tg-ink); }
.fp-why > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 24px 4px; border-bottom: 1px solid var(--tg-hair); }
.fp-no { font-family: "Poppins", sans-serif; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--fp); opacity: .28; }
.fp-why h3 { margin: 2px 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.fp-why p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }

/* 치료 카드 — 아이콘 없이 세로 흐름, 2단 */
.ac-tx.fp-tx article { display: flex; flex-direction: column; }
.ac-tx.fp-tx article > h3 { margin: 0 0 8px; }
.ac-tx.fp-tx h3 small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--tg-mute); }
@media (min-width: 1100px) { .ac-tx.fp-tx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 경혈 도해 */
.fp-points { margin: 0 auto; max-width: 440px; }
.fp-face { position: relative; }
.fp-face img { display: block; width: 100%; height: auto; }
.fp-face span { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); padding: 6px 11px; border-radius: 999px; background: var(--fp); color: #fff; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.fp-face span::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--fp); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(29, 116, 136, .25); }
.fp-face span.is-r { transform: translate(16px, -50%); }
.fp-face span.is-r::after { left: -22px; }
.fp-face span.is-l { transform: translate(calc(-100% - 16px), -50%); }
.fp-face span.is-l::after { right: -22px; }
.fp-face span.is-up { transform: translate(-50%, calc(-100% - 16px)); }
.fp-face span.is-up::after { left: 50%; top: auto; bottom: -22px; margin: 0 0 0 -6px; }

/* 비교표 */
.fp-page .fp-table tbody th { white-space: nowrap; }

/* 매선 안내 박스 */
.fp-thread { position: relative; margin-top: 50px; padding: 34px 26px 26px; background: #fff; border: 1px solid #e3e8e5; }
.fp-thread .ac-pill { background: var(--fp); }
.fp-thread img { display: block; width: 100%; height: auto; margin-bottom: 20px; }
.fp-thread h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); word-break: keep-all; }
.fp-thread p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.fp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--fp); text-decoration: none; }
.fp-more::after { content: "→"; transition: transform .2s; }
.fp-more:hover { text-decoration: none; }
.fp-more:hover::after { transform: translateX(4px); }

/* 치료 과정 칩 */
.fp-steps .ac-tx-chips { margin-top: 12px; }

@media (max-width: 760px) {
  .fp-type img { width: 108px; height: 108px; }
  .fp-stage h3 { font-size: 18px; }
  .fp-stage p, .fp-path li, .fp-why p, .fp-thread p { font-size: 15px; }
  .fp-gt { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 38px; }
  .fp-gt > li { padding: 0 0 24px; }
  .fp-gt > li::before { left: -38px; top: 0; }
  .fp-gt > li::after { left: -28px; right: auto; top: 22px; bottom: 0; width: 2px; height: auto; }
  .fp-why > li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 20px 2px; }
  .fp-no { font-size: 30px; }
  .fp-why h3 { font-size: 17.5px; }
  .fp-quote { padding: 26px 18px 22px; }
  .fp-thread { padding: 30px 16px 20px; }
  .fp-face span { font-size: 12px; padding: 5px 9px; }
}
.ac-tx.fp-tx article { align-items: stretch; }
/* 구안와사 — 치료 카드 칩 왼쪽 정렬, 비교표 직각 외곽선, 단계 칩 테두리 청록 */
.ac-tx.fp-tx article > ul { align-self: flex-start; }
#fp-tx .tg-table-wrap { border: 1px solid #e6ebe9; border-radius: 0; }
.fp-page .ac-tx-chips li { border-color: #cfe3e7; }

/* ═══ 만성통증 (pain-chronic + 부위별 7) — ac-/fp- 컴포넌트 공유, 페이지 색 = 인디고 #3d5a80 (깊은 층), 경고 = 적색 (2026-09-29) ═══ */
.cr-page { --ac-green: #3d5a80; --ac-green-soft: #e8eef5; --fp: #3d5a80; --fp-soft: #e8eef5; --fp-bg: #f4f7fa; --cr: #3d5a80; }
.cr-page #hx-faq.faq-flat { --fq: #3d5a80; --fq-soft: #e8eef5; --fq-bg: #f4f7fa; --fq-ring: rgba(61, 90, 128, .35); --fq-ring2: rgba(61, 90, 128, .45); }
.cr-page .hx-split-bd > .ta-sub.is-first { margin-top: 0; }
.cr-page .fp-warn.is-info { border-color: #d3dde9; }
.cr-page .tg-table-wrap { border: 1px solid #e6ebe9; border-radius: 0; }
#cr-combo .ta-sub .ta-sub-h, #cr-why .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(120, 150, 200, .32) 62%); }

/* 부위 이동 알약 */
.cr-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: -26px 0 40px; }
.cr-parts a { padding: 7px 14px; border: 1px solid #d3dde9; font-size: 14px; font-weight: 500; color: var(--tg-ink); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.cr-parts a:first-child { font-weight: 600; color: var(--cr); }
.cr-parts a:hover { border-color: var(--cr); color: var(--cr); text-decoration: none; }
.cr-parts a.on { background: var(--cr); border-color: var(--cr); color: #fff; }

/* 부위 페이지 상단 도해 — 흰 바탕에 전체가 보이게 */
.cr-page .cr-hero .ad-hero-pic { aspect-ratio: 1 / 1; background: #fff; }
.cr-page .cr-hero .ad-hero-pic img { width: 100%; height: 100%; object-fit: contain; padding: 18px; box-sizing: border-box; }

/* 메인 — 전신 도해 + 부위 핀 링크 */
.cr-map { margin: 0; }
.cr-map-pic { position: relative; max-width: 420px; margin: 0 auto; }
.cr-map-pic img { display: block; width: 100%; height: auto; }
.cr-map-pic a { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); padding: 6px 12px; border-radius: 999px; background: var(--cr); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .2s; }
.cr-map-pic a::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--cr); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(61, 90, 128, .25); transition: background .2s; }
.cr-map-pic a.is-r { transform: translate(16px, -50%); }
.cr-map-pic a.is-r::after { left: -22px; }
.cr-map-pic a.is-l { transform: translate(calc(-100% - 16px), -50%); }
.cr-map-pic a.is-l::after { right: -22px; }
.cr-map-pic a:hover, .cr-map-pic a:focus-visible { background: var(--ac-red); text-decoration: none; }
.cr-map-pic a:hover::after, .cr-map-pic a:focus-visible::after { background: var(--ac-red); }
.cr-map figcaption { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--tg-mute); }

/* 조직 층 단면 */
.cr-layers { margin: 0; }
.cr-layers img { display: block; width: 100%; height: auto; border: 1px solid #e6ebe9; }
.cr-layers figcaption { margin-top: 10px; text-align: center; font-size: 14px; font-weight: 600; color: var(--cr); }

/* 부위 카드 */
.cr-partgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { .cr-partgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-partgrid > a, .cr-partgrid > div { position: relative; display: flex; flex-direction: column; padding: 24px 22px 20px; background: #fff; border: 1px solid #e3e8e5; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.cr-partgrid > a:hover { border-color: var(--cr); box-shadow: 0 10px 24px rgba(20, 32, 27, .07); text-decoration: none; }
.cr-partgrid > div.is-more { background: var(--fp-bg); border-color: #d3dde9; }
.cr-en { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--cr); }
.cr-partgrid h3 { margin: 6px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.cr-partgrid p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.cr-partgrid .cr-see { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1ef; font-size: 14.5px; }
.cr-see b, .cr-apply b { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 999px; background: var(--fp-soft); color: var(--cr); font-size: 12.5px; font-weight: 600; line-height: 1.3; vertical-align: 1px; }
.cr-go { margin-top: auto; padding-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--cr); }
.cr-go::after { content: " →"; transition: margin .2s; }
.cr-partgrid > a:hover .cr-go::after { margin-left: 4px; }

/* 메인 — 두 축 (도해 + 설명) */
.cr-axis2 { display: grid; gap: 30px; padding-top: 14px; }
.cr-axis2 article { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: start; padding: 32px 26px 24px; background: #fff; border: 1px solid #e3e8e5; }
.cr-axis2 img { display: block; width: 100%; height: auto; }
.cr-axis2 .ac-pill { background: var(--cr); }
.cr-axis2 h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.cr-axis2 p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.cr-axis2 ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #eef1ef; display: grid; gap: 7px; }
.cr-axis2 li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.cr-axis2 li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--cr); }

/* 부위 페이지 — 두 축 카드 */
.cr-axis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 18px; padding-top: 14px; }
@media (min-width: 760px) { .cr-axis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-axis article { position: relative; display: flex; flex-direction: column; padding: 32px 22px 22px; background: #fff; border: 1px solid #e3e8e5; }
.cr-axis .ac-pill { background: var(--cr); }
.cr-axis h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.cr-axis .cr-use { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--cr); }
.cr-axis p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.cr-apply { margin: auto 0 0 !important; padding-top: 12px; border-top: 1px solid #eef1ef; font-size: 14.5px !important; line-height: 1.65 !important; }
.ac-tx.fp-tx .cr-apply { margin-top: auto; }

/* 비교표 · 회복 치료 */
.cr-table tbody th { white-space: nowrap; }
.cr-table tbody th small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--cr); }
.ac-why2.cr-rec { margin-top: 0; padding-top: 4px; }

/* 즉시 진료 신호 (적색) */
.cr-flag { margin-top: 40px; }
.cr-flag ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.cr-flag ol li { font-size: 15.5px; font-weight: 600; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.cr-flag ol li::marker { color: var(--ac-red); font-weight: 700; }
.cr-flag p { font-size: 15px; }

/* FAQ 좌측 — 함께 보기 */
.cr-next { display: grid; gap: 8px; margin-top: 22px; }
.cr-next a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #d3dde9; font-size: 15px; font-weight: 600; color: var(--tg-ink); text-decoration: none; transition: border-color .2s, color .2s; }
.cr-next a small { padding: 3px 8px; border-radius: 999px; background: var(--fp-soft); color: var(--cr); font-size: 12px; font-weight: 600; }
.cr-next a::after { content: "→"; margin-left: auto; color: var(--cr); }
.cr-next a:hover { border-color: var(--cr); color: var(--cr); text-decoration: none; }

@media (max-width: 760px) {
  .cr-parts { margin: -18px 0 30px; }
  .cr-parts a { padding: 6px 11px; font-size: 13.5px; }
  .cr-map-pic { max-width: 320px; }
  .cr-map-pic a { font-size: 12.5px; padding: 5px 10px; }
  .cr-axis2 article { grid-template-columns: minmax(0, 1fr); padding: 30px 18px 20px; }
  .cr-axis2 img { max-width: 200px; margin: 0 auto; }
  .cr-partgrid h3, .cr-axis h3 { font-size: 18px; }
}
/* 만성통증 — 조직 단면 2:1로 잘라 보이기, 적용 줄 폭 */
.cr-layers img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 70%; }
.cr-apply, .cr-see { max-width: none !important; }
/* 만성통증 부위 페이지 — 부위 이동 알약이 바로가기와 겹치지 않게, 상단 도해 4:3 */
.cr-page .hx-chips:has(+ .cr-parts) { margin-bottom: 0; }
.cr-parts { margin: 14px 0 44px; }
.cr-page .cr-hero .ad-hero-pic { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .cr-parts { margin: 12px 0 30px; } }
/* 만성통증 부위 카드 — 아이콘 옆 영문 라벨·제목 (2026-09-29) */
.cr-ph { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cr-ph .cr-ico { flex: 0 0 auto; width: 58px; height: 58px; background: var(--fp-soft); }
.cr-ph .cr-ico::before { width: 36px; height: 36px; background: var(--cr); }
.cr-ph h3 { margin: 2px 0 0; }
.cr-partgrid > div.is-more .cr-ico { background: #fff; }
@media (max-width: 760px) { .cr-ph .cr-ico { width: 50px; height: 50px; } .cr-ph .cr-ico::before { width: 31px; height: 31px; } }
/* 만성통증 부위 카드 — 영문 라벨을 박스 상단에 걸친 알약으로 (2026-09-29) */
.cr-partgrid { gap: 30px 14px; padding-top: 14px; }
.cr-partgrid .cr-en { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 7px 16px; border-radius: 999px; background: var(--cr); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.cr-partgrid > a, .cr-partgrid > div { padding-top: 32px; }
.cr-partgrid > div.is-more .cr-en { background: #6b7a8f; }
.cr-partgrid > div.is-more h3 { margin-top: 0; }
.cr-ph h3 { margin: 0; }
/* 부위 카드 — 상세 안내 우측 정렬 */
.cr-go { align-self: flex-end; text-align: right; }
.cr-go { font-size: 15.5px; font-weight: 400; }
/* 흉살클리닉 3 STEP 카드 — 테두리 추가 (2026-09-29 요청) */
#hx-step .step3-card { background: #fff; border: 1px solid #eadfe3; padding-bottom: 24px; }
#hx-step .step3-card h3, #hx-step .step3-card p { padding: 0 22px; }
#hx-step .step3-card .figspot { border-radius: 0; }
#hx-step .step3-card .figspot img { border-radius: 0; }
@media (max-width: 560px) { #hx-step .step3-card h3, #hx-step .step3-card p { padding: 0 18px; } }
/* 만성통증 메인 — 만성화 4단계를 깊어지는 층(깊이 게이지)으로 (2026-09-29) */
.cr-deep { list-style: none; margin: 0; padding: 0; border: 1px solid #dfe5ee; background: #fff; }
.cr-deep > li { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
.cr-dp { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 20px; background: var(--d); color: var(--t); }
.cr-dp b { font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.cr-dp span { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.cr-dc { padding: 22px 26px; }
.cr-deep > li:not(:last-child) .cr-dc { border-bottom: 1px solid #eef1f5; }
.cr-dc h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); }
.cr-dc p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.cr-deep + .fp-warn { margin-top: 30px; }
@media (max-width: 760px) { .cr-deep > li { grid-template-columns: 86px minmax(0, 1fr); } .cr-dp { padding: 14px 12px; } .cr-dp b { font-size: 21px; } .cr-dp span { font-size: 12.5px; } .cr-dc { padding: 18px 16px; } .cr-dc h3 { font-size: 17.5px; } .cr-dc p { font-size: 15px; } }
/* 만성통증 메인 — 만성화 4단계: 가로 흐름 카드 + 화살표 (깊이 게이지 대체, 2026-09-29) */
.cr-chain { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
@media (min-width: 700px) { .cr-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; } }
@media (min-width: 1100px) { .cr-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } }
.cr-chain > li { position: relative; padding: 34px 20px 22px; background: #fff; border: 1px solid #dfe5ee; }
.cr-chain .ac-pill { background: var(--c); left: 18px; }
.cr-chain .ac-wm { color: var(--c); opacity: .14; font-size: 58px; }
.cr-chain h3 { position: relative; margin: 18px 0 8px; font-size: 18.5px; font-weight: 700; letter-spacing: -.025em; color: var(--tg-ink); word-break: keep-all; }
.cr-chain p { position: relative; margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.cr-chain > li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%233d5a80%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%275%27 y1=%2712%27 x2=%2719%27 y2=%2712%27/%3E%3Cpolyline points=%2712 5 19 12 12 19%27/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 3px 10px rgba(20, 32, 27, .14); left: calc(50% - 16px); bottom: -39px; transform: rotate(90deg); }
@media (min-width: 700px) and (max-width: 1099px) { .cr-chain > li::after { display: none; } }
@media (min-width: 1100px) { .cr-chain > li:not(:last-child)::after { left: auto; bottom: auto; right: -30px; top: calc(50% - 16px); transform: none; } }
.cr-chain + .fp-warn { margin-top: 44px; }
/* 만성통증 메인 — 두 축 카드 좌우 2열 (2026-09-29) */
@media (min-width: 900px) { .cr-axis2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .cr-axis2 article { grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; } .cr-axis2 img { width: auto; max-width: 100%; height: 230px; margin: 0 auto; object-fit: contain; } }
@media (max-width: 899px) { .cr-axis2 img { width: auto; height: 200px; margin: 0 auto; object-fit: contain; } }
/* 만성통증(메인+부위 7) — 자연스러운 줄바꿈: 마지막 줄 외톨이 단어 방지, 제목은 균형 (2026-09-29) */
.cr-page p, .cr-page li, .cr-page figcaption, .cr-page .faq-subject, .cr-page dd { text-wrap: pretty; }
.cr-page h2, .cr-page h3 { text-wrap: balance; }
/* 형광펜 소제목·제목 — 어절 단위 줄바꿈 (단어 중간 끊김 방지) */
.ac-page .ta-sub .ta-sub-h, .ac-page .pg-h2, .ac-page h3 { word-break: keep-all; overflow-wrap: break-word; }
/* 만성통증 메인 — 척추 협척혈 카드 연한 배경 (도해 흰 바탕은 곱하기로 배경에 녹임) */
.cr-axis2 article:first-child { background: #f3f6fa; border-color: #dfe5ee; }
.cr-axis2 article:first-child img { mix-blend-mode: multiply; }
.cr-axis2 article:first-child ul { border-top-color: #e3e9f1; }
/* 척추 협척혈 카드 — 도해는 흰 배경 패널 (곱하기 해제) */
.cr-axis2 article:first-child img { mix-blend-mode: normal; background: #fff; }
@media (min-width: 900px) { .cr-axis2 article:first-child img { width: 100%; height: 230px; object-fit: contain; } }
@media (max-width: 899px) { .cr-axis2 article:first-child img { width: 100%; max-width: none; height: 200px; object-fit: contain; } }
/* 관절 심부인대 카드도 같은 처리 — 연한 배경 + 도해 흰 패널 */
.cr-axis2 article { background: #f3f6fa; border-color: #dfe5ee; }
.cr-axis2 article img { mix-blend-mode: normal; background: #fff; }
.cr-axis2 article ul { border-top-color: #e3e9f1; }
@media (min-width: 900px) { .cr-axis2 article img { width: 100%; height: 230px; object-fit: contain; } }
@media (max-width: 899px) { .cr-axis2 article img { width: 100%; max-width: none; height: 200px; object-fit: contain; } }
/* 만성통증 메인 — 라벨 줄이기 (2026-09-29): 구조 라벨(STEP·부위·AXIS)만 알약, 나머지는 글씨 */
.cr-page .cr-see b, .cr-page .cr-apply b { display: inline; margin-right: 8px; padding: 0; border-radius: 0; background: none; color: var(--cr); font-size: inherit; font-weight: 700; vertical-align: baseline; }
#cr-local .ac-tx.fp-tx article { padding-top: 24px; }
#cr-local .ac-tx.fp-tx article > h3 { margin: 0 0 2px; }
.cr-sub { margin: 0 0 12px !important; font-size: 14px !important; font-weight: 600; color: var(--cr) !important; }
#cr-why .fp-warn.is-info { padding-top: 20px; }
/* 아이콘 없는 치료 카드(fp-tx) — 문단이 카드 폭 전체를 쓰게 */
.ac-tx.fp-tx article > p { align-self: stretch; }
/* 만성통증 — 카드 본문 15px → 15.5px (다른 페이지 카드 본문과 통일) */
.cr-chain p, .cr-partgrid p:not(.cr-see) { font-size: 15.5px; }
@media (max-width: 760px) { .cr-chain p, .cr-partgrid p:not(.cr-see) { font-size: 15px; } }
/* 국소 치료 카드 — 워터마크 번호 (2026-09-29) */
#cr-local .ac-tx.fp-tx article { position: relative; overflow: hidden; }
#cr-local .ac-wm { color: var(--cr); opacity: .12; }
#cr-local .ac-tx.fp-tx article > h3, #cr-local .ac-tx.fp-tx article > p { position: relative; }
/* 만성통증 치료 과정 — 단계별 내용 색 (진찰·분석 → 설명 → 시행 → 회복) (2026-09-29) */
.cr-steps > li:nth-child(1) { --c: #6f88ab; --c2: #3d5a80; }
.cr-steps > li:nth-child(2) { --c: #3d5a80; --c2: #3a8795; }
.cr-steps > li:nth-child(3) { --c: #3a8795; --c2: #c9612c; }
.cr-steps > li:nth-child(4) { --c: #c9612c; --c2: #137a52; }
.cr-steps > li:nth-child(5) { --c: #137a52; --c2: #137a52; }
.cr-steps .ac-no { border-color: var(--c); color: var(--c); background: #fff; }
.cr-steps > li.is-end .ac-no { background: var(--c); border-color: var(--c); color: #fff; }
.cr-steps > li:not(.ac-phase)::before { background: linear-gradient(to bottom, var(--c), var(--c2)); opacity: .45; }
.cr-steps h3 { color: var(--tg-ink); }
/* 구안와사 — 고객 제공 원형 얼굴 PNG(테두리 포함) · 매선 3단계 그림 (2026-09-29) */
.fp-type img { width: 136px; height: 136px; border: 0; border-radius: 0; background: none; object-fit: contain; }
.fp-thread-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.fp-thread-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fp-thread-steps img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0; }
.fp-thread-steps span { font-size: 14.5px; font-weight: 600; color: var(--fp); text-align: center; word-break: keep-all; }
.fp-thread-steps li:not(:last-child)::after { content: ""; position: absolute; right: -27px; top: 38%; width: 20px; height: 20px; background: var(--fp); opacity: .5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9 5l7 7-7 7%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9 5l7 7-7 7%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 560px) { .fp-thread-steps { gap: 16px; } .fp-thread-steps li:not(:last-child)::after { right: -16px; width: 14px; height: 14px; } .fp-thread-steps span { font-size: 12.5px; } .fp-type img { width: 116px; height: 116px; } }
.fp-thread-steps img { aspect-ratio: 249 / 222; object-fit: contain; }

/* ═══ 구안와사 유형 카드 v2 — 고객 인포그래픽(1-1) 방식: 얼굴 + 지시선 증상 / 알약 라벨 항목, 좌우 배열 (2026-09-29) ═══ */
.fp-type { grid-template-columns: minmax(0, 1fr); gap: 30px 18px; }
@media (min-width: 640px) { .fp-type { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-type article { --c: #ec7a56; --cl: #f6c4b1; text-align: left; padding: 36px 24px 26px; background: #fdf3ea; border: 1px solid #f3dccb; }
.fp-type article.is-central { --c: #9b8480; --cl: #d8cbc8; background: #f8f3f1; border-color: #e7dcd9; }
.fp-type .ac-pill { left: 22px; transform: translateY(-50%); background: var(--c); }
.fp-type-top { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; column-gap: 34px; margin-bottom: 20px; }
.fp-type-top img { width: 136px; height: 136px; margin: 0; }
.fp-type .fp-type-sign { margin: 0; gap: 12px; }
.fp-type .fp-type-sign li { position: relative; padding-left: 16px; font-size: 15px; font-weight: 500; line-height: 1.45; color: #5b4a44; word-break: keep-all; }
.fp-type .fp-type-sign li::before { content: ""; position: absolute; left: -30px; top: .7em; width: 30px; height: 1px; background: var(--cl); }
.fp-type .fp-type-sign li::after { content: ""; position: absolute; left: -1px; top: calc(.7em - 3.5px); width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fp-type dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 18px; border-top: 1px dashed var(--cl); }
.fp-type dt { justify-self: start; margin: 12px 0 5px; padding: 5px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.1; }
.fp-type dt:first-child { margin-top: 0; }
.fp-type dd { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
@media (max-width: 760px) {
  .fp-type-top { grid-template-columns: 108px minmax(0, 1fr); column-gap: 26px; }
  .fp-type-top img { width: 108px; height: 108px; }
  .fp-type .fp-type-sign li { font-size: 14.5px; }
  .fp-type .fp-type-sign li::before { left: -22px; width: 22px; }
  .fp-type dd { font-size: 15.5px; }
}
/* 구안와사 유형 카드 — 지시선이 원 테두리에 닿게(데스크톱), 모바일은 얼굴 위·목록 아래 */
@media (min-width: 761px) { .fp-type .fp-type-sign li:nth-child(1)::before, .fp-type .fp-type-sign li:nth-child(3)::before { left: -37px; width: 37px; } .fp-type .fp-type-sign li:nth-child(2)::before { left: -30px; width: 30px; } }
@media (max-width: 760px) { .fp-type-top { grid-template-columns: minmax(0, 1fr); row-gap: 16px; justify-items: center; } .fp-type .fp-type-sign { justify-self: stretch; } .fp-type .fp-type-sign li::before { display: none; } }
/* 구안와사 — 상단 대표 도해(경혈) (2026-09-29) */
.fp-hero-points { margin: 0 auto; max-width: 440px; width: 100%; }
.fp-hero-points figcaption { margin-top: 14px; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--tg-mute); word-break: keep-all; }
@media (max-width: 760px) { .fp-hero-points { max-width: 320px; } }
.fp-hero-points figcaption { text-wrap: balance; }
/* 구안와사 경혈 도해 — 초안 좌표·색(호박/적색) + 펄스 (2026-09-29) */
.fp-face span { background: #fff; color: var(--tg-ink); border: 1px solid #e6ddd3; box-shadow: 0 2px 6px rgba(60, 40, 20, .08); font-weight: 600; }
.fp-face span.is-a { --pc: #b5722a; --pcA: rgba(181, 114, 42, .55); --pcZ: rgba(181, 114, 42, 0); }
.fp-face span.is-b { --pc: #b23a2c; --pcA: rgba(178, 58, 44, .55); --pcZ: rgba(178, 58, 44, 0); }
.fp-face span::after { background: var(--pc); box-shadow: 0 0 0 3px #fff, 0 0 0 3px var(--pcA); animation: fpPulse 2.4s ease-out infinite; }
.fp-face span:nth-of-type(2)::after { animation-delay: .35s; } .fp-face span:nth-of-type(3)::after { animation-delay: .7s; } .fp-face span:nth-of-type(4)::after { animation-delay: 1.05s; }
.fp-face span:nth-of-type(5)::after { animation-delay: 1.4s; } .fp-face span:nth-of-type(6)::after { animation-delay: 1.75s; } .fp-face span:nth-of-type(7)::after { animation-delay: 2.1s; }
@keyframes fpPulse { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px var(--pcA); } 70% { box-shadow: 0 0 0 3px #fff, 0 0 0 16px var(--pcZ); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 16px var(--pcZ); } }
@media (prefers-reduced-motion: reduce) { .fp-face span::after { animation: none; } }
/* 구안와사 상단 경혈 도해 크게 */
.fp-hero-points { max-width: 540px; }
@media (max-width: 760px) { .fp-hero-points { max-width: 350px; } }

/* ═══ 구안와사 경혈 도해 v3 — 점은 얼굴 위, 이름표는 바깥 여백 + 가는 지시선 (2026-09-29) ═══ */
.fp-face .fp-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fp-face .fp-lines line { stroke: #c7b5a3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fp-face .fp-dot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 3px #fff, 0 0 0 3px var(--pcA); animation: fpPulse 2.4s ease-out infinite; z-index: 2; }
.fp-face .fp-dot.is-a { --pc: #b5722a; --pcA: rgba(181, 114, 42, .55); --pcZ: rgba(181, 114, 42, 0); }
.fp-face .fp-dot.is-b { --pc: #b23a2c; --pcA: rgba(178, 58, 44, .55); --pcZ: rgba(178, 58, 44, 0); }
.fp-face .fp-dot:nth-of-type(2) { animation-delay: .35s; } .fp-face .fp-dot:nth-of-type(3) { animation-delay: .7s; } .fp-face .fp-dot:nth-of-type(4) { animation-delay: 1.05s; }
.fp-face .fp-dot:nth-of-type(5) { animation-delay: 1.4s; } .fp-face .fp-dot:nth-of-type(6) { animation-delay: 1.75s; } .fp-face .fp-dot:nth-of-type(7) { animation-delay: 2.1s; }
.fp-face span.fp-lab { z-index: 3; padding: 5px 11px; }
.fp-face span.fp-lab::after { display: none; }
.fp-face span.fp-lab.is-l { transform: translate(-100%, -50%); }
.fp-face span.fp-lab.is-r { transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) { .fp-face .fp-dot { animation: none; } }
@media (max-width: 760px) { .fp-face span.fp-lab { padding: 4px 8px; font-size: 12px; } .fp-face .fp-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; } }
/* 경혈 점 — 크기 줄이고 흰 테두리 1px (2026-09-29) */
.fp-face .fp-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; box-shadow: 0 0 0 1px #fff, 0 0 0 1px var(--pcA); animation-name: fpPulse1; }
@keyframes fpPulse1 { 0% { box-shadow: 0 0 0 1px #fff, 0 0 0 1px var(--pcA); } 70% { box-shadow: 0 0 0 1px #fff, 0 0 0 13px var(--pcZ); } 100% { box-shadow: 0 0 0 1px #fff, 0 0 0 13px var(--pcZ); } }
@media (max-width: 760px) { .fp-face .fp-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; } }
/* 구안와사 — 꼭 구별해야 할 경우 박스 좌측 칼럼 */
.hx-split-hd .fp-warn { margin-top: 36px; }
.hx-split-hd .fp-warn p { font-size: 15px; }
/* 구안와사 원인 카드 — 아이콘 옆 제목 (2026-09-29) */
.fp-ch { position: relative; display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; }
.fp-cause article.is-note .fp-ch { margin-top: 0; }
.fp-ch h3 { margin: 0 !important; }
.fp-cico { flex: 0 0 auto; width: 54px; height: 54px; background: var(--fp-soft); }
.fp-cico::before { width: 32px; height: 32px; background: var(--fp); }
.fp-cause article.is-note .fp-cico { background: #fff; }
@media (max-width: 760px) { .fp-cico { width: 48px; height: 48px; } .fp-cico::before { width: 28px; height: 28px; } }
.fp-cause article.is-note .fp-ch { margin-top: 18px; }
.hx-split-hd .ta-lede + .ta-lede { margin-top: 14px; }
/* 구안와사 증상 체크 — 왼쪽 사진 세로 키움 16:9 → 6:5, 오른쪽 체크리스트와 하단 맞춤 (2026-09-29) */
#fp-check .ac-visit-pic img { aspect-ratio: 6 / 5; }

/* 구안와사 말초성·중추성 얼굴 이미지 키움 136→172 / 모바일 108→150, 카드가 좁을 땐(태블릿) 세로 배치 (2026-09-29) */
.fp-type article { container-type: inline-size; }
.fp-type-top { grid-template-columns: 172px minmax(0, 1fr); column-gap: 30px; }
.fp-type-top img { width: 172px; height: 172px; }
@container (max-width: 400px) { .fp-type-top { grid-template-columns: minmax(0, 1fr); row-gap: 16px; justify-items: center; } .fp-type .fp-type-sign { justify-self: stretch; } .fp-type .fp-type-sign li::before { display: none; } }
@media (max-width: 760px) { .fp-type-top { grid-template-columns: minmax(0, 1fr); } .fp-type-top img { width: 150px; height: 150px; } }

/* 구안와사 말초성·중추성 — 알약 라벨(원인/마비 증상/기타 증상)과 내용을 한 줄에 (2026-09-29) */
.fp-type dl { grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: center; }
.fp-type dt, .fp-type dt:first-child { margin: 0; justify-self: start; }
.fp-type dd { margin: 0; }
@container (max-width: 260px) { .fp-type dl { grid-template-columns: minmax(0, 1fr); row-gap: 5px; } .fp-type dt:not(:first-child) { margin-top: 7px; } }
/* 원인·마비 증상·기타 증상 라벨 — 두께 400, 크기 13→14.5 (2026-09-29) */
.fp-type dt { font-size: 14.5px; font-weight: 400; padding: 6px 13px; letter-spacing: .01em; }

/* 구안와사 골든타임 플로우 — 원 22→32px, 선·간격 재정렬 (2026-09-29) */
.fp-gt > li { padding-top: 48px; }
.fp-gt > li::before { width: 32px; height: 32px; border-width: 5px; }
.fp-gt > li::after { left: 32px; top: 15px; }
@media (max-width: 760px) {
  .fp-gt { padding-left: 48px; }
  .fp-gt > li { padding: 0 0 24px; }
  .fp-gt > li::before { left: -48px; top: 0; width: 30px; height: 30px; }
  .fp-gt > li::after { left: -34px; top: 30px; }
}

/* 구안와사 골든타임 플로우 — 원 펄스(각 단계 색, 순서대로 퍼짐) (2026-09-29) */
@keyframes fpGtPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--c) 0%, transparent); } }
.fp-gt > li::before { animation: fpGtPulse 2.6s ease-out infinite; }
.fp-gt > li:nth-child(2)::before { animation-delay: .4s; }
.fp-gt > li:nth-child(3)::before { animation-delay: .8s; }
.fp-gt > li:nth-child(4)::before { animation-delay: 1.2s; }
.fp-gt > li:nth-child(5)::before { animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) { .fp-gt > li::before { animation: none; } }

/* 구안와사 골든타임 플로우 — 원 32→42px, 테두리 2px (2026-09-29) */
.fp-gt > li { padding-top: 58px; }
.fp-gt > li::before { width: 42px; height: 42px; border-width: 2px; }
.fp-gt > li::after { left: 42px; top: 20px; }
@media (max-width: 760px) {
  .fp-gt { padding-left: 56px; }
  .fp-gt > li { padding: 0 0 24px; }
  .fp-gt > li::before { left: -56px; width: 38px; height: 38px; }
  .fp-gt > li::after { left: -38px; top: 38px; }
}

/* 구안와사 골든타임 플로우 — 원 안 단계 아이콘 (2026-09-29) */
.fp-gt-ico { position: absolute; left: 0; top: 0; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; pointer-events: none; }
.fp-gt-ico::before { content: ""; width: 22px; height: 22px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fp-gt li.is-key .fp-gt-ico::before { background: #fff; }
@media (max-width: 760px) { .fp-gt-ico { left: -56px; width: 38px; height: 38px; } .fp-gt-ico::before { width: 20px; height: 20px; } }
.fp-gt-ico::before { width: 25px; height: 25px; } @media (max-width: 760px) { .fp-gt-ico::before { width: 22px; height: 22px; } }

/* 구안와사 골든타임 플로우 — 원 42→56px, 테두리 1px, 아이콘 25→32px (2026-09-29) */
.fp-gt > li { padding-top: 72px; }
.fp-gt > li::before { width: 56px; height: 56px; border-width: 1px; }
.fp-gt > li::after { left: 56px; top: 27px; }
.fp-gt-ico { width: 56px; height: 56px; }
.fp-gt-ico::before { width: 32px; height: 32px; }
@media (max-width: 760px) {
  .fp-gt { padding-left: 68px; }
  .fp-gt > li { padding: 0 0 28px; min-height: 78px; box-sizing: border-box; }
  .fp-gt > li::before { left: -68px; width: 50px; height: 50px; }
  .fp-gt > li::after { left: -44px; top: 50px; }
  .fp-gt-ico { left: -68px; width: 50px; height: 50px; }
  .fp-gt-ico::before { width: 28px; height: 28px; }
}

/* 구안와사 골든타임 플로우 — 원 56→72px, 원·텍스트 가운데 정렬 (2026-09-29) */
@media (min-width: 761px) {
  .fp-gt > li { padding-top: 88px; text-align: center; }
  .fp-gt > li::before { left: calc(50% - 36px); width: 72px; height: 72px; }
  .fp-gt > li::after { left: calc(50% + 36px); right: calc(22px - 50%); top: 35px; }
  .fp-gt-ico { left: calc(50% - 36px); width: 72px; height: 72px; }
  .fp-gt-ico::before { width: 40px; height: 40px; }
}
@media (max-width: 760px) {
  .fp-gt { padding-left: 74px; }
  .fp-gt > li { min-height: 84px; }
  .fp-gt > li::before { left: -74px; width: 56px; height: 56px; }
  .fp-gt > li::after { left: -47px; top: 56px; }
  .fp-gt-ico { left: -74px; width: 56px; height: 56px; }
  .fp-gt-ico::before { width: 31px; height: 31px; }
}
/* 골든타임 플로우 지정 줄바꿈은 칸이 넓은 데스크톱에서만 — 태블릿은 칸이 좁아 외톨이 어절이 생김 (2026-09-29) */
@media (max-width: 1339px) { .fp-gt p br { display: none; } }
.fp-gt p { text-wrap: balance; }
/* 골든타임 플로우 — 소제목과 원 사이 간격 22→48px (모바일 36px) (2026-09-29) */
.fp-gt { margin-top: 44px; }
@media (max-width: 760px) { .fp-gt { margin-top: 32px; } }

/* 구안와사 — 기억해야 할 세 가지 시간 (고객 시안 ③, 2026-09-29) */
.fp-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fp-nums > li { padding: 30px 18px 26px; text-align: center; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.fp-nums b { display: block; margin-bottom: 12px; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; }
.fp-nums b small { margin-left: 2px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.fp-nums h4 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); }
.fp-nums p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; text-wrap: balance; }
@media (max-width: 760px) {
  .fp-nums { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fp-nums > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px 18px; text-align: left; }
  .fp-nums b { grid-row: 1 / span 2; margin: 0; font-size: 34px; }
  .fp-nums b small { font-size: 18px; }
  .fp-nums h4 { margin-bottom: 4px; font-size: 16px; }
  .fp-nums p { font-size: 14.5px; text-wrap: pretty; }
}

/* 구안와사 후유증 경고 박스 — 안정 톤(청록·회색) → 경고 톤(치료가 늦어지면 카드와 같은 적색 계열) (2026-09-29) */
.fp-quote { background: #fdf6f3; border-top-color: var(--ac-red); }
.fp-quote blockquote { color: #8f3129; }
.fp-quote ul li { border-color: #efd3ca; color: #9a3a30; }

/* 구안와사 후유증 경고 박스 — 인용 따옴표를 워터마크로 (2026-09-29) */
.fp-quote { position: relative; overflow: hidden; }
.fp-quote::before, .fp-quote::after { position: absolute; font-family: Georgia, "Times New Roman", serif; font-size: 170px; font-weight: 700; line-height: 1; color: rgba(184, 72, 62, .12); pointer-events: none; }
.fp-quote::before { content: "\201C"; left: 22px; top: 6px; }
.fp-quote::after { content: "\201D"; right: 22px; bottom: -64px; }
.fp-quote > * { position: relative; z-index: 1; }
@media (max-width: 760px) { .fp-quote::before, .fp-quote::after { font-size: 120px; } .fp-quote::before { left: 10px; top: 4px; } .fp-quote::after { right: 10px; bottom: -46px; } }
.fp-page .ta-lede { text-wrap: pretty; }

/* 구안와사 "왜 한의원에서" 5가지 — 목록 → 내용별 컬러 카드 + 제목 옆 아이콘 + 숫자 워터마크 (2026-09-29) */
.fp-why { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; border-top: 0; }
.fp-why > li { position: relative; overflow: hidden; display: block; grid-column: span 3; padding: 28px 26px 26px; background: color-mix(in srgb, var(--c) 5%, #fff); border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); border-bottom-color: color-mix(in srgb, var(--c) 20%, #fff); }
.fp-why > li:nth-child(n+3) { grid-column: span 2; }
.fp-why .fp-no { position: absolute; top: 14px; right: 18px; font-size: 60px; color: var(--c); opacity: .13; pointer-events: none; }
.fp-why-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 60px; }
.fp-why-ico { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); }
.fp-why-ico::before { content: ""; width: 28px; height: 28px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fp-why h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; word-break: keep-all; text-wrap: balance; }
.fp-why p { font-size: 15px; line-height: 1.7; text-wrap: pretty; }
@media (max-width: 1199px) { .fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-why > li, .fp-why > li:nth-child(n+3) { grid-column: auto; } .fp-why > li:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .fp-why { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fp-why > li { padding: 22px 20px 20px; }
  .fp-why .fp-no { top: 12px; right: 14px; font-size: 48px; }
  .fp-why-hd { gap: 12px; margin-bottom: 10px; padding-right: 48px; }
  .fp-why-ico { width: 46px; height: 46px; }
  .fp-why-ico::before { width: 25px; height: 25px; }
  .fp-why h3 { font-size: 17px; }
}
/* 5가지 카드 — 2열 고정(마지막 카드 전폭), 워터마크는 우하단으로 옮겨 제목 폭 확보 */
.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-why > li, .fp-why > li:nth-child(n+3) { grid-column: auto; }
.fp-why > li:last-child { grid-column: 1 / -1; }
.fp-why .fp-no { top: auto; bottom: -6px; right: 16px; font-size: 76px; opacity: .1; }
.fp-why-hd { padding-right: 0; }
.fp-why > li > div { position: relative; z-index: 1; }
@media (max-width: 760px) { .fp-why { grid-template-columns: minmax(0, 1fr); } .fp-why .fp-no { font-size: 60px; bottom: -4px; } .fp-why-hd { padding-right: 0; } }

/* 구안와사 "왜 한의원에서" v2 — 박스·아이콘 제거, 키워드 에디토리얼 행(내용별 컬러 키워드 + 번호 워터마크) (2026-09-29) */
.fp-why { display: block; border-top: 1px solid var(--tg-ink); }
.fp-why > li, .fp-why > li:nth-child(n+3), .fp-why > li:last-child { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; align-items: center; padding: 30px 4px; background: none; border: 0; border-bottom: 1px solid var(--tg-hair); overflow: visible; }
.fp-why-key { position: relative; display: flex; align-items: center; min-height: 72px; padding-left: 46px; }
.fp-why .fp-why-key .fp-no { position: absolute; left: 0; top: 50%; right: auto; bottom: auto; transform: translateY(-50%); font-size: 76px; opacity: .12; }
.fp-why-key b { position: relative; font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: var(--c); word-break: keep-all; }
.fp-why h3 { margin: 0 0 6px; font-size: 18.5px; }
.fp-why p { font-size: 15.5px; line-height: 1.75; }
@media (max-width: 1199px) { .fp-why > li, .fp-why > li:nth-child(n+3), .fp-why > li:last-child { grid-template-columns: 160px minmax(0, 1fr); column-gap: 22px; } .fp-why-key b { font-size: 26px; } }
@media (max-width: 760px) {
  .fp-why > li, .fp-why > li:nth-child(n+3), .fp-why > li:last-child { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 22px 2px; }
  .fp-why-key { min-height: 52px; padding-left: 36px; }
  .fp-why .fp-why-key .fp-no { font-size: 56px; }
  .fp-why-key b { font-size: 23px; }
  .fp-why h3 { font-size: 17px; }
  .fp-why p { font-size: 15px; }
}

/* 구안와사 "왜 한의원에서" v3 (B안) — 가로 스펙트럼: 5색 막대가 이어지고 아래 번호 워터마크 + 글 (2026-09-29) */
.fp-why { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 6px; row-gap: 32px; border-top: 0; }
.fp-why > li, .fp-why > li:nth-child(n+3), .fp-why > li:last-child { position: relative; display: block; grid-column: auto; padding: 54px 14px 0 0; background: none; border: 0; overflow: visible; }
.fp-why > li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }
.fp-why > li > .fp-no { position: absolute; left: 0; top: 20px; right: auto; bottom: auto; transform: none; font-size: 46px; opacity: .16; color: var(--c); }
.fp-why h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; text-wrap: balance; }
.fp-why p { font-size: 14.5px; line-height: 1.7; }
@media (max-width: 1359px) { .fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; } .fp-why > li:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .fp-why { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .fp-why > li, .fp-why > li:nth-child(n+3), .fp-why > li:last-child { padding: 46px 0 0; }
  .fp-why > li::before { height: 5px; }
  .fp-why > li > .fp-no { top: 16px; font-size: 40px; }
}

/* 구안와사 "왜 한의원에서" v4 (G안) — 라벨 걸친 카드 3+2, 아이콘 없음, 키워드 알약 + 번호 워터마크 (2026-09-29) */
.fp-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 14px; padding-top: 14px; border-top: 0; }
.fp-why > li, .fp-why > li:nth-child(n+3), .fp-why > li:last-child { position: relative; display: block; grid-column: auto; padding: 34px 24px 28px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); overflow: visible; }
.fp-why > li:last-child { grid-column: span 2; }
.fp-why > li::before { display: none; }
.fp-why > li > .ac-pill { background: var(--c); }
.fp-why > li > .fp-no { position: absolute; left: auto; top: auto; right: 18px; bottom: 10px; transform: none; font-size: 58px; opacity: .12; color: var(--c); pointer-events: none; }
.fp-why h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; text-wrap: balance; }
.fp-why p { font-size: 15px; line-height: 1.7; }
@media (max-width: 1359px) { .fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fp-why > li:last-child { grid-column: span 2; } }
@media (max-width: 1199px) { .fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-why > li:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .fp-why { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fp-why > li, .fp-why > li:nth-child(n+3), .fp-why > li:last-child { padding: 30px 20px 22px; grid-column: auto; }
  .fp-why > li > .fp-no { font-size: 48px; right: 14px; bottom: 8px; }
  .fp-why h3 { font-size: 17px; }
}
/* 골든타임 시계 사진 — 세로로 길어져도 시계가 잘리지 않게 초점을 시계 쪽으로 (2026-09-29) */
#fp-golden .ac-visit-pic img { object-position: 38% 50%; }

/* 구안와사 치료 비교표 — 매선치료 행 강조(고객 시안 hl 행 + "후유증기 핵심" 배지) (2026-09-29) */
.fp-table tbody tr.is-key th, .fp-table tbody tr.is-key td { background: #e8f2f4; }
.fp-table tbody tr.is-key th { color: var(--fp); font-weight: 700; }
.fp-table tbody tr.is-key td b { font-weight: 600; color: var(--fp); }
.fp-tb-badge { display: inline-block; margin-left: 10px; padding: 5px 10px; border-radius: 999px; background: var(--fp); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1; vertical-align: 2px; }
.fp-table tbody tr.is-key td b { font-size: inherit; }

/* 구안와사 치료 비교표 — 고객 자료처럼 한자 병기 + 매선 행은 따뜻한 강조색(표 전체 청록과 구분) (2026-09-29) */
.fp-tb-hj { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 400; letter-spacing: .06em; color: #a08a6a; }
.fp-table tbody tr.is-key th, .fp-table tbody tr.is-key td { background: #f8eddf; }
.fp-table tbody tr.is-key th { color: #a8491c; }
.fp-table tbody tr.is-key td b { color: #a8491c; }
.fp-tb-badge { background: var(--ac-red); }

/* 구안와사 여덟 가지 치료 — 시기 라벨을 내용별 색으로 (급성=적색 계열, 매선=적갈, 전 시기=초록, 목=파랑, 한약=올리브, 회복기 집중=청록) (2026-09-29) */
#fp-tx .ac-tx article[style*="--lc"] > .ac-pill { background: var(--lc); }

/* 비교표 매선치료 행 → 클릭하면 매선 원리 박스 펼침 (2026-09-29) */
.fp-table tbody tr.is-key { cursor: pointer; }
.fp-table tbody tr.is-key:hover th, .fp-table tbody tr.is-key:hover td, .fp-table tbody tr.is-key.is-open th, .fp-table tbody tr.is-key.is-open td { background: #f3e2cd; }
.fp-tb-more { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding: 6px 12px; border: 1px solid #e3c4a6; border-radius: 999px; background: #fff; color: #a8491c; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.fp-tb-more::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.fp-table tr.is-key.is-open .fp-tb-more::after { transform: translateY(1px) rotate(-135deg); }
.fp-tb-more:hover, .fp-tb-more:focus-visible { background: #a8491c; border-color: #a8491c; color: #fff; }
.fp-thread[hidden] { display: none; }
.fp-thread:not([hidden]) { animation: fpThreadIn .35s ease-out; }
@keyframes fpThreadIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fp-thread:not([hidden]) { animation: none; } }

/* 매선 원리 — 표 안 아코디언 행 (2026-09-29) */
.fp-table tbody tr.fp-tb-detail > td { padding: 0; border-bottom: 0; background: #fbf4ec; }
.fp-table tbody tr.fp-tb-detail.is-open > td { border-bottom: 1px solid var(--tg-hair, #e3e8e5); }
.fp-tb-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.fp-tb-detail.is-open .fp-tb-acc { grid-template-rows: 1fr; }
.fp-tb-acc > .fp-tb-acc-in { position: sticky; left: 0; min-height: 0; overflow: hidden; box-sizing: border-box; max-width: 100%; }
.fp-tb-acc .fp-thread { margin: 0; padding: 30px 28px 28px; border: 0; background: transparent; font-weight: 400; white-space: normal; }
.fp-tb-acc .fp-thread > .ac-pill { display: none; }
.fp-tb-acc .fp-thread h3 { font-size: 19px; }
.fp-tb-acc .fp-thread p { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .fp-tb-acc { transition: none; } }
@media (max-width: 760px) { .fp-tb-acc .fp-thread { padding: 22px 16px 20px; } .fp-tb-acc .fp-thread-steps { gap: 14px; } }
/* 매선 아코디언 — 베이지 바탕에 맞춰 청록 → 적갈 톤, 자세히 보기 링크 우측 정렬 (2026-09-29) */
.fp-tb-acc .fp-more { display: flex; width: max-content; margin-left: auto; color: #a8491c; }
.fp-tb-acc .fp-more:hover { color: #7f3312; }
.fp-tb-acc .fp-thread-steps span { color: #8c4a26; }
.fp-tb-acc .fp-thread-steps li:not(:last-child)::after { background: #a8491c; opacity: .45; }

/* 구안와사 — "이비인후과 · 신경과 치료와 병행" 안내를 05 전 과정 카드 옆으로 (2026-09-29) */
.fp-why > li:last-child { grid-column: auto; }
.fp-why > li.fp-why-note { margin: 0; padding: 34px 24px 26px; background: var(--fp-bg); border: 1px solid #cfe3e7; }
.fp-why > li.fp-why-note > .ac-pill { background: var(--fp); }
.fp-why > li.fp-why-note p { font-size: 15px; line-height: 1.7; }
@media (max-width: 1199px) { .fp-why > li:last-child { grid-column: auto; } }
@media (max-width: 760px) { .fp-why > li.fp-why-note { padding: 30px 20px 22px; grid-column: auto; } }

/* 구안와사 치료 진행 — 단계별 내용 색 (급성기 적색 · 집중기 청록 · 회복기 초록 · 후유증 슬레이트) (2026-09-29) */
.fp-steps > li[style*="--c"] .ac-no { border-color: var(--c); color: var(--c); background: #fff; }
.fp-steps > li.is-end[style*="--c"] .ac-no { background: var(--c); border-color: var(--c); color: #fff; }
.fp-steps > li[style*="--c"]:not(.ac-phase)::before { background: color-mix(in srgb, var(--c) 30%, #fff); }
.fp-steps > li.ac-phase[style*="--c"] { color: var(--c); }
.fp-steps > li[style*="--c"] h3 em { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
/* 04 후유증 관리 — 검정 채움 대신 다른 단계와 같은 테두리형, 색은 보라(오래 가는 관리) */
.fp-steps > li.is-end[style*="--c"] .ac-no { background: #fff; color: var(--c); }
/* 좌측 칸(hx-split-hd)으로 옮긴 안내 박스도 왼쪽 정렬 — .pg-body .pg-note 가운데 정렬 기본값 예외 (2026-09-29) */
.pg-body .hx-split-hd .pg-note { text-align: left; }
/* 안내 박스(.pg-note) — 왼쪽 3px 세로선 제거, 상단 가는선으로 (사이트 전체, 2026-09-29) */
.pg-note, .tg-ans-page .pg-note { border-left: 0; border-top: 1px solid var(--tg-mute-2); }

/* 단계 플로우(.ac-steps) 공통 — li 에 --c 가 있으면 번호 원 · 세로선 · 시기 라벨 · 제목 알약을 그 색으로 (교통사고 내원 절차 등, 2026-09-29) */
.ac-steps > li[style*="--c"] .ac-no { border-color: var(--c); color: var(--c); background: #fff; }
.ac-steps > li[style*="--c"]:not(.ac-phase)::before { background: color-mix(in srgb, var(--c) 30%, #fff); }
.ac-steps > li.ac-phase[style*="--c"] { color: var(--c); }
.ac-steps > li[style*="--c"] h3 em:not(.is-warn) { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
/* 안내 박스 안에 문단 여러 개 — 문단 사이만 살짝 띄움 (2026-09-29) */
.pg-note-multi > p { margin: 0; font: inherit; color: inherit; }
.pg-note-multi > p + p { margin-top: 10px; }

/* 만성통증 인체 부위도 — 구안와사 경혈 도해 방식: 작은 펄스 점(1px 흰 테) + 이름표는 바깥 여백 + 가는 지시선 (2026-09-29) */
.cr-map-pic .cr-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cr-map-pic .cr-lines line { stroke: #b6c1d1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cr-map-pic a.cr-dot { z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; padding: 0; border-radius: 50%; background: var(--cr); transform: none; box-shadow: 0 0 0 1px #fff, 0 0 0 1px rgba(61, 90, 128, .55); animation: crPulse 2.4s ease-out infinite; }
.cr-map-pic a.cr-dot::after, .cr-map-pic a.cr-lab::after { display: none; }
@keyframes crPulse { 0% { box-shadow: 0 0 0 1px #fff, 0 0 0 1px rgba(61, 90, 128, .55); } 70%, 100% { box-shadow: 0 0 0 1px #fff, 0 0 0 13px rgba(61, 90, 128, 0); } }
.cr-map-pic a.cr-dot:nth-of-type(2) { animation-delay: .35s; } .cr-map-pic a.cr-dot:nth-of-type(3) { animation-delay: .7s; } .cr-map-pic a.cr-dot:nth-of-type(4) { animation-delay: 1.05s; }
.cr-map-pic a.cr-dot:nth-of-type(5) { animation-delay: 1.4s; } .cr-map-pic a.cr-dot:nth-of-type(6) { animation-delay: 1.75s; } .cr-map-pic a.cr-dot:nth-of-type(7) { animation-delay: 2.1s; }
.cr-map-pic a.cr-lab { z-index: 3; padding: 5px 11px; border: 1px solid #cfd8e4; background: #fff; color: var(--cr); font-size: 13px; box-shadow: 0 2px 6px rgba(30, 45, 70, .08); }
.cr-map-pic a.cr-lab.is-r { transform: translate(0, -50%); }
.cr-map-pic a.cr-lab.is-l { transform: translate(-100%, -50%); }
.cr-map-pic a.cr-lab:hover, .cr-map-pic a.cr-lab:focus-visible { background: var(--cr); border-color: var(--cr); color: #fff; }
.cr-map-pic a.cr-dot:hover { background: var(--ac-red); }
@media (prefers-reduced-motion: reduce) { .cr-map-pic a.cr-dot { animation: none; } }
@media (max-width: 760px) { .cr-map-pic a.cr-lab { padding: 4px 8px; font-size: 12px; } .cr-map-pic a.cr-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; } }
/* 만성통증 인체 부위도 조금 키움 420→480 (모바일 320→340) (2026-09-29) */
.cr-map-pic { max-width: 480px; }
@media (max-width: 760px) { .cr-map-pic { max-width: 340px; } }
/* 만성통증 "깊은 층 + 회복력" 한 줄 요약 — 박스 대신 상단 가는 선만 (2026-09-29) */
#cr-why .fp-warn.is-info { padding: 20px 0 0; background: none; border: 0; border-top: 1px solid #b6c1d1; }
/* 만성통증 4단계 — 카드 → 구안와사 골든타임식 원 아이콘 플로우(펄스·가는 연결선·가운데 정렬) (2026-09-29) */
@media (min-width: 761px) { .cr-gt { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cr-gt b { letter-spacing: .02em; }

/* 만성통증 조직 단면 — 캡션을 그림 속 흰 라벨로 (제목 라벨 + 심부 인대 · 신경근 지시점) (2026-09-29) */
.cr-layers-pic { position: relative; }
.cr-lay-title { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--cr); font-size: 13.5px; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgba(30, 45, 70, .12); }
.cr-lay-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.cr-lay-lines line { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cr-lay-dot { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cr); box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(255, 255, 255, .7); animation: crLayPulse 2.4s ease-out infinite; }
.cr-lay-dot + .cr-lay-dot { animation-delay: .6s; }
@keyframes crLayPulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(255, 255, 255, .8); } 70%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 14px rgba(255, 255, 255, 0); } }
.cr-lay-lab { position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--tg-ink); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 2px 8px rgba(30, 45, 70, .15); }
@media (prefers-reduced-motion: reduce) { .cr-lay-dot { animation: none; } }
@media (max-width: 760px) { .cr-lay-title { left: 10px; top: 10px; padding: 6px 11px; font-size: 12px; } .cr-lay-lab { padding: 5px 9px; font-size: 12px; } .cr-lay-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; } }
/* 척추 협척혈 그림 — 흰 칸 크기는 그대로, 그림만 조금 작게 (2026-09-29) */
.cr-axis2 article:first-child img { box-sizing: border-box; padding: 20px 40px; }
@media (max-width: 899px) { .cr-axis2 article:first-child img { padding: 16px 28px; } }
/* 고객이 두 그림을 같은 비율(1254×852)로 맞춰 줌 → 척추 그림 안쪽 여백 해제 (2026-09-29) */
.cr-axis2 article:first-child img { padding: 0; }
/* 척추·관절 그림 키움 — 고정 높이(230/200) 대신 칸 너비를 꽉 채우는 원본 비율 (2026-09-29) */
.cr-axis2 article img, .cr-axis2 article:first-child img { width: 100%; max-width: none; height: auto; aspect-ratio: 1000 / 679; object-fit: contain; }

/* 만성통증 6가지 국소 치료 — 부제목을 박스 상단 걸친 라벨로, 내용별 색 (인대=청록 · 신경=적색 · 신경병증=짙은 적색 · 항염=호박 · 매선=적갈 · 교정=파랑) (2026-09-29) */
#cr-local .ac-tx.fp-tx article[style*="--lc"] { padding-top: 34px; }
#cr-local .ac-tx.fp-tx article[style*="--lc"] > .ac-pill { background: var(--lc); }
#cr-local .ac-tx.fp-tx article[style*="--lc"] > h3 { margin: 0 0 10px; }
#cr-local article[style*="--lc"] .ac-wm { color: var(--lc); }
#cr-local .ac-tx.fp-tx article[style*="--lc"] { overflow: visible; }

/* 만성통증 회복력 치료 3가지 — 국소 치료 카드와 같은 방식: 걸친 라벨 + 내용별 색 워터마크 (순환=청록 · 조직 회복=호박 · 산소=파랑) (2026-09-29) */
.cr-rec article[style*="--lc"] { position: relative; overflow: visible; padding-top: 34px; border-color: color-mix(in srgb, var(--lc) 25%, #fff); }
.cr-rec article[style*="--lc"] > .ac-pill { background: var(--lc); }
.cr-rec article[style*="--lc"] .ac-wm { color: var(--lc); opacity: .13; }
.ac-why2.cr-rec { padding-top: 14px; }
.cr-rec article[style*="--lc"] > h3 { margin-top: 0; font-size: 20px; }

/* 만성통증 회복력 치료 3카드 — 사진 추가(약침 시술 ×2 · 고압산소 체임버), 번호 워터마크는 우하단으로 (2026-09-29) */
.cr-rec-pic { position: relative; z-index: 1; margin: 0 0 18px; }
.cr-rec-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.cr-rec article[style*="--lc"] .ac-wm { top: auto; bottom: 10px; right: 16px; }
.cr-rec article[style*="--lc"] > h3, .cr-rec article[style*="--lc"] > p { position: relative; z-index: 1; }
.cr-rec article[style*="--lc"] .ac-wm { display: none; }
/* 1024 등 좁은 폭 — 3칸이면 사진이 137px로 작아져서 한 줄에 하나, 사진 왼쪽 · 글 오른쪽 */
@media (min-width: 761px) and (max-width: 1199px) {
  .ac-why2.cr-rec { grid-template-columns: minmax(0, 1fr); }
  .cr-rec article[style*="--lc"] { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; align-content: start; }
  .cr-rec article[style*="--lc"] > .cr-rec-pic { grid-row: 1 / span 2; margin: 0; }
  .cr-rec article[style*="--lc"] > h3 { align-self: end; }
}

/* 버그 수정 — 구안와사 G안 카드(.fp-why) 스타일이 만성통증 부위별 7페이지 #cr-cause 목록까지 적용되던 것 복원 (2026-09-29) */
#cr-cause .fp-why { display: block; padding-top: 0; border-top: 1px solid var(--tg-ink); }
#cr-cause .fp-why > li, #cr-cause .fp-why > li:nth-child(n+3), #cr-cause .fp-why > li:last-child { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 24px 4px; background: none; border: 0; border-bottom: 1px solid var(--tg-hair); overflow: visible; }
#cr-cause .fp-why > li::before { display: none; }
#cr-cause .fp-why > li > .fp-no { position: static; transform: none; font-size: 40px; opacity: .28; color: var(--cr); }
#cr-cause .fp-why h3 { margin: 2px 0 6px; font-size: 19px; }
#cr-cause .fp-why p { font-size: 15.5px; line-height: 1.75; }
@media (max-width: 760px) { #cr-cause .fp-why > li, #cr-cause .fp-why > li:nth-child(n+3), #cr-cause .fp-why > li:last-child { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 20px 2px; } #cr-cause .fp-why > li > .fp-no { font-size: 30px; } #cr-cause .fp-why h3 { font-size: 17.5px; } #cr-cause .fp-why p { font-size: 15px; } }

/* 목통증 첫 화면 — 고객 초안의 경추 뒷면 도해(SVG) 재구성: 좌우 6쌍 협척혈 + 펄스 점 4개 + 흰 이름표 (2026-09-29) */
.cr-nk { margin: 0; }
.cr-nk-pic { position: relative; max-width: 400px; margin: 0 auto; }
.cr-nk-art { display: block; width: 100%; height: auto; overflow: visible; }
.cr-nk-cap { font-size: 10px; fill: #8a96a3; letter-spacing: .08em; }
.cr-nk-tp rect { fill: #d6dde6; }
.cr-nk-disc rect { fill: #9cc3cf; }
.cr-nk-vb rect { fill: #fbf8f1; stroke: #9a8b78; stroke-width: 1.4; }
.cr-nk-acu circle { fill: #e8a55a; }
.cr-nk-lig { fill: #d9a45f; opacity: .8; }
.cr-nk-nerve { fill: none; stroke: #e0b23c; stroke-width: 2.8; stroke-linecap: round; }
.cr-nk-needle line { stroke: #7b8794; stroke-width: 1.4; stroke-linecap: round; }
.cr-nk-needle circle { fill: #7b8794; }
.cr-nk-lines line { stroke: #b6c1d1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cr-nk-dot { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cr); box-shadow: 0 0 0 1px #fff, 0 0 0 1px rgba(61, 90, 128, .55); animation: crPulse 2.4s ease-out infinite; }
.cr-nk-dot:nth-of-type(2) { animation-delay: .5s; } .cr-nk-dot:nth-of-type(3) { animation-delay: 1s; } .cr-nk-dot:nth-of-type(4) { animation-delay: 1.5s; }
.cr-nk-lab { position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); padding: 5px 11px; border: 1px solid #cfd8e4; border-radius: 999px; background: #fff; color: var(--cr); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 2px 6px rgba(30, 45, 70, .08); }
.cr-nk figcaption { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--tg-mute); }
@media (prefers-reduced-motion: reduce) { .cr-nk-dot { animation: none; } }
@media (max-width: 760px) { .cr-nk-pic { max-width: 320px; } .cr-nk-lab { padding: 4px 8px; font-size: 12px; } .cr-nk-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; } }
/* 상담 안내 제목(고객 초안 마지막 섹션) */
.cr-cta-h { margin: 26px 0 8px; font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
@media (max-width: 760px) { .cr-cta-h br { display: none; } }
/* 목통증 첫 화면 — 고객 요청으로 척추 해부도 사진(cr-back.jpg)으로 교체, 그림에 찍힌 붉은 점 위에 펄스 링 + 이름표 (2026-09-29) */
.cr-nk-pic.is-img { max-width: 360px; }
.cr-nk-pic.is-img img { display: block; width: 100%; height: auto; }
.cr-nk-lines-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.cr-nk-lines-ov line { stroke: #c9a79a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cr-nk-dot.is-ring { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: transparent; box-shadow: 0 0 0 0 rgba(226, 84, 50, .5); animation: crRing 2.4s ease-out infinite; }
@keyframes crRing { 0% { box-shadow: 0 0 0 0 rgba(226, 84, 50, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(226, 84, 50, 0); } }
.cr-nk-pic.is-img .cr-nk-lab { color: #b23a2c; border-color: #f0d2c8; }
@media (max-width: 760px) { .cr-nk-pic.is-img { max-width: 300px; } }
/* 만성통증 부위별 첫 화면 그림 — 그림자 제거(박스 · 이름표) (2026-09-29) */
.cr-page .cr-hero { box-shadow: none; }
.cr-nk-lab { box-shadow: none; }
/* 만성통증 부위별 첫 화면 그림 — 테두리 제거 (2026-09-29) */
.cr-page .cr-hero { border: 0; }
/* 만성통증 부위별 AXIS 카드 — 상단 시술 사진 (목: 경추 협척혈 · 후두하부, 2026-09-29) */
.cr-axis-pic { margin: 0 0 18px; }
.cr-axis-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* 좌측 칸으로 옮긴 긴 경고 라벨 — 좁은 폭에서 박스 밖으로 나가지 않게 (2026-09-29) */
.hx-split-hd .cr-flag .ac-pill { left: 14px; letter-spacing: 0; }
/* 부위별 첫 화면 — 그림에 점이 없는 해부도용 붉은 점(속 채움) + 펄스 (2026-09-29) */
.cr-nk-dot.is-solid { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #e0502c; box-shadow: 0 0 0 2px #fff; animation: crRingS 2.4s ease-out infinite; }
@keyframes crRingS { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(226, 84, 50, .55); } 70%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 16px rgba(226, 84, 50, 0); } }
@media (max-width: 760px) { .cr-nk-dot.is-solid { width: 8px; height: 8px; margin: -4px 0 0 -4px; } }

/* 만성통증 상담 안내 · 진료시간 섹션 (고객 초안 마지막 섹션을 사이트 톤으로) (2026-09-29) */
.cr-contact { display: grid; gap: 0; margin: 26px 0 0; border-top: 1px solid var(--tg-ink); }
.cr-contact > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--tg-hair); }
.cr-contact dt { font-size: 14.5px; font-weight: 600; color: var(--tg-mute); }
.cr-contact dd { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.cr-contact dd a { color: var(--cr); font-weight: 700; text-decoration: none; }
.cr-contact dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cr-contact > div:first-child dd a { font-size: 20px; letter-spacing: .01em; }

/* 하단 상담 블록 — 페이지별 준비물 줄 (교통사고: 대인접수번호 · 보험사 담당자 연락처) (2026-09-29) */
.pg-cta-bring { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; padding: 0; }
.pg-cta-bring li { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-size: 14.5px; font-weight: 500; line-height: 1; color: #fff; }
.pg-cta-bring li.is-h { padding: 7px 0; margin-right: 4px; border: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
/* 하단 상담 블록 제목 키움 26→32px (모바일 22→24px) (2026-09-29) */
.pg-cta-txt h3 { font-size: 32px; }
@media (max-width: 700px) { .pg-cta-txt h3 { font-size: 24px; } }
.pg-cta-txt h3 { font-weight: 700; }
/* 하단 상담 블록 문구 더 키움 — 제목 32→38px, 설명 16.5→18px (모바일 24→26 / 15.5→16) */
.pg-cta-txt h3 { font-size: 38px; margin-bottom: 12px; }
.pg-cta-txt p { font-size: 18px; }
@media (max-width: 700px) { .pg-cta-txt h3 { font-size: 26px; } .pg-cta-txt p { font-size: 16px; } }

/* 하단 상담 블록 — 페이지별 "함께 보기" 링크 (만성통증 부위별, 2026-09-29) */
.pg-cta-next { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.pg-cta-next a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .2s, color .2s; }
.pg-cta-next a small { padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pg-cta-next a::after { content: "→"; margin-left: 2px; transition: transform .2s; }
.pg-cta-next a:hover { background: #fff; color: var(--tg-accent-deep); }
.pg-cta-next a:hover small { background: var(--tg-accent-soft, #e6f2ec); }
.pg-cta-next a:hover::after { transform: translateX(3px); }

/* 하단 상담 블록 — 설명이 길어도 전화 · 카카오톡 버튼은 항상 오른쪽 (701px 이상), 설명 줄바꿈은 데스크톱만 (2026-09-29) */
@media (min-width: 701px) {
  .pg-cta { flex-wrap: nowrap; }
  .pg-cta-txt { flex: 1 1 auto; min-width: 0; }
  .pg-cta .tg-cta { flex: 0 0 auto; }
}
@media (max-width: 760px) { .pg-cta-txt p br { display: none; } }
/* 하단 상담 블록 — 화면이 좁아지면(1199px 이하) 전화 · 카카오톡 버튼을 위아래로 (2026-09-29) */
@media (max-width: 1199px) {
  .pg-cta .tg-cta { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .pg-cta .tg-cta .tg-btn { justify-content: center; }
}
@media (max-width: 700px) { .pg-cta .tg-cta .tg-btn { flex: 0 0 auto; width: 100%; } }
/* 즉시 진료 경고 — 오른쪽 진행 단계 아래로, 플로우와 여백 (2026-09-29) */
.hx-split-bd .ac-steps + .cr-flag { margin-top: 56px; }
@media (max-width: 760px) { .hx-split-bd .ac-steps + .cr-flag { margin-top: 40px; } }
/* 원 아이콘 플로우 제목 지정 줄바꿈 — 모바일(세로 플로우)은 자연 줄바꿈 */
@media (max-width: 760px) { .fp-gt h4 br { display: none; } }
/* 무릎 STEP 02 관절 아이콘 — 선이 가늘어 보여 아주 조금 키움 40→45px (모바일 31→35px) */
.fp-gt-ico[style*="rx-meniscus"]::before { width: 45px; height: 45px; }
@media (max-width: 760px) { .fp-gt-ico[style*="rx-meniscus"]::before { width: 35px; height: 35px; } }

/* 만성통증 부위별 "실제로 쓰는 조합" 표 재디자인 (2026-09-30)
   민트 머리띠 제거 → 흰 머리 + 굵은 하단선, 치료법 열은 옅은 회청 라벨 열(좌측 여백 28px), 행 여백 넉넉히. 글자 크기는 사이트 표 표준 그대로 */
.cr-page .cr-table thead th { padding: 16px 24px; background: #fff; color: var(--tg-mute); font-size: 13.5px; letter-spacing: .04em; border-bottom: 1px solid #3d5a80; }
.cr-page .cr-table thead th:first-child { padding-left: 28px; }
.cr-page .cr-table tbody th, .cr-page .cr-table td { padding: 20px 24px; border-top: 1px solid #edf0f4; }
.cr-page .cr-table tbody tr:first-child th, .cr-page .cr-table tbody tr:first-child td { border-top: 0; }
.cr-page .cr-table tbody th { padding-left: 28px; width: 1%; background: #f6f8fb; }
.cr-page .cr-table tbody th small { margin-top: 5px; }
.cr-page .cr-table td:nth-of-type(1) { font-weight: 500; color: var(--tg-ink); }
@media (max-width: 760px) { .cr-page .cr-table thead th, .cr-page .cr-table tbody th, .cr-page .cr-table td { padding: 16px 18px; } .cr-page .cr-table thead th:first-child, .cr-page .cr-table tbody th { padding-left: 20px; } }
.cr-page .cr-table td:nth-of-type(1) { white-space: nowrap; }
.cr-page .cr-table td:nth-of-type(2) { white-space: normal; }
/* 조합 표 머리행 글씨 키움 13.5→16px, 진하게 */
.cr-page .cr-table thead th { font-size: 16px; font-weight: 600; color: var(--tg-ink); letter-spacing: 0; }
@media (max-width: 760px) { .cr-page .cr-table thead th { font-size: 15px; } }
/* 조합 표 머리행 배경 — 치료법 열(옅은 회청)보다 한 단계 진한 남색 톤으로 구분 */
.cr-page .cr-table thead th { background: #e6ecf4; color: #2c4566; border-bottom: 1px solid #3d5a80; }
/* 조합 표 목표 층 열 — 아주 옅은 바탕(치료법 열보다 한 단계 연하게) */
.cr-page .cr-table tbody th { background: #f3f6fa; }
.cr-page .cr-table td:nth-of-type(1) { background: #f9fafc; }
/* 조합 표 머리행 — 본문 열들과 확실히 다르게: 남색 바탕 + 흰 글씨 */
.cr-page .cr-table thead th { background: #3d5a80; color: #fff; border-bottom: 0; }
/* 조합 표 머리행 — 열마다 남색이 순차적으로 옅어지게 (치료법 → 목표 층 → 역할) */
.cr-page .cr-table thead th:nth-child(1) { background: #3d5a80; }
.cr-page .cr-table thead th:nth-child(2) { background: #56739a; }
.cr-page .cr-table thead th:nth-child(3) { background: #7890b2; }
/* 조합 표 머리행 항목 가운데 정렬 (첫 칸 좌측 여백 보정 해제) */
.cr-page .cr-table thead th, .cr-page .cr-table thead th:first-child { text-align: center; padding-left: 24px; padding-right: 24px; }
/* 치료법 열 배경 조금 진하게 #f3f6fa → #eaeff6 */
.cr-page .cr-table tbody th { background: #eaeff6; }
/* 목표 층 열 조금 진하게 #f9fafc → #f2f5fa, 역할 열은 기존 목표 층 색 #f9fafc 로 */
.cr-page .cr-table td:nth-of-type(1) { background: #f2f5fa; }
.cr-page .cr-table td:nth-of-type(2) { background: #f9fafc; }
/* 조합 표 행 구분선 — 흰색 (배경 칸 사이가 흰 줄로 나뉘게) */
.cr-page .cr-table tbody th, .cr-page .cr-table td { border-top: 2px solid #fff; }
.cr-page .cr-table tbody tr:first-child th, .cr-page .cr-table tbody tr:first-child td { border-top: 0; }
/* 조합 표 칸 사이 세로 구분선 — 흰색 2px (머리행 포함) */
.cr-page .cr-table tbody td, .cr-page .cr-table thead th + th { border-left: 2px solid #fff; }
/* 조합 표 바깥 테두리 제거 — 흰 격자 타일만 남김 */
.cr-page .cr-table { border: 0; }
.cr-page .tg-table-wrap:has(.cr-table) { border: 0; }
/* 조합 표 — 아주 옅은 그림자 */
.cr-page .tg-table-wrap:has(.cr-table) { box-shadow: 0 6px 20px rgba(44, 69, 102, .08), 0 1px 3px rgba(44, 69, 102, .06); }

/* ═══ 사이트 표준 표 — "흰 격자 타일" (2026-09-30 확정, 만성통증 조합 표에서 시작)
   머리행: 페이지 색을 열마다 순차적으로 옅게 + 흰 글씨 가운데 정렬 / 본문: 같은 색 계열 옅은 바탕이 열마다 옅어짐
   칸 사이 흰 2px 격자, 바깥 테두리 없음, 옅은 그림자. 색은 --t1..--t4(머리) / --b1..--b4(본문) 변수로 페이지마다 지정 ═══ */
.tile-tbl-wrap { border: 0 !important; border-radius: 0 !important; box-shadow: 0 6px 20px rgba(30, 50, 40, .08), 0 1px 3px rgba(30, 50, 40, .06); }
.tile-tbl { border: 0; }
.tile-tbl thead th { padding: 16px 20px !important; background: var(--t1); color: #fff !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0; text-align: center !important; border: 0 !important; }
.tile-tbl thead th:nth-child(2) { background: var(--t2); }
.tile-tbl thead th:nth-child(3) { background: var(--t3); }
.tile-tbl thead th:nth-child(4) { background: var(--t4, var(--t3)); }
.tile-tbl thead th + th { border-left: 2px solid #fff !important; }
.tile-tbl tbody th, .tile-tbl td { padding: 20px 22px !important; border: 0 !important; border-top: 2px solid #fff !important; }
.tile-tbl tbody tr:first-child th, .tile-tbl tbody tr:first-child td { border-top: 0 !important; }
.tile-tbl tbody td { border-left: 2px solid #fff !important; }
.tile-tbl tbody th { padding-left: 28px !important; background: var(--b1); }
.tile-tbl tbody td:nth-of-type(1) { background: var(--b2); }
.tile-tbl tbody td:nth-of-type(2) { background: var(--b3); }
.tile-tbl tbody td:nth-of-type(3) { background: var(--b4, var(--b3)); }
@media (max-width: 760px) { .tile-tbl thead th { font-size: 15px !important; padding: 14px 16px !important; } .tile-tbl tbody th, .tile-tbl td { padding: 16px 18px !important; } .tile-tbl tbody th { padding-left: 20px !important; } }
/* 교통사고 — 초록 */
.tile-tbl.is-green { --t1: #137a52; --t2: #2d8c67; --t3: #4a9e7e; --t4: #6bb195; --b1: #e3f0e9; --b2: #edf5f0; --b3: #f4f9f6; --b4: #fafcfb; }

/* 흰 격자 타일 표 — 대표색 하나(--tc)로 머리 5단 · 본문 5단 자동 생성 (5열 표 대응) */
.tile-tbl { --t1: var(--tc); --t2: color-mix(in srgb, var(--tc) 86%, #fff); --t3: color-mix(in srgb, var(--tc) 72%, #fff); --t4: color-mix(in srgb, var(--tc) 60%, #fff); --t5: color-mix(in srgb, var(--tc) 50%, #fff);
  --b1: color-mix(in srgb, var(--tc) 12%, #fff); --b2: color-mix(in srgb, var(--tc) 8%, #fff); --b3: color-mix(in srgb, var(--tc) 5%, #fff); --b4: color-mix(in srgb, var(--tc) 3%, #fff); --b5: color-mix(in srgb, var(--tc) 1.8%, #fff); }
.tile-tbl thead th:nth-child(5) { background: var(--t5); }
.tile-tbl tbody td:nth-of-type(4) { background: var(--b5); }
.tile-tbl thead th i, .tile-tbl thead th small { color: rgba(255, 255, 255, .82) !important; }
.tile-tbl.is-teal   { --tc: #1d7488; }  /* 구안와사 */
.tile-tbl.is-blue   { --tc: #2f6fb3; }  /* 고압산소 */
.tile-tbl.is-amber  { --tc: #b0561f; }  /* 음주운전 */
.tile-tbl.is-green2 { --tc: #137a52; }  /* 자율신경실조증 */
.tile-tbl.is-wine   { --tc: #9a3a3a; }  /* 금진옥액 */
.tile-tbl.is-navy   { --tc: #2b3a67; }  /* 불면증 */
.tile-tbl.is-violet { --tc: #6a55b8; }  /* 혀통증 */
.tile-tbl.is-orange { --tc: #c9612c; }  /* 통증매선 */
/* 예외 행 — 그룹 머리행(고압산소), 강조 행 · 아코디언 행(구안와사 매선) */
.tile-tbl tbody tr.hb-grp th { padding: 12px 28px !important; background: color-mix(in srgb, var(--tc) 18%, #fff) !important; color: var(--tc) !important; text-align: left; }
.tile-tbl tbody tr.is-key th, .tile-tbl tbody tr.is-key td { background: #f8eddf; }
.tile-tbl tbody tr.fp-tb-detail > td { padding: 0 !important; border-left: 0 !important; border-top: 0 !important; background: #fbf4ec; }

/* 홈 히어로 — 장마다 다른 문구 (고객 260929 3항). 활성 장의 .hx-copy 만 보인다 */
.hx-copy { display: none; width: 100%; flex-direction: column; align-items: inherit; }
.hx-copy.on { display: flex; animation: hxCopyIn .6s cubic-bezier(.22,.8,.3,1) both; }
@keyframes hxCopyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hx-copy.on { animation: none; } }
@media (min-width: 900px) { .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hx-copy { align-items: flex-end; } }

/* ═══ 정안침 (skin-jeongan) — 고객 260929 초안. 교통사고·구안와사 컴포넌트 재사용, 색만 뷰티 로즈 (2026-09-30) ═══ */
.jg-page { --ac-green: #9a586e; --ac-green-soft: #f6ebef; --fp: #9a586e; --fp-soft: #f6ebef; --fp-bg: #fbf5f7; --cr: #9a586e; }
.tile-tbl.is-rose { --tc: #9a586e; }
.jg-page #hx-faq.faq-flat { --fq: #9a586e; --fq-soft: #f6ebef; --fq-bg: #fbf6f8; --fq-ring: rgba(154, 88, 110, .35); --fq-ring2: rgba(154, 88, 110, .45); }
.jg-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(214, 150, 172, .38) 62%); }
.jg-page .jg-hero .ad-hero-pic { aspect-ratio: 3 / 2; overflow: hidden; }
.jg-page .jg-hero .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.jg-table tbody th small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: #9a586e; }
.jg-table td:nth-of-type(1) { white-space: normal !important; }

/* STEP 0 진단 장비 카드 */
.jg-dx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 16px; padding-top: 14px; }
@media (min-width: 900px) { .jg-dx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jg-dx article { position: relative; display: flex; flex-direction: column; padding: 34px 24px 24px; background: #fff; border: 1px solid color-mix(in srgb, var(--lc) 25%, #fff); }
.jg-dx .ac-pill { background: var(--lc); }
.jg-dx figure { margin: 0 0 16px; background: #fff; }
.jg-dx figure img { display: block; width: 100%; height: 180px; object-fit: contain; }
.jg-dx h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); }
.jg-dx p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.jg-dx ul { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid color-mix(in srgb, var(--lc) 18%, #fff); display: grid; gap: 6px; }
.jg-dx li { position: relative; padding-left: 16px; font-size: 15px; color: var(--tg-ink); }
.jg-dx li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--lc); }
.jg-steps .ac-tx-chips li small { margin-left: 4px; font-size: 12.5px; font-weight: 400; opacity: .75; }

/* 두피 4카드 — 2×2 */
.jg-why.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jg-why.fp-why > li:last-child { grid-column: auto; }
@media (max-width: 760px) { .jg-why.fp-why { grid-template-columns: minmax(0, 1fr); } }

/* 효과 6 — 원 아이콘 3×2 */
@media (min-width: 761px) {
  .jg-gt6.fp-gt { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  .jg-gt6.fp-gt > li:nth-child(3)::after { display: none; }
}
.jg-gt6 h4 { text-wrap: balance; }

/* 장점 4 — 2×2 워터마크 카드 */
@media (min-width: 900px) { .ac-why2.jg-str { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jg-str article .ac-wm { color: #9a586e; opacity: .12; }

/* 응용 4 — 아코디언 카드 */
.jg-cases { display: grid; gap: 14px; }
.jg-case { background: #fff; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); }
.jg-case[open] { background: color-mix(in srgb, var(--c) 3%, #fff); }
.jg-case > summary { list-style: none; display: flex; align-items: center; gap: 18px; padding: 20px 24px; cursor: pointer; }
.jg-case > summary::-webkit-details-marker { display: none; }
.jg-case > summary::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); background: linear-gradient(var(--c), var(--c)) center / 12px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) center / 1.5px 12px no-repeat; }
.jg-case[open] > summary::after { background: linear-gradient(var(--c), var(--c)) center / 12px 1.5px no-repeat; }
.jg-case-no { flex: 0 0 auto; font-family: "Poppins", sans-serif; font-size: 30px; font-weight: 600; line-height: 1; color: var(--c); opacity: .35; }
.jg-case-t b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.jg-case-t small { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--c); }
.jg-case-bd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; padding: 4px 24px 18px; }
@media (min-width: 1100px) { .jg-case-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jg-case-bd h4 { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 13.5px; font-weight: 600; line-height: 1; }
.jg-if { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jg-if li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.jg-if li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.jg-if b { font-weight: 600; color: var(--tg-ink); }
.jg-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jg-how li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.jg-how li i { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 14px; font-weight: 600; }
.jg-how li b { font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.jg-how-p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.jg-how-p b { color: var(--tg-ink); }
.jg-with { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 24px; padding: 14px 0; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.jg-with b { margin-right: 6px; font-size: 13.5px; font-weight: 700; color: var(--c); }
.jg-with span { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--tg-ink); }
.jg-with span small { margin-left: 4px; font-size: 12.5px; font-weight: 400; color: var(--tg-mute); }
.jg-case-note { margin: 0 24px 22px; font-size: 14px; line-height: 1.7; color: var(--tg-mute); word-break: keep-all; }
.jg-case-note a { color: var(--c); font-weight: 600; }
@media (max-width: 760px) {
  .jg-case > summary { padding: 16px 16px; gap: 12px; }
  .jg-case-no { font-size: 24px; }
  .jg-case-t b { font-size: 17px; }
  .jg-case-bd { padding: 4px 16px 14px; }
  .jg-with { margin: 0 16px; }
  .jg-case-note { margin: 0 16px 18px; }
}
.jg-page .hx-eyebrow { color: #9a586e; }
.tg-ans-page.jg-page { --tg-beauty: #9a586e; --tg-beauty-soft: #f6ebef; }
/* 2026-09-30 히어로 2·3장 이미지 순서 교체에 맞춰 위 .hero-slide:nth-child(1)/(3) 규칙을 모두 맞바꿈 — 피부 사진(오른쪽 문구)이 3장 */
@media (min-width: 900px) { .hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hx-copy { align-items: inherit; } .hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hx-copy { align-items: flex-end; } }
/* 2026-09-30 1·2장 사진 교체(1장 허리 상담, 2장 한방 진찰)에 맞춰 위 .hero-slide:nth-child(1)/(2) 규칙도 맞바꿈 */
/* 홈 "쉬운 질환만 보지 않습니다" 번호 — 44→56px, 굵기 600→800 (모바일 32→40px) (2026-09-30) */
.hh-item { grid-template-columns: 84px minmax(0, 1fr) 22px; }
.hh-no { font-size: 56px; font-weight: 800; }
@media (max-width: 760px) { .hh-item { grid-template-columns: 58px minmax(0, 1fr) 18px; } .hh-no { font-size: 40px; } }

/* 홈 원장 인사말 — A안: 배경 박스 제거, 큰 따옴표 워터마크(초록, 옅게) (2026-09-30) */
.hh-quote { position: relative; overflow: hidden; padding: 56px 32px 50px; background: none; border-top: 0; }
.hh-quote::before, .hh-quote::after { position: absolute; font-family: Georgia, "Times New Roman", serif; font-size: 200px; font-weight: 700; line-height: 1; color: var(--tg-med, #137a52); opacity: .12; pointer-events: none; }
.hh-quote::before { content: "\201C"; left: 6%; top: -12px; }
.hh-quote::after { content: "\201D"; right: 6%; bottom: -100px; }
.hh-quote > * { position: relative; z-index: 1; }
@media (max-width: 760px) { .hh-quote { padding: 44px 16px 40px; } .hh-quote::before, .hh-quote::after { font-size: 130px; } .hh-quote::before { left: 0; top: -6px; } .hh-quote::after { right: 0; bottom: -64px; } }

/* 홈 원장 인사말 — B안: 가는 선 사이 라벨 + 문장 + 두 원장 서명 칩 (A안 따옴표 워터마크 해제) (2026-09-30) */
.hh-quote.is-sign { padding: 56px 16px 8px; overflow: visible; }
.hh-quote.is-sign::before, .hh-quote.is-sign::after { content: none; }
.hh-q-lab { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto 22px; font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--tg-med, #137a52); }
.hh-q-lab::before, .hh-q-lab::after { content: ""; flex: 1; height: 1px; background: #cfd8d3; }
.hh-q-sign { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; padding: 0; }
.hh-q-sign li { padding: 9px 18px; border-radius: 999px; background: #e6f2ec; color: #0e5a3c; font-size: 14.5px; font-weight: 500; line-height: 1.2; }
.hh-q-sign li b { margin-right: 6px; font-weight: 700; }
.hh-q-sign li b::after { content: " ·"; font-weight: 400; }
.hh-q-sign li[data-track="beauty"] { background: #f6ebef; color: #7a3f53; }
@media (max-width: 760px) { .hh-quote.is-sign { padding: 40px 4px 4px; } .hh-q-lab { gap: 12px; } .hh-q-sign li { font-size: 13.5px; padding: 8px 14px; } }
/* 홈 "쉬운 질환" 안내 문구 — 좌측 설명 아래로 (2026-09-30) */
.hh-note.is-side { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid #e3e8e5; text-align: left; font-size: 13.5px; }
/* 인사말(OUR PROMISE)을 우측 목록 아래로 (2026-09-30) */
.hh-side { min-width: 0; }
.hh-side .hh-quote.is-sign { margin: 44px 0 0; padding: 0; }
.hh-side .hh-q-lab { max-width: none; margin-bottom: 16px; }
.hh-side .hh-quote blockquote { font-size: clamp(18px, 1.8vw, 22px); }
@media (min-width: 960px) { .hh-grid { align-items: start; } }
/* 인사말 다시 가운데(전폭)로 — 우측 배치 되돌림 (2026-09-30) */
@media (min-width: 960px) { .hh-grid { align-items: center; } }
/* OUR PROMISE 독립 섹션 */
.home-promise .hh-quote.is-sign { margin: 0; padding: 0; }
.home-promise .hh-q-lab { max-width: 880px; }
.home-promise .hh-note.is-promise { margin: 26px auto 0; max-width: 760px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--tg-mute); }
.home-promise .hh-quote blockquote { font-size: clamp(25px, 3.8vw, 42px); line-height: 1.4; }
.home-promise .hh-grid { margin-top: 96px; }
@media (max-width: 760px) { .home-promise .hh-grid { margin-top: 60px; } }
@media (min-width: 960px) { .home-promise .hh-grid { align-items: start; } .home-promise .hh-head { padding-top: 0; margin-top: 0; } .home-promise .hh-head .tg-h2 { margin-top: -6px; } }

/* ═══ 홈 약속+진료 한 판 — 고객 선택 B안 (2026-09-30): 연녹 바탕, 좌 약속·서명·안내 / 우 흰 판 제목+목록 ═══ */
.home-promise.is-b { background: #f4f8f6; }
.hp-b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 960px) { .hp-b { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.home-promise.is-b .hh-quote.is-sign { margin: 0; padding: 8px 0 0; text-align: left; }
.home-promise.is-b .hh-q-lab { display: block; max-width: none; margin: 0 0 18px; }
.home-promise.is-b .hh-q-lab::before, .home-promise.is-b .hh-q-lab::after { content: none; }
.home-promise.is-b .hh-quote blockquote { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.42; text-wrap: balance; }
.home-promise.is-b .hh-q-sign { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; }
.home-promise.is-b .hh-q-sign li { background: #fff; }
.home-promise.is-b .hh-note.is-promise { max-width: none; margin: 30px 0 0; padding-top: 16px; border-top: 1px solid #dbe5df; text-align: left; font-size: 14px; }
.home-promise.is-b .hp-panel { display: block; margin: 0; padding: 40px 40px 12px; background: #fff; box-shadow: 0 2px 18px rgba(20, 60, 45, .05); }
.home-promise.is-b .hh-head .tg-h2 { margin: 0 0 14px; font-size: clamp(26px, 2.4vw, 32px); }
.home-promise.is-b .hh-head { margin-bottom: 18px; }
.home-promise.is-b .hh-txt { font-size: 15.5px; margin-bottom: 6px; }
.home-promise.is-b .hh-list { border-top-color: #dfe6e2; }
.home-promise.is-b .hh-item { padding: 22px 8px; }
.home-promise.is-b .hh-list > li:last-child .hh-item { border-bottom: 0; }
@media (max-width: 760px) {
  .home-promise.is-b .hp-panel { padding: 26px 18px 6px; }
  .home-promise.is-b .hh-quote blockquote { font-size: 25px; }
}
.home-promise.is-b .hh-note.is-promise, .home-promise.is-b .hh-txt { text-wrap: pretty; }
.home-promise.is-b .hh-q-sign { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.home-promise.is-b .hh-txt { line-height: 1.6; }
.home-promise.is-b .hp-panel { background: rgba(255, 255, 255, .55); box-shadow: none; }
.home-promise.is-b .hh-quote blockquote::before { content: "\201C"; margin-right: .08em; color: var(--tg-med, #137a52); } .home-promise.is-b .hh-quote blockquote::after { content: "\201D"; margin-left: .04em; color: var(--tg-med, #137a52); }
/* 따옴표 워터마크식 (2026-09-30) — 글자 뒤 큰 옅은 따옴표 */
.home-promise.is-b .hh-quote blockquote { position: relative; z-index: 1; width: fit-content; max-width: 100%; }
.home-promise.is-b .hh-quote blockquote::before, .home-promise.is-b .hh-quote blockquote::after { position: absolute; z-index: -1; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 160px; font-weight: 700; line-height: 1; color: var(--tg-med, #137a52); opacity: .12; pointer-events: none; }
.home-promise.is-b .hh-quote blockquote::before { left: -18px; top: -44px; }
.home-promise.is-b .hh-quote blockquote::after { right: -30px; bottom: -104px; }
@media (max-width: 760px) { .home-promise.is-b .hh-quote blockquote::before, .home-promise.is-b .hh-quote blockquote::after { font-size: 110px; } .home-promise.is-b .hh-quote blockquote::before { left: -6px; top: -30px; } .home-promise.is-b .hh-quote blockquote::after { right: 0; bottom: -72px; } }
.home-promise.is-b .hh-quote blockquote::before { left: -6px; top: -58px; }
.home-promise.is-b a.hh-item:hover { background: linear-gradient(270deg, var(--cs) 0%, color-mix(in srgb, var(--cs) 45%, transparent) 55%, transparent 100%); }
.home-promise.is-b .hh-quote blockquote::after { position: relative; display: inline-block; right: auto; bottom: auto; left: .04em; top: .5em; width: 0; height: 0; line-height: 0; vertical-align: baseline; }
.home-promise.is-b .hh-quote blockquote::after { vertical-align: top; top: .36em; }
.home-promise.is-b .hh-quote blockquote::after { top: .5em; }
.home-promise.is-b .hh-quote blockquote::before { top: -74px; }
.home-promise.is-b .hh-quote blockquote { padding-left: 34px; } @media (max-width: 760px) { .home-promise.is-b .hh-quote blockquote { padding-left: 22px; } }
.home-promise.is-b .hh-quote blockquote::after { left: -.14em; }
.home-promise.is-b .hh-q-sign { margin-top: 46px; } @media (max-width: 760px) { .home-promise.is-b .hh-q-sign { margin-top: 34px; } }
.home-promise.is-b .hh-quote blockquote::after { left: -.02em; }
.home-promise.is-b .hh-quote blockquote::after { left: .1em; }
.home-promise.is-b .hp-panel { background: none; padding: 8px 0 0; } .home-promise.is-b .hh-head .tg-h2 { font-size: clamp(22px, 2vw, 27px); } @media (max-width: 760px) { .home-promise.is-b .hp-panel { padding: 0; } }
.home-promise.is-b a.hh-item:hover { background: linear-gradient(270deg, color-mix(in srgb, var(--c) 18%, transparent) 0%, color-mix(in srgb, var(--c) 8%, transparent) 55%, transparent 100%); }
.home-promise.is-b .hh-head .tg-h2 { font-size: clamp(20px, 1.75vw, 24px); color: #4a524f; }
.home-promise.is-b .hh-head .tg-h2 { color: #333a37; }
.home-promise.is-b .hh-txt { line-height: 1.45; margin-bottom: 4px; } .home-promise.is-b .hh-head .tg-h2 { margin-bottom: 10px; }
@media (min-width: 960px) { .home-promise.is-b .hp-b > .hh-quote { align-self: center; } }
@media (max-width: 760px) { .home-promise.is-b .hh-quote blockquote::after { left: -.16em; } }

/* ═══ 비염 (pain-rhinitis) — 고객 260928 초안. 교통사고·구안와사·정안침 컴포넌트 재사용, 색만 환절기 블루 #3a7ca5 (2026-09-30) ═══ */
.rh-page { --ac-green: #3a7ca5; --ac-green-soft: #e8f1f7; --fp: #3a7ca5; --fp-soft: #e8f1f7; --fp-bg: #f4f8fb; --cr: #3a7ca5; }
.tg-ans-page.rh-page { --tg-beauty: #3a7ca5; --tg-beauty-soft: #e8f1f7; }
.rh-page .hx-eyebrow { color: #3a7ca5; }
.rh-page #hx-faq.faq-flat { --fq: #3a7ca5; --fq-soft: #e8f1f7; --fq-bg: #f5f9fc; --fq-ring: rgba(58, 124, 165, .35); --fq-ring2: rgba(58, 124, 165, .45); }
.rh-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(120, 180, 220, .36) 62%); }
.rh-page .rh-hero .ad-hero-pic { aspect-ratio: 3 / 2; overflow: hidden; }
.rh-page .rh-hero .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.rh-page .rh-illu img { aspect-ratio: auto; object-fit: contain; background: #fff; }

/* 환절기 두 구간 */
.rh-season { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.rh-season p { margin: 0; padding: 18px 20px; background: #f4f8fb; border-top: 2px solid #3a7ca5; }
.rh-season b { display: block; font-family: "Poppins", sans-serif; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #3a7ca5; }
.rh-season b small { margin-left: 3px; font-family: inherit; font-size: 15px; font-weight: 600; }
.rh-season span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--tg-body); }

/* 폐·비·신 — fp-stage 재사용, 한자 크게 */
.rh-organ .fp-hanja { font-size: 72px; }

/* 3대 주증상 */
.rh-tri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rh-tri li { position: relative; padding: 26px 18px 22px; text-align: center; background: #fff; border: 1px solid color-mix(in srgb, #3a7ca5 22%, #fff); }
.rh-tri-ico { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: #e8f1f7; }
.rh-tri-ico::before { content: ""; width: 42px; height: 42px; background: #3a7ca5; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.rh-tri h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; text-wrap: balance; }
.rh-tri p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }

/* 유형 — 게이지 */
.rh-type-p { margin: 0; padding: 0 24px 16px; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.rh-gauge { list-style: none; margin: 0 24px 18px; padding: 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; background: color-mix(in srgb, var(--c) 5%, #fff); }
.rh-gauge li { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "b em" "bar bar" "sm sm"; align-items: baseline; row-gap: 6px; }
.rh-gauge b { grid-area: b; font-size: 14px; font-weight: 700; color: var(--tg-ink); }
.rh-gauge em { grid-area: em; justify-self: end; font-style: normal; font-size: 14px; font-weight: 600; color: var(--c); }
.rh-bar { grid-area: bar; position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 14%, #fff); }
.rh-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); border-radius: 3px; background: var(--c); }
.rh-gauge small { grid-area: sm; display: flex; justify-content: space-between; font-size: 12px; color: var(--tg-mute); }
.rh-types .jg-with { margin-top: 0; }

/* 한약 */
.rh-rx-main { position: relative; overflow: hidden; margin: 14px 0 0; padding: 36px 30px 28px; background: #f4f8fb; border: 1px solid color-mix(in srgb, #3a7ca5 22%, #fff); }
.rh-rx-main .ac-pill { background: #3a7ca5; }
.rh-rx-hanja { position: absolute; top: 14px; right: 18px; font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--c, #3a7ca5); opacity: .12; pointer-events: none; }
.rh-rx-main .rh-rx-hanja { font-size: 64px; }
.rh-rx-main h3 { position: relative; margin: 0 0 10px; font-size: 24px; font-weight: 700; letter-spacing: -.025em; color: #2c6690; }
.rh-rx-main > p { position: relative; margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.rh-rx-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px !important; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, #3a7ca5 30%, #fff); }
.rh-rx-comp b { margin-right: 6px; font-size: 13.5px; font-weight: 700; color: #3a7ca5; }
.rh-rx-comp span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, #3a7ca5 22%, #fff); font-size: 14px; font-weight: 600; color: var(--tg-ink); }
.rh-rx-comp small { margin-left: 3px; font-size: 12.5px; font-weight: 400; color: var(--tg-mute); }
.rh-rx { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 14px; }
.rh-rx li { position: relative; overflow: visible; padding: 32px 22px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.rh-rx .ac-pill { background: var(--c); }
.rh-rx li .rh-rx-hanja { top: auto; bottom: 10px; right: 14px; font-size: 30px; }
.rh-rx h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--c); }
.rh-rx p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 1199px) { .rh-rx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 치료법 */
.jg-case-t b em { margin-left: 6px; font-style: normal; font-size: 14px; font-weight: 500; color: var(--c); letter-spacing: .02em; }
.rh-meta { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; padding-bottom: 16px !important; }
.rh-tx-bd { padding: 0 24px 6px; }
.rh-tx-p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.rh-tx-p b { color: var(--tg-ink); }
.rh-healer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 24px; align-items: center; margin: 0 0 22px; padding: 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
@media (min-width: 760px) { .rh-healer { grid-template-columns: 220px minmax(0, 1fr); } .rh-healer.is-wide { grid-template-columns: 300px minmax(0, 1fr); } }
.rh-healer figure { margin: 0; }
.rh-healer img { display: block; width: 100%; height: auto; }
.rh-healer h4, .rh-h4 { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 13.5px; font-weight: 600; line-height: 1; }
.rh-healer p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.rh-healer p b { color: var(--tg-ink); }
.rh-state { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rh-state li { padding: 16px 18px; background: color-mix(in srgb, var(--c) 4%, #fff); border-top: 2px solid color-mix(in srgb, var(--c) 55%, #fff); }
.rh-state b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.rh-state b small { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--c); }
.rh-state p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.rh-warn { margin: 0 0 18px !important; padding: 14px 16px; background: #fbf3ea; border-top: 1px solid #e7cfae; color: #6b4a22 !important; }
.rh-pts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rh-pts span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); font-size: 14px; font-weight: 600; color: var(--tg-ink); }
.rh-pts small { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--tg-mute); }
.rh-bd-flat { padding: 4px 0 12px !important; }

@media (max-width: 760px) {
  .rh-tri { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rh-tri li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px; text-align: left; }
  .rh-tri-ico { grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
  .rh-tri-ico::before { width: 32px; height: 32px; }
  .rh-tri h3 { margin: 0 0 2px; font-size: 16px; }
  .rh-type-p { padding: 0 16px 14px; font-size: 15px; }
  .rh-gauge { margin: 0 16px 16px; grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .rh-rx-main { padding: 32px 18px 22px; }
  .rh-rx-main h3 { font-size: 21px; }
  .rh-rx { grid-template-columns: minmax(0, 1fr); }
  .rh-tx-bd { padding: 0 16px 6px; }
  .rh-state { grid-template-columns: minmax(0, 1fr); }
  .rh-season b { font-size: 28px; }
}
.rh-hj { display: inline-block; font-style: normal; }
.rh-rx li .rh-rx-hanja { top: 14px; bottom: auto; right: 16px; font-size: 24px; opacity: .16; } .rh-rx li h3 { padding-right: 40px; } @media (max-width: 760px) { .rh-rx-main .rh-rx-hanja { font-size: 40px; top: 18px; right: 14px; } .rh-rx-main h3 { margin-top: 6px; } }
.rh-page .rh-hero.is-illu .ad-hero-pic { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border: 0; } .rh-page .rh-hero.is-illu .ad-hero-pic img { width: 100%; max-width: 520px; height: auto; margin: 0 auto; object-fit: contain; box-shadow: none; border: 0; }
.rh-page .ad-hero.rh-hero.is-illu { border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
/* 비염 히어로 — 단면 일러스트 라벨 + 환절기 두 구간 (고객 초안 히어로 구성) */
.rh-face { max-width: 520px; margin: 0 auto; }
.rh-page .fp-face .fp-dot.is-c { --pc: #3a7ca5; --pcA: rgba(58, 124, 165, .55); --pcZ: rgba(58, 124, 165, 0); }
.rh-page .fp-face .fp-lines line { stroke: #9fb8c9; }
.rh-page .fp-face span.fp-lab { border-color: #d5e3ec; }
.rh-page .fp-face span.fp-lab.is-warn { color: #b23a2c; border-color: #efc9c2; }
.rh-hero .rh-season { max-width: 520px; margin: 22px auto 0; }
.rh-season-cap { max-width: 520px; margin: 12px auto 0; font-size: 14px; line-height: 1.65; color: var(--tg-mute); word-break: keep-all; text-wrap: pretty; }
/* 매선 3단계 + 자극 지속 시간 */
.rh-msteps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.rh-msteps li { padding: 14px 16px; background: color-mix(in srgb, var(--c) 5%, #fff); border-top: 2px solid color-mix(in srgb, var(--c) 60%, #fff); }
.rh-msteps b { display: block; font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: var(--c); }
.rh-msteps h5 { margin: 6px 0 4px; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.rh-msteps p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.rh-dur { margin: 0 0 22px; padding: 18px 18px 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.rh-dur-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "b bar" ". em"; column-gap: 12px; row-gap: 4px; align-items: center; margin: 8px 0 12px; }
.rh-dur-row b { grid-area: b; font-size: 14px; font-weight: 700; color: var(--tg-ink); }
.rh-dur-bar { grid-area: bar; position: relative; height: 12px; background: #f1f3f2; }
.rh-dur-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.rh-dur-row.is-short .rh-dur-bar i { width: 7%; background: linear-gradient(90deg, #8a9a93, rgba(138, 154, 147, .15)); }
.rh-dur-row.is-long .rh-dur-bar i { width: 100%; background: linear-gradient(90deg, var(--c) 0%, color-mix(in srgb, var(--c) 55%, #fff) 65%, color-mix(in srgb, var(--c) 15%, #fff) 100%); }
.rh-dur-row em { grid-area: em; font-style: normal; font-size: 13.5px; color: var(--tg-mute); word-break: keep-all; }
.rh-dur-row.is-long em { color: var(--c); font-weight: 600; }
.rh-dur-axis { display: flex; justify-content: space-between; margin: 0 0 0 88px; padding-top: 6px; border-top: 1px solid #e3e8e5; font-size: 12px; color: var(--tg-mute); }
@media (max-width: 760px) {
  .rh-msteps { grid-template-columns: minmax(0, 1fr); }
  .rh-dur-row { grid-template-columns: 64px minmax(0, 1fr); }
  .rh-dur-axis { margin-left: 76px; font-size: 11px; }
  .rh-hero .rh-season { margin-top: 18px; }
}
/* 비염 매선 — 고객 매선 이미지 3장(fp-thread-1~3) + 단계 설명 */
.rh-ms-txt { margin: 0 0 20px; }
.rh-ms-txt h4 { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 13.5px; font-weight: 600; line-height: 1; }
.rh-ms-txt p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.rh-ms-txt p b { color: var(--tg-ink); }
.rh-ms-steps { margin-bottom: 24px; padding: 20px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.rh-ms-steps li { gap: 6px; }
.rh-ms-steps b { margin-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--c); text-align: center; word-break: keep-all; }
.rh-ms-steps span { font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--tg-body); }
.rh-ms-steps li:not(:last-child)::after { background: var(--c); }
@media (max-width: 560px) { .rh-ms-steps { padding: 16px 10px; } .rh-ms-steps b { font-size: 12.5px; } .rh-ms-steps span { font-size: 12px; } }
.rh-ms-steps b small { display: block; margin-bottom: 2px; font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; opacity: .75; } @media (max-width: 560px) { .rh-ms-steps b small { font-size: 10.5px; } .rh-ms-steps li > span { font-size: 12.5px !important; } }
.rh-ext .fp-why-ico { width: 60px; height: 60px; } .rh-ext .fp-why-ico::before { width: 38px; height: 38px; } @media (max-width: 760px) { .rh-ext .fp-why-ico { width: 54px; height: 54px; } .rh-ext .fp-why-ico::before { width: 34px; height: 34px; } }
/* 비염 유형 — TYPE 라벨(상단 걸침) + 워터마크 번호 크게 (2026-09-30) */
.rh-types { gap: 30px; padding-top: 14px; }
.rh-types .jg-case { position: relative; }
.rh-types .rh-type-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); background: var(--c); color: #fff; letter-spacing: .06em; }
.rh-types .jg-case > summary { padding-top: 26px; }
.rh-types .jg-case-no { font-size: 64px; font-weight: 700; opacity: .16; letter-spacing: -.03em; }
@media (max-width: 760px) { .rh-types .rh-type-pill { left: 16px; } .rh-types .jg-case-no { font-size: 46px; } .rh-types .jg-case > summary { padding-top: 24px; } }
.rh-types .jg-case-no { width: 92px; flex: 0 0 92px; } @media (max-width: 760px) { .rh-types .jg-case-no { width: 64px; flex-basis: 64px; } }
.rh-rx-main { overflow: visible; margin-top: 18px; }
.rh-page .ac-check { --ac-red: #3a7ca5; --ac-red-soft: #eef4f9; } .rh-page .ac-check-hd h3 { background-image: linear-gradient(transparent 62%, rgba(120, 180, 220, .36) 62%); }
.rh-types .jg-with { padding-bottom: 24px; } @media (max-width: 760px) { .rh-types .jg-with { padding-bottom: 20px; } }
.rh-txs .jg-case-no { width: 92px; flex: 0 0 92px; font-size: 64px; font-weight: 700; opacity: .16; letter-spacing: -.03em; } @media (max-width: 760px) { .rh-txs .jg-case-no { width: 64px; flex-basis: 64px; font-size: 46px; } }
/* 비강추나 — 코 안의 상태 A안: 두 묶음(코 안 구조 / 코 주변 구조·습관), 가는 선 목록 + 한자 워터마크 (2026-09-30) */
.rh-state2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 32px; margin: 0 0 20px; }
@media (min-width: 900px) { .rh-state2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rh-sg-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--g); }
.rh-sg ul { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--tg-ink); }
.rh-sg li { position: relative; padding: 16px 64px 16px 2px; border-bottom: 1px solid #e3e8e5; }
.rh-sg li i { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-style: normal; font-size: 50px; font-weight: 700; line-height: 1; color: var(--g); opacity: .13; pointer-events: none; }
.rh-sg b { display: block; margin-bottom: 5px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.rh-sg b small { margin-left: 4px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--g); }
.rh-sg p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) { .rh-sg li { padding: 14px 52px 14px 0; } .rh-sg li i { font-size: 42px; } }
/* 비강추나(01) 재구성 — 원리+3단계 흐름 / 비강힐러 / 필요한 상태 / 이런 경우·진행 (2026-09-30) */
.rh-cn .rh-h4 { margin-top: 4px; }
.rh-cn-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 32px; margin: 0 0 28px; }
@media (min-width: 1000px) { .rh-cn-why { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.rh-cn-why .rh-tx-p:last-child { margin-bottom: 0; }
.rh-cn-flow { list-style: none; margin: 0; padding: 18px 18px 6px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.rh-cn-flow li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding-bottom: 16px; }
.rh-cn-flow li:not(.is-end)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: color-mix(in srgb, var(--c) 25%, #fff); }
.rh-cn-flow b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; }
.rh-cn-flow li.is-end b { background: #b8483e; color: #fff; }
.rh-cn-flow h5 { margin: 5px 0 3px; font-size: 15.5px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.rh-cn-flow li.is-end h5 { color: #b8483e; }
.rh-cn-flow p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
.rh-cn-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; align-items: center; margin: 0 0 28px; padding: 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
@media (min-width: 760px) { .rh-cn-tool { grid-template-columns: 240px minmax(0, 1fr); } }
.rh-cn-tool figure { margin: 0; }
.rh-cn-tool img { display: block; width: 100%; height: auto; }
.rh-cn-tool figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--tg-mute); text-align: center; word-break: keep-all; }
.rh-cn-tool .rh-tx-p { margin: 0; }
.rh-cn-two { margin-bottom: 18px; padding-top: 10px !important; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.rh-cn-if { gap: 8px; }
.rh-cn-tip { margin: 14px 0 0; padding: 10px 14px; background: color-mix(in srgb, var(--c) 6%, #fff); font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 760px) { .rh-cn-tool { padding: 16px; } .rh-cn-flow { padding: 14px 14px 4px; } }
/* 비강힐러 블록 재배치 — 그림 + 설명 + 진행 3단계를 한 판에 (2026-09-30) */
.rh-cn-tool { align-items: start; padding: 26px 28px; background: #f5f9fc; border: 0; }
@media (min-width: 760px) { .rh-cn-tool { grid-template-columns: 260px minmax(0, 1fr); } }
.rh-cn-tool img { mix-blend-mode: multiply; }
.rh-cn-tool .rh-tx-p { margin: 0 0 16px; }
.rh-cn-steps { gap: 10px; }
.rh-cn-steps li i { font-family: "Poppins", sans-serif; }
.rh-cn-tool .rh-cn-tip { background: #fff; }
.rh-cn-cases { margin: 0 0 20px; padding-top: 18px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.rh-cn-cases .rh-cn-if { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .rh-cn-cases .rh-cn-if { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
@media (max-width: 760px) { .rh-cn-tool { padding: 18px 16px; } .rh-cn-tool figure { max-width: 240px; margin: 0 auto; } }
/* 비강힐러 C안 — 박스 없이, 왼쪽 그림(크게) / 오른쪽 번호 3단계 세로선 (2026-09-30 고객 선택) */
.rh-cn-tool { align-items: center; padding: 0; background: none; border: 0; gap: 20px 36px; margin-bottom: 32px; }
@media (min-width: 760px) { .rh-cn-tool { grid-template-columns: 340px minmax(0, 1fr); } }
.rh-cn-steps { position: relative; margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid color-mix(in srgb, var(--c) 22%, #fff); gap: 16px; }
.rh-cn-steps li i { width: 30px; height: 30px; font-size: 13.5px; }
.rh-cn-steps li:nth-child(1) i { background: #6f9cbd; }
.rh-cn-steps li:nth-child(2) i { background: #3a7ca5; }
.rh-cn-steps li:nth-child(3) i { background: #2c6690; }
.rh-cn-tool .rh-cn-tip { margin-top: 16px; padding: 0; background: none; font-size: 13.5px; color: var(--tg-mute); }
@media (max-width: 760px) { .rh-cn-tool { padding: 0; } .rh-cn-tool figure { max-width: 300px; margin: 0 auto; } }
.rh-cn-steps { padding: 0; border-left: 0; } .rh-cn-steps li { position: relative; grid-template-columns: 30px minmax(0, 1fr); } .rh-cn-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: -14px; width: 2px; background: color-mix(in srgb, var(--c) 22%, #fff); } .rh-cn-steps li i { position: relative; z-index: 1; }
.rh-cn-flow { padding: 4px 0 0; background: none; border: 0; } @media (max-width: 760px) { .rh-cn-flow { padding: 0; } }
@media (min-width: 1000px) { .rh-cn-why { align-items: center; } }
@media (min-width: 1000px) { .rh-cn-why { column-gap: 64px; } }
@media (min-width: 1000px) { .rh-cn-flow { position: relative; top: 20px; } }
@media (max-width: 760px) { .rh-page .rh-tx-p br { display: none; } }
.rh-cn-cases { border-top: 0; padding-top: 6px; }
.rh-sg-h { font-size: 17px; letter-spacing: .02em; } .rh-sg ul { border-top: 1.5px dashed var(--g); } @media (max-width: 760px) { .rh-sg-h { font-size: 16px; } }
.rh-sg .rh-sg-h { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: .01em; color: var(--g); } @media (max-width: 760px) { .rh-sg .rh-sg-h { font-size: 17px; } }
.rh-sg li { padding-top: 22px; padding-bottom: 22px; } .rh-sg b { margin-bottom: 8px; } @media (max-width: 760px) { .rh-sg li { padding-top: 18px; padding-bottom: 18px; } }
.rh-cn-why { margin-top: 26px; } @media (max-width: 760px) { .rh-cn-why { margin-top: 18px; } }
.rh-warn-tx { margin: 0 24px 22px !important; } @media (max-width: 760px) { .rh-warn-tx { margin: 0 16px 18px !important; } } .rh-warn b { color: #8a4d12; }

/* ═══ 남성질환 (pain-mens) — 고객 260928 초안. 비염·정안침 컴포넌트 재사용, 색만 스틸 네이비 #2f5d7c (2026-09-30) ═══ */
.mn-page { --ac-green: #2f5d7c; --ac-green-soft: #e9f0f5; --fp: #2f5d7c; --fp-soft: #e9f0f5; --fp-bg: #f4f7fa; --cr: #2f5d7c; }
.tg-ans-page.mn-page { --tg-beauty: #2f5d7c; --tg-beauty-soft: #e9f0f5; }
.mn-page .hx-eyebrow { color: #2f5d7c; }
.mn-page #hx-faq.faq-flat { --fq: #2f5d7c; --fq-soft: #e9f0f5; --fq-bg: #f5f8fb; --fq-ring: rgba(47, 93, 124, .35); --fq-ring2: rgba(47, 93, 124, .45); }
.mn-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(110, 160, 200, .34) 62%); }
.mn-page .mn-hero .ad-hero-pic { aspect-ratio: 16 / 10; overflow: hidden; }
.mn-page .mn-hero .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.mn-page .mn-illu img { aspect-ratio: auto; max-width: 420px; margin: 0 auto; }
.mn-page .fp-face .fp-dot.is-c { --pc: #2f5d7c; --pcA: rgba(47, 93, 124, .55); --pcZ: rgba(47, 93, 124, 0); }
.mn-page .fp-face span.fp-lab.is-warn { color: #b23a2c; border-color: #efc9c2; }

/* 삼초 막대 */
.mn-jiao { margin: 0 0 8px; }
.mn-jiao-bar { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 4px; }
.mn-jiao-bar li { padding: 14px 16px; background: #eef2f5; }
.mn-jiao-bar li.is-on { background: #2f5d7c; }
.mn-jiao-bar b { display: block; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.mn-jiao-bar span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--tg-mute); word-break: keep-all; }
.mn-jiao-bar li.is-on b, .mn-jiao-bar li.is-on span { color: #fff; }

/* 네 질환 카드 — 링크 */
.mn-dz .mn-more, .mn-rx .mn-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--c); text-decoration: none; }
.mn-dz .mn-more::after, .mn-rx .mn-more::after { content: " →"; }
.mn-dz .mn-more:hover, .mn-rx .mn-more:hover { text-decoration: underline; }
.mn-dz.fp-why > li:last-child { grid-column: auto; }
@media (max-width: 760px) { .mn-dz.fp-why { grid-template-columns: minmax(0, 1fr); } }

/* 주요 증상 — 체크 표시 목록 */
.mn-sym { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 700px) { .mn-sym { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mn-sym li { position: relative; padding: 13px 16px 13px 44px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); font-size: 15px; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; text-wrap: pretty; }
.mn-sym li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); }
.mn-sym li::after { content: ""; position: absolute; left: 21px; top: 20px; width: 8px; height: 4.5px; border: 2px solid var(--c); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.mn-dz-sec .rh-types .jg-case > p.rh-type-p { padding-bottom: 22px; }

/* 치료 사양 목록 */
.mn-spec { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid color-mix(in srgb, var(--c) 20%, #fff); }
.mn-spec li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf0ee; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.mn-spec b { font-size: 14px; font-weight: 700; color: var(--c); }
@media (max-width: 560px) { .mn-spec li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* 신경 지도 */
.mn-map { max-width: 520px; margin: 0 auto 8px; }
.mn-why .rh-sg ul { border-top: 1.5px dashed var(--g); }

/* 한약 3 */
.mn-rx { margin-top: 18px; }
.mn-rx li { display: flex; flex-direction: column; }
.mn-rx p + p { margin-top: 10px; }
.mn-rx p b { color: var(--tg-ink); }
.mn-rx .mn-rx-comp { padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); font-size: 13.5px; color: var(--tg-mute); }
.mn-rx .mn-more { margin-top: auto; padding-top: 12px; }
@media (min-width: 1200px) { .mn-rx.rh-rx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jg-case > summary .jg-case-t { flex: 1 1 auto; min-width: 0; } .jg-case-t b em { display: inline-block; white-space: nowrap; }

/* ═══ 여성질환 (pain-women) — 고객 260928 초안. 비염·남성질환 컴포넌트 재사용, 색만 플럼 로즈 #94506f (2026-09-30) ═══ */
.wm-page { --ac-green: #94506f; --ac-green-soft: #f6ecf0; --fp: #94506f; --fp-soft: #f6ecf0; --fp-bg: #fbf6f8; --cr: #94506f; }
.tg-ans-page.wm-page { --tg-beauty: #94506f; --tg-beauty-soft: #f6ecf0; }
.wm-page .hx-eyebrow { color: #94506f; }
.wm-page #hx-faq.faq-flat { --fq: #94506f; --fq-soft: #f6ecf0; --fq-bg: #fbf6f8; --fq-ring: rgba(148, 80, 111, .35); --fq-ring2: rgba(148, 80, 111, .45); }
.wm-page .ta-sub .ta-sub-h, .wm-page .ac-check-hd h3 { background-image: linear-gradient(transparent 62%, rgba(214, 150, 176, .36) 62%); }
.wm-page .ac-check { --ac-red: #94506f; --ac-red-soft: #f8eef2; }
.wm-page .wm-hero .ad-hero-pic { aspect-ratio: 3 / 2; overflow: hidden; }
.wm-page .wm-hero .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.wm-page .fp-face .fp-dot.is-c { --pc: #2f5d7c; --pcA: rgba(47, 93, 124, .55); --pcZ: rgba(47, 93, 124, 0); }
.wm-page .fp-face span.fp-lab.is-warn { color: #b23a2c; border-color: #efc9c2; }
.wm-page .mn-jiao-bar li.is-on { background: #94506f; }
.wm-page .mn-map figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--tg-mute); text-align: center; word-break: keep-all; }
.tile-tbl.is-wm { --tc: #94506f; }

/* 산후 · 갱년기 두 카드 */
.wm-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 18px; padding-top: 4px; }
@media (min-width: 1000px) { .wm-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-two article { display: flex; flex-direction: column; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.wm-two figure { margin: 0; }
.wm-two figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.wm-two-bd { position: relative; padding: 30px 24px 22px; }
.wm-two-bd .ac-pill { background: var(--c); }
.wm-two h3 { margin: 0 0 10px; font-size: 21px; font-weight: 700; letter-spacing: -.025em; color: var(--c); }
.wm-two p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.wm-two p b { color: var(--tg-ink); }
.wm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px !important; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.wm-tags span { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 9%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); font-size: 13px; font-weight: 600; }

/* 국소 / 기반 두 방향 */
.wm-dir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 8px; }
@media (min-width: 760px) { .wm-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-dir > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 18px; background: color-mix(in srgb, var(--c) 6%, #fff); border-top: 2px solid var(--c); }
.wm-dir b { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--c); color: #fff; font-size: 15px; font-weight: 700; }
.wm-dir p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.wm-dir em { font-style: normal; font-weight: 700; color: var(--c); }

/* 고민 6 — 라벨 걸친 카드 3×2 */
.wm-worry.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wm-worry.fp-why > li, .wm-worry.fp-why > li:nth-child(n+3), .wm-worry.fp-why > li:last-child { grid-column: auto; }
@media (min-width: 1200px) { .wm-worry.fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wm-worry.fp-why { grid-template-columns: minmax(0, 1fr); } }
.wm-combo { display: inline-block; margin-top: 12px !important; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); font-size: 13px !important; font-weight: 600; color: var(--c) !important; }

/* 핵심 치료 두 카드 */
.wm-core { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 18px; padding-top: 14px; margin-bottom: 36px; }
@media (min-width: 1100px) { .wm-core { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-core article { position: relative; padding: 34px 24px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); }
.wm-core .ac-pill { background: var(--c); }
.wm-core h3 { margin: 0 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -.025em; color: var(--c); }
.wm-core h3 small { display: block; margin-top: 4px; font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: var(--tg-mute); }
.wm-core article > p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.wm-core article > p b { color: var(--tg-ink); }
.wm-core .rh-warn { margin: 16px 0 0 !important; }
.wm-table td:nth-of-type(1), .wm-table td:nth-of-type(2), .wm-table td:nth-of-type(3) { white-space: normal !important; }

/* 시술 과정 */
.wm-layer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 26px; align-items: center; margin: 0 0 24px; }
@media (min-width: 900px) { .wm-layer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.wm-layer figure { margin: 0; }
.wm-layer img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.wm-layer .rh-tx-p { margin: 0; }
.wm-six, .wm-four { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wm-four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.wm-six li, .wm-four li { padding: 14px 14px 12px; background: #fff; border-top: 2px solid color-mix(in srgb, var(--c) 45%, #fff); }
.wm-six li.is-key { border-top-color: var(--c); background: color-mix(in srgb, var(--c) 6%, #fff); }
.wm-six b, .wm-four b { display: block; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--c); }
.wm-six h5, .wm-four h5 { margin: 6px 0 4px; font-size: 15px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.wm-six p, .wm-four p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.wm-rf-steps { margin: 0 0 10px; }
.wm-rf-steps img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.wm-note { margin: 0 0 24px !important; font-size: 14px !important; color: var(--tg-mute) !important; }
.wm-placenta { margin-top: 6px; padding-top: 18px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
@media (max-width: 760px) { .wm-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-core article { padding: 30px 18px 18px; } .wm-two-bd { padding: 28px 18px 18px; } }

/* 자가진단 안내 문구 */
.wm-check-msg { flex-basis: 100%; margin-top: 6px; text-align: right; }
.ac-check.is-on .wm-check-msg { color: #94506f; font-weight: 600; }

/* 한약 6 */
@media (min-width: 1200px) { .wm-rx.rh-rx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mn-rx-pic { margin: 0 0 16px; padding: 12px; background: color-mix(in srgb, var(--c) 5%, #fff); } .mn-rx-pic img { display: block; width: 100%; height: 170px; object-fit: contain; } .mn-page .mn-rx .rh-rx-hanja { display: none; } @media (max-width: 760px) { .mn-rx-pic img { height: 190px; } }
/* 남성 신경 지도 — 고객 초안 도해를 흰 바탕용으로 옮김, 혈자리 점 펄스 (2026-09-30) */
.nm-map { margin: 0 0 12px; }
.nm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nm-svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: inherit; }
.nm-svg .nm-dot { fill: #b5722a; }
.nm-svg .nm-ring { fill: #b5722a; transform-box: fill-box; transform-origin: center; animation: nmPulse 2.4s ease-out infinite; }
@keyframes nmPulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nm-svg .nm-ring { animation: none; opacity: 0; } }
.nm-hint { display: none; margin: 6px 0 0; font-size: 12.5px; color: var(--tg-mute); text-align: right; }
.nm-legend { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #e3e8e5; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.nm-legend li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tg-body); }
.nm-legend i { display: inline-block; flex: 0 0 auto; }
.nm-legend i.is-dot { width: 10px; height: 10px; border-radius: 50%; background: #b5722a; }
.nm-legend i.is-line { width: 22px; height: 3px; background: #2f5d7c; }
.nm-legend i.is-dash { width: 22px; height: 0; border-top: 2px dashed #b5722a; }
@media (max-width: 700px) { .nm-hint { display: block; } .nm-legend { justify-content: flex-start; } }
.mn-face .fp-dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; } @media (max-width: 760px) { .mn-face .fp-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; } }
.mn-face .fp-dot.is-b { background: #b23a2c; border: 0; }
.mn-face .fp-dot.is-b { --pc: #1f3f58; --pcA: rgba(31, 63, 88, .55); --pcZ: rgba(31, 63, 88, 0); background: #1f3f58; } .mn-page .mn-face span.fp-lab.is-warn { color: #1f3f58; border-color: #c9d6e0; }
.mn-legend { margin: 6px 0 8px; } .nm-legend i.is-navy { background: #1f3f58; } .nm-legend i.is-glow { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 40, 40, .75), rgba(220, 40, 40, 0) 70%); }
/* 신경 지도 — 세로형 그림(왼쪽) + 질환 4개 한 줄 목록(오른쪽) (2026-09-30) */
.mn-nerve-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 36px; align-items: center; }
@media (min-width: 900px) { .mn-nerve-grid { grid-template-columns: 330px minmax(0, 1fr); } }
.mn-nerve-fig .mn-map { max-width: 360px; margin: 0 auto; }
.mn-nerve-fig .mn-legend { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.mn-nerve-fig .mn-legend li { font-size: 13px; }
.mn-nerve-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--tg-ink); }
.mn-nerve-list li { position: relative; padding: 20px 60px 20px 18px; border-bottom: 1px solid #e3e8e5; }
.mn-nerve-list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
.mn-nerve-list li i { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-style: normal; font-size: 46px; font-weight: 700; line-height: 1; color: var(--g); opacity: .13; pointer-events: none; }
.mn-nerve-list b { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--g); }
.mn-nerve-list p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) { .mn-nerve-list li { padding: 16px 48px 16px 16px; } .mn-nerve-list li i { font-size: 38px; } }
@media (min-width: 900px) { .mn-nerve-grid { grid-template-columns: 380px minmax(0, 1fr); } } .mn-nerve-fig .mn-map { max-width: 400px; }
/* 신경 지도 관련 선 (JS 로 그림) */
.mn-nerve-grid { position: relative; }
.mn-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.mn-links text { font-family: inherit; }
@media (min-width: 900px) { .mn-nerve-grid { column-gap: 150px; } .mn-nerve-list li::before { display: none; } .mn-nerve-list li { padding-left: 4px; } }
@media (max-width: 899px) { .mn-links { display: none; } }
@media (min-width: 900px) { .mn-nerve-grid { grid-template-columns: 350px minmax(0, 1fr); column-gap: 130px; } }
.mn-page .mn-hero .ad-hero-pic { aspect-ratio: 3 / 2; }
.mn-links text { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; font-weight: 700; }
@media (min-width: 900px) { .mn-nerve-grid { grid-template-columns: 400px minmax(0, 1fr); column-gap: 110px; } } .mn-nerve-fig .mn-map { max-width: 420px; }
/* 한의학이 보는 남성질환 — 고객 초안 구성: 왼쪽 글 / 오른쪽 하초 상자 / 아래 네 질환 한 줄 (2026-09-30) */
.mn-view .hx-split-bd { align-self: center; }
.mn-jiao-box { padding: 34px 32px; background: #1f3f58; color: #fff; }
.mn-jiao-box h3 { margin: 0 0 16px; font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: #fff; word-break: keep-all; }
.mn-jiao-box h3 em { font-style: normal; color: #e3b97c; }
.mn-jiao-box p { margin: 0; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .82); word-break: keep-all; text-wrap: pretty; }
.mn-jiao-box p b { color: #fff; }
.mn-view-cards { grid-column: 1 / -1; padding-top: 18px; }
.mn-view .mn-dz.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-view .mn-dz.fp-why > li, .mn-view .mn-dz.fp-why > li:nth-child(n+3), .mn-view .mn-dz.fp-why > li:last-child { grid-column: auto; }
@media (min-width: 1100px) { .mn-view .mn-dz.fp-why { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mn-view .mn-dz.fp-why { grid-template-columns: minmax(0, 1fr); } .mn-jiao-box { padding: 26px 20px; } .mn-jiao-box h3 { font-size: 20px; } }
@media (min-width: 900px) { .hx-split.mn-view { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.mn-jiao-sub { margin-top: 30px; } .mn-view-l .mn-jiao-bar li span { font-size: 12.5px; }
#mn-view .mn-jiao { margin-bottom: 26px; }
#mn-view .hx-split-hd .fp-stage { grid-template-columns: minmax(0, 1fr); gap: 26px; } #mn-view .hx-split-hd .fp-stage > li { padding: 30px 20px 18px; } #mn-view .hx-split-hd .fp-stage h3 { font-size: 18px; }
/* 네 가지 질환 — 선택 카드 (한 번에 하나만 펼침) */
#mn-view .mn-dz > li { cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
#mn-view .mn-dz > li:hover { border-color: color-mix(in srgb, var(--c) 55%, #fff); }
#mn-view .mn-dz > li.is-on { border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 18%, transparent); }
#mn-view .mn-dz > li:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
#mn-view .mn-dz > li .mn-more::after { content: " ↓"; }
#mn-view .mn-dz > li.is-on .mn-more::after { content: " ✓"; }
.mn-dz-sec[hidden] { display: none !important; }
/* 네 가지 질환 — A안: 한 줄에 하나씩, 누르면 펼쳐지는 아코디언 (2026-09-30) */
.mn-dz-list .mn-dz-acc .rh-tx-bd { padding-bottom: 22px; }
.mn-dz-list .mn-sym { margin-bottom: 22px; }
.mn-cause-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 1100px) { .mn-cause-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mn-cause-list li { padding: 16px 18px; background: #fff; border-top: 2px solid color-mix(in srgb, var(--c) 55%, #fff); }
.mn-cause-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.mn-cause-list b { display: block; font-size: 16.5px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.mn-cause-list b em { margin-left: 4px; font-style: normal; font-size: 13px; font-weight: 500; color: var(--c); }
.mn-cause-list small { display: block; margin: 3px 0 8px; font-size: 13.5px; color: var(--tg-mute); word-break: keep-all; }
.mn-cause-list p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
/* 네 가지 질환 아코디언 — 설명 옆 사진 */
.mn-dz-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; align-items: start; margin-bottom: 20px; }
@media (min-width: 1100px) { .mn-dz-intro { grid-template-columns: 260px minmax(0, 1fr); } }
.mn-dz-pic { margin: 0; }
.mn-dz-pic img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mn-dz-intro .rh-tx-p { margin: 0 0 12px; }
.mn-dz-intro .rh-tx-p:last-child { margin-bottom: 0; }
.mn-cause-list p b { display: inline; font-size: inherit; font-weight: 700; color: var(--tg-ink); }
@media (min-width: 1100px) { .mn-dz-intro { grid-template-columns: 320px minmax(0, 1fr); } }
/* 질환 아코디언 — 사진 옆 주요 증상, 설명은 아래 (2026-09-30) */
@media (min-width: 1100px) { .mn-dz-intro { grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; } }
.mn-dz-sym .rh-h4 { margin-top: 0; }
.mn-dz-sym .mn-sym { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; margin: 0 !important; }
.mn-dz-sym .mn-sym li { padding: 9px 14px 9px 40px; font-size: 14.5px; }
.mn-dz-sym .mn-sym li::before { top: 11px; left: 14px; }
.mn-dz-sym .mn-sym li::after { top: 16px; left: 19px; }
.mn-dz-pic img { height: 100%; min-height: 220px; }
.mn-dz-intro + .rh-tx-p { margin-top: 4px; }
.mn-dz-list .mn-dz-acc .rh-tx-p:last-of-type { margin-bottom: 22px; }
/* 질환 아코디언 — 사진 폭 확대, 원인 카드 재디자인(상단 라인 제거·라벨 걸침·한자 워터마크) (2026-09-30) */
@media (min-width: 1100px) { .mn-dz-intro { grid-template-columns: 400px minmax(0, 1fr); } }
.mn-cause-list { margin-top: 22px; gap: 26px 14px; }
.mn-cause-list li { position: relative; overflow: visible; padding: 26px 22px 20px; background: #fff; border-top: 0; box-shadow: 0 8px 24px -10px rgba(30, 45, 60, .16); }
.mn-cause-list .mn-cause-tag { position: absolute; top: -12px; left: 20px; margin: 0; padding: 4px 12px; background: var(--c); color: #fff; font-size: 12.5px; box-shadow: 0 0 0 4px #fff; }
.mn-cause-wm { position: absolute; right: 14px; top: 14px; font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-style: normal; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--c); opacity: .08; pointer-events: none; white-space: nowrap; }
.mn-cause-list li > b, .mn-cause-list li > small, .mn-cause-list li > p { position: relative; }
@media (max-width: 760px) { .mn-cause-list li { padding: 24px 18px 18px; } .mn-cause-wm { font-size: 32px; } }
.mn-cause-wm { opacity: .15; }
.mn-dz-acc .rh-h4.mn-cause-h { margin-top: 6px; padding: 8px 16px; font-size: 16.5px; font-weight: 700; }
@media (max-width: 760px) { .mn-dz-acc .rh-h4.mn-cause-h { padding: 7px 14px; font-size: 15.5px; } }
.mn-dz-sym .rh-h4 { padding: 8px 16px; font-size: 16.5px; font-weight: 700; }
@media (max-width: 760px) { .mn-dz-sym .rh-h4 { padding: 7px 14px; font-size: 15.5px; } }
/* 삼초 바 A안 — 한자 워터마크 타일 + 하초 "치료 초점" 걸침 라벨 (2026-09-30) */
.mn-jiao-bar { --jc: #2f5d7c; gap: 6px; margin-top: 14px; }
.wm-page .mn-jiao-bar { --jc: #94506f; }
.mn-jiao-bar li { position: relative; overflow: hidden; padding: 16px 16px 15px; background: #f4f6f8; }
.mn-jiao-bar li.is-on { overflow: visible; background: color-mix(in srgb, var(--jc) 13%, #fff); }
.wm-page .mn-jiao-bar li.is-on { background: color-mix(in srgb, var(--jc) 13%, #fff); }
.mn-jiao-wm { position: absolute; right: 8px; bottom: -9px; font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-style: normal; font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--jc); opacity: .08; pointer-events: none; white-space: nowrap; }
.mn-jiao-bar li.is-on .mn-jiao-wm { opacity: .16; font-size: 54px; bottom: -7px; }
.mn-jiao-bar li.is-on { clip-path: inset(-20px 0 0 0); }
.mn-jiao-bar b, .mn-jiao-bar span { position: relative; }
.mn-jiao-bar li.is-on b { color: var(--jc); }
.mn-jiao-bar li.is-on span { color: color-mix(in srgb, var(--jc) 78%, #fff); }
.mn-jiao-tag { position: absolute; top: -11px; left: 14px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: var(--jc); color: #fff; font-size: 11.5px; font-style: normal; font-weight: 600; line-height: 1.4; box-shadow: 0 0 0 3px #fff; white-space: nowrap; }
@media (max-width: 760px) { .mn-jiao-wm { font-size: 38px; bottom: -6px; } .mn-jiao-bar li.is-on .mn-jiao-wm { font-size: 42px; } }
@media (max-width: 760px) { .mn-jiao-wm { font-size: 34px; bottom: -12px; right: 6px; } .mn-jiao-bar li.is-on .mn-jiao-wm { font-size: 38px; bottom: -12px; } }
/* 치료 아코디언 아이콘 — 번호와 제목 사이 원형 (2026-09-30) */
.jg-case-ico { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 11%, #fff); }
.jg-case-ico::before { content: ""; width: 26px; height: 26px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.rh-txs .jg-case-ico + .jg-case-t { margin-left: -4px; }
@media (max-width: 760px) { .jg-case-ico { flex-basis: 38px; width: 38px; height: 38px; } .jg-case-ico::before { width: 21px; height: 21px; } }
.rh-txs .jg-case-t small, .rh-txs .jg-case-t b { word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) { .mn-page .rh-txs .jg-case-no { width: 38px; flex-basis: 38px; font-size: 32px; } .mn-page .rh-txs .jg-case > summary { gap: 10px; } }
/* 다섯 가지 수단 — 아코디언 → 2열 카드, 5번째는 가로 전체 (2026-09-30) */
.mn-txc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .mn-txc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-txc-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.mn-txc-card { position: relative; display: flex; flex-direction: column; padding: 28px 26px 24px; background: #fff; box-shadow: 0 10px 30px -14px rgba(30, 45, 60, .22), 0 0 0 1px color-mix(in srgb, var(--c) 10%, #fff); overflow: hidden; }
.mn-txc-no { position: absolute; top: 14px; right: 18px; font-family: "Poppins", sans-serif; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--c); opacity: .13; pointer-events: none; }
.mn-txc-hd { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding-right: 70px; }
.mn-txc-hd .jg-case-ico { flex: 0 0 52px; width: 52px; height: 52px; }
.mn-txc-hd .jg-case-ico::before { width: 28px; height: 28px; }
.mn-txc-hd h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--tg-ink); }
.mn-txc-hd h3 em { margin-left: 6px; font-style: normal; font-size: 14px; font-weight: 500; color: var(--c); }
.mn-txc-sub { margin: 3px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--c); word-break: keep-all; text-wrap: pretty; }
.mn-txc .rh-tx-p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; word-break: keep-all; text-wrap: pretty; }
.mn-txc .mn-spec li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; font-size: 14px; }
.mn-txc .mn-txc-note { margin: auto 0 0 !important; font-size: 13.5px; line-height: 1.7; word-break: keep-all; text-wrap: pretty; }
.mn-txc .mn-spec + .mn-txc-note, .mn-txc .rh-tx-p + .mn-txc-note { margin-top: auto !important; }
.mn-txc-card > .mn-spec:last-child, .mn-txc-card > .rh-tx-p:last-child { margin-bottom: 0; }
.mn-txc-note a { color: var(--c); font-weight: 700; }
@media (min-width: 1100px) { .mn-txc-card:last-child:nth-child(odd) .mn-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; } }
@media (max-width: 760px) { .mn-txc-card { padding: 24px 18px 20px; } .mn-txc-no { font-size: 48px; top: 12px; right: 14px; } .mn-txc-hd { padding-right: 52px; gap: 12px; } .mn-txc-hd .jg-case-ico { flex-basis: 44px; width: 44px; height: 44px; } .mn-txc-hd .jg-case-ico::before { width: 24px; height: 24px; } .mn-txc-hd h3 { font-size: 18px; } }
/* 다섯 가지 수단 — 한 줄에 하나, 좌: 아이콘·타이틀 / 우: 내용 (2026-09-30) */
.mn-txc { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
.mn-txc-card:last-child:nth-child(odd) { grid-column: auto; }
.mn-txc-card:last-child:nth-child(odd) .mn-spec { display: block; }
@media (min-width: 900px) {
  .mn-txc-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 36px; align-content: start; padding: 30px 32px 28px; }
  .mn-txc-card > * { grid-column: 2; }
  .mn-txc-card > .mn-txc-hd { grid-column: 1; grid-row: 1 / span 8; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; padding: 0 0 70px; }
  .mn-txc-no { top: auto; right: auto; left: 30px; bottom: 20px; }
  .mn-txc .mn-txc-note { margin: 4px 0 0 !important; }
  .mn-txc-card > .mn-spec:has(+ .mn-txc-note) { margin-bottom: 14px; }
}
@media (min-width: 1100px) { .mn-txc .mn-spec li { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; } }
@media (min-width: 900px) { .mn-txc-card > .mn-txc-no { grid-column: auto; grid-row: auto; left: 32px; bottom: 22px; } }
.mn-txc-hd .jg-case-ico { flex: 0 0 72px; width: 72px; height: 72px; }
.mn-txc-hd .jg-case-ico::before { width: 40px; height: 40px; }
@media (max-width: 760px) { .mn-txc-hd .jg-case-ico { flex-basis: 56px; width: 56px; height: 56px; } .mn-txc-hd .jg-case-ico::before { width: 31px; height: 31px; } }
@media (max-width: 760px) { .mn-txc .rh-tx-p br { display: none; } }
.mn-txc .rh-tx-p { font-size: 15.5px; } .mn-txc .mn-spec li { font-size: 14.5px; } .mn-txc .mn-txc-note { font-size: 14px; }
.mn-dz-sym .mn-sym li { font-size: 15px; } .mn-cause-list p { font-size: 15px; line-height: 1.7; } .mn-cause-list small { font-size: 14px; }
.nw { white-space: nowrap; }

/* ════════ 본문 타이포 5단계 통일 (2026-09-30) — .tg-ans-page 21개 페이지
   인트로 19 · 리드 16 · 본문 15.5 · 카드 본문 15 · 보조 14
   (라벨·칩·범례·그림 캡션·인용·경고 헤드라인·숫자 등 디스플레이 요소는 제외) ════════ */
/* 리드 16 */
.tg-ans-page p.ta-lede:not(.is-b-note), .tg-ans-page p.pg-h2-sub, .tg-ans-page .faq-a p { font-size: 16px !important; }
/* 본문 15.5 */
.tg-ans-page :is(p.rh-tx-p:not(.wm-note), p.rh-type-p, p.jg-how-p, p.ta-sub-p, p.ad-tx-why, p.ad-tx-key, p.ad-map-p, p.ta-how, p.ta-loop, p.ta-dz2-txt, p.ta-dz2-key, p.tp-key, p.rx-callout, p.hb-ask, p.dx-results-hd),
.tg-ans-page :is(.ta-tx-bd, .ad-prose, .hb-sum, .pr-step, .dx-results-hd) p,
.tg-ans-page :is(.ta-flow, .ta-dot, .ad-tx-list) li { font-size: 15.5px !important; }
/* 카드 본문 15 */
.tg-ans-page :is(.tp-card, .fp-gt, .rh-sg, .mn-nerve-list, .al-docs, .ta-steps, .ta-why, .gjx-steps, .in-phase, .in-voice, .wm-dir, .rh-tri, .wm-six, .wm-four, .in-hb4, .is-mix, .gjf, .is-free) p,
.tg-ans-page :is(p.cr-apply, p.ta-verdict, p.ta-txnav-p),
.tg-ans-page :is(.mn-spec, .fp-stage, .ac-check-list, .chk, .gj-who, .hb-mech, .hb-ear-steps, .al-loop-col, .fp-thread-steps) li,
.tg-ans-page :is(p.jg-with, p.rh-pts),
.tg-ans-page :is(.tp-rows, .ms-vs-dl, .is-central, .is-peri) dd,
.tg-ans-page .tg-table td { font-size: 15px !important; }
/* 보조 14 */
.tg-ans-page :is(p.pg-note, .pg-note p, p.ta-lede.is-b-note, p.ad-note, p.hx-alert-foot, p.al-loop-foot, p.ta-notice, p.adx-cap, p.hb-ear-cap, p.tmap-note, p.ad-ind-note, p.ta-dz2-foot, p.mn-rx-comp, p.rh-rx-comp, p.rh-cn-tip, p.tg-sul-note, p.cr-see, p.ac-disc, p.rh-warn, p.jg-case-note, p.ms-hero-note),
.tg-ans-page :is(.ac-notes, .is-warn, .hb-hub-src, .ms-timeline, .in-steps4) p,
.tg-ans-page .ms-refs li { font-size: 14px !important; }
/* 자연 줄바꿈 — 표·목록·카드까지 마지막 줄 외톨이 방지 (2026-09-30) */
.tg-ans-page :is(p, li, dd, td, figcaption) { text-wrap: pretty; }
.tg-ans-page :is(p, li, dd, td, figcaption) { word-break: keep-all; }
/* 고압산소 다섯 가지 변화 — 761~1199px 에서 글 칸이 좁아지던 문제: 아이콘 옆에 제목·설명을 세로로 */
@media (min-width: 761px) and (max-width: 1199px) {
  #hb-mech .hb-hub .hb-mech li { grid-template-columns: 52px minmax(0, 1fr); row-gap: 4px; align-items: start; }
  #hb-mech .hb-hub .hb-mech li > .mi { grid-row: 1 / span 2; }
  #hb-mech .hb-hub .hb-mech b { align-self: end; }
  #hb-mech .hb-hub .hb-mech span:not(.mi) { grid-column: 2; }
}
@media (min-width: 900px) and (max-width: 1199px) { #hb-mech .hb-bar { grid-template-columns: minmax(0, 1fr); } #hb-mech .hb-bar figure { max-width: 460px; } }
@media (max-width: 760px) { .mn-dz-acc .rh-tx-p br { display: none; } }
.mn-cause-wm { font-size: 36px; }
/* 왜 허리와 천골인가 — 화살표 끝은 질환 이름만, 설명은 그림 아래 2×2 카드 (2026-09-30) */
.mn-nerve-names { list-style: none; margin: 0; padding: 0; display: none; }
@media (min-width: 900px) {
  .mn-nerve-names { display: flex; flex-direction: column; justify-content: space-around; align-self: stretch; padding: 30px 0 60px; }
  .mn-nerve-names li { padding-left: 4px; }
  .mn-nerve-names b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--g); }
}
.mn-nerve-cards { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .mn-nerve-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .mn-nerve-cards { margin-top: 28px; } }
.mn-nerve-cards li { position: relative; overflow: hidden; padding: 24px 24px 22px; background: #fff; box-shadow: 0 10px 30px -14px rgba(30, 45, 60, .22), 0 0 0 1px color-mix(in srgb, var(--g) 10%, #fff); }
.mn-nerve-cards li i { position: absolute; right: 16px; top: 12px; font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-style: normal; font-size: 48px; font-weight: 700; line-height: 1; color: var(--g); opacity: .13; pointer-events: none; }
.mn-nerve-cards b { position: relative; display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--g); }
.mn-nerve-cards p { position: relative; margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) { .mn-nerve-cards li { padding: 20px 18px 18px; } .mn-nerve-cards li i { font-size: 40px; } }
@media (min-width: 900px) { .mn-nerve-names { justify-content: center; gap: 34px; padding: 0 0 40px; } }
/* 신경 지도 — 가로로 넓힌 그림(1240×900) + 척추 번호·혈자리 이름 (2026-09-30) */
@media (min-width: 900px) { .mn-nerve-grid { grid-template-columns: 560px minmax(0, 1fr); column-gap: 100px; } }
.mn-nerve-fig .mn-map { max-width: 560px; }
.mn-face .mn-vt, .mn-face .mn-pt { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 3; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.mn-face .mn-vt { transform: translateY(-50%); color: #9a5e1f; }
.mn-face .mn-vt.is-s { color: #1f3f58; }
.mn-face .mn-pt { transform: translate(-100%, -50%); color: #9a5e1f; }
.mn-face .mn-pt.is-s { color: #1f3f58; }
.mn-face .mn-pt em { font-style: normal; font-weight: 600; }
@media (max-width: 760px) { .mn-face .mn-vt, .mn-face .mn-pt { font-size: 10px; } }
/* 신경 지도 — 척추 번호·혈자리 이름은 알약 없이 글자만, 화살표 끝은 고객 도해의 세 기능 (2026-09-30) */
.fp-face span.mn-vt, .fp-face span.mn-pt { padding: 0; border-radius: 0; background: none; }
.fp-face span.mn-vt::after, .fp-face span.mn-pt::after { display: none; }
.fp-face span.mn-vt { transform: translateY(-50%); }
.fp-face span.mn-pt { transform: translate(-100%, -50%); }
@media (min-width: 900px) { .mn-nerve-grid { grid-template-columns: 500px minmax(0, 1fr); column-gap: 90px; } .mn-nerve-names { gap: 30px; padding: 0 0 40px; } }
.mn-nerve-fig .mn-map { max-width: 500px; }
.mn-nerve-names li { display: flex; flex-direction: column; gap: 3px; }
.mn-nerve-names b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--g); }
.mn-nerve-names span { font-size: 14px; line-height: 1.5; color: var(--tg-body); word-break: keep-all; }
.mn-nerve-names small { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--g); word-break: keep-all; }
@media (max-width: 1099px) {
  .mn-nerve-names { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; border-top: 1px solid #e3e8e5; }
  .mn-nerve-names li { padding: 12px 2px; border-bottom: 1px solid #e3e8e5; }
  .mn-nerve-names b { font-size: 17px; }
}
/* 신경 지도 — 제목은 다른 섹션처럼 왼쪽 유지, 제목 칸만 좁혀 그림 확대 + 그림 속 글자 칩 (2026-09-30) */
@media (min-width: 1100px) {

  #mn-nerve .mn-nerve-grid { grid-template-columns: 590px minmax(0, 1fr); column-gap: 96px; }
  #mn-nerve .mn-nerve-fig .mn-map { max-width: 590px; }
  #mn-nerve .mn-nerve-names b { font-size: 20px; }
}
.fp-face span.mn-vt, .fp-face span.mn-pt { padding: 3px 6px; border-radius: 3px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(20, 30, 40, .18); text-shadow: none; font-size: 11.5px; }
.fp-face span.mn-vt { transform: translate(2px, -50%); }
.fp-face span.mn-pt { transform: translate(calc(-100% - 2px), -50%); }
.fp-face span.mn-pt b { font-weight: 800; margin-left: 2px; }
.fp-face span.mn-pt em { margin-left: 1px; }
@media (min-width: 1100px) { #mn-nerve .fp-face span.mn-vt, #mn-nerve .fp-face span.mn-pt { font-size: 12px; } }
@media (max-width: 760px) { .fp-face span.mn-vt, .fp-face span.mn-pt { padding: 2px 4px; font-size: 10px; } }
@media (min-width: 900px) and (max-width: 1099px) { #mn-nerve .mn-nerve-grid { grid-template-columns: minmax(0, 1fr); } #mn-nerve .mn-links { display: none; } #mn-nerve .mn-nerve-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; padding: 0; } }
@media (max-width: 1099px) { .fp-face span.mn-pt.is-s { font-size: 0; padding: 1px 4px; } .fp-face span.mn-pt.is-s b { margin: 0; font-size: 10.5px; } }
@media (max-width: 760px) { .fp-face span.mn-pt.is-s { padding: 0 3px; } .fp-face span.mn-pt.is-s b { font-size: 9.5px; line-height: 11px; } }
@media (max-width: 760px) { .fp-face span.mn-pt.is-s b { display: block; line-height: 10px; padding: 1px 0; } }
@media (max-width: 760px) { .fp-face span.mn-pt.is-s.is-alt { transform: translate(calc(-100% - 28px), -50%); } }
@media (min-width: 1100px) { #mn-nerve .mn-nerve-grid { grid-template-columns: 530px minmax(0, 1fr); column-gap: 86px; } #mn-nerve .mn-nerve-fig .mn-map { max-width: 530px; } }
@media (min-width: 1100px) { #mn-nerve .mn-nerve-grid { grid-template-columns: minmax(0, 64%) minmax(0, 1fr); } #mn-nerve .mn-nerve-fig .mn-map { max-width: none; } #mn-nerve .fp-face span.mn-vt, #mn-nerve .fp-face span.mn-pt { padding: 2px 6px; line-height: 13px; } }
@media (max-width: 1199px) { #mn-nerve .fp-face span.mn-pt.is-s { font-size: 0; padding: 1px 4px; } #mn-nerve .fp-face span.mn-pt.is-s b { margin: 0; font-size: 10.5px; } }
@media (max-width: 1199px) { #mn-nerve .fp-face span.mn-pt.is-s { line-height: 11px; } #mn-nerve .fp-face span.mn-pt.is-s b { display: inline; line-height: 11px; padding: 0; } }
@media (max-width: 1199px) { #mn-nerve .fp-face span.mn-pt.is-s b { vertical-align: top; } #mn-nerve .fp-face span.mn-pt.is-s.is-alt { transform: translate(calc(-100% - 28px), -50%); } }
.fp-face span.fp-lab.mn-lab-flush { transform: translate(0, -50%); }
.fp-face span.fp-lab.mn-lab-flush-r { transform: translate(-100%, -50%); }
@media (max-width: 760px) { #mn-nerve .fp-face span.fp-lab { padding: 5px 8px; font-size: 11px; } }
.fp-face span .mn-wide-only { font-style: normal; } @media (max-width: 1199px) { .fp-face span .mn-wide-only { display: none; } }
.mn-legend-full { justify-content: flex-start; margin: 18px 0 0; padding-top: 14px; gap: 8px 26px; } .mn-legend-full li { font-size: 13px; } .mn-legend-full + .mn-nerve-cards { margin-top: 32px; } @media (max-width: 760px) { .mn-legend-full { flex-direction: column; gap: 6px; } }
/* 자주 쓰는 세 가지 처방 — 칸은 그대로, 제품만 1.12배 (2026-09-30) */ .mn-rx-pic { overflow: hidden; } .mn-rx-pic img { transform: scale(1.12); }
.nm-legend i.is-wm { background: #94506f; }
@media (max-width: 760px) { .fp-face span.mn-vt, .fp-face span.mn-pt:not(.is-s) { line-height: 11px; padding-top: 1px; padding-bottom: 1px; } }
/* 여성질환 신경 지도 — 점을 붉은 계열로 (요추 라즈베리 · 천골 와인), 파란색 제외 (2026-09-30) */
.wm-page .mn-face .fp-dot.is-a { --pc: #c2416b; --pcA: rgba(194, 65, 107, .55); --pcZ: rgba(194, 65, 107, 0); background: #c2416b; }
.wm-page .mn-face .fp-dot.is-b { --pc: #6e1a35; --pcA: rgba(110, 26, 53, .55); --pcZ: rgba(110, 26, 53, 0); background: #6e1a35; }
.wm-page .fp-face span.mn-vt, .wm-page .fp-face span.mn-pt { color: #a8325a; }
.wm-page .fp-face span.mn-pt.is-s { color: #6e1a35; }
.wm-page .nm-legend i.is-dot { background: #c2416b; }
.wm-page .nm-legend i.is-dot.is-navy { background: #6e1a35; }
.wm-page .nm-legend i.is-dot.is-wm { background: #94506f; }
/* 여성 신경 지도 — 붉은 광원 위에서 펄스가 묻히지 않게 고리는 밝은 핑크 */
.wm-page .mn-face .fp-dot.is-a { --pcA: rgba(255, 196, 214, .95); --pcZ: rgba(255, 196, 214, 0); }
.wm-page .mn-face .fp-dot.is-b { --pcA: rgba(255, 170, 196, .95); --pcZ: rgba(255, 170, 196, 0); }
/* 여성 신경 지도 — 그림을 옅게 해 점이 잘 보이게 */ .wm-page .mn-face img { opacity: .68; filter: saturate(.85); }
/* 남성 신경 지도 — 그림 옅게 (여성과 동일) */ .mn-page .mn-face img { opacity: .68; filter: saturate(.85); }
/* 여성질환 시술 과정 6단계 — A안 가로 타임라인 (점선 + 번호 원, 04 핵심 강조) (2026-09-30) */
.wm-six { position: relative; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 12px; margin: 8px 0 28px; }
.wm-six::before { content: ""; position: absolute; left: 8.33%; right: 8.33%; top: 15px; border-top: 1.5px dashed color-mix(in srgb, var(--c) 40%, #fff); }
.wm-six li, .wm-six li.is-key { position: relative; padding: 0; background: none; border: 0; text-align: center; }
.wm-six b { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 12px; border: 1.5px solid var(--c); border-radius: 50%; background: #fff; font-size: 11.5px; letter-spacing: 0; line-height: 1; }
.wm-six li.is-key b { width: 38px; height: 38px; margin: -4px auto 8px; background: var(--c); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent); }
.wm-six h5 { margin: 0 0 5px; font-size: 14.5px; line-height: 1.4; }
.wm-six li.is-key h5 { color: var(--c); }
.tg-ans-page .wm-six li p { font-size: 15px !important; line-height: 1.6; }
@media (max-width: 1099px) {
  .wm-six { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wm-six::before { left: 15px; right: auto; top: 15px; bottom: 15px; border-top: 0; border-left: 1.5px dashed color-mix(in srgb, var(--c) 40%, #fff); }
  .wm-six li, .wm-six li.is-key { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; text-align: left; }
  .wm-six b { grid-row: 1 / span 2; margin: 0; }
  .wm-six li.is-key b { margin: -4px 0 0 -4px; }
  .wm-six h5 { margin: 5px 0 3px; }
}
/* 6단계 타임라인 — 원·숫자 확대 */
.wm-six::before { top: 20px; }
.wm-six b { width: 40px; height: 40px; margin-bottom: 14px; font-size: 14px; font-weight: 700; }
.wm-six li.is-key b { width: 50px; height: 50px; margin: -5px auto 9px; font-size: 16px; }
@media (max-width: 1099px) {
  .wm-six::before { left: 20px; top: 20px; bottom: 20px; }
  .wm-six li, .wm-six li.is-key { grid-template-columns: 40px minmax(0, 1fr); }
  .wm-six b { margin: 0; }
  .wm-six li.is-key b { margin: -5px 0 0 -5px; }
  .wm-six h5 { margin-top: 9px; }
}
.wm-six h5 { font-size: 16px; }
/* 6단계 타임라인 — 단계별 내용 색 + 번호 원 펄스, 제목 줄 균형 (2026-09-30) */
.wm-six h5 { text-wrap: balance; }
.wm-six li h5 { color: var(--tg-ink); }
.wm-six li.is-key h5 { color: var(--c); }
.wm-six b { color: var(--c); animation: fpGtPulse 2.4s ease-out infinite; }
.wm-six li:nth-child(2) b { animation-delay: .4s; } .wm-six li:nth-child(3) b { animation-delay: .8s; } .wm-six li:nth-child(4) b { animation-delay: 1.2s; } .wm-six li:nth-child(5) b { animation-delay: 1.6s; } .wm-six li:nth-child(6) b { animation-delay: 2s; }
.wm-six li.is-key b { color: #fff; }
@media (prefers-reduced-motion: reduce) { .wm-six b { animation: none; } }
/* 질고주파 작용 원리 4단계 — 단계별 이미지 카드 + 번호 원(내용 색·펄스) + 진행 화살표 (2026-09-30) */
.wm-rf4 { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; }
.wm-rf4 li { position: relative; text-align: center; }
.wm-rf4 figure { position: relative; margin: 0; }
.wm-rf4 img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; box-shadow: 0 8px 22px -12px rgba(60, 30, 40, .25); }
.wm-rf4 li:not(:last-child) figure::after { content: ""; position: absolute; top: 50%; right: -17px; width: 0; height: 0; margin-top: -7px; border: 7px solid transparent; border-right: 0; border-left: 9px solid color-mix(in srgb, var(--c) 55%, #fff); }
.wm-rf4 b { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px auto 10px; border: 1.5px solid var(--c); border-radius: 50%; background: #fff; color: var(--c); font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 700; line-height: 1; animation: fpGtPulse 2.4s ease-out infinite; }
.wm-rf4 li:nth-child(2) b { animation-delay: .6s; } .wm-rf4 li:nth-child(3) b { animation-delay: 1.2s; } .wm-rf4 li:nth-child(4) b { animation-delay: 1.8s; }
.wm-rf4 h5 { margin: 0 0 5px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--c); word-break: keep-all; text-wrap: balance; }
.tg-ans-page .wm-rf4 p { margin: 0; font-size: 15px !important; line-height: 1.6; color: var(--tg-body); word-break: keep-all; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .wm-rf4 b { animation: none; } }
@media (max-width: 1099px) { .wm-rf4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-rf4 li:nth-child(2) figure::after { display: none; } }
@media (max-width: 560px) {
  .wm-rf4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wm-rf4 li { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; align-items: center; text-align: left; }
  .wm-rf4 figure { grid-row: 1 / span 3; } .wm-rf4 li figure::after { display: none; }
  .wm-rf4 b { width: 34px; height: 34px; margin: 0 0 6px; font-size: 12.5px; }
}
/* 질매선·질고주파 핵심 카드 — 상단 이미지 (2026-09-30) */
.wm-core-pic { margin: 0 0 20px; }
.wm-core-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.wm-core-pic.is-rf img { object-position: 50% 30%; }
.wm-core-pic.is-rf img { object-position: 50% 50%; }
/* 이 두 가지가 중심입니다 — 카드 라벨 확대 */ .wm-core article > .ac-pill { padding: 8px 18px; font-size: 15.5px; } .wm-core article { padding-top: 40px; } @media (max-width: 760px) { .wm-core article > .ac-pill { padding: 7px 15px; font-size: 14.5px; left: 16px; } }
/* 국소·기반 — C안: 큰 한자 타일 + 옅은 배경, 선 없음 (2026-09-30) */
.wm-dir { gap: 12px; margin: 0 0 10px; }
.wm-dir > div { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 18px 20px; background: color-mix(in srgb, var(--c) 7%, #fff); border-top: 0; }
.wm-dir-hj { display: grid; place-items: center; width: 72px; height: 72px; background: var(--c); color: #fff; font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-style: normal; font-size: 32px; font-weight: 700; line-height: 1; }
.wm-dir > div > div b { display: block; width: auto; height: auto; margin: 0 0 4px; border-radius: 0; background: none; color: var(--c); font-size: 17px; font-weight: 700; }
.tg-ans-page .wm-dir > div > div p { font-size: 15px !important; line-height: 1.65; }
@media (max-width: 760px) { .wm-dir > div { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px; } .wm-dir-hj { width: 58px; height: 58px; font-size: 26px; } }
/* 통증매선 — 자주 활용하는 부위 지도 (전신도 + 펄스 점 + 양옆 라벨·연결선) (2026-10-01) */
.ms-map { display: flex; justify-content: center; margin: 6px 0 34px; }
.ms-map-face { position: relative; width: min(390px, 56%); }
.ms-map-face img { display: block; width: 100%; height: auto; }
.ms-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.ms-map-lines line { stroke: #8fb3a3; stroke-width: 1.2; stroke-dasharray: 3 3; }
.ms-dot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #137a52; --pcA: rgba(255, 255, 255, .95); --pcZ: rgba(255, 255, 255, 0); box-shadow: 0 0 0 2px #fff; animation: fpPulse1 2.4s ease-out infinite; }
.ms-lab { position: absolute; top: calc(var(--y) * 1%); z-index: 3; transform: translateY(-50%); padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px -6px rgba(20, 60, 40, .35), 0 0 0 1px #d6e6de; color: #137a52; font-size: 14.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.ms-lab em { font-style: normal; font-weight: 600; color: #4f6b5e; }
.ms-lab.is-l { right: calc(100% + 16px); }
.ms-lab.is-r { left: calc(100% + 16px); }
@media (prefers-reduced-motion: reduce) { .ms-dot { animation: none; } }
@media (max-width: 760px) {
  .ms-map-face { width: 60%; }
  .ms-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .ms-lab { padding: 5px 9px; font-size: 12.5px; }
  .ms-lab em { display: none; }
  .ms-lab.is-l { right: calc(100% + 6px); } .ms-lab.is-r { left: calc(100% + 6px); }
}
/* 통증매선 회복 타임라인 — 가로 타임라인(점선 + 번호 원, 시기별 색·펄스), 카드 윗선·둥근 모서리 제거 (2026-10-01) */
.ms-timeline { position: relative; gap: 0 16px; counter-reset: tl; margin-top: 8px; }
.ms-timeline li { counter-increment: tl; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
.ms-timeline li::before { content: counter(tl, decimal-leading-zero); position: relative; left: auto; right: auto; top: auto; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border: 1.5px solid var(--c); border-radius: 50%; background: #fff; color: var(--c); font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 700; line-height: 1; animation: fpGtPulse 2.4s ease-out infinite; }
.ms-timeline li:nth-child(n+4)::before { background: #fff; }
.ms-timeline li:nth-child(2)::before { animation-delay: .5s; } .ms-timeline li:nth-child(3)::before { animation-delay: 1s; } .ms-timeline li:nth-child(4)::before { animation-delay: 1.5s; } .ms-timeline li:nth-child(5)::before { animation-delay: 2s; }
.ms-timeline span { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 13.5px; }
.ms-timeline b { margin-top: 8px; font-size: 16px; font-weight: 700; text-wrap: balance; }
.tg-ans-page .ms-timeline p { margin-top: 5px; font-size: 15px !important; line-height: 1.6; color: var(--tg-body); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .ms-timeline li::before { animation: none; } }
@media (min-width: 1100px) { .ms-timeline::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22px; border-top: 1.5px dashed #c9d8cf; } }
@media (max-width: 1099px) {
  .ms-timeline { gap: 18px; }
  .ms-timeline::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; border-left: 1.5px dashed #c9d8cf; }
  .ms-timeline li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; text-align: left; }
  .ms-timeline li::before { grid-row: 1 / span 3; margin: 0; }
  .ms-timeline li > span { justify-self: start; margin-top: 10px; }
}
@media (max-width: 1099px) { .ms-timeline { grid-template-columns: minmax(0, 1fr); } }
/* 통증매선 — 첫 화면 단면 도해(라벨·펄스 점) + 작용 원리 한눈에 섹션 분리 (2026-10-01) */
.hx-lead > .ms-lead-map { flex-direction: column; align-items: center; align-self: center; margin: 0; }
.ms-lead-map .ms-map-face { width: min(360px, 58%); }
.ms-lead-map .ms-map-face img { box-shadow: 0 14px 36px -18px rgba(60, 30, 30, .35); }
.ms-lead-map figcaption { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--tg-mute); text-align: center; word-break: keep-all; }
.ms-lead-map figcaption span { white-space: nowrap; }
.ms-lab.is-hot { background: #137a52; color: #fff; box-shadow: 0 4px 14px -6px rgba(20, 60, 40, .45); }
#ms-glance .ms-hero-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
#ms-glance .ms-hero-steps li { border: 0; border-radius: 0; background: #fff; box-shadow: 0 10px 28px -14px rgba(20, 60, 40, .28), 0 0 0 1px #e3eee8; }
#ms-glance .ms-hero-steps span { padding: 14px 18px 0; font-size: 12.5px; }
#ms-glance .ms-hero-steps b { padding: 4px 18px 0; font-size: 17px; font-weight: 700; }
.tg-ans-page #ms-glance .ms-hero-steps p { padding: 6px 18px 18px; font-size: 15px !important; line-height: 1.65; color: var(--tg-body); text-wrap: pretty; }
@media (max-width: 560px) { #ms-glance .ms-hero-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1199px) { .ms-lead-map .ms-lab em { display: none; } .ms-lead-map .ms-lab { padding: 6px 11px; font-size: 13.5px; } }
/* 통증매선 상단 도해 — 크기 확대 · 흰 배경 제거(곱하기 합성) · 금색 점/라벨 (2026-10-01) */
.ms-lead-map .ms-map-face { width: min(420px, 66%); }
.ms-lead-map .ms-map-face img { box-shadow: none; mix-blend-mode: multiply; }
.ms-lead-map .ms-dot { background: #b5722a; --pcA: rgba(255, 236, 200, .95); --pcZ: rgba(255, 236, 200, 0); }
.ms-lead-map .ms-lab { color: #9a5e1f; box-shadow: 0 4px 14px -6px rgba(90, 50, 10, .35), 0 0 0 1px #ecd9c2; }
.ms-lead-map .ms-lab em { color: #8a6a4a; }
.ms-lead-map .ms-lab.is-hot { background: #b5722a; color: #fff; }
.ms-lead-map .ms-map-lines line { stroke: #caa77e; }
/* 3. 왼쪽 굵은 세로선 제거 — 옅은 바탕 박스로 */
.tg-ans-page.ms-page :is(p.is-b-note, p.ad-tx-why) { border-left: 0 !important; border-radius: 0; padding: 16px 20px; }
/* 4. 둥근 모서리 → 각진 모서리 + 옅은 그림자 */
.tg-ans-page.ms-page :is(.tp-card, .in-vs-col, .ms-curve, .ta-tbl, .ms-dur, .ad-note, .ad-duo > div, .ad-ind > div, .ms-vs-dl > div) { border-radius: 0; }
.tg-ans-page.ms-page .tp-card { border: 0; box-shadow: 0 10px 28px -14px rgba(20, 60, 40, .26), 0 0 0 1px #e3eee8; }
/* 통증매선 — 구안와사 얼굴 도해(표정근별 금색 점) (2026-10-01) */
.ms-face-map { flex-direction: column; align-items: center; margin: 26px 0 30px; }
.ms-face-map .ms-map-face { width: min(330px, 46%); }
.ms-face-map .ms-dot { background: #c99a2e; --pcA: rgba(255, 228, 160, .95); --pcZ: rgba(255, 228, 160, 0); box-shadow: 0 0 0 2px #fff; }
.ms-face-map .ms-lab { color: #8a6418; box-shadow: 0 4px 14px -6px rgba(90, 60, 10, .3), 0 0 0 1px #eadcbc; font-size: 14px; }
.ms-face-map .ms-lab em { color: #8a7650; font-weight: 500; }
.ms-face-map .ms-map-lines line { stroke: #d6bf8a; }
.ms-face-map figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--tg-mute); }
.ms-gold-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #c99a2e; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #eadcbc; }
@media (max-width: 1199px) { .ms-face-map .ms-lab em { display: none; } }
@media (max-width: 760px) { .ms-face-map .ms-map-face { width: 52%; } .ms-face-map .ms-lab { font-size: 12px; padding: 5px 8px; } }
.ms-face-legend { display: none; }
@media (max-width: 560px) {
  .ms-face-map .ms-map-face { width: 64%; }
  .ms-face-map .ms-lab, .ms-face-map .ms-map-lines { display: none; }
  .ms-face-map .ms-dot { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; display: grid; place-items: center; }
  .ms-face-map .ms-dot::after { content: attr(data-n); font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; color: #fff; }
  .ms-face-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; list-style: none; counter-reset: fl; width: 100%; margin: 16px 0 0; padding: 0; }
  .ms-face-legend li { counter-increment: fl; display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; line-height: 1.45; color: var(--tg-body); word-break: keep-all; }
  .ms-face-legend li::before { content: counter(fl); flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: #c99a2e; color: #fff; font-size: 10px; font-weight: 700; }
}
/* 통증매선 상단 도해 — 근육 결을 따라 들어간 흡수성 실 (2026-10-01) */
.ms-threads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.ms-threads path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ms-threads .is-halo path { stroke: rgba(255, 255, 255, .85); stroke-width: 5; }
.ms-threads .is-thread path { stroke: #7b4fa0; stroke-width: 2.2; }
@media (max-width: 760px) { .ms-lead-map .ms-map-face { width: 54%; } .ms-threads .is-halo path { stroke-width: 4; } .ms-threads .is-thread path { stroke-width: 1.8; } }
/* 통증매선 약침+매선 STEP 설명 (초안 복원) */ .tg-ans-page.ms-page #ms-combo .ta-keychips li { border-radius: 0; font-size: 15px; } .tg-ans-page.ms-page #ms-combo .ta-keychips li small { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
/* 상단 도해 실 — 흰 테두리 없이 흰색 1px 점선 (2026-10-01) */
.ms-threads .is-halo { display: none; }
.ms-threads path { stroke: #fff; stroke-width: 1; stroke-dasharray: 4 3; }
@media (max-width: 760px) { .ms-threads path { stroke-width: 1; stroke-dasharray: 3 2; } }
/* 작용 원리 한눈에 — 4개 한 줄 (1200px 이상) */ @media (min-width: 1200px) { #ms-glance .ms-hero-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } #ms-glance .ms-hero-steps span { padding: 12px 14px 0; font-size: 12px; } #ms-glance .ms-hero-steps b { padding: 4px 14px 0; font-size: 16px; } .tg-ans-page #ms-glance .ms-hero-steps p { padding: 6px 14px 16px; } }
/* 작용 원리 한눈에 — STEP 표기를 이미지 아래 경계에 걸친 알약 라벨로 (2026-10-01) */
#ms-glance .ms-hero-steps li { position: relative; overflow: visible; }
#ms-glance .ms-hero-steps span, #ms-glance .ms-hero-steps li > span { position: relative; z-index: 1; display: inline-block; margin: -13px 0 0 14px; padding: 7px 12px 5px; border-radius: 999px; background: #137a52; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; box-shadow: 0 0 0 3px #fff; white-space: nowrap; }
#ms-glance .ms-hero-steps b { padding-top: 10px; }
@media (min-width: 1200px) { #ms-glance .ms-hero-steps span { margin-left: 12px; padding: 6px 10px; font-size: 12px; } }
#ms-glance .ms-hero-steps li > span { display: block; width: max-content; max-width: calc(100% - 28px); }
@media (max-width: 760px) { #ms-glance .ta-lede br { display: none; } }
#ms-glance .ta-lede b { white-space: nowrap; }
/* 통증이 반복되는 세 가지 배경 — 카드 상단 사진 */
.ms-three .ms-bg-card { display: flex; flex-direction: column; padding: 0; }
.ms-bg-img { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #eef3ef; }
.ms-bg-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-bg-tx { position: relative; padding: 20px 22px 22px; }
@media (max-width: 560px) { .ms-bg-tx { padding: 16px 16px 18px; } }
@media (min-width: 900px) and (max-width: 1099px) { .ms-three .ms-bg-card { flex-direction: row; } .ms-bg-img { flex: 0 0 38%; aspect-ratio: auto; } .ms-bg-tx { flex: 1; } }
/* 조직에서 이어지는 네 가지 변화 — 아이콘 */
.ms-ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 14px; border-radius: 50%; background: color-mix(in srgb, var(--c) 11%, #fff); }
.ms-ico::before { content: ""; width: 38px; height: 38px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ms-ico-card h3 small { color: var(--c, inherit); }
@media (max-width: 560px) { .ms-ico { width: 56px; height: 56px; margin-bottom: 12px; } .ms-ico::before { width: 33px; height: 33px; } }
/* 침치료 vs 매선치료 지속 막대 — 실제 눈금(0·4·8·12주) 위치 + 폰트 5단계 */
.ms-dur-axis { position: relative; display: block; height: 20px; margin: 0 0 10px 110px; font-size: 14px; }
.ms-dur-axis span { position: absolute; top: 0; left: calc(var(--x) * 1%); transform: translateX(-50%); white-space: nowrap; }
.ms-dur-axis span:first-child { transform: none; }
.ms-dur-axis span:last-child { transform: translateX(-100%); }
.ms-dur-bar::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, transparent calc(33.333% - 1px), #fff calc(33.333% - 1px), #fff calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.667% - 1px), #fff calc(66.667% - 1px), #fff calc(66.667% + 1px), transparent calc(66.667% + 1px)); }
.ms-dur-bar.is-acu i { width: 16px; }
.ms-dur-bar.is-ms i { width: 83.333%; background: linear-gradient(90deg, var(--tg-med) 0 40%, rgba(19,122,82,.15) 100%); }
.ms-dur-row span { font-size: 14px; }
.ms-count dd small { font-size: 15px; }
.tg-ans-page.ms-page .pg-note { max-width: none; }
@media (max-width: 560px) { .ms-dur-axis { margin-left: 0; } }
/* 한 부위에 실은 얼마나 — B안: 아이콘 원 + 숫자 워터마크 */
.tg-ans-page.ms-page .ms-count > div { position: relative; overflow: hidden; min-height: 112px; padding: 22px 22px 22px 106px; border: 0; box-shadow: 0 10px 28px -14px rgba(20, 60, 40, .26), 0 0 0 1px #e3eee8; display: flex; flex-direction: column; justify-content: center; }
.ms-count > div:nth-child(1) { --c: #d0612f; --ico: url('/assets/images/icons/rx-trapezius.png?v=1'); }
.ms-count > div:nth-child(2) { --c: #137a52; --ico: url('/assets/images/icons/rx-wholebody.png?v=1'); }
.ms-count > div::before, .ms-count > div::after { content: ""; position: absolute; left: 22px; top: 50%; width: 64px; height: 64px; transform: translateY(-50%); }
.ms-count > div::before { border-radius: 50%; background: color-mix(in srgb, var(--c) 11%, #fff); }
.ms-count > div::after { left: 35px; width: 38px; height: 38px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ms-count dt { color: var(--c); }
.ms-count dd { position: static; margin-top: 4px; }
.ms-count dd::after { position: absolute; right: 14px; bottom: 2px; font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: rgba(19, 122, 82, .07); pointer-events: none; }
.ms-count > div:nth-child(1) dd::after { content: "01"; }
.ms-count > div:nth-child(2) dd::after { content: "02"; }
@media (max-width: 560px) { .tg-ans-page.ms-page .ms-count > div { min-height: 100px; padding: 18px 16px 18px 88px; } .ms-count > div::before { left: 16px; width: 56px; height: 56px; } .ms-count > div::after { left: 27px; width: 34px; height: 34px; } .ms-count dd::after { font-size: 54px; } }
@media (max-width: 560px) { .ms-count dd::after { right: 10px; bottom: 0; font-size: 44px; color: rgba(19, 122, 82, .06); } }
/* 실 개수 카드 아이콘 확대 */
.tg-ans-page.ms-page .ms-count > div { padding-left: 120px; min-height: 124px; }
.ms-count > div::before { width: 80px; height: 80px; }
.ms-count > div::after { left: 36px; width: 52px; height: 52px; }
@media (max-width: 560px) { .tg-ans-page.ms-page .ms-count > div { padding-left: 98px; min-height: 108px; } .ms-count > div::before { left: 16px; width: 66px; height: 66px; } .ms-count > div::after { left: 28px; width: 42px; height: 42px; } }
/* 회복 타임라인 — 번호 원 확대 */
.ms-timeline li::before { width: 58px; height: 58px; font-size: 17px; border-width: 2px; }
@media (min-width: 1100px) { .ms-timeline::before { top: 29px; } }
@media (max-width: 1099px) {
  .ms-timeline::before { left: 27px; top: 27px; bottom: 27px; }
  .ms-timeline li { grid-template-columns: 54px minmax(0, 1fr); }
  .ms-timeline li::before { width: 54px; height: 54px; font-size: 16px; }
  .ms-timeline li > span { margin-top: 14px; }
}
/* 회복 타임라인 — B안 지그재그 (데스크톱): 가운데 점선 위 원, 홀수 단계는 위·짝수 단계는 아래 */
@media (min-width: 1100px) {
  .ms-timeline { grid-template-columns: repeat(30, minmax(0, 1fr)); grid-template-rows: auto 58px auto; gap: 0; margin-top: 14px; }
  .ms-timeline::before { display: none; }
  .ms-timeline li { position: relative; text-align: left; padding: 0 16px; }
  .ms-timeline li::before { position: absolute; z-index: 1; margin: 0; }
  .ms-timeline li:nth-child(odd) { grid-row: 1 / 3; padding-bottom: 80px; }
  .ms-timeline li:nth-child(even) { grid-row: 2 / 4; padding-top: 80px; }
  .ms-timeline li:nth-child(odd)::before { top: auto; bottom: 0; }
  .ms-timeline li:nth-child(even)::before { top: 0; bottom: auto; }
  .ms-timeline li:nth-child(1) { grid-column: 1 / 11; } .ms-timeline li:nth-child(3) { grid-column: 11 / 21; } .ms-timeline li:nth-child(5) { grid-column: 21 / 31; }
  .ms-timeline li:nth-child(2) { grid-column: 4 / 16; } .ms-timeline li:nth-child(4) { grid-column: 16 / 28; }
  .ms-timeline li:nth-child(1)::before { left: calc(30% - 29px); } .ms-timeline li:nth-child(3)::before { left: calc(50% - 29px); } .ms-timeline li:nth-child(5)::before { left: calc(70% - 29px); }
  .ms-timeline li:nth-child(even)::before { left: calc(50% - 29px); }
  .ms-timeline li:nth-child(odd)::after { content: ""; position: absolute; bottom: 28px; left: 0; right: 0; border-top: 1.5px dashed #c9d8cf; }
  .ms-timeline li:nth-child(1)::after { left: 30%; } .ms-timeline li:nth-child(5)::after { right: 30%; }
  .ms-timeline li:nth-child(odd) > span, .ms-timeline li:nth-child(even) > span { margin-top: 0; }
}
/* 여성질환 시술 과정 6단계 — B안 지그재그 (데스크톱): 홀수 위·짝수 아래, 가운데 점선 위 원 */
@media (min-width: 1100px) {
  .wm-six { grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: auto 60px auto; gap: 0; margin: 14px 0 28px; }
  .wm-six::before { display: none; }
  .wm-six li, .wm-six li.is-key { position: relative; text-align: left; padding: 0 14px; }
  .wm-six li b, .wm-six li.is-key b { position: absolute; margin: 0; }
  .wm-six li:nth-child(odd) { grid-row: 1 / 3; padding-bottom: 80px; }
  .wm-six li:nth-child(even) { grid-row: 2 / 4; padding-top: 80px; }
  .wm-six li:nth-child(odd) b { bottom: 10px; } .wm-six li:nth-child(odd).is-key b { bottom: 5px; }
  .wm-six li:nth-child(even) b { top: 10px; } .wm-six li:nth-child(even).is-key b { top: 5px; }
  .wm-six li:nth-child(1) { grid-column: 1 / 7; } .wm-six li:nth-child(3) { grid-column: 7 / 15; } .wm-six li:nth-child(5) { grid-column: 15 / 23; }
  .wm-six li:nth-child(2) { grid-column: 3 / 11; } .wm-six li:nth-child(4) { grid-column: 11 / 19; } .wm-six li:nth-child(6) { grid-column: 19 / 25; }
  .wm-six li { --p: 50%; } .wm-six li:nth-child(1) { --p: 33.333%; } .wm-six li:nth-child(6) { --p: 66.667%; }
  .wm-six li b { left: calc(var(--p) - 20px); } .wm-six li.is-key b { left: calc(var(--p) - 25px); }
  .wm-six li:nth-child(odd)::after { content: ""; position: absolute; bottom: 30px; left: 0; right: 0; border-top: 1.5px dashed color-mix(in srgb, #8e2f4a 30%, #fff); }
  .wm-six li:nth-child(1)::after { left: 33.333%; }
}
/* 지그재그 — 각 내용을 자기 번호 원 중심에 맞춤 (원 간격 = 1/(n+1), 칸 폭 = 2칸) */
@media (min-width: 1100px) {
  .ms-timeline { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ms-timeline li { text-align: center; padding-left: 10px; padding-right: 10px; }
  .ms-timeline li:nth-child(1) { grid-column: 1 / 5; } .ms-timeline li:nth-child(2) { grid-column: 3 / 7; } .ms-timeline li:nth-child(3) { grid-column: 5 / 9; } .ms-timeline li:nth-child(4) { grid-column: 7 / 11; } .ms-timeline li:nth-child(5) { grid-column: 9 / 13; }
  .ms-timeline li:nth-child(n)::before { left: calc(50% - 29px); }
  .ms-timeline li:nth-child(1)::after { left: 50%; } .ms-timeline li:nth-child(5)::after { right: 50%; }
  .wm-six { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .wm-six li, .wm-six li.is-key { text-align: center; padding-left: 10px; padding-right: 10px; }
  .wm-six li:nth-child(1) { grid-column: 1 / 5; } .wm-six li:nth-child(2) { grid-column: 3 / 7; } .wm-six li:nth-child(3) { grid-column: 5 / 9; } .wm-six li:nth-child(4) { grid-column: 7 / 11; } .wm-six li:nth-child(5) { grid-column: 9 / 13; } .wm-six li:nth-child(6) { grid-column: 11 / 15; }
  .wm-six li:nth-child(n) { --p: 50%; }
  .wm-six li:nth-child(1)::after { left: 50%; } .wm-six li:nth-child(5)::after { right: 0; }
}
/* 지그재그 — 내용 왼쪽 시작 = 자기 번호 원 왼쪽 끝 (왼쪽 정렬) */
@media (min-width: 1100px) {
  .ms-timeline li { text-align: left; }
  .ms-timeline li:nth-child(n)::before { left: 10px; }
  .ms-timeline li:nth-child(1)::after { left: 39px; } .ms-timeline li:nth-child(5)::after { right: calc(100% - 39px); }
  .wm-six li, .wm-six li.is-key { text-align: left; }
  .wm-six li b { left: 10px; } .wm-six li.is-key b { left: 5px; }
  .wm-six li:nth-child(1)::after { left: 30px; } .wm-six li:nth-child(5)::after { right: calc(50% - 30px); }
}
/* 여성질환 6단계 — 번호 원 확대 (40→54, 강조 50→64) */
@media (min-width: 1100px) {
  .wm-six { grid-template-rows: auto 72px auto; }
  .wm-six li b { width: 54px; height: 54px; font-size: 16px; left: 10px; }
  .wm-six li.is-key b { width: 64px; height: 64px; font-size: 19px; left: 5px; }
  .wm-six li:nth-child(odd) { padding-bottom: 92px; } .wm-six li:nth-child(even) { padding-top: 92px; }
  .wm-six li:nth-child(odd) b { bottom: 9px; } .wm-six li:nth-child(odd).is-key b { bottom: 4px; }
  .wm-six li:nth-child(even) b { top: 9px; } .wm-six li:nth-child(even).is-key b { top: 4px; }
  .wm-six li:nth-child(odd)::after { bottom: 36px; }
  .wm-six li:nth-child(1)::after { left: 37px; } .wm-six li:nth-child(5)::after { right: calc(50% - 37px); }
}
@media (max-width: 1099px) {
  .wm-six::before { left: 24px; top: 24px; bottom: 24px; }
  .wm-six li, .wm-six li.is-key { grid-template-columns: 48px minmax(0, 1fr); }
  .wm-six li b { width: 48px; height: 48px; font-size: 15px; }
  .wm-six li.is-key b { width: 56px; height: 56px; margin: -4px 0 0 -4px; font-size: 17px; }
  .wm-six h5 { margin-top: 12px; }
}
@media (max-width: 1279px) { .wm-six p br { display: none; } }
/* 여성질환 6단계 — 원 간격 확대 (간격 16%, 06 칸은 오른쪽 여백까지 사용) */
@media (min-width: 1100px) {
  .wm-six { grid-template-columns: repeat(100, minmax(0, 1fr)); }
  .wm-six li:nth-child(1) { grid-column: 1 / 33; } .wm-six li:nth-child(2) { grid-column: 17 / 49; } .wm-six li:nth-child(3) { grid-column: 33 / 65; }
  .wm-six li:nth-child(4) { grid-column: 49 / 81; } .wm-six li:nth-child(5) { grid-column: 65 / 97; } .wm-six li:nth-child(6) { grid-column: 81 / 101; margin-right: -24px; }
}
/* 여성질환 6단계 — 원 안 숫자 확대 */
.wm-six li b { font-size: 19px; } .wm-six li.is-key b { font-size: 23px; }
@media (max-width: 1099px) { .wm-six li b { font-size: 17px; } .wm-six li.is-key b { font-size: 20px; } }
/* 통증매선 회복 타임라인 — 여성질환 6단계와 동일 원(54px·숫자 19px) + 원 간격 확대(19%) */
.ms-timeline li::before { font-size: 19px; }
@media (min-width: 1100px) {
  .ms-timeline { grid-template-columns: repeat(100, minmax(0, 1fr)); grid-template-rows: auto 72px auto; }
  .ms-timeline li::before { width: 54px; height: 54px; }
  .ms-timeline li:nth-child(1) { grid-column: 1 / 39; } .ms-timeline li:nth-child(2) { grid-column: 20 / 58; } .ms-timeline li:nth-child(3) { grid-column: 39 / 77; }
  .ms-timeline li:nth-child(4) { grid-column: 58 / 96; } .ms-timeline li:nth-child(5) { grid-column: 77 / 101; margin-right: 0; padding-right: 0; }
  .ms-timeline li:nth-child(odd) { padding-bottom: 92px; } .ms-timeline li:nth-child(even) { padding-top: 92px; }
  .ms-timeline li:nth-child(odd)::before { bottom: 9px; } .ms-timeline li:nth-child(even)::before { top: 9px; }
  .ms-timeline li:nth-child(odd)::after { bottom: 36px; }
  .ms-timeline li:nth-child(1)::after { left: 37px; } .ms-timeline li:nth-child(5)::after { right: calc(100% - 37px); }
}
@media (max-width: 1099px) {
  .ms-timeline::before { left: 24px; top: 24px; bottom: 24px; }
  .ms-timeline li { grid-template-columns: 48px minmax(0, 1fr); }
  .ms-timeline li::before { width: 48px; height: 48px; font-size: 17px; }
  .ms-timeline li > span { margin-top: 12px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .ms-timeline li:nth-child(1) { grid-column: 1 / 35; } .ms-timeline li:nth-child(2) { grid-column: 18 / 52; } .ms-timeline li:nth-child(3) { grid-column: 35 / 69; }
  .ms-timeline li:nth-child(4) { grid-column: 52 / 86; } .ms-timeline li:nth-child(5) { grid-column: 69 / 101; }
}
@media (max-width: 1279px) { .ms-timeline p br { display: none; } }
@media (max-width: 1599px) { .ms-timeline p br.ms-br-xl { display: none; } }
/* 통증매선 회복 타임라인 — 원 확대 (데스크톱 64px·숫자 22px / 모바일 54px·숫자 19px) */
@media (min-width: 1100px) {
  .ms-timeline { grid-template-rows: auto 82px auto; }
  .ms-timeline li::before { width: 64px; height: 64px; font-size: 22px; }
  .ms-timeline li:nth-child(odd) { padding-bottom: 102px; } .ms-timeline li:nth-child(even) { padding-top: 102px; }
  .ms-timeline li:nth-child(odd)::after { bottom: 41px; }
  .ms-timeline li:nth-child(1)::after { left: 42px; } .ms-timeline li:nth-child(5)::after { right: calc(100% - 42px); }
}
@media (max-width: 1099px) {
  .ms-timeline::before { left: 27px; top: 27px; bottom: 27px; }
  .ms-timeline li { grid-template-columns: 54px minmax(0, 1fr); }
  .ms-timeline li::before { width: 54px; height: 54px; font-size: 19px; }
  .ms-timeline li > span { margin-top: 15px; }
}
/* 통증매선 — 자주 활용하는 부위: 좌 인체 도해(점 펄스) + 우 탭·내용 */
.ms-rg { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); gap: 28px; align-items: start; margin: 4px 0 0; }
.ms-rg-fig { margin: 0; padding: 22px 16px 14px; background: #f6f9f7; box-shadow: 0 0 0 1px #e3eee8; }
.ms-rg-face { position: relative; width: 100%; max-width: 280px; margin: 0 auto; }
.ms-rg-face img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: .82; }
.ms-rg-dot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border: 0; border-radius: 50%; background: #9fb8ac; box-shadow: 0 0 0 2px #fff; cursor: pointer; transition: width .2s, height .2s, margin .2s, background .2s; }
.ms-rg-dot:hover { background: #3f8a6b; }
.ms-rg-dot.is-on { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: #137a52; --pcA: rgba(19, 122, 82, .55); --pcZ: rgba(19, 122, 82, 0); animation: fpPulse1 1.8s ease-out infinite; }
.ms-rg-fig figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--tg-ink-2); word-break: keep-all; }
.ms-rg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.ms-rg-tab { padding: 9px 16px; border: 1px solid #dbe6e0; border-radius: 999px; background: #fff; font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.2; color: var(--tg-ink); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.ms-rg-tab:hover { border-color: #137a52; color: #137a52; }
.ms-rg-tab.is-on { border-color: #137a52; background: #137a52; color: #fff; }
.ms-rg-tab:focus-visible, .ms-rg-dot:focus-visible { outline: 2px solid #137a52; outline-offset: 2px; }
.ms-rg-h { margin: 0; font-size: 21px; font-weight: 700; color: var(--tg-ink); }
.ms-rg-where { margin: 6px 0 16px; font-size: 14px; line-height: 1.6; color: var(--tg-med); word-break: keep-all; }
.ms-rg-where b { margin-right: 8px; font-weight: 700; }
.ms-rg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; box-shadow: 0 0 0 1px #e3eee8; }
.ms-rg-cols > div { padding: 20px 22px; }
.ms-rg-cols > div + div { border-left: 1px solid #e3eee8; }
.ms-rg-cols h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #6b7a72; }
.ms-rg-cols ul { list-style: none; margin: 0; padding: 0; }
.ms-rg-cols li { position: relative; padding: 4px 0 4px 16px; font-size: 15px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; text-wrap: pretty; }
.ms-rg-cols li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 1.5px; background: #b5722a; }
.tg-ans-page .ms-rg-note { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .ms-rg-dot.is-on { animation: none; } }
@media (max-width: 760px) {
  .ms-rg { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ms-rg-face { max-width: 200px; }
  .ms-rg-tabs { gap: 6px; margin-bottom: 18px; }
  .ms-rg-tab { padding: 8px 13px; font-size: 14px; }
  .ms-rg-h { font-size: 19px; }
  .ms-rg-cols { grid-template-columns: minmax(0, 1fr); }
  .ms-rg-cols > div { padding: 16px 18px; }
  .ms-rg-cols > div + div { border-left: 0; border-top: 1px solid #e3eee8; }
}
@media (max-width: 760px) { .ms-rg-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; } .ms-rg-dot.is-on { width: 14px; height: 14px; margin: -7px 0 0 -7px; } }
/* 자주 활용하는 부위 — 탭은 전체 폭 한 줄, 그 아래 인체도(확대) + 내용 */
.ms-rg { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); row-gap: 24px; }
.ms-rg-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ms-rg-tab { padding: 11px 6px; text-align: center; }
.ms-rg-face { max-width: 360px; }
.ms-rg-fig { padding: 24px 18px 14px; }
@media (max-width: 1279px) { .ms-rg-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ms-rg { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ms-rg-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ms-rg-tab { padding: 9px 6px; }
  .ms-rg-face { max-width: 240px; }
}
@media (min-width: 761px) and (max-width: 1099px) { .ms-rg-cols { grid-template-columns: minmax(0, 1fr); } .ms-rg-cols > div { padding: 16px 18px; } .ms-rg-cols > div + div { border-left: 0; border-top: 1px solid #e3eee8; } }
/* 자주 활용하는 부위 — 인체도 확대 + 배경 제거 */
.ms-rg { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
.ms-rg-fig { padding: 0; background: none; box-shadow: none; }
.ms-rg-face { max-width: 420px; }
.ms-rg-face img { opacity: .9; }
@media (max-width: 760px) { .ms-rg { grid-template-columns: minmax(0, 1fr); } .ms-rg-face { max-width: 290px; } }
/* 자주 활용하는 부위 — 점 색(골드 계열) + 크기 축소 */
.ms-rg-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #cdb48e; box-shadow: 0 0 0 2px #fff; }
.ms-rg-dot:hover { background: #b5722a; }
.ms-rg-dot.is-on { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #b5722a; --pcA: rgba(181, 114, 42, .6); --pcZ: rgba(181, 114, 42, 0); }
.ms-rg-tab:focus-visible, .ms-rg-dot:focus-visible { outline-color: #b5722a; }
@media (max-width: 760px) { .ms-rg-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; } .ms-rg-dot.is-on { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; } }
/* 자주 활용하는 부위 — 인체도 조금 더 확대 */
.ms-rg { grid-template-columns: minmax(0, 48%) minmax(0, 1fr); gap: 24px; }
.ms-rg-face { max-width: 460px; }
@media (max-width: 760px) { .ms-rg { grid-template-columns: minmax(0, 1fr); } .ms-rg-face { max-width: 320px; } }
/* 자주 활용하는 부위 — B안 내용 디자인 + 부위별 색 */
.ms-rg [data-k="neck"], .ms-rg [data-pane="neck"] { --c: #137a52; }
.ms-rg [data-k="shoulder"], .ms-rg [data-pane="shoulder"] { --c: #1f7f86; }
.ms-rg [data-k="elbow"], .ms-rg [data-pane="elbow"] { --c: #6a4fa3; }
.ms-rg [data-k="back"], .ms-rg [data-pane="back"] { --c: #d0612f; }
.ms-rg [data-k="pelvis"], .ms-rg [data-pane="pelvis"] { --c: #c0506e; }
.ms-rg [data-k="knee"], .ms-rg [data-pane="knee"] { --c: #a0772f; }
.ms-rg [data-k="foot"], .ms-rg [data-pane="foot"] { --c: #2f5d8a; }
.ms-rg [data-k="jaw"], .ms-rg [data-pane="jaw"] { --c: #8e2f4a; }
.ms-rg-dot { background: color-mix(in srgb, var(--c) 45%, #fff); }
.ms-rg-dot:hover { background: var(--c); }
.ms-rg-dot.is-on { background: var(--c); --pcA: color-mix(in srgb, var(--c) 60%, transparent); --pcZ: color-mix(in srgb, var(--c) 0%, transparent); }
.ms-rg-tab:hover { border-color: var(--c); color: var(--c); }
.ms-rg-tab.is-on { border-color: var(--c); background: var(--c); color: #fff; }
.ms-rg-tab:focus-visible, .ms-rg-dot:focus-visible { outline-color: var(--c); }
.ms-rg-h { font-size: 22px; }
.ms-rg-where { margin: 6px 0 22px; color: var(--c); }
.ms-rg-box { position: relative; margin: 0 0 24px; padding: 26px 20px 14px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, #fff); }
.ms-rg-pill { position: absolute; top: 0; left: 16px; transform: translateY(-50%); padding: 6px 13px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .02em; box-shadow: 0 0 0 3px #fff; }
.ms-rg-box.is-tags .ms-rg-pill { background: #fff; color: var(--c); box-shadow: 0 0 0 1.5px var(--c), 0 0 0 4px #fff; }
.ms-rg-ck, .ms-rg-tags { list-style: none; margin: 0; padding: 0; }
.ms-rg-ck li { position: relative; padding: 5px 0 5px 28px; font-size: 15px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; text-wrap: pretty; }
.ms-rg-ck li::before { content: ""; position: absolute; left: 0; top: 8px; width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); }
.ms-rg-ck li::after { content: ""; position: absolute; left: 6px; top: 13px; width: 7px; height: 4px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.ms-rg-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.ms-rg-tags li { padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); font-size: 14.5px; font-weight: 500; line-height: 1.3; color: color-mix(in srgb, var(--c) 82%, #000); word-break: keep-all; }
.tg-ans-page .ms-rg-note { margin-top: -6px; }
@media (max-width: 760px) { .ms-rg-box { padding: 24px 16px 12px; } .ms-rg-h { font-size: 20px; } .ms-rg-tags li { font-size: 14px; padding: 6px 11px; } }
/* 자주 활용하는 부위 — 탭과 아래 내용 사이 간격 확대 */
.ms-rg { row-gap: 44px; }
@media (max-width: 760px) { .ms-rg { row-gap: 30px; } }
/* 자주 활용하는 부위 — 내용 박스 여유 있게 */
.ms-rg-where { margin: 8px 0 32px; }
.ms-rg-box { margin-bottom: 36px; padding: 34px 28px 24px; }
.ms-rg-pill { left: 22px; padding: 7px 14px; }
.ms-rg-ck li { padding: 8px 0 8px 30px; line-height: 1.65; }
.ms-rg-ck li::before { top: 11px; }
.ms-rg-ck li::after { top: 16px; }
.ms-rg-tags { gap: 10px; padding-bottom: 4px; }
.ms-rg-tags li { padding: 9px 16px; }
.tg-ans-page .ms-rg-note { margin-top: -10px; line-height: 1.75; }
@media (max-width: 760px) { .ms-rg-where { margin-bottom: 28px; } .ms-rg-box { margin-bottom: 30px; padding: 30px 18px 18px; } .ms-rg-pill { left: 16px; } .ms-rg-tags { gap: 8px; } .ms-rg-tags li { padding: 7px 13px; } }
/* 자주 활용하는 부위 — 주의 문구 강조(부위 색) */
.tg-ans-page .ms-rg-note { color: color-mix(in srgb, var(--c) 88%, #000); font-weight: 500; }
@media (min-width: 761px) { .ms-rg-panel { padding-top: 28px; } }
/* 자주 활용하는 부위 — 박스 라벨 폰트 확대 13→15px */
.ms-rg-pill { padding: 8px 16px; font-size: 15px; }
.ms-rg-box { padding-top: 38px; }
@media (max-width: 760px) { .ms-rg-pill { padding: 7px 14px; font-size: 14.5px; } .ms-rg-box { padding-top: 34px; } }
/* 구안와사 후유증 — 얼굴 도해 확대 */
.ms-face-map .ms-map-face { width: min(440px, 56%); }
@media (max-width: 760px) { .ms-face-map .ms-map-face { width: 60%; } }
@media (max-width: 560px) { .ms-face-map .ms-map-face { width: 80%; } }
@media (max-width: 1365px) { .ms-face-map .ms-lab em { display: none; } }
/* 구안와사 후유증 — 얼굴 도해 추가 확대 */
.ms-face-map .ms-map-face { width: min(520px, 62%); }
@media (max-width: 760px) { .ms-face-map .ms-map-face { width: 68%; } }
@media (max-width: 560px) { .ms-face-map .ms-map-face { width: 92%; } }
@media (max-width: 1599px) { .ms-face-map .ms-lab em { display: none; } }
@media (min-width: 900px) and (max-width: 1099px) { .ms-face-map .ms-map-face { width: min(340px, 56%); } }
.ms-face-map + .ad-duo { margin-top: 8px; }
/* 구안와사 — 고객 강조 문단 (핵심 박스) */
.ms-callout { position: relative; margin: 14px 0 44px; padding: 32px 30px 26px; background: #fbf5ea; box-shadow: 0 0 0 1px #ecdcbf; }
.ms-callout-pill { position: absolute; top: 0; left: 26px; transform: translateY(-50%); padding: 7px 16px; border-radius: 999px; background: #b5722a; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .04em; box-shadow: 0 0 0 4px #fff; }
.tg-ans-page .ms-callout p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--tg-ink); word-break: keep-all; text-wrap: pretty; }
.ms-callout p b { font-weight: 700; color: #8a5a1f; background: linear-gradient(transparent 62%, rgba(201, 154, 46, .28) 0); }
@media (max-width: 760px) { .ms-callout { margin-bottom: 36px; padding: 28px 18px 20px; } .ms-callout-pill { left: 16px; } }
/* 구안와사 얼굴 도해 — 점 색 변경(초록) */
.ms-face-map .ms-dot { background: #137a52; --pcA: rgba(19, 122, 82, .55); --pcZ: rgba(19, 122, 82, 0); }
.ms-face-map .ms-lab { color: #0f6644; box-shadow: 0 4px 14px -6px rgba(10, 60, 40, .28), 0 0 0 1px #cfe3d8; }
.ms-face-map .ms-lab em { color: #4f7a66; }
.ms-face-map .ms-map-lines line { stroke: #9fc7b3; }
.ms-gold-dot { background: #137a52; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #cfe3d8; }
.ms-face-legend li::before { background: #137a52; }
.ms-face-map + .ms-callout { margin: 30px 0 34px; }
.ms-callout + .ad-duo { margin-top: 0; }
/* 구안와사 얼굴 도해 — 점 색 붉은 톤 */
.ms-face-map .ms-dot { background: #c2343f; --pcA: rgba(194, 52, 63, .55); --pcZ: rgba(194, 52, 63, 0); }
.ms-face-map .ms-lab { color: #9e2632; box-shadow: 0 4px 14px -6px rgba(90, 20, 25, .28), 0 0 0 1px #f0d0d3; }
.ms-face-map .ms-lab em { color: #a0646a; }
.ms-face-map .ms-map-lines line { stroke: #e2a9ae; }
.ms-gold-dot { background: #c2343f; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #f0d0d3; }
.ms-face-legend li::before { background: #c2343f; }
/* 구안와사 핵심 박스 — 붉은 톤 */
.ms-callout { background: #fdf2f2; box-shadow: 0 0 0 1px #f0d0d3; }
.ms-callout-pill { background: #c2343f; }
.ms-callout p b { color: #9e2632; background: linear-gradient(transparent 62%, rgba(194, 52, 63, .2) 0); }
/* 구안와사 — 후유증 / 매선이 하는 일 (A안: 숫자 시각화 + 두 갈래) */
.ms-callout + .ms-sq { margin-top: 0; }
.ms-sq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 18px 0 0; }
.ms-sq-card { position: relative; display: flex; flex-direction: column; padding: 38px 26px 26px; background: #fff; }
.ms-sq-card.is-why { --c: #c2343f; box-shadow: 0 10px 28px -16px rgba(120, 20, 30, .25), 0 0 0 1px #f0dadc; }
.ms-sq-card.is-act { --c: #137a52; box-shadow: 0 10px 28px -16px rgba(10, 60, 40, .25), 0 0 0 1px #d6e8de; }
.ms-sq-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 8px 16px; border-radius: 999px; background: var(--c); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .02em; box-shadow: 0 0 0 4px #fff; white-space: nowrap; }
.ms-sq-stat { display: flex; align-items: center; gap: 16px; }
.ms-sq-stat b { flex: none; font-family: "Poppins", sans-serif; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--c); }
.ms-sq-stat b small { margin-left: 2px; font-size: 28px; font-weight: 700; }
.ms-sq-stat span { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--tg-ink); word-break: keep-all; }
.ms-sq-bar { display: flex; gap: 3px; height: 12px; margin: 20px 0 10px; }
.ms-sq-bar i { flex: var(--w) 1 0; }
.ms-sq-bar i:nth-child(1) { background: #f2b8bd; } .ms-sq-bar i:nth-child(2) { background: #dd6f79; } .ms-sq-bar i:nth-child(3) { background: #9e2632; }
.ms-sq-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.ms-sq-leg li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #6b5a5c; }
.ms-sq-leg li::before { content: ""; width: 10px; height: 10px; background: #f2b8bd; }
.ms-sq-leg li:nth-child(2)::before { background: #dd6f79; } .ms-sq-leg li:nth-child(3)::before { background: #9e2632; }
.ms-sq-leg b { font-weight: 700; color: #9e2632; }
.ms-sq-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.ms-sq-two > div { padding: 16px 18px; }
.ms-sq-two .is-stiff { background: #fdf2f2; } .ms-sq-two .is-weak { background: #eef6f1; }
.ms-sq-two small { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.ms-sq-two .is-stiff small { color: #c2343f; } .ms-sq-two .is-weak small { color: #137a52; }
.ms-sq-two b { display: block; margin-top: 4px; font-size: 19px; font-weight: 700; color: var(--tg-ink); }
.tg-ans-page .ms-sq p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 1199px) { .ms-sq-stat span br { display: none; } }
@media (max-width: 759px) { .ms-sq { grid-template-columns: minmax(0, 1fr); gap: 34px; } .ms-sq-card { padding: 34px 18px 20px; } .ms-sq-pill { left: 16px; font-size: 14.5px; } .ms-sq-stat b { font-size: 48px; } }
@media (min-width: 760px) and (max-width: 1099px) { .ms-sq { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
/* 구안와사 — 소제목과 얼굴 도해 사이 간격 확대 */
.ms-face-map { margin-top: 48px; }
@media (max-width: 760px) { .ms-face-map { margin-top: 36px; } }
/* 구안와사 — 후유증 유형별 접근 (A안: 증상 위 / 접근 아래 두 단 카드) */
.ms-ty-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 8px 0 0; }
@media (min-width: 1100px) { .ms-ty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-ty { display: flex; flex-direction: column; background: #fff; box-shadow: 0 10px 28px -16px rgba(40, 20, 20, .22), 0 0 0 1px color-mix(in srgb, var(--c) 18%, #fff); }
.ms-ty-top { position: relative; flex: 1; overflow: hidden; padding: 24px 22px 32px; }
.ms-ty-wm { position: absolute; right: 14px; top: 8px; font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-size: 84px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--c) 11%, transparent); pointer-events: none; }
.ms-ty-ico { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); }
.ms-ty-ico::before { content: ""; width: 32px; height: 32px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ms-ty h3 { position: relative; margin: 16px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.tg-ans-page .ms-ty p { position: relative; margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.ms-ty-bot { position: relative; padding: 28px 22px 22px; background: color-mix(in srgb, var(--c) 7%, #fff); }
.ms-ty-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 7px 15px; border-radius: 999px; background: var(--c); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .04em; box-shadow: 0 0 0 4px #fff; }
.tg-ans-page .ms-ty-bot p { color: var(--tg-ink); }
@media (max-width: 760px) { .ms-ty-top { padding: 22px 18px 30px; } .ms-ty-bot { padding: 26px 18px 20px; } .ms-ty-pill { left: 18px; } .ms-ty-wm { font-size: 70px; } }
@media (min-width: 1100px) and (max-width: 1259px) { .ms-ty-grid { grid-template-columns: minmax(0, 1fr); } }
/* 안면 매선의 임상 결과 — A안: 2×2 숫자 타일 + 근거의 한계 박스 */
.ms-evg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 18px; margin: 18px 0 0; }
@media (min-width: 760px) { .ms-evg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-evt { position: relative; display: flex; flex-direction: column; padding: 32px 24px 18px; background: #fff; box-shadow: 0 10px 28px -16px rgba(30, 40, 35, .22), 0 0 0 1px color-mix(in srgb, var(--c) 20%, #fff); }
.ms-evt.is-ongoing { background: color-mix(in srgb, var(--c) 4%, #fff); box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--c) 45%, #fff); outline-offset: -1.5px; }
.ms-evt-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); padding: 7px 15px; border-radius: 999px; background: var(--c); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .02em; box-shadow: 0 0 0 4px #fff; white-space: nowrap; }
.tg-ans-page .ms-evt-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-family: "Poppins", sans-serif; font-size: 46px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--c); }
.ms-evt-n small { margin-left: -8px; font-family: inherit; font-size: 20px; font-weight: 700; }
.ms-evt-st { align-self: center; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--c); }
.tg-ans-page .ms-evt-d { flex: 1; margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.ms-evt-d b { font-weight: 700; color: var(--c); }
.tg-ans-page .ms-evt-c { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 25%, #fff); font-size: 13px; line-height: 1.5; color: var(--tg-ink-2); word-break: keep-all; }
.ms-evt-c::before { content: "출처"; flex: none; padding: 3px 7px; border-radius: 4px; background: color-mix(in srgb, var(--c) 10%, #fff); font-size: 11.5px; font-weight: 700; color: var(--c); }
.ms-lim { position: relative; margin: 36px 0 0; padding: 30px 26px 22px; background: #fff8ec; box-shadow: 0 0 0 1px #efdfbf; }
.ms-lim-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 7px 15px; border-radius: 999px; background: #b5722a; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .02em; box-shadow: 0 0 0 4px #fff; }
.tg-ans-page .ms-lim p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--tg-ink); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) { .ms-evt { padding: 30px 18px 16px; } .ms-evt-pill, .ms-lim-pill { left: 16px; } .tg-ans-page .ms-evt-n { font-size: 40px; } .ms-lim { padding: 28px 18px 18px; } }
/* 안면 매선의 임상 결과 — B안: 연도별 근거 타임라인 */
.ms-evl { position: relative; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 26px; }
.ms-evl::before { content: ""; position: absolute; left: 105px; top: 14px; bottom: 14px; border-left: 1.5px dashed #c9d8cf; }
.ms-evl li { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 46px; align-items: start; }
.ms-evl li::before { content: ""; position: absolute; left: 97px; top: 8px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px #fff; --pcA: color-mix(in srgb, var(--c) 55%, transparent); --pcZ: color-mix(in srgb, var(--c) 0%, transparent); animation: fpPulse1 2.4s ease-out infinite; }
.ms-evl li.is-null::before { background: #fff; box-shadow: 0 0 0 4px #fff, inset 0 0 0 2.5px var(--c); animation: none; }
.ms-evl li.is-ongoing::before { background: #fff; box-shadow: 0 0 0 4px #fff; outline: 2.5px dashed var(--c); outline-offset: -2.5px; animation: none; }
.ms-evl-yr { padding-top: 2px; font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--c); text-align: right; white-space: nowrap; }
.ms-evl-cd { position: relative; padding: 22px 24px 18px; background: #fff; box-shadow: 0 10px 28px -16px rgba(30, 40, 35, .2), 0 0 0 1px color-mix(in srgb, var(--c) 20%, #fff); }
.ms-evl li.is-null .ms-evl-cd { background: #f7f8f7; box-shadow: 0 0 0 1px #e1e6e3; }
.ms-evl li.is-ongoing .ms-evl-cd { background: color-mix(in srgb, var(--c) 4%, #fff); box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--c) 45%, #fff); outline-offset: -1.5px; }
.ms-evl-tag { display: inline-block; padding: 6px 13px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.tg-ans-page .ms-evl-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 0; font-family: "Poppins", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--c); }
.ms-evl-n small { margin-left: -6px; font-size: 18px; font-weight: 700; }
.ms-evl-n i { font-style: normal; font-weight: 400; color: color-mix(in srgb, var(--c) 40%, #fff); }
.tg-ans-page .ms-evl-n.is-txt { font-family: inherit; font-size: 20px; letter-spacing: 0; color: var(--tg-ink); }
.ms-evl-st { align-self: center; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 13%, #fff); font-family: "Pretendard", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--c); }
.tg-ans-page .ms-evl-d { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.ms-evl-d b { font-weight: 700; color: var(--c); }
.tg-ans-page .ms-evl-c { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--c) 25%, #fff); font-size: 13px; line-height: 1.5; color: var(--tg-ink-2); word-break: keep-all; }
.ms-evl-c::before { content: "출처"; flex: none; padding: 3px 7px; border-radius: 4px; background: color-mix(in srgb, var(--c) 10%, #fff); font-size: 11.5px; font-weight: 700; color: var(--c); }
.tg-ans-page .ms-evl-note { margin: 22px 0 0 130px; font-size: 14px; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .ms-evl li::before { animation: none; } }
@media (max-width: 760px) {
  .ms-evl { gap: 22px; }
  .ms-evl::before { left: 7px; }
  .ms-evl li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-left: 30px; }
  .ms-evl li::before { left: -1px; top: 4px; }
  .ms-evl-yr { padding-top: 0; font-size: 20px; text-align: left; }
  .ms-evl-cd { padding: 18px 16px 14px; }
  .tg-ans-page .ms-evl-n { font-size: 34px; }
  .tg-ans-page .ms-evl-note { margin-left: 30px; }
}
/* 임상 결과 하단 — 근거의 한계 박스 */
.ms-evl + .ms-lim { margin-top: 44px; }
.tg-ans-page .ms-lim-t { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.5; color: #7a4a14; }
.ms-lim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ms-lim-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.75; color: var(--tg-ink); word-break: keep-all; text-wrap: pretty; }
.ms-lim-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #b5722a; }
/* 알약 라벨 — 한글 글자가 살짝 위로 떠 보이는 것 보정 (위 +1px / 아래 -1px) */
.ms-rg-pill, .ms-sq-pill { padding-top: 9px; padding-bottom: 7px; }
.ms-ty-pill, .ms-lim-pill, .ms-callout-pill { padding-top: 8px; padding-bottom: 6px; }
.ms-evl-tag { padding-top: 7px; padding-bottom: 5px; }
.ms-evl-st { padding-top: 6px; padding-bottom: 4px; }
.ms-rg-tab { padding-top: 12px; padding-bottom: 10px; }
.ms-rg-tags li { padding-top: 10px; padding-bottom: 8px; }
.ms-lab { padding-top: 8px; padding-bottom: 6px; }
@media (max-width: 1199px) { .ms-lead-map .ms-lab { padding-top: 7px; padding-bottom: 5px; } }
@media (max-width: 760px) {
  .ms-rg-pill { padding-top: 8px; padding-bottom: 6px; }
  .ms-rg-tab { padding-top: 10px; padding-bottom: 8px; }
  .ms-rg-tags li { padding-top: 8px; padding-bottom: 6px; }
  .ms-lab { padding-top: 6px; padding-bottom: 4px; }
  .ms-face-map .ms-lab { padding-top: 6px; padding-bottom: 4px; }
}
/* 약침+매선 STEP — 설명(small)을 제목 아래로 (3단 가로 → 2단 그리드) */
.tg-ans-page.ms-page #ms-combo .ta-keychips li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.tg-ans-page.ms-page #ms-combo .ta-keychips li small { grid-column: 2; margin-top: 8px; }
/* 메인 히어로 소개 문장 — 모바일에서 92vw 가 본문 폭보다 넓어 가로 넘침 → 부모 폭(100%)을 넘지 않게 */
.hero-lede,
.hero-slides:has(> .hero-slide:nth-child(3).on) ~ .hero-copy .hero-lede,
.hero-slides:has(> .hero-slide:nth-child(1).on) ~ .hero-copy .hero-lede { max-width: min(1000px, 92vw, 100%); }
/* 메인 히어로 소개 문장 — 모바일 자연 줄바꿈(줄 길이 균형) */
@media (max-width: 760px) { .hero-lede-l { text-wrap: balance; word-break: keep-all; } }
/* 마커색 교체 — 구안와사(주황) ↔ 세 가지 배경(분홍) */
.ms-page #ms-why  { --mk: rgba(255,200,150,.48); }
.ms-page #ms-face { --mk: rgba(255,170,190,.42); }
/* 약침 vs 매선 비교 — A안: 아이콘 카드 + 자극 지속 막대 + 강점/한계 행 */
.ms-cv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 20px; margin: 22px 0 0; }
@media (min-width: 1100px) { .ms-cv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-cv-card { position: relative; display: flex; flex-direction: column; padding: 36px 26px 22px; background: #fff; box-shadow: 0 10px 28px -16px rgba(30, 40, 35, .22), 0 0 0 1px color-mix(in srgb, var(--c) 20%, #fff); }
.ms-cv-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 9px 16px 7px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1; letter-spacing: .08em; box-shadow: 0 0 0 4px #fff; }
.ms-cv-hd { display: flex; align-items: center; gap: 14px; }
.ms-cv-ico { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); }
.ms-cv-ico::before { content: ""; width: 34px; height: 34px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ms-cv h4 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; text-wrap: balance; }
.tg-ans-page .ms-cv-p { margin: 16px 0 0; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.ms-cv-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; margin: 18px 0 4px; padding: 14px 16px; background: color-mix(in srgb, var(--c) 6%, #fff); }
.ms-cv-bar-l { font-size: 13px; font-weight: 700; color: #6b7a72; }
.ms-cv-bar-t { position: relative; height: 10px; background: #eceeed; }
.ms-cv-bar-t i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--c); }
.ms-cv-bar.is-long .ms-cv-bar-t i { background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, #fff)); }
.ms-cv-bar-v { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--c); }
.ms-cv-dl { margin: 10px 0 0; }
.ms-cv-dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px dashed color-mix(in srgb, var(--c) 22%, #fff); }
.ms-cv-dl > div:first-child { border-top: 0; }
.ms-cv-dl dt { position: relative; padding-left: 24px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.ms-cv-dl dt::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); }
.ms-cv-dl .is-pro dt::after { content: ""; position: absolute; left: 5px; top: 8px; width: 6px; height: 3.5px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.ms-cv-dl .is-con dt::before { background: #eef0ef; }
.ms-cv-dl .is-con dt::after { content: "!"; position: absolute; left: 0; top: 3px; width: 17px; text-align: center; font-size: 11px; font-weight: 800; line-height: 17px; color: #8a978f; }
.ms-cv-dl .is-use dt::after { content: ""; position: absolute; left: 5px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ms-cv-dl .is-with { margin-top: 6px; padding: 14px 14px; border-top: 0; background: color-mix(in srgb, var(--c) 8%, #fff); }
.ms-cv-dl .is-with dt { color: var(--c); }
.ms-cv-dl .is-with dt::after { content: "+"; position: absolute; left: 0; top: 3px; width: 17px; text-align: center; font-size: 13px; font-weight: 800; line-height: 17px; color: var(--c); }
.tg-ans-page .ms-cv-dl dd { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) {
  .ms-cv-card { padding: 34px 18px 18px; } .ms-cv-pill { left: 16px; }
  .ms-cv-ico { width: 52px; height: 52px; } .ms-cv-ico::before { width: 30px; height: 30px; }
  .ms-cv h4 { font-size: 18px; }
  .ms-cv-bar { grid-template-columns: minmax(0, 1fr); }
  .ms-cv-dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* 약침 vs 매선 — 소제목과 카드 사이 간격 확대 */
.ms-cv { margin-top: 46px; }
@media (max-width: 760px) { .ms-cv { margin-top: 38px; } }
/* 약침 vs 매선 — 모든 폭에서 한 줄에 카드 하나 */
@media (min-width: 1100px) { .ms-cv { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
/* 약침+매선 병용 순서 — 그래프 아래 STEP 카드 3장 */
.ms-cs { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 18px; margin: 30px 0 0; padding: 0; counter-reset: none; }
@media (min-width: 1100px) { .ms-cs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-cs li { position: relative; padding: 34px 22px 22px; background: #fff; box-shadow: 0 10px 28px -16px rgba(30, 40, 35, .22), 0 0 0 1px color-mix(in srgb, var(--c) 22%, #fff); }
.ms-cs-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); padding: 8px 15px 6px; border-radius: 999px; background: var(--c); color: #fff; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .06em; box-shadow: 0 0 0 4px #fff; }
.ms-cs h4 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.tg-ans-page .ms-cs-sub { margin: 4px 0 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--c); word-break: keep-all; }
.tg-ans-page .ms-cs p:not(.ms-cs-sub) { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 25%, #fff); font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (min-width: 1100px) {
  .ms-cs li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; z-index: 1; width: 10px; height: 10px; border-top: 2px solid #b9c7bf; border-right: 2px solid #b9c7bf; transform: translateY(-50%) rotate(45deg); }
}
@media (max-width: 760px) { .ms-cs li { padding: 32px 18px 18px; } .ms-cs-pill { left: 16px; } }
/* 병용 그래프 v2 — 초안 형태(약침 반복 봉우리 + 매선 완만한 언덕, 그라데이션 면) */
.ms-curve.is-v2 { padding: 26px 20px 14px; }
.ms-curve.is-v2 svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 760px) { .ms-curve.is-v2 { padding: 18px 8px 10px; } }
.ms-curve-leg { display: none; }
.ms-curve.is-v2 + .pg-note { margin-top: 14px; }
@media (max-width: 760px) {
  .ms-curve.is-v2 .ms-curve-ax, .ms-curve.is-v2 .ms-curve-lab { display: none; }
  .ms-curve-leg { display: grid; gap: 6px; margin: 12px 8px 4px; }
  .ms-curve-leg span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tg-ink); word-break: keep-all; }
  .ms-curve-leg span::before { content: ""; flex: none; width: 18px; height: 4px; border-radius: 2px; }
  .ms-curve-leg .is-a::before { background: #d0612f; } .ms-curve-leg .is-b::before { background: #137a52; }
  .ms-curve-leg .is-x { font-size: 13px; font-weight: 400; color: var(--tg-ink-2); } .ms-curve-leg .is-x::before { display: none; }
}
.ms-curve.is-v2 .ms-curve-leg { display: none; }
@media (max-width: 760px) { .ms-curve.is-v2 .ms-curve-leg { display: grid; } }
@media (min-width: 761px) and (max-width: 1259px) {
  .ms-curve.is-v2 .ms-curve-ax, .ms-curve.is-v2 .ms-curve-lab { display: none; }
  .ms-curve.is-v2 .ms-curve-leg { display: grid; gap: 6px; margin: 12px 8px 4px; }
  .ms-curve-leg span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tg-ink); word-break: keep-all; }
  .ms-curve-leg span::before { content: ""; flex: none; width: 18px; height: 4px; border-radius: 2px; }
  .ms-curve-leg .is-a::before { background: #d0612f; } .ms-curve-leg .is-b::before { background: #137a52; }
  .ms-curve-leg .is-x { font-size: 13px; font-weight: 400; color: var(--tg-ink-2); } .ms-curve-leg .is-x::before { display: none; }
}
.ms-curve-leg .is-a::before { background: #FF5722; }
/* 통증매선 항목별 비교표 — 슬레이트 블루 */
.tile-tbl.is-slate { --tc: #3d5a80; }
/* 안전성 메타분석 — A안: 근거 블록 + 지표 막대 + 위험비 미니 도표 */
.ms-sf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 18px 0 0; }
@media (min-width: 900px) { .ms-sf { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 18px; } }
.ms-sf-src { display: flex; flex-direction: column; justify-content: center; padding: 30px 26px; background: #137a52; color: #fff; }
.ms-sf-k { align-self: flex-start; padding: 7px 13px 5px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.tg-ans-page .ms-sf-n { margin: 14px 0 0; font-family: "Poppins", sans-serif; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff; }
.ms-sf-n small { margin-left: 2px; font-size: 24px; }
.tg-ans-page .ms-sf-d { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .88); word-break: keep-all; text-wrap: pretty; }
.tg-ans-page .ms-sf-c { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .35); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.ms-sf-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.ms-sf-list li { padding: 18px 22px 16px; background: #fff; box-shadow: 0 10px 28px -18px rgba(30, 40, 35, .22), 0 0 0 1px #dfe9e3; }
.ms-sf-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ms-sf-hd b { font-size: 16px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.ms-sf-hd em { flex: none; font-style: normal; font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #137a52; }
.ms-sf-hd em small { margin-left: 2px; font-size: 15px; }
.ms-sf-bar { position: relative; display: block; height: 10px; margin: 12px 0 8px; background: #eef1ef; }
.ms-sf-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 4px; background: #137a52; }
.tg-ans-page .ms-sf-list p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.ms-sf-list li.is-rr .ms-sf-hd em { color: #3d5a80; }
.ms-sf-rr { position: relative; display: block; height: 46px; margin: 12px 0 4px; }
.ms-sf-rr::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: #e3e8e5; }
.ms-sf-rr .ci { position: absolute; top: 7px; left: var(--l); right: var(--r); height: 10px; background: rgba(61, 90, 128, .2); }
.ms-sf-rr .ref { position: absolute; left: 50%; top: 0; width: 0; height: 24px; border-left: 1.5px dashed #8a978f; }
.ms-sf-rr .pt { position: absolute; left: var(--x); top: 5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #3d5a80; box-shadow: 0 0 0 3px #fff; }
.ms-sf-rr .lb { position: absolute; top: 28px; font-size: 12.5px; font-weight: 600; color: #6b7a72; white-space: nowrap; }
.ms-sf-rr .lb.is-l { left: 20%; transform: translateX(-50%); } .ms-sf-rr .lb.is-r { right: 9.2%; transform: translateX(50%); } .ms-sf-rr .lb.is-ref { left: 50%; transform: translateX(-50%); color: #4c5a53; }
@media (max-width: 560px) { .ms-sf-src { padding: 24px 20px; } .tg-ans-page .ms-sf-n { font-size: 54px; } .ms-sf-list li { padding: 16px 16px 14px; } .ms-sf-rr .lb { font-size: 11.5px; } .ms-sf-rr .lb.is-ref { top: 28px; } }
/* 질환별 임상 연구 — A안: 근거 수준 배지 + 핵심 수치 결과 박스 */
.ms-stg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 18px 0 0; }
@media (min-width: 760px) and (max-width: 899px), (min-width: 1100px) { .ms-stg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-st { display: flex; flex-direction: column; padding: 24px 24px 18px; background: #fff; box-shadow: 0 10px 28px -18px rgba(30, 40, 35, .22), 0 0 0 1px color-mix(in srgb, var(--c) 18%, #fff); }
.ms-st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ms-st-bd { padding: 7px 12px 5px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); font-size: 13px; font-weight: 700; line-height: 1; color: var(--c); }
.ms-st-j { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; color: #6b7a72; }
.ms-st h3 { margin: 14px 0 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.tg-ans-page .ms-st-d { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.ms-st-box { flex: 1; display: flex; flex-direction: column; margin: 16px 0 0; padding: 16px 18px; background: color-mix(in srgb, var(--c) 7%, #fff); }
.ms-st-box.is-lim { background: #f5f6f5; }
.ms-st-k { align-self: flex-start; padding: 6px 11px 4px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.ms-st-box.is-lim .ms-st-k { background: #8a978f; }
.ms-st-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-family: "Poppins", "Pretendard", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--c); }
.ms-st-n small { font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--c) 75%, #fff); }
.tg-ans-page .ms-st-box p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--tg-ink); word-break: keep-all; text-wrap: pretty; }
.ms-st cite { margin-top: 12px; font-style: normal; font-size: 13px; font-weight: 600; color: #8a978f; }
@media (max-width: 760px) { .ms-st { padding: 20px 18px 16px; } .ms-st h3 { font-size: 19px; } .ms-st-n { font-size: 22px; } }
/* 질환별 임상 연구 — 출처 + 논문 원문 링크 */
.ms-st-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 22%, #fff); }
.ms-st-ft cite { margin: 0; font-size: 13px; line-height: 1.5; }
.tg-ans-page .ms-st-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ms-st-links a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 13px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); font-size: 13px; font-weight: 700; line-height: 1; color: var(--c); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.ms-st-links a::after { content: "→"; font-weight: 400; }
.ms-st-links a:hover { background: var(--c); color: #fff; }
.ms-sf-c a { margin-left: 6px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ms-sf-c a::after { content: " →"; }
.ms-refs .ms-ref-a { margin-left: 4px; font-weight: 700; color: var(--tg-med); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.ms-refs .ms-ref-a::after { content: " →"; }
/* 논문 링크 — 밑줄 제거 */
.ms-sf-c a, .ms-refs .ms-ref-a, .ms-st-links a { text-decoration: none; }
.ms-sf-c a:hover, .ms-refs .ms-ref-a:hover { text-decoration: none; opacity: .75; }
.tg-ans-page .ms-st-links a, .tg-ans-page .ms-sf-c a, .tg-ans-page .ms-refs .ms-ref-a { text-decoration: none !important; }
/* 근거의 한계 — 6개 카드(골드 톤, 번호 + 핵심 수치) */
.ms-lm { --c: #b5722a; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 18px 0 0; padding: 0; }
@media (min-width: 760px) and (max-width: 899px), (min-width: 1100px) { .ms-lm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-lm li { position: relative; display: flex; flex-direction: column; padding: 22px 24px 20px; background: #fff; box-shadow: 0 10px 28px -18px rgba(60, 40, 10, .22), 0 0 0 1px #efe2c9; overflow: hidden; }
.ms-lm-no { position: absolute; right: 16px; top: 6px; font-family: "Poppins", sans-serif; font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: rgba(181, 114, 42, .1); pointer-events: none; }
.ms-lm h4 { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding-right: 56px; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.ms-lm h4::before { content: "!"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fbf1e2; font-size: 13px; font-weight: 800; line-height: 1; color: var(--c); }
.ms-lm-k { display: flex; align-items: baseline; gap: 4px; margin: 12px 0 0 34px; font-family: "Poppins", "Pretendard", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--c); }
.ms-lm-k small { font-size: 14px; font-weight: 700; color: #a88454; }
.ms-lm-bar { position: relative; display: block; height: 8px; margin: 10px 0 0 34px; background: #f3ece0; }
.ms-lm-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--c); }
.tg-ans-page .ms-lm p { position: relative; margin: 10px 0 0 34px; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) { .ms-lm li { padding: 20px 18px 18px; } .ms-lm-no { font-size: 46px; } .ms-lm-k, .ms-lm-bar, .tg-ans-page .ms-lm p { margin-left: 0; } }
/* 안면 매선 임상 결과 타임라인 — 연도·점 확대 + 연도/선/카드 간격 확대 */
@media (min-width: 761px) {
  .ms-evl li { grid-template-columns: 104px minmax(0, 1fr); column-gap: 72px; }
  .ms-evl::before { left: 139px; }
  .ms-evl li::before { left: 128px; top: 7px; width: 22px; height: 22px; }
  .ms-evl-yr { padding-top: 0; font-size: 32px; letter-spacing: -.02em; }
}
.ms-evl li.is-null::before { box-shadow: 0 0 0 4px #fff, inset 0 0 0 3px var(--c); }
.ms-evl li.is-ongoing::before { outline-width: 3px; outline-offset: -3px; }
@media (max-width: 760px) {
  .ms-evl::before { left: 10px; }
  .ms-evl li { padding-left: 40px; }
  .ms-evl li::before { left: 1px; top: 3px; width: 20px; height: 20px; }
  .ms-evl-yr { font-size: 26px; }
}
/* 임상 결과 타임라인 — 연도 추가 확대 (32→40px) */
@media (min-width: 761px) {
  .ms-evl li { grid-template-columns: 132px minmax(0, 1fr); }
  .ms-evl::before { left: 167px; }
  .ms-evl li::before { left: 157px; top: 11px; }
  .ms-evl-yr { font-size: 40px; }
}
@media (max-width: 760px) { .ms-evl-yr { font-size: 32px; } .ms-evl li::before { top: 8px; } }
/* 임상 결과 타임라인 — 소제목과 간격 확대 */
.ms-evl { margin-top: 46px; }
@media (max-width: 760px) { .ms-evl { margin-top: 34px; } }
/* 상열하한 부위별 증상 지도 — 머리행 점 확대 + 흰 테두리 */
.ad-map .ad-dot.is-heat, .ad-map .ad-dot.is-cold { width: 15px; height: 15px; margin-right: 10px; vertical-align: -2px; box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(0, 0, 0, .25); }
.ad-map .ad-dot.is-heat { background: #e0282e; }
/* 자율신경실조증 진료의 순서 — 화살표 위/아래 지그재그 (홀수 단계 위, 짝수 단계 아래) */
@media (min-width: 760px) {
  .adp { grid-template-rows: auto 88px auto; row-gap: 0; }
  .adp > li { display: contents; }
  .adp-h { grid-row: 2; }
  .adp > li + li .adp-h { margin-left: -14px; }
  .adp > li:nth-child(1) > * { grid-column: 1; } .adp > li:nth-child(2) > * { grid-column: 2; }
  .adp > li:nth-child(3) > * { grid-column: 3; } .adp > li:nth-child(4) > * { grid-column: 4; }
  .adp > li:nth-child(odd) p { grid-row: 1; align-self: end; margin: 0 0 18px; }
  .adp > li:nth-child(even) p { grid-row: 3; align-self: start; margin: 18px 0 0; }
  .adp > li + li p { margin-left: -14px; }
  .adp p { position: relative; padding: 0 16px 0 30px; }
  .adp > li:first-child p { padding-left: 16px; }
  .adp > li:nth-child(odd) p::after, .adp > li:nth-child(even) p::before { content: ""; position: absolute; left: 30px; width: 0; height: 12px; border-left: 1.5px dashed #b8cfc3; }
  .adp > li:first-child p::after { left: 16px; }
  .adp > li:nth-child(odd) p::after { bottom: -16px; }
  .adp > li:nth-child(even) p::before { top: -16px; }
}
/* 혀통증 설진 — "설진기에서 읽어내는 것 / 설질 색" 오른쪽 열 안으로, 위아래로 쌓기 */
#hx-dx .hx-split-bd > .ta-two { grid-template-columns: minmax(0, 1fr); gap: 52px; margin-top: 56px; }
/* 혀통증 설진맵 v2 — 오른쪽 칸 안, 탭 3개 + 번호 점 + 이름 목록 */
#hx-dx .hx-split-bd > .tmap-hd { margin-top: 64px; }
.tm2 { --c: #6a55b8; margin-top: 22px; }
.tm2-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.tm2-tab { padding: 12px 8px 10px; border: 1px solid #ddd6f0; border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--tg-ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tm2-tab:hover { border-color: var(--c); color: var(--c); }
.tm2-tab.is-on { border-color: var(--c); background: var(--c); color: #fff; }
.tm2-tab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.tm2-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
@media (min-width: 640px) { .tm2-pane { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); gap: 28px; } }
.tm2-pane[hidden] { display: none; }
.tm2-fig { margin: 0; }
.tm2-face { position: relative; max-width: 420px; margin: 0 auto; }
.tm2-face img { display: block; width: 100%; height: auto; }
.tm2-dot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(0, 0, 0, .3); font-style: normal; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; transition: transform .2s; --pcA: rgba(106, 85, 184, .55); --pcZ: rgba(106, 85, 184, 0); }
.tm2-dot.is-on { transform: scale(1.35); animation: fpPulse1 1.6s ease-out infinite; }
.tm2-side { display: flex; flex-direction: column; gap: 14px; }
.tg-ans-page .tm2-ttl { margin: 0; font-size: 19px; font-weight: 700; color: var(--c); }
.tm2-leg { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.tm2-leg li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; box-shadow: 0 0 0 1px #e6e1f3; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tg-ink); cursor: pointer; transition: background .2s, box-shadow .2s; }
.tm2-leg li b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 700; line-height: 1; color: #fff; }
.tm2-leg li:hover, .tm2-leg li.is-on { background: #f3f0fb; box-shadow: 0 0 0 1px var(--c); }
@media (prefers-reduced-motion: reduce) { .tm2-dot.is-on { animation: none; } }
@media (max-width: 639px) { .tm2-face { max-width: 300px; } .tm2-dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10.5px; } .tm2-tab { font-size: 14px; padding: 11px 4px 9px; } .tm2-leg li { font-size: 14px; padding: 9px 10px; } }
#hx-dx .hx-split-bd > .tmap-note { margin-top: 18px; }
/* 설진맵 v2 — 이미지 축소 */
.tm2-face { max-width: 300px; }
@media (min-width: 640px) { .tm2-pane { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } }
@media (max-width: 639px) { .tm2-face { max-width: 230px; } }
/* 혀통증 설진맵 v3 — 이미지 3장 나란히(내부 장기 → 중추신경계 → 혈관·림프계) + 알약 이름표 연결선 */
.tm3 { --ink: #2b2f5a; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 26px; }
@media (min-width: 1100px) { .tm3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.tm3-fig { margin: 0; }
.tm3-cap { display: table; margin: 0 auto 14px; padding: 9px 20px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.tm3-face { position: relative; max-width: 360px; margin: 0 auto; }
.tm3-img { position: relative; width: 62%; margin: 0 auto; }
.tm3-img img { display: block; width: 100%; height: auto; }
.tm3-lines { position: absolute; inset: 0; z-index: 2; overflow: visible; pointer-events: none; }
.tm3-lines polyline { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.tm3-dot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 3; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.tm3-lab { position: absolute; top: calc(var(--y) * 1%); z-index: 4; transform: translateY(-50%); padding: 6px 10px 4px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; }
.tm3-lab.is-l { left: 0; } .tm3-lab.is-r { right: 0; }
.tm3-leg { list-style: none; display: flex; justify-content: center; gap: 14px; margin: 12px 0 0; padding: 0; }
.tm3-leg li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.tm3-leg li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.tm3-leg .is-a::before { background: #e53935; } .tm3-leg .is-v::before { background: #1e66d0; } .tm3-leg .is-l::before { background: #43a047; }
@media (min-width: 1100px) and (max-width: 1399px) { .tm3-lab { font-size: 11.5px; padding: 5px 8px 3px; } .tm3-img { width: 60%; } }
/* 설진맵 v3 — 이미지 확대 */
.tm3 { gap: 40px; }
.tm3-face { max-width: 400px; }
.tm3-img { width: 70%; }
@media (min-width: 1100px) { .tm3 { gap: 10px; } .tm3-img { width: 72%; } }
@media (min-width: 1100px) and (max-width: 1399px) { .tm3-img { width: 72%; } }
/* 설진맵 v3 — 혀 조금 더 확대 */
.tm3-img { width: 76%; }
@media (min-width: 1100px) { .tm3 { gap: 6px; } .tm3-img { width: 78%; } .tm3-lab { font-size: 11.5px; padding: 5px 8px 3px; } }
@media (min-width: 1100px) and (max-width: 1399px) { .tm3-img { width: 68%; } }
/* 설진맵 v3 — 연결선·점 색 변경(보라) */
.tm3-lines polyline { stroke: #7b68c8; stroke-width: 1.4; }
.tm3-dot { background: #6a55b8; }
/* 설진맵 중추신경계 — 혀 안 알약 이름표 */
.tm3-in { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 3; transform: translate(-50%, -50%); padding: 7px 12px 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 3px 8px rgba(30, 30, 70, .2); font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; }
.tm3-in.is-spine { background: var(--ink); color: #fff; }
@media (min-width: 1100px) and (max-width: 1399px) { .tm3-in { font-size: 11.5px; padding: 6px 9px 4px; } }
/* 중추신경계 혀 안 알약 — 다른 이름표와 같은 크기·여백 */
.tm3-in { padding: 6px 10px 4px; font-size: 12.5px; }
@media (min-width: 1100px) { .tm3-in { padding: 5px 8px 3px; font-size: 11.5px; } }
/* 설진맵 — 위쪽 내용과 간격 확대 */
#hx-dx .hx-split-bd > .tmap-hd { margin-top: 110px; }
@media (max-width: 760px) { #hx-dx .hx-split-bd > .tmap-hd { margin-top: 76px; } }
.ta-page #hx-dx .hx-split-bd > .ta-sub.is-first.tmap-hd { margin-top: 110px; }
@media (max-width: 760px) { .ta-page #hx-dx .hx-split-bd > .ta-sub.is-first.tmap-hd { margin-top: 76px; } }
/* 설진맵 소제목 — 다른 소제목(설질 색이 말해주는 것)과 같은 간격·폭 */
.ta-page #hx-dx .tmap-hd .ta-sub-p { display: block; margin: 24px 0 0; max-width: none; }
.ta-page #hx-dx .hx-split-bd > .ta-sub.is-first.tmap-hd { margin-bottom: 16px; }
.tmap-hd + .tm3 { margin-top: 0; }
/* 혀통증 tg-ans 콜아웃 — 알약 → 직사각형, 앞쪽(tg-type) 콜아웃과 같은 구성 + 상단 라인·배경, 와인 계열 색 */
.ta-page #tg-ans .hx-split-bd .rx-callout.ta-callout { padding: 16px 20px; border: 0; border-top: 2px solid #82485c; border-radius: 0; background: #f7eff2; text-align: left; }
@media (max-width: 899px) { .ta-page #tg-ans .hx-split-bd .rx-callout.ta-callout { padding: 16px 18px; border-radius: 0; } }
/* 설진맵 — 위 내용과 간격 조정 (110 → 72) */
.ta-page #hx-dx .hx-split-bd > .ta-sub.is-first.tmap-hd { margin-top: 72px; }
@media (max-width: 760px) { .ta-page #hx-dx .hx-split-bd > .ta-sub.is-first.tmap-hd { margin-top: 56px; } }
.ta-page #hx-dx .hx-split-bd > .ta-sub.is-first.tmap-hd { margin-top: 56px; }
@media (max-width: 760px) { .ta-page #hx-dx .hx-split-bd > .ta-sub.is-first.tmap-hd { margin-top: 44px; } }
/* 설진기로 기록한 실제 혀 — 제목 왼쪽 정렬(사진 줄 왼쪽 끝과 맞춤) */
#hx-dx .dx-real-hd { align-items: flex-start; text-align: left; }
#hx-dx .dx-real-hd .hx-eyebrow { justify-content: flex-start; text-align: left; }
/* 설진기로 기록한 실제 혀 — 메인 칼럼처럼 좌측 타이틀 / 우측 슬라이드 (페이지 좌우 칸 폭과 동일) */
@media (min-width: 900px) {
  #hx-dx .dx-real { display: grid; grid-template-columns: 33.55% minmax(0, 1fr); column-gap: 40px; align-items: center; }
  #hx-dx .dx-real-hd { margin: 0; }
  #hx-dx .dx-real-hd h3 { font-size: 30px; line-height: 1.35; word-break: keep-all; }
}
@media (min-width: 1100px) { #hx-dx .dx-real { grid-template-columns: 27.9% minmax(0, 1fr); column-gap: 52px; } }
/* 옴니핏 결과서 예시 — 각진 사각형 */
.ta-page #hx-dx .om-report, .ta-page #hx-dx .om-report img { border-radius: 0; }
/* 실제 혀 — 타이틀을 슬라이드 위쪽에 맞춤 */
@media (min-width: 900px) { #hx-dx .dx-real { align-items: start; } #hx-dx .dx-real-hd { padding-top: 6px; } }
/* 실제 혀 슬라이드 — 페이드 제거, 5장씩 보이며 한 장씩 순차 이동 */
#hx-dx .dx-real-track { --n: 5; --g: 14px; container-type: inline-size; gap: var(--g); -webkit-mask-image: none; mask-image: none; padding: 6px 0 12px; }
#hx-dx .dx-real-list { gap: var(--g); animation: none !important; transition: transform .8s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
#hx-dx .dx-real-list li { width: calc((100cqw - (var(--n) - 1) * var(--g)) / var(--n)); height: auto; aspect-ratio: 1; }
@media (max-width: 899px) { #hx-dx .dx-real-track { --n: 3; --g: 12px; } }
@media (max-width: 899px) { #hx-dx .dx-real-hd h3 br { display: none; } }
/* 실제 혀 섹션만 — 오른쪽 슬라이드 폭 확대 */
@media (min-width: 900px) { #hx-dx .dx-real { grid-template-columns: 26% minmax(0, 1fr); column-gap: 32px; } }
@media (min-width: 1100px) { #hx-dx .dx-real { grid-template-columns: 20% minmax(0, 1fr); column-gap: 40px; } }
/* 실제 혀 — 타이틀 아래 점 페이지 버튼(메인 칼럼과 동일 형태) */
#hx-dx .dx-real-dots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
#hx-dx .dx-real-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(19, 122, 82, .25); cursor: pointer; transition: background .2s, width .2s; }
#hx-dx .dx-real-dots button.on { width: 28px; border-radius: 999px; background: var(--tg-med); }
#hx-dx .dx-real-dots button:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 2px; }
@media (max-width: 899px) { #hx-dx .dx-real-dots { margin: 14px 0 0; } }
/* 실제 혀 — 사진 간격 조금 넓힘 */
#hx-dx .dx-real-track { --g: 22px; }
@media (max-width: 899px) { #hx-dx .dx-real-track { --g: 16px; } }
/* 실제 혀(혀통증) — 원 사진 그림자 제거 */
#hx-dx .dx-real-list li { box-shadow: none; }
.gj-real .dx-real-list li { box-shadow: none; }
/* 2026-10-02 혀통증 치료 조합 흐름 — A안: 아이콘 원 타임라인 + 걸친 라벨 카드 (.txa, 이 섹션 전용) */
.txa { margin: 0 0 48px; container-type: inline-size; }
.txa-row { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.txa-row::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 40px; width: 2px; background: linear-gradient(180deg, #5b5fa8, #137a52 33%, #b23a48 66%, #e0662b); }
.txa-step { position: relative; display: flex; align-items: flex-start; gap: 22px; }
.txa-ic { position: relative; z-index: 1; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 7px var(--cs); }
.txa-ic::before { content: ""; position: absolute; inset: 16px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.txa-step.is-core .txa-ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); opacity: .45; z-index: -1; animation: txaPulse 2.2s ease-out infinite; }
@keyframes txaPulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.65); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .txa-step.is-core .txa-ic::after { animation: none; display: none; } }
.txa-card { position: relative; flex: 1; min-width: 0; padding: 26px 18px 18px; background: #fff; border: 1px solid var(--cb); box-shadow: 0 10px 28px -16px rgba(20, 32, 27, .35); }
.txa-pill { position: absolute; top: 0; left: 16px; transform: translateY(-50%); padding: 6px 12px 4px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .05em; white-space: nowrap; }
.txa-card b { display: block; font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--tg-ink); word-break: keep-all; }
.txa-card b a { color: inherit; text-decoration: none !important; border: 0; }
.txa-card b a:hover { opacity: .8; }
.txa-card p { margin: 6px 0 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.txa-plus { display: inline-block; margin-top: 12px; padding: 6px 12px 4px; border-radius: 999px; background: var(--cs); color: var(--c); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none !important; }
.txa-plus:hover { background: var(--c); color: #fff; }
.txa-step.is-core .txa-card { background: var(--c); border-color: var(--c); box-shadow: 0 14px 30px -14px rgba(178, 58, 72, .55); }
.txa-step.is-core .txa-pill { background: var(--cd); }
.txa-step.is-core .txa-card b { color: #fff; }
.txa-step.is-core .txa-card p { color: rgba(255, 255, 255, .88); }
/* 넓을 때 — 가로 4단 타임라인, 카드 가운데 정렬, 핵심 축 원을 크게 */
@container (min-width: 860px) {
  .txa-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .txa-row::before { left: 12.5%; right: 12.5%; top: 31px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #5b5fa8, #137a52 33%, #b23a48 66%, #e0662b); }
  .txa-step { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .txa-step.is-core .txa-ic { width: 76px; height: 76px; margin-top: -6px; box-shadow: 0 0 0 8px var(--cs); }
  .txa-step.is-core .txa-ic::before { inset: 19px; }
  .txa-card { width: 100%; margin-top: 34px; padding: 30px 16px 20px; }
  .txa-step.is-core .txa-card { margin-top: 28px; }
  .txa-pill { left: 50%; transform: translate(-50%, -50%); }
}
.txa-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 26px; padding: 16px 20px; background: #f2f4f3; font-size: 15px; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.txa-loop-ic { flex: none; width: 22px; height: 22px; background: var(--tg-med); -webkit-mask: url('/assets/images/icons/rx-cycle.png?v=1') center / contain no-repeat; mask: url('/assets/images/icons/rx-cycle.png?v=1') center / contain no-repeat; }
.txa-loop b { font-size: 16px; font-weight: 600; color: var(--tg-ink); }
.txa-loop > span:last-child { flex: 1 1 260px; }
@media (max-width: 560px) {
  .txa-row::before { left: 25px; top: 26px; }
  .txa-ic { width: 52px; height: 52px; box-shadow: 0 0 0 6px var(--cs); }
  .txa-ic::before { inset: 13px; }
  .txa-step { gap: 16px; }
  .txa-card { padding: 24px 16px 16px; }
  .txa-card b { font-size: 16px; }
  .txa-loop { padding: 14px 16px; }
}
/* .txa 세로 배치 — 연결선을 단계별 구간으로 나눠 마지막 아이콘에서 끝나게 (단계 색) */
.txa-row::before { display: none; }
.txa-step:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: -58px; width: 2px; background: var(--c); opacity: .55; }
@media (max-width: 560px) { .txa-step:not(:last-child)::before { left: 25px; top: 26px; bottom: -52px; } }
@container (min-width: 860px) {
  .txa-row::before { display: block; }
  .txa-step:not(:last-child)::before { display: none; }
}
/* 2026-10-02 금진옥액 — 상단 이미지: 혀밑 설하정맥 위 금진·옥액 혈자리 표시 (점 + 라벨) */
.gj-page .gj-hero-map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.gj-page .gj-hero-map img { width: 100%; height: 100%; object-fit: cover; }
.gj-page .gj-pt { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #d42c3c; box-shadow: 0 0 0 3px #fff; animation: gjPtPulse 1.8s ease-out infinite; z-index: 2; }
@keyframes gjPtPulse { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(212,44,60,.6); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 20px rgba(212,44,60,0); } }
.gj-page .gj-pt-lab { position: absolute; top: 57%; transform: translateY(-50%); z-index: 2; display: flex; align-items: baseline; gap: 6px; padding: 8px 14px 6px; border-radius: 999px; background: #fff; color: #8a2430; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 8px 20px rgba(40,10,14,.22); }
.gj-page .gj-pt-lab b { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #d42c3c; }
.gj-page .gj-pt-lab::after { content: ""; position: absolute; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: #fff; }
.gj-page .gj-pt-lab.is-l { right: calc(62.5% + 22px); }
.gj-page .gj-pt-lab.is-l::after { left: 100%; }
.gj-page .gj-pt-lab.is-r { left: calc(62% + 22px); }
.gj-page .gj-pt-lab.is-r::after { right: 100%; }
.gj-page .gj-pt-note { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 6px 12px 4px; border-radius: 999px; background: rgba(20, 32, 27, .62); color: #fff; font-size: 12.5px; line-height: 1.2; white-space: nowrap; }
@media (max-width: 560px) {
  .gj-page .gj-pt { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
  .gj-page .gj-pt-lab { gap: 4px; padding: 6px 10px 4px; font-size: 13px; }
  .gj-page .gj-pt-lab b { font-size: 11px; }
  .gj-page .gj-pt-lab::after { width: 12px; }
  .gj-page .gj-pt-lab.is-l { right: calc(62.5% + 16px); }
  .gj-page .gj-pt-lab.is-r { left: calc(62% + 16px); }
  .gj-page .gj-pt-note { bottom: 8px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .gj-page .gj-pt { animation: none; } }
/* 금진옥액 상단 — 도해 이미지로 교체(2026-10-02): 점 좌표에 맞춘 라벨 위치 */
.gj-page .gj-pt-lab { top: 52.5%; }
.gj-page .gj-pt-lab.is-l { right: calc(57.7% + 22px); }
.gj-page .gj-pt-lab.is-r { left: calc(58% + 22px); }
.gj-page .gj-pt-lab::after { background: #8a2430; opacity: .55; }
@media (max-width: 560px) { .gj-page .gj-pt-lab.is-l { right: calc(57.7% + 16px); } .gj-page .gj-pt-lab.is-r { left: calc(58% + 16px); } }
/* 금진옥액 상단 도해 — 테두리·그림자 없이 이미지만 (2026-10-02) */
.gj-page .hx-lead .ad-hero { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
/* 혀통증 치료 흐름(A안) — 연결선 1px (2026-10-02) */
.txa-row::before { width: 1px; }
.txa-step:not(:last-child)::before { width: 1px; }
@container (min-width: 860px) { .txa-row::before { width: auto; height: 1px; top: 31.5px; } }
/* 금진옥액 상단 도해 정리(2026-10-02) — 점은 다른 지도와 같은 12px, 라벨은 그림 밖 여백 + 연결선, 안내는 이미지 아래로 */
.gj-page .gj-pt { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px #fff; animation-name: gjPtPulse2; }
@keyframes gjPtPulse2 { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(212,44,60,.55); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 13px rgba(212,44,60,0); } }
.gj-page .gj-pt-lab::after { display: none; }
.gj-page .gj-pt-lab.is-l { left: 0; right: auto; }
.gj-page .gj-pt-lab.is-r { right: 0; left: auto; }
.gj-page .gj-pt-ln { position: absolute; top: 52.5%; z-index: 1; height: 1px; margin-top: -.5px; background: #8a2430; opacity: .5; }
.gj-page .gj-pt-ln.is-l { left: 6%; width: 36.3%; }
.gj-page .gj-pt-ln.is-r { left: 58%; right: 6%; }
.gj-page .gj-hero-map + .gj-pt-note { position: static; transform: none; display: table; margin: 18px auto 0; }
@media (max-width: 560px) {
  .gj-page .gj-pt { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .gj-page .gj-hero-map + .gj-pt-note { margin-top: 12px; }
}
/* 금진옥액 상단 도해 — 그림을 80%로 줄여 양옆 여백 확보, 라벨은 그림 밖·퀵메뉴(우측 고정) 안쪽에 */
.gj-page .gj-hero-map img { object-fit: contain; padding: 0 10%; box-sizing: border-box; }
.gj-page .gj-pt-lab { top: 52%; }
.gj-page .gj-pt-ln { top: 52%; }
.gj-page .gj-pt-lab.is-l { left: 13%; }
.gj-page .gj-pt-lab.is-r { right: 13%; }
.gj-page .gj-pt-ln.is-l { left: 15%; width: 28.84%; }
.gj-page .gj-pt-ln.is-r { left: 56.4%; right: 15%; }
@media (max-width: 760px) {
  .gj-page .gj-pt-lab.is-l { left: 0; }
  .gj-page .gj-pt-lab.is-r { right: 0; }
  .gj-page .gj-pt-ln.is-l { left: 3%; width: 40.84%; }
  .gj-page .gj-pt-ln.is-r { right: 3%; }
}
/* 금진옥액 상단 라벨 — 그림자가 잘리지 않게: 이미지 영역 overflow 해제 + 모바일 라벨 안쪽으로 */
.gj-page .hx-lead .ad-hero, .gj-page .gj-hero-map { overflow: visible; }
@media (max-width: 760px) {
  .gj-page .gj-pt-lab.is-l { left: 4%; }
  .gj-page .gj-pt-lab.is-r { right: 4%; }
  .gj-page .gj-pt-ln.is-l { left: 6%; width: 37.84%; }
  .gj-page .gj-pt-ln.is-r { right: 6%; }
}
/* 금진옥액 상단 도해 — 그림 원래 크기로 복원, 라벨은 입술 바깥 여백(퀵메뉴 앞)에 맞춰 조금 작게 */
.gj-page .gj-hero-map img { object-fit: cover; padding: 0; }
.gj-page .gj-pt-lab { top: 52.5%; gap: 5px; padding: 7px 12px 5px; font-size: 14px; }
.gj-page .gj-pt-lab b { font-size: 11px; }
.gj-page .gj-pt-ln { top: 52.5%; }
.gj-page .gj-pt-lab.is-l { left: 12.5%; }
.gj-page .gj-pt-lab.is-r { right: 12.5%; }
.gj-page .gj-pt-ln.is-l { left: 14%; width: 28.35%; }
.gj-page .gj-pt-ln.is-r { left: 58.12%; right: 14%; }
@media (max-width: 760px) {
  .gj-page .gj-pt-lab { padding: 6px 10px 4px; font-size: 13px; }
  .gj-page .gj-pt-lab.is-l { left: 3%; }
  .gj-page .gj-pt-lab.is-r { right: 3%; }
  .gj-page .gj-pt-ln.is-l { left: 6%; width: 36.35%; }
  .gj-page .gj-pt-ln.is-r { right: 6%; }
}
/* 금진옥액 상단 라벨 — 조금 바깥으로 (데스크톱) */
@media (min-width: 761px) {
  .gj-page .gj-pt-lab.is-l { left: 8.5%; }
  .gj-page .gj-pt-lab.is-r { right: 8.5%; }
  .gj-page .gj-pt-ln.is-l { left: 10%; width: 32.35%; }
  .gj-page .gj-pt-ln.is-r { right: 10%; }
}
/* 2026-10-02 금진옥액 — "혀를 들어 올린 아래 모습": 도해 번호 점 + 혈자리 카드(금진=금색, 옥액=옥색) */
.gj-page .gj-anat2 { gap: 22px; margin-bottom: 34px; }
@media (min-width: 760px) { .gj-page .gj-anat2 { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 34px; } }
.gj-page .gj-anat2 .gj-anat-pic { position: relative; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
.gj-page .gj-ad { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; animation: gjAdPulse 2.2s ease-out infinite; }
@keyframes gjAdPulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 14px color-mix(in srgb, var(--c) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .gj-page .gj-ad { animation: none; } }
.gj-page .gj-anat2 .gj-anat-txt { display: grid; gap: 26px; }
.gj-page .gj-acard { position: relative; overflow: hidden; padding: 26px 20px 18px; background: #fff; border: 1px solid var(--cb); box-shadow: 0 10px 28px -16px rgba(20, 32, 27, .35); }
.gj-page .gj-acard-pill { position: absolute; top: 0; left: 16px; transform: translateY(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 4px 6px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; }
.gj-page .gj-acard { overflow: visible; }
.gj-page .gj-acard-pill i { display: grid; place-items: center; width: 18px; height: 18px; margin-top: -2px; border-radius: 50%; background: #fff; color: var(--c); font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; }
.gj-page .gj-acard-wm { position: absolute; right: 14px; bottom: -6px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 78px; font-weight: 700; line-height: 1; color: var(--c); opacity: .09; pointer-events: none; }
.gj-page .gj-acard b { display: block; font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--tg-ink); }
.gj-page .gj-acard em { display: block; margin-top: 2px; font-style: normal; font-size: 15px; font-weight: 500; color: var(--c); }
.gj-page .gj-acard p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.gj-page .gj-acard p strong { color: var(--c); font-weight: 700; }
.gj-page .gj-anat-note { margin: 0; padding: 14px 16px; background: #f2f4f3; font-size: 14px !important; line-height: 1.7 !important; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) {
  .gj-page .gj-ad { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; font-size: 10px; }
  .gj-page .gj-acard { padding: 24px 16px 16px; }
  .gj-page .gj-acard b { font-size: 16px; }
  .gj-page .gj-acard-wm { font-size: 64px; }
}
.gj-page .gj-acard-wm { right: 16px; bottom: 10px; font-size: 60px; line-height: .9; opacity: .1; }
@media (max-width: 560px) { .gj-page .gj-acard-wm { font-size: 52px; } }
.gj-page .gj-acard p { line-height: 1.75; }
/* 금진옥액 "혀를 들어 올린 아래 모습" — 왼쪽: 도해 + 혈자리 카드(이미지 아래), 오른쪽: 본문 */
.gj-page .gj-anat2 { align-items: start; }
.gj-page .gj-anat-l { display: grid; gap: 34px; min-width: 0; }
.gj-page .gj-anat-r { min-width: 0; }
.gj-page .gj-anat-r .ad-prose { margin: 0; }
.gj-page .gj-anat-r .ad-prose p:first-child { margin-top: 0; }
.gj-page .gj-anat-r .gj-anat-note { margin-top: 22px; }
@media (max-width: 759px) { .gj-page .gj-anat-l { gap: 30px; } }
.gj-page .gj-anat-r .gj-quote { margin: 30px 0 0; }
/* 2026-10-02 금진옥액 — 설하정맥으로 읽는 혈어증: 정상 | 검사 항목 | 혈어증 3열 비교 (원고 구조) */
.gj-page .gj-vcmp-wrap { margin: 6px 0 30px; border: 1px solid #dfe6e2; box-shadow: 0 10px 28px -16px rgba(20, 32, 27, .3); overflow-x: auto; }
.gj-page .gj-vcmp { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
.gj-page .gj-vcmp col, .gj-page .gj-vcmp th.is-mid, .gj-page .gj-vcmp tbody th { width: 128px; }
.gj-page .gj-vcmp th, .gj-page .gj-vcmp td { padding: 16px 18px; border: 0; border-top: 1px solid #e3e9e5; text-align: center; vertical-align: middle; font-size: 15px; line-height: 1.6; word-break: keep-all; }
.gj-page .gj-vcmp thead th { border-top: 0; padding: 24px 16px 18px; font-weight: 400; }
.gj-page .gj-vcmp thead th.is-ok { background: #f1f6f3; }
.gj-page .gj-vcmp thead th.is-ng { background: #f6ebea; }
.gj-page .gj-vcmp thead th.is-mid { background: #17251f; color: #d9b26a; font-size: 14px; font-weight: 600; letter-spacing: .12em; }
.gj-page .gj-vcmp thead svg { display: block; width: 96px; height: auto; margin: 14px auto 0; }
.gj-page .gj-vcmp-badge { display: inline-block; padding: 8px 16px 6px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; }
.gj-page .gj-vcmp .is-ok .gj-vcmp-badge { background: #e1efe7; color: #0f6544; }
.gj-page .gj-vcmp .is-ng .gj-vcmp-badge { background: #8a2a33; color: #fff; }
.gj-page .gj-vcmp tbody th { background: #f5f7f6; color: var(--tg-ink); font-size: 15px; font-weight: 600; border-left: 1px solid #e3e9e5; border-right: 1px solid #e3e9e5; }
.gj-page .gj-vcmp tbody td.is-ok { background: #fff; color: var(--tg-ink-2); }
.gj-page .gj-vcmp tbody td.is-ng { background: #f8efee; color: #5a3a3a; }
.gj-page .gj-vcmp td b { font-weight: 700; color: inherit; }
.gj-page .gj-vcmp td.is-ok b { color: var(--tg-ink); }
.gj-page .gj-vcmp td small { font-size: 14px; color: var(--tg-mute, #6b7a73); }
.gj-page .gj-sw { display: inline-block; width: 28px; height: 13px; margin: 0 8px 0 0; border-radius: 999px; background: var(--sw); vertical-align: -1px; }
@media (max-width: 560px) {
  .gj-page .gj-vcmp th.is-mid, .gj-page .gj-vcmp tbody th { width: 70px; }
  .gj-page .gj-vcmp th, .gj-page .gj-vcmp td { padding: 12px 8px; font-size: 14px; line-height: 1.55; }
  .gj-page .gj-vcmp thead th { padding: 16px 8px 14px; }
  .gj-page .gj-vcmp thead th.is-mid { font-size: 12.5px; letter-spacing: .04em; }
  .gj-page .gj-vcmp tbody th { font-size: 13.5px; }
  .gj-page .gj-vcmp thead svg { width: 64px; margin-top: 10px; }
  .gj-page .gj-vcmp-badge { padding: 7px 10px 5px; font-size: 12.5px; letter-spacing: 0; }
  .gj-page .gj-sw { display: block; margin: 0 auto 6px; width: 24px; height: 11px; }
  .gj-page .gj-vcmp td small { display: block; font-size: 12.5px; }
}
.gj-page .gj-cmp + .gj-vcmp-wrap { margin-top: 28px; }
/* 혈어증 비교표 — 머리칸에 실제 사진 (2026-10-02) */
.gj-page .gj-vcmp-wrap { margin-top: 6px; }
.gj-page .gj-vcmp thead th.is-ok, .gj-page .gj-vcmp thead th.is-ng { padding: 22px 18px 18px; vertical-align: top; }
.gj-page .gj-vcmp thead img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 14px 0 0; }
@media (max-width: 560px) {
  .gj-page .gj-vcmp thead th.is-ok, .gj-page .gj-vcmp thead th.is-ng { padding: 14px 6px 8px; }
  .gj-page .gj-vcmp thead img { margin-top: 10px; aspect-ratio: 1 / 1; }
}
/* 혈어증 비교표 — 머리칸 사진을 혀밑만 확대한 원형으로 (표가 중심이 되게) */
.gj-page .gj-vcmp thead th.is-ok, .gj-page .gj-vcmp thead th.is-ng { padding: 24px 16px 22px; vertical-align: middle; }
.gj-page .gj-vcmp-pic { display: block; width: 148px; height: 148px; margin: 16px auto 0; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: #2a1a17; }
.gj-page .gj-vcmp thead .gj-vcmp-pic img { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; transform: scale(1.75); transform-origin: 50% 55%; }
@media (max-width: 560px) {
  .gj-page .gj-vcmp thead th.is-ok, .gj-page .gj-vcmp thead th.is-ng { padding: 16px 6px 14px; }
  .gj-page .gj-vcmp-pic { width: 86px; height: 86px; margin-top: 10px; border-width: 2px; }
}
/* 2026-10-02 금진옥액 원장 인용 — 왼쪽 굵은 선·둥근 모서리 제거, 각진 박스 + 걸친 이름 알약 + 따옴표 워터마크 */
.gj-page .gj-quote { position: relative; margin-top: 40px; padding: 34px 28px 26px; background: #f3f7f5; border: 1px solid rgba(19, 122, 82, .14); border-radius: 0; box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .gj-anat-r .gj-quote { margin-top: 40px; }
.gj-page .gj-quote::before { content: "\201C"; position: absolute; right: 18px; top: 4px; font-family: 'Noto Serif KR', Georgia, serif; font-size: 112px; font-weight: 700; line-height: 1; color: var(--tg-med); opacity: .12; pointer-events: none; }
.gj-page .gj-quote p { position: relative; padding-right: 44px; font-size: 19px; font-weight: 600; line-height: 1.55; letter-spacing: -.02em; color: var(--tg-ink); }
.gj-page .gj-quote span { margin-top: 12px; font-size: 15.5px; line-height: 1.8; }
.gj-page .gj-quote span b { color: var(--tg-med); }
.gj-page .gj-quote cite { position: absolute; top: 0; left: 22px; transform: translateY(-50%); margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 5px 10px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }
.gj-page .gj-quote cite::before { content: ""; width: 14px; height: 14px; margin-top: -2px; background: #fff; -webkit-mask: url('/assets/images/icons/rx-person.png?v=1') center / contain no-repeat; mask: url('/assets/images/icons/rx-person.png?v=1') center / contain no-repeat; }
@media (max-width: 560px) {
  .gj-page .gj-quote { padding: 30px 18px 20px; }
  .gj-page .gj-quote p { padding-right: 30px; font-size: 17px; }
  .gj-page .gj-quote::before { font-size: 88px; right: 12px; }
  .gj-page .gj-quote cite { left: 16px; font-size: 12.5px; }
}
/* 금진옥액 "혀를 들어 올린 아래 모습" — 도해 조금 작게 (카드 폭은 유지) */
.gj-page .gj-anat-l .gj-anat-pic { width: 86%; justify-self: center; }
@media (max-width: 759px) { .gj-page .gj-anat-l .gj-anat-pic { width: 82%; } }
/* 금진옥액 혈어증 비교표 머리행 — 정상·혈어증 점 크기 통일 (자율신경 지도용 확대 규칙이 같은 .ad-map 클래스로 번졌던 것) */
.gj-cmp-tbl .ad-dot.is-ok, .gj-cmp-tbl .ad-dot.is-heat { width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; box-shadow: 0 0 0 2px #fff; }
/* 금진옥액 실제 혀밑 슬라이드 아래 안내 — 상단 선 제거, 사진 줄과 같은 폭, 간격 */
.gj-page .gj-real .pg-note { max-width: none; margin-top: 24px; }
@media (max-width: 560px) { .gj-page .gj-real .pg-note { margin-top: 18px; } }
/* 2026-10-02 금진옥액 핵심 문단(.ad-tx-why) — 왼쪽 굵은 선·둥근 모서리 제거, 각진 박스 + 걸친 "핵심" 알약 */
.gj-page .ad-tx-why { position: relative; margin-top: 34px; padding: 28px 24px 20px; background: #f3f7f5; border: 1px solid rgba(19, 122, 82, .14); border-left-width: 1px; border-radius: 0; box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .ad-tx-why::before { content: "핵심"; position: absolute; top: 0; left: 20px; transform: translateY(-50%); padding: 6px 13px 4px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; }
.gj-page .ad-tx-why b { color: var(--tg-med-deep); }
@media (max-width: 560px) { .gj-page .ad-tx-why { padding: 26px 18px 18px; } .gj-page .ad-tx-why::before { left: 16px; } }
/* 2026-10-02 금진옥액 혀밑 셀프 체크 — 누르는 체크 카드 + 5칸 막대 결과 */
.gj-page .gj-sc { padding: 0; border: 0; border-radius: 0; background: transparent; }
.gj-page .gj-sc-lead { margin: 0 0 18px; font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.gj-page .gj-sc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .gj-page .gj-sc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gj-page .gj-sc-list label { position: relative; display: grid; grid-template-columns: 24px auto minmax(0, 1fr); align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 16px 18px; background: #fff; border: 1px solid #e6dcdd; box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); cursor: pointer; transition: background .2s, border-color .2s; }
.gj-page .gj-sc-list label:hover { border-color: #c98f96; }
.gj-page .gj-sc-list input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gj-page .gj-sc-box { position: relative; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 2px solid #d3b9bc; background: #fff; transition: background .2s, border-color .2s; }
.gj-page .gj-sc-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.gj-page .gj-sc-k { padding: 5px 10px 3px; border-radius: 999px; background: #f6e9ea; color: #8a2a33; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.gj-page .gj-sc-t { font-size: 15px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.gj-page .gj-sc-list li.on label { background: #f9f0f0; border-color: #b23a48; }
.gj-page .gj-sc-list li.on .gj-sc-box { background: #b23a48; border-color: #b23a48; }
.gj-page .gj-sc-list li.on .gj-sc-box::after { opacity: 1; }
.gj-page .gj-sc-list li.on .gj-sc-k { background: #b23a48; color: #fff; }
.gj-page .gj-sc-list input:focus-visible + .gj-sc-box { outline: 2px solid #b23a48; outline-offset: 2px; }
.gj-page .gj-sc-res { display: flex; align-items: center; gap: 20px; margin-top: 20px; padding: 18px 22px; background: #f3f7f5; border: 1px solid rgba(19, 122, 82, .14); }
.gj-page .gj-sc-num { margin: 0; display: flex; align-items: baseline; gap: 4px; flex: none; }
.gj-page .gj-sc-num b { font-family: "Poppins", sans-serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--tg-med); transition: color .2s; }
.gj-page .gj-sc-num span { font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 500; color: #6b7a73; }
.gj-page .gj-sc-main { flex: 1; min-width: 0; }
.gj-page .gj-sc-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.gj-page .gj-sc-bar i { height: 8px; background: #dfe7e3; transition: background .2s; }
.gj-page .gj-sc-res[data-n="1"] .gj-sc-bar i.on, .gj-page .gj-sc-res[data-n="2"] .gj-sc-bar i.on { background: #d9875e; }
.gj-page .gj-sc-res[data-n="3"] .gj-sc-bar i.on, .gj-page .gj-sc-res[data-n="4"] .gj-sc-bar i.on, .gj-page .gj-sc-res[data-n="5"] .gj-sc-bar i.on { background: #b23a48; }
.gj-page .gj-sc-res[data-n="1"] .gj-sc-num b, .gj-page .gj-sc-res[data-n="2"] .gj-sc-num b { color: #c56a3d; }
.gj-page .gj-sc-res[data-n="3"] .gj-sc-num b, .gj-page .gj-sc-res[data-n="4"] .gj-sc-num b, .gj-page .gj-sc-res[data-n="5"] .gj-sc-num b { color: #b23a48; }
.gj-page .gj-sc-msg { margin: 10px 0 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.gj-page .gj-sc .pg-note { margin-top: 14px; max-width: none; }
@media (max-width: 560px) {
  .gj-page .gj-sc-list label { grid-template-columns: 22px minmax(0, 1fr); gap: 8px 10px; padding: 14px; }
  .gj-page .gj-sc-box { width: 22px; height: 22px; grid-row: span 2; align-self: start; }
  .gj-page .gj-sc-box::after { left: 6px; top: 2px; width: 5px; height: 10px; }
  .gj-page .gj-sc-k { justify-self: start; }
  .gj-page .gj-sc-res { gap: 14px; padding: 16px; }
  .gj-page .gj-sc-num b { font-size: 34px; }
}
@media (min-width: 900px) { .gj-page .gj-sc-list li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* 금진옥액 혀밑 셀프 체크 — 구안와사 등과 같은 .ac-check 컴포넌트, 색만 혈어증 와인으로 */
.gj-page .ac-check { --ac-red: #b23a48; --ac-red-soft: #f9f0f0; }
.gj-page .gj-check-note { margin-top: 14px; max-width: none; }
/* 금진옥액 실제 혀밑 슬라이드 — 양끝 페이드아웃 제거 */
.gj-real .dx-real-track { -webkit-mask-image: none; mask-image: none; }
.gj-page .ac-check-hd h3 { word-break: keep-all; }
/* 2026-10-02 금진옥액 설진기 검사 과정 — 혀통증 치료 흐름(.txa)과 같은 디자인, 5단계 가로 */
.gj-page .gj-sjx { margin: 6px 0 40px; }
@container (min-width: 860px) {
  .gj-page .gj-sjx .txa-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .gj-page .gj-sjx .txa-row::before { left: 10%; right: 10%; background: linear-gradient(90deg, #5f9e84, #137a52 50%, #2c5546); }
  .gj-page .gj-sjx .txa-card { padding: 30px 12px 18px; }
  .gj-page .gj-sjx .txa-card b { font-size: 16px; }
  .gj-page .gj-sjx .txa-card p { font-size: 15px; line-height: 1.65; }
  .gj-page .gj-sjx .txa-pill { font-size: 12.5px; }
}
/* 2026-10-02 금진옥액 실제 혀밑 — 혀통증과 같이 5장(모바일 3장)씩 보이며 한 장씩 이동 + 점 버튼 */
.gj-page .gj-real .dx-real-track { --n: 5; --g: 22px; container-type: inline-size; gap: var(--g); padding: 6px 0 12px; }
.gj-page .gj-real .dx-real-list { gap: var(--g); animation: none !important; transition: transform .8s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.gj-page .gj-real .dx-real-list li { width: calc((100cqw - (var(--n) - 1) * var(--g)) / var(--n)); height: auto; aspect-ratio: 1; }
@media (max-width: 899px) { .gj-page .gj-real .dx-real-track { --n: 3; --g: 16px; } }
.gj-page .gj-real-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.gj-page .gj-real-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(19, 122, 82, .25); cursor: pointer; transition: background .2s, width .2s; }
.gj-page .gj-real-dots button.on { width: 28px; border-radius: 999px; background: var(--tg-med); }
.gj-page .gj-real-dots button:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 2px; }
@container (min-width: 860px) { .gj-page .gj-sjx .txa-row::before { background: linear-gradient(90deg, #5b5fa8, #c0506e 25%, #d08a2a 50%, #6b3a7a 75%, #137a52); } }
.gj-page .gj-hd-dev { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }  /* 설진기 사진 — 카드 배경·테두리 제거 */
/* 2026-10-02 안내 박스(.pg-note) 사이트 전체 통일 — 페이지마다 따로 풀던 것을 기본값으로:
   칸 폭을 꽉 채운다(96ch 제한 해제). 상단 가는선은 09-29 사이트 규칙 그대로 */
.pg-body .pg-note { max-width: none; box-sizing: border-box; }
.gj-page .gj-sjx { margin-top: 34px; }  @media (max-width: 560px) { .gj-page .gj-sjx { margin-top: 26px; } }  /* 설진기 검사 플로우 — 제목과 간격 */
/* STEP 라벨(영문 대문자+숫자) — 한글용 +1/-1 보정이 과해 글자가 아래로 치우침 → 5.5/4.5 로 정가운데 (혀통증·금진옥액 공통) */
.txa-pill { padding-top: 5.5px; padding-bottom: 4.5px; }
/* 2026-10-02 금진옥액 시술 과정 — 해당 단계(삼릉침 자침·지혈) 안에 사진 */
.gj-page .gj-flow-pic { margin: 16px 0 0; max-width: 460px; }
.gj-page .gj-flow-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gj-page .gj-flow-pic + .ta-pills { margin-top: 14px; }
/* 시술 과정 단계 사진 — 2열 그리드(번호 | 내용)일 때 내용 칸, 설명 다음 줄에 */
.gj-page #ta-flow .ta-flow > li > .gj-flow-pic { grid-column: -2 / -1; grid-row: 4; }
.gj-page #ta-flow .ta-flow > li > .gj-flow-pic + .ta-pills { grid-row: 5; }
.gj-page #ta-flow .hx-split-bd .ta-flow > li > figure.gj-flow-pic + ul.ta-pills { grid-row: 5 !important; }
/* 금진옥액 시술 과정 — 단계 사진을 설명 오른쪽으로 (넓은 화면), 좁으면 설명 아래 */
@media (min-width: 1200px) {
  .gj-page #ta-flow .hx-split-bd .ta-flow > li:has(> .gj-flow-pic) { grid-template-columns: 124px minmax(0, 1fr) 300px; }
  .gj-page #ta-flow .hx-split-bd .ta-flow > li > figure.gj-flow-pic { grid-column: 3 !important; grid-row: 1 / span 4 !important; align-self: center; margin: 0; max-width: none; }
  .gj-page #ta-flow .hx-split-bd .ta-flow > li > figure.gj-flow-pic + ul.ta-pills { grid-row: 4 !important; }
}
@media (min-width: 1200px) { .gj-page #ta-flow .hx-split-bd .ta-flow > li:has(> .gj-flow-pic) { grid-template-columns: 124px minmax(0, 1fr) 328px; } .gj-page #ta-flow .hx-split-bd .ta-flow > li > figure.gj-flow-pic { margin-left: 28px; } }
/* 2026-10-02 금진옥액 시술 과정 — 왼쪽 소요·횟수·점검 강조 카드 (아래 중복 카드 대체) */
.gj-page .gj-keystats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.gj-page .gj-keystats li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .gj-ks-ic { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px var(--cs); }
.gj-page .gj-ks-ic::before { content: ""; position: absolute; inset: 12px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.gj-page .gj-keystats div { min-width: 0; }
.gj-page .gj-ks-k { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--c); }
.gj-page .gj-keystats b { display: block; margin-top: 2px; font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.gj-page .gj-keystats small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) { .gj-page .gj-keystats li { padding: 14px; gap: 14px; } .gj-page .gj-ks-ic { width: 42px; height: 42px; } .gj-page .gj-ks-ic::before { inset: 11px; } .gj-page .gj-keystats b { font-size: 17px; } }
/* 금진옥액 소요·횟수·점검 — 시술 과정 플로우 아래 한 줄 3개 (2026-10-02) */
.gj-page .gj-keystats { margin: 36px 0 0; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .gj-page .gj-keystats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .gj-page .gj-keystats li { gap: 14px; padding: 16px; } .gj-page .gj-keystats b { font-size: 17px; } .gj-page .gj-ks-ic { width: 44px; height: 44px; } .gj-page .gj-ks-ic::before { inset: 11px; } }
/* 교통사고 진료시간 라벨 — 사용자 지정 여백 8/8 */
.ac-sched-tag { padding-top: 8px !important; padding-bottom: 8px !important; }
/* 단계 라벨(.ac-pill) — 사용자 지정 여백 8/8 (2026-10-02) */
html body .ac-pill { padding-top: 8px !important; padding-bottom: 8px !important; }

/* 2026-10-02 사이트 전체 알약 라벨 — 위아래 같은 여백(정가운데)으로 통일. 사용자 지정("전부 변경").
   각 알약의 위+아래 여백 합은 그대로 두고 반씩 나눔(크기 변화 없음). 실측 기반 자동 생성 — 새 알약도 위아래 같은 여백으로 만들 것 */
@media (min-width: 900px) {
  html body .hero-fact > span { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-map-face > span.ms-lab.is-l { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-map-face > span.ms-lab.is-r { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-map-face > span.ms-lab.is-r.is-hot { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-hero-steps > li > span { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-rg-tabs > button.ms-rg-tab.is-on { padding-top: 11px !important; padding-bottom: 11px !important; }
  html body .ms-rg-tabs > button.ms-rg-tab { padding-top: 11px !important; padding-bottom: 11px !important; }
  html body .ms-rg-box > span.ms-rg-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-rg-tags > li { padding-top: 9px !important; padding-bottom: 9px !important; }
  html body .ms-callout > span.ms-callout-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-sq-card > span.ms-sq-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-ty-bot > span.ms-ty-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-evl-cd > span.ms-evl-tag { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-evl-n > span.ms-evl-st { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-lim > span.ms-lim-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-cv-card > span.ms-cv-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-cs > li > span.ms-cs-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-sf-src > span.ms-sf-k { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-st-meta > span.ms-st-bd { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-st-box > span.ms-st-k { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-st-links > a { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .tm3-fig > figcaption.tm3-cap { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .tm3-face > span.tm3-lab.is-r { padding-top: 4px !important; padding-bottom: 4px !important; }
  html body .tm3-face > span.tm3-lab.is-l { padding-top: 4px !important; padding-bottom: 4px !important; }
  html body .tm3-img > span.tm3-in { padding-top: 4px !important; padding-bottom: 4px !important; }
  html body .tm3-img > span.tm3-in.is-spine { padding-top: 4px !important; padding-bottom: 4px !important; }
  html body .txa-card > span.txa-pill { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-hero-pic > span.gj-pt-lab.is-l { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ad-hero-pic > span.gj-pt-lab.is-r { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ad-hero > p.gj-pt-note { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .gj-acard > span.gj-acard-pill { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-quote > cite { padding-top: 6px !important; padding-bottom: 6px !important; }
}
@media (min-width: 561px) and (max-width: 899px) {
  html body .hero-fact > span { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-page .ms-map-face > span.ms-lab.is-l { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-page .ms-map-face > span.ms-lab.is-r { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-map-face > span.ms-lab.is-r.is-hot { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-hero-steps > li > span { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-rg-tabs > button.ms-rg-tab.is-on { padding-top: 11px !important; padding-bottom: 11px !important; }
  html body .ms-rg-tabs > button.ms-rg-tab { padding-top: 11px !important; padding-bottom: 11px !important; }
  html body .ms-rg-box > span.ms-rg-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-rg-tags > li { padding-top: 9px !important; padding-bottom: 9px !important; }
  html body .ms-page .ms-map-face > span.ms-lab.is-r { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-page .ms-map-face > span.ms-lab.is-l { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-callout > span.ms-callout-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-sq-card > span.ms-sq-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-ty-bot > span.ms-ty-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-evl-cd > span.ms-evl-tag { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-evl-n > span.ms-evl-st { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-lim > span.ms-lim-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-cv-card > span.ms-cv-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-cs > li > span.ms-cs-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-sf-src > span.ms-sf-k { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-st-meta > span.ms-st-bd { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-st-box > span.ms-st-k { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-st-links > a { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .tm3-fig > figcaption.tm3-cap { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .tm3-face > span.tm3-lab.is-r { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .tm3-face > span.tm3-lab.is-l { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .tm3-img > span.tm3-in { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .tm3-img > span.tm3-in.is-spine { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .txa-card > span.txa-pill { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .txa-card > a.txa-plus { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-hero-pic > span.gj-pt-lab.is-l { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ad-hero-pic > span.gj-pt-lab.is-r { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ad-hero > p.gj-pt-note { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .gj-acard > span.gj-acard-pill { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-quote > cite { padding-top: 6px !important; padding-bottom: 6px !important; }
}
@media (max-width: 560px) {
  html body .hero-fact > span { padding-top: 4px !important; padding-bottom: 4px !important; }
  html body .ms-map-face > span.ms-lab.is-l { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-map-face > span.ms-lab.is-r { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-map-face > span.ms-lab.is-r.is-hot { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-hero-steps > li > span { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-rg-tabs > button.ms-rg-tab.is-on { padding-top: 9px !important; padding-bottom: 9px !important; }
  html body .ms-rg-tabs > button.ms-rg-tab { padding-top: 9px !important; padding-bottom: 9px !important; }
  html body .ms-rg-box > span.ms-rg-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-rg-tags > li { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-callout > span.ms-callout-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-sq-card > span.ms-sq-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-ty-bot > span.ms-ty-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-evl-cd > span.ms-evl-tag { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-evl-n > span.ms-evl-st { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-lim > span.ms-lim-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-cv-card > span.ms-cv-pill { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .ms-cs > li > span.ms-cs-pill { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .ms-sf-src > span.ms-sf-k { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-st-meta > span.ms-st-bd { padding-top: 6px !important; padding-bottom: 6px !important; }
  html body .ms-st-box > span.ms-st-k { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ms-st-links > a { padding-top: 7px !important; padding-bottom: 7px !important; }
  html body .tm3-fig > figcaption.tm3-cap { padding-top: 8px !important; padding-bottom: 8px !important; }
  html body .tm3-face > span.tm3-lab.is-r { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .tm3-face > span.tm3-lab.is-l { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .tm3-img > span.tm3-in { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .tm3-img > span.tm3-in.is-spine { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .txa-card > span.txa-pill { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .txa-card > a.txa-plus { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-hero-pic > span.gj-pt-lab.is-l { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-hero-pic > span.gj-pt-lab.is-r { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-hero > p.gj-pt-note { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .gj-acard > span.gj-acard-pill { padding-top: 5px !important; padding-bottom: 5px !important; }
  html body .ad-quote > cite { padding-top: 6px !important; padding-bottom: 6px !important; }
}
/* 2026-10-02 금진옥액 — 설진기 검사부터 권해 드리는 여덟 가지 경우: 부위별 색 아이콘 카드 + 한자 키워드 + 워터마크 */
.gj-page .gj-who2 { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .gj-page .gj-who2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.gj-page .gj-who2 li { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .gj-who-ic { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px var(--cs); }
.gj-page .gj-who-ic::before { content: ""; position: absolute; inset: 11px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.gj-page .gj-who2 div { position: relative; z-index: 1; min-width: 0; }
.gj-page .gj-who2 b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); }
.gj-page .gj-who2 b em { padding: 4px 9px; border-radius: 999px; background: var(--cs); color: var(--c); font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; }
.gj-page .gj-who2 div > span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--tg-ink-2); word-break: keep-all; }
.gj-page .gj-who-wm { position: absolute; right: 12px; bottom: -8px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 72px; font-weight: 700; line-height: 1; color: var(--c); opacity: .07; pointer-events: none; }
@media (max-width: 560px) { .gj-page .gj-who2 li { padding: 16px; gap: 14px; } .gj-page .gj-who-ic { width: 44px; height: 44px; } .gj-page .gj-who-ic::before { inset: 10px; } .gj-page .gj-who-wm { font-size: 60px; } }
/* 여덟 가지 경우 — 아이콘 크게 */
.gj-page .gj-who-ic { width: 58px; height: 58px; box-shadow: 0 0 0 6px var(--cs); }
.gj-page .gj-who-ic::before { inset: 11px; }
.gj-page .gj-who2 li { gap: 18px; }
@media (max-width: 560px) { .gj-page .gj-who-ic { width: 52px; height: 52px; box-shadow: 0 0 0 5px var(--cs); } .gj-page .gj-who-ic::before { inset: 10px; } .gj-page .gj-who2 li { gap: 16px; } }
/* 여덟 가지 경우 — 아이콘 배경 원 없이, 아이콘 자체에 부위 색 */
.gj-page .gj-who-ic { width: 52px; height: 52px; background: transparent; box-shadow: none; border-radius: 0; }
.gj-page .gj-who-ic::before { inset: 0; background: var(--c); }
@media (max-width: 560px) { .gj-page .gj-who-ic { width: 46px; height: 46px; box-shadow: none; } .gj-page .gj-who-ic::before { inset: 0; } }
/* 여덟 가지 경우 — 아이콘 조금 더 크게, 색은 조금 연하게 */
.gj-page .gj-who-ic { width: 60px; height: 60px; }
.gj-page .gj-who-ic::before { background: color-mix(in srgb, var(--c) 72%, #fff); }
@media (max-width: 560px) { .gj-page .gj-who-ic { width: 52px; height: 52px; } }
.gj-page .gj-who-ic { width: 54px; height: 54px; }  @media (max-width: 560px) { .gj-page .gj-who-ic { width: 48px; height: 48px; } }  /* 여덟 가지 경우 아이콘 조금 줄임 */
/* 2026-10-02 금진옥액 — 네 갈래의 근거: 연도 타임라인 + 유형별 색 카드 + 근거의 한계 박스 */
.gj-page .gj-evt { position: relative; list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 30px; }
.gj-page .gj-evt li { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.gj-page .gj-evt::before { content: ""; position: absolute; left: 150px; top: 14px; bottom: 30px; width: 1px; background: #d9e1dd; }
.gj-page .gj-evt-yr { padding-top: 14px; text-align: right; }
.gj-page .gj-evt-yr b { display: block; font-family: 'Poppins', 'Noto Serif KR', serif; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--c); }
.gj-page .gj-evt-yr small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--tg-mute, #6b7a73); word-break: keep-all; }
.gj-page .gj-evt-yr::after { content: ""; position: absolute; left: 144px; top: 20px; width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px #fff, 0 0 0 5px color-mix(in srgb, var(--c) 35%, #fff); }
.gj-page .gj-evt-card { position: relative; padding: 28px 22px 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .gj-evt-tag { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 6px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .03em; white-space: nowrap; }
.gj-page .gj-evt-card h4 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; color: var(--tg-ink); word-break: keep-all; }
.gj-page .gj-evt-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.gj-page .gj-evt-card cite { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); font-style: normal; font-size: 14px; line-height: 1.5; color: var(--c); word-break: keep-all; }
.gj-page .gj-lim { position: relative; margin-top: 40px; padding: 28px 22px 20px; background: #f2f4f3; }
.gj-page .gj-lim-pill { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 6px 12px; border-radius: 999px; background: #6b7a73; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .03em; }
.gj-page .gj-lim p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 760px) {
  .gj-page .gj-evt { gap: 22px; }
  .gj-page .gj-evt::before { display: none; }
  .gj-page .gj-evt li { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .gj-page .gj-evt-yr { display: flex; align-items: baseline; gap: 10px; padding: 0; text-align: left; }
  .gj-page .gj-evt-yr::after { display: none; }
  .gj-page .gj-evt-yr b { font-size: 26px; }
  .gj-page .gj-evt-yr small { margin: 0; }
  .gj-page .gj-evt-card { padding: 26px 16px 16px; }
  .gj-page .gj-evt-card h4 { font-size: 16px; }
}
/* 금진옥액 근거 타임라인 — 연도 크기를 매선 임상 타임라인(.ms-evl-yr)과 동일하게 (40/32px, 700) */
.gj-page .gj-evt-yr { padding-top: 12px; }
.gj-page .gj-evt-yr b { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.gj-page .gj-evt-yr::after { top: 26px; }
@media (max-width: 760px) { .gj-page .gj-evt-yr { padding-top: 0; } .gj-page .gj-evt-yr b { font-size: 32px; } }
/* 2026-10-02 금진옥액 — 여덟 가지 병행 치료: 분류색 카드(목·어깨/사혈/전신) + 걸친 분류 알약 + 아이콘 + 한자 워터마크 */
.gj-page .gj-cb { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 16px; }
@media (min-width: 760px) { .gj-page .gj-cb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gj-page .gj-cb li { position: relative; overflow: visible; display: flex; flex-direction: column; padding: 30px 22px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .gj-cb-tag { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 6px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .03em; white-space: nowrap; z-index: 2; }
.gj-page .gj-cb-hd { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.gj-page .gj-cb-ic { position: relative; flex: none; width: 46px; height: 46px; }
.gj-page .gj-cb-ic::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.gj-page .gj-cb h4 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.gj-page .gj-cb h4 em { font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--c); }
.gj-page .gj-cb p { position: relative; z-index: 1; margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); font-size: 15px; line-height: 1.75; color: var(--tg-ink-2); word-break: keep-all; }
.gj-page .gj-cb-more { position: relative; z-index: 1; align-self: flex-start; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--cs); color: var(--c); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.gj-page .gj-cb-more::after { content: " →"; }
.gj-page .gj-cb-more:hover { background: var(--c); color: #fff; }
.gj-page .gj-cb-wm { position: absolute; right: 14px; top: 10px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 72px; font-weight: 700; line-height: 1; color: var(--c); opacity: .07; pointer-events: none; }
@media (max-width: 560px) {
  .gj-page .gj-cb { gap: 26px; }
  .gj-page .gj-cb li { padding: 28px 16px 18px; }
  .gj-page .gj-cb-ic { width: 42px; height: 42px; }
  .gj-page .gj-cb h4 { font-size: 16px; }
  .gj-page .gj-cb-wm { font-size: 60px; }
}
/* 2026-10-02 금진옥액 — 반드시 의료진에게 알려주세요: 위험도별 색 카드 3열 + 걸친 상태 알약 + 아이콘, 그 외는 회색 박스 */
.gj-page .gj-wn { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 14px; }
@media (min-width: 900px) { .gj-page .gj-wn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gj-page .gj-wn li { position: relative; display: flex; flex-direction: column; padding: 30px 20px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .gj-wn-tag { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 6px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .03em; white-space: nowrap; }
.gj-page .gj-wn-ic { position: relative; display: block; width: 46px; height: 46px; }
.gj-page .gj-wn-ic::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.gj-page .gj-wn b { display: block; margin-top: 14px; font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.gj-page .gj-wn p { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); font-size: 15px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.gj-page .gj-wn-etc { margin: 34px 0 40px; }
@media (max-width: 560px) {
  .gj-page .gj-wn { gap: 26px; }
  .gj-page .gj-wn li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 28px 16px 18px; }
  .gj-page .gj-wn-ic { width: 42px; height: 42px; }
  .gj-page .gj-wn b { margin-top: 0; }
  .gj-page .gj-wn p { grid-column: 1 / -1; }
}
/* 2026-10-02 금진옥액 — 시술 전/후 안내: BEFORE → 시술 → AFTER 두 카드 + 항목별 아이콘, 바로 연락 항목 강조 */
.gj-page .gj-pp { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 900px) { .gj-page .gj-pp { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; } }
.gj-page .gj-pp-col { position: relative; overflow: hidden; padding: 32px 22px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.gj-page .gj-pp-col { overflow: visible; }
.gj-page .gj-pp-tag { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 6px 12px; border-radius: 999px; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: .12em; }
.gj-page .gj-pp-col h4 { position: relative; z-index: 1; margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--c); }
.gj-page .gj-pp-wm { position: absolute; right: 16px; top: 12px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 76px; font-weight: 700; line-height: 1; color: var(--c); opacity: .07; pointer-events: none; }
.gj-page .gj-pp-col ul { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.gj-page .gj-pp-col li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 0; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.gj-page .gj-pp-col li:first-child { border-top: 0; }
.gj-page .gj-pp-col li i { position: relative; display: block; width: 30px; height: 30px; }
.gj-page .gj-pp-col li i::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.gj-page .gj-pp-col li span { font-size: 15px; line-height: 1.65; color: var(--tg-ink-2); word-break: keep-all; }
.gj-page .gj-pp-col li.is-alert { --c: #b23a48; margin: 0 -10px; padding: 14px 10px; background: #fbeef0; border-top-color: transparent; }
.gj-page .gj-pp-col li.is-alert + li { border-top-color: transparent; }
.gj-page .gj-pp-col li.is-alert span { color: var(--tg-ink); }
.gj-page .gj-pp-col li.is-alert b { color: #b23a48; font-weight: 700; }
.gj-page .gj-pp-mid { position: relative; display: flex; align-items: center; justify-content: center; }
.gj-page .gj-pp-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, #137a52, #2f7f8f); }
.gj-page .gj-pp-mid span { position: relative; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #c9dcd6; color: #24453a; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
@media (max-width: 899px) {
  .gj-page .gj-pp-mid { height: 56px; }
  .gj-page .gj-pp-mid::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, #137a52, #2f7f8f); }
}
@media (max-width: 560px) {
  .gj-page .gj-pp-col { padding: 30px 16px 14px; }
  .gj-page .gj-pp-col h4 { font-size: 16px; }
  .gj-page .gj-pp-wm { font-size: 62px; }
  .gj-page .gj-pp-col li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
  .gj-page .gj-pp-col li i { width: 28px; height: 28px; }
}
/* 2026-10-02 다국어 — CSS 의사요소에 박힌 한글 라벨을 언어별로 + 일·중 줄바꿈(keep-all 해제, 금칙 처리) */
body.lang-jp, body.lang-cn { line-break: strict; }
body.lang-jp *, body.lang-cn * { word-break: normal !important; }
/* 2026-10-19 자연스러운 줄바꿈 — 일본어는 구문 단위(auto-phrase, html lang="ja" 필요·미지원 브라우저는 위 normal 유지), 일·중 문단은 외톨이 글자 방지, 제목은 줄 길이 균형 */
body.lang-jp * { word-break: normal !important; word-break: auto-phrase !important; }
body.lang-jp, body.lang-cn { text-wrap: pretty; }
body.lang-jp :is(h1, h2, h3, h4), body.lang-cn :is(h1, h2, h3, h4) { text-wrap: balance; }
body.lang-en .pg-body h2, body.lang-en .pg-body h3, body.lang-en .pg-body h4 { text-wrap: balance; }
body.lang-en .pg-body p, body.lang-en .pg-body li { text-wrap: pretty; }
body.lang-en .fx-herbs .fx-herb-cards li:first-child::before { content: "Key herb"; }
body.lang-jp .fx-herbs .fx-herb-cards li:first-child::before { content: "主要生薬"; }
body.lang-cn .fx-herbs .fx-herb-cards li:first-child::before { content: "核心药材"; }
body.lang-en .gd2-row.is-today b::after, body.lang-en .ac-week li.is-today::before, body.lang-en .ac-sched-row.is-today .ac-sched-day::after { content: "Today"; }
body.lang-jp .gd2-row.is-today b::after, body.lang-jp .ac-week li.is-today::before, body.lang-jp .ac-sched-row.is-today .ac-sched-day::after { content: "今日"; }
body.lang-cn .gd2-row.is-today b::after, body.lang-cn .ac-week li.is-today::before, body.lang-cn .ac-sched-row.is-today .ac-sched-day::after { content: "今天"; }
body.lang-en .ta-cond2-card summary::after { content: "Causes & care +"; }
body.lang-jp .ta-cond2-card summary::after { content: "原因・治療を見る +"; }
body.lang-cn .ta-cond2-card summary::after { content: "查看原因·治疗 +"; }
body.lang-en .ta-cond2-card[open] summary::after { content: "Close −"; }
body.lang-jp .ta-cond2-card[open] summary::after { content: "閉じる −"; }
body.lang-cn .ta-cond2-card[open] summary::after { content: "收起 −"; }
body.lang-en .ta-tbl > summary::after { content: "Expand +"; }
body.lang-jp .ta-tbl > summary::after { content: "開く +"; }
body.lang-cn .ta-tbl > summary::after { content: "展开 +"; }
body.lang-en .ta-tbl[open] > summary::after { content: "Close −"; }
body.lang-jp .ta-tbl[open] > summary::after { content: "閉じる −"; }
body.lang-cn .ta-tbl[open] > summary::after { content: "收起 −"; }
body.lang-en .dx-results .ta-sheet .ta-bal::before { content: "Parasympathetic"; }
body.lang-jp .dx-results .ta-sheet .ta-bal::before { content: "副交感"; }
body.lang-cn .dx-results .ta-sheet .ta-bal::before { content: "副交感"; }
body.lang-en .dx-results .ta-sheet .ta-bal::after { content: "Sympathetic"; }
body.lang-jp .dx-results .ta-sheet .ta-bal::after { content: "交感"; }
body.lang-cn .dx-results .ta-sheet .ta-bal::after { content: "交感"; }
body.lang-en #in-taper .in-phase::before { content: "Sleeping pill dose (concept)"; }
body.lang-jp #in-taper .in-phase::before { content: "睡眠薬の用量(概念図)"; }
body.lang-cn #in-taper .in-phase::before { content: "安眠药剂量(示意图)"; }
body.lang-en #hb-mech .hb-fig::before { content: "Fig. " counter(hbfig) "  ·  " attr(data-t); }
body.lang-jp #hb-mech .hb-fig::before { content: "図 " counter(hbfig) "  ·  " attr(data-t); }
body.lang-cn #hb-mech .hb-fig::before { content: "图 " counter(hbfig) "  ·  " attr(data-t); }
body.lang-en .ms-evt-c::before, body.lang-en .ms-evl-c::before { content: "Source"; }
body.lang-jp .ms-evt-c::before, body.lang-jp .ms-evl-c::before { content: "出典"; }
body.lang-cn .ms-evt-c::before, body.lang-cn .ms-evl-c::before { content: "来源"; }
body.lang-en .gj-page .ad-tx-why::before { content: "Key point"; }
body.lang-jp .gj-page .ad-tx-why::before { content: "ポイント"; }
body.lang-cn .gj-page .ad-tx-why::before { content: "要点"; }
/* 다국어 — 얼굴·인체 도해의 오른쪽 라벨이 길어져 모바일에서 화면 밖으로 나가는 문제: 그림 오른쪽 끝에 맞춰 붙인다 */
@media (max-width: 560px) {
  body:not(.lang-kr) .fp-face span.fp-lab.is-r { left: auto; right: -6px; transform: translate(0, -50%); }
}
/* 다국어 — 한국어 길이에 맞춘 nowrap 알약이 번역문에서 넘치지 않도록(외국어만) */
body:not(.lang-kr) .ac-steps h3 em { white-space: normal; display: inline-block; max-width: 100%; }
body:not(.lang-kr) .ac-pill { max-width: calc(100% - 24px); white-space: normal; }
/* 다국어 — 매선 히어로 도해 라벨은 부제(em) 없이, 만성통증 부위 지도 오른쪽 라벨은 모바일에서 그림 끝에 맞춤 */
body:not(.lang-kr) .ms-lead-map .ms-lab em { display: none; }
@media (max-width: 560px) {
  body:not(.lang-kr) .cr-map-pic a.cr-lab.is-r { left: auto; right: -6px; transform: translate(0, -50%); }
}
/* 다국어 — 번역 후 한자 병기가 본문과 같아져 비운 <small>, 비운 단위 칸은 숨김 */
body:not(.lang-kr) .pg-body small:empty { display: none; }

/* ── 게시글 본문 표·이미지 (2026-10-06) — 에디터 표 테두리가 글쓰기 화면에만 있어 보기 화면에서 사라지던 것 ── */
.post-body table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; line-height: 1.6; }
.post-body table td, .post-body table th { border: 1px solid #cbd2e0; padding: 8px 10px; vertical-align: top; }
.post-body table th { background: #f1f4fa; font-weight: 700; }
.post-body img { max-width: 100%; height: auto; }
@media (max-width: 640px) { .post-body table { display: block; overflow-x: auto; } }
/* ── 게시글 본문 표·이미지 끝 ── */

/* ── 게시판 분류 칩 (2026-10-08 클리닉 칼럼) ── */
.cc-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cc-cats a { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(19, 122, 82, .22); background: #fff;
  font-size: 15px; color: #33413a; text-decoration: none; transition: all .15s; }
.cc-cats a:hover { border-color: var(--tg-med); color: var(--tg-med); }
.cc-cats a.on { background: var(--tg-med); border-color: var(--tg-med); color: #fff; }
.cc-cat { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 4px; background: #eef6f1;
  color: var(--tg-med); font-size: 12.5px; font-weight: 600; line-height: 1.6; vertical-align: 1px; white-space: nowrap; text-decoration: none; }
.post-meta .cc-cat { margin-right: 6px; }
@media (max-width: 640px) { .cc-cats { gap: 6px; } .cc-cats a { padding: 7px 13px; font-size: 14px; } }
/* 모바일 목록 — 분류 게시판만 카드형(제목 한 줄 + 작성자·작성일·조회). 기존 표는 제목 칸이 눌리고 작성일이 밀려났다 */
@media (max-width: 768px) {
  .board-page.has-cats .board-table thead { display: none; }
  .board-page.has-cats .board-table, .board-page.has-cats .board-table tbody { display: block; width: 100%; }
  .board-page.has-cats .board-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 2px; border-bottom: 1px solid #e5e9ef; }
  .board-page.has-cats .board-table td { display: block; padding: 0; border: 0; font-size: 13px; color: #7a8580; white-space: nowrap; }
  .board-page.has-cats .board-table td.subj { order: -1; flex: 1 0 100%; white-space: normal; font-size: 15.5px; line-height: 1.55; color: inherit; }
  .board-page.has-cats .board-table td:nth-last-child(5) { display: none; }
  .board-page.has-cats .board-table td:last-child::before { content: "조회 "; }
  .board-page.has-cats .board-table td.empty { flex: 1 0 100%; text-align: center; white-space: normal; padding: 30px 0; }
  .board-page.has-cats .board-table td.empty::before { content: none; }
}
/* ── 게시판 분류 칩 끝 ── */

/* ══ 2026-10-12 이명·난청(auto-tinnitus) — 고객 초안(260928 이명) 재구성. 래퍼 ac-page et-page, 딥 틸 #1f7a6d ══ */
.et-page { --ac-green: #1f7a6d; --ac-green-soft: #e6f3f0; --fp: #1f7a6d; --fp-soft: #e6f3f0; --fp-bg: #f3f9f7; --cr: #1f7a6d; }
.tg-ans-page.et-page { --tg-beauty: #1f7a6d; --tg-beauty-soft: #e6f3f0; }
.et-page .hx-eyebrow { color: #1f7a6d; }
.et-page #hx-faq.faq-flat { --fq: #1f7a6d; --fq-soft: #e6f3f0; --fq-bg: #f4faf8; --fq-ring: rgba(31, 122, 109, .35); --fq-ring2: rgba(31, 122, 109, .45); }
.et-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(110, 200, 180, .36) 62%); }
.et-page .ac-check { --ac-red: #1f7a6d; --ac-red-soft: #eef7f4; }
.et-page .ac-check-hd h3 { background-image: linear-gradient(transparent 62%, rgba(110, 200, 180, .36) 62%); }
.et-check-msg { flex-basis: 100%; margin-top: 6px; text-align: right; }
.ac-check.is-on .et-check-msg { color: #1f7a6d; font-weight: 600; }
.et-page .et-illu img { aspect-ratio: 2 / 3; object-fit: cover; max-height: 520px; width: 100%; }

/* 이명 vs 난청 — 두 카드 + 가운데 OVERLAP */
.et-duo { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; margin-top: 30px; }
.et-duo article { position: relative; overflow: hidden; padding: 34px 26px 26px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.et-duo article .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); background: var(--c); }
.et-duo { overflow: visible; } .et-duo article { overflow: visible; }
.et-duo-wm { position: absolute; right: 16px; top: 12px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 64px; font-weight: 700; line-height: 1; color: var(--c); opacity: .08; pointer-events: none; }
.et-duo h3 { position: relative; margin: 0 0 14px; padding-right: 40px; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--c); word-break: keep-all; text-wrap: balance; }
.et-duo ul { position: relative; list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); display: grid; gap: 8px; }
.et-duo li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.et-duo li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.et-duo-x { align-self: center; justify-self: center; writing-mode: vertical-rl; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .3em; color: #7f8c87; }
@media (max-width: 760px) {
  .et-duo { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .et-duo-x { writing-mode: horizontal-tb; padding: 18px 0 26px; }
  .et-duo article { padding: 32px 18px 20px; }
  .et-duo h3 { font-size: 16.5px; }
}
/* 세 흐름(패턴) — 라벨 걸친 카드 3열 */
.et-page .et-pat { margin-top: 30px; }

/* 청력도 카드 */
.et-audio { margin: 0; background: #fff; border: 1px solid #dfe7e4; box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.et-audio-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #e7eeeb; }
.et-audio-hd b { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #1f7a6d; }
.et-audio-hd span { font-size: 13px; color: #7f8c87; }
.et-audio-svg { display: block; width: 100%; height: auto; padding: 18px 16px 6px; box-sizing: border-box; }
.et-audio-svg .et-norm { fill: #e6f3f0; }
.et-audio-svg .et-norm-t { font-size: 13px; fill: #1f7a6d; font-weight: 600; }
.et-audio-svg .et-grid line { stroke: #e3e9e7; stroke-width: 1; }
.et-audio-svg .et-ax text { font-size: 12px; fill: #7f8c87; text-anchor: end; font-family: 'Poppins', sans-serif; }
.et-audio-svg .et-ax text.is-x { text-anchor: middle; }
.et-audio-svg .et-hz-mark { stroke: #c9612c; stroke-width: .8; stroke-dasharray: 5 5; }
.et-audio-svg .et-curve { fill: none; stroke: #1f7a6d; stroke-width: 1.3; stroke-linejoin: round; }
.et-audio-svg .et-pt circle { fill: #fff; stroke: #1f7a6d; stroke-width: 1.4; }
.et-audio-svg .et-pt circle.is-key { fill: #c9612c; stroke: #fff; stroke-width: 3; }
.et-audio-svg .et-call { font-size: 13px; font-weight: 700; fill: #c9612c; }
.et-audio-3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #e7eeeb; }
.et-audio-3 li { padding: 16px 18px 18px; border-left: 1px solid #e7eeeb; }
.et-audio-3 li:first-child { border-left: 0; }
.et-audio-3 small { display: block; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: #8a958f; }
.et-audio-3 b { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; color: #1f7a6d; }
.et-audio-3 span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 760px) {
  .et-audio-svg { padding: 12px 6px 4px; }
  .et-audio-3 { grid-template-columns: minmax(0, 1fr); }
  .et-audio-3 li { border-left: 0; border-top: 1px solid #e7eeeb; }
  .et-audio-3 li:first-child { border-top: 0; }
}

/* 다섯 가지 원인 카드 — 권장 문구 + CHECK POINT */
.et-page .et-fac .et-tip { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); font-size: 14px; font-weight: 600; color: var(--c); }
.et-page .et-fac > li.et-chk { --c: #b8483e; }

/* 소리 크기 눈금 */
.et-db { margin-top: 30px; padding: 28px 26px 24px; background: #fff; border: 1px solid #dfe7e4; box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); --dbc: #1f7a6d; }
.et-db.is-warm { --dbc: #c08a2a; } .et-db.is-hot { --dbc: #c9482c; }
.et-db-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.et-db-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.et-db-v { font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; color: var(--dbc); transition: color .2s; }
.et-db-now small { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--dbc); }
.et-db-name { margin-left: 6px; font-size: 17px; font-weight: 700; color: var(--tg-ink); }
.et-db-scale { position: relative; margin-top: 22px; padding-bottom: 34px; }
.et-db-bar { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #dcefe9 0 50%, #f6e7c9 50% 65%, #f6d6cc 65% 100%); }
.et-db-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 10%; border-radius: 999px; background: var(--dbc); transition: width .15s, background .2s; }
.et-db-line { position: absolute; top: -10px; bottom: -10px; left: calc(var(--p) * 1%); width: 2px; background: #c9482c; }
.et-db-line em { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: #c9482c; color: #fff; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.et-db-in { position: absolute; left: -8px; right: -8px; top: -8px; width: calc(100% + 16px); height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.et-db-in:focus-visible + .et-db-ticks { outline: none; }
.et-db-ticks { position: absolute; left: 0; right: 0; top: 22px; height: 30px; }
.et-db-ticks span { position: absolute; left: calc(var(--p) * 1%); transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #7f8c87; text-align: center; line-height: 1.3; }
.et-db-ticks span:first-child { transform: none; } .et-db-ticks span:last-child { transform: translateX(-100%); }
.et-db-ticks small { display: block; font-family: inherit; font-size: 11.5px; }
.et-db-scale::after { content: ""; position: absolute; top: -6px; left: calc(var(--knob, 10) * 1%); width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #fff; border: 3px solid var(--dbc); box-shadow: 0 2px 8px rgba(20, 32, 27, .25); pointer-events: none; transition: left .15s, border-color .2s; }
.et-db-desc { margin: 4px 0 0; padding-top: 14px; border-top: 1px dashed #dfe7e4; font-size: 15px; line-height: 1.65; color: var(--tg-ink); word-break: keep-all; }
.et-db:focus-within .et-db-scale::after { box-shadow: 0 0 0 4px rgba(31, 122, 109, .25); }
@media (max-width: 560px) { .et-db { padding: 24px 16px 20px; } .et-db-v { font-size: 38px; } .et-db-name { flex-basis: 100%; margin-left: 0; font-size: 16px; } }

/* 네 가지 기준 — 2×2 */
@media (min-width: 900px) { .et-page .et-prin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.et-page .et-prin h3 { font-family: 'Noto Serif KR', serif; }

/* 자율신경 ↔ 귀 연결 흐름 */
.et-loop { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1.15fr) 26px minmax(0, 1fr); align-items: center; gap: 0 6px; margin-top: 30px; }
.et-loop-n { position: relative; padding: 16px 16px 15px; background: #fff; border: 1px solid #dfe7e4; }
.et-loop-n small { display: block; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: #8a958f; }
.et-loop-n b { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.et-loop-n span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--tg-body); word-break: keep-all; }
.et-loop-n.is-mid { border-color: #efc9c2; background: #fdf5f3; } .et-loop-n.is-mid small, .et-loop-n.is-mid b { color: #b8483e; }
.et-loop-n.is-a small { color: #3b4f86; } .et-loop-n.is-b small { color: #3d5a80; }
.et-loop-n.is-end { border-color: #1f7a6d; background: #1f7a6d; } .et-loop-n.is-end small, .et-loop-n.is-end b, .et-loop-n.is-end span { color: #fff; } .et-loop-n.is-end small { opacity: .75; }
.et-loop-split { display: grid; gap: 10px; }
.et-loop-ar { position: relative; height: 2px; background: #b9c7c2; }
.et-loop-ar::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #b9c7c2; border-right: 2px solid #b9c7c2; transform: translateY(-50%) rotate(45deg); }
.et-loop-cap { margin: 22px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 1199px) {
  .et-loop { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .et-loop-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .et-loop-ar { justify-self: center; width: 2px; height: 26px; }
  .et-loop-ar::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 560px) { .et-loop-split { grid-template-columns: minmax(0, 1fr); } }

/* 변증 6유형 · 치료 7종 아코디언 본문 */
.et-page .et-type-bd, .et-page .et-tx-bd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.et-page .et-type-bd h4, .et-page .et-tx-bd h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--c); }
.et-page .et-type-bd p, .et-page .et-tx-bd p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.et-rx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 0; padding: 14px 16px; background: color-mix(in srgb, var(--c) 7%, #fff); }
.et-rx span { padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.et-rx b { font-size: 16px; font-weight: 700; color: var(--c); }
.et-rx em { font-style: normal; font-size: 15px; color: var(--tg-ink); }
.et-say { position: relative; margin: 18px 0 0; padding: 26px 18px 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); background: color-mix(in srgb, var(--c) 5%, #fff); font-size: 15.5px; line-height: 1.7; color: var(--tg-ink); word-break: keep-all; }
.et-say span { position: absolute; top: 0; left: 16px; transform: translateY(-50%); padding: 5px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.et-more { display: inline-block; margin-top: 16px; padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.et-more::after { content: " →"; } .et-more:hover { background: var(--c); color: #fff; }
.et-before { margin-top: 34px; }
.et-before ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.et-before li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.65; word-break: keep-all; }
.et-before li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
@media (max-width: 760px) { .et-page .et-type-bd, .et-page .et-tx-bd { grid-template-columns: minmax(0, 1fr); } .et-say { font-size: 15px; } }

/* 通 緩 補 */
.et-page .et-3way b { font-family: 'Noto Serif KR', serif; font-size: 18px; }

/* 진료 순서 아래 두 박스 */
.et-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; margin-top: 40px; }
.et-pair-c { position: relative; padding: 32px 22px 22px; border: 1px solid; }
.et-pair-c.is-good { --c: #1f7a6d; border-color: #bfded6; background: #f3f9f7; }
.et-pair-c.is-warn { --c: #c9482c; border-color: #efc9c2; background: #fdf5f3; }
.et-pair-c .ac-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); background: var(--c); }
.et-pair-c h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--c); word-break: keep-all; }
.et-pair-c p, .et-pair-c li { font-size: 15px; line-height: 1.7; color: var(--tg-ink); word-break: keep-all; }
.et-pair-c p { margin: 0; }
.et-pair-c ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.et-pair-c li::marker { color: var(--c); font-weight: 700; }
@media (max-width: 760px) { .et-pair { grid-template-columns: minmax(0, 1fr); gap: 30px; } .et-pair-c { padding: 30px 18px 18px; } .et-pair-c h3 { font-size: 16.5px; } }
/* 이명 — 원인 카드 아이콘은 배경 원 없이 옅은 내용색(사용자 확정 스타일), 청력도 모바일 글자 */
.et-page .et-fac .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.et-page .et-fac .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
@media (max-width: 560px) {
  .et-page .et-fac .fp-why-ico, .et-page .et-fac .fp-why-ico::before { width: 40px; height: 40px; }
  .et-audio-svg .et-ax text { font-size: 19px; }
  .et-audio-svg .et-norm-t { font-size: 19px; }
  .et-audio-svg .et-call { font-size: 20px; }
}

/* ══ 2026-10-12 담적증(auto-damjeok) — 고객 초안(260928 담적증) 재구성. 래퍼 ac-page dj-page, 앰버 브라운 #9a6328. 이명(et-) 부품 일부 공유 ══ */
.dj-page { --ac-green: #9a6328; --ac-green-soft: #f6eee4; --fp: #9a6328; --fp-soft: #f6eee4; --fp-bg: #fbf7f2; --cr: #9a6328; }
.tg-ans-page.dj-page { --tg-beauty: #9a6328; --tg-beauty-soft: #f6eee4; }
.dj-page .hx-eyebrow { color: #9a6328; }
.dj-page #hx-faq.faq-flat { --fq: #9a6328; --fq-soft: #f6eee4; --fq-bg: #fcf8f3; --fq-ring: rgba(154, 99, 40, .35); --fq-ring2: rgba(154, 99, 40, .45); }
.dj-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(230, 180, 120, .38) 62%); }
.tile-tbl.is-dj { --tc: #9a6328; }
.dj-ans-tbl thead small, .dj-rx-tbl tbody th small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; opacity: .8; letter-spacing: .02em; }
.dj-rx-tbl tbody th small { font-family: 'Noto Serif KR', serif; }
.dj-ans-tbl tr.is-key td { color: #9a6328; }
.dj-page .dj-pair2 { margin-top: 44px; }
.et-pair-c.dj-c-violet { --c: #7458a6; border-color: #d9d0ea; background: #f7f4fb; }

/* 아이콘 — 배경 원 없이 옅은 내용색 */
.dj-page .dj-fac .fp-why-ico, .dj-page .dj-life4 .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.dj-page .dj-fac .fp-why-ico::before, .dj-page .dj-life4 .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
@media (max-width: 560px) { .dj-page .dj-fac .fp-why-ico, .dj-page .dj-fac .fp-why-ico::before, .dj-page .dj-life4 .fp-why-ico, .dj-page .dj-life4 .fp-why-ico::before { width: 40px; height: 40px; } }
.dj-page .dj-key, .dj-page .dj-diff { margin-top: 34px; }

/* 증상 네 영역 — 2×2 카드, 한자 워터마크 */
.dj-sym4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; padding-top: 14px; }
.dj-sym4 article { position: relative; padding: 32px 24px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.dj-sym4 .ac-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); background: var(--c); }
.dj-sym-wm { position: absolute; right: 16px; top: 12px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 64px; font-weight: 700; line-height: 1; color: var(--c); opacity: .08; pointer-events: none; }
.dj-sym4 h3 { position: relative; margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--c); }
.dj-sym4 ul { position: relative; list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); display: grid; gap: 7px; }
.dj-sym4 li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.dj-sym4 li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
@media (max-width: 760px) { .dj-sym4 { grid-template-columns: minmax(0, 1fr); } .dj-sym4 article { padding: 30px 18px 18px; } }

/* 점수형 자가진단 */
.dj-sc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; padding-top: 14px; }
.dj-sc-g { position: relative; margin: 0; padding: 30px 18px 14px; min-width: 0; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.dj-sc-g legend { position: absolute; top: 0; left: 16px; right: 16px; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; padding: 0; }
.dj-sc-g legend .ac-pill { position: static; transform: none; background: var(--c); }
.dj-sc-gm { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--c); line-height: 1.2; }
.dj-sc-g ul { list-style: none; margin: 0; padding: 0; }
.dj-sc-g li { border-top: 1px dashed #ebe4da; }
.dj-sc-g li:first-child { border-top: 0; }
.dj-sc-g label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 2px; cursor: pointer; }
.dj-sc-g input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c); }
.dj-sc-g label span { font-size: 15px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.dj-sc-g label em { font-style: normal; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: #9a958e; padding-top: 3px; }
.dj-sc-g label em::after { content: "점"; font-family: 'Pretendard', sans-serif; }
.dj-sc-g li.is-on { background: color-mix(in srgb, var(--c) 7%, #fff); }
.dj-sc-g li.is-on label em { color: var(--c); }
.dj-sc-res { margin-top: 22px; padding: 24px 24px 20px; background: #3b2a18; color: #fff; --rc: #e0c9a6; }
.dj-sc-res.is-ok { --rc: #8fd1b0; } .dj-sc-res.is-warn { --rc: #f0cc6e; } .dj-sc-res.is-sus { --rc: #f3a35f; } .dj-sc-res.is-high { --rc: #f07d6b; }
.dj-sc-total { display: flex; align-items: baseline; gap: 10px; }
.dj-sc-total small { font-size: 13px; letter-spacing: .06em; color: rgba(255, 255, 255, .7); margin-right: auto; }
.dj-sc-n { font-family: 'Poppins', sans-serif; font-size: 48px; font-weight: 700; line-height: 1; color: var(--rc); transition: color .2s; }
.dj-sc-total span { font-family: 'Poppins', sans-serif; font-size: 16px; color: rgba(255, 255, 255, .65); }
.dj-sc-bar { position: relative; height: 10px; margin: 16px 0 26px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.dj-sc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--rc); transition: width .2s, background .2s; }
.dj-sc-bar span { position: absolute; top: 14px; left: calc(var(--p) * 1%); transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.dj-sc-bar span::before { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 12px; background: rgba(255, 255, 255, .35); }
.dj-sc-band { margin: 0; font-size: 17px; font-weight: 700; color: var(--rc); }
.dj-sc-desc { margin: 6px 0 0; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .88); word-break: keep-all; }
.dj-sc-desc:empty { display: none; }
.dj-sc-reset { margin-top: 16px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: none; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.dj-sc-reset:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 760px) { .dj-sc-groups { grid-template-columns: minmax(0, 1fr); } .dj-sc-res { padding: 22px 18px 18px; } .dj-sc-n { font-size: 42px; } }
/* (10-12) 아래 고정 점수바 → 우측 고정 패널로 교체 */

/* 악순환 다섯 단계 */
.dj-cycle { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; counter-reset: c; }
.dj-cycle li { position: relative; padding: 16px 14px 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); border-top: 0; box-shadow: inset 0 3px 0 var(--c); }
.dj-cycle li + li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 9px; height: 9px; border-top: 2px solid #c7b9a6; border-right: 2px solid #c7b9a6; transform: translateY(-50%) rotate(45deg); }
.dj-cycle small { display: block; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--c); }
.dj-cycle b { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.dj-cycle-back { position: relative; margin: 0 0 0 calc((100% + 22px) / 5); padding: 26px 0 0 0; font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.dj-cycle-back::before { content: ""; position: absolute; left: 10%; right: 9%; top: 0; height: 16px; border: 2px dashed #d27c6c; border-top: 0; }
.dj-cycle-back::after { content: ""; position: absolute; left: calc(10% - 4px); top: -4px; width: 8px; height: 8px; border-top: 2px solid #d27c6c; border-left: 2px solid #d27c6c; transform: rotate(45deg); }
.dj-cycle-back span { display: inline-block; margin-right: 8px; padding: 4px 10px; border-radius: 999px; background: #b8483e; color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; }
.dj-page #dj-loop .et-pair { margin-top: 40px; }
@media (max-width: 1199px) {
  .dj-cycle { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dj-cycle li { border-top: 1px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: inset 3px 0 0 var(--c); padding-left: 18px; }
  .dj-cycle li + li::before { left: 50%; top: -12px; transform: translateX(-50%) rotate(135deg); }
  .dj-cycle-back { margin: 18px 0 0; padding: 16px 18px; border: 2px dashed #e3b1a7; background: #fdf5f3; }
  .dj-cycle-back::before, .dj-cycle-back::after { display: none; }
}

/* 진단 네 가지 — 2×2 */
@media (min-width: 900px) { .dj-page .dj-dx4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 치료 아코디언 본문 */
.dj-page .et-tx-bd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 18px; }
.dj-page .et-tx-bd.is-1 { grid-template-columns: minmax(0, 1fr); }
.dj-page .et-tx-bd h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--c); }
.dj-page .et-tx-bd p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.dj-tx-p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.dj-sub3 { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dj-sub3.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dj-sub3 li { padding: 16px 16px 14px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.dj-sub3 b { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }
.dj-sub3 p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.dj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.dj-tags span { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-size: 13px; font-weight: 600; line-height: 1.2; }
.dj-study { position: relative; margin-top: 22px; padding: 26px 18px 16px; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); background: color-mix(in srgb, var(--c) 4%, #fff); }
.dj-study .ac-pill { position: absolute; top: 0; left: 16px; transform: translateY(-50%); background: var(--c); }
.dj-study p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.dj-study .dj-study-n { margin-top: 8px; font-size: 13.5px; color: #8a7f74; }
.dj-page .dj-honest { margin-top: 22px; }
.dj-dl { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; margin: 18px 0 0; padding: 16px 18px; background: color-mix(in srgb, var(--c) 5%, #fff); }
.dj-dl dt { font-size: 13.5px; font-weight: 700; color: var(--c); padding-top: 2px; }
.dj-dl dd { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 760px) {
  .dj-page .et-tx-bd, .dj-sub3, .dj-sub3.is-2 { grid-template-columns: minmax(0, 1fr); }
  .dj-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .dj-dl dd { margin-bottom: 8px; }
}

/* 처방 세 축 · 담적 처방 + 교감단 */
.dj-axis { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 14px; }
.dj-axis li { position: relative; padding: 30px 18px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.dj-axis .ac-pill { position: absolute; top: 0; left: 16px; transform: translateY(-50%); background: var(--c); }
.dj-axis b { display: block; font-size: 16.5px; font-weight: 700; color: var(--c); }
.dj-axis p { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 899px) { .dj-axis { grid-template-columns: minmax(0, 1fr); } }
.dj-combo { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; margin-top: 18px; }
.dj-combo-n { padding: 18px 18px 16px; background: #fff; border: 1px solid #e3d6c4; }
.dj-combo-n small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #9a6328; }
.dj-combo-n b { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.dj-combo-n span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
.dj-combo-n.is-b { border-color: #d9d0ea; } .dj-combo-n.is-b small { color: #7458a6; }
.dj-combo-n.is-end { background: #9a6328; border-color: #9a6328; } .dj-combo-n.is-end small, .dj-combo-n.is-end b, .dj-combo-n.is-end span { color: #fff; } .dj-combo-n.is-end small { opacity: .8; }
.dj-combo-op { display: grid; place-items: center; font-style: normal; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: #b9a58c; }
@media (max-width: 899px) { .dj-combo { grid-template-columns: minmax(0, 1fr); } .dj-combo-op { height: 34px; } .dj-combo-op.is-eq { transform: rotate(90deg); } }
.dj-page .dj-src { margin-top: 22px; }

/* 치료 흐름 단계 안 목록 */
.dj-step-l { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.dj-step-l li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.dj-step-l li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--c); opacity: .6; }
.dj-step-l b { color: var(--tg-ink); }

/* ══ 2026-10-12 피부·뷰티 공용 — 치료 전후 사진(.ba) : 사례 카드 = BEFORE|AFTER 한 쌍, 처음 4건만 보이고 [더 보기]로 나머지 (고객 261001 탈모두피 요청 기준, 모든 환자 사진에 공통) ══ */
.ba { --ba-c: var(--fp, #137a52); }
.ba-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.ba-case { margin: 0; background: #fff; border: 1px solid #e3e8e5; box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.ba-case.is-more { display: none; }
.ba.is-open .ba-case.is-more { display: block; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0; background: #fff; }
.ba-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #f1f3f2; }
.ba-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-tag { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(40, 46, 44, .82); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; }
.ba-img.is-after .ba-tag { background: var(--ba-c); }
.ba-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 13px 16px 14px; }
.ba-cap b { font-size: 15.5px; font-weight: 700; color: var(--tg-ink); }
.ba-cap span { font-size: 14px; color: var(--tg-body); word-break: keep-all; }
.ba-foot { display: flex; justify-content: center; margin-top: 24px; }
.ba-more { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--ba-c); background: #fff; color: var(--ba-c); font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.ba-more:hover { background: var(--ba-c); color: #fff; }
.ba-more::after { content: "+"; font-family: 'Poppins', sans-serif; font-size: 17px; line-height: 1; }
.ba.is-open .ba-more::after { content: "−"; }
.ba-note { margin-top: 22px; }
@media (max-width: 760px) {
  .ba-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ba-tag { left: 8px; top: 8px; padding: 4px 8px; font-size: 10.5px; }
  .ba-cap { padding: 11px 14px 12px; }
}
/* ══ 2026-10-12 여드름(skin-acne) — 고객 초안(261002 여드름) 재구성. 래퍼 ac-page ae-page, 쿨 틸 #3f7f8c. 이명·담적증(et-/dj-) 부품 일부 공유 ══ */
.ae-page { --ac-green: #3f7f8c; --ac-green-soft: #e7f1f3; --fp: #3f7f8c; --fp-soft: #e7f1f3; --fp-bg: #f3f8f9; --cr: #3f7f8c; }
.tg-ans-page.ae-page { --tg-beauty: #3f7f8c; --tg-beauty-soft: #e7f1f3; }
.ae-page .hx-eyebrow { color: #3f7f8c; }
.ae-page #hx-faq.faq-flat { --fq: #3f7f8c; --fq-soft: #e7f1f3; --fq-bg: #f3f8f9; --fq-ring: rgba(63, 127, 140, .35); --fq-ring2: rgba(63, 127, 140, .45); }
.ae-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(120, 190, 205, .36) 62%); }
.ae-page .ac-check { --ac-red: #3f7f8c; --ac-red-soft: #eef6f7; }
.tile-tbl.is-ae { --tc: #3f7f8c; }
.ae-page .ad-sym-mq { --fx-soft: #f1f7f8; --fx-line: rgba(63, 127, 140, .18); }
.ae-page .ad-sym-mq .fx-marquee-row li span { background: #3f7f8c; }

/* 세 가지 원인 — 한자 워터마크 카드 + 얼굴 아이콘(마스크) + 3단 연쇄 + 결과 */
.ae-cause3 { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 34px; }
.ae-cause3 > li { position: relative; padding: 36px 26px 24px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.ae-cause3 > li > .ac-pill { left: 22px; background: var(--c); }
.ae-cause3 .fp-hanja { top: 14px; right: 20px; font-size: 70px; opacity: .1; }
.ae-cause-hd { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 22px; align-items: center; padding-right: 54px; }
.ae-face { display: block; width: 104px; height: 104px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ae-cause-hd h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--c); }
.ae-cause-hd p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.ae-cause-hd b { color: var(--c); }
.ae-chain { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; counter-reset: ae; }
.ae-chain li { position: relative; display: flex; align-items: center; min-height: 58px; padding: 10px 14px 10px 42px; background: color-mix(in srgb, var(--c) 7%, #fff); font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; counter-increment: ae; }
.ae-chain li::before { content: counter(ae); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; line-height: 1; }
.ae-chain li + li::after { content: ""; position: absolute; left: -17px; top: 50%; width: 8px; height: 8px; border-top: 2px solid color-mix(in srgb, var(--c) 55%, #fff); border-right: 2px solid color-mix(in srgb, var(--c) 55%, #fff); transform: translateY(-50%) rotate(45deg); }
.ae-res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; padding: 12px 16px; border: 1px dashed color-mix(in srgb, var(--c) 45%, #fff); font-size: 16px; font-weight: 700; color: var(--c); word-break: keep-all; }
.ae-res span { padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
@media (max-width: 760px) {
  .ae-cause3 { gap: 30px; }
  .ae-cause3 > li { padding: 32px 18px 20px; }
  .ae-cause3 .fp-hanja { font-size: 56px; right: 14px; }
  .ae-cause-hd { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-right: 0; }
  .ae-face { width: 78px; height: 78px; }
  .ae-cause-hd h3 { font-size: 17.5px; }
  .ae-cause-hd p { font-size: 15px; }
  .ae-chain { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ae-chain li { min-height: 0; }
  .ae-chain li + li::after { left: 50%; top: -13px; transform: translateX(-50%) rotate(135deg); }
  .ae-res { font-size: 15.5px; }
}

/* 악화의 고리 — 원형 도해 */
.ae-ring { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 22px auto 0; }
.ae-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ae-ring-base { fill: none; stroke: rgba(192, 80, 58, .14); stroke-width: 1.5; }
.ae-ring-arc { fill: none; stroke: #c0503a; stroke-width: 1.8; }
.ae-ring-svg marker path { fill: #c0503a; }
.ae-ring-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.ae-ring-c b { display: block; font-family: 'Noto Serif KR', serif; font-size: 20px; font-weight: 700; color: #c0503a; }
.ae-ring-c small { display: block; margin-top: 4px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .18em; color: #8a958f; }
.ae-node { position: absolute; display: block; width: 150px; padding: 12px 10px 11px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); box-shadow: 0 8px 22px -14px rgba(20, 32, 27, .35); text-align: center; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.ae-node small { display: block; margin-bottom: 4px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--c); }
.ae-node.is-t { left: 50%; top: 18%; transform: translate(-50%, -50%); }
.ae-node.is-b { left: 50%; top: 82%; transform: translate(-50%, -50%); }
.ae-node.is-r { left: 82%; top: 50%; transform: translate(-50%, -50%); }
.ae-node.is-l { left: 18%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 560px) {
  .ae-ring-c b { font-size: 16px; }
  .ae-ring-c small { font-size: 9.5px; letter-spacing: .12em; }
  .ae-node { width: 112px; padding: 9px 6px 8px; font-size: 13.5px; }
  .ae-node small { font-size: 9.5px; letter-spacing: .06em; }
  .ae-node.is-r { left: auto; right: 0; transform: translateY(-50%); }
  .ae-node.is-l { left: 0; transform: translateY(-50%); }
}

/* 두 개의 축 — 그림 카드 2열 */
.ae-axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.ae-axes article { display: flex; flex-direction: column; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.ae-axes figure { margin: 0; }
.ae-axes img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ae-axes-bd { position: relative; padding: 32px 22px 22px; }
.ae-axes-bd .ac-pill { left: 20px; background: var(--c); }
.ae-axes h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--c); }
.ae-axes p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.ae-axes p b { color: var(--tg-ink); }
.ae-page .ae-plus { margin-top: 36px; }
@media (max-width: 760px) { .ae-axes { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ae-axes-bd { padding: 30px 18px 18px; } .ae-axes h3 { font-size: 17.5px; } }

/* 처방 표 — 한자 · 부위 */
.ae-rx-tbl i { display: block; font-style: normal; font-family: 'Noto Serif KR', serif; font-size: 12.5px; font-weight: 500; opacity: .75; letter-spacing: .02em; }
.ae-rx-tbl tbody th small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; opacity: .85; }
.ae-rx-tbl tbody td:last-child { font-weight: 600; color: var(--tg-ink); }
.ae-rx-tbl tbody td:last-child i { display: inline; margin-left: 4px; font-weight: 400; }

/* 시술 여섯 가지 */
.ae-page .ae-txs { margin-top: 0; }
.ae-page .ae-txs .et-more { margin-top: 12px; }
.ae-page .ae-scar .et-more { --c: #3f7f8c; margin-top: 14px; }
.ae-page .ae-scar { margin-top: 34px; }
/* ══ 2026-10-12 여드름흉터(skin-acne-scar) — 고객 초안 재구성. 래퍼 ac-page as-page, 바이올렛 #6a5a8c ══ */
.as-page { --ac-green: #6a5a8c; --ac-green-soft: #efecf5; --fp: #6a5a8c; --fp-soft: #efecf5; --fp-bg: #f7f5fa; --cr: #6a5a8c; }
.tg-ans-page.as-page { --tg-beauty: #6a5a8c; --tg-beauty-soft: #efecf5; }
.as-page .hx-eyebrow { color: #6a5a8c; }
.as-page #hx-faq.faq-flat { --fq: #6a5a8c; --fq-soft: #efecf5; --fq-bg: #f7f5fa; --fq-ring: rgba(106, 90, 140, .35); --fq-ring2: rgba(106, 90, 140, .45); }
.as-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(170, 150, 210, .36) 62%); }
.as-page .ac-check { --ac-red: #6a5a8c; --ac-red-soft: #f3f0f8; }
.tile-tbl.is-as { --tc: #6a5a8c; }
.as-page .ad-sym-mq { --fx-soft: #f3f0f8; --fx-line: rgba(106, 90, 140, .2); }
.as-page .fp-warn.is-info { border-color: #ddd5ea; }

/* 흉터의 종류 — 단면 그림이 위, 설명 + 깊이 눈금이 아래 */
.as-types { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 40px; }
.as-type { position: relative; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 10px 28px -18px rgba(40, 30, 60, .3); }
.as-type > .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); z-index: 1; padding: 6px 13px; background: var(--c); line-height: 1.2; letter-spacing: 0; }
.as-type-fig { margin: 0; padding: 26px 22px 10px; background: #fff; }
.as-type-fig img { display: block; width: 100%; height: auto; }
.as-type-bd { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 18px 30px; align-items: start; padding: 18px 26px 24px; border-top: 1px dashed color-mix(in srgb, var(--c) 28%, #fff); background: color-mix(in srgb, var(--c) 4%, #fff); }
.as-type h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--c); }
.as-type h3 small { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: color-mix(in srgb, var(--c) 70%, #fff); }
.as-type-no { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: color-mix(in srgb, var(--c) 55%, #fff); }
.as-type-txt p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.as-type-txt p b { color: var(--tg-ink); }
.as-type-meta { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
/* 깊이 눈금 — 솟음 · 표면 · 얕음 · 중간 · 깊음 중 해당 칸만 내용색 */
.as-scale { list-style: none; margin: 0 0 6px; padding: 0; flex-basis: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.as-scale li { position: relative; padding: 22px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.2; text-align: center; color: #9a94a6; }
.as-scale li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); }
.as-scale li:nth-child(1)::before { height: 6px; top: 6px; }
.as-scale li:nth-child(3)::before { height: 14px; } .as-scale li:nth-child(4)::before { height: 16px; } .as-scale li:nth-child(5)::before { height: 18px; }
.as-scale li:nth-child(3) { padding-top: 24px; } .as-scale li:nth-child(4) { padding-top: 26px; } .as-scale li:nth-child(5) { padding-top: 28px; }
.as-scale li.is-on { color: var(--c); font-weight: 700; }
.as-scale li.is-on::before { background: var(--c); }
.as-tag { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 40%, #fff); color: var(--c); font-size: 13px; font-weight: 600; line-height: 1.2; }
.as-tag.is-red { --c: #c0505a; } .as-tag.is-brown { --c: #9a6a3a; }
.as-type-flag { margin: 0; padding: 12px 26px; background: var(--c); color: #fff; font-size: 15px; line-height: 1.5; word-break: keep-all; }
.as-type-flag b { font-weight: 700; }
@media (max-width: 1199px) { .as-type-bd { grid-template-columns: minmax(0, 1fr); } .as-type-meta { max-width: 360px; } }
@media (max-width: 760px) {
  .as-types { gap: 34px; }
  .as-type-fig { padding: 24px 12px 6px; }
  .as-type-bd { padding: 16px 18px 20px; }
  .as-type h3 { font-size: 17.5px; }
  .as-type-txt p { font-size: 15px; }
  .as-type-flag { padding: 11px 18px; font-size: 14.5px; }
}

/* 세 단계 — 界 塡 平 */
.as-3way { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.as-3way li { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); font-size: 15.5px; color: var(--tg-ink); }
.as-3way b { display: grid; place-items: center; width: 34px; height: 34px; font-family: 'Noto Serif KR', serif; font-size: 20px; font-weight: 700; color: var(--c); }
.as-3way li + li { position: relative; }
.as-stage { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 40px; }
.as-stage > li { position: relative; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 10px 28px -18px rgba(40, 30, 60, .3); }
.as-stage > li > .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); z-index: 1; padding: 6px 13px; background: var(--c); line-height: 1.2; letter-spacing: 0; }
.as-stage-fig { margin: 0; padding: 24px 22px 8px; }
.as-stage-fig img { display: block; width: 100%; height: auto; }
.as-stage > li:first-child .as-stage-fig img { max-height: 420px; object-fit: contain; }
.as-stage-bd { position: relative; padding: 20px 26px 24px; border-top: 1px dashed color-mix(in srgb, var(--c) 28%, #fff); }
.as-stage-bd .fp-hanja { top: 12px; right: 20px; font-size: 72px; opacity: .1; color: var(--c); }
.as-stage-hd { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; padding-right: 80px; }
.as-stage-hd h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--c); }
.as-prog { display: inline-flex; gap: 4px; }
.as-prog i { width: 26px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, #fff); }
.as-prog i.is-on { background: var(--c); }
.as-stage-bd > p { position: relative; margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.as-stage-bd > p b { color: var(--tg-ink); }
.as-for { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 16px !important; padding: 12px 14px; background: color-mix(in srgb, var(--c) 7%, #fff); font-size: 15px !important; color: var(--tg-ink) !important; }
.as-for span { padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.as-for small { flex-basis: 100%; font-size: 14px; color: var(--tg-mute); }
.as-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.as-duo > div { padding: 14px 16px 15px; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.as-duo b { display: block; font-size: 16px; font-weight: 700; color: var(--c); }
.as-duo b small { margin-left: 6px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, #fff); }
.as-duo p { margin: 6px 0 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.as-page .as-cycle { margin-top: 40px; }
@media (max-width: 760px) {
  .as-stage { gap: 34px; }
  .as-stage-fig { padding: 24px 12px 4px; }
  .as-stage-bd { padding: 18px 18px 20px; }
  .as-stage-bd .fp-hanja { font-size: 56px; right: 14px; }
  .as-stage-hd { padding-right: 56px; }
  .as-stage-hd h3 { font-size: 18px; }
  .as-stage-bd > p { font-size: 15px; }
  .as-duo { grid-template-columns: minmax(0, 1fr); }
}

/* 보조 레이저 — fp-why 카드 + 치료 지도 칩 */
.as-page .as-dev { padding-top: 14px; row-gap: 30px; }
.as-page .as-dev > li { overflow: visible; background: #fff; }
.as-page .as-dev > li > .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 6px 13px; background: var(--c); line-height: 1.2; letter-spacing: .04em; font-family: 'Poppins', sans-serif; font-size: 12px; }
.as-page .as-dev h3 { margin: 4px 0 8px; padding-right: 50px; color: var(--c); }
.as-dev-for { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px !important; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.as-dev-for span { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--tg-mute); }
.as-dev-for em { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.2; }

/* 흉터별 치료 지도 표 */
.as-map-tbl tbody th small { display: block; margin-top: 3px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500; color: #8a8298; letter-spacing: .02em; }
.as-page .as-map-tbl td { white-space: normal !important; vertical-align: middle; }
.as-page .as-map-tbl td b { display: inline; margin: 0; font-size: inherit; font-weight: 600; color: var(--tg-ink); }
.as-page .as-map-tbl td:nth-of-type(1) { min-width: 230px; }
.as-chip { display: inline-block; margin: 3px 4px 3px 0; padding: 5px 11px; border-radius: 999px; background: #6a5a8c; color: #fff; font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.as-chip.is-aux { background: #fff; color: #6a5a8c; box-shadow: inset 0 0 0 1px rgba(106, 90, 140, .45); }
.as-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.as-legend > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.as-legend .as-chip { margin: 0; }

/* 치료의 흐름 */
.as-page .as-calm img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
.as-page .as-steps em { background: #efecf5; color: #6a5a8c; }
.as-page .as-acne { margin-top: 40px; }
.as-page .as-acne .et-more { margin-top: 14px; }
@media (min-width: 1200px) {
  .as-page .as-dev { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .as-page .as-dev > li { grid-column: span 2; }
  .as-page .as-dev > li:nth-child(n+4) { grid-column: span 3; }
}
.as-page .as-dev .fp-no { top: 14px; bottom: auto; right: 16px; font-size: 56px; }
@media (max-width: 760px) { .as-page .as-dev .fp-no { font-size: 46px; } .as-page .as-dev h3 { font-size: 17.5px; } }
/* 모바일 — 가로로 긴 단면 그림은 양옆 평평한 피부를 잘라 흉터 부분을 크게 */
@media (max-width: 560px) {
  .as-type-fig img, .as-stage > li:not(:first-child) .as-stage-fig img { aspect-ratio: 2.1 / 1; object-fit: cover; object-position: 50% 50%; }
  .as-type-fig, .as-stage-fig { padding-left: 0; padding-right: 0; }
}
/* ══ 2026-10-12 탈모·두피(skin-hair) — 고객 초안 재구성. 래퍼 ac-page hr-page, 세이지 올리브 #5f7442 ══ */
.hr-page { --ac-green: #5f7442; --ac-green-soft: #eef2e8; --fp: #5f7442; --fp-soft: #eef2e8; --fp-bg: #f6f8f2; --cr: #5f7442; }
.tg-ans-page.hr-page { --tg-beauty: #5f7442; --tg-beauty-soft: #eef2e8; }
.hr-page .hx-eyebrow { color: #5f7442; }
.hr-page #hx-faq.faq-flat { --fq: #5f7442; --fq-soft: #eef2e8; --fq-bg: #f6f8f2; --fq-ring: rgba(95, 116, 66, .35); --fq-ring2: rgba(95, 116, 66, .45); }
.hr-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(170, 196, 130, .38) 62%); }
.hr-page .ac-check { --ac-red: #5f7442; --ac-red-soft: #f1f5ea; }
.tile-tbl.is-hr { --tc: #5f7442; }
.hr-page .fp-warn.is-info { border-color: #d6e0c8; }

/* 상단 도해 — 세로 일러스트 + 좌우 설명 */
.hr-hero { border-radius: 0; box-shadow: none; border: 1px solid #e3e8dc; }
.hr-hero .ad-hero-pic img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: contain; background: #fff; }
.hr-hero-cap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid #e3e8dc; }
.hr-hero-cap span { padding: 14px 16px 14px; font-size: 14px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
.hr-hero-cap span + span { border-left: 1px solid #e3e8dc; }
.hr-hero-cap b { display: block; margin-bottom: 4px; font-family: 'Noto Serif KR', serif; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.hr-hero-cap .is-hot b { color: #b8483e; } .hr-hero-cap .is-cool b { color: #3b4f86; }
.hr-hero-cap em { grid-column: 1 / -1; padding: 11px 16px; background: #f6f8f2; border-top: 1px solid #e3e8dc; font-style: normal; font-size: 14px; font-weight: 600; color: #5f7442; text-align: center; word-break: keep-all; }

/* 이중 레이어 — 두피 단면 + 표시 */
.hr-layer { margin: 0; background: #fff; border: 1px solid #e3e8dc; }
.hr-layer-pic { position: relative; }
.hr-layer-pic img { display: block; width: 100%; height: auto; }
.hr-mk { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); padding: 6px 12px; border-radius: 999px; background: #a2563c; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.hr-mk:first-of-type { background: #5f7442; }
.hr-mk::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: inherit; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0, 0, 0, .12); }
.hr-mk.is-r { transform: translate(18px, -50%); } .hr-mk.is-r::after { left: -24px; }
.hr-mk.is-l { transform: translate(calc(-100% - 18px), -50%); } .hr-mk.is-l::after { right: -24px; }
.hr-tag { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid #c9d6b8; color: #4c5e34; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.hr-tag.is-tense { border-color: #e6bfb3; color: #a2563c; }
.hr-layer figcaption { padding: 12px 16px; border-top: 1px solid #e3e8dc; font-size: 14px; color: var(--tg-mute); word-break: keep-all; }

/* 시술 순서 3칸 */
.hr-seq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; }
.hr-seq li { position: relative; padding: 16px 16px 15px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); }
.hr-seq li + li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #b5c1a6; border-right: 2px solid #b5c1a6; transform: translateY(-50%) rotate(45deg); }
.hr-seq small { display: block; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--c); }
.hr-seq b { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.hr-seq span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--tg-body); word-break: keep-all; }
.hr-page .hr-lay3 { margin-top: 34px; }
.hr-page .hr-lay3 h3 { font-size: 18px; line-height: 1.45; word-break: keep-all; padding-right: 30px; }
.hr-page .hr-lay3 p b { color: var(--c); }
.hr-page #hr-sig .ac-check { margin-top: 40px; }
.hr-check-msg { flex-basis: 100%; margin-top: 6px; text-align: right; }
.ac-check.is-on .hr-check-msg { color: #5f7442; font-weight: 600; }

/* 원형탈모 계열 — 그림 + 설명 행 */
.hr-alo { display: grid; gap: 30px; padding-top: 14px; }
.hr-alo article { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; padding: 30px 24px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -18px rgba(20, 32, 27, .3); }
.hr-alo figure { margin: 0; background: #fff; }
.hr-alo figure img { display: block; width: 100%; height: auto; }
.hr-alo .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); background: var(--c); }
.hr-alo h3 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--c); }
.hr-alo h3 small { display: block; margin-top: 3px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: #8a958f; }
.hr-alo dl { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 9px 12px; margin: 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.hr-alo dt { font-size: 13.5px; font-weight: 700; color: var(--c); padding-top: 2px; }
.hr-alo dd { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }

/* 원형탈모 범위 — 넓어지는 막대 */
.hr-prog { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid #dfe5d6; }
.hr-prog li { display: grid; grid-template-columns: 30px 170px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 14px; padding: 11px 0; border-bottom: 1px dashed #e1e6da; }
.hr-prog small { grid-row: 1 / 3; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--c); }
.hr-prog b { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.hr-prog span { grid-column: 2; grid-row: 2; font-size: 14px; color: var(--tg-body); word-break: keep-all; }
.hr-prog i { grid-column: 3; grid-row: 1 / 3; height: 16px; width: calc(var(--w) * 1%); background: var(--c); border-radius: 999px; }
.hr-prog-cap { margin: 18px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.hr-prog-cap b { color: var(--tg-ink); }

/* 왜 한의학인가 — 순서 박스 */
.hr-order .hr-order-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.hr-order .hr-order-row b { padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid #c9d6b8; color: #5f7442; font-size: 15px; font-weight: 700; line-height: 1.2; }
.hr-order .hr-order-row i { width: 28px; height: 2px; background: #b5c1a6; position: relative; }
.hr-order .hr-order-row i::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; border-top: 2px solid #b5c1a6; border-right: 2px solid #b5c1a6; transform: translateY(-50%) rotate(45deg); }

/* 변증 기준 — 한자 제목 */
.hr-page .hr-prin h3 { font-family: 'Noto Serif KR', serif; }
.hr-page .hr-prin p b { display: block; margin-bottom: 4px; color: var(--tg-ink); }
.hr-tbl tbody th small { display: block; margin-top: 2px; font-family: 'Noto Serif KR', serif; font-size: 12.5px; font-weight: 500; opacity: .8; }
.hr-tbl tbody th { white-space: nowrap; }

/* 장점 — 아이콘은 배경 원 없이 옅은 내용색 */
.hr-page .hr-adv .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.hr-page .hr-adv .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }

/* 유형별 접근 */
.hr-type-p { margin: 0; padding: 0 24px; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.hr-type-p b { color: var(--tg-ink); }
.hr-sub4 { list-style: none; margin: 16px 24px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hr-sub4 li { padding: 12px 14px; background: color-mix(in srgb, var(--c) 5%, #fff); border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); font-size: 14px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
.hr-sub4 b { display: block; margin-bottom: 2px; font-size: 15px; color: var(--c); }
.hr-dx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 24px 0; }
.hr-dx b { margin-right: 6px; font-size: 13.5px; font-weight: 700; color: var(--c); }
.hr-dx span { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--tg-ink); }
.hr-types .et-rx { margin: 16px 24px 24px; }

/* 치료 흐름 */
.hr-legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.hr-legend li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--tg-body); }
.hr-legend b { padding: 5px 11px; border-radius: 999px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .06em; }
.hr-legend .is-a b { background: #8a6a2a; } .hr-legend .is-b b { background: #5f7442; }
.hr-steps .ac-tx-chips { background: color-mix(in srgb, var(--c) 7%, #fff); }
.hr-steps .ac-tx-chips li { border-color: color-mix(in srgb, var(--c) 28%, #fff); }
.hr-steps .ac-tx-chips small { color: var(--c); }
.hr-steps .ac-tx-chips li.is-sig { background: var(--c); border-color: var(--c); color: #fff; }
.hr-steps .ac-tx-chips li.is-sig small { color: rgba(255, 255, 255, .85); }
.hr-steps p b { color: var(--tg-ink); }
.hr-dec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hr-dec-q { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 15.5px; font-weight: 700; color: var(--tg-ink); }
.hr-dec-q span { padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; }
.hr-dec-yes, .hr-dec-no { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); background: #fff; }
.hr-dec-yes { background: color-mix(in srgb, var(--c) 8%, #fff); }
.hr-dec-no { border-style: dashed; }
.hr-dec small { display: block; font-size: 12.5px; font-weight: 700; color: var(--c); }
.hr-dec b { display: block; margin-top: 4px; font-size: 15.5px; color: var(--tg-ink); }
.hr-dec-no b { color: #7f8c87; }
.hr-dec span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }

/* 12가지 치료 아코디언 */
.hr-page .hr-core b { font-family: 'Noto Serif KR', serif; color: #5f7442; }
.hr-page .hr-core li { border-radius: 0; background: #f6f8f2; border-color: #d6e0c8; }
.hr-page .hr-adv > li:last-child { grid-column: 1 / -1; }
.hr-page .hr-txs + .ta-sub { margin-top: 48px; }
.hr-tx-bd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; padding: 0 24px; }
.hr-tx-bd p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.hr-tx-bd p b { color: var(--c); }
.hr-tx-note { margin: 14px 24px 0; padding: 12px 16px; background: color-mix(in srgb, var(--c) 7%, #fff); font-size: 15px; line-height: 1.7; color: var(--tg-ink); word-break: keep-all; }
.hr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 24px 22px; }
.hr-tags span { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-size: 13px; font-weight: 600; line-height: 1.2; }
.hr-tags span.is-freq { background: var(--c); color: #fff; }
.hr-txs .et-more { margin: -6px 24px 22px; }

/* 고압산소 */
@media (min-width: 900px) { .hr-page .hr-hbot4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hr-page .hr-hbot4 h3 { font-size: 18px; line-height: 1.45; word-break: keep-all; padding-right: 40px; }
.hr-page .hr-hbot4 p b { color: var(--c); }
.hr-chamber { margin: 30px 0 0; background: #fff; border: 1px solid #e3e8dc; }
.hr-chamber img { display: block; width: 100%; height: auto; }
.hr-chamber figcaption { padding: 10px 16px; border-top: 1px solid #e3e8dc; font-size: 14px; color: var(--tg-mute); }
.hr-page .hr-more { margin-top: 22px; --c: #2f6fb3; }

@media (max-width: 1099px) {
  .hr-tx-bd { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .hr-seq { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hr-seq li + li::before { left: 50%; top: -15px; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 760px) {
  .hr-hero-cap span { padding: 12px 12px; font-size: 13.5px; }
  .hr-hero-cap b { font-size: 15px; }
  .hr-alo article { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 30px 18px 18px; }
  .hr-alo figure { max-width: 200px; margin: 0 auto; }
  .hr-type-p { padding: 0 16px; font-size: 15px; }
  .hr-sub4 { margin: 14px 16px 0; grid-template-columns: minmax(0, 1fr); }
  .hr-dx { margin: 14px 16px 0; }
  .hr-types .et-rx { margin: 14px 16px 20px; }
  .hr-tx-bd { padding: 0 16px; }
  .hr-tx-bd p { font-size: 15px; }
  .hr-tx-note { margin: 12px 16px 0; }
  .hr-tags { margin: 14px 16px 18px; }
  .hr-txs .et-more { margin: -4px 16px 18px; }
  .hr-dec { grid-template-columns: minmax(0, 1fr); }
  .hr-page .hr-lay3 h3, .hr-page .hr-hbot4 h3 { font-size: 17px; }
}
@media (max-width: 560px) {
  .hr-mk { padding: 4px 8px; font-size: 11px; }
  .hr-mk::after { width: 8px; height: 8px; margin-top: -4px; box-shadow: 0 0 0 2px #fff; }
  .hr-mk.is-r { transform: translate(12px, -50%); } .hr-mk.is-r::after { left: -16px; }
  .hr-mk.is-l { transform: translate(calc(-100% - 12px), -50%); } .hr-mk.is-l::after { right: -16px; }
  .hr-tag { display: none; }
  .hr-prog li { grid-template-columns: 22px 118px minmax(0, 1fr); column-gap: 10px; }
  .hr-prog b { font-size: 15px; }
  .hr-prog span { font-size: 13px; }
  .hr-prog i { height: 12px; }
}
/* ══ 2026-10-12 안면홍조·지루성피부염(skin-rosacea) — 고객 초안 재구성. 래퍼 ac-page ro-page, 로즈 레드 #b2525e. 홍조 #c0474f / 지루성 #a8742a 를 페이지 전체에서 같은 색으로 구분 ══ */
.ro-page { --ac-green: #b2525e; --ac-green-soft: #f8e9eb; --fp: #b2525e; --fp-soft: #f8e9eb; --fp-bg: #fcf5f6; --cr: #b2525e; --ro-flush: #c0474f; --ro-seb: #a8742a; }
.tg-ans-page.ro-page { --tg-beauty: #b2525e; --tg-beauty-soft: #f8e9eb; }
.ro-page .hx-eyebrow { color: #b2525e; }
.ro-page #hx-faq.faq-flat { --fq: #b2525e; --fq-soft: #f8e9eb; --fq-bg: #fcf5f6; --fq-ring: rgba(178, 82, 94, .35); --fq-ring2: rgba(178, 82, 94, .45); }
.ro-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(232, 150, 160, .36) 62%); }
.ro-page .ac-check { --ac-red: #b2525e; --ac-red-soft: #f8e9eb; }
.tile-tbl.is-ro { --tc: #b2525e; }

/* 리드 사진 — 얼굴 일러스트가 잘리지 않게 5:4 */
.ro-page .ro-hero .ad-hero-pic { aspect-ratio: 5 / 4; overflow: hidden; }
.ro-page .ro-hero .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ro-page .hx-keys b { margin-right: 6px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: #b2525e; }
.ro-page .ro-sym-note { margin-top: 22px; }

/* 세로 사진(침 시술) — 왼쪽 제목 아래 */
.ro-page .ro-pic-tall img { aspect-ratio: 4 / 5; object-position: 50% 28%; max-height: 560px; }

/* 홍조 · 지루성 표시 알약 (표 · 시술 카드 공용) */
.ro-k { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #fff; vertical-align: 1px; }
.ro-k.is-flush { background: var(--ro-flush); }
.ro-k.is-seb { background: var(--ro-seb); }
.ro-k + .ro-k { margin-left: 4px; }
.ro-page .ta-lede .ro-k { margin: 0 2px; }
.ro-for { margin: 14px 0 0 !important; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ro-for::before { content: "주로 다루는 쪽"; margin-right: 4px; font-size: 13px; font-weight: 600; color: #8a8f8c; }
.ro-for .ro-k + .ro-k { margin-left: 0; }

/* 홍조 vs 지루성 — et-duo 카드 */
.ro-duo article.is-flush { --c: var(--ro-flush); }
.ro-duo article.is-seb { --c: var(--ro-seb); }
.ro-duo article { display: flex; flex-direction: column; }
.ro-duo h3 { padding-right: 70px; }
.ro-duo-at { position: relative; display: flex; align-items: baseline; gap: 12px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.ro-duo-at small { font-size: 13.5px; font-weight: 600; color: #8a8f8c; }
.ro-duo-at b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--c); }
.ro-duo-p { position: relative; margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.ro-duo .et-duo-x { color: #b2525e; }

/* 비교 표 — 홍조 열 / 지루성 열을 각 색으로 */
.ro-page .tg-table.ro-cmp { min-width: 0; table-layout: fixed; }
.ro-page .ro-cmp thead th:first-child { width: 22%; }
.ro-page .ro-cmp thead th:nth-child(2) { background: var(--ro-flush); }
.ro-page .ro-cmp thead th:nth-child(3) { background: var(--ro-seb); }
.ro-page .ro-cmp thead th small { display: block; margin-top: 2px; font-family: 'Noto Serif KR', serif; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; }
.ro-page .ro-cmp tbody th { white-space: normal; word-break: keep-all; font-size: 16px; }
.ro-page .ro-cmp tbody td { white-space: normal !important; font-size: 15.5px; word-break: keep-all; vertical-align: top; }
.ro-page .ro-cmp tbody td:nth-of-type(1) { background: #fbeff0; }
.ro-page .ro-cmp tbody td:nth-of-type(2) { background: #f9f2e6; }
.ro-page .ro-cmp td .ro-k { display: block; width: fit-content; box-sizing: content-box; margin: 0 0 8px; font-size: 13px; color: #fff; }
.ro-page .ro-root-box { margin-top: 40px; }

/* 상열하한 — 몸의 온도 지도 */
.ro-map { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 8px; }
.ro-map::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 999px; background: linear-gradient(#c0392f, #c4553c 30%, #8a6a7a 72%, #3b6a9a); }
.ro-map::after { content: "上熱"; position: absolute; left: -2px; top: -26px; font-family: 'Noto Serif KR', serif; font-size: 13px; font-weight: 700; color: #c0392f; }
.ro-map li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 18px; background: color-mix(in srgb, var(--t) 7%, #fff); border: 1px solid color-mix(in srgb, var(--t) 22%, #fff); }
.ro-map li::before { content: ""; position: absolute; left: -23px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; border: 3px solid var(--t); box-sizing: border-box; }
.ro-map-part { font-size: 15.5px; font-weight: 700; color: var(--t); word-break: keep-all; }
.ro-map p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.ro-map p b { color: var(--t); }
.ro-map li:last-child::after { content: "下寒"; position: absolute; left: -28px; bottom: -26px; font-family: 'Noto Serif KR', serif; font-size: 13px; font-weight: 700; color: #3b6a9a; }
.ro-page .ro-map { margin-top: 30px; margin-bottom: 26px; }
.ro-map-cap { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.ro-map-cap b { color: var(--tg-ink); }

/* 수승화강 흐름 — 홍조/지루성 갈래 색 */
.ro-loop .et-loop-n.is-start small { color: #3b6a9a; }
.ro-loop .et-loop-n.is-a { border-color: color-mix(in srgb, var(--ro-flush) 35%, #fff); background: color-mix(in srgb, var(--ro-flush) 6%, #fff); }
.ro-loop .et-loop-n.is-a small, .ro-loop .et-loop-n.is-a b { color: var(--ro-flush); }
.ro-loop .et-loop-n.is-b { border-color: color-mix(in srgb, var(--ro-seb) 35%, #fff); background: color-mix(in srgb, var(--ro-seb) 6%, #fff); }
.ro-loop .et-loop-n.is-b small, .ro-loop .et-loop-n.is-b b { color: var(--ro-seb); }
.ro-loop .et-loop-n.is-end { background: #b2525e; border-color: #b2525e; }
.ro-loop .et-loop-n small { letter-spacing: .08em; }

/* 자율신경 신호 — 아이콘 5줄 (이 섹션의 아이콘은 여기만) */
.ro-sig { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ro-sig li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.ro-sig li:last-child { grid-column: 1 / -1; }
.ro-sig-ico { display: block; width: 40px; height: 40px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ro-sig p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }

/* 감정홍조 3단 · 특수관리 3종 — 넓은 화면 3열 */
@media (min-width: 1200px) { .ro-page .ro-emo, .ro-page .ro-care { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ro-page .ro-emo h3 { font-size: 18px; }
.ro-page .ro-emo p, .ro-page .ro-care p { font-size: 15px; }
.ro-page .ro-early { margin-top: 34px; }
.ro-page .fp-stage h3 small, .ro-page .ro-skin h3 small, .ro-tri h3 small { margin-left: 6px; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; color: var(--c); opacity: .85; }
.ro-page .ro-care .fp-hanja.ro-en { font-family: 'Poppins', sans-serif; font-size: 54px; }
.ro-page .ro-care .ro-for { padding-top: 12px; border-top: 1px solid #eef1ef; }

/* 교감단 박스 */
.ro-rx { position: relative; padding: 34px 24px 24px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.ro-rx .ac-pill { background: var(--c); }
.ro-rx-quote { margin: 0; padding: 0 0 18px; border-bottom: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.ro-rx-quote span { display: block; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 22px; font-weight: 700; letter-spacing: .12em; color: var(--c); }
.ro-rx-quote small { display: block; margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.ro-rx .dj-dl { margin-top: 18px; }

/* 3단계 흐름 · 진단 3종 */
.ro-steps p b { color: var(--tg-ink); }
@media (min-width: 1200px) { .ro-page .ro-dx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ro-page .ro-dx article { padding: 32px 20px 22px; }
.ro-page .ro-dx h3 { font-size: 18px; }
.ro-page .ro-dx p { margin: 0; font-size: 15px; }
.ro-page .ro-dx p b { color: var(--lc); }
.ro-page .ro-dx figure img { height: 170px; }
.ro-page .ro-dx-note { margin-top: 34px; }

/* 삼중사혈 — 사진 3장 흐름 */
.ro-tri { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
.ro-tri > li { position: relative; display: flex; flex-direction: column; padding: 30px 18px 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.ro-tri .ac-pill { background: var(--c); }
.ro-tri > li + li::before { content: ""; position: absolute; left: -19px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #c9a9ad; border-right: 2px solid #c9a9ad; transform: translateY(-50%) rotate(45deg); }
.ro-tri-no { position: absolute; right: 14px; top: 8px; font-family: 'Noto Serif KR', serif; font-size: 40px; font-weight: 700; line-height: 1; color: var(--c); opacity: .14; pointer-events: none; }
.ro-tri figure { margin: 0 0 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #f3f0ef; }
.ro-tri figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ro-tri h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--c); }
.ro-tri p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.ro-tri p b { color: var(--tg-ink); }
.ro-tri .et-more { align-self: flex-start; margin-top: 14px; }
.ro-tri-cap { margin: 22px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.ro-page .ro-blood { margin-top: 26px; }
@media (max-width: 1199px) {
  .ro-tri { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ro-tri > li { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .ro-tri figure { grid-row: span 4; margin: 0; }
  .ro-tri > li + li::before { left: 50%; top: -22px; transform: translateX(-50%) rotate(135deg); }
}

/* 함께 쓰는 치료 아코디언 본문 */
.ro-tx-in { padding: 0 24px 22px 72px; }
.ro-tx-in .dj-tx-p { margin: 0; }
.ro-tx-in .dj-tx-p a { color: var(--c); font-weight: 600; }
.ro-tx-in .dj-tags { margin-top: 14px; }
.ro-tx-in .dj-tags.is-cold span:first-child { background: #e6eef6; color: #3b6a9a; }

/* STEP 2 시술 카드 — 2열 */
.ro-skin.fp-why > li:last-child { grid-column: auto; }
.ro-skin h3 { margin-bottom: 8px; }
.ro-page .ro-skin > li.ro-skin-note { --c: #b2525e; }

@media (max-width: 760px) {
  .ro-duo h3 { padding-right: 40px; }
  .ro-duo-at b { font-size: 24px; }
  .ro-sig { grid-template-columns: minmax(0, 1fr); }
  .ro-sig li:last-child { grid-column: auto; }
  .ro-map li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; }
  .ro-tri > li { display: flex; padding: 28px 16px 18px; }
  .ro-tri figure { margin: 0 0 14px; }
  .ro-tx-in { padding: 0 16px 18px; }
  .ro-rx { padding: 32px 18px 20px; }
  .ro-rx-quote span { font-size: 19px; letter-spacing: .08em; }
  .ro-page .ro-cmp tbody th { font-size: 15px; }
  .ro-page .ro-cmp tbody td { font-size: 15px; }
}
@media (max-width: 560px) {
  .ro-page .tg-table.ro-cmp { font-size: 14px; }
  .ro-page .ro-cmp thead th:first-child { width: 24%; }
  .ro-page .ro-cmp thead th { padding: 12px 8px !important; font-size: 14px !important; }
  .ro-page .ro-cmp tbody th { padding: 14px 8px 14px 10px !important; font-size: 14px; }
  .ro-page .ro-cmp tbody td { padding: 14px 10px !important; font-size: 14px; }
  .ro-page .ro-cmp td .ro-k { font-size: 12px; padding: 4px 9px; }
  .ro-map { padding-left: 22px; }
  .ro-map li::before { left: -19px; }
  .ro-map-part { font-size: 15px; }
  .ro-map p { font-size: 15px; }
}
/* ══ 2026-10-12 색소·기미(skin-pigment) — 고객 초안(261001 색소기미) 재구성. 래퍼 ac-page pm-page, 토프 브라운 #8a6448 ══ */
.pm-page { --ac-green: #8a6448; --ac-green-soft: #f4ece5; --fp: #8a6448; --fp-soft: #f4ece5; --fp-bg: #faf6f2; --cr: #8a6448; }
.tg-ans-page.pm-page { --tg-beauty: #8a6448; --tg-beauty-soft: #f4ece5; }
.pm-page .hx-eyebrow { color: #8a6448; }
.pm-page #hx-faq.faq-flat { --fq: #8a6448; --fq-soft: #f4ece5; --fq-bg: #faf6f2; --fq-ring: rgba(138, 100, 72, .35); --fq-ring2: rgba(138, 100, 72, .45); }
.pm-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(214, 170, 130, .38) 62%); }
.pm-page .ac-check { --ac-red: #8a6448; --ac-red-soft: #f4ece5; }
.tile-tbl.is-pm { --tc: #8a6448; }
.pm-page .fp-warn.is-info { border-color: #e6d8cb; }

/* 2단 그리드를 가로질러 전체 폭을 쓰는 덩어리 — 치료 순서 지도 · 광원별 촬영 슬라이드 */
.pm-page .hx-split > .pm-seq, .pm-page .hx-split > .pm-shots { grid-column: 1 / -1; min-width: 0; }

/* 사진 비율 — 장비 사진(정사각) · 일러스트(가로) · 인물(세로) */
.pm-page .pm-janus-pic img { aspect-ratio: 1; object-fit: contain; max-width: 300px; background: #fff; }
.pm-page .pm-illu img { aspect-ratio: auto; }
.pm-page .pm-portrait img { aspect-ratio: 4 / 5; object-position: 50% 32%; }

/* 그래서 순서를 바꿉니다 — 장벽 + 순환 → 색소 치료 (담적 dj-combo 부품, 색만 내용색) */
.pm-page .pm-pivot { margin-top: 22px; }
.pm-page .pm-pivot .dj-combo-n { --c: #3d8a7a; border-color: color-mix(in srgb, var(--c) 32%, #fff); }
.pm-page .pm-pivot .dj-combo-n.is-b { --c: #b8483e; }
.pm-page .pm-pivot .dj-combo-n small { color: var(--c); }
.pm-page .pm-pivot .dj-combo-n.is-end { background: #8a6448; border-color: #8a6448; }
.pm-page .pm-pivot .dj-combo-n.is-end small { color: #fff; }

/* 공통 '도구·성분' 줄 */
.pm-page .pm-tool { margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.pm-page .pm-tool span { display: inline-block; margin-right: 8px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 12.5px; font-weight: 600; line-height: 1.2; vertical-align: 1px; }
.pm-page .fp-why .et-more { margin-top: 14px; }

/* 치료 순서 지도 — 단계 띠 + 네 카드 + 경과 확인 */
.pm-seq { margin-top: 8px; }
.pm-seq-phase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; margin-bottom: 12px; }
.pm-seq-phase span { position: relative; padding: 0 2px 10px; border-bottom: 1px solid currentColor; font-size: 14px; line-height: 1.4; word-break: keep-all; }
.pm-seq-phase span::before, .pm-seq-phase span::after { content: ""; position: absolute; bottom: -1px; width: 1px; height: 9px; background: currentColor; }
.pm-seq-phase span::before { left: 0; } .pm-seq-phase span::after { right: 0; }
.pm-seq-phase b { margin-right: 10px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; }
.pm-seq-phase .is-prep { grid-column: span 2; color: #3d8a7a; }
.pm-seq-phase .is-treat { color: #8a6448; }
.pm-seq-phase .is-rec { color: #a0506e; }
.pm-seq-list { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
.pm-seq-list > li { position: relative; min-width: 0; }
.pm-seq-list > li + li::before { content: ""; position: absolute; left: -15px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #c9b8a7; border-right: 2px solid #c9b8a7; transform: translateY(-50%) rotate(45deg); }
.pm-seq-list a { position: relative; display: block; height: 100%; box-sizing: border-box; padding: 34px 22px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); color: inherit; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.pm-seq-list a:hover, .pm-seq-list a:focus-visible { border-color: var(--c); box-shadow: 0 16px 32px -22px color-mix(in srgb, var(--c) 70%, #000); }
.pm-seq-list .ac-pill { background: var(--c); }
.pm-seq-no { position: absolute; right: 16px; bottom: 6px; font-family: 'Poppins', sans-serif; font-size: 58px; font-weight: 700; line-height: 1; color: var(--c); opacity: .12; pointer-events: none; }
.pm-seq-ph { display: none; }
.pm-seq-list h3 { position: relative; margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--c); word-break: keep-all; }
.pm-seq-list p { position: relative; margin: 0; font-size: 15px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.pm-seq-list ul { position: relative; list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); display: grid; gap: 6px; }
.pm-seq-list ul li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
.pm-seq-list ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.pm-seq-list em { position: relative; display: block; margin-top: 14px; font-style: normal; font-size: 14px; line-height: 1.55; color: #857868; word-break: keep-all; }
.pm-seq-list .is-key a { background: color-mix(in srgb, var(--c) 7%, #fff); border-color: var(--c); box-shadow: 0 16px 34px -24px rgba(138, 100, 72, .7); }
.pm-seq-fu { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; margin-top: 36px; padding: 30px 24px 20px; background: #faf6f2; border: 1px solid #e6d8cb; }
.pm-seq-fu .ac-pill { background: #8a6448; }
.pm-seq-fu p { margin: 0; }
.pm-seq-fu b { display: block; font-size: 16px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.pm-seq-fu p span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.pm-seq-fu i { padding: 6px 13px; border-radius: 999px; border: 1px solid #8a6448; color: #8a6448; font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
@media (max-width: 1199px) {
  .pm-seq-phase { display: none; }
  .pm-seq-ph { position: relative; display: block; margin: 0 0 4px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: #9a8d80; }
  .pm-seq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-seq-list > li + li::before { display: none; }
}
@media (max-width: 560px) {
  .pm-seq-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pm-seq-list a { padding: 30px 18px 18px; }
  .pm-seq-list h3 { font-size: 18px; }
  .pm-seq-no { font-size: 48px; }
  .pm-seq-fu { grid-template-columns: minmax(0, 1fr); padding: 30px 18px 18px; }
  .pm-seq-fu i { justify-self: start; }
}

/* 진단 네 가지 — 2×2 */
@media (min-width: 900px) { .pm-page .pm-dx4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pm-page .pm-dx4 h3 { font-size: 19px; }
.pm-page .pm-dx4 p { margin-bottom: 0; }
.pm-page .pm-dx4 p b { color: var(--c); }
.pm-page .pm-fork { margin-top: 30px; }
.pm-page .pm-fork .et-pair-c.is-good { --c: #3d8a7a; border-color: #c5e0d8; background: #f3f9f6; }
.pm-page .pm-fork .et-pair-c b { color: var(--c); }
.pm-page .pm-common { margin-top: 34px; }

/* 광원별 촬영 — 야누스 촬영 슬라이드 */
.pm-shots { margin-top: 6px; }
.pm-shots-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.pm-shots-hd .ac-pill { position: static; transform: none; background: #8a6448; }
.pm-shots-count { display: flex; align-items: baseline; gap: 6px; margin: 0; font-family: 'Poppins', sans-serif; }
.pm-shots-count b { font-size: 28px; font-weight: 700; line-height: 1; color: #8a6448; }
.pm-shots-count span { font-size: 15px; color: #9a8d80; }
.pm-shots-count em { margin-left: 10px; font-family: inherit; font-style: normal; font-size: 15px; font-weight: 600; color: var(--tg-ink); }
.pm-shots-view { position: relative; overflow: hidden; background: #000; outline: none; touch-action: pan-y; }
.pm-shots-view:focus-visible { box-shadow: 0 0 0 3px rgba(138, 100, 72, .5); }
.pm-shots-track { list-style: none; margin: 0; padding: 0; display: flex; transition: transform .45s ease; }
.pm-shot { flex: 0 0 100%; min-width: 0; }
.pm-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 592; object-fit: contain; background: #000; }
.pm-shots-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transform: translateY(-50%); cursor: pointer; transition: background .2s; }
.pm-shots-btn.is-prev { left: 14px; } .pm-shots-btn.is-next { right: 14px; }
.pm-shots-btn svg { width: 24px; height: 24px; fill: none; stroke: #6b4a33; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-shots-btn:hover { background: #8a6448; } .pm-shots-btn:hover svg { stroke: #fff; }
.pm-shots-btn:focus-visible { outline: 3px solid #f0d9c4; outline-offset: 2px; }
.pm-shots-lab { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid #e6d8cb; border-top: 0; }
.pm-shots-lab li { padding: 12px 8px; border-left: 1px solid #efe6dd; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--c); word-break: keep-all; }
.pm-shots-lab li:first-child { border-left: 0; }
.pm-shots-lab span { margin-right: 6px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; opacity: .65; }
.pm-shots-foot { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 14px; min-height: 30px; }
.pm-shots-dots { display: flex; gap: 2px; }
.pm-shots-dots button { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.pm-shots-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: #d8cbbf; transition: width .25s, background .25s; }
.pm-shots-dots button.is-on { width: 40px; }
.pm-shots-dots button.is-on::before { width: 28px; background: #8a6448; }
.pm-shots-dots button:focus-visible { outline: 2px solid #8a6448; outline-offset: 1px; border-radius: 999px; }
.pm-shots-zoom { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: #8a6448; text-decoration: underline; text-underline-offset: 3px; }
.pm-shots .pg-note { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .pm-shots-track { transition: none; } }
@media (max-width: 760px) {
  .pm-shots-btn { width: 40px; height: 40px; }
  .pm-shots-btn.is-prev { left: 6px; } .pm-shots-btn.is-next { right: 6px; }
  .pm-shots-btn svg { width: 20px; height: 20px; }
  .pm-shots-lab li { padding: 10px 2px; font-size: 13.5px; }
  .pm-shots-lab span { display: block; margin: 0 0 2px; }
  .pm-shots-foot { flex-direction: column; gap: 6px; }
  .pm-shots-zoom { position: static; transform: none; }
}
/* 좁은 화면 — 가로로 긴 4칸 이미지를 그대로 줄이면 얼굴이 엄지손톱만 해지므로, 같은 이미지를 네 칸으로 잘라 2×2 로 크게 보여 준다 */
.pm-shot-quad { display: none; }
@media (max-width: 560px) {
  .pm-shot .pm-shot-img { display: none; }
  .pm-shot-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; background: #000; }
  .pm-shot-quad span { position: relative; aspect-ratio: 400 / 592; background-image: var(--src); background-repeat: no-repeat; background-size: 400% auto; background-position: calc(var(--i) * 33.3333%) 50%; }
  .pm-shot-quad b { position: absolute; left: 8px; bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
  .pm-shots-lab { display: none; }
  .pm-shots-count b { font-size: 24px; }
  .pm-shots-count em { margin-left: 6px; font-size: 14px; }
}

/* 선행 치료 카드 — 아이콘은 배경 원 없이 옅은 내용색 */
.pm-page .pm-mods .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.pm-page .pm-mods .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
@media (max-width: 560px) { .pm-page .pm-mods .fp-why-ico, .pm-page .pm-mods .fp-why-ico::before { width: 40px; height: 40px; } }
.pm-page .pm-tools { margin-top: 22px; }
/* 카드 3장 — 넓은 화면은 한 줄 3열, 중간 폭은 2열 + 마지막 카드 전체 폭 */
@media (min-width: 1200px) { .pm-page .pm-mods.fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1199px) { .pm-page .pm-mods.fp-why > li:last-child { grid-column: 1 / -1; } }

/* 색소의 깊이 — 표피 / 진피 단면 */
.pm-depth { margin-top: 30px; background: #fff; border: 1px solid #e6d8cb; }
.pm-depth-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.pm-depth-row + .pm-depth-row { border-top: 1px solid #e6d8cb; }
.pm-depth-row.is-epi { --c: #b5722a; } .pm-depth-row.is-der { --c: #6b4a33; }
.pm-depth-layer { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 18px 20px; min-height: 128px; }
.pm-depth-layer small { position: relative; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: color-mix(in srgb, var(--c) 80%, #fff); }
.pm-depth-layer b { position: relative; margin-top: 4px; font-size: 19px; font-weight: 700; color: var(--c); }
.is-epi .pm-depth-layer { background:
  radial-gradient(circle at 64% 30%, #9c6a40 0 4px, transparent 5px),
  radial-gradient(circle at 78% 62%, #8a5a34 0 5px, transparent 6px),
  radial-gradient(circle at 88% 28%, #a8794c 0 3px, transparent 4px),
  radial-gradient(circle at 70% 80%, #9c6a40 0 3px, transparent 4px),
  #f7ebdf; }
.is-der .pm-depth-layer { background:
  radial-gradient(circle at 70% 40%, rgba(84, 52, 34, .55) 0 9px, transparent 17px),
  radial-gradient(circle at 86% 72%, rgba(84, 52, 34, .45) 0 7px, transparent 14px),
  radial-gradient(circle at 60% 78%, rgba(84, 52, 34, .35) 0 6px, transparent 12px),
  #efd6cc; }
.pm-depth-txt { position: relative; padding: 34px 24px 20px; }
.pm-depth-txt .ac-pill { left: 24px; background: var(--c); }
.pm-depth-txt p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 560px) {
  .pm-depth-row { grid-template-columns: minmax(0, 1fr); }
  .pm-depth-layer { flex-direction: row; align-items: baseline; gap: 10px; min-height: 64px; padding: 14px 16px; }
  .pm-depth-txt { padding: 30px 16px 18px; }
  .pm-depth-txt .ac-pill { left: 16px; }
}

/* 회복 단계 — 자세히 보기 링크 */
.pm-page .pm-rec .et-more { margin-top: 12px; }
@media (max-width: 760px) { .pm-page .pm-janus-pic img { max-width: 240px; } }
@media (max-width: 560px) {
  .pm-depth-layer { justify-content: flex-start; }
  .pm-page .pm-portrait img { aspect-ratio: 1; object-position: 50% 28%; }
}
/* 이명 — 함께 오는 세 가지 흐름: 카드 위에 내용 사진(카드 폭 가득), 알약은 카드 윗변에 걸침 */
.et-page .et-pat > li { padding: 0 0 26px; }
.et-page .et-pat > li > .ac-pill { z-index: 3; }
.et-pat-pic { position: relative; z-index: 1; margin: 0 0 20px; aspect-ratio: 3 / 2; overflow: hidden; background: #eef3f1; }
.et-pat-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.et-page .et-pat > li > div { padding: 0 24px; }
@media (max-width: 760px) { .et-pat-pic { aspect-ratio: 16 / 9; } .et-page .et-pat > li > div { padding: 0 18px; } .et-page .et-pat > li { padding-bottom: 22px; } }
/* 이명 — CHECK POINT(세 가지가 겹치면 위험 신호): 옆 카드와 같은 높이(위 여백 제거) + 위험 아이콘, 알약·아이콘은 위험 적색 */
.et-page .et-fac > li.et-chk { margin: 0; align-self: stretch; --c: #b8483e; }
.et-page .et-fac > li.et-chk > .ac-pill { background: #b8483e; }
.et-page .et-fac > li.et-chk h3 { color: var(--tg-ink); }

/* ══ 이명 — 자율신경과 귀의 연결(.et-cyc, 2026-10-12 재디자인): 원인 → 교감 항진 → 두 갈래(귀/목·턱) → STEP 02 로 되돌아오는 점선 반복 고리 + 고리를 끊는 세 지점(TREAT) ══ */
.et-cyc { --cols: minmax(0, 1fr) 40px minmax(0, 1fr) 46px minmax(0, 1.15fr); --ln: #c3cfca; --rp: #c9604f; margin-top: 30px; }
.et-cyc-row { display: grid; grid-template-columns: var(--cols); align-items: stretch; }
.et-cyc-n { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 30px 16px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 10px 26px -18px rgba(20, 32, 27, .3); }
.et-cyc-n.is-key { background: color-mix(in srgb, var(--c) 6%, #fff); }
.et-cyc-n > .ac-pill { position: absolute; top: 0; left: 14px; transform: translateY(-50%); padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; }
.et-cyc-ic { display: block; width: 36px; height: 36px; margin-bottom: 10px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.et-cyc-n b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.et-cyc-n > span:not(.ac-pill) { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
.et-cyc-n em { font-style: normal; font-weight: 700; color: var(--c); }
.et-cyc-res { display: grid; grid-template-rows: 1fr 1fr; gap: 26px; }
/* 화살표 · 갈래 */
.et-cyc-ar { position: relative; align-self: center; height: 2px; margin: 0 7px; background: var(--ln); }
.et-cyc-ar::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--ln); border-right: 2px solid var(--ln); transform: translateY(-50%) rotate(45deg); }
.et-cyc-br { position: relative; }
.et-cyc-br::before { content: ""; position: absolute; left: 7px; width: calc(50% - 7px); top: 50%; height: 2px; margin-top: -1px; background: var(--ln); }
.et-cyc-br i { position: absolute; left: 50%; right: 7px; top: 23%; bottom: 23%; border: 2px solid var(--ln); border-right: 0; }
.et-cyc-br i::before, .et-cyc-br i::after { content: ""; position: absolute; right: -1px; width: 8px; height: 8px; border-top: 2px solid var(--ln); border-right: 2px solid var(--ln); transform: rotate(45deg); }
.et-cyc-br i::before { top: -5px; } .et-cyc-br i::after { bottom: -5px; }
/* 되돌아오는 점선 고리 */
.et-cyc-back { display: grid; grid-template-columns: var(--cols); height: 40px; }
.et-cyc-back i { position: relative; display: block; }
.et-cyc-back .b1::before { content: ""; position: absolute; left: 50%; right: 0; top: 0; bottom: 0; border-left: 2px dashed var(--rp); border-bottom: 2px dashed var(--rp); }
.et-cyc-back .b1::after { content: ""; position: absolute; left: 50%; top: 1px; width: 9px; height: 9px; margin-left: -4.5px; border-top: 2px solid var(--rp); border-left: 2px solid var(--rp); transform: rotate(45deg); background: transparent; }
.et-cyc-back .b2 { border-bottom: 2px dashed var(--rp); }
.et-cyc-back .b3::before { content: ""; position: absolute; left: 0; right: 50%; top: 0; bottom: 0; border-right: 2px dashed var(--rp); border-bottom: 2px dashed var(--rp); }
.et-cyc-back em { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: 5px 12px; border-radius: 999px; background: var(--rp); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; z-index: 1; }
.et-cyc-back-m { display: none; }
/* 치료 — 고리를 끊는 세 지점 */
.et-cyc-tx { position: relative; margin-top: 46px; padding: 30px 22px 22px; background: #f2f8f6; border: 1px solid #c9e2db; }
.et-cyc-tx > .ac-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); padding: 5px 12px; border-radius: 999px; background: #1f7a6d; color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; }
.et-cyc-tx h4 { margin: 0 0 16px; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.et-cyc-tx h4 b { color: #1f7a6d; }
.et-cyc-tx ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.et-cyc-tx li { padding: 14px 16px 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.et-cyc-tx li small { display: inline-block; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.et-cyc-tx li b { display: block; margin-top: 8px; font-size: 15.5px; font-weight: 700; color: var(--tg-ink); }
.et-cyc-tx li span { display: block; margin-top: 2px; font-size: 14px; color: var(--tg-body); }
/* 좁은 화면 — 세로 흐름 */
@media (max-width: 1199px) {
  .et-cyc-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .et-cyc-ar { align-self: center; width: 2px; height: 34px; margin: 0; }
  .et-cyc-ar::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .et-cyc-br { height: 34px; }
  .et-cyc-br::before { left: 50%; width: 2px; top: 0; bottom: 8px; height: auto; margin: 0 0 0 -1px; }
  .et-cyc-br i { left: 25%; right: 25%; top: auto; bottom: 0; height: 10px; border: 2px solid var(--ln); border-bottom: 0; }
  .et-cyc-br i::before, .et-cyc-br i::after { display: none; }
  .et-cyc-res { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .et-cyc-back { display: none; }
  .et-cyc-back-m { display: block; position: relative; margin: 30px 0 0; padding: 22px 16px 14px; border: 2px dashed #e3b1a7; background: #fdf5f3; font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
  .et-cyc-back-m .ac-pill { position: absolute; top: 0; left: 14px; transform: translateY(-50%); padding: 4px 11px; border-radius: 999px; background: #c9604f; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
  .et-cyc-back-m b { color: #b8483e; }
  .et-cyc-tx { margin-top: 32px; }
}
@media (max-width: 560px) {
  .et-cyc-res { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .et-cyc-br i { display: none; }
  .et-cyc-br::before { bottom: 0; }
  .et-cyc-tx { padding: 28px 16px 16px; }
  .et-cyc-tx h4 { font-size: 16px; }
  .et-cyc-tx ul { grid-template-columns: minmax(0, 1fr); }
}
/* et-cyc 다듬기 — STEP 카드: 큰 아이콘 + 가운데 정렬(늘어난 높이를 노드처럼), RESULT 카드: 아이콘 왼쪽 가로 배치 */
.et-cyc-row > .et-cyc-n { align-items: center; text-align: center; padding-left: 14px; padding-right: 14px; }
.et-cyc-row > .et-cyc-n .et-cyc-ic { width: 56px; height: 56px; margin: 0 0 14px; }
.et-cyc-row > .et-cyc-n b { font-size: 16px; }
.et-cyc-row > .et-cyc-n::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 14px; background: color-mix(in srgb, var(--c) 45%, #fff); }
.et-cyc-res .et-cyc-n { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: center; align-items: center; }
.et-cyc-res .et-cyc-n .et-cyc-ic { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
.et-cyc-res .et-cyc-n b, .et-cyc-res .et-cyc-n > span:not(.ac-pill) { grid-column: 2; }
@media (max-width: 1199px) {
  .et-cyc-row > .et-cyc-n { padding-top: 30px; padding-bottom: 18px; }
  .et-cyc-row > .et-cyc-n .et-cyc-ic { width: 44px; height: 44px; margin-bottom: 10px; }
  .et-cyc-row > .et-cyc-n::after { margin-top: 10px; }
}
/* et-cyc 모바일 — STEP 02 → RESULT 연결선이 카드까지 닿도록 + 화살촉 */
@media (max-width: 560px) {
  .et-cyc-br { height: 40px; }
  .et-cyc-br::before { top: 0; bottom: 0; }
  .et-cyc-br::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 8px; height: 8px; border-top: 2px solid var(--ln); border-right: 2px solid var(--ln); transform: translateX(-50%) rotate(135deg); }
  .et-cyc-res { margin-top: 0; }
}
/* et-cyc 세로 흐름 — 화살촉이 아래 박스 테두리에 가려지지 않도록 6px 띄움 */
@media (max-width: 1199px) {
  .et-cyc-ar { height: 30px; margin: 0 0 6px; z-index: 1; }
}
@media (max-width: 560px) {
  .et-cyc-br { height: 34px; margin-bottom: 6px; z-index: 1; }
}
/* et-cyc 화살촉 — 꺾쇠 → 채운 삼각형 */
.et-cyc-ar::after { width: 9px; height: 10px; right: -2px; border: 0; background: var(--ln); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateY(-50%); }
.et-cyc-br i::before, .et-cyc-br i::after { width: 9px; height: 10px; right: -2px; border: 0; background: var(--ln); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: none; }
.et-cyc-br i::before { top: -6px; } .et-cyc-br i::after { bottom: -6px; }
.et-cyc-back .b1::after { width: 10px; height: 9px; top: -1px; margin-left: -4px; border: 0; background: var(--rp); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: none; }
@media (max-width: 1199px) {
  .et-cyc-ar::after { width: 10px; height: 9px; right: auto; top: auto; left: 50%; bottom: -1px; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); }
}
@media (max-width: 560px) {
  .et-cyc-br::after { width: 10px; height: 9px; border: 0; background: var(--ln); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); }
}
/* et-cyc 화살표 선 두께 1px */
.et-cyc-ar { height: 1px; }
.et-cyc-br::before { height: 1px; margin-top: 0; }
.et-cyc-br i { border-width: 1px; border-right: 0; }
.et-cyc-br i::before { top: -5.5px; } .et-cyc-br i::after { bottom: -5.5px; }
.et-cyc-back .b1::before { border-left-width: 1px; border-bottom-width: 1px; }
.et-cyc-back .b1::after { margin-left: -4.5px; }
.et-cyc-back .b2 { border-bottom-width: 1px; }
.et-cyc-back .b3::before { border-right-width: 1px; border-bottom-width: 1px; }
@media (max-width: 1199px) {
  .et-cyc-ar { width: 1px; height: 30px; }
  .et-cyc-br::before { width: 1px; height: auto; margin: 0 0 0 -.5px; }
  .et-cyc-br i { border-width: 1px; border-bottom: 0; }
}
/* et-cyc 카드 사이 간격 넓힘 (이 흐름만) */
.et-cyc { --cols: minmax(0, 1fr) 64px minmax(0, 1fr) 72px minmax(0, 1.15fr); }
.et-cyc-ar { margin: 0 12px; }
.et-cyc-res { gap: 36px; }
@media (max-width: 1199px) {
  .et-cyc-ar { height: 42px; margin: 0 0 8px; }
  .et-cyc-br { height: 46px; }
  .et-cyc-res { gap: 18px; margin-top: 20px; }
  .et-cyc-back-m { margin-top: 40px; }
  .et-cyc-tx { margin-top: 40px; }
}
@media (max-width: 560px) {
  .et-cyc-br { height: 42px; margin-bottom: 8px; }
  .et-cyc-res { gap: 36px; margin-top: 0; }
}
/* et-cyc PC — 화살표가 앞 박스 테두리에서 바로 시작 */
@media (min-width: 1200px) {
  .et-cyc-ar { margin: 0 12px 0 0; }
  .et-cyc-br::before { left: 0; width: 50%; }
}
/* et-cyc TREAT 카드 — 좌측 아이콘 + 우측 내용 */
.et-cyc-tx li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 18px 18px; }
.et-cyc-tx-ic { display: block; width: 48px; height: 48px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
@media (max-width: 560px) {
  .et-cyc-tx li { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .et-cyc-tx-ic { width: 42px; height: 42px; }
}
/* ═══ 이명 — 6가지 유형 표 (아코디언 → 흰 격자 타일 표, 2026-10-12) ═══ */
.tile-tbl.is-et { --tc: #1f7a6d; }
.et-page .et-type-tbl { table-layout: fixed; }
.et-page .et-type-tbl thead th:nth-child(1) { width: 17%; }
.et-page .et-type-tbl thead th:nth-child(2), .et-page .et-type-tbl thead th:nth-child(3) { width: 30%; }
.et-page .et-type-tbl thead th:nth-child(4) { width: 23%; }
.et-page .et-type-tbl tbody th, .et-page .et-type-tbl td { vertical-align: middle; }
.et-page .et-type-tbl tbody th { white-space: nowrap; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--tg-ink); }
.et-page .et-type-tbl tbody th em { display: block; margin-bottom: 4px; font-family: 'Poppins', sans-serif; font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--c); }
.et-page .et-type-tbl tbody th small { display: block; margin-top: 3px; font-family: 'Noto Serif KR', serif; font-size: 13px; font-weight: 500; color: var(--tg-body); opacity: .8; letter-spacing: .04em; }
.et-page .et-type-tbl td, .et-page .et-type-tbl td:nth-of-type(2) { white-space: normal; word-break: keep-all; font-size: 16px; font-weight: 300; line-height: 1.65; }
.et-page .et-type-tbl td b { display: block; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--c); }
.et-page .et-type-tbl td b small { margin-left: 5px; font-family: 'Noto Serif KR', serif; font-size: 12.5px; font-weight: 500; opacity: .8; }
.et-page .et-type-tbl td span { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--tg-ink); }
@media (max-width: 760px) {
  .et-page .et-type-tbl tbody th { font-size: 16px; }
  .et-page .et-type-tbl td, .et-page .et-type-tbl td:nth-of-type(2) { font-size: 15px; }
}
/* ═══ 이명 — 일곱 가지 치료 탭 (.et-txp, 2026-10-12): 通·緩·補 묶음 위에 7개 아이콘 탭, 아래 선택한 치료 상세 ═══ */
.et-txp { --g: #1f7a6d; }
.et-txp-gs, .et-txp-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.et-txp-gs p { grid-column: span var(--n); position: relative; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--tg-body); word-break: keep-all; }
.et-txp-gs p::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border: 1px solid color-mix(in srgb, var(--g) 45%, #fff); border-top: 0; }
.et-txp-gs b { font-family: 'Noto Serif KR', serif; font-size: 20px; font-weight: 700; line-height: 1; color: var(--g); }
.et-txp-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 18px 6px 15px; background: #fff; border: 1px solid #dfe6e3; border-radius: 0; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tg-ink); text-align: center; word-break: keep-all; cursor: pointer; transition: border-color .2s, background-color .2s; }
.et-txp-t i { display: block; width: 40px; height: 40px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.et-txp-t small { display: none; }
.et-txp-t:hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.et-txp-t:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.et-txp-t[aria-selected="true"] { background: color-mix(in srgb, var(--c) 8%, #fff); border-color: var(--c); color: var(--c); }
.et-txp-t[aria-selected="true"] i { background: var(--c); }
.et-txp-t[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 9px; margin-left: -8px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* 상세 패널 */
.et-txp-p { position: relative; margin-top: 34px; padding: 36px 32px 28px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 32%, #fff); box-shadow: 0 14px 34px -24px rgba(20, 32, 27, .35); }
.et-txp.is-js .et-txp-p:not(.is-on) { display: none; }
.et-txp-p > .ac-pill { position: absolute; top: 0; left: 24px; transform: translateY(-50%); padding: 6px 13px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; }
.et-txp-p header { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 20px; padding-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, #fff); }
.et-txp-ic { display: block; width: 64px; height: 64px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.et-txp-p h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.et-txp-p h3 em { margin-left: 6px; font-family: 'Noto Serif KR', serif; font-style: normal; font-size: 14px; font-weight: 500; color: var(--c); letter-spacing: .04em; }
.et-txp-p header p { margin: 4px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.55; color: var(--c); word-break: keep-all; }
.et-txp-bd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; padding-top: 22px; }
.et-txp-bd h4 { display: inline-block; margin: 0 0 8px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); font-size: 14px; font-weight: 700; line-height: 1.2; }
.et-txp-bd p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.et-txp-p .et-say { margin-top: 30px; }
.et-txp + .et-before { margin-top: 30px; }
@media (max-width: 760px) {
  .et-txp-gs { display: none; }
  .et-txp-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .et-txp-t { gap: 7px; padding: 14px 4px 11px; font-size: 14px; }
  .et-txp-t i { width: 32px; height: 32px; }
  .et-txp-t small { display: block; position: absolute; top: 4px; right: 6px; font-family: 'Noto Serif KR', serif; font-size: 12px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--c) 70%, #fff); }
  .et-txp-t[aria-selected="true"]::after { display: none; }
  .et-txp-p { margin-top: 28px; padding: 30px 18px 20px; }
  .et-txp-p header { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; }
  .et-txp-ic { width: 48px; height: 48px; }
  .et-txp-p h3 em { display: inline-block; margin-left: 4px; }
  .et-txp-bd { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .et-txp-p .et-say { margin-top: 26px; }
}
.et-txp-t[aria-selected="true"] i { background: color-mix(in srgb, var(--c) 72%, #fff); }
/* 만성통증 부위별 — 치료 과정 제목 지정 줄바꿈은 PC만, 모바일은 자연 줄바꿈 */
@media (max-width: 760px) { .cr-page #cr-flow .pg-h2 br { display: none; } }
/* 생리통 — "왜 | 허리와 천골인가" 지정 줄바꿈은 PC만 */
@media (max-width: 760px) { .mn-page #mn-nerve .pg-h2 br { display: none; } }
@media (max-width: 760px) { .wm-page #mn-nerve .pg-h2 br { display: none; } }
/* ═══ 고압산소 — 적용 대상(#hb-use) 재디자인 (2026-10-12): 근거 수준별 두 묶음 + 아이콘 카드, 묶음 첫 카드는 가로 전체 ═══ */
.hb-page #hb-use .hx-split-hd .ta-lede { margin-top: 18px; }
.hb-grp + .hb-grp { margin-top: 52px; }
.hb-grp-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 28px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--g) 30%, #fff); }
.hb-grp-hd .hb-ev { margin: 0; }
.hb-grp-hd b { font-size: 17px; font-weight: 700; color: var(--g); word-break: keep-all; }
.hb-grp-hd span { font-size: 14px; color: var(--tg-mute); word-break: keep-all; }
.hb-use2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
.hb-use2 > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 32px 22px 24px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-use2 > li.is-wide { grid-column: 1 / -1; grid-template-columns: 60px minmax(0, 1fr); column-gap: 22px; padding: 34px 30px 28px; background: color-mix(in srgb, var(--c) 4%, #fff); }
.hb-use2 > li > .ac-pill { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 5px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.hb-u-ic { display: block; width: 44px; height: 44px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hb-use2 > li.is-wide .hb-u-ic { width: 60px; height: 60px; }
.hb-use2 h3 { margin: 4px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.hb-use2 h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 45%, #fff); }
.hb-use2 h3 a:hover { color: var(--c); }
.hb-use2 p { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) {
  .hb-grp + .hb-grp { margin-top: 40px; }
  .hb-grp-hd { margin-bottom: 26px; }
  .hb-use2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hb-use2 > li, .hb-use2 > li.is-wide { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 30px 16px 20px; }
  .hb-u-ic, .hb-use2 > li.is-wide .hb-u-ic { width: 36px; height: 36px; }
  .hb-use2 h3 { font-size: 18px; }
}
/* ═══ 고압산소 — 증상별 자세한 안내(#hb-detail): 공용 jg-case 아코디언으로 통일, 펼친 내용 3칸 ═══ */
@media (min-width: 1100px) { .hb-page .hb-dt-bd { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-page .hb-dt-bd p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.hb-page .hb-dts + .pg-note { margin-top: 26px; }
/* ═══ 고압산소 — 적응증 비교 표 아래(#hb-compare) 재디자인 (2026-10-12): 압력 눈금 · 챔버 카드(큰 숫자+칩) · 상담 안내 ═══ */
#hb-compare .hb-legend { margin-top: 16px; }
.hb-gauge { position: relative; margin-top: 44px; padding: 36px 30px 26px; background: #fff; border: 1px solid #d5e2ef; box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-gauge > .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); padding: 6px 13px; border-radius: 999px; background: #2f6fb3; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; }
.hb-gg { position: relative; height: 172px; margin: 0 8px; }
.hb-gg-bar { position: absolute; left: 0; right: 0; top: 92px; height: 8px; background: linear-gradient(90deg, #d7ebeb 0%, #3a8795 30%, #2f6fb3 100%); }
.hb-gg-zone { position: absolute; left: 50%; right: -8px; top: 82px; height: 28px; border: 1.5px dashed #2f6fb3; background: rgba(47, 111, 179, .06); }
.hb-gg-pt { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 400; white-space: nowrap; }
.hb-gg-pt.is-end { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.hb-gg-pt strong { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 600; line-height: 1; color: var(--c); }
.hb-gg-pt strong small { margin-left: 2px; font-family: inherit; font-size: 13px; font-weight: 600; }
.hb-gg-pt span { margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--tg-body); }
.hb-gg-pt::after { content: ""; position: absolute; top: 86px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--c); box-sizing: border-box; }
.hb-gg-pt.is-end::after { left: auto; right: -10px; margin-left: 0; }
.hb-gg-tk { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 116px; }
.hb-gg-tk li { position: absolute; left: var(--x); transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--tg-mute); }
.hb-gg-tk li.is-key { color: #2f6fb3; font-weight: 700; }
.hb-gg-zl { position: absolute; left: 50%; right: 0; top: 142px; padding-left: 8px; font-style: normal; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #2f6fb3; word-break: keep-all; }
.hb-gauge-p { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #e6edf3; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.hb-gauge-p b { color: var(--tg-ink); }
/* 챔버 카드 */
#hb-compare .hb-gauge + .ta-sub { margin-top: 48px; }
.hb-pick2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.hb-pick2 > article { position: relative; display: flex; flex-direction: column; padding: 34px 26px 24px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-pick2 > article.is-deep { background: color-mix(in srgb, var(--c) 5%, #fff); }
.hb-pick2 > article > .ac-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); padding: 6px 13px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; }
.hb-pick2 header { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.hb-pk-n { flex: 0 0 auto; margin: 0; font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--c); }
.hb-pk-n small { margin-left: 3px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.hb-pick2 h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.hb-pk-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.hb-pk-tags li { padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); background: color-mix(in srgb, var(--c) 7%, #fff); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--tg-ink); word-break: keep-all; }
.hb-pick2 > article > p { margin: auto 0 0; padding-top: 16px; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
/* 상담 안내 */
.hb-ask2 { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 16px; margin-top: 22px; padding: 18px 22px; background: #f3f8fb; border: 1px solid #d5e2ef; }
.hb-ask-ic { display: block; width: 44px; height: 44px; background: color-mix(in srgb, #2f6fb3 72%, #fff); -webkit-mask: url('/assets/images/icons/rx-consult.png?v=1') center / contain no-repeat; mask: url('/assets/images/icons/rx-consult.png?v=1') center / contain no-repeat; }
.hb-ask2 p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.hb-ask2 b { color: #2f6fb3; }
@media (max-width: 760px) {
  .hb-gauge { margin-top: 40px; padding: 32px 16px 20px; }
  .hb-gg { height: 178px; margin: 0 6px; }
  .hb-gg-pt strong { font-size: 24px; }
  .hb-gg-pt span { font-size: 12.5px; }
  .hb-gg-zl { font-size: 12.5px; }
  .hb-gg-zone { right: -6px; }
  .hb-pick2 { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hb-pick2 > article { padding: 32px 18px 20px; }
  .hb-pk-n { font-size: 36px; }
  .hb-pick2 h3 { font-size: 17px; }
  .hb-pick2 h3 br { display: none; }
  .hb-ask2 { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  .hb-ask-ic { width: 36px; height: 36px; }
  .hb-ask2 p { font-size: 15px; }
}
.hb-gauge, .hb-pick2 > article, .hb-ask2, .hb-gg-zone { border-radius: 0 !important; }
.hb-gg-pt span { white-space: nowrap; }
.hb-gg-pt.is-end { left: auto; right: 0; transform: none; }
/* 고압산소 적응증 비교표 — 묶음 행 가운데 정렬 + 묶음별 바탕색(3.0 파랑 / 1.5 청록) */
#hb-compare .tile-tbl tbody tr.hb-grp th { text-align: center !important; padding: 14px 20px !important; font-size: 15.5px !important; font-weight: 700 !important; }
#hb-compare .tile-tbl tbody tr.hb-grp:first-child th { background: #dce8f5 !important; color: #2f6fb3 !important; }
#hb-compare .tile-tbl tbody tr.hb-grp:not(:first-child) th { background: #dcefed !important; color: #2c7480 !important; }
/* 모바일 — 표가 옆으로 밀려도 묶음 제목은 보이는 폭의 가운데에 고정 */
.hb-grp-t { display: block; }
@media (max-width: 760px) {
  #hb-compare .tile-tbl tbody tr.hb-grp th { padding-left: 0 !important; padding-right: 0 !important; }
  #hb-compare .hb-grp-t { position: sticky; left: 0; width: calc(100vw - 36px); text-align: center; }
}
/* 고압산소 적응증 비교표 — 열 너비: 적응 영역 40% · 1.5기압 30% · 3.0기압 30% */
#hb-compare .hb-cmp { table-layout: fixed; }
#hb-compare .hb-cmp thead th:nth-child(1) { width: 40%; }
#hb-compare .hb-cmp thead th:nth-child(2), #hb-compare .hb-cmp thead th:nth-child(3) { width: 30%; }
/* 고압산소 적응증 비교표 — 표시 기호(● ○ —)를 크게, 도형으로 (표 + 범례) */
#hb-compare .hb-m { display: inline-block; flex: none; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border-radius: 50%; font-size: 0; line-height: 0; box-sizing: border-box; }
#hb-compare .hb-m.is-on { background: var(--tg-med, #137a52); }
#hb-compare .hb-m.is-mid { border: 3px solid #c48a2a; background: #fff; }
#hb-compare .hb-m.is-no { height: 2px; border-radius: 0; vertical-align: 4px; background: #b5bfba; }
#hb-compare .hb-cmp td { font-size: 15.5px; }
#hb-compare .hb-m, #hb-compare .hb-m.is-no { vertical-align: middle; position: relative; top: -2px; line-height: normal; }
#hb-compare .hb-legend { justify-content: flex-end; }
#hb-compare .hb-m.is-mid { border-color: #dd6b10; }
#hb-compare .hb-m.is-mid { border-width: 2px; }
/* 고압산소 — "한 줄로 정리하면" 소제목: 다른 페이지 소제목과 같은 형광 마커(파랑 계열) */
#hb-compare .ta-sub .ta-sub-h { display: inline; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 23px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; background-image: linear-gradient(transparent 62%, rgba(140, 190, 245, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#hb-compare .ta-sub .ta-sub-p { margin-top: 10px; }
.hb-page #hb-compare .hx-split-hd .ta-lede { margin-top: 18px; }
/* 고압산소 "한 줄로 정리하면" 소제목 — 사이트 소제목 크기(PC 28px · 모바일 23px)에 맞춤 */
#hb-compare .ta-sub .ta-sub-h { font-size: 28px; line-height: 1.5; }
@media (max-width: 760px) { #hb-compare .ta-sub .ta-sub-h { font-size: 23px; } }
/* 고압산소 — "조직에서 회복이 일어나는 조건" 소제목도 같은 형광 마커 */
#hb-mech .ta-sub .ta-sub-h { display: inline; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; background-image: linear-gradient(transparent 62%, rgba(140, 190, 245, .40) 62%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#hb-mech .ta-sub .ta-sub-p { margin-top: 10px; }
@media (max-width: 760px) { #hb-mech .ta-sub .ta-sub-h { font-size: 23px; } }
.hb-page #hb-mech .hx-split-hd .ta-lede { margin-top: 18px; }
.hb-page #hb-why .hx-split-hd .ta-lede:not(.hb-why-lede) { margin-top: 18px; }
.hb-page #hb-why .hx-split-hd .ta-lede + .hb-why-lede { margin-top: 14px; }
/* 고압산소 #hb-mech — 그림 설명(figcaption)을 박스로 */
#hb-mech .hb-fig figcaption { margin-top: 12px; padding: 16px 20px; background: #f3f8fb; border: 1px solid #d5e2ef; border-radius: 0; font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) { #hb-mech .hb-fig figcaption { padding: 14px 16px; font-size: 14px; } }
.hb-page #hb-chamber .hx-split-hd .ta-lede { margin-top: 18px; }
/* 고압산소 #hb-mech — 그림 설명을 그림 박스 안(그림 바로 아래)으로: 테두리는 figure 전체에 */
#hb-mech .hb-fig { border: 1px solid #d5e2ef; background: #fff; }
#hb-mech .hb-fig-scroll { border: 0; }
#hb-mech .hb-fig figcaption { margin: 0; border: 0; border-top: 1px solid #e3ebf3; background: #f5f9fc; }
/* 그림 박스 위쪽 여유 — 걸친 알약과 그림 사이 */
#hb-mech .hb-fig { padding-top: 26px; }
@media (max-width: 760px) { #hb-mech .hb-fig { padding-top: 22px; } }
/* 고압산소 첫 섹션 CASE 카드 — 라벨을 다른 페이지처럼 위 테두리에 걸친 알약으로 */
#hb-why .ta-trio > div:has(> .hb-case-pic) { position: relative; overflow: visible; border-radius: 0; }
#hb-why .ta-trio > div > .ac-pill { z-index: 3; left: 18px; background: var(--c); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
#hb-why .hb-case-pic { position: relative; z-index: 1; }
#hb-why .ta-trio > div:has(> .hb-case-pic) { border-top: 1px solid color-mix(in srgb, var(--c, #137a52) 28%, #fff); }
@media (max-width: 560px) { #hb-why .hb-case-pic { margin-left: -26px; margin-right: -26px; } }
/* 고압산소 — 소제목 형광 마커를 자율신경센터 다른 페이지처럼 섹션별 색으로 (불면증·자율신경실조증 팔레트) */
:is(#hb-mech, #hb-compare, #hb-ear, #hb-safe) .ta-sub .ta-sub-h { display: inline; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--tg-ink); font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#hb-mech .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140, 225, 190, .45) 62%); }
#hb-compare .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150, 205, 255, .45) 62%); }
#hb-ear .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255, 200, 150, .48) 62%); }
#hb-safe .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(200, 180, 245, .45) 62%); }
@media (max-width: 760px) { :is(#hb-mech, #hb-compare, #hb-ear, #hb-safe) .ta-sub .ta-sub-h { font-size: 23px; } }
:is(#hb-ear, #hb-safe) .ta-sub .ta-sub-p { margin-top: 10px; }
/* 고압산소 챔버 카드 — 3.0기압 카드 테두리가 진한 바탕색으로 보이던 것 → 연한 테두리 */
.hb-chambers article.is-deep { border-color: #d6e0dc; background-clip: padding-box; }
/* ═══ 고압산소 챔버 카드(#hb-chamber) — 아래 비교표·챔버 카드와 통일: 각진 흰 카드, 1.5 청록 / 3.0 파랑, 걸친 알약 ═══ */
.hb-chambers { row-gap: 30px; }
.hb-chambers article, .hb-chambers article.is-deep { position: relative; overflow: visible; border-radius: 0; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-chambers article > .ac-pill { z-index: 2; left: 20px; padding: 6px 13px; background: var(--c); font-size: 13px; font-weight: 700; }
.hb-chambers figure { position: relative; z-index: 1; border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, #fff); }
.hb-chambers .hb-ch-bd, .hb-chambers article.is-deep .hb-ch-bd { background: color-mix(in srgb, var(--c) 5%, #fff); }
.hb-chambers .hb-ata, .hb-chambers article.is-deep .hb-ata { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--c); }
.hb-chambers .hb-ata small { font-size: 14px; font-weight: 600; }
.hb-chambers h3, .hb-chambers article.is-deep h3 { font-size: 19px; font-weight: 700; color: var(--tg-ink); }
.hb-chambers .hb-ch-bd p:not(.hb-ata), .hb-chambers article.is-deep p:not(.hb-ata) { font-size: 15px; font-weight: 400; color: var(--tg-body); }
.hb-chambers article, .hb-chambers article.is-deep { display: flex; flex-direction: column; }
.hb-chambers .hb-ch-bd { flex: 1 1 auto; }
/* ═══ 고압산소 — 적용 대상(#hb-use) 시안 C 확정 (2026-10-12): 근거 있음 | 보조 요법 두 단, 아이콘+제목+한 줄 요약 ═══ */
.hb-uc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.hb-uc-col { position: relative; padding: 30px 0 6px; background: #fff; border: 1px solid color-mix(in srgb, var(--g) 30%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-uc-col > .ac-pill { left: 18px; padding: 6px 13px; background: var(--g); font-size: 13px; font-weight: 700; }
.hb-uc-col ul { list-style: none; margin: 0; padding: 0; }
.hb-uc-col li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 15px 22px; border-top: 1px solid #edf1ef; }
.hb-uc-col li:first-child { border-top: 0; }
.hb-uc-col li i { grid-row: span 2; display: block; width: 40px; height: 40px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hb-uc-col li b { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.hb-uc-col li b a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 45%, #fff); }
.hb-uc-col li b a:hover { color: var(--c); }
.hb-uc-col li span { margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--tg-body); word-break: keep-all; }
.hb-uc-note { margin: 18px 0 0; font-size: 14.5px; color: var(--tg-mute); word-break: keep-all; }
.hb-uc-note a { color: #2f6fb3; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(47, 111, 179, .4); }
@media (max-width: 760px) {
  .hb-uc { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hb-uc-col li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; }
  .hb-uc-col li i { width: 36px; height: 36px; }
  .hb-uc-col li span { font-size: 14px; }
}
/* ═══ 고압산소 — 적용 대상(#hb-use) 시안 A 확정 (2026-10-12): 아이콘 타일 10개(5×2) + 선택한 항목 설명 ═══ */
.hb-ua-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin: 0 0 14px; font-size: 14px; color: var(--tg-body); }
.hb-ua-legend span { display: inline-flex; align-items: center; gap: 7px; }
.hb-ua-legend i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #3a8795; box-sizing: border-box; }
.hb-ua-legend i.is-yes { background: #2f6fb3; border-color: #2f6fb3; }
.hb-ua-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hb-ua-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 22px 6px 16px; background: #fff; border: 1px solid #dfe6e3; border-radius: 0; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tg-ink); text-align: center; word-break: keep-all; cursor: pointer; transition: border-color .2s, background-color .2s; }
.hb-ua-t::before { content: ""; position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #3a8795; box-sizing: border-box; }
.hb-ua-t.is-yes::before { background: #2f6fb3; border-color: #2f6fb3; }
.hb-ua-t i { display: block; width: 42px; height: 42px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hb-ua-t:hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.hb-ua-t:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.hb-ua-t[aria-selected="true"] { background: color-mix(in srgb, var(--c) 8%, #fff); border-color: var(--c); color: var(--c); }
.hb-ua-t[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 9px; margin-left: -8px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hb-ua-p { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; align-items: center; margin-top: 34px; padding: 34px 30px 28px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 32%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-ua.is-js .hb-ua-p:not(.is-on) { display: none; }
.hb-ua-p > .ac-pill { left: 22px; padding: 6px 13px; background: var(--c); font-size: 13px; font-weight: 700; }
.hb-ua-ic { display: block; width: 64px; height: 64px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hb-ua-p h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.hb-ua-p h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 45%, #fff); }
.hb-ua-p p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) {
  .hb-ua-legend { justify-content: flex-start; }
  .hb-ua-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hb-ua-t { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 22px 12px 12px; font-size: 14.5px; text-align: left; }
  .hb-ua-t i { flex: none; width: 30px; height: 30px; }
  .hb-ua-t::before { top: 50%; right: 9px; margin-top: -5px; width: 9px; height: 9px; }
  .hb-ua-t[aria-selected="true"]::after { display: none; }
  .hb-ua-p { grid-template-columns: minmax(0, 1fr); margin-top: 30px; padding: 30px 18px 20px; }
  .hb-ua-ic { width: 48px; height: 48px; margin-bottom: 12px; }
  .hb-ua-p p { font-size: 15px; }
}
/* 적용 대상 타일·범례의 근거 점 — 크게(14px), 빈 원 테두리는 가늘게(1.5px) */
.hb-ua-t::before, .hb-ua-legend i { width: 14px; height: 14px; border-width: 1.5px; }
.hb-ua-t::before { top: 10px; right: 10px; }
@media (max-width: 760px) { .hb-ua-t::before { top: 50%; right: 10px; margin-top: -7px; width: 13px; height: 13px; } .hb-ua-t { padding-right: 28px; } }
@media (max-width: 760px) { .hb-ua-t { padding: 12px 23px 12px 11px; gap: 9px; } .hb-ua-t::before { right: 8px; width: 12px; height: 12px; margin-top: -6px; } }
/* 증상별 자세한 안내 — 펼친 내용 칸 사이 가는 구분선 (PC 세로선 · 좁은 화면 가로선) */
.hb-page .hb-dt-bd > div { position: relative; }
@media (min-width: 1100px) {
  .hb-page .hb-dt-bd { column-gap: 48px; }
  .hb-page .hb-dt-bd > div + div::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: -24px; width: 1px; background: color-mix(in srgb, var(--c) 22%, #fff); }
}
@media (max-width: 1099px) {
  .hb-page .hb-dt-bd > div + div { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
}
.hb-page #hb-flow .hx-split-hd .ta-lede { margin-top: 18px; }
/* ═══ 고압산소 — 한 회 치료 흐름(#hb-flow, 2026-10-12): 압력 곡선 + 단계 띠 + 6단계 노드 흐름 ═══ */
.hb-fl { margin-top: 6px; }
.hb-fl-prof { position: relative; height: 112px; }
.hb-fl-prof svg { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 90px; overflow: visible; }
.hb-fl-lb { position: absolute; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.hb-fl-lb.is-base { left: 4px; top: 70px; color: #6f8a80; }
.hb-fl-lb.is-top { left: 58.33%; top: 14px; transform: translateX(-50%); color: #2f6fb3; }
.hb-fl-ph { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.hb-fl-ph li { padding: 8px 4px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 13.5px; font-weight: 700; text-align: center; letter-spacing: .02em; }
.hb-fl-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.hb-fl-steps li { position: relative; }
.hb-fl-steps li::before { content: ""; position: absolute; top: 20px; left: 48px; right: -14px; height: 1px; background: #cfd9d5; }
.hb-fl-steps li:last-child::before { display: none; }
.hb-fl-n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c); background: #fff; color: var(--c); font-family: 'Poppins', sans-serif; font-style: normal; font-size: 14px; font-weight: 600; box-sizing: border-box; }
.hb-fl-tag { display: none; }
.hb-fl-steps h3 { margin: 14px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.hb-fl-steps p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 1099px) {
  .hb-fl-prof { height: 100px; }
  .hb-fl-prof svg { height: 78px; }
  .hb-fl-lb.is-base { top: 62px; }
  .hb-fl-lb.is-top { top: 12px; }
  .hb-fl-ph { display: none; }
  .hb-fl-steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 22px; }
  .hb-fl-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding-bottom: 22px; }
  .hb-fl-steps li::before { top: 44px; bottom: 4px; left: 20px; right: auto; width: 1px; height: auto; }
  .hb-fl-tag { display: inline-block; margin: 9px 0 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
  .hb-fl-steps h3 { margin-top: 8px; }
  .hb-fl-steps p { font-size: 14.5px; }
}
/* ═══ 고압산소 — 한 회 치료 흐름 세로형(.hb-fv, 2026-10-12): 왼쪽 세로 압력 곡선(행마다 구간을 그려 이어짐) + 번호 노드 + 내용 ═══ */
.hb-fv { --pw: 130px; --gap: 20px; margin-top: 4px; }
.hb-fv-hd { position: relative; height: 46px; margin: 0; }
.hb-fv-hd span { position: absolute; bottom: 6px; transform: translateX(-50%); font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; }
.hb-fv-hd .is-lo { left: calc(var(--pw) * .22); color: #6f8a80; }
.hb-fv-hd .is-hi { left: calc(var(--pw) * .82); color: #2f6fb3; }
.hb-fv-steps { list-style: none; margin: 0; padding: 0; }
.hb-fv-steps li { position: relative; display: grid; grid-template-columns: var(--pw) 40px minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.hb-fv-steps li::after { content: ""; position: absolute; left: calc(var(--pw) + var(--gap) + 20px); top: 44px; bottom: 0; width: 1px; background: #cfd9d5; }
.hb-fv-steps li:last-child::after { display: none; }
.hb-fv-pr { position: relative; align-self: stretch; display: block; min-height: 60px; }
.hb-fv-pr svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hb-fv-pr .a { fill: color-mix(in srgb, var(--c) 16%, #fff); }
.hb-fv-pr .l { fill: none; stroke: #2f6fb3; stroke-width: 2.5; stroke-linejoin: round; }
.hb-fv-n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--c); background: #fff; color: var(--c); font-family: 'Poppins', sans-serif; font-style: normal; font-size: 14px; font-weight: 600; box-sizing: border-box; }
.hb-fv-steps li > div { padding: 2px 0 32px; }
.hb-fv-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.2; }
.hb-fv-steps h3 { margin: 8px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.hb-fv-steps p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 760px) {
  .hb-fv { --pw: 74px; --gap: 12px; }
  .hb-fv-hd { height: 42px; }
  .hb-fv-hd span { font-size: 11px; }
  .hb-fv-steps li > div { padding-bottom: 26px; }
  .hb-fv-steps h3 { font-size: 16px; }
  .hb-fv-steps p { font-size: 14.5px; }
}
.hb-fv-hd span b { display: block; font-weight: 700; }
/* 세로 흐름 — 번호 원·숫자 크게 (PC 54px/18px · 모바일 46px/16px) */
.hb-fv { --nw: 54px; }
.hb-fv-steps li { grid-template-columns: var(--pw) var(--nw) minmax(0, 1fr); }
.hb-fv-steps li::after { left: calc(var(--pw) + var(--gap) + var(--nw) / 2); top: calc(var(--nw) + 4px); }
.hb-fv-n { width: var(--nw); height: var(--nw); border-width: 2px; font-size: 18px; font-weight: 600; }
.hb-fv-steps li > div { padding-top: 8px; }
@media (max-width: 760px) {
  .hb-fv { --pw: 84px; --nw: 46px; }
  .hb-fv-n { font-size: 16px; }
  .hb-fv-steps li > div { padding-top: 5px; }
}
/* 세로 흐름 — 압력 곡선 폭 넓힘 (PC 130→190px · 모바일 84→100px) */
.hb-fv { --pw: 190px; --gap: 24px; }
@media (max-width: 760px) { .hb-fv { --pw: 100px; --gap: 12px; } }
/* 세로 흐름 — 곡선의 꺾이는 지점을 번호 원 중심에 맞춤: 각 구간을 '이 번호 중심 → 다음 번호 중심'으로 내림 */
.hb-fv-pr { --off: calc(var(--nw) / 2 + 2px); margin-top: var(--off); margin-bottom: calc(var(--off) * -1); }
.hb-fv-steps li:first-child .hb-fv-pr { margin-top: 0; }
.hb-fv-steps li:last-child .hb-fv-pr { margin-bottom: 0; }
/* 세로 흐름 — 압력 곡선 선 가늘게 (2.5px → 1.5px) */
.hb-fv-pr .l { stroke-width: 1.5; }
/* 세로 흐름 — 곡선 끝을 06 내용의 마지막 줄 아래에 맞춤 */
.hb-fv-steps li:last-child > div { padding-bottom: 0; }
/* 세로 흐름 — 번호 원이 01→06 순서대로 차례로 퍼지는 펄스 (6초 주기, 1초 간격) */
.hb-fv-n::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%; background: color-mix(in srgb, var(--c) 38%, transparent); opacity: 0; animation: hbFvPulse 6s ease-out infinite; animation-delay: calc(var(--i, 0) * 1s); }
.hb-fv-n::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); opacity: 0; animation: hbFvFill 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1s); }
.hb-fv-steps li:nth-child(2) { --i: 1; } .hb-fv-steps li:nth-child(3) { --i: 2; } .hb-fv-steps li:nth-child(4) { --i: 3; } .hb-fv-steps li:nth-child(5) { --i: 4; } .hb-fv-steps li:nth-child(6) { --i: 5; }
@keyframes hbFvPulse { 0% { transform: scale(1); opacity: .55; } 16% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes hbFvFill { 0% { opacity: 0; } 5% { opacity: 1; } 16% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hb-fv-n::before, .hb-fv-n::after { animation: none; } }
/* 세로 흐름 모바일 — 곡선과 번호·내용 사이 간격 줄임 (12px → 6px) */
@media (max-width: 760px) { .hb-fv { --gap: 6px; } .hb-fv-steps li { column-gap: 6px; } .hb-fv-steps li > div { margin-left: 6px; } }
/* 세로 흐름 — 곡선 폭 줄이고(PC 190→160 · 모바일 100→88) 곡선·번호·내용 사이 간격 좁힘 */
.hb-fv { --pw: 160px; --gap: 14px; }
@media (max-width: 760px) { .hb-fv { --pw: 88px; --gap: 6px; } .hb-fv-steps li > div { margin-left: 4px; } }
/* ═══ 세로 흐름 — 번호·내용도 압력 곡선 모양을 따라 들여쓰기 (목표 압력 구간 04·05 는 오른쪽으로), 연결선은 곡선처럼 비스듬히 ═══ */
.hb-fv { --s: calc(var(--pw) * .6); }
.hb-fv-steps li { --x: 0px; --xn: 0px; grid-template-columns: var(--pw) calc(var(--x) + var(--nw)) minmax(0, 1fr); }
.hb-fv-steps li .hb-fv-n { justify-self: end; }
.hb-fv-steps li:nth-child(3) { --xn: var(--s); }
.hb-fv-steps li:nth-child(4) { --x: var(--s); --xn: var(--s); }
.hb-fv-steps li:nth-child(5) { --x: var(--s); }
/* 연결선: 같은 높이면 세로, 들여쓰기가 바뀌면 대각선 */
.hb-fv-steps li::after { left: calc(var(--pw) + var(--gap) + var(--x) + var(--nw) / 2); }
.hb-fv-steps li:nth-child(3)::after { width: var(--s); background: linear-gradient(to top right, transparent calc(50% - .8px), #cfd9d5 calc(50% - .8px), #cfd9d5 calc(50% + .8px), transparent calc(50% + .8px)); }
.hb-fv-steps li:nth-child(5)::after { left: calc(var(--pw) + var(--gap) + var(--nw) / 2); width: var(--s); background: linear-gradient(to top left, transparent calc(50% - .8px), #cfd9d5 calc(50% - .8px), #cfd9d5 calc(50% + .8px), transparent calc(50% + .8px)); }
@media (max-width: 760px) { .hb-fv { --s: 30px; } }
/* ═══ 세로 흐름 — 번호 원이 곡선 바로 옆을 따라가도록: 노드 위치 = 곡선 x + --d (1기압 22% · 목표 압력 82%) ═══ */
.hb-fv { --d: 30px; --lo: calc(var(--pw) * .22); --hi: calc(var(--pw) * .82); --s: calc(var(--hi) - var(--lo)); }
.hb-fv-steps li { --cx: var(--lo); --x: 0px; grid-template-columns: calc(var(--cx) + var(--d)) var(--nw) minmax(0, 1fr); column-gap: 0; }
.hb-fv-steps li:nth-child(4), .hb-fv-steps li:nth-child(5) { --cx: var(--hi); }
.hb-fv-pr { position: absolute; left: 0; width: var(--pw); top: var(--off); bottom: calc(var(--off) * -1); margin: 0; z-index: 0; }
.hb-fv-steps li:first-child .hb-fv-pr { top: 0; }
.hb-fv-steps li:last-child .hb-fv-pr { bottom: 0; }
.hb-fv-steps li .hb-fv-n { grid-column: 2; justify-self: start; }
.hb-fv-steps li > div { grid-column: 3; margin-left: var(--gap); }
.hb-fv-steps li::after { left: calc(var(--cx) + var(--d) + var(--nw) / 2); }
.hb-fv-steps li:nth-child(3)::after, .hb-fv-steps li:nth-child(5)::after { left: calc(var(--lo) + var(--d) + var(--nw) / 2); width: var(--s); }
@media (max-width: 760px) { .hb-fv { --d: 10px; } .hb-fv-steps li > div { margin-left: 10px; } }
/* 세로 흐름 — 곡선과 번호 원 간격 더 좁힘 (PC 30→12px · 모바일 10→4px) */
.hb-fv { --d: 12px; }
@media (max-width: 760px) { .hb-fv { --d: 4px; } }
/* 세로 흐름 — 비스듬한 연결선(03→04, 05→06)이 설명 글을 가로질러 숨김. 곡선이 바로 옆에서 흐름을 보여 줌 */
.hb-fv-steps li:nth-child(3)::after, .hb-fv-steps li:nth-child(5)::after { display: none; }
/* 세로 흐름 PC — 곡선과 번호·내용 사이 여유 (12 → 30px), 모바일은 4px 유지 */
@media (min-width: 761px) { .hb-fv { --d: 30px; } }
@media (min-width: 761px) { .hb-fv { --d: 50px; } }
/* 세로 흐름 — 번호 원 사이 연결선 제거 (흐름은 압력 곡선이 보여 줌) */
.hb-fv-steps li::after { display: none !important; }
/* 세로 흐름 모바일 — 곡선과 번호 원 간격 4 → 14px */
@media (max-width: 760px) { .hb-fv { --d: 14px; } }
/* 세로 흐름 — 그래프 색을 단계별로 조금 더 선명하게 (청록 → 하늘 → 남청 → 시안 → 초록), 선도 단계 색 */
.hb-fv-pr .a { fill: color-mix(in srgb, var(--c) 24%, #fff); }
.hb-fv-pr .l { stroke: var(--c); }
/* 세로 흐름 — 펄스를 사이트 공용 방식(fpGtPulse: 원 테두리에서 고리가 퍼짐, 0.4초 간격)으로 통일 */
.hb-fv-n::before, .hb-fv-n::after { content: none; animation: none; }
.hb-fv-n { animation: fpGtPulse 2.4s ease-out infinite; }
.hb-fv-steps li:nth-child(2) .hb-fv-n { animation-delay: .4s; } .hb-fv-steps li:nth-child(3) .hb-fv-n { animation-delay: .8s; } .hb-fv-steps li:nth-child(4) .hb-fv-n { animation-delay: 1.2s; } .hb-fv-steps li:nth-child(5) .hb-fv-n { animation-delay: 1.6s; } .hb-fv-steps li:nth-child(6) .hb-fv-n { animation-delay: 2s; }
@media (prefers-reduced-motion: reduce) { .hb-fv-n { animation: none; } }
.hb-page #hb-ear .hx-split-hd .ta-lede { margin-top: 18px; }
/* ═══ 고압산소 — 귀 압력 조절(#hb-ear) 재디자인 (2026-10-12): 원리 박스 · 가압/감압 비교 · 6단계 그림 카드 · 즉시 알림 경고 · 사전 고지 아이콘 카드 ═══ */
.hb-ec-why { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 26px 28px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-ec-ic { display: block; width: 56px; height: 56px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hb-ec-why h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--tg-ink); }
.hb-ec-why p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.hb-ec-why p b { color: #b8483e; }
.hb-ec-pv { margin-top: 40px; }
.hb-ec-pv-hd { margin: 0 0 28px; }
.hb-ec-pv-hd b { display: block; font-size: 19px; font-weight: 700; color: var(--tg-ink); }
.hb-ec-pv-hd span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.hb-ec-pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hb-ec-pv-grid article { position: relative; padding: 32px 24px 22px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 32%, #fff); }
.hb-ec-pv-grid .ac-pill { left: 18px; padding: 6px 13px; background: var(--c); font-size: 13px; font-weight: 700; }
.hb-ec-pv-grid header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hb-ec-ar { flex: none; width: 34px; height: 34px; padding: 5px; border-radius: 50%; background: var(--c); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.hb-ec-pv-grid h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.hb-ec-pv-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.hb-ec-pv-grid li { padding: 6px 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); font-size: 14.5px; font-weight: 600; color: var(--tg-ink); }
.hb-ec-no { position: relative; margin: 14px 0 0; padding-left: 22px; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: #b8483e; word-break: keep-all; }
.hb-ec-no::before { content: "\2715"; position: absolute; left: 0; top: 0; font-weight: 700; }
#hb-ear .hb-ec-pv + .ta-sub { margin-top: 48px; }
.hb-ec-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px; }
.hb-ec-steps li { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #dde5ec; }
.hb-ec-steps li > .ac-pill { z-index: 2; left: 16px; padding: 5px 13px; background: #3f8fd0; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; }
.hb-ec-steps img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f1f3f5; }
.hb-ec-steps b { display: block; margin: 16px 18px 4px; font-size: 16.5px; font-weight: 700; color: var(--tg-ink); }
.hb-ec-steps .d { display: block; margin: 0 18px 18px; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.hb-ec-alert { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; margin-top: 40px; padding: 32px 26px 24px; background: #fdf4f2; border: 1px solid #f0c9c1; }
.hb-ec-alert > .ac-pill { left: 20px; padding: 6px 13px; background: #b8483e; font-size: 13px; font-weight: 700; }
.hb-ec-alert-ic { display: block; width: 48px; height: 48px; background: color-mix(in srgb, #b8483e 80%, #fff); -webkit-mask: url("/assets/images/icons/rx-warning.svg?v=1") center / contain no-repeat; mask: url("/assets/images/icons/rx-warning.svg?v=1") center / contain no-repeat; }
.hb-ec-alert h3 { margin: 4px 0 12px; font-size: 18px; font-weight: 700; color: #8f2f26; word-break: keep-all; }
.hb-ec-alert ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hb-ec-alert li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.6; color: var(--tg-ink); word-break: keep-all; }
.hb-ec-alert li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: #b8483e; }
.hb-ec-alert p { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #f0d5cf; font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
#hb-ear .hb-ec-alert + .ta-sub { margin-top: 48px; }
.hb-ec-pre { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hb-ec-pre li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); }
.hb-ec-pre li > i { display: block; width: 44px; height: 44px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hb-ec-pre b { display: block; margin: 2px 0 6px; font-size: 16.5px; font-weight: 700; color: var(--tg-ink); }
.hb-ec-pre p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 760px) {
  .hb-ec-why { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px 16px; }
  .hb-ec-ic { width: 44px; height: 44px; }
  .hb-ec-why p { font-size: 15px; }
  .hb-ec-pv-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hb-ec-pv-grid article { padding: 30px 16px 18px; }
  .hb-ec-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 10px; }
  .hb-ec-steps b { margin: 12px 12px 4px; font-size: 15px; }
  .hb-ec-steps .d { margin: 0 12px 14px; font-size: 13.5px; }
  .hb-ec-steps li > .ac-pill { left: 10px; font-size: 12px; padding: 4px 10px; }
  .hb-ec-alert { grid-template-columns: minmax(0, 1fr); padding: 30px 16px 18px; }
  .hb-ec-alert-ic { width: 40px; height: 40px; margin-bottom: 8px; }
  .hb-ec-alert li { font-size: 15px; }
  .hb-ec-pre { grid-template-columns: minmax(0, 1fr); }
  .hb-ec-pre li { grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  .hb-ec-pre li > i { width: 38px; height: 38px; }
}
/* 귀 압력 그림 카드 — PC 6개 한 줄, 정사각 그림 그대로(잘림 없음) */
.hb-ec-steps img { aspect-ratio: 1 / 1; object-fit: contain; }
@media (min-width: 1100px) {
  .hb-ec-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; }
  .hb-ec-steps li > .ac-pill { left: 10px; padding: 4px 10px; font-size: 12px; }
  .hb-ec-steps b { margin: 12px 12px 4px; font-size: 15px; line-height: 1.4; word-break: keep-all; }
  .hb-ec-steps .d { margin: 0 12px 14px; font-size: 13.5px; line-height: 1.6; }
}
/* ═══ 고압산소 귀 압력 — 타이밍 그래프(.hb-et, 2026-10-12): 압력-시간 곡선 + 구간별 할 일 ═══ */
.hb-et { margin: 0 0 34px; padding: 26px 26px 20px; background: #fff; border: 1px solid #d5e2ef; box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-et-chart { position: relative; height: 130px; margin: 0 0 4px 30px; }
.hb-et-chart svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hb-et-chart .z1 { fill: color-mix(in srgb, #3f8fd0 9%, #fff); }
.hb-et-chart .z2 { fill: color-mix(in srgb, #3459b8 9%, #fff); }
.hb-et-chart .z3 { fill: color-mix(in srgb, #3fa3c4 9%, #fff); }
.hb-et-chart .ar { fill: rgba(52, 89, 184, .12); }
.hb-et-chart .ln { fill: none; stroke: #3459b8; stroke-width: 2; stroke-linejoin: round; }
.hb-et-chart .ax { fill: none; stroke: #b9c6d3; stroke-width: 1; }
.hb-et-ax { position: absolute; font-size: 12px; font-weight: 700; color: #7c8b99; white-space: nowrap; }
.hb-et-ax.is-y { left: -30px; top: 2px; writing-mode: vertical-rl; letter-spacing: .1em; }
.hb-et-ax.is-x { right: 0; bottom: -20px; }
.hb-et-ax.is-x::after { content: " \2192"; }
.hb-et-ax.is-y::before { content: "\2191 "; }
.hb-et-zones { list-style: none; margin: 26px 0 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 2.333fr 3.333fr 2.333fr 1fr; gap: 0 8px; }
.hb-et-zones li { position: relative; padding: 22px 12px 12px; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.hb-et-zones li.is-gap { background: none; border: 0; padding: 0; }
.hb-et-zones .ac-pill { left: 10px; padding: 4px 10px; background: var(--c); font-size: 12px; font-weight: 700; }
.hb-et-zones b { display: block; font-size: 15px; font-weight: 700; color: var(--c); word-break: keep-all; }
.hb-et-zones li > span:not(.ac-pill) { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--tg-body); word-break: keep-all; }
.hb-et-warn { margin: 16px 0 0 30px; font-size: 14px; color: var(--tg-body); word-break: keep-all; }
.hb-et-warn b { color: #b8483e; }
@media (max-width: 760px) {
  .hb-et { padding: 20px 14px 16px; }
  .hb-et-chart { height: 96px; margin-left: 22px; }
  .hb-et-ax.is-y { left: -22px; font-size: 11px; }
  .hb-et-ax.is-x { font-size: 11px; }
  .hb-et-zones { grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 34px 0 0; }
  .hb-et-zones li.is-gap { display: none; }
  .hb-et-warn { margin-left: 0; }
}
/* 타이밍 그래프 — 세로축 라벨을 가로 글씨 "압력 ↑" 로 (세로쓰기에서 화살표가 옆으로 돌던 문제) */
.hb-et-chart { margin-top: 22px; }
.hb-et-ax.is-y { left: 0; top: -22px; writing-mode: horizontal-tb; letter-spacing: 0; }
.hb-et-ax.is-y::before { content: none; }
.hb-et-ax.is-y::after { content: " \2191"; }
@media (max-width: 760px) { .hb-et-ax.is-y { left: 0; top: -20px; } .hb-et-chart { margin-left: 0; } }
/* 귀 압력 그림 카드 — PC 3개씩 2줄 (그림 잘림 없음 유지) */
@media (min-width: 1100px) {
  .hb-ec-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px; }
  .hb-ec-steps li > .ac-pill { left: 16px; padding: 5px 13px; font-size: 13px; }
  .hb-ec-steps b { margin: 16px 18px 4px; font-size: 16.5px; }
  .hb-ec-steps .d { margin: 0 18px 18px; font-size: 14.5px; }
}
/* 귀 압력 그림 카드 — 그림을 작게: 연회색 띠 전체 폭, 그림은 가운데 약 60% 크기 */
.hb-ec-steps img { box-sizing: border-box; width: 100%; height: auto; aspect-ratio: auto; padding: 16px 20%; background: #eee; object-fit: contain; }
@media (max-width: 760px) { .hb-ec-steps img { padding: 12px 16%; } }
/* 귀 압력 그림 카드 — 회색 띠 대신 그림 자체를 작은 정사각 타일로 (그림마다 바탕 회색이 조금씩 달라 띠와 경계가 보이던 문제) */
.hb-ec-steps img { width: 60%; aspect-ratio: 1 / 1; margin: 26px auto 0; padding: 0; background: none; object-fit: cover; }
@media (max-width: 760px) { .hb-ec-steps img { width: 72%; margin-top: 22px; padding: 0; } }
.hb-page #hb-safe .hx-split-hd .ta-lede { margin-top: 18px; }
/* ═══ 고압산소 안전성(#hb-safe) — 흔함/드묾 두 카드, 아이콘 줄 (2026-10-12) ═══ */
.hb-sf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hb-sf-col { position: relative; padding: 32px 0 8px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.hb-sf-col.is-rare { background: color-mix(in srgb, var(--c) 4%, #fff); }
.hb-sf-col > .ac-pill { left: 20px; padding: 6px 13px; background: var(--c); font-size: 13px; font-weight: 700; }
.hb-sf-col h3 { margin: 0; padding: 0 24px 14px; font-size: 19px; font-weight: 700; color: var(--tg-ink); border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, #fff); word-break: keep-all; }
.hb-sf-col ul { list-style: none; margin: 0; padding: 0; }
.hb-sf-col li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 24px; border-top: 1px solid #eef1f0; }
.hb-sf-col li:first-child { border-top: 0; }
.hb-sf-col li > i { display: block; width: 40px; height: 40px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hb-sf-col b { display: block; margin: 1px 0 4px; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.hb-sf-col p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; text-wrap: pretty; }
.hb-sf-col p em { font-style: normal; font-weight: 700; color: var(--c); }
.hb-sf-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; margin: 4px 16px 10px !important; padding: 12px 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); font-size: 14px !important; color: var(--tg-ink) !important; }
.hb-sf-note i { display: block; width: 22px; height: 22px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: url("/assets/images/icons/rx-shield.png?v=1") center / contain no-repeat; mask: url("/assets/images/icons/rx-shield.png?v=1") center / contain no-repeat; }
@media (max-width: 760px) {
  .hb-sf { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hb-sf-col h3 { padding: 0 16px 12px; font-size: 18px; }
  .hb-sf-col li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; }
  .hb-sf-col li > i { width: 34px; height: 34px; }
  .hb-sf-col p { font-size: 14px; }
  .hb-sf-note { margin: 4px 12px 10px !important; }
}
/* 귀 압력 그림 카드 — 그림 영역 전체 폭에 그림과 같은 바탕색(#f2f2f4) 띠, 그림은 가운데 60% */
.hb-ec-steps img { box-sizing: border-box; width: 100%; aspect-ratio: auto; margin: 0; padding: 20px 20%; background: #f2f2f4; object-fit: contain; }
@media (max-width: 760px) { .hb-ec-steps img { width: 100%; margin: 0; padding: 18px 14%; } }
/* 타이밍 그래프 — 압력 곡선 가는 선 (2px → 1.2px) */
.hb-et-chart .ln { stroke-width: 1.2; }
/* 타이밍 그래프 하단 안내 — 가운데 정렬 */
.hb-et-warn { margin-left: 0; text-align: center; }
/* 안전성 두 카드 — 높이 맞춤 (오른쪽 카드도 왼쪽과 같은 높이, 안내 문구는 맨 아래) */
@media (min-width: 761px) {
  .hb-sf { align-items: stretch; }
  .hb-sf-col { display: flex; flex-direction: column; }
  .hb-sf-col .hb-sf-note { margin-top: auto !important; }
}
/* 안전성 — "숨기고 진행하는 것이 가장 위험합니다" 경고 줄: 주의 아이콘 + 붉은색 */
.hb-warn-line { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 22px 0 0; padding: 16px 20px; background: #fdf4f2; border: 1px solid #f0c9c1; color: #8f2f26; font-size: 15.5px; line-height: 1.6; word-break: keep-all; }
.hb-warn-line i { display: block; width: 30px; height: 30px; background: #c0392b; -webkit-mask: url("/assets/images/icons/rx-warning.svg?v=1") center / contain no-repeat; mask: url("/assets/images/icons/rx-warning.svg?v=1") center / contain no-repeat; }
.hb-warn-line b { color: #c0392b; font-weight: 700; }
@media (max-width: 760px) { .hb-warn-line { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; font-size: 15px; } .hb-warn-line i { width: 26px; height: 26px; } }
/* 담적증 — 치료 펼침 카드 번호를 비염·고압산소 펼침 카드와 같게 (64px / 700 / 0.16) */
.dj-page #dj-tx .jg-case-no { width: 92px; flex: 0 0 92px; font-size: 64px; font-weight: 700; opacity: .16; letter-spacing: -.03em; }
@media (max-width: 760px) { .dj-page #dj-tx .jg-case-no { width: 64px; flex-basis: 64px; font-size: 46px; } }
/* 담적증 치료 펼침 카드 — 본문 문단·소카드·태그에 카드 안쪽 여백(테두리에 붙던 문제) */
.dj-page #dj-tx .jg-case > .dj-tx-p, .dj-page #dj-tx .jg-case > .dj-sub3, .dj-page #dj-tx .jg-case > .dj-tags { margin-left: 24px; margin-right: 24px; }
.dj-page #dj-tx .jg-case > :last-child:not(summary) { margin-bottom: 22px; }
@media (max-width: 760px) { .dj-page #dj-tx .jg-case > .dj-tx-p, .dj-page #dj-tx .jg-case > .dj-sub3, .dj-page #dj-tx .jg-case > .dj-tags { margin-left: 16px; margin-right: 16px; } }
/* 담적증 자율신경 표 — 부위 칸 아이콘(배경 원 없이 옅은 내용색) */
.dj-ans-tbl .dj-ans-org { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.dj-ans-tbl .dj-ans-org i { flex: none; width: 40px; height: 40px; background: color-mix(in srgb, #9a6328 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
@media (max-width: 760px) { .dj-ans-tbl .dj-ans-org { gap: 10px; } .dj-ans-tbl .dj-ans-org i { width: 34px; height: 34px; } }
/* 담적 자가진단 — 고객 초안처럼 좌측 문항 · 우측 점수 패널(1.5 : 1), 패널은 스크롤 따라 고정 + 영역별 막대 */
.dj-sc-gl { list-style: none; margin: 4px 0 22px; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 11px; }
.dj-sc-gl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b b"; gap: 6px 10px; align-items: baseline; }
.dj-sc-gl span { grid-area: n; font-size: 14px; color: rgba(255, 255, 255, .82); word-break: keep-all; }
.dj-sc-gl em { grid-area: v; padding: 0; border: 0; background: none; font-style: normal; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #fff; }
.dj-sc-gl i { grid-area: b; position: relative; display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.dj-sc-gl i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--c); transition: width .2s; }
@media (min-width: 1200px) {
  .dj-sc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .dj-sc-groups { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .dj-sc-res { position: sticky; top: 104px; margin-top: 14px; padding: 28px 24px 24px; }
  .dj-sc-total { flex-wrap: wrap; }
  .dj-sc-total small { flex: 0 0 100%; margin: 0 0 8px; }
  .dj-sc-n { font-size: 56px; }
  .dj-sc-reset { width: 100%; padding: 11px 16px; }
}
@media (min-width: 1200px) {
  .dj-sc-res { padding: 38px 26px 32px; }
  .dj-sc-total small { margin-bottom: 12px; }
  .dj-sc-bar { margin: 22px 0 34px; }
  .dj-sc-gl { gap: 16px; margin-bottom: 30px; padding-top: 22px; }
  .dj-sc-reset { margin-top: 24px; }
}
/* 담적증 소제목 마커 — 섹션마다 다른 파스텔(자율신경센터 팔레트) */
.dj-page #dj-gut .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255, 200, 150, .48) 62%); }
.dj-page #dj-what .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140, 225, 190, .45) 62%); }
.dj-page #dj-cause .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150, 205, 255, .45) 62%); }
.dj-page #dj-loop .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(200, 180, 245, .45) 62%); }
.dj-page #dj-dx .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(250, 216, 78, .45) 62%); }
.dj-page #dj-rx .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255, 170, 190, .42) 62%); }
/* ═══ 담적증 악순환 고리(#dj-loop .dj-lp, 2026-10-12): 시작점 01 → 02·03·04·05가 시계방향으로 도는 고리, 가운데 회전 화살표 ═══ */
.dj-lp { margin-top: 30px; --ar: #c2ae95; }
.dj-lp-in, .dj-lp li { position: relative; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
.dj-lp-no { position: absolute; z-index: 2; top: 0; left: 20px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--c); border-radius: 50%; background: #fff; color: var(--c); font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 700; line-height: 1; animation: fpGtPulse 2.4s ease-out infinite; }
.dj-lp li:nth-child(1) .dj-lp-no { animation-delay: .4s; }
.dj-lp li:nth-child(2) .dj-lp-no { animation-delay: .8s; }
.dj-lp li:nth-child(3) .dj-lp-no { animation-delay: 1.2s; }
.dj-lp li:nth-child(4) .dj-lp-no { animation-delay: 1.6s; }
.dj-lp-ic { display: block; flex: none; width: 42px; height: 42px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.dj-lp b { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.dj-lp p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.dj-lp-in { padding: 34px 20px 22px; background: color-mix(in srgb, var(--c) 5%, #fff); }
.dj-lp-in > .ac-pill { left: auto; right: 16px; padding: 5px 12px; background: var(--c); font-size: 12.5px; font-weight: 700; }
.dj-lp-in .dj-lp-ic { margin-bottom: 12px; }
.dj-lp ol { list-style: none; margin: 0; padding: 0; }
.dj-lp li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 34px 22px 22px; }
.dj-lp li > div { min-width: 0; }
.dj-lp li b { color: var(--c); }
/* 화살표: 1px 선 + 삼각 머리 */
.dj-lp-in::before, .dj-lp-in::after, .dj-lp li::before, .dj-lp li::after { content: ""; position: absolute; }
.dj-lp-core { display: none; }
.dj-lp-back { display: none; }
.dj-lp-out { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: center; margin-top: 44px; padding: 30px 24px 22px; background: #fdf4f2; border: 1px solid #f0c9c1; }
.dj-lp-out > .ac-pill { left: 20px; padding: 6px 13px; background: #b8483e; font-size: 13px; font-weight: 700; }
.dj-lp-out i { display: block; width: 34px; height: 34px; background: color-mix(in srgb, #b8483e 80%, #fff); -webkit-mask: url("/assets/images/icons/rx-warning.svg?v=1") center / contain no-repeat; mask: url("/assets/images/icons/rx-warning.svg?v=1") center / contain no-repeat; }
.dj-lp-out p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tg-ink); word-break: keep-all; }
.dj-lp-out b { color: #b8483e; }

/* PC: [시작점] [02][03] / [ ][05][04] — 가운데에 회전 고리 */
@media (min-width: 1200px) {
  .dj-lp { display: grid; grid-template-columns: 196px minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .dj-lp-ring, .dj-lp-ring ol { display: contents; }
  .dj-lp-in { grid-column: 1; grid-row: 1; }
  .dj-lp li { align-content: center; }
  .dj-lp li:nth-child(1) { grid-column: 2; grid-row: 1; }
  .dj-lp li:nth-child(2) { grid-column: 3; grid-row: 1; }
  .dj-lp li:nth-child(3) { grid-column: 3; grid-row: 2; }
  .dj-lp li:nth-child(4) { grid-column: 2; grid-row: 2; }
  /* → (시작점→02, 02→03) */
  .dj-lp-in::before, .dj-lp li:nth-child(1)::before { top: 50%; right: -56px; width: 48px; border-top: 1px solid var(--ar); }
  .dj-lp-in::after, .dj-lp li:nth-child(1)::after { top: calc(50% - 4px); right: -57px; border-left: 8px solid var(--ar); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
  /* ↓ (03→04) */
  .dj-lp li:nth-child(2)::before { left: 50%; bottom: -56px; height: 48px; border-left: 1px solid var(--ar); }
  .dj-lp li:nth-child(2)::after { left: calc(50% - 4px); bottom: -57px; border-top: 8px solid var(--ar); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; }
  /* ← (04→05) */
  .dj-lp li:nth-child(3)::before { top: 50%; left: -56px; width: 48px; border-top: 1px solid var(--ar); }
  .dj-lp li:nth-child(3)::after { top: calc(50% - 4px); left: -57px; border-right: 8px solid var(--ar); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
  /* ↑ (05→02) */
  .dj-lp li:nth-child(4)::before { left: 50%; top: -56px; height: 48px; border-left: 1px solid var(--ar); }
  .dj-lp li:nth-child(4)::after { left: calc(50% - 4px); top: -57px; border-bottom: 8px solid var(--ar); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; }
  .dj-lp-core { grid-column: 2 / 4; grid-row: 1 / 3; place-self: center; z-index: 3; position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: #fff; border: 1px solid #eadfce; box-shadow: 0 10px 26px -14px rgba(90, 60, 25, .45); }
  .dj-lp-core svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); fill: none; stroke: #c9612c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: djLpSpin 14s linear infinite; }
  .dj-lp-core span { position: relative; font-size: 15px; font-weight: 700; color: #9a6328; letter-spacing: -.01em; }
}
@keyframes djLpSpin { to { transform: rotate(360deg); } }

/* 태블릿·모바일: 세로 흐름 + 오른쪽 점선 되돌이(05 → 02) */
@media (max-width: 1199px) {
  .dj-lp-in { margin-bottom: 52px; }
  .dj-lp-in .dj-lp-ic { margin-bottom: 10px; }
  .dj-lp-in::before { left: 50%; bottom: -44px; height: 36px; border-left: 1px solid var(--ar); }
  .dj-lp-in::after { left: calc(50% - 4px); bottom: -45px; border-top: 8px solid var(--ar); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; }
  .dj-lp-ring { position: relative; padding-right: 30px; }
  .dj-lp ol { position: relative; display: grid; gap: 52px; }
  .dj-lp li + li::before { left: 50%; top: -45px; height: 36px; border-left: 1px solid var(--ar); }
  .dj-lp li + li::after { left: calc(50% - 4px); top: -10px; border-top: 8px solid var(--ar); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; }
  .dj-lp ol::before { content: ""; position: absolute; top: 40px; bottom: 40px; right: -22px; width: 21px; border: 1px dashed #d27c6c; border-left: 0; }
  .dj-lp ol::after { content: ""; position: absolute; top: 36px; right: -2px; border-right: 8px solid #d27c6c; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
  .dj-lp-back { display: block; margin: 12px 0 0; text-align: right; font-size: 13.5px; font-weight: 600; color: #b8483e; }
  .dj-lp-back span { display: inline-block; margin-right: 6px; padding: 4px 10px; border-radius: 999px; background: #b8483e; color: #fff; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; }
}
@media (max-width: 760px) {
  .dj-lp li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 30px 16px 18px; }
  .dj-lp-ic { width: 36px; height: 36px; }
  .dj-lp-in { padding: 30px 16px 18px; }
  .dj-lp b { font-size: 15.5px; }
  .dj-lp p { font-size: 14px; }
  .dj-lp-out { grid-template-columns: 30px minmax(0, 1fr); padding: 28px 16px 18px; }
  .dj-lp-out i { width: 30px; height: 30px; }
  .dj-lp-out p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .dj-lp-core svg, .dj-lp-no { animation: none; } }
/* 담적 고리 아이콘 확대 */
.dj-lp li { grid-template-columns: 52px minmax(0, 1fr); }
.dj-lp-ic { width: 52px; height: 52px; }
@media (max-width: 760px) { .dj-lp li { grid-template-columns: 44px minmax(0, 1fr); } .dj-lp-ic { width: 44px; height: 44px; } }
/* 악순환 원 화살표 — 호 4개 + 끝마다 채운 삼각 머리(시계방향) */
.dj-lp-core svg { stroke-width: 2; }
.dj-lp-core svg .h { fill: #c9612c; stroke: none; }
/* 담적 치료 카드 — 이런 분께 / 확인 방식: 한 줄에 하나(1열) + 사이 가는 구분선 */
.dj-page #dj-tx .et-tx-bd { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dj-page #dj-tx .et-tx-bd > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.dj-page #dj-tx .et-tx-bd > div:first-child { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.dj-page #dj-tx .et-tx-bd > div:last-child { padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
/* 담적 협척혈 카드 — 약침·전침·습부항 소카드 아이콘(좌측 아이콘 + 알약) */
.dj-sub3 li:has(> .dj-sub3-ic) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.dj-sub3-ic { display: block; width: 40px; height: 40px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.dj-sub3 li:has(> .dj-sub3-ic) > b { justify-self: start; }
.dj-sub3 li:has(> .dj-sub3-ic) > p { grid-column: 1 / -1; margin-top: 12px; }
/* 담적 치료 펼침 카드 — 연구 참고·솔직한 안내·용어표·더보기 링크도 카드 안쪽 여백(테두리에 붙던 문제) */
.dj-page #dj-tx .jg-case > .dj-study, .dj-page #dj-tx .jg-case > .dj-honest, .dj-page #dj-tx .jg-case > .dj-dl, .dj-page #dj-tx .jg-case > .et-more { margin-left: 24px; margin-right: 24px; }
.dj-page #dj-tx .jg-case > .dj-study, .dj-page #dj-tx .jg-case > .dj-honest { margin-top: 30px; }
@media (max-width: 760px) { .dj-page #dj-tx .jg-case > .dj-study, .dj-page #dj-tx .jg-case > .dj-honest, .dj-page #dj-tx .jg-case > .dj-dl, .dj-page #dj-tx .jg-case > .et-more { margin-left: 16px; margin-right: 16px; } }
/* 담적 06 고압산소치료 — 자세히 보기 링크 우측 정렬 */
.dj-page #dj-tx .jg-case > .et-more[href="/kr/p/auto-hbot/"] { display: table; margin-left: auto; }
/* 담적 07 교감단 — 제품 이미지 + 구성표, 자세히 보기 우측 */
.dj-page #dj-tx .jg-case > .dj-gd { margin: 18px 24px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dj-gd .dj-dl { margin: 0; }
.dj-gd-pic { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 20px 16px; background: color-mix(in srgb, var(--c) 5%, #fff); }
.dj-gd-pic img { display: block; width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 12px 16px rgba(60, 40, 80, .18)); }
.dj-gd-pic figcaption { font-size: 13.5px; font-weight: 600; color: var(--c); }
@media (min-width: 1000px) { .dj-page #dj-tx .jg-case > .dj-gd { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (max-width: 760px) { .dj-page #dj-tx .jg-case > .dj-gd { margin: 18px 16px 0; } .dj-gd-pic { padding: 18px 14px 14px; } }
.dj-page #dj-tx .jg-case > .et-more[href="/kr/p/herb-autonomic-gyogam/"] { display: table; margin-left: auto; }
/* 담적 치료 순서 — 번호 원 펄스(공용 fpGtPulse, 0.4초 간격) */
.dj-steps > li > .ac-no { animation: fpGtPulse 2.4s ease-out infinite; }
.dj-steps > li:nth-child(2) > .ac-no { animation-delay: .4s; }
.dj-steps > li:nth-child(3) > .ac-no { animation-delay: .8s; }
.dj-steps > li:nth-child(4) > .ac-no { animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .dj-steps > li > .ac-no { animation: none; } }
/* 담적 상단 이미지 확대 — 고압산소 페이지와 같은 비율(.95 : 1.05), 4:3 */
@media (min-width: 900px) {
  .dj-page .hx-lead { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; }
  .dj-page .hx-lead .ad-hero-pic { aspect-ratio: 4 / 3; overflow: hidden; }
  .dj-page .hx-lead .ad-hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
}
/* ═══ 2026-10-12 금주클리닉(auto-alcohol) 재디자인 — 담적증·고압산소 페이지 부품으로 통일 ═══ */
.al-page { --ac-red: #b8483e; --ac-red-soft: #fbefeb; --ac-green: #137a52; --ac-green-soft: #eaf5f0; --fp: #137a52; --fp-soft: #eaf5f0; --fp-bg: #f4f9f6; --cr: #137a52; }
/* 아이콘 카드 — 배경 원 없이 옅은 내용색 */
.al-page .al-ico4 .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.al-page .al-ico4 .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
@media (max-width: 560px) { .al-page .al-ico4 .fp-why-ico, .al-page .al-ico4 .fp-why-ico::before { width: 40px; height: 40px; } }
.al-page .al-ico4 > li > .ac-pill { background: var(--c); }
.al-page .al-ico4 .dj-tags { margin-top: 14px; }
@media (min-width: 1200px) { .al-page .al-trust3.fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 핵심·안내 박스 */
.al-page .al-key, .al-page .al-warn { margin-top: 36px; }
.al-page .al-key .al-key-q { margin-bottom: 8px; font-size: 18px; font-weight: 700; line-height: 1.55; color: var(--tg-ink); }
.al-page .al-key p + p { margin-top: 0; }
.al-page .al-warn b { color: var(--ac-red); }
/* 치료 — 아코디언(담적증 7가지 치료와 동일) */
.al-page #hx-tx .jg-case-no { width: 92px; flex: 0 0 92px; font-size: 64px; font-weight: 700; opacity: .16; letter-spacing: -.03em; }
.al-page #hx-tx .jg-case > :is(.dj-tx-p, .dj-tags, .et-tx-bd, .dj-gd-pic, .al-warn, .et-more) { margin-left: 24px; margin-right: 24px; }
.al-page #hx-tx .jg-case > .et-tx-bd { margin-top: 18px; padding: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
.al-page #hx-tx .et-tx-bd > div { padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--c) 18%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, #fff); }
.al-page #hx-tx .et-tx-bd h4 { margin: 0 0 10px; }
.al-page #hx-tx .jg-case > .dj-gd-pic { margin-top: 18px; }
.al-page #hx-tx .jg-case > .al-warn { margin-top: 30px; }
.al-page #hx-tx .jg-case > .et-more { display: table; margin-left: auto; }
.al-page #hx-tx .jg-case > :last-child:not(summary) { margin-bottom: 22px; }
.al-page #hx-tx .dj-tx-p b { color: var(--tg-ink); }
@media (max-width: 760px) {
  .al-page #hx-tx .jg-case-no { width: 64px; flex-basis: 64px; font-size: 46px; }
  .al-page #hx-tx .jg-case > :is(.dj-tx-p, .dj-tags, .et-tx-bd, .dj-gd-pic, .al-warn, .et-more) { margin-left: 16px; margin-right: 16px; }
  .al-page #hx-tx .jg-case > .et-more { margin-left: auto; }
}
/* 악순환 고리 — 시작점 없이 4단계 2×2 + 가운데 회전 고리 */
@media (min-width: 1200px) {
  .dj-lp.is-ring4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dj-lp.is-ring4 li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dj-lp.is-ring4 li:nth-child(2) { grid-column: 2; grid-row: 1; }
  .dj-lp.is-ring4 li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .dj-lp.is-ring4 li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .dj-lp.is-ring4 .dj-lp-core { grid-column: 1 / 3; }
}
.al-page .al-loop-warn { margin-top: 30px; }
/* 단계 흐름 — 번호 원 펄스, 단계 꼬리표는 단계 색 */
.al-page .al-steps h3 em { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.al-page .al-steps .al-step-k { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; color: var(--c); }
.al-page .al-steps .dj-tags { margin-top: 12px; }
.al-page .al-steps .dj-tags span { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.dj-steps > li:nth-child(5) > .ac-no { animation-delay: 1.6s; }
.al-page #al-loop .al-steps { margin-top: 8px; }
/* 말 vs 기록 — 아이콘 */
.al-pair-ic { display: block; width: 44px; height: 44px; margin-bottom: 12px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.al-page .al-pair { margin-top: 30px; }
.al-page .al-pair .et-pair-c h3 { font-size: 18px; }
/* 2장 카드(양형자료) */
.al-page .al-duo2 > li:last-child { grid-column: auto; }
.al-page #hx-tx { --mk: rgba(250,216,78,.45); }
.al-page #ta-flow { --mk: rgba(120,205,220,.40); }
/* 금주 상단 이미지 — 흰 바탕 카드 제거, 이미지 + 아래 문구만 */
.al-page .ad-hero { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.al-page .ad-hero-hd { padding: 14px 0 0; }
@media (min-width: 900px) {
  .al-page .hx-lead { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; }
  .al-page .ad-hero-pic { aspect-ratio: 5 / 4; }
}
.al-page .ad-hero-hd { text-align: right; }
/* 2026-10-12 자율신경센터 다국어 — 담적 자가진단 점수 단위 */
body.lang-en .dj-sc-g label em::after { content: " pt"; font-family: 'Poppins', sans-serif; }
body.lang-jp .dj-sc-g label em::after { content: "点"; }
body.lang-cn .dj-sc-g label em::after { content: "分"; }
/* 다국어 — 번역 후 비운 한자 병기 숨김(중복 방지) */
body:not(.lang-kr) .pg-body p.tg-han:empty, body:not(.lang-kr) .pg-body b > span:empty { display: none; }
body:not(.lang-kr) .gj-page .gj-quote cite { white-space: normal; max-width: calc(100% - 44px); }
body:not(.lang-kr) .pg-body { overflow-x: clip; }
/* 구안와사 치료법 표 — 모바일: '후유증기 핵심' 배지를 이름 아래 줄로(치료법 칸 폭 축소) */
@media (max-width: 760px) { .fp-tb-badge { display: block; width: fit-content; margin: 7px 0 0; vertical-align: 0; } }
/* 구안와사 치료법 표 — 모바일: 핵심 작용 두 줄 + '원리 보기' 버튼은 아래 줄 */
@media (max-width: 760px) { .fp-table tbody tr.is-key td b { display: block; } .fp-tb-more { display: flex; width: fit-content; margin: 10px 0 0; } }
/* 모바일 메뉴 안 언어 칩 숨김 — 헤더 KR 선택기와 중복 (2026-10-13) */
.gnb .gnb-extra { display: none !important; }
/* 구안와사 치료법 표 — 외국어 모바일: 긴 치료법 이름 줄바꿈 허용(첫 칸 폭 축소) */
@media (max-width: 760px) { body:not(.lang-kr) .fp-table tbody th { white-space: normal; min-width: 150px; } }
/* ═══ 언어 선택 버튼 재디자인 (2026-10-13) — 사이트 초록 알약 + 코드 배지 드롭다운 ═══ */
.lang-btn { gap: 7px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tg-green, #137a52) 22%, #fff); background: color-mix(in srgb, var(--tg-green, #137a52) 5%, #fff); color: var(--tg-green-2, #0f6544); }
.lang-btn .lang-ico { width: 17px; height: 17px; color: var(--tg-green, #137a52); }
.lang-btn .lang-code { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1; }
.lang-btn .lang-caret { width: 11px; height: 11px; color: color-mix(in srgb, var(--tg-green, #137a52) 60%, #fff); }
.lang-btn:hover, .lang-switcher:hover .lang-btn, .lang-switcher:focus-within .lang-btn { border-color: var(--tg-green, #137a52); background: var(--tg-green, #137a52); color: #fff; box-shadow: 0 6px 16px -8px rgba(19, 122, 82, .6); }
.lang-switcher:hover .lang-btn .lang-ico, .lang-switcher:focus-within .lang-btn .lang-ico, .lang-switcher:hover .lang-btn .lang-caret, .lang-switcher:focus-within .lang-btn .lang-caret { color: #fff; }
.lang-switcher ul { min-width: 176px; margin-top: 10px; padding: 6px; border-radius: 0; border: 1px solid color-mix(in srgb, var(--tg-green, #137a52) 16%, #fff); box-shadow: 0 18px 36px -18px rgba(15, 40, 30, .35); }
.lang-switcher ul::after { content: ""; position: absolute; top: -6px; right: 22px; width: 10px; height: 10px; background: #fff; border-left: 1px solid color-mix(in srgb, var(--tg-green, #137a52) 16%, #fff); border-top: 1px solid color-mix(in srgb, var(--tg-green, #137a52) 16%, #fff); transform: rotate(45deg); }
.lang-switcher li a { justify-content: flex-start; gap: 12px; padding: 9px 10px; border-radius: 0; font-size: 14.5px; color: var(--tg-ink, #1f2a26); }
.lang-switcher li + li a { border-top: 1px solid #f0f3f1; }
.lang-switcher .lang-cd { flex: none; display: grid; place-items: center; width: 30px; height: 22px; border-radius: 999px; background: #f1f5f3; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #6c7a74; transition: background .15s, color .15s; }
.lang-switcher li a:hover { background: color-mix(in srgb, var(--tg-green, #137a52) 6%, #fff); color: var(--tg-green-2, #0f6544); }
.lang-switcher li a:hover .lang-cd { background: color-mix(in srgb, var(--tg-green, #137a52) 16%, #fff); color: var(--tg-green, #137a52); }
.lang-switcher li a.is-active { background: color-mix(in srgb, var(--tg-green, #137a52) 7%, #fff); color: var(--tg-green-2, #0f6544); font-weight: 700; }
.lang-switcher li a.is-active .lang-cd { background: var(--tg-green, #137a52); color: #fff; }
.lang-switcher li a.is-active::after { content: ""; margin-left: auto; width: 6px; height: 11px; border-right: 2px solid var(--tg-green, #137a52); border-bottom: 2px solid var(--tg-green, #137a52); transform: translateY(-2px) rotate(45deg); }
@media (max-width: 760px) { .lang-btn { height: 36px; padding: 0 10px 0 9px; } }
/* 만성통증 부위별 7페이지 치료 조합 표 — 모바일: '목에서의 역할' 열 폭 축소 */
@media (max-width: 760px) { .cr-page #cr-combo .cr-table { min-width: 600px; } .cr-page #cr-combo .cr-table td:last-child { width: 260px; } }
/* 만성통증 전신 치료 카드(cr-rec) — 모바일: 걸친 라벨이 윗 카드에 붙지 않게 카드 간격 확대 */
@media (max-width: 899px) { .ac-why2.cr-rec { gap: 34px; } }
/* 구안와사 치료법 표 — 모바일: '핵심 작용' 열 폭 축소 */
@media (max-width: 760px) { .ac-page .tg-table.fp-table { min-width: 650px; } .fp-table tbody td:last-child { width: 200px; } .fp-table tbody td:nth-child(3) { width: 165px; } }
/* 통증매선 항목별 비교 표 — 모바일: '구분' 열 줄바꿈 허용·폭 축소 */
@media (max-width: 760px) { .ta-page .tg-table.ms-cmp tbody th { white-space: normal; width: 132px; min-width: 0; word-break: keep-all; } .ta-page .tg-table.ms-cmp { min-width: 700px; } }
/* 자율신경실조증 상열하한 표 — 모바일: '상열' 열 폭 축소 */
@media (max-width: 760px) { #ad-mech .tg-table.ad-map { min-width: 467px; } #ad-mech .tg-table.ad-map td:nth-child(2) { width: 185px; } #ad-mech .tg-table.ad-map td:nth-child(3) { width: 185px; } }
/* 옴니핏 사진 설명 — 모바일: 두 줄로 꺾이는 둥근 박스 대신 가운데 정렬 캡션 */
@media (max-width: 760px) {
  .ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption { position: static; left: auto; right: auto; transform: none; width: auto; align-self: stretch; max-width: none; align-items: center; gap: 4px; margin: 10px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid color-mix(in srgb, #2f6fb3 18%, #fff); border-radius: 0; background: none; box-shadow: none; text-align: center; }
  .ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption b { font-size: 16px; }
  .ta-page #hx-dx .om-bd .dx-hero.is-omni figcaption span { font-size: 14px; line-height: 1.55; }
}
/* 혀통증 치료 항목 — 모바일: '더 자세히 알아보기' 버튼 오른쪽 정렬 */
@media (max-width: 760px) { .tn-page .ta-tx-item .ta-more-link { display: flex; width: fit-content; margin-left: auto; } }
/* 혀통증 '침 · 전기침 · 구강 국소 자극' 제목 — 모바일: 강제 줄바꿈 해제(한국어 한 줄, 다국어 자연 줄바꿈) */
@media (max-width: 760px) { .tn-page :is(#tx-acu, #tx-hyeopcheok) header h3 br { display: none; } }
/* 혀통증 변증 비교표 — 모바일: '주요 호소' 열 폭 축소 */
@media (max-width: 760px) { .ta-page.tn-page #tg-pattern .tg-table.tp-cmp { min-width: 885px; } .ta-page.tn-page #tg-pattern .tg-table.tp-cmp td:nth-child(2) { width: 232px; } }
/* 혀통증 혀질환 비교표 — 모바일: '혀질환' 열 폭 확대 */
@media (max-width: 760px) {
  .ta-page.tn-page #tg-type .tg-table.ta-cmp { min-width: 1153px; }
  .ta-page.tn-page #tg-type .tg-table.ta-cmp thead th:nth-child(3) { width: 195px; }
  .ta-page.tn-page #tg-type .tg-table.ta-cmp thead th:first-child { width: 274px; }
  .ta-page.tn-page #tg-type .tg-table.ta-cmp thead th:nth-child(2) { width: 252px; }
  /* 혀질환 칸: grid 칸이 행 높이를 못 채우던 문제 → 표 칸 그대로 두고 사진·이름을 인라인 배치 */
  .ta-page.tn-page #tg-type .ta-cmp tbody th { display: table-cell; vertical-align: middle; white-space: nowrap; }
  .ta-page.tn-page #tg-type .ta-cmp tbody th .ta-cmp-pic { display: inline-block; vertical-align: middle; margin-right: 12px; }
  .ta-page.tn-page #tg-type .ta-cmp tbody th .ta-cmp-nm { display: inline-block; vertical-align: middle; white-space: normal; }
}
/* 금진옥액 설 영상 측정장치 사진 설명 — 모바일: 두 줄로 꺾이는 둥근 박스 대신 가운데 정렬 캡션(혀통증 옴니핏과 동일) */
@media (max-width: 760px) {
  .gj-page .gj-hd-dev { margin-bottom: 30px; }
  .gj-page .gj-hd-dev img { aspect-ratio: auto; padding: 0; }
  .gj-page .gj-hd-dev figcaption { position: static; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--tg-hair); border-radius: 0; background: none; box-shadow: none; text-align: center; }
  .gj-page .gj-hd-dev figcaption b { font-size: 16px; }
  .gj-page .gj-hd-dev figcaption span { font-size: 14px; line-height: 1.55; }
}
/* 이명 '함께 오는 세 가지 흐름' 카드 — 모바일: 카드 간격을 만성통증 전신치료 카드와 같은 34px로 */
@media (max-width: 760px) { #et-what .fp-why.et-pat { row-gap: 34px; } }
/* ═══ 2026-10-13 모바일 — 위로 걸친 라벨이 윗 카드에 붙지 않게(라벨 위 여백 약 20px로 통일) ═══ */
@media (max-width: 760px) {
  .fp-why:has(> li > .ac-pill) { row-gap: 34px !important; }
  #hb-why .ta-trio.is-num { row-gap: 34px; }
  #hb-why .hb-pair { row-gap: 40px; }
  #hb-ear .hb-et-zones { row-gap: 34px; }
  #hb-compare .hb-pick2 { row-gap: 36px; }
  #hb-compare .hb-gauge { margin-top: 36px; }
  #gj-intro .gj-anat-txt, #gj-combo .gj-cb, #gj-care .gj-wn { row-gap: 34px; }
  #gj-evidence .gj-evt-card { margin-top: 12px; }
  .mn-cause-list { row-gap: 34px; }
  #ro-ans .ro-rx { margin-top: 32px; }
  #ro-step1 .ro-blood { margin-top: 34px; }
  .ms-rg-box { margin-top: 34px; }
  .rx-lead .rx-spec { margin-top: 6px; }
  #et-txp .et-txp-p { margin-top: 34px; }
  #hb-ear .hb-ec-steps { row-gap: 34px; }
}
/* 고압산소 1.5/3.0기압 비교표 — 모바일: '적응 영역' 열 폭 축소(288→230px) */
@media (max-width: 760px) { .ta-page .tg-table.hb-cmp { min-width: 590px; } #hb-compare .hb-cmp thead th:nth-child(1) { width: 230px; } #hb-compare .hb-cmp thead th:nth-child(2), #hb-compare .hb-cmp thead th:nth-child(3) { width: 180px; } }
/* 고압산소 '상담이 먼저인 경우' 표 — 모바일: '해당 상황'·'이유' 열 폭 축소 */
@media (max-width: 760px) { #hb-safe .tg-table.tile-tbl { min-width: 506px; } #hb-safe .tg-table.tile-tbl thead th:nth-child(2) { width: 220px; } #hb-safe .tg-table.tile-tbl thead th:nth-child(3) { width: 190px; } }
/* 표 칸 세로 가운데 정렬 — 사이트 전체 표(2026-10-13) */
.tg-table tbody th, .tg-table td { vertical-align: middle; }
.ro-page .ro-cmp tbody td, .cmp th, .cmp td { vertical-align: middle; }
/* 담적 '자율신경 두 갈래' 표 — 모바일: 표 폭 축소(760→470px) */
@media (max-width: 760px) { .dj-page .tg-table.ac-table.dj-ans-tbl { min-width: 470px; } .dj-page .dj-ans-tbl thead th:nth-child(1) { width: 136px; } .dj-page .dj-ans-tbl thead th:nth-child(2), .dj-page .dj-ans-tbl thead th:nth-child(3) { width: 167px; } }
/* 담적 처방 예시 표 — 모바일: '구성의 중심' 열 폭 축소(405→260px) */
@media (max-width: 760px) { .dj-page .tg-table.ac-table.dj-rx-tbl { min-width: 610px; } .dj-page .ac-table.dj-rx-tbl td { white-space: normal; } .dj-page .dj-rx-tbl thead th:nth-child(2) { width: 222px; } .dj-page .dj-rx-tbl thead th:nth-child(3) { width: 260px; } }
/* 흉살 치료 구성 — 사이트 공통 아이콘(배경 원 없이 옅은 내용색 마스크, 2026-10-13) */
#hx-tx .tx-ico[style*="--ic"] { border-radius: 0; background: color-mix(in srgb, var(--tg-beauty) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* 외과수술 후 흉살 — 대상 예시 태그를 세로 쌓기 대신 한 줄로(넘치면 다음 줄) */
#hx-site .proc-card ul.case-tags { flex-direction: row; flex-wrap: wrap; gap: 8px; }
#hx-site .proc-card ul.case-tags li { flex: none; width: auto; }
/* 미용·성형 후 흉살 — '조직 반응을 가르는 것' 3항목 카드 재디자인(걸친 라벨·아이콘·워터마크 숫자, 2026-10-13) */
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 34px; padding: 0; border: 0; }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: start; padding: 34px 22px 24px; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); border-left: 1px solid color-mix(in srgb, var(--c) 28%, #fff); background: color-mix(in srgb, var(--c) 4%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); overflow: hidden; }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors li > .ac-pill { left: 20px; background: var(--c); }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors li { overflow: visible; }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factor-no { position: absolute; right: 16px; bottom: 6px; margin: 0; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--c); opacity: .14; pointer-events: none; }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-f-ic { display: block; width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors b { position: relative; font-size: 19px; font-weight: 700; color: var(--c); }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factor-txt { position: relative; grid-column: 1 / -1; margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--tg-body); }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors-label { margin-bottom: 0; font-weight: 600; }
@media (min-width: 900px) {
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; }
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors li, :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors li:first-child { padding: 34px 22px 24px; border-left: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factor-no { margin: 0; font-size: 64px; }
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factor-txt { grid-column: 1 / -1; margin-top: 14px; }
}
@media (max-width: 760px) {
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors li { padding: 30px 18px 20px; }
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-f-ic { width: 40px; height: 40px; }
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors b { font-size: 18px; }
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factor-no { font-size: 52px; }
  :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factor-txt { font-size: 15px; }
}
/* 주사·미용시술 — '조직 반응을 가르는 것' 문구를 좌측 타이틀 아래로 */
#hx-inject .hx-split-hd .hc-factors-label { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--tg-beauty); }
/* 주사·미용시술 시술별 카드 — '발생 가능 양상 01~04' 라벨을 박스 상단에 걸침 */
#hx-inject .proc.is-case { row-gap: 34px; margin-top: 18px; }
#hx-inject .proc.is-case .proc-card { position: relative; overflow: visible; padding-top: 36px; }
#hx-inject .proc.is-case .proc-label { position: absolute; top: 0; left: 26px; transform: translateY(-50%); padding: 6px 13px; border: 0; background: var(--tg-beauty); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 760px) { #hx-inject .proc.is-case .proc-card { padding-top: 32px; } #hx-inject .proc.is-case .proc-label { left: 18px; } }
/* 외과수술 후 흉살 A~D 카드 — 머리 라벨(주요 증상·대상 예시)을 박스 상단에 걸침(미용·성형 페이지와 동일) */
#hx-site .proc.is-case { row-gap: 34px; margin-top: 18px; }
#hx-site .proc.is-case .proc-card { position: relative; overflow: visible; padding-top: 36px; }
#hx-site .proc.is-case .case-hd .proc-label { position: absolute; top: 0; left: 26px; transform: translateY(-50%); margin: 0; padding: 6px 13px; border: 0; background: var(--tg-beauty); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 760px) { #hx-site .proc.is-case .proc-card { padding-top: 32px; } #hx-site .proc.is-case .case-hd .proc-label { left: 18px; } }
/* 미용·성형 후 흉살 TYPE B 성형수술 카드 — '주요 증상 01~05' 라벨도 박스 상단에 걸침 */
#hx-surgery .proc.is-case { row-gap: 34px; margin-top: 18px; }
#hx-surgery .proc.is-case .proc-card { position: relative; overflow: visible; padding-top: 36px; }
#hx-surgery .proc.is-case .case-hd .proc-label { position: absolute; top: 0; left: 26px; transform: translateY(-50%); margin: 0; padding: 6px 13px; border: 0; background: var(--tg-beauty); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 760px) { #hx-surgery .proc.is-case .proc-card { padding-top: 32px; } #hx-surgery .proc.is-case .case-hd .proc-label { left: 18px; } }
#hx-inject .hx-split-hd .hc-factors-label { margin-top: 22px; padding-top: 18px; border-top: .5px solid color-mix(in srgb, var(--tg-beauty) 16%, #fff); }
#hx-surgery .hx-split-hd .hc-factors-label { margin: 22px 0 0; padding-top: 18px; border-top: .5px solid color-mix(in srgb, var(--tg-beauty) 16%, #fff); font-size: 15px; font-weight: 600; color: var(--tg-beauty); }
/* 미용·성형 후 흉살 — 지도 제목을 서브타이틀 형광 마커로(섹션마다 다른 파스텔) */
:is(#hx-inject, #hx-surgery) .hmap-head .hmap-title { display: inline; margin: 0; padding: 0 4px; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, var(--mk) 62%); background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#hx-inject .hmap-head { --mk: rgba(255, 170, 190, .42); }
#hx-surgery .hmap-head { --mk: rgba(200, 180, 245, .45); }
:is(#hx-inject, #hx-surgery) .hmap-head .hmap-lead { margin-top: 12px; }
@media (max-width: 760px) { :is(#hx-inject, #hx-surgery) .hmap-head .hmap-title { font-size: 23px; } }
/* ═══ 미용·성형 후 흉살 DIFFERENTIATION(#hx-diff) 재디자인 (2026-10-13) — 걸친 라벨 카드·≠ 원·확인 3카드·결론 바 ═══ */
:is(#hx-diff, #hx-layer) .dx-cases { padding-top: 16px; }
:is(#hx-diff, #hx-layer) .dx-cases > li:not(.dx-neq) { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 30px 20px 22px; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); border-radius: 0; background: color-mix(in srgb, var(--c) 4%, #fff); box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
:is(#hx-diff, #hx-layer) .dx-case-tag { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 6px 13px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
:is(#hx-diff, #hx-layer) .dx-case-ic { display: block; width: 44px; height: 44px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
:is(#hx-diff, #hx-layer) .dx-cases b { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c); }
:is(#hx-diff, #hx-layer) .dx-neq { align-self: center; justify-self: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid color-mix(in srgb, var(--tg-beauty) 30%, #fff); font-size: 18px; font-weight: 600; color: var(--tg-beauty); }
:is(#hx-diff, #hx-layer) .dx-state { margin-top: 26px; padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--tg-beauty) 20%, #fff); background: color-mix(in srgb, var(--tg-beauty) 5%, #fff); font-size: 16px; line-height: 1.7; color: var(--tg-ink); }
:is(#hx-diff, #hx-layer) .dx-state b { font-weight: 700; }
:is(#hx-diff, #hx-layer) .dx-check { margin-top: 48px; }
:is(#hx-diff, #hx-layer) .dx-check .hc-factors-label { display: inline; margin: 0; padding: 0 4px; font-size: 28px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); background-image: linear-gradient(transparent 62%, rgba(140, 225, 190, .45) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(#hx-diff, #hx-layer) .dx-result { margin-top: 30px; border-radius: 0; }
@media (min-width: 760px) and (max-width: 1279px) { :is(#hx-diff, #hx-layer) .dx-cases > li:not(.dx-neq) { grid-template-columns: 36px minmax(0, 1fr); padding: 28px 14px 18px; } #hx-diff .dx-case-ic { width: 36px; height: 36px; } #hx-diff .dx-cases b { font-size: 15.5px; } }
@media (max-width: 759px) {
  :is(#hx-diff, #hx-layer) .dx-cases { gap: 10px; }
  :is(#hx-diff, #hx-layer) .dx-neq { transform: none; height: 30px; }
  :is(#hx-diff, #hx-layer) .dx-cases > li:not(.dx-neq) { padding: 28px 16px 18px; }
  :is(#hx-diff, #hx-layer) .dx-check .hc-factors-label { font-size: 23px; }
  :is(#hx-diff, #hx-layer) .dx-state { font-size: 15px; padding: 16px 18px; }
}
/* 필러 vs 지방이식 비교표 머리 칸 — 각진 모서리 */
.vs .vs-head { border-radius: 0 !important; }
/* 외과수술 후 흉살 — 미용·성형 페이지와 동일하게: 요약 문구 좌측+가는 선, 흉터≠유착 카드 설명줄 */
#hx-site .hx-split-hd .hc-factors-label { margin: 22px 0 0; padding-top: 18px; border-top: .5px solid color-mix(in srgb, var(--tg-beauty) 16%, #fff); font-size: 15px; font-weight: 600; color: var(--tg-beauty); }
#hx-layer .dx-case-txt { grid-column: 1 / -1; margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
#hx-layer .dx-cases > li:not(.dx-neq) { align-content: start; }
/* 외과수술 후 흉살 — 수술별 주의사항: 걸친 라벨 박스 + 아이콘 행(두꺼운 왼쪽 선 카드 대체, 2026-10-13) */
#hx-caution .hc-ca-box { position: relative; padding: 30px 26px 10px; border: 1px solid color-mix(in srgb, var(--tg-beauty) 24%, #fff); background: #fff; box-shadow: 0 12px 30px -24px rgba(20, 32, 27, .35); }
#hx-caution .hc-ca-box > .ac-pill { left: 22px; padding: 6px 13px; background: var(--tg-beauty); font-size: 13px; font-weight: 700; }
#hx-caution .hc-caution { display: block; }
#hx-caution .hc-caution li { display: grid; grid-template-columns: 44px 140px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px 0; border: 0; border-top: 1px solid #f0e8ec; border-radius: 0; background: none; box-shadow: none; }
#hx-caution .hc-caution li:first-child { border-top: 0; }
#hx-caution .hc-ca-ic { display: block; width: 44px; height: 44px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#hx-caution .hc-caution b { font-size: 17px; font-weight: 700; color: var(--c); word-break: keep-all; }
#hx-caution .hc-caution span { font-size: 15.5px; font-weight: 400; line-height: 1.7; color: var(--tg-body); }
@media (max-width: 760px) {
  #hx-caution .hc-ca-box { padding: 28px 16px 6px; }
  #hx-caution .hc-caution li { grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 18px 0; }
  #hx-caution .hc-ca-ic { width: 38px; height: 38px; }
  #hx-caution .hc-caution span { grid-column: 1 / -1; font-size: 15px; }
}
/* 외과수술 후 흉살 A~D — 전체 폭 카드 대신 오른쪽 칸 펼침 목록(담적 치료 항목과 같은 문법, 2026-10-13) */
@media (min-width: 900px) { #hx-site.hx-split > .hmap-after { grid-column: 2; } }
#hx-site .hs-cases { margin-top: 0; }
@media (min-width: 900px) { #hx-site.hx-split > .hmap-after { margin-top: -16px; } }
#hx-site .hs-cases .jg-case-no { width: 72px; flex: 0 0 72px; font-size: 56px; font-weight: 700; opacity: .16; letter-spacing: -.02em; }
#hx-site .hs-case-bd { padding: 2px 24px 24px; }
#hx-site .hs-case-bd h4 { display: inline-block; margin: 16px 0 12px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 13.5px; font-weight: 700; line-height: 1; }
#hx-site .hs-case-bd h4:first-child { margin-top: 4px; }
#hx-site .hs-case-bd .case-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#hx-site .hs-case-bd .case-tags li { padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); border-radius: 999px; background: #fff; font-size: 14.5px; color: var(--tg-ink); }
#hx-site .hs-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
#hx-site .hs-ck li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.65; color: var(--tg-ink); word-break: keep-all; }
#hx-site .hs-ck li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 6px; height: 11px; border-right: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(45deg); }
#hx-site .hs-case-bd .proc-desc { margin: 20px 0 0; padding: 18px 20px; border: 0; border-top: 1px solid color-mix(in srgb, var(--c) 18%, #fff); background: color-mix(in srgb, var(--c) 5%, #fff); font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
#hx-site .hs-case-bd .proc-desc b { color: var(--tg-ink); font-weight: 700; }
#hx-site .hmap-note.hc-note-end { margin-top: 18px; }
@media (max-width: 760px) {
  #hx-site .hs-cases .jg-case-no { width: 46px; flex-basis: 46px; font-size: 42px; }
  #hx-site .hs-case-bd { padding: 2px 16px 18px; }
  #hx-site .hs-ck li { font-size: 15px; }
  #hx-site .hs-case-bd .proc-desc { padding: 16px; font-size: 14.5px; }
}
/* 가로로 긴 아이콘(수술한 층 = 유착 조직) — 높이는 같은 줄 아이콘과 맞추고 폭만 넓힌다 */
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-f-ic.is-wide { width: 80px; }
@media (max-width: 760px) { :is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-f-ic.is-wide { width: 70px; } }
:is(#hx-inject, #hx-surgery, #hx-diff, #hx-site) .hc-factors li:has(> .hc-f-ic.is-wide) { grid-template-columns: auto minmax(0, 1fr); }
/* 외과수술 A~D → 01~04 숫자 — 두 자리 폭에 맞춰 번호 칸 확보 */
#hx-site .hs-cases .jg-case-no { width: 84px; flex-basis: 84px; letter-spacing: -.04em; }
@media (max-width: 760px) { #hx-site .hs-cases .jg-case-no { width: 56px; flex-basis: 56px; font-size: 40px; } }
/* 차이 카드의 가로형 아이콘(유착) — 높이는 옆 카드와 맞추고 폭만 넓힘 */
:is(#hx-diff, #hx-layer) .dx-cases > li:has(> .dx-case-ic.is-wide) { grid-template-columns: auto minmax(0, 1fr); }
:is(#hx-diff, #hx-layer) .dx-case-ic.is-wide { width: 76px; }
@media (max-width: 760px) { :is(#hx-diff, #hx-layer) .dx-case-ic.is-wide { width: 68px; } }
/* ══ 2026-10-13 항노화 리프팅·주름·탄력·모공(skin-lifting) — 고객 초안 재구성. 래퍼 ac-page lf-page, 웜 코랄 브론즈 #a65a3a. 층 색 1층 표피 #c08a2a / 2층 진피 #c25670 / 3층 근막·지방 #8a3a2e ══ */
.lf-page { --ac-green: #a65a3a; --ac-green-soft: #f6ebe5; --fp: #a65a3a; --fp-soft: #f6ebe5; --fp-bg: #fbf6f2; --cr: #a65a3a; --ac-red: #b8483e; --ac-red-soft: #fbefeb; }
.tg-ans-page.lf-page { --tg-beauty: #a65a3a; --tg-beauty-soft: #f6ebe5; }
.lf-page .hx-eyebrow { color: #a65a3a; }
.lf-page #hx-faq.faq-flat { --fq: #a65a3a; --fq-soft: #f6ebe5; --fq-bg: #fbf6f2; --fq-ring: rgba(166, 90, 58, .35); --fq-ring2: rgba(166, 90, 58, .45); }
.lf-page .ta-sub .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255, 200, 150, .48) 62%); }
.lf-page .ac-check { --ac-red: #a65a3a; --ac-red-soft: #fbf1ec; }
.tile-tbl.is-lf { --tc: #a65a3a; }
.lf-page .fp-warn.is-info { border-color: #ecd8cd; }

/* 소제목 형광 마커 — 섹션마다 다른 파스텔 (28px / 모바일 23px 는 공용 규칙) */
.lf-page #lf-why .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255, 200, 150, .48) 62%); }
.lf-page #lf-age .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140, 225, 190, .45) 62%); }
.lf-page #lf-type .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150, 205, 255, .45) 62%); }
.lf-page #lf-sex .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255, 170, 190, .42) 62%); }
.lf-page #lf-layer .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(250, 216, 78, .45) 62%); }
.lf-page #lf-device .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(200, 180, 245, .45) 62%); }
.lf-page #lf-plan .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(120, 205, 220, .40) 62%); }
.lf-page #lf-rec .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150, 205, 255, .45) 62%); }
.lf-page #lf-dx .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255, 200, 150, .48) 62%); }
.lf-page #lf-flow .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140, 225, 190, .45) 62%); }
.lf-page #lf-down .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(200, 180, 245, .45) 62%); }

/* 데스크톱 전용 줄바꿈 — 모바일은 자연 줄바꿈 */
@media (max-width: 760px) { .lf-page .hx-split-hd .pg-h2 br, .lf-page .hx-lead .pg-h2 br, .lf-page .hx-alert-hd h3 br { display: none; } }

/* ── 상단 사진 + 연령 띠 ── */
.lf-page .lf-hero { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.lf-page .lf-hero .ad-hero-pic img { aspect-ratio: 16 / 9; object-fit: cover; }
.lf-hero-age { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.lf-hero-age span { position: relative; padding: 14px 6px 0; text-align: center; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--c); word-break: keep-all; }
.lf-hero-age span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.lf-hero-age span + span::before { left: 2px; }
.lf-hero-age b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 700; color: var(--tg-ink); }

/* 왼쪽 칸 사진 — 원본 비율 그대로 + 짧은 설명 */
.lf-page .lf-pic img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; }
.lf-page .lf-pic figcaption { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--tg-mute); word-break: keep-all; }
.lf-page .lf-pic-tall { max-width: 420px; }
.lf-page .lf-pic-tall.is-narrow { max-width: 300px; }

/* 아이콘 — 배경 원 없이 옅은 내용색 (섹션당 한 곳) */
.lf-page .lf-ico .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.lf-page .lf-ico .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
.lf-page .fp-why > li > .ac-pill { background: var(--c); }

/* ── 01 순서 — 경험 6 ── */
.lf-today .lf-today-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lf-today .lf-today-row span { padding: 7px 15px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.2; }
.lf-today .lf-today-row .is-do { background: #a65a3a; color: #fff; }
.lf-today .lf-today-row .is-not { background: #fff; border: 1.5px dashed #c99a84; color: #8a4a30; }
.lf-page .lf-chk3 { margin-top: 6px; }
@media (min-width: 1200px) { .lf-page .lf-chk3.fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lf-after { margin: 26px 0 0; padding: 16px 20px; background: #fbf6f2; font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.lf-after b { color: #a65a3a; }

/* ── 02 노화 단계 — 레일 + 2×2 카드 ── */
.lf-rail { margin: 0 0 34px; }
.lf-rail-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.lf-rail-bar i { height: 10px; background: var(--c); }
.lf-rail-bar i:first-child { border-radius: 999px 0 0 999px; } .lf-rail-bar i:last-child { border-radius: 0 999px 999px 0; }
.lf-rail-lb { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--tg-mute); }
.lf-ages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
.lf-ages > li { position: relative; padding: 32px 22px 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); box-shadow: 0 10px 28px -20px rgba(80, 40, 20, .35); }
.lf-ages .ac-pill { background: var(--c); }
.lf-ages h3 { margin: 12px 0 10px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--tg-body); word-break: keep-all; }
.lf-ages h3 b { color: var(--c); font-weight: 700; }
.lf-ages ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lf-ages ul li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.lf-ages ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.lf-focus { margin: 14px 0 0; padding: 12px 14px; background: color-mix(in srgb, var(--c) 7%, #fff); font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.lf-focus span { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 700; color: var(--c); }
.lf-focus b { color: var(--tg-ink); }
/* 층 표시 미니 막대(표피·진피·구조) */
.lf-lv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.lf-lv3 i { padding: 5px 0; background: #f2ece8; font-style: normal; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; color: #b3a49b; }
.lf-lv3 i.is-on:nth-child(1) { background: #c08a2a; color: #fff; }
.lf-lv3 i.is-on:nth-child(2) { background: #c25670; color: #fff; }
.lf-lv3 i.is-on:nth-child(3) { background: #8a3a2e; color: #fff; }
/* 자가 체크 — 층 꼬리표 + 층별 막대 */
.lf-check .ac-check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-check .ac-check-list label { position: relative; padding-right: 58px; height: 100%; }
.lf-check .ac-check-list label > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 3px 8px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.2; }
.lf-check li[data-l="1"] label > i { background: #f8eedb; color: #9a6c18; }
.lf-check li[data-l="2"] label > i { background: #f8e3e8; color: #a8445c; }
.lf-check li[data-l="3"] label > i { background: #f1e1de; color: #8a3a2e; }
.lf-ck-res { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-top: 22px; }
.lf-ck-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lf-ck-bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 22px; align-items: center; gap: 10px; }
.lf-ck-bars b { font-size: 13.5px; font-weight: 600; color: var(--tg-ink); }
.lf-ck-bar { height: 12px; background: #fff; border: 1px solid #e3e8e5; }
.lf-ck-bar i { display: block; width: 0; height: 100%; background: var(--c); transition: width .35s ease; }
.lf-ck-bars em { font-family: 'Poppins', sans-serif; font-style: normal; font-size: 14px; font-weight: 600; color: var(--c); text-align: right; }
.lf-ck-bars li.is-top b { color: var(--c); }
.lf-check .ac-check-sum { margin: 0; }
.lf-check-msg { flex-basis: 100%; margin-top: 6px; text-align: right; }
.ac-check.is-on .lf-check-msg { color: #a65a3a; font-weight: 600; }
.lf-flags { margin-top: 30px; padding: 18px 20px; border: 1px dashed #dcc4b8; }
.lf-flags > b { display: block; margin-bottom: 10px; font-size: 15.5px; color: var(--tg-ink); }
.lf-flags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lf-flags li { padding: 6px 12px; border-radius: 999px; background: #fbf1ec; color: #8a4a30; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.lf-flags p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--tg-mute); word-break: keep-all; }
.lf-page .lf-agenote { margin-top: 32px; }

/* ── 도표 공통 ── */
.lf-fig-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.lf-fig-hd b { font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.lf-fig-hd span { font-size: 13px; color: var(--tg-mute); }
.lf-conv, .lf-sexc { margin: 0; padding: 20px 20px 16px; background: #fff; border: 1px solid #ecdcd3; }
.lf-conv svg, .lf-sexc svg { display: block; width: 100%; height: auto; font-family: 'Pretendard', sans-serif; }
.lf-grid line { stroke: #efe7e2; stroke-width: 1; }
.lf-ax text { font-size: 13px; fill: #8b8580; }
.lf-conv-zone { fill: #a65a3a; opacity: .07; }
.lf-conv-zt { font-size: 13px; font-weight: 700; fill: #a65a3a; }
.lf-conv-dry { fill: none; stroke: #c08a2a; stroke-width: 3.4; stroke-linecap: round; }
.lf-conv-oily { fill: none; stroke: #3f7f8c; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 9 6; }
.lf-dot-dry { fill: #c08a2a; } .lf-dot-oily { fill: #3f7f8c; }
.lf-lb-dry { font-size: 14.5px; font-weight: 700; fill: #9a6c18; } .lf-lb-oily { font-size: 14.5px; font-weight: 700; fill: #2f6a76; }
.lf-conv-tx { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #f1e6df; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.lf-conv-tx b { color: var(--tg-ink); }
.lf-sexc-band { fill: #a0506e; opacity: .08; }
.lf-sexc-bt { font-size: 14px; font-weight: 700; fill: #8a3f5c; } .lf-sexc-bs { font-size: 12.5px; fill: #a0506e; }
.lf-sexc-m { fill: none; stroke: #3b4f86; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 10 6; }
.lf-sexc-f { fill: none; stroke: #a0506e; stroke-width: 3.6; stroke-linecap: round; }
.lf-sexc-x { fill: #fff; stroke: #a0506e; stroke-width: 3; }
.lf-sexc-xl { font-size: 13.5px; font-weight: 600; fill: #8a3f5c; }
.lf-lb-f { font-size: 15px; font-weight: 700; fill: #8a3f5c; } .lf-lb-m { font-size: 14px; font-weight: 700; fill: #2f3f70; }
.lf-ax-y { font-size: 12.5px; fill: #8b8580; }
/* 성별 숫자 */
.lf-stats { display: grid; gap: 12px; margin-top: 28px; }
.lf-stats > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); }
.lf-stats > div > b { font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--c); }
.lf-stats > div > b small { font-size: 22px; margin-left: 2px; }
.lf-stats span { font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.lf-stats strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--tg-ink); }

/* ── 표 ── */
.lf-page .tile-tbl.is-lf tbody th small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; opacity: .8; }
.lf-type-tbl thead th small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; line-height: 1.4; opacity: .9; word-break: keep-all; }
.lf-type-tbl tbody th, .lf-sex-tbl tbody th { white-space: nowrap; }
.lf-lv { display: block; width: 46px; height: 8px; margin: 0 0 6px; background: linear-gradient(90deg, #a65a3a calc(var(--v, 0) * 33.34%), #efe4de 0); }
.lf-lv[data-v="0"] { --v: 0; } .lf-lv[data-v="1"] { --v: 1; } .lf-lv[data-v="2"] { --v: 2; } .lf-lv[data-v="3"] { --v: 3; }
.lf-lv-tbl td.is-off { color: #a39c97; }
.lf-ly { display: inline-block; margin: 2px 4px 2px 0; padding: 4px 10px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.lf-ly.is-1 { background: #c08a2a; } .lf-ly.is-2 { background: #c25670; } .lf-ly.is-3 { background: #8a3a2e; } .lf-ly.is-body { background: #2f6fb3; }

/* ── 03 3층 설계 ── */
.lf-pair { margin-top: 30px; }
.lf-pair .et-pair-c.is-good { --c: #a65a3a; border-color: #ecd3c6; background: #fbf6f2; }
.lf-mini3 { display: grid; gap: 3px; margin: 2px 0 16px; }
.lf-mini3 i { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-style: normal; }
.lf-mini3 i:nth-child(1) { background: #f6e8cf; } .lf-mini3 i:nth-child(2) { background: #f5dbe1; height: 38px; } .lf-mini3 i:nth-child(3) { background: #e9cfca; height: 34px; }
.lf-mini3 em { font-style: normal; font-size: 12.5px; font-weight: 700; color: rgba(60, 30, 20, .7); }
.lf-mini3 s { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); text-decoration: none; }
.lf-mini3 i > s:first-of-type { margin-left: auto; }
.lf-mini3.is-one i:nth-child(n+2) { opacity: .38; }
.lf-mini3.is-all i > s { margin-left: auto; }
.lf-mini3.is-all i:nth-child(1) > s { background: #c08a2a; } .lf-mini3.is-all i:nth-child(2) > s { background: #c25670; } .lf-mini3.is-all i:nth-child(3) > s { background: #8a3a2e; }
.lf-strata { list-style: none; margin: 0; padding: 0; border: 1px solid #ecdcd3; }
.lf-strata > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: var(--bg); }
.lf-strata > li + li { border-top: 2px solid #fff; }
.lf-band { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px 18px; background: var(--c); color: #fff; }
.lf-band small { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; opacity: .85; }
.lf-band b { font-size: 21px; font-weight: 700; line-height: 1.25; word-break: keep-all; }
.lf-band span { font-size: 13px; opacity: .9; }
.lf-strata > li:nth-child(2) .lf-band { padding-top: 30px; padding-bottom: 30px; }
.lf-strata > li:nth-child(3) .lf-band { padding-top: 40px; padding-bottom: 40px; }
.lf-band-tx { padding: 22px 24px 20px; }
.lf-band-tx h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--c); }
.lf-band-tx > p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.lf-band-tx > p b { color: var(--tg-ink); }
.lf-who { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px !important; }
.lf-who span { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); color: var(--c); font-size: 13px; font-weight: 600; line-height: 1.2; }
.lf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px !important; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, #fff); }
.lf-tools b { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--c) !important; }
.lf-tools span { padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }

/* ── 04 장비별 깊이 ── */
.lf-depth-pic { margin: 0 0 8px; background: #fff; border: 1px solid #ecdcd3; }
.lf-depth-img { position: relative; }
.lf-depth-img img { display: block; width: 100%; height: auto; }
.lf-dl { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translateY(-50%); padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); color: var(--c); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.lf-depth-pic figcaption { padding: 11px 16px; border-top: 1px solid #ecdcd3; font-size: 14px; color: var(--tg-mute); word-break: keep-all; }
#lf-device .lf-depth-pic + .ta-sub { margin-top: 48px; }
.lf-dv { padding: 18px 18px 14px; background: #fff; border: 1px solid #ecdcd3; }
.lf-dv-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px dashed #efe3dc; }
.lf-dv-row.is-axis, .lf-dv-row.is-scale { grid-template-columns: 150px minmax(0, 1fr) 150px; padding: 0; border: 0; }
.lf-dv-row.is-axis { padding-bottom: 6px; }
.lf-dv-zones { display: flex; height: 28px; }
.lf-dv-zones i { flex: 0 0 calc(var(--w) * 1%); display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.lf-dv-n b { display: block; font-size: 15.5px; font-weight: 700; color: var(--c); }
.lf-dv-n small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--tg-mute); word-break: keep-all; }
.lf-dv-tr { position: relative; height: 18px; background: linear-gradient(90deg, #faf3e6 0 22%, #fbeef1 22% 62%, #f4e6e3 62% 100%); }
.lf-dv-bar { position: absolute; top: 3px; bottom: 3px; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); border-radius: 999px; background: var(--c); }
.lf-dv-bar.is-dot { top: 8px; bottom: 8px; background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px); border-radius: 0; }
.lf-dv-kn { position: absolute; top: 50%; left: calc(var(--l) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid var(--c); }
.lf-dv-kn em { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-style: normal; font-size: 11px; font-weight: 600; color: var(--c); }
.lf-dv-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--tg-body); word-break: keep-all; }
.lf-dv-sc { position: relative; height: 20px; margin-top: 6px; }
.lf-dv-sc span { position: absolute; left: calc(var(--l) * 1%); transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-size: 11.5px; color: var(--tg-mute); white-space: nowrap; }
.lf-dv-sc span:first-child { transform: none; } .lf-dv-sc span:last-child { transform: translateX(-100%); }
.lf-page .lf-two.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
.lf-page .lf-two.fp-why > li:last-child { grid-column: auto; }

/* ── 05 설계 미리보기 ── */
.lf-bld { padding: 24px 24px 20px; background: #fbf6f2; border: 1px solid #ecdcd3; }
.lf-bld-q + .lf-bld-q { margin-top: 18px; }
.lf-bld-q > p { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.lf-bld-q > p span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #a65a3a; color: #fff; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; }
.lf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-opt { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #dfc8bc; color: var(--tg-ink); font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.lf-opt:hover { border-color: #a65a3a; }
.lf-opt[aria-pressed="true"] { background: #a65a3a; border-color: #a65a3a; color: #fff; }
.lf-opt:focus-visible { outline: 2px solid #a65a3a; outline-offset: 2px; }
.lf-bld-res { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; margin-top: 22px; background: #fff; border: 1px solid #ecdcd3; }
.lf-bld-layer { padding: 20px; border-right: 1px solid #f1e6df; }
.lf-bld-layer small, .lf-bld-cells dt { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #a65a3a; }
.lf-lv3.is-lg i { padding: 9px 0; font-size: 13.5px; }
.lf-bld-layer b { display: block; margin-top: 12px; font-size: 18px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.lf-bld-layer em, .lf-bld-cells em { display: block; margin-top: 3px; font-style: normal; font-size: 14px; color: var(--tg-mute); word-break: keep-all; }
.lf-bld-cells { margin: 0; display: grid; }
.lf-bld-cells > div { padding: 14px 20px; }
.lf-bld-cells > div + div { border-top: 1px solid #f1e6df; }
.lf-bld-cells dt { margin-bottom: 4px; }
.lf-bld-cells dd { margin: 0; }
.lf-bld-cells b { font-size: 16px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.lf-bld-note { grid-column: 1 / -1; margin: 0; padding: 13px 20px; border-top: 1px solid #f1e6df; background: #fdfaf8; font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.lf-bld-disc { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--tg-mute); word-break: keep-all; }
.lf-bld-disc b { color: var(--tg-body); }
.lf-mx tbody th { white-space: nowrap; }
.lf-mx td:last-child { white-space: nowrap; }

/* ── 06 치료 아코디언 ── */
.lf-legend { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.lf-legend li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--tg-body); word-break: keep-all; }
.lf-legend b { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.2; }
.lf-txs .jg-case-no { width: 92px; flex: 0 0 92px; font-size: 64px; font-weight: 700; opacity: .16; letter-spacing: -.03em; }
.lf-txs .jg-case > :not(summary) { margin-left: 24px; margin-right: 24px; }
.lf-txs .jg-case > :last-child:not(summary) { margin-bottom: 22px; }
.lf-txs .dj-tx-p b { color: var(--tg-ink); }
.lf-txs .dj-tags span.is-freq { background: var(--c); color: #fff; }
.lf-txs .jg-case > .et-more { display: table; margin-left: auto; }
.lf-two-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; margin-top: 30px; }
.lf-two-c > div { position: relative; padding: 24px 16px 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.lf-two-c span { position: absolute; top: 0; left: 14px; transform: translateY(-50%); padding: 5px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }
.lf-two-c p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.lf-tx-li { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: var(--tg-mute); word-break: keep-all; }
.lf-tx-ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.lf-tx-ul li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.lf-tx-ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.lf-tx-ul b { color: var(--tg-ink); }
.lf-boost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.lf-boost > div { padding: 16px 16px 14px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 24%, #fff); }
.lf-boost small { display: block; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--c); }
.lf-boost b { display: block; margin: 5px 0 6px; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.lf-boost p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }

/* ── 07 전신 회복 ── */
.lf-page .lf-rec2.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-page .lf-rec2.fp-why > li:last-child { grid-column: auto; }
.lf-rec2 h3 small { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--c); }
.lf-rec2 .lf-tx-ul li { font-size: 14.5px; }
.lf-rec2 .dj-tags span.is-freq { background: var(--c); color: #fff; }
.lf-rec2 .et-more { margin-top: 14px; }
.lf-ata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.lf-ata span { display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); font-size: 13.5px; font-weight: 600; color: var(--tg-body); }
.lf-ata b { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 600; line-height: 1; color: var(--c); }
.lf-ata em { font-style: normal; font-size: 13px; color: var(--tg-mute); }
.lf-pair2 { margin-top: 40px; }
.lf-pair2 .et-pair-c.is-good { --c: #2f6fb3; border-color: #cddcef; background: #f4f8fc; }
.lf-pair2 .et-pair-c.lf-c-neutral { --c: #a65a3a; border-color: #ecd3c6; background: #fbf6f2; }

/* ── 08 진단 ── */
.lf-devs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; padding-top: 14px; }
.lf-devs > article { position: relative; display: flex; flex-direction: column; padding: 30px 22px 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 10px 28px -20px rgba(60, 40, 30, .35); }
.lf-devs .ac-pill { background: var(--c); }
.lf-devs figure { margin: 0 0 14px; display: grid; place-items: center; height: 200px; }
.lf-devs figure img { display: block; max-width: 100%; max-height: 200px; width: auto; height: auto; }
.lf-devs h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--tg-ink); }
.lf-devs h3 small { margin-left: 6px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--c); }
.lf-devs article > p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.lf-devs article > p b { color: var(--tg-ink); }
.lf-spec { list-style: none; margin: 16px 0 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 14px 22px; border-top: 1px solid #f1e6df; }
.lf-spec li { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--tg-mute); }
.lf-spec b { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 600; line-height: 1.05; color: var(--c); }
.lf-spec b small { font-size: 18px; }
.lf-more { margin-top: auto; padding-top: 16px; }
.lf-more summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; list-style: none; }
.lf-more summary::-webkit-details-marker { display: none; }
.lf-more summary::after { content: "+"; font-size: 16px; line-height: 1; }
.lf-more[open] summary::after { content: "–"; }
.lf-more ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.lf-more li { position: relative; padding-left: 14px; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.lf-more li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.lf-more li b { color: var(--tg-ink); }
.lf-map { position: relative; margin-top: 36px; padding: 30px 22px 20px; background: #fbf6f2; border: 1px solid #ecdcd3; }
.lf-map-hd { margin: 0; }
.lf-map .ac-pill { background: #a65a3a; }
.lf-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(44px, auto)); gap: 4px 16px; margin-bottom: 16px; }
.lf-map-l { grid-column: 1; display: flex; align-items: center; padding: 0 14px; background: var(--c); color: #fff; font-style: normal; font-size: 14px; font-weight: 700; }
.lf-map-l:nth-child(1) { grid-row: 1; } .lf-map-l:nth-child(2) { grid-row: 2; } .lf-map-l:nth-child(3) { grid-row: 3; }
.lf-map-d { grid-column: 2; position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff; border: 1.5px solid #a65a3a; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tg-ink); }
.lf-map-d::before { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; border-top: 1.5px dashed #a65a3a; }
.lf-map-d small { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #a65a3a; color: #fff; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; line-height: 1.2; }
.lf-map-d span { min-width: 0; }
.lf-map-d em { display: block; font-style: normal; font-size: 13px; font-weight: 500; color: var(--tg-mute); }
.lf-map-d.is-2d { grid-row: 1 / 3; } .lf-map-d.is-3d { grid-row: 3; border-color: #5b4a42; } .lf-map-d.is-3d::before { border-color: #5b4a42; } .lf-map-d.is-3d small { background: #5b4a42; }
.lf-map > p:last-child { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.lf-map > p:last-child b { color: var(--tg-ink); }
.lf-plan3 { list-style: none; counter-reset: lfp; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lf-plan3 li { counter-increment: lfp; position: relative; padding: 18px 18px 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); }
.lf-plan3 li::before { content: counter(lfp, decimal-leading-zero); display: block; margin-bottom: 8px; font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 600; line-height: 1; color: var(--c); opacity: .5; }
.lf-plan3 b { display: block; font-size: 16px; font-weight: 700; color: var(--c); word-break: keep-all; }
.lf-plan3 span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }

/* ── 09 진행 순서 ── */
.lf-steps p b { color: var(--tg-ink); }
.lf-prep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lf-prep li { position: relative; padding: 13px 16px 13px 44px; background: #fff; border: 1px solid #ecdcd3; }
.lf-prep li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 14px; height: 8px; border-left: 2px solid #a65a3a; border-bottom: 2px solid #a65a3a; transform: rotate(-45deg); }
.lf-prep li.is-key { background: #fbf1ec; border-color: #e9cbbd; }
.lf-prep b { display: block; font-size: 15px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.lf-prep span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--tg-body); word-break: keep-all; }
.lf-page .lf-visit { margin-top: 36px; }

/* ── 10 회복 기간 — 일수 막대 ── */
.lf-dt { padding: 18px 18px 16px; background: #fff; border: 1px solid #ecdcd3; }
.lf-dt-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 120px; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed #efe3dc; }
.lf-dt-row:last-child { border-bottom: 0; }
.lf-dt-row.is-axis { padding: 0 0 6px; border-bottom: 1px solid #efe3dc; }
.lf-dt-ax { position: relative; height: 18px; }
.lf-dt-ax span { position: absolute; left: calc(var(--l) * 1%); transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--tg-mute); white-space: nowrap; }
.lf-dt-ax span:first-child { transform: none; } .lf-dt-ax span:last-child { transform: translateX(-100%); }
.lf-dt-n b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--c); word-break: keep-all; }
.lf-dt-n small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tg-mute); }
.lf-dt-tr { position: relative; height: 20px; background: repeating-linear-gradient(90deg, #f6f0ec 0 calc(14.2857% - 1px), #fff calc(14.2857% - 1px) 14.2857%); }
.lf-dt-tr i { position: absolute; top: 2px; bottom: 2px; left: 0; width: calc(var(--b) * 1%); border-radius: 0 999px 999px 0; background: linear-gradient(90deg, var(--c) 0 calc(var(--a) / var(--b) * 100%), color-mix(in srgb, var(--c) 30%, #fff) calc(var(--a) / var(--b) * 100%) 100%); }
.lf-dt-row > em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--c); word-break: keep-all; }
.lf-page .lf-care3 .lf-tx-ul { margin-top: 10px; }
.lf-page .lf-care3 .lf-tx-ul li { font-size: 14.5px; }
@media (min-width: 1200px) { .lf-page .lf-care3.fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lf-page .lf-care3.fp-why > li:last-child { grid-column: auto; } }
.lf-page .lf-care3.fp-why > li:last-child { grid-column: auto; }
.lf-page #lf-down .ta-lede a { color: #a65a3a; text-decoration: underline; text-underline-offset: 3px; }

/* ── 반응형 ── */
@media (max-width: 1099px) {
  .lf-dv-row, .lf-dv-row.is-axis, .lf-dv-row.is-scale { grid-template-columns: 120px minmax(0, 1fr); }
  .lf-dv-note { grid-column: 2; margin-top: -4px; }
  .lf-dv-row.is-axis > span, .lf-dv-row.is-scale > span { display: block; }
  .lf-boost { grid-template-columns: minmax(0, 1fr); }
  .lf-plan3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lf-hero-age span { padding: 12px 2px 0; font-size: 12px; }
  .lf-hero-age b { font-size: 12.5px; }
  .lf-page .lf-pic-tall, .lf-page .lf-pic-tall.is-narrow { max-width: 260px; margin-left: auto; margin-right: auto; }
  .lf-ages { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lf-ages > li { padding: 30px 18px 18px; }
  .lf-check .ac-check-list { grid-template-columns: minmax(0, 1fr); }
  .lf-ck-res { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lf-check .ac-check-sum { justify-content: flex-start; text-align: left; }
  .lf-check-msg { text-align: left; }
  .lf-conv, .lf-sexc { padding: 14px 10px 12px; }
  .lf-stats > div { grid-template-columns: 78px minmax(0, 1fr); padding: 14px; }
  .lf-stats > div > b { font-size: 36px; }
  .lf-strata > li { grid-template-columns: minmax(0, 1fr); }
  .lf-band, .lf-strata > li:nth-child(2) .lf-band, .lf-strata > li:nth-child(3) .lf-band { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 16px; }
  .lf-band b { font-size: 18px; }
  .lf-band-tx { padding: 16px 16px 16px; }
  .lf-dl { padding: 3px 7px; font-size: 10.5px; }
  .lf-dv { padding: 14px 12px 12px; }
  .lf-dv-row, .lf-dv-row.is-axis, .lf-dv-row.is-scale { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lf-dv-row.is-axis > span, .lf-dv-row.is-scale > span { display: none; }
  .lf-dv-note { grid-column: 1; margin-top: 0; }
  .lf-dv-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .lf-dv-zones i { font-size: 11px; }
  .lf-dv-tr { margin-top: 14px; }
  .lf-page .lf-two.fp-why, .lf-page .lf-rec2.fp-why { grid-template-columns: minmax(0, 1fr); }
  .lf-bld { padding: 18px 14px 16px; }
  .lf-opt { padding: 8px 13px; font-size: 14px; }
  .lf-bld-res { grid-template-columns: minmax(0, 1fr); }
  .lf-bld-layer { border-right: 0; border-bottom: 1px solid #f1e6df; padding: 16px; }
  .lf-bld-cells > div { padding: 12px 16px; }
  .lf-bld-note { padding: 12px 16px; }
  .lf-txs .jg-case-no { width: 64px; flex-basis: 64px; font-size: 46px; }
  .lf-txs .jg-case > :not(summary) { margin-left: 16px; margin-right: 16px; }
  .lf-txs .jg-case > .et-more { margin-left: auto; }
  .lf-two-c { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lf-devs { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lf-devs figure { height: 170px; } .lf-devs figure img { max-height: 170px; }
  .lf-map { padding: 28px 14px 16px; }
  .lf-map-grid { gap: 4px 12px; grid-template-rows: repeat(3, minmax(48px, auto)); }
  .lf-map-l { font-size: 13px; padding: 0 10px; }
  .lf-map-d { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; font-size: 15px; }
  .lf-map-d::before { left: -12px; width: 12px; }
  .lf-prep { grid-template-columns: minmax(0, 1fr); }
  .lf-dt { padding: 14px 12px; }
  .lf-dt-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lf-dt-row.is-axis > span { display: none; }
  .lf-dt-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .lf-dt-ax span { font-size: 11px; }
  /* 표 — 모바일 폭과 첫 열 */
  .lf-page .tg-table.ac-table.lf-type-tbl, .lf-page .tg-table.ac-table.lf-sex-tbl { min-width: 520px; }
  .lf-page .lf-type-tbl thead th:nth-child(1), .lf-page .lf-sex-tbl thead th:nth-child(1) { width: 78px; }
  .lf-page .lf-type-tbl tbody th, .lf-page .lf-sex-tbl tbody th { white-space: normal; }
  .lf-page .tg-table.ac-table.lf-lv-tbl { min-width: 500px; }
  .lf-page .lf-lv-tbl thead th:nth-child(1) { width: 96px; }
  .lf-page .tg-table.ac-table.lf-mx { min-width: 560px; }
  .lf-page .lf-mx thead th:nth-child(1) { width: 112px; }
  .lf-page .lf-mx tbody th { white-space: normal; }
}
@media (max-width: 560px) {
  .lf-hero-age span { font-size: 11.5px; }
  .lf-hero-age b { font-size: 12px; }
  .lf-ck-bars li { grid-template-columns: 66px minmax(0, 1fr) 18px; }
  .lf-check .ac-check-list label { padding-right: 52px; }
  .lf-spec b { font-size: 26px; }
}

/* 2차 보정 — 표 줄바꿈·열 폭, 도표 범례, 3장 카드 */
.lf-page .ac-table.is-lf td { white-space: normal; }
.lf-page .lf-type-tbl thead th:nth-child(1), .lf-page .lf-sex-tbl thead th:nth-child(1) { width: 128px; }
.lf-page .lf-type-tbl thead th:nth-child(n+2), .lf-page .lf-sex-tbl thead th:nth-child(n+2) { width: calc((100% - 128px) / 2); }
.lf-page .lf-lv-tbl thead th:nth-child(1) { width: 150px; }
.lf-page .lf-lv-tbl thead th:nth-child(n+2) { width: calc((100% - 150px) / 3); }
.lf-page .lf-mx thead th:nth-child(1) { width: 190px; }
.lf-page .lf-mx thead th:nth-child(2) { width: 96px; }
.lf-page .lf-mx thead th:nth-child(5) { width: 112px; }
.lf-leg { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lf-leg li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tg-ink); word-break: keep-all; }
.lf-leg li::before { content: ""; flex: 0 0 auto; width: 28px; height: 0; border-top: 3.5px solid; }
.lf-leg .is-dry::before { border-color: #c08a2a; } .lf-leg .is-oily::before { border-top-style: dashed; border-color: #3f7f8c; }
.lf-leg .is-f::before { border-color: #a0506e; } .lf-leg .is-m::before { border-top-style: dashed; border-color: #3b4f86; }
.lf-page .lf-sex3.fp-why > li:last-child { grid-column: 1 / -1; }
@media (min-width: 1200px) { .lf-page .lf-sex3.fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lf-page .lf-sex3.fp-why > li:last-child { grid-column: auto; } }
@media (max-width: 760px) { .lf-page .lf-sex3.fp-why > li:last-child { grid-column: auto; } .lf-leg li { font-size: 13px; } }
@media (max-width: 760px) {
  .lf-page .lf-type-tbl thead th:nth-child(1), .lf-page .lf-sex-tbl thead th:nth-child(1) { width: 78px; }
  .lf-page .lf-type-tbl thead th:nth-child(n+2), .lf-page .lf-sex-tbl thead th:nth-child(n+2) { width: auto; }
  .lf-page .lf-lv-tbl thead th:nth-child(1) { width: 96px; }
  .lf-page .lf-lv-tbl thead th:nth-child(n+2) { width: auto; }
  .lf-page .lf-mx thead th:nth-child(1) { width: 112px; }
  .lf-page .lf-mx thead th:nth-child(2) { width: 70px; }
  .lf-page .lf-mx thead th:nth-child(5) { width: 80px; }
}
/* 모바일 — 도표 글자 키우고 보조 주석은 범례로 대신 */
@media (max-width: 560px) {
  .lf-ax text { font-size: 24px; }
  .lf-conv-zt, .lf-sexc-bt { font-size: 22px; }
  .lf-sexc-bs, .lf-sexc-xl, .lf-ax-y { display: none; }
  .lf-page .lf-pic-tall.is-narrow { max-width: 200px; }
}
/* 항노화 — 상단 사진(연령 4인)을 '내 피부의 노화는…'(#lf-age) 오른쪽 본문 맨 위로 옮김(10-13) */
.lf-page #lf-age .lf-hero { margin: 0 0 40px; }
@media (max-width: 760px) { .lf-page #lf-age .lf-hero { margin-bottom: 30px; } }
/* 항노화 리드 도해 — 3층 블록 + 왼쪽 층 라벨(알약·점선) + 오른쪽 도구(점) (10-13) */
.lf-lf { margin: 0; }
.lf-lf-stage { position: relative; max-width: 540px; margin: 0 auto; padding: 0 118px 0 150px; box-sizing: border-box; }
.lf-lf-stage > img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.lf-lf-lay, .lf-lf-tool { list-style: none; margin: 0; padding: 0; }
.lf-lf-lay li, .lf-lf-tool li { position: absolute; top: var(--y); transform: translateY(-50%); display: flex; align-items: center; }
.lf-lf-lay li { left: 0; width: 172px; }
.lf-lf-lay li span { flex: none; padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--c) 40%, #fff); border-radius: 999px; background: #fff; box-shadow: 0 8px 18px -12px rgba(40, 20, 10, .35); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--c); white-space: nowrap; }
.lf-lf-lay li::after { content: ""; flex: 1; min-width: 10px; margin-left: 6px; border-top: 1.5px dashed color-mix(in srgb, var(--c) 75%, #fff); }
.lf-lf-tool li { right: 0; width: 140px; gap: 7px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--c); white-space: nowrap; }
.lf-lf-tool li::before { content: ""; flex: 0 0 34px; height: 10px; background: radial-gradient(circle, var(--c) 4px, transparent 4.6px) right center / 10px 10px no-repeat, repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff) 0 4px, transparent 4px 7px) left center / calc(100% - 13px) 1.5px no-repeat; }
.lf-lf figcaption { margin-top: 14px; text-align: center; font-size: 14px; color: var(--tg-ink-3, #77706b); }
@media (max-width: 560px) {
  .lf-lf-stage { padding: 0 82px 0 108px; }
  .lf-lf-lay li { width: 122px; }
  .lf-lf-lay li span { padding: 5px 9px; font-size: 12px; }
  .lf-lf-lay li::after { margin-left: 4px; }
  .lf-lf-tool li { width: 98px; gap: 5px; font-size: 13px; }
  .lf-lf-tool li::before { flex-basis: 24px; }
  .lf-lf figcaption { font-size: 13px; }
}
/* 항노화 리드 도해 키움(10-13): PC 는 오른쪽 단을 꽉 채움, 모바일은 층 라벨을 두 줄(층/이름)로 줄여 이미지 폭 확보 */
.lf-lf-stage { max-width: none; }
.lf-lf-lay li span b, .lf-lf-lay li span i { font-weight: inherit; font-style: normal; }
@media (max-width: 560px) {
  .lf-lf-stage { padding: 0 66px 0 80px; }
  .lf-lf-lay li { width: 94px; }
  .lf-lf-lay li span { padding: 5px 8px; font-size: 11.5px; line-height: 1.25; text-align: center; }
  .lf-lf-lay li span b { display: block; }
  .lf-lf-lay li span i { display: none; }
  .lf-lf-tool li { width: 84px; font-size: 12.5px; }
  .lf-lf-tool li::before { flex-basis: 20px; }
}
/* 항노화 '이런 경험이 있으셨다면' 재디자인(10-13) — 순서가 아니므로 번호 없이: 걸친 알약(경험 이름)·따옴표 워터마크·원인 줄·답 링크 */
.lf-exp { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
.lf-exp > li { position: relative; display: flex; flex-direction: column; padding: 28px 22px 18px; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); background: color-mix(in srgb, var(--c) 3%, #fff); box-shadow: 0 12px 30px -24px rgba(60, 30, 15, .4); }
.lf-exp > li::before { content: "\201C"; position: absolute; right: 16px; top: 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 76px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--c) 16%, #fff); pointer-events: none; }
.lf-exp > li > .ac-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.lf-exp > li > b { position: relative; display: block; padding-right: 34px; font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.lf-exp-why { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c) 35%, #fff); font-size: 14px; line-height: 1.55; color: var(--tg-ink-2, #4a4440); word-break: keep-all; }
.lf-exp-why em { flex: none; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--c); }
.lf-exp-go { align-self: flex-end; margin-top: auto; padding-top: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--c); text-decoration: none; }
.lf-exp-go::after { content: " \2192"; }
.lf-exp-go:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .lf-exp { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 28px; }
  .lf-exp > li { padding: 26px 16px 16px; }
  .lf-exp > li::before { font-size: 64px; right: 12px; }
  .lf-exp > li > b { font-size: 15.5px; padding-right: 26px; }
}
/* 항노화 경험 카드 — 따옴표 워터마크 제거(10-13) */
.lf-exp > li::before { content: none; }
.lf-exp > li > b { padding-right: 0; }
@media (max-width: 760px) { .lf-exp > li > b { padding-right: 0; } }
/* 항노화 리드 왼쪽 — 상담 버튼 2개 + 안내 문구 + 진료시간(고객 초안 히어로, 10-13) */
.lf-cta { margin: 6px 0 28px; }
.lf-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-cta-btns a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lf-cta-call { background: #a65a3a; border: 1px solid #a65a3a; color: #fff; }
.lf-cta-call:hover { background: #8e4a2e; border-color: #8e4a2e; color: #fff; }
.lf-cta-plan { background: #fff; border: 1px solid color-mix(in srgb, #a65a3a 30%, #fff); color: var(--tg-ink); }
.lf-cta-plan:hover { border-color: #a65a3a; color: #a65a3a; }
.lf-cta-note { margin: 24px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid #a65a3a; font-size: 15.5px; line-height: 1.7; color: var(--tg-ink-2, #4a4440); word-break: keep-all; }
.lf-cta-note b { color: var(--tg-ink); font-weight: 700; }
.lf-cta-time { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: #8a817b; word-break: keep-all; }
@media (max-width: 560px) {
  .lf-cta-btns a { flex: 1 1 100%; min-height: 50px; font-size: 15.5px; }
  .lf-cta-note { font-size: 15px; }
  .lf-cta-time { font-size: 13.5px; }
}
/* 항노화 상담 블록 → WHY ORDER MATTERS 왼쪽 단으로 이동(10-13): 좁은 단이라 버튼을 한 줄씩 꽉 차게 */
.lf-page #lf-why .lf-cta { margin: 30px 0 0; }
.lf-page #lf-why .lf-cta-btns { flex-direction: column; gap: 10px; }
.lf-page #lf-why .lf-cta-btns a { width: 100%; box-sizing: border-box; }
/* 항노화 상담 버튼 — 사이트 초록으로(10-13 사용자 요청) */
.lf-cta-call { background: #137a52; border-color: #137a52; }
.lf-cta-call:hover { background: #0f6544; border-color: #0f6544; }
.lf-cta-plan { border-color: color-mix(in srgb, #137a52 30%, #fff); }
.lf-cta-plan:hover { border-color: #137a52; color: #137a52; }
.lf-cta-note { border-left-color: #137a52; }
/* 항노화 '다르게 시작하지만, 결국 만납니다' 그래프 선 가늘게(10-13) */
.lf-conv-dry, .lf-conv-oily { stroke-width: 2; }
.lf-conv-oily { stroke-dasharray: 7 5; }
.lf-dot-dry, .lf-dot-oily { r: 4.5px; }
.lf-leg .is-dry::before, .lf-leg .is-oily::before { border-top-width: 2px; }
/* 항노화 '노화 변화가 몰리는 시기' — 고객 초안 그래프 모양으로 다시 그림(10-13): 두 선이 내려가고 여성이 폐경 전후 급락해 남성을 앞지름 */
.lf-sexc-axis { stroke: #d9cfc6; stroke-width: 1; }
.lf-sexc-band { fill: #a0506e; opacity: .07; }
.lf-sexc-edge { stroke: #a0506e; stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 4 4; }
.lf-sexc-f { stroke-width: 2; }
.lf-sexc-m { stroke-width: 2; stroke-dasharray: 7 5; }
.lf-sexc-x { fill: #a0506e; stroke: none; }
.lf-sexc-ring { fill: none; stroke: #a0506e; stroke-opacity: .3; stroke-width: 1; }
.lf-sexc-drop { stroke: #a0506e; stroke-opacity: .3; stroke-width: 1; stroke-dasharray: 3 4; }
.lf-sexc-lead { stroke: #a0506e; stroke-opacity: .4; stroke-width: 1; }
.lf-sexc-sl { font-size: 13px; font-weight: 700; }
.lf-sexc-sl.is-f { fill: #8a3f5c; } .lf-sexc-sl.is-m { fill: #3b4f86; }
.lf-leg .is-f::before, .lf-leg .is-m::before { border-top-width: 2px; }
@media (max-width: 760px) { .lf-sexc-lead { display: none; } .lf-sexc-sl { font-size: 20px; } }
/* 항노화 24%·25% 수치 카드 → '노화 변화가 몰리는 시기' 그래프 아래 2열로(10-13, 원고 배치) */
.lf-page #lf-sex .lf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.lf-page #lf-sex .lf-stats > div { grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 24px; }
.lf-page #lf-sex .lf-stats > div > b { font-size: 46px; }
@media (max-width: 760px) {
  .lf-page #lf-sex .lf-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lf-page #lf-sex .lf-stats > div { gap: 14px; padding: 16px; }
  .lf-page #lf-sex .lf-stats > div > b { font-size: 36px; }
}
/* 항노화 10-13: 그래프 세로축 설명 작게·진하게 / 피부 타입 표·성별 표 색을 페이지 기본색과 다르게 */
.lf-ax-y { font-size: 11px; fill: #4f4843; font-weight: 500; }
.tile-tbl.is-lf.lf-type-tbl { --tc: #2f7f86; }
.tile-tbl.is-lf.lf-sex-tbl { --tc: #7d4e7a; }
/* 항노화 '한 층만 볼 때 / 세 층을 함께 볼 때' — 미니 도해 대신 단면 일러스트(10-13). 카드 바탕색에 흰 배경이 섞이도록 multiply */
.lf-page .lf-pair .lf-pair-pic { margin: 4px 0 16px; }
.lf-page .lf-pair .lf-pair-pic img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
/* 항노화 '한눈에 보는 3층 설계' — 원고식 스티키 단면 도해(10-13): 왼쪽 단면 그림 + 층 범위 괄호·표시점, 오른쪽 층 블록. 읽는 층에 맞춰 표시가 이동 */
.lf-dg { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 28px; }
.lf-dg-vis { position: sticky; top: 110px; }
.lf-dg-pic { position: relative; padding: 0 104px 0 24px; }
.lf-dg-pic img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.lf-dg-br { position: absolute; right: 0; top: calc(var(--t) + 3px); height: calc(var(--b) - var(--t) - 6px); width: 96px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 14px; border-left: 2px solid #ddd5cf; transition: border-color .4s; }
.lf-dg-br::before, .lf-dg-br::after { content: ""; position: absolute; left: -2px; width: 8px; border-top: 2px solid #ddd5cf; transition: border-color .4s; }
.lf-dg-br::before { top: 0; } .lf-dg-br::after { bottom: 0; }
.lf-dg-br b { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #a39a94; word-break: keep-all; transition: color .4s; }
.lf-dg-br small { font-size: 12px; line-height: 1.3; color: #b6aea8; white-space: nowrap; }
.lf-dg[data-on="1"] .lf-dg-br[data-l="1"], .lf-dg[data-on="2"] .lf-dg-br[data-l="2"], .lf-dg[data-on="3"] .lf-dg-br[data-l="3"] { border-left-color: var(--c); }
.lf-dg[data-on="1"] .lf-dg-br[data-l="1"]::before, .lf-dg[data-on="1"] .lf-dg-br[data-l="1"]::after,
.lf-dg[data-on="2"] .lf-dg-br[data-l="2"]::before, .lf-dg[data-on="2"] .lf-dg-br[data-l="2"]::after,
.lf-dg[data-on="3"] .lf-dg-br[data-l="3"]::before, .lf-dg[data-on="3"] .lf-dg-br[data-l="3"]::after { border-top-color: var(--c); }
.lf-dg[data-on="1"] .lf-dg-br[data-l="1"] b, .lf-dg[data-on="2"] .lf-dg-br[data-l="2"] b, .lf-dg[data-on="3"] .lf-dg-br[data-l="3"] b { color: var(--c); }
.lf-dg[data-on="1"] .lf-dg-br[data-l="1"] small, .lf-dg[data-on="2"] .lf-dg-br[data-l="2"] small, .lf-dg[data-on="3"] .lf-dg-br[data-l="3"] small { color: #6b625c; }
.lf-dg-probe { --c: #c08a2a; position: absolute; left: 4px; top: 18.85%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); transition: top .55s cubic-bezier(.22, .8, .3, 1), background .4s, box-shadow .4s; }
.lf-dg-probe::after { content: ""; position: absolute; left: 12px; top: 5px; width: 22px; height: 2px; background: var(--c); transition: background .4s; }
.lf-dg[data-on="2"] .lf-dg-probe { --c: #c25670; top: 38.1%; }
.lf-dg[data-on="3"] .lf-dg-probe { --c: #8a3a2e; top: 63.75%; }
.lf-dg-cap { margin: 10px 0 0; padding-right: 80px; text-align: center; font-size: 13px; color: #8a817b; word-break: keep-all; }
.lf-dg-blk { padding: 0 0 52px; }
.lf-dg-blk:last-child { padding-bottom: 0; }
.lf-dg-tag { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; line-height: 1.2; color: #a39a94; transition: color .4s; }
.lf-dg-tag i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d8d0ca; transition: background .4s, box-shadow .4s; }
.lf-dg-tag span { font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.lf-dg-blk.on .lf-dg-tag { color: var(--c); }
.lf-dg-blk.on .lf-dg-tag i { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, #fff); }
.lf-dg-blk h3 { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.lf-dg-who { margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--c); word-break: keep-all; }
.lf-dg-p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.8; color: var(--tg-ink-2, #4a4440); word-break: keep-all; }
.lf-dg-p b { color: var(--tg-ink); }
.lf-dg-tx { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lf-dg-tx span { padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); border-radius: 999px; background: #fff; font-size: 14px; line-height: 1.3; color: var(--tg-ink-2, #4a4440); word-break: keep-all; transition: background .4s; }
.lf-dg-blk.on .lf-dg-tx span { background: color-mix(in srgb, var(--c) 7%, #fff); }
@media (max-width: 1100px) { .lf-dg { grid-template-columns: 340px minmax(0, 1fr); gap: 36px; } .lf-dg-pic { padding-right: 96px; } .lf-dg-br { width: 90px; } }
@media (max-width: 900px) {
  .lf-dg { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lf-dg-vis { position: static; max-width: 380px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .lf-dg-pic { padding: 0 90px 0 20px; }
  .lf-dg-br { width: 84px; padding-left: 10px; }
  .lf-dg-br b { font-size: 12.5px; }
  .lf-dg-br small { font-size: 11px; }
  .lf-dg-cap { padding-right: 70px; font-size: 12.5px; }
  .lf-dg-blk { padding-bottom: 40px; }
  .lf-dg-blk h3 { font-size: 21px; }
  .lf-dg-p { font-size: 15px; }
  .lf-dg-tx span { padding: 6px 12px; font-size: 13.5px; }
}
/* 항노화 3층 설계 도해 — 3층 블록 그림으로 교체 + 조금 키움(10-13) */
.lf-dg { grid-template-columns: 440px minmax(0, 1fr); gap: 44px; }
.lf-dg-probe { top: 18.05%; }
.lf-dg[data-on="2"] .lf-dg-probe { top: 48.65%; }
.lf-dg[data-on="3"] .lf-dg-probe { top: 80.55%; }
@media (max-width: 1100px) { .lf-dg { grid-template-columns: 380px minmax(0, 1fr); gap: 34px; } }
@media (max-width: 900px) { .lf-dg { grid-template-columns: minmax(0, 1fr); gap: 30px; } .lf-dg-vis { max-width: 400px; } }
/* 항노화 상단 단면 도해 더 키움(10-13): 리드 오른쪽 단을 넓힘 */
@media (min-width: 900px) { .lf-page .hx-lead { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; } }
/* 항노화 상단 도해 — 오른쪽 고정 빠른메뉴(약 84px)에 도구 이름이 가리지 않게 비켜 두고, 그만큼 오른쪽 단을 더 넓힘(10-13) */
@media (min-width: 900px) {
  .lf-page .hx-lead { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .lf-page .lf-lf { padding-right: 84px; }
}
@media (min-width: 900px) { .lf-page .hx-lead { grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); } }
/* 항노화 그래프 범례 구분 강화 + 축 글자 축소(10-13): 항목마다 옅은 알약 바탕·두꺼운 견본선·이름은 선 색 */
.lf-leg { gap: 10px; margin-top: 16px; }
.lf-leg li { --lc: #8b8580; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--lc) 9%, #fff); border: 1px solid color-mix(in srgb, var(--lc) 25%, #fff); font-size: 14px; font-weight: 500; color: var(--tg-ink-2, #4a4440); }
.lf-leg li b { font-weight: 700; color: var(--lc); }
.lf-leg li::before { width: 30px; height: 3px; border: 0 !important; border-radius: 2px; background: var(--lc); }
.lf-leg .is-dry { --lc: #c08a2a; } .lf-leg .is-oily { --lc: #3f7f8c; }
.lf-leg .is-f { --lc: #a0506e; } .lf-leg .is-m { --lc: #3b4f86; }
.lf-leg .is-oily::before, .lf-leg .is-m::before { border-radius: 0; background: repeating-linear-gradient(90deg, var(--lc) 0 6px, transparent 6px 10px); }
.lf-ax text { font-size: 11px; }
@media (max-width: 760px) { .lf-ax text { font-size: 21px; } .lf-leg li { font-size: 13px; padding: 6px 12px 6px 10px; } .lf-leg li::before { width: 24px; } }
/* 항노화 건성·지성 그래프 — 선에 이름 직접 표기 + 세로 25% 축소(10-13) */
.lf-conv-sl { font-size: 13px; font-weight: 700; }
.lf-conv-sl.is-dry { fill: #a8761f; } .lf-conv-sl.is-oily { fill: #3f7f8c; }
@media (max-width: 760px) { .lf-conv-sl { font-size: 20px; } }
/* 항노화 '다르게 시작하지만, 결국 만납니다' — 그래프(왼쪽) · 읽는 법과 결론(오른쪽) 좌우 배치(10-13) */
.lf-conv.is-lr { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 30px; align-items: start; }
.lf-conv.is-lr .lf-conv-side { padding-left: 28px; border-left: 1px solid #f1e6df; }
.lf-conv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lf-conv-steps li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.lf-conv-steps b { justify-self: start; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--c); white-space: nowrap; }
.lf-conv-steps span { font-size: 14.5px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.lf-conv-steps strong { font-weight: 700; color: var(--tg-ink); }
.lf-conv.is-lr .lf-conv-tx { margin-top: 18px; padding: 14px 16px; border-top: 0; background: #fbf6f2; font-size: 14.5px; }
@media (max-width: 1100px) { .lf-conv.is-lr { grid-template-columns: minmax(0, 1fr); } .lf-conv.is-lr .lf-conv-side { margin-top: 22px; padding: 20px 0 0; border-left: 0; border-top: 1px solid #f1e6df; } }
@media (max-width: 560px) { .lf-conv-steps li { grid-template-columns: 70px minmax(0, 1fr); } .lf-conv-steps span, .lf-conv.is-lr .lf-conv-tx { font-size: 14px; } }
/* 좌우 배치로 그래프가 작아진 만큼 그래프 글자 보정 */
@media (min-width: 1101px) {
  .lf-conv.is-lr .lf-ax text { font-size: 15.5px; }
  .lf-conv.is-lr .lf-conv-sl { font-size: 18px; }
  .lf-conv.is-lr .lf-conv-zt { font-size: 17px; }
}
/* 항노화 읽는 법 연령 라벨(30대·40~50대·60대 이후) 키움(10-13) */
.lf-conv-steps li { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.lf-conv-steps b { padding: 5px 12px; font-size: 15px; }
@media (max-width: 560px) { .lf-conv-steps li { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; } .lf-conv-steps b { padding: 5px 10px; font-size: 14px; } }
/* 항노화 건성·지성 그래프 — 범례 제거, 선 이름 옆에 설명(10-13) */
.lf-conv-sd { font-size: .82em; font-weight: 500; fill: #6b625c; }
/* 항노화 성별 그래프 주석 '이 시기를 지나면…' 글자 축소(10-13) */
.lf-sexc-xl { font-size: 11px; }
.lf-sexc-bs { font-size: 10.5px; }
/* 항노화 성별 그래프 가로축(30대…) 글자 조금 축소(10-13) */
@media (min-width: 761px) { .lf-sexc .lf-ax text { font-size: 9.5px; } }
/* 항노화 성별 그래프 범례 오른쪽 정렬(10-13) */
.lf-sexc .lf-leg { justify-content: flex-end; }
/* 항노화 성별 그래프 선 이름(여성·남성) 조금 축소(10-13) */
@media (min-width: 761px) { .lf-sexc-sl { font-size: 11px; } }
/* 항노화 성별 그래프 '폐경 전후' 글자 축소(10-13) */
@media (min-width: 761px) { .lf-sexc-bt { font-size: 12px; } }
/* 항노화 성별 그래프 선 조금 더 가늘게(10-13) */
.lf-sexc-f, .lf-sexc-m { stroke-width: 1.5; }
.lf-sexc-m { stroke-dasharray: 6 4; }
/* 항노화 성별 그래프 띠 글자 가독성(10-13): 두 줄 + 띠색 테두리(점선이 글자를 가르지 않게) + 진한 색 */
.lf-sexc-bt, .lf-sexc-bs { paint-order: stroke; stroke: #f7eef2; stroke-width: 4px; stroke-linejoin: round; }
.lf-sexc-bs { fill: #8a3f5c; font-weight: 500; }
/* 항노화 3층 설계 도해 조금 더 키움(10-13): 왼쪽 단 440→480, 괄호 여백 소폭 축소 */
@media (min-width: 1101px) {
  .lf-dg { grid-template-columns: 480px minmax(0, 1fr); gap: 40px; }
  .lf-dg-pic { padding: 0 98px 0 20px; }
  .lf-dg-br { width: 92px; }
}
/* 항노화 3층 설계 'LAYER 01 · 깊이' 태그 키움(10-13) */
.lf-dg-tag { gap: 10px; margin-bottom: 14px; font-size: 15px; letter-spacing: .12em; }
.lf-dg-tag i { width: 10px; height: 10px; }
.lf-dg-tag span { font-size: 14.5px; }
@media (max-width: 560px) { .lf-dg-tag { font-size: 14px; } .lf-dg-tag span { font-size: 13.5px; } }
.lf-dg-tag { font-size: 18px; letter-spacing: .1em; margin-bottom: 14px; }
.lf-dg-tag i { width: 11px; height: 11px; }
.lf-dg-tag span { font-size: 16px; }
@media (max-width: 560px) { .lf-dg-tag { font-size: 16px; } .lf-dg-tag span { font-size: 14.5px; } }
/* 'LAYER 01' 태그 — 다시 이전 크기로(15/14.5) */
.lf-dg-tag { font-size: 15px; letter-spacing: .12em; }
.lf-dg-tag i { width: 10px; height: 10px; }
.lf-dg-tag span { font-size: 14.5px; }
@media (max-width: 560px) { .lf-dg-tag { font-size: 14px; } .lf-dg-tag span { font-size: 13.5px; } }
/* 항노화 3층 설계 다듬기(10-13): 그림은 읽는 층만 선명(나머지 흐림막), 오른쪽은 각진 카드 + 걸친 층 알약 + 번호 워터마크, 읽는 카드 강조 */
.lf-dg-img { position: relative; display: block; }
.lf-dg-veil { position: absolute; left: 3.4%; right: 3.3%; top: var(--t); height: calc(var(--b) - var(--t)); border-radius: 16px; background: rgba(255, 255, 255, .62); transition: opacity .5s; pointer-events: none; }
.lf-dg[data-on="1"] .lf-dg-veil[data-l="1"], .lf-dg[data-on="2"] .lf-dg-veil[data-l="2"], .lf-dg[data-on="3"] .lf-dg-veil[data-l="3"] { opacity: 0; }
.lf-dg-list { display: grid; gap: 34px; padding-top: 14px; }
.lf-dg-blk { position: relative; padding: 34px 26px 24px; border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); background: #fff; box-shadow: 0 12px 30px -26px rgba(60, 30, 15, .35); transition: border-color .4s, box-shadow .4s, background .4s; }
.lf-dg-blk:last-child { padding-bottom: 24px; }
.lf-dg-blk.on { border-color: color-mix(in srgb, var(--c) 55%, #fff); background: color-mix(in srgb, var(--c) 4%, #fff); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--c) 45%, transparent); }
.lf-dg-blk::after { content: "0" attr(data-l); position: absolute; right: 22px; top: 14px; font-family: 'Poppins', sans-serif; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: color-mix(in srgb, var(--c) 13%, #fff); pointer-events: none; transition: color .4s; }
.lf-dg-blk.on::after { color: color-mix(in srgb, var(--c) 22%, #fff); }
.lf-dg-blk > * { position: relative; z-index: 1; }
.lf-dg-tag { position: absolute; top: 0; left: 22px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 55%, #fff); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; color: #fff; white-space: nowrap; transition: background .4s; }
.lf-dg-blk.on .lf-dg-tag { background: var(--c); color: #fff; }
.lf-dg-tag i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: none; }
.lf-dg-blk.on .lf-dg-tag i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.lf-dg-tag em { font-family: 'Pretendard', sans-serif; font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: 0; opacity: .92; }
.lf-dg-tag em::before { content: "· 깊이 "; }
.lf-dg-blk h3 { padding-right: 70px; }
@media (max-width: 560px) {
  .lf-dg-list { gap: 34px; }
  .lf-dg-blk { padding: 30px 18px 20px; }
  .lf-dg-blk::after { font-size: 48px; right: 14px; top: 12px; }
  .lf-dg-blk h3 { padding-right: 52px; }
  .lf-dg-tag { left: 16px; font-size: 12.5px; padding: 5px 12px 5px 10px; }
  .lf-dg-tag em { font-size: 12px; }
}
/* 항노화 '에너지 장비가 층마다 작용하는 정도' 표 색 — 슬레이트 블루(10-13) */
.tile-tbl.is-lf.lf-lv-tbl { --tc: #3d5a80; }
.lf-lv-tbl .lf-lv { background: linear-gradient(90deg, #3d5a80 calc(var(--v, 0) * 33.34%), #e3e9f0 0); }
/* 항노화 '부위와 고민을 골라 보세요' 재디자인(10-13): STEP 질문 카드 2개 + 설계 미리보기 결과 카드(층 스택·번호 줄·부위 메모) */
.lf-bld { padding: 34px 24px 22px; background: #fbf6f2; border: 1px solid #efe2d9; }
.lf-bld-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; align-items: stretch; }
.lf-bld-q { position: relative; padding: 30px 20px 20px; background: #fff; border: 1px solid #ead8cd; box-shadow: 0 12px 28px -24px rgba(80, 40, 20, .35); }
.lf-bld-q + .lf-bld-q { margin-top: 0; }
.lf-bld .ac-pill { position: absolute; top: 0; left: 18px; transform: translateY(-50%); margin: 0; padding: 6px 13px; border-radius: 999px; background: #a65a3a; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.lf-bld-qt { margin: 0 0 14px; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.lf-opts { gap: 8px; }
.lf-opt { padding: 9px 15px; border-color: #e6d3c8; font-size: 14.5px; font-weight: 600; }
.lf-opt[aria-pressed="true"] { box-shadow: 0 8px 18px -10px rgba(166, 90, 58, .7); }
.lf-opt[aria-pressed="true"]::before { content: "✓ "; font-weight: 700; }
.lf-bld-res { position: relative; display: block; margin-top: 44px; padding: 32px 26px 0; background: #fff; border: 1px solid color-mix(in srgb, #a65a3a 45%, #fff); box-shadow: 0 20px 40px -28px rgba(120, 60, 30, .45); }
.lf-bld-res .ac-pill { left: 22px; background: var(--tg-ink, #1f2a26); }
.lf-bld-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px dashed #ead8cd; }
.lf-bld-sel b { font-size: 19px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.lf-bld-sel i { font-style: normal; font-size: 16px; font-weight: 600; color: #c9b2a6; }
.lf-bld-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.lf-bld-layer { padding: 0; border: 0; }
.lf-bld-layer small, .lf-bld-k { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #a65a3a; }
.lf-stack { display: grid; gap: 4px; }
.lf-stack i { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px; background: #f4eeea; font-style: normal; font-size: 13.5px; font-weight: 600; color: #b3a49b; transition: background .3s, color .3s; }
.lf-stack i:nth-child(2) { height: 48px; } .lf-stack i:nth-child(3) { height: 56px; }
.lf-stack i.is-on { background: var(--c); color: #fff; }
.lf-stack i.is-on::after { content: "✓"; position: absolute; right: 12px; font-size: 14px; font-weight: 700; }
.lf-bld-layer b { display: block; margin-top: 12px; font-size: 17px; font-weight: 700; color: var(--tg-ink); word-break: keep-all; }
.lf-bld-layer em { display: block; margin-top: 3px; font-style: normal; font-size: 14px; color: var(--tg-mute); word-break: keep-all; }
.lf-bld-cells { list-style: none; counter-reset: lfb; margin: 0; padding: 0; display: grid; gap: 0; }
.lf-bld-cells li { counter-increment: lfb; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid #f3e8e1; }
.lf-bld-cells li:first-child { border-top: 0; padding-top: 2px; }
.lf-bld-cells li::before { content: counter(lfb); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, #a65a3a 12%, #fff); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #a65a3a; }
.lf-bld-cells li:first-child::before { top: 2px; background: #a65a3a; color: #fff; }
.lf-bld-k { margin-bottom: 4px; }
.lf-bld-cells b { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--tg-ink); word-break: keep-all; }
.lf-bld-cells em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--tg-mute); word-break: keep-all; }
.lf-bld-note { display: flex; align-items: baseline; gap: 10px; margin: 20px -26px 0; padding: 14px 26px; border-top: 1px solid #f3e8e1; background: #fdf8f5; font-size: 14.5px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.lf-bld-nk { flex: none; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, #a65a3a 12%, #fff); font-size: 12.5px; font-weight: 700; color: #a65a3a; }
.lf-bld-disc { margin-top: 16px; }
@media (max-width: 1100px) { .lf-bld-body { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; } }
@media (max-width: 760px) {
  .lf-bld { padding: 30px 14px 16px; }
  .lf-bld-qs { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lf-bld-q { padding: 28px 16px 16px; }
  .lf-bld-res { margin-top: 34px; padding: 28px 16px 0; }
  .lf-bld-sel b { font-size: 17px; }
  .lf-bld-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lf-bld-note { margin: 16px -16px 0; padding: 12px 16px; font-size: 14px; flex-direction: column; gap: 6px; }
}
/* 항노화 설계 미리보기 색 — 사이트 초록(#137a52)으로(10-13). 위 '내 얼굴 설계 미리보기' 버튼과 같은 색 */
.lf-bld { --bc: #137a52; background: #f3f8f5; border-color: #dcebe3; }
.lf-bld .ac-pill { background: var(--bc); }
.lf-bld-res .ac-pill { background: #0f3d2c; }
.lf-bld-q { border-color: #d6e8de; box-shadow: 0 12px 28px -24px rgba(19, 80, 50, .35); }
.lf-bld .lf-opt { border-color: #cfe3d8; }
.lf-bld .lf-opt:hover { border-color: var(--bc); }
.lf-bld .lf-opt[aria-pressed="true"] { background: var(--bc); border-color: var(--bc); color: #fff; box-shadow: 0 8px 18px -10px rgba(19, 122, 82, .7); }
.lf-bld .lf-opt:focus-visible { outline-color: var(--bc); }
.lf-bld-res { border-color: color-mix(in srgb, #137a52 40%, #fff); box-shadow: 0 20px 40px -28px rgba(19, 80, 50, .45); }
.lf-bld-sel { border-bottom-color: #d6e8de; }
.lf-bld-sel i { color: #9cc4b0; }
.lf-bld-layer small, .lf-bld-k { color: var(--bc); }
.lf-bld-cells li { border-top-color: #e6f0ea; }
.lf-bld-cells li::before { background: color-mix(in srgb, #137a52 12%, #fff); color: var(--bc); }
.lf-bld-cells li:first-child::before { background: var(--bc); color: #fff; }
.lf-bld-note { border-top-color: #e6f0ea; background: #f5faf7; }
.lf-bld-nk { background: color-mix(in srgb, #137a52 12%, #fff); color: var(--bc); }
.lf-bld .lf-stack i:not(.is-on) { background: #edf3ef; color: #9fb1a8; }
/* 항노화 설계 미리보기 색 — 모브 플럼(#6d4a6a)으로(10-13 사용자 선택) */
.lf-bld { --bc: #6d4a6a; background: #f8f4f7; border-color: #ece1e9; }
.lf-bld-res .ac-pill { background: #3e2a3c; }
.lf-bld-q { border-color: #e8dbe5; box-shadow: 0 12px 28px -24px rgba(70, 40, 65, .35); }
.lf-bld .lf-opt { border-color: #e3d4df; }
.lf-bld .lf-opt[aria-pressed="true"] { box-shadow: 0 8px 18px -10px rgba(109, 74, 106, .7); }
.lf-bld-res { border-color: color-mix(in srgb, #6d4a6a 40%, #fff); box-shadow: 0 20px 40px -28px rgba(70, 40, 65, .45); }
.lf-bld-sel { border-bottom-color: #e8dbe5; }
.lf-bld-sel i { color: #c3aabf; }
.lf-bld-cells li { border-top-color: #f0e8ee; }
.lf-bld-cells li::before { background: color-mix(in srgb, #6d4a6a 12%, #fff); }
.lf-bld-note { border-top-color: #f0e8ee; background: #faf6f9; }
.lf-bld-nk { background: color-mix(in srgb, #6d4a6a 12%, #fff); }
.lf-bld .lf-stack i:not(.is-on) { background: #f1ebf0; color: #b3a3b0; }
/* 항노화 설계 미리보기 색 — 붉은 기가 섞인 보라(라즈베리 플럼 #8e3d6c, 10-13) */
.lf-bld { --bc: #8e3d6c; background: #faf3f7; border-color: #f0dfe9; }
.lf-bld-res .ac-pill { background: #4f2140; }
.lf-bld-q { border-color: #eed8e4; box-shadow: 0 12px 28px -24px rgba(110, 40, 80, .35); }
.lf-bld .lf-opt { border-color: #ead1df; }
.lf-bld .lf-opt[aria-pressed="true"] { box-shadow: 0 8px 18px -10px rgba(142, 61, 108, .7); }
.lf-bld-res { border-color: color-mix(in srgb, #8e3d6c 40%, #fff); box-shadow: 0 20px 40px -28px rgba(110, 40, 80, .45); }
.lf-bld-sel { border-bottom-color: #eed8e4; }
.lf-bld-sel i { color: #d0a6be; }
.lf-bld-cells li { border-top-color: #f4e7ee; }
.lf-bld-cells li::before { background: color-mix(in srgb, #8e3d6c 12%, #fff); }
.lf-bld-note { border-top-color: #f4e7ee; background: #fcf6f9; }
.lf-bld-nk { background: color-mix(in srgb, #8e3d6c 12%, #fff); }
.lf-bld .lf-stack i:not(.is-on) { background: #f5ebf0; color: #bda3b2; }
/* 항노화 설계 미리보기 '주로 다룰 층' 칸 넓힘 230→320(10-13) */
@media (min-width: 1101px) { .lf-bld-body { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; } }
@media (min-width: 761px) and (max-width: 1100px) { .lf-bld-body { grid-template-columns: 260px minmax(0, 1fr); } }
/* 항노화 '주로 다룰 층' 막대 세로 늘림 40/48/56 → 58/70/84(10-13) */
.lf-bld .lf-stack { gap: 5px; }
.lf-bld .lf-stack i { height: 58px; font-size: 14px; }
.lf-bld .lf-stack i:nth-child(2) { height: 70px; }
.lf-bld .lf-stack i:nth-child(3) { height: 84px; }
@media (max-width: 760px) { .lf-bld .lf-stack i { height: 48px; } .lf-bld .lf-stack i:nth-child(2) { height: 56px; } .lf-bld .lf-stack i:nth-child(3) { height: 66px; } }
/* 항노화 '주로 다룰 층' 아래 층 이름·설명 가운데 정렬(10-13) */
.lf-bld-layer b, .lf-bld-layer em { text-align: center; }
/* 항노화 설계 미리보기 ①②③ — 치료명과 설명 한 줄로(10-13) */
.lf-bld-cells b { display: inline; margin-right: 10px; }
.lf-bld-cells em { display: inline; margin-top: 0; }
@media (min-width: 761px) { .lf-bld-cells li { padding-top: 22px; padding-bottom: 22px; } .lf-bld-cells li::before { top: 22px; } .lf-bld-cells li:first-child { padding-top: 4px; } .lf-bld-cells li:first-child::before { top: 4px; } }
/* 항노화 설계 미리보기 결과 재디자인 v2(10-13): 위 = 가로 깊이 게이지(표피|진피|근막·지방) + 요약, 아래 = ①→②→③ 흐름 카드 */
.lf-bld-body.is-v2 { display: block; }
.lf-bld-body.is-v2 .lf-bld-layer small { margin-bottom: 10px; }
.lf-bld-gauge { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; }
.lf-bld-body.is-v2 .lf-stack { display: grid; grid-template-columns: 1fr 1.25fr 1.5fr; gap: 4px; }
.lf-bld-body.is-v2 .lf-stack i, .lf-bld-body.is-v2 .lf-stack i:nth-child(2), .lf-bld-body.is-v2 .lf-stack i:nth-child(3) { height: 56px; justify-content: center; padding: 0 10px; font-size: 14.5px; }
.lf-bld-body.is-v2 .lf-stack i.is-on::after { position: static; margin-left: 6px; }
.lf-bld-lsum { padding-left: 20px; border-left: 2px solid color-mix(in srgb, var(--bc) 25%, #fff); }
.lf-bld-body.is-v2 .lf-bld-lsum b { margin: 0; text-align: left; font-size: 17px; }
.lf-bld-body.is-v2 .lf-bld-lsum em { margin-top: 3px; text-align: left; }
.lf-bld-cells.is-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 34px; counter-reset: lfb; }
.lf-bld-cells.is-flow li, .lf-bld-cells.is-flow li:first-child { position: relative; padding: 30px 18px 18px; border: 1px solid color-mix(in srgb, var(--bc) 22%, #fff); background: #fff; }
.lf-bld-cells.is-flow li.is-main { border-color: color-mix(in srgb, var(--bc) 55%, #fff); background: color-mix(in srgb, var(--bc) 5%, #fff); }
.lf-bld-cells.is-flow li::before, .lf-bld-cells.is-flow li:first-child::before { content: counter(lfb); position: absolute; top: 0; left: 16px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid color-mix(in srgb, var(--bc) 40%, #fff); color: var(--bc); font-size: 13px; }
.lf-bld-cells.is-flow li.is-main::before { background: var(--bc); border-color: var(--bc); color: #fff; }
.lf-bld-cells.is-flow li + li::after { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700; color: color-mix(in srgb, var(--bc) 55%, #fff); }
.lf-bld-cells.is-flow .lf-bld-k { margin-bottom: 6px; }
.lf-bld-cells.is-flow b { display: block; margin: 0; font-size: 16.5px; line-height: 1.4; }
.lf-bld-cells.is-flow em { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; }
@media (max-width: 1100px) { .lf-bld-gauge { grid-template-columns: minmax(0, 1fr); gap: 14px; } .lf-bld-lsum { padding-left: 14px; } }
@media (max-width: 760px) {
  .lf-bld-body.is-v2 .lf-stack i, .lf-bld-body.is-v2 .lf-stack i:nth-child(2), .lf-bld-body.is-v2 .lf-stack i:nth-child(3) { height: 48px; font-size: 13.5px; padding: 0 6px; }
  .lf-bld-cells.is-flow { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 30px; }
  .lf-bld-cells.is-flow li + li::after { content: "↓"; left: 50%; top: -24px; transform: translate(-50%, -50%); display: none; }
}
/* 항노화 '그래서 — 오늘 할 것 / 오늘 하지 않을 것' 재디자인(10-13): 제목 + 두 패널(✓ / ✕ 목록) */
.lf-today2 { position: relative; margin-top: 44px; padding: 32px 26px 24px; background: #fff; border: 1px solid color-mix(in srgb, #a65a3a 35%, #fff); box-shadow: 0 16px 34px -26px rgba(120, 60, 30, .4); }
.lf-today2 > .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); margin: 0; padding: 6px 13px; border-radius: 999px; background: #a65a3a; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }
.lf-today2-hd { margin: 0 0 18px; font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--tg-ink); word-break: keep-all; }
.lf-today2-hd b { color: #a65a3a; }
.lf-today2-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lf-today2-cols > div { padding: 18px 20px; }
.lf-today2-cols .is-do { background: color-mix(in srgb, #a65a3a 7%, #fff); border: 1px solid color-mix(in srgb, #a65a3a 22%, #fff); }
.lf-today2-cols .is-not { background: #f6f4f3; border: 1px solid #ebe6e3; }
.lf-today2-t { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.lf-today2-t i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; }
.is-do .lf-today2-t i { background: #a65a3a; } .is-not .lf-today2-t i { background: #8f8782; }
.lf-today2-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lf-today2-cols li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.lf-today2-cols li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.is-do li::before { content: "✓"; color: #a65a3a; }
.is-not li::before { content: "✕"; color: #a39a94; font-size: 13px; top: 1px; }
.is-do li b { color: var(--tg-ink); }
.is-not li { color: #7d7570; } .is-not li b { color: #5d5651; font-weight: 600; }
@media (max-width: 760px) {
  .lf-today2 { margin-top: 34px; padding: 28px 16px 18px; }
  .lf-today2-hd { font-size: 16px; }
  .lf-today2-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lf-today2-cols > div { padding: 16px; }
  .lf-today2-cols li { font-size: 14.5px; }
}
/* 항노화 '같은 고민, 다른 조합' 표 색 — 세이지 올리브(10-13) */
.tile-tbl.is-lf.lf-mx { --tc: #5d7048; }
/* 항노화 '같은 고민, 다른 조합' 권장 간격 열 넓힘 — 모바일 80→96(10-13) */
@media (max-width: 760px) { .lf-page .lf-mx thead th:nth-child(5) { width: 96px; } }
/* 항노화 '같은 고민, 다른 조합' 주된 층 열 넓힘 — 모바일 70→100(10-13) */
@media (max-width: 760px) { .lf-page .lf-mx thead th:nth-child(2) { width: 100px; } }
/* 항노화 '같은 고민, 다른 조합' PC 열 넓힘(10-13): 주된 층 96→130, 권장 간격 112→140 */
@media (min-width: 761px) { .lf-page .lf-mx thead th:nth-child(2) { width: 130px; } .lf-page .lf-mx thead th:nth-child(5) { width: 140px; } }
/* 항노화 '같은 고민, 다른 조합' 주된 층 열 가운데 정렬(PC·모바일, 10-13) */
.lf-page .lf-mx thead th:nth-child(2), .lf-page .lf-mx tbody td:nth-child(2) { text-align: center; }
.lf-page .lf-mx tbody td:nth-child(2) .lf-ly { margin: 2px; }
@media (min-width: 761px) { .lf-page .lf-mx thead th:nth-child(2) { width: 160px; } }
/* PC: 중심 열 조금 줄이고 권장 간격 넓힘 */
@media (min-width: 761px) { .lf-page .lf-mx thead th:nth-child(3) { width: 180px; } .lf-page .lf-mx thead th:nth-child(5) { width: 180px; } }
/* 항노화 '회복을 받쳐 주는 두 가지' 번호 워터마크 — 치료 구성(TREATMENT · 5 TOOLS) 번호와 같은 크기(10-13) */
.lf-page #lf-rec .fp-no { font-size: 64px; font-weight: 700; letter-spacing: -.03em; }
@media (max-width: 760px) { .lf-page #lf-rec .fp-no { font-size: 46px; } }
/* 항노화 'STEP 02 촉진 진찰과 설계서' — 설계서 양식 디자인(10-13): 머리띠 + 아이콘·번호·제목·설명 행, 점선 구분 */
.lf-sheet { position: relative; background: #fff; border: 1px solid #e8d9cf; box-shadow: 0 18px 38px -28px rgba(110, 60, 30, .45); }
.lf-sheet-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 16px 24px; background: #fbf6f2; border-bottom: 1px solid #efe2d9; }
.lf-sheet-hd b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--tg-ink); }
.lf-sheet-hd b::before { content: ""; display: inline-block; width: 4px; height: 15px; margin-right: 10px; vertical-align: -1px; background: #a65a3a; }
.lf-sheet-hd span { font-size: 13.5px; color: var(--tg-mute); }
.lf-plan3.is-sheet { display: block; counter-reset: lfp; padding: 4px 24px; }
.lf-plan3.is-sheet li { counter-increment: lfp; display: grid; grid-template-columns: 48px 230px minmax(0, 1fr); gap: 0 18px; align-items: center; padding: 18px 0; background: none; border: 0; border-top: 1px dashed #ead8cd; }
.lf-plan3.is-sheet li:first-child { border-top: 0; }
.lf-plan3.is-sheet li::before { content: none; }
.lf-sheet-ic { display: block; width: 44px; height: 44px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.lf-plan3.is-sheet b { display: flex; align-items: baseline; gap: 10px; font-size: 16.5px; color: var(--tg-ink); }
.lf-plan3.is-sheet b::before { content: counter(lfp, decimal-leading-zero); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--c); }
.lf-plan3.is-sheet span { margin-top: 0; font-size: 15px; line-height: 1.65; color: var(--tg-body); }
@media (max-width: 1100px) { .lf-plan3.is-sheet li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; } .lf-plan3.is-sheet li .lf-sheet-ic { grid-row: 1 / 3; align-self: start; } }
@media (max-width: 760px) {
  .lf-sheet-hd { padding: 14px 16px; }
  .lf-plan3.is-sheet { padding: 2px 16px; }
  .lf-plan3.is-sheet li { grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; }
  .lf-sheet-ic { width: 38px; height: 38px; }
  .lf-plan3.is-sheet b { font-size: 16px; }
  .lf-plan3.is-sheet span { font-size: 14.5px; }
}
/* 항노화 STEP 02 설계서 — C안(10-13): 왼쪽 기울어진 설계서 종이 미리보기 + 오른쪽 '설계서에 담기는 내용' 체크 목록 */
.lf-sc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: center; padding: 30px 32px; background: #fbf6f2; border: 1px solid #efe2d9; }
.lf-sc-doc { position: relative; display: grid; gap: 9px; padding: 22px 20px 20px; background: #fff; border: 1px solid #e6d6cb; box-shadow: 0 18px 30px -18px rgba(110, 60, 30, .35), 8px 8px 0 -1px #f1e4db; transform: rotate(-3deg); }
.lf-sc-doc > b { margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid #efe2d9; font-size: 15px; font-weight: 700; color: #7a3f27; }
.lf-sc-ln { display: block; height: 7px; background: #f1e6df; }
.lf-sc-ln.is-80 { width: 80%; } .lf-sc-ln.is-60 { width: 60%; }
.lf-sc-bar { display: grid; grid-template-columns: 1fr 1.25fr 1.5fr; gap: 4px; margin: 4px 0; }
.lf-sc-bar i { height: 16px; background: var(--c, #efe3dc); }
.lf-sc-sign { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #a65a3a; }
.lf-sc-sign i { width: 46px; height: 1px; background: #d9c3b5; }
.lf-sc-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--tg-ink); }
.lf-sc-hd small { font-size: 13.5px; font-weight: 500; color: var(--tg-mute); }
.lf-sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lf-sc-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px dashed #e6d4c9; }
.lf-sc-list li:first-child { border-top: 0; padding-top: 0; }
.lf-sc-ck { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--c); }
.lf-sc-ck::before { content: "✓"; font-style: normal; font-size: 14px; font-weight: 700; color: #fff; }
.lf-sc-list b { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.lf-sc-list span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 900px) { .lf-sc { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 26px 20px; } .lf-sc-doc { width: 220px; margin: 0 auto; } }
@media (max-width: 560px) { .lf-sc { padding: 24px 16px; } .lf-sc-hd { font-size: 17px; } .lf-sc-list b { font-size: 16px; } .lf-sc-list span { font-size: 14.5px; } }
/* 항노화 야누스·메타뷰 카드 — 설명 길이가 달라도 구분선·수치·버튼 높이 맞춤(10-13) */
.lf-devs > article > p { flex: 1 1 auto; }
/* 항노화 야누스·메타뷰 수치 — 같은 폭 타일로(10-13): 옅은 내용색 바탕, 숫자 가운데·라벨 아래 */
.lf-spec { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 18px; padding-top: 16px; }
.lf-spec li { align-items: center; justify-content: center; gap: 6px; padding: 14px 6px 12px; background: color-mix(in srgb, var(--c) 7%, #fff); text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: color-mix(in srgb, var(--c) 60%, #4a4440); word-break: keep-all; }
.lf-spec b { font-size: 28px; line-height: 1; letter-spacing: -.02em; }
.lf-spec b small { font-size: 16px; margin-left: 1px; }
@media (max-width: 560px) { .lf-spec { gap: 4px; } .lf-spec li { padding: 12px 4px 10px; font-size: 12px; } .lf-spec b { font-size: 24px; } }
/* 항노화 야누스·메타뷰 '상세 분석 항목' 버튼 오른쪽으로(10-13) — 펼친 목록은 왼쪽 정렬 유지 */
.lf-devs .lf-more { display: flex; flex-direction: column; }
.lf-devs .lf-more summary { align-self: flex-end; }
/* 보유 장비 블록 분류 이름(피부정밀진단 등) 조금 키움 15→17px(10-13) — 피부·뷰티 공통 블록 */
.eq .eq-group-name { font-size: 17px; font-weight: 600; }
@media (max-width: 560px) { .eq .eq-group-name { font-size: 16px; } }
.eq .eq-group-name { font-size: 19px; }
@media (max-width: 560px) { .eq .eq-group-name { font-size: 17px; } }
/* 정안침 'STEP 1–5 · 오늘의 프로그램' 번호 원 펄스 — 사이트 공용 fpGtPulse(2.4s, 0.4초 간격, 10-13) */
.jg-steps > li > .ac-no { animation: fpGtPulse 2.4s ease-out infinite; }
.jg-steps > li:nth-child(2) > .ac-no { animation-delay: .4s; }
.jg-steps > li:nth-child(3) > .ac-no { animation-delay: .8s; }
.jg-steps > li:nth-child(4) > .ac-no { animation-delay: 1.2s; }
.jg-steps > li:nth-child(5) > .ac-no { animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) { .jg-steps > li > .ac-no { animation: none; } }
/* ══ 2026-10-13 정안침 다듬기(항노화 기준) ══ */
/* 효과 6 · 장점 4 — 걸친 알약(내용색) + 원 없는 아이콘(72%) + 번호 워터마크 카드 */
.jg-page .jg-fx.fp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 14px; }
.jg-page .jg-st.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
.jg-page :is(.jg-fx, .jg-st) > li > .ac-pill { background: var(--c); }
.jg-page :is(.jg-fx, .jg-st) .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.jg-page :is(.jg-fx, .jg-st) .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
.jg-page :is(.jg-fx, .jg-st) h3 { font-size: 16.5px; }
@media (max-width: 1100px) { .jg-page .jg-fx.fp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .jg-page :is(.jg-fx, .jg-st).fp-why { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .jg-page :is(.jg-fx, .jg-st) .fp-why-ico, .jg-page :is(.jg-fx, .jg-st) .fp-why-ico::before { width: 40px; height: 40px; }
}
/* 정안침 상단 = 경혈 얼굴 도해 / WHAT IS = 왼쪽 시술 사진 + 오른쪽 正·顔·針 세 글자 + 설명(10-13) */
.jg-page .jg-what-pic { margin: 22px 0 0; }
.jg-page .jg-what-pic img { display: block; width: 100%; height: auto; }
.jg-hanja3 { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jg-hanja3 li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 10px 18px; background: color-mix(in srgb, var(--c) 5%, #fff); border: 1px solid color-mix(in srgb, var(--c) 24%, #fff); text-align: center; }
.jg-hanja3 b { font-family: 'Noto Serif KR', 'Noto Serif SC', 'Batang', serif; font-size: 52px; font-weight: 600; line-height: 1.1; color: var(--c); }
.jg-hanja3 span { font-size: 15.5px; font-weight: 700; color: var(--tg-ink); }
.jg-hanja3 small { font-size: 14px; color: var(--tg-mute); }
.jg-what-tx .ta-lede { font-size: 16px; line-height: 1.85; }
.jg-what-tx .ta-lede + .ta-lede { margin-top: 14px; }
@media (max-width: 760px) { .jg-hanja3 { gap: 8px; } .jg-hanja3 li { padding: 16px 6px 14px; } .jg-hanja3 b { font-size: 40px; } .jg-hanja3 span { font-size: 14.5px; } .jg-hanja3 small { font-size: 13px; } .jg-what-tx .ta-lede { font-size: 15.5px; } }
/* 정안침 WHAT IS — A안 사전 풀이형(10-13): 표제어(정안침 正顔針 + 품사 같은 알약) + 세 글자 뜻풀이 */
.jg-dict { margin: 0 0 26px; padding: 24px 26px 8px; background: #fff; border: 1px solid #ead8df; box-shadow: 0 16px 34px -28px rgba(110, 50, 75, .45); }
.jg-dict-hw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; padding-bottom: 16px; border-bottom: 1px solid #f1e5ea; }
.jg-dict-hw b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); }
.jg-dict-hw span { font-family: 'Noto Serif KR', 'Noto Serif SC', 'Batang', serif; font-size: 24px; font-weight: 600; color: #9a586e; }
.jg-dict-hw em { align-self: center; padding: 3px 11px; border: 1px solid #dcc3cd; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 600; color: #8a6474; }
.jg-dict-ol { list-style: none; margin: 0; padding: 0; }
.jg-dict-ol li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px dashed #efe1e7; }
.jg-dict-ol li:first-child { border-top: 0; }
.jg-dict-ol b { font-family: 'Noto Serif KR', 'Noto Serif SC', 'Batang', serif; font-size: 40px; font-weight: 600; line-height: 1; text-align: center; color: var(--c); }
.jg-dict-ol span { font-size: 15.5px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.jg-dict-ol strong { display: inline-block; margin-right: 10px; padding: 2px 9px; background: color-mix(in srgb, var(--c) 10%, #fff); font-size: 14px; font-weight: 700; color: var(--c); }
@media (max-width: 760px) { .jg-dict { padding: 20px 16px 4px; } .jg-dict-hw b { font-size: 24px; } .jg-dict-hw span { font-size: 21px; } .jg-dict-ol li { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; } .jg-dict-ol b { font-size: 34px; } .jg-dict-ol span { font-size: 15px; } .jg-dict-ol strong { display: block; width: fit-content; margin: 0 0 4px; } }
/* 정안침 WHAT IS — 시술 사진을 오른쪽 단으로(사전 카드 아래, 사진 + 설명 나란히) */
.jg-what-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.jg-page .jg-what-row .jg-what-pic { margin: 0; }
.jg-what-p .ta-lede { font-size: 16px; line-height: 1.85; }
.jg-what-p .ta-lede + .ta-lede { margin-top: 12px; }
@media (max-width: 1100px) { .jg-what-row { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
/* 정안침 'STEP 1–5 · 오늘의 프로그램' 소제목과 플로우 간격 띄움(10-13) */
.jg-page .jg-steps { margin-top: 30px; }
@media (max-width: 760px) { .jg-page .jg-steps { margin-top: 24px; } }
/* 정안침 SCALP NEEDLING 카드에 아이콘(원 없이 내용색 72%, 10-13) */
.jg-page .jg-sc > li > .ac-pill { background: var(--c); }
.jg-page .jg-sc .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.jg-page .jg-sc .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
@media (max-width: 760px) { .jg-page .jg-sc .fp-why-ico, .jg-page .jg-sc .fp-why-ico::before { width: 40px; height: 40px; } }
/* 정안침 SCALP NEEDLING 아이콘 키움 46→58(10-13) */
.jg-page .jg-sc .fp-why-ico, .jg-page .jg-sc .fp-why-ico::before { width: 58px; height: 58px; }
@media (max-width: 760px) { .jg-page .jg-sc .fp-why-ico, .jg-page .jg-sc .fp-why-ico::before { width: 50px; height: 50px; } }
/* 정안침 SCALP NEEDLING 카드 번호 워터마크 제거(10-13) */
.jg-page .jg-sc .fp-no { display: none; }
.jg-page #jg-scalp .hx-split-bd > .pg-note { margin-top: 28px; }
.jg-page #jg-effect .hx-split-bd > .pg-note { margin-top: 28px; }
/* 정안침 APPLICATIONS 재디자인(10-13): 제목줄 큰 번호 + 내용색 아이콘, 펼침 본문 = 걸친 알약 흰 박스 2개, 접근 단계 세로 연결선, 함께 치료 칩·안내 박스 정돈 */
.jg-apply2 { display: grid; gap: 14px; }
.jg-apply2 .jg-case > summary { gap: 14px; padding: 18px 24px; }
.jg-apply2 .jg-case-no { width: 76px; flex: 0 0 76px; font-size: 56px; font-weight: 700; letter-spacing: -.03em; opacity: .18; }
.jg-case-ic { flex: 0 0 auto; width: 44px; height: 44px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.jg-apply2 .jg-case-t b { font-size: 18.5px; }
.jg-apply2 .jg-case-bd { gap: 34px 16px; padding: 22px 24px 20px; }
.jg-apply2 .jg-case-bd > div { position: relative; padding: 30px 20px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.jg-apply2 .jg-case-bd h4 { position: absolute; top: 0; left: 16px; transform: translateY(-50%); margin: 0; padding: 6px 13px; background: var(--c); color: #fff; font-size: 13px; line-height: 1.2; }
.jg-apply2 .jg-how li { position: relative; }
.jg-apply2 .jg-how li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 36px; bottom: -10px; width: 1px; background: color-mix(in srgb, var(--c) 35%, #fff); }
.jg-apply2 .jg-with { margin: 0 24px; padding: 16px 0 14px; }
.jg-apply2 .jg-with b { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); }
.jg-apply2 .jg-with span::before { content: "+"; margin-right: 6px; font-weight: 700; color: var(--c); }
.jg-apply2 .jg-case-note { position: relative; margin: 0 24px 22px; padding: 12px 16px 12px 42px; background: #f6f3f4; color: #6f6669; }
.jg-apply2 .jg-case-note::before { content: "i"; position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--c) 70%, #fff); color: #fff; font-family: Georgia, serif; font-size: 12px; font-style: italic; font-weight: 700; line-height: 1; }
@media (max-width: 760px) {
  .jg-apply2 .jg-case > summary { padding: 14px 14px; gap: 10px; }
  .jg-apply2 .jg-case-no { width: 44px; flex-basis: 44px; font-size: 36px; }
  .jg-case-ic { width: 34px; height: 34px; }
  .jg-apply2 .jg-case-t b { font-size: 16.5px; }
  .jg-apply2 .jg-case-bd { padding: 22px 14px 16px; }
  .jg-apply2 .jg-case-bd > div { padding: 28px 14px 14px; }
  .jg-apply2 .jg-with { margin: 0 14px; }
  .jg-apply2 .jg-case-note { margin: 0 14px 16px; }
}
/* 정안침 접근 단계 번호 — 한자 → 숫자(10-13) */
.jg-apply2 .jg-how li i { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; }
/* 안면홍조 상단 이미지 그림자 제거(10-13) */
.ro-page .ro-hero { box-shadow: none; }
.ro-page .ro-hero .ad-hero-pic, .ro-page .ro-hero img { box-shadow: none; }
.ro-page .ro-hero { border: 0; background: none; }
/* 안면홍조 상단 이미지 — 잘라내지 않고 원본 비율(1200×1280) 그대로(10-13) */
.ro-page .ro-hero .ad-hero-pic { aspect-ratio: auto; overflow: visible; }
.ro-page .ro-hero .ad-hero-pic img { height: auto; object-fit: contain; }
/* 안면홍조 상단 — 이미지 축소 + 위(이마) 붉은 면 펄스 '위는 뜨거움 · 熱' / 아래(어깨) 파란 면 펄스 '아래는 차가움 · 寒'(10-13, 원고 상열하한 도해) */
.ro-page .ro-hero { position: relative; width: 100%; max-width: 440px; justify-self: center; margin: 0 auto; }
.ro-page .ro-hero .ad-hero-pic { position: relative; isolation: isolate; }
.ro-page .ro-hero .ad-hero-pic img { position: relative; z-index: 1; }
.ro-temp { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; mix-blend-mode: multiply; }
.ro-temp::before, .ro-temp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: roTemp 3.2s ease-out infinite; }
.ro-temp::after { animation-delay: 1.6s; }
.ro-temp.is-hot { --tc: #d2483a; left: 32%; top: 12%; width: 36%; aspect-ratio: 1.5 / 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 38%, transparent), color-mix(in srgb, var(--tc) 0%, transparent)); }
.ro-temp.is-cold { --tc: #2f74c0; left: 18%; top: 82%; width: 64%; aspect-ratio: 3 / 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 34%, transparent), color-mix(in srgb, var(--tc) 0%, transparent)); }
@keyframes roTemp { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
.ro-temp-lb { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-align: center; }
.ro-temp-lb b { font-family: 'Noto Serif KR', 'Noto Serif SC', 'Batang', serif; font-size: 18px; font-weight: 700; }
.ro-temp-lb.is-hot { margin-bottom: 4px; color: #c0473a; }
.ro-temp-lb.is-hot i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #d2483a; animation: fpGtPulse 2.4s ease-out infinite; --c: #d2483a; }
.ro-temp-lb.is-cold { flex-direction: column; gap: 6px; margin-top: 8px; color: #3a6f9e; }
.ro-temp-lb.is-cold svg { width: 220px; height: 30px; overflow: visible; }
.ro-temp-lb.is-cold path { fill: none; stroke: #6f9cc7; stroke-width: 1.6; stroke-linecap: round; }
.ro-temp-lb.is-cold path:nth-child(2) { stroke: #95b6d6; } .ro-temp-lb.is-cold path:nth-child(3) { stroke: #bcd0e4; }
@media (prefers-reduced-motion: reduce) { .ro-temp::before, .ro-temp::after, .ro-temp-lb.is-hot i { animation: none; } }
@media (max-width: 760px) { .ro-page .ro-hero { max-width: 320px; } .ro-temp-lb { font-size: 14px; } .ro-temp-lb b { font-size: 16px; } .ro-temp-lb.is-cold svg { width: 180px; } }
.ro-temp.is-cold { top: 90%; left: 14%; width: 72%; }
/* 안면홍조 상단 온도 표시 — 펄스 애니메이션 제거(10-13), 색 번짐과 문구만 유지 */
.ro-temp::before, .ro-temp::after { animation: none; opacity: 0; }
.ro-temp-lb.is-hot i { animation: none; }
/* 안면홍조 상단 — 머리 위로 열이 올라가는 점선 세 줄(원고 도해), 점선이 천천히 위로 흐름(10-13) */
.ro-page .ro-temp-lb.is-hot { margin-bottom: 40px; }
.ro-heat { position: absolute; z-index: 3; left: 50%; top: -46px; width: 130px; height: 88px; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.ro-heat path { fill: none; stroke: #d2483a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 6; animation: roHeat 1.8s linear infinite; }
.ro-heat path:nth-child(2) { animation-duration: 1.5s; }
.ro-heat circle { fill: #d2483a; }
@keyframes roHeat { to { stroke-dashoffset: 14; } }
@media (prefers-reduced-motion: reduce) { .ro-heat path { animation: none; } }
@media (max-width: 760px) { .ro-page .ro-temp-lb.is-hot { margin-bottom: 30px; } .ro-heat { top: -36px; width: 104px; height: 70px; } }
.ro-page .ro-temp-lb.is-hot { margin-bottom: 60px; }
.ro-heat { top: -54px; }
@media (max-width: 760px) { .ro-page .ro-temp-lb.is-hot { margin-bottom: 46px; } .ro-heat { top: -42px; } }
/* 안면홍조 상단 이미지 키움 440→540 (모바일 320→360) */
.ro-page .ro-hero { max-width: 540px; }
@media (max-width: 760px) { .ro-page .ro-hero { max-width: 360px; } }
.ro-temp-lb.is-hot i { display: none; }
/* 안면홍조 '아래는 차가움' 물결 — 같은 파장의 고른 사인 곡선 3줄, 양끝은 흐리게(그라데이션), 아래로 갈수록 짧고 옅게(10-13) */
.ro-temp-lb.is-cold svg { width: 240px; height: 36px; }
.ro-temp-lb.is-cold path { stroke: url(#roColdG); stroke-width: 2; }
.ro-temp-lb.is-cold path:nth-child(2) { stroke: url(#roColdG); opacity: .65; stroke-width: 1.8; }
.ro-temp-lb.is-cold path:nth-child(3) { stroke: url(#roColdG); opacity: .4; stroke-width: 1.6; }
.ro-temp-lb.is-cold defs + path { opacity: 1; }
@media (max-width: 760px) { .ro-temp-lb.is-cold svg { width: 200px; height: 30px; } }
/* 안면홍조 — 열기: 점선·점 대신 아래 붉고 위로 사라지는 물결 김 3줄, 차례로 피어올라 흩어짐(10-13) */
.ro-heat path { stroke: url(#roHeatG); stroke-width: 3; stroke-dasharray: none; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: roRise 2.8s ease-out infinite; opacity: 0; }
.ro-heat path:nth-of-type(2) { animation-delay: .9s; animation-duration: 2.8s; }
.ro-heat path:nth-of-type(3) { animation-delay: 1.8s; }
@keyframes roRise { 0% { transform: translateY(8px) scaleY(.9); opacity: 0; } 30% { opacity: 1; } 75% { opacity: .7; } 100% { transform: translateY(-12px) scaleY(1.05); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ro-heat path { animation: none; opacity: .85; } }
/* 안면홍조 열기 크게 130×88 → 190×128(10-13) */
.ro-page .ro-temp-lb.is-hot { margin-bottom: 92px; }
.ro-heat { top: -86px; width: 190px; height: 128px; }
@media (max-width: 760px) { .ro-page .ro-temp-lb.is-hot { margin-bottom: 70px; } .ro-heat { top: -64px; width: 146px; height: 98px; } }
/* 안면홍조 '상열하한 — 몸의 온도 지도' 재디자인(10-13): 왼쪽 인체 실루엣(위 붉고 아래 파란 그라데이션, 머리 열기·발 냉기) + 번호 점 / 오른쪽 번호 달린 부위 줄 */
.ro-map2 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: center; }
.ro-body { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ro-body svg { display: block; width: 100%; max-width: 200px; height: auto; overflow: visible; }
.ro-body-lb { display: flex; align-items: baseline; gap: 8px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 18px; font-weight: 700; }
.ro-body-lb small { font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 600; }
.ro-body-lb.is-hot { color: #c0392f; } .ro-body-lb.is-cold { color: #3b6a9a; }
.ro-body-pt circle { fill: #fff; stroke: var(--t); stroke-width: 2.5; }
.ro-body-pt text { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; fill: var(--t); text-anchor: middle; }
.ro-map.is-v2 { padding-left: 0; gap: 10px; }
.ro-map.is-v2::before, .ro-map.is-v2::after { content: none; }
.ro-map.is-v2 li { grid-template-columns: 30px 104px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--t) 22%, #fff); }
.ro-map.is-v2 li::before { content: none; }
.ro-map-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--t); font-family: 'Poppins', sans-serif; font-size: 13px; font-style: normal; font-weight: 700; color: #fff; }
@media (max-width: 1100px) { .ro-map2 { grid-template-columns: 170px minmax(0, 1fr); gap: 22px; } }
@media (max-width: 760px) {
  .ro-map2 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ro-body { flex-direction: row; justify-content: center; gap: 14px; }
  .ro-body svg { max-width: 130px; }
  .ro-body-lb { flex-direction: column; align-items: center; gap: 2px; font-size: 16px; }
  .ro-map.is-v2 li { grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; padding: 14px; }
  .ro-map.is-v2 li p { grid-column: 2; }
  .ro-map-no { width: 26px; height: 26px; font-size: 12px; }
}
.ro-map.is-v2 li:last-child::after { content: none; }
.ro-page .ro-map.is-v2 { margin: 0; }
.ro-page .ro-map2 { margin: 30px 0 26px; }
/* 몸의 온도 지도 — 사이트 인체 실루엣(ans/body-silhouette.png)을 마스크로, 위 붉고 아래 파란 그라데이션 + 번호 점(10-13) */
.ro-body-fig { position: relative; width: 150px; aspect-ratio: 300 / 800; isolation: isolate; }
.ro-body-img { position: absolute; inset: 0; z-index: 1; background: linear-gradient(#e0695a, #d98a76 30%, #b9a0b4 55%, #6f9bd0); opacity: .85; -webkit-mask: url('/assets/images/ans/body-silhouette.png?v=1') center / contain no-repeat; mask: url('/assets/images/ans/body-silhouette.png?v=1') center / contain no-repeat; }
.ro-glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.ro-glow.is-hot { left: -10%; top: -6%; width: 120%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(224, 80, 63, .4), rgba(224, 80, 63, 0)); }
.ro-glow.is-cold { left: -20%; bottom: -5%; width: 140%; aspect-ratio: 3 / 1; background: radial-gradient(closest-side, rgba(63, 123, 189, .38), rgba(63, 123, 189, 0)); }
.ro-body-dot { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2.5px solid var(--t); border-radius: 50%; background: #fff; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-style: normal; font-weight: 700; color: var(--t); }
@media (max-width: 1100px) { .ro-body-fig { width: 128px; } }
@media (max-width: 760px) { .ro-body-fig { width: 104px; } .ro-body-dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10.5px; border-width: 2px; } }
/* 몸의 온도 지도 — 실루엣 키움 150→210, 번호 대신 색 점 + 공용 펄스(fpGtPulse, 0.4초 간격), 목록 표시도 색 점으로(10-13) */
.ro-map2 { grid-template-columns: 270px minmax(0, 1fr); }
.ro-body-fig { width: 210px; }
.ro-body-dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2.5px solid #fff; background: var(--t); --c: var(--t); box-shadow: 0 0 0 0 transparent; animation: fpGtPulse 2.4s ease-out infinite; }
.ro-body-dot:nth-of-type(2) { animation-delay: .4s; } .ro-body-dot:nth-of-type(3) { animation-delay: .8s; } .ro-body-dot:nth-of-type(4) { animation-delay: 1.2s; } .ro-body-dot:nth-of-type(5) { animation-delay: 1.6s; }
.ro-map-no { width: 14px; height: 14px; justify-self: center; }
.ro-map.is-v2 li { grid-template-columns: 22px 104px minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .ro-body-dot { animation: none; } }
@media (max-width: 1100px) { .ro-map2 { grid-template-columns: 200px minmax(0, 1fr); } .ro-body-fig { width: 160px; } }
@media (max-width: 760px) { .ro-map2 { grid-template-columns: minmax(0, 1fr); } .ro-body-fig { width: 130px; } .ro-body-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2px; } .ro-map.is-v2 li { grid-template-columns: 18px minmax(0, 1fr); } .ro-map-no { width: 12px; height: 12px; } }
.ro-body-dot.is-foot { animation-delay: 1.6s; }
/* 안면홍조 '몸의 온도 지도' — 인체 가운데, 점에서 연결선, 박스 없는 설명 글(10-13). 940×660 좌표 상자 위에 선(SVG)·글(%) 배치 */
.ro-tmap { position: relative; aspect-ratio: 940 / 660; margin: 34px 0 26px; }
.ro-tmap-ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ro-tmap-ln line { stroke-width: 1.3; stroke-dasharray: 4 3; opacity: .75; }
.ro-tmap-fig { position: absolute; left: 38.83%; top: 7.58%; width: 22.34%; margin: 0; }
.ro-tmap-fig .ro-body-fig { width: 100%; }
.ro-tmap-fig .ro-body-lb { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.ro-tmap-fig .ro-body-lb.is-hot { top: -42px; } .ro-tmap-fig .ro-body-lb.is-cold { bottom: -42px; }
.ro-tmap-lb { list-style: none; margin: 0; padding: 0; }
.ro-tmap-lb li { position: absolute; top: var(--ly); width: 29%; transform: translateY(-50%); }
.ro-tmap-lb li.is-l { text-align: right; }
.ro-tmap-lb li > b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 700; color: var(--t); word-break: keep-all; }
.ro-tmap-lb p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.ro-tmap-lb p b { color: var(--t); font-weight: 700; }
@media (max-width: 900px) {
  .ro-tmap { aspect-ratio: auto; display: grid; gap: 22px; }
  .ro-tmap-ln { display: none; }
  .ro-tmap-fig { position: relative; left: auto; top: auto; width: 140px; margin: 40px auto; }
  .ro-tmap-lb { display: grid; gap: 14px; }
  .ro-tmap-lb li, .ro-tmap-lb li.is-l { position: relative; top: auto; left: auto !important; right: auto !important; width: auto; transform: none; padding-left: 22px; text-align: left; }
  .ro-tmap-lb li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--t); }
  .ro-tmap-lb li > b { font-size: 16px; }
}
/* 안면홍조 '수승화강 — 열이 얼굴에 머무는 길' 재디자인(10-13): 水(파랑)·火(빨강) 화살표 도해 카드 + 갈래(홍조·지루성) 괄호 연결 */
.ro-sf { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 40px minmax(0, 1.05fr) 40px minmax(0, 1fr); align-items: center; margin: 30px 0 20px; }
.ro-sf-n { position: relative; padding: 30px 18px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 12px 28px -24px rgba(60, 30, 30, .4); }
.ro-sf-n > .ac-pill { position: absolute; top: 0; left: 14px; transform: translateY(-50%); margin: 0; padding: 5px 11px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; }
.ro-sf-ico { display: block; width: 92px; height: 50px; margin: 2px 0 10px; overflow: visible; }
.ro-sf-ico text { font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 17px; font-weight: 700; }
.ro-sf-n > b { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.ro-sf-n > p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.ro-sf-n.is-brk { background: color-mix(in srgb, var(--c) 4%, #fff); }
.ro-sf-n.is-brk > b { color: var(--c); }
.ro-sf-n.is-trt { background: var(--c); border-color: var(--c); }
.ro-sf-n.is-trt > .ac-pill { background: #fff; color: var(--c); }
.ro-sf-n.is-trt > b, .ro-sf-n.is-trt > p { color: #fff; }
.ro-sf-n.is-trt .ro-sf-ico text { fill: #fff; }
.ro-sf-fork { position: relative; display: grid; gap: 30px; }
.ro-sf-fork::before, .ro-sf-fork::after { content: ""; position: absolute; top: 25%; bottom: 25%; width: 14px; border: 1.5px solid #cdbcbf; }
.ro-sf-fork::before { left: -22px; border-right: 0; } .ro-sf-fork::after { right: -22px; border-left: 0; }
.ro-sf-n.is-br { overflow: hidden; background: color-mix(in srgb, var(--c) 5%, #fff); }
.ro-sf-n.is-br > em { position: absolute; right: 10px; bottom: -14px; font-family: 'Noto Serif KR', 'Noto Serif SC', serif; font-size: 64px; font-style: normal; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--c) 14%, #fff); }
.ro-sf-n.is-br > b { color: var(--c); }
.ro-sf-n.is-br > p { position: relative; }
.ro-sf-ar { display: block; height: 16px; background: linear-gradient(#b9aaac, #b9aaac) center / calc(100% - 8px) 1.5px no-repeat; position: relative; }
.ro-sf-ar::after { content: ""; position: absolute; right: 3px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1.5px solid #b9aaac; border-right: 1.5px solid #b9aaac; transform: rotate(45deg); }
.ro-sf > .ro-sf-ar:nth-of-type(2), .ro-sf > .ro-sf-ar:nth-of-type(3) { margin: 0 6px; }
@media (max-width: 1100px) {
  .ro-sf { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ro-sf-ar { width: 16px; height: 34px; margin: 0 auto !important; background: linear-gradient(#b9aaac, #b9aaac) center / 1.5px calc(100% - 8px) no-repeat; }
  .ro-sf-ar::after { right: auto; left: 50%; top: auto; bottom: 3px; margin: 0 0 0 -4px; transform: rotate(135deg); }
  .ro-sf-fork { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ro-sf-fork::before, .ro-sf-fork::after { content: none; }
}
@media (max-width: 560px) { .ro-sf-fork { grid-template-columns: minmax(0, 1fr); gap: 30px; } .ro-sf-n { padding: 28px 16px 16px; } }
.ro-sf-n.is-br { overflow: visible; }
.ro-sf-n.is-br > em { bottom: 8px; right: 12px; font-size: 54px; z-index: 0; }
.ro-sf-n.is-br > b, .ro-sf-n.is-br > p { position: relative; z-index: 1; }
@media (max-width: 560px) { .ro-sf-fork { gap: 34px; } }
/* 자율신경실조증 '흐르는 상태 / 막힌 상태' — 글자가 박힌 이미지 대신 코딩 인포그래픽(10-13). 인체 실루엣(ans/body-silhouette.png) 마스크 + SVG 화살표·지시선 + HTML 글(번역 가능) */
.ad-ib { padding: 26px 16px 18px; background: #fff; text-align: center; }
.ad-ib-k { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: #8a918e; }
.ad-ib-t { margin: 6px 0 4px; font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.ad-ib-s { margin: 0 0 6px; font-size: 14.5px; color: #4f5a57; word-break: keep-all; }
.ad-ib-s::after { content: ""; display: block; width: 34px; height: 3px; margin: 12px auto 0; border-radius: 2px; }
.is-ok .ad-ib-t { color: #1f4652; } .is-ok .ad-ib-s::after { background: #6db7cc; }
.is-ng .ad-ib-t { color: #8a4a3c; } .is-ng .ad-ib-s::after { background: #e8a294; }
.ad-ib-stage { position: relative; aspect-ratio: 400 / 440; margin: 4px 0 6px; text-align: left; }
.ad-ib-body { position: absolute; left: 33%; top: 9.09%; width: 34%; aspect-ratio: 300 / 800; -webkit-mask: url('/assets/images/ans/body-silhouette.png?v=1') center / contain no-repeat; mask: url('/assets/images/ans/body-silhouette.png?v=1') center / contain no-repeat; }
.is-ok .ad-ib-body { background: radial-gradient(ellipse 36% 7.5% at 50% 10.5%, rgba(110, 185, 205, .8), rgba(110, 185, 205, 0)), radial-gradient(ellipse 50% 12% at 50% 42%, rgba(236, 128, 82, .72), rgba(240, 140, 95, 0)), #fbe2cf; }
.is-ng .ad-ib-body { background: radial-gradient(ellipse 52% 12% at 50% 25%, rgba(232, 95, 75, .5), rgba(232, 95, 75, 0)), linear-gradient(#ee8a73 0%, #f2ad97 26%, #f3ece3 46%, #b8dae7 66%, #82c0d9 100%); }
.ad-ib-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ad-ib-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ad-ib-svg .is-up { stroke: #2a8fae; stroke-width: 8; }
.ad-ib-svg .is-dn { stroke: #e2774f; stroke-width: 8; }
.ad-ib-svg .is-hot { stroke: #d9614b; stroke-width: 7; }
.ad-ib-svg .ad-ib-ld { stroke: #c9bdb6; stroke-width: 1.2; }
.ad-ib-heat path { stroke: #d9614b; stroke-width: 2.6; }
.ad-ib-snow text { fill: #5aa9c8; font-size: 22px; text-anchor: middle; }
.ad-ib-cl { position: absolute; width: 24%; margin: 0; }
.ad-ib-cl i { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 6px; border-radius: 50%; font-style: normal; font-size: 14px; font-weight: 700; }
.ad-ib-cl b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; word-break: keep-all; }
.ad-ib-cl span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: #5d6563; word-break: keep-all; }
.ad-ib-cl.is-cool i { background: #e3f1f5; color: #2a8fae; } .ad-ib-cl.is-cool b { color: #2a8fae; }
.ad-ib-cl.is-warm i { background: #fcebe3; color: #e2774f; } .ad-ib-cl.is-warm b { color: #d0663f; }
.ad-ib-cl.is-hot i { background: #fbe8e3; color: #d9614b; } .ad-ib-cl.is-hot b { color: #c4533e; }
.ad-ib-cl.is-cold i { background: #e3f1f5; color: #3d93b6; } .ad-ib-cl.is-cold b { color: #2e86a8; }
.ad-ib-box { margin: 6px 0 0; padding: 14px 12px; border-radius: 0; font-size: 15.5px; font-weight: 800; word-break: keep-all; }
.is-ok .ad-ib-box { background: #eef6f6; color: #2f6a74; } .is-ng .ad-ib-box { background: #fbf1ee; color: #a1503f; }
.ad-ib-note { margin: 10px 0 0; font-size: 12.5px; color: #8a918e; word-break: keep-all; }
@media (min-width: 700px) and (max-width: 1100px) { .ad-ib-cl b { font-size: 13.5px; } .ad-ib-cl span { font-size: 12px; } .ad-ib-t { font-size: 23px; } }
@media (max-width: 560px) { .ad-ib { padding: 22px 12px 14px; } .ad-ib-t { font-size: 24px; } .ad-ib-cl b { font-size: 14px; } .ad-ib-cl span { font-size: 12px; } .ad-ib-cl i { width: 22px; height: 22px; font-size: 12px; } }
/* 자율신경 인포그래픽 — 인체 키움(폭 34→40%), 무대 400×470(10-13) */
.ad-ib-stage { aspect-ratio: 400 / 470; }
.ad-ib-body { left: 30%; top: 4.68%; width: 40%; }
/* 자율신경 인포그래픽 — 인체 더 키움(폭 46%), 무대 400×520, 옆 설명 폭 22%(10-13) */
.ad-ib-stage { aspect-ratio: 400 / 520; }
.ad-ib-body { left: 27%; top: 3.46%; width: 46%; }
.ad-ib-cl { width: 22%; }
/* 자율신경 인포그래픽 — '한의학으로 살펴보는 몸의 균형'을 박스 상단에 걸친 알약 라벨로(10-13) */
.ad-infog { padding-top: 16px; }
.ad-infog figure:has(.ad-ib) { position: relative; overflow: visible; }
.ad-infog figure:has(.ad-ib) > .ad-ib { border-radius: 18px 18px 0 0; }
.ad-ib-k { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; padding: 6px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; color: #fff; white-space: nowrap; }
.is-ok .ad-ib-k { background: #2a8fae; } .is-ng .ad-ib-k { background: #c4533e; }
.ad-ib-t { margin-top: 10px; }
@media (max-width: 699px) { .ad-infog { gap: 34px; } }
.ad-ib-stage { margin-top: 26px; }
.is-ng .ad-ib-s::after { visibility: hidden; }
/* 자율신경 인포그래픽 — 부제 아래 짧은 가로선 제거(10-13) */
.ad-ib-s::after { display: none; }
/* 자율신경 인포그래픽 — 인체를 가로로 약 22% 늘림(높이 유지, 실루엣 마스크 늘려 채움)(10-13) */
.ad-ib-body { left: 22%; width: 56%; aspect-ratio: auto; height: 94.36%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* 자율신경 인포그래픽 화살표 가늘게(10-13) */
.ad-ib-svg .is-up, .ad-ib-svg .is-dn { stroke-width: 5.5; }
.ad-ib-svg .is-hot { stroke-width: 5; }

/* 자율신경 인포그래픽 외곽 박스 각진 모서리 (10-13) */
.ad-infog figure, .ad-infog figure:has(.ad-ib) > .ad-ib { border-radius: 0; }

/* 왼쪽 설명은 오른쪽 정렬 - 글 끝이 연결선 시작점(8단위 앞)에 붙도록 (10-14) */
.ad-ib-cl.is-l { text-align: right; }
.ad-ib-cl.is-l i { margin-left: auto; }

/* 상열하한 열기 = 주사피부염(ro-heat)과 같은 그라데이션 피어오름, 머리와 겹치게 (10-14) */
.ad-ib-heat.is-rise path { stroke: url(#adHeatG); stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: roRise 2.8s ease-out infinite; opacity: 0; }
.ad-ib-heat.is-rise path:nth-of-type(2) { animation-delay: .9s; }
.ad-ib-heat.is-rise path:nth-of-type(3) { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .ad-ib-heat.is-rise path { animation: none; opacity: .85; } }
.ad-ib-heat.is-rise path { stroke-width: 6; }
.ad-ib-heat.is-rise path { stroke-width: 4.5; }

/* 소제목-인체 간격 좁힘 (10-14) */
.ad-ib-stage { margin-top: -14px; }
.ad-ib-s { margin-bottom: 0; }
@media (max-width: 699px) { .ad-ib-stage { margin-top: 0; } }

/* 치료 전후 — 정사각에 가까운 원본(매선·흉살, 점선 원 표시)은 잘리지 않게 (10-14) */
.ba.is-sq .ba-img { aspect-ratio: 21 / 20; }

/* 치료 전후 안내문 — PC(2단)는 왼쪽 제목 아래, 1단(≤899)은 사진 아래 (10-14) */
.ba-note.is-m { display: none; }
@media (max-width: 899px) { .ba-note.is-pc { display: none; } .ba-note.is-m { display: block; } }

/* 치료 전후 캡션 — 부위 설명은 오른쪽 끝 (10-14) */
.ba-cap span { margin-left: auto; text-align: right; }

/* 피부·뷰티센터 하위 페이지 eyebrow(영문 소제목) 색 통일 = 흉살클리닉 #9a586e (10-14) */
.lf-page .hx-eyebrow, .ro-page .hx-eyebrow, .pm-page .hx-eyebrow, .ae-page .hx-eyebrow, .as-page .hx-eyebrow, .hr-page .hx-eyebrow { color: #9a586e; }
.ba-foot { margin-top: 40px; }
@media (max-width: 760px) { .ba-foot { margin-top: 32px; } }
.ba-more { font-size: 16.5px; padding: 12px 26px; }
.ba-more::after { font-size: 19px; }
.ba .ba-more { border-color: #9a586e; color: #9a586e; }
.ba .ba-more:hover { background: #9a586e; color: #fff; }
.ba .ba-img.is-after .ba-tag { background: #9a586e; }

/* 페이지 주제와 같은 라벨(흉살·매선 등)을 뺀 캡션 — 부위만 왼쪽에 (10-14) */
.ba-cap span:only-child { margin-left: 0; text-align: left; font-size: 15px; font-weight: 500; color: var(--tg-ink); }
.ba-cap span:only-child { flex: 1 1 100%; text-align: center; }
.ba-cap span:only-child { font-size: 16.5px; }

/* ══ 10-14 치료 전후 카드 = A안(걸친 알약): 카드 테두리·흰 캡션 칸 없음, 부위 이름은 사진 아래 경계에 걸친 알약.
      BEFORE/AFTER 는 알약과 구분되게 모서리에 붙은 각진 라벨 ══ */
.ba .ba-list { gap: 40px 18px; }
.ba .ba-case { background: none; border: 0; box-shadow: none; }
.ba .ba-cap { display: block; padding: 0; text-align: center; position: relative; z-index: 1; }
.ba .ba-cap > :first-child { display: inline-block; max-width: 92%; margin: -18px 0 0; padding: 7px 20px; border: 1px solid #9a586e; border-radius: 999px; background: #fff; color: #9a586e; font-size: 15.5px; font-weight: 600; line-height: 20px; text-align: center; word-break: keep-all; flex: none; }
.ba .ba-cap > span:not(:first-child) { display: block; margin: 7px 0 0; font-size: 14px; color: var(--tg-body); text-align: center; }
.ba .ba-tag { left: 0; top: 0; padding: 6px 11px; border-radius: 0; font-size: 11px; letter-spacing: .14em; background: rgba(40, 46, 44, .86); }
.ba .ba-img.is-after .ba-tag { background: #9a586e; }
@media (max-width: 760px) { .ba .ba-list { gap: 36px; } .ba .ba-cap > :first-child { font-size: 15px; } .ba .ba-tag { padding: 5px 9px; font-size: 10.5px; } }
/* 알약은 부위 라벨에만 — 더 보기 버튼은 각진 버튼으로 (10-14) */
.ba .ba-more { border-radius: 0; padding: 13px 30px; }
.ba .ba-cap { margin-top: -18px; line-height: 1; }
.ba .ba-cap > :first-child { margin: 0; vertical-align: top; }

/* ══ 10-14 안면홍조 수승화강 흐름 = 자율신경 인체 도해(.ad-ib) 재사용 + 홍조·지루성 갈래 + 치료 띠 ══ */
.ad-ib-cl.is-flush i { background: #f8e3e5; color: #c0474f; } .ad-ib-cl.is-flush b { color: #c0474f; }
.ad-ib-cl.is-seb i { background: #f5ecdd; color: #a8742a; } .ad-ib-cl.is-seb b { color: #a8742a; }
.ro-ib .ad-ib-cl i { font-family: 'Noto Serif KR', serif; }
.ro-ib-trt { position: relative; margin: 40px 0 0; padding: 30px 24px 22px; background: #b2525e; color: #fff; text-align: center; }
.ro-ib-trt .ac-pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; background: #fff; color: #b2525e; border: 1px solid #b2525e; white-space: nowrap; }
.ro-ib-trt b { display: block; font-size: 19px; font-weight: 700; line-height: 1.4; color: #fff; }
.ro-ib-trt p { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .92); word-break: keep-all; }
@media (max-width: 760px) { .ro-ib-trt { padding: 28px 18px 18px; } .ro-ib-trt b { font-size: 16px; } .ro-ib-trt p { font-size: 14px; } }
/* 인체 도해 설명 — top 값 = 둘째 줄(span) 가운데. 글씨 크기가 화면마다 달라도 연결선 높이에 맞도록 아래쪽 기준으로 (10-14) */
.ad-ib-cl { transform: translateY(calc(-100% + 9.5px)); }
@media (max-width: 560px) { .ad-ib-cl { transform: translateY(calc(-100% + 8.7px)); } }
@media (min-width: 700px) and (max-width: 1100px) { .ad-ib-cl { transform: translateY(calc(-100% + 8.7px)); } }
/* 10-14 B안: 온도 지도를 상열하한 도해에 합침 — 부위별 설명 색(옛 온도 지도 색 유지) + 부위 점 */
.ad-ib-cl.is-chest i { background: #fcebdf; color: #e8742f; } .ad-ib-cl.is-chest b { color: #d0632a; }
.ad-ib-cl.is-neck i { background: #f8efd9; color: #b07d12; } .ad-ib-cl.is-neck b { color: #a8790f; }
.ad-ib-cl.is-belly i { background: #f0e9f6; color: #8a5fae; } .ad-ib-cl.is-belly b { color: #7d52a1; }
.ro-ib .ad-ib-cl.is-cold i { background: #e4eef8; color: #2f6fb3; } .ro-ib .ad-ib-cl.is-cold b { color: #2f6fb3; }
.ad-ib-pt circle { stroke: #fff; stroke-width: 1.5; }
/* 안면홍조 수승화강·상열하한 도해 — 설명이 많아 좁은 2단(1199 이하)에서는 위아래로 */
@media (max-width: 1199px) { .ad-infog.ro-ib { grid-template-columns: minmax(0, 1fr); gap: 40px; } .ad-infog.ro-ib figure { width: 100%; max-width: 480px; margin: 0 auto; } }
.ad-ib-svg .is-up, .ad-ib-svg .is-dn { stroke-width: 4.3; }
.ad-ib-svg .is-hot { stroke-width: 4; }
/* 안면홍조 자율신경 불편 5번째 칸 — 다른 칸과 같은 폭으로 가운데 (10-14) */
@media (min-width: 761px) { .ro-sig li:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); } }
/* ↑ 취소: 5개를 2열에 넣으면 한 칸이 남음 → PC는 5칸 한 줄(아이콘 위·글 아래), 좁은 폭은 1열 (10-14) */
@media (min-width: 761px) { .ro-sig li:last-child { grid-column: auto; justify-self: stretch; width: auto; } }
@media (min-width: 761px) and (max-width: 1199px) { .ro-sig { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) {
  .ro-sig { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .ro-sig li { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 12px; padding: 22px 12px 20px; text-align: center; }
  .ro-sig-ico { width: 44px; height: 44px; }
  .ro-sig p { font-size: 15px; line-height: 1.5; }
}
/* 안면홍조 원고 순서로 재배치(10-14) — 옮겨진 블록 간격 유지 */
#ro-root .ro-rx { margin-top: 32px; }
#ro-tri3 .ro-blood { margin-top: 34px; }
#ro-root .ro-sig { margin-top: 4px; }
/* 삼중사혈 흐름 설명 — PC(2단)는 왼쪽 제목 아래, 1단(≤899)은 카드 아래 (10-14) */
.ro-tri-cap.is-m { display: none; }
#ro-tri3 .hx-split-hd .ro-tri-cap { margin-top: 18px; font-size: 15px; }
@media (max-width: 899px) { .ro-tri-cap.is-pc { display: none; } .ro-tri-cap.is-m { display: block; } }
/* 삼중사혈 순서 번호 — 알약에서 빼고 카드 하단 워터마크로 (10-14) */
.ro-tri .ro-tri-no { top: auto; bottom: 6px; right: 14px; z-index: 0; font-family: "Poppins", sans-serif; font-size: 64px; font-weight: 700; letter-spacing: -.02em; opacity: .09; }
.ro-tri > li > :not(.ro-tri-no):not(.ac-pill) { position: relative; z-index: 1; }
/* 삼중사혈 흐름 설명 — 위 구분선 + 페이지 색 옅은 바탕 (10-14) */
.ro-tri-cap { padding: 18px 22px; background: #fbf1f2; border-top: 1px solid color-mix(in srgb, #b2525e 55%, #fff); }
#ro-tri3 .hx-split-hd .ro-tri-cap { margin-top: 22px; }
#ro-tri3 .hx-split-bd .ro-tri-cap { margin-top: 26px; }
/* 안면홍조 교감단 카드 — 제품 사진 (10-14) */
.ro-rx-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; align-items: center; }
.ro-rx-row .dj-dl { margin-top: 0; }
.ro-rx-pic { margin: 0; padding: 18px 10px; background: radial-gradient(ellipse 60% 55% at 50% 55%, color-mix(in srgb, var(--c) 12%, #fff), #fff 72%); }
.ro-rx-pic img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; filter: drop-shadow(0 14px 18px rgba(40, 30, 50, .16)); }
@media (min-width: 1100px) { .ro-rx-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; } }
/* 안면홍조 도해 캡션 — 문장 속 굵은 글씨가 제목 스타일(flex 블록)을 물려받아 줄이 끊기던 것 (10-14) */
.ad-infog figcaption span b { display: inline; gap: 0; font-size: inherit; font-weight: 600; line-height: inherit; color: var(--tg-ink); }
.ro-ib figcaption { padding-top: 16px; }
.ro-ib figcaption span { margin-top: 0; }
/* 안면홍조 '함께 쓰는 치료' 아코디언 = 항노화(lf-txs)와 같은 디자인: 큰 워터마크 번호 (10-14) */
.ro-txs .jg-case-no { width: 92px; flex: 0 0 92px; font-size: 64px; font-weight: 700; opacity: .16; letter-spacing: -.03em; }
.ro-txs .jg-case > :not(summary) { margin-left: 24px; margin-right: 24px; }
.ro-txs .jg-case > :last-child:not(summary) { margin-bottom: 22px; }
.ro-txs .dj-tx-p b { color: var(--tg-ink); }
@media (max-width: 760px) { .ro-txs .jg-case-no { width: 64px; flex-basis: 64px; font-size: 46px; } .ro-txs .jg-case > :not(summary) { margin-left: 16px; margin-right: 16px; } }
/* 안면홍조 리드 문장 속 홍조·지루성 알약 — 문단 굵은 글씨 색을 이겨 흰 글씨로 (10-14) */
.ro-page .ta-lede b.ro-k, .ro-page .ta-lede .ro-k { color: #fff; }
/* 안면홍조 STEP2 안내 카드 — fp-warn 위 여백(36px) 때문에 옆 카드보다 낮던 것, 높이 맞춤 (10-14) */
.ro-page .ro-skin > li.ro-skin-note { margin-top: 0; }
#ro-step1 .ro-txs-cap { margin-top: 26px; }
#pm-seq .hx-split-bd .pm-seq { margin-top: 30px; }
/* 색소 SEQUENCE 안내 — PC 왼쪽 제목 아래, 1단(≤899)은 카드 아래 (10-14) */
.pm-seq-note.is-m { display: none; }
@media (max-width: 899px) { .pm-seq-note.is-pc { display: none; } .pm-seq-note.is-m { display: block; margin-top: 26px; } }
/* 색소 '돌아오는 세 가지 흐름' 아이콘 — 원 없는 마스크 (10-14) */
.pm-page .pm-ico3 .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.pm-page .pm-ico3 .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
.pm-page .pm-ico3 .fp-why-hd h3 { margin: 0; }
@media (max-width: 560px) { .pm-page .pm-ico3 .fp-why-ico, .pm-page .pm-ico3 .fp-why-ico::before { width: 40px; height: 40px; } }
/* 첫 아이콘(가로로 긴 모양)은 칸을 넓혀 다른 아이콘과 무게를 맞춤 */
.pm-page .pm-ico3 > li:first-child .fp-why-ico, .pm-page .pm-ico3 > li:first-child .fp-why-ico::before { width: 70px; }
@media (max-width: 560px) { .pm-page .pm-ico3 > li:first-child .fp-why-ico, .pm-page .pm-ico3 > li:first-child .fp-why-ico::before { width: 62px; } }
/* 첫 아이콘 교체(정사각) — 넓힌 칸 되돌림 */
.pm-page .pm-ico3 > li:first-child .fp-why-ico, .pm-page .pm-ico3 > li:first-child .fp-why-ico::before { width: 46px; }
@media (max-width: 560px) { .pm-page .pm-ico3 > li:first-child .fp-why-ico, .pm-page .pm-ico3 > li:first-child .fp-why-ico::before { width: 40px; } }
/* 색소 — 오른쪽 첫 소제목 높이를 왼쪽 큰 제목(h2)과 맞춤, 2단일 때만 (10-14) */
@media (min-width: 900px) { .pm-page .hx-split-bd > .ta-sub.is-first { margin-top: 29px; } }
/* ══ 10-14 색소 '그래서 순서를 바꿉니다' = C안 진행 막대: 앞 두 칸 옅은 준비, 마지막 칸 진한 치료, 알약은 막대에 걸침 ══ */
.pm-bar { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-bar > li { position: relative; padding: 0 18px 0 0; }
.pm-bar-seg { position: relative; display: block; height: 14px; background: color-mix(in srgb, var(--c) 26%, #fff); }
.pm-bar > li + li .pm-bar-seg { border-left: 3px solid #fff; }
.pm-bar > li { padding-right: 0; }
.pm-bar > li > b, .pm-bar > li > span:not(.ac-pill) { padding-right: 18px; }
.pm-bar > li.is-then .pm-bar-seg { background: var(--c); margin-right: 12px; }
.pm-bar > li.is-then .pm-bar-seg::after { content: ""; position: absolute; right: -12px; top: -4px; border-left: 12px solid var(--c); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.pm-bar .ac-pill { top: 7px; left: 12px; background: var(--c); }
.pm-bar > li > b { display: block; margin-top: 26px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.pm-bar > li.is-then > b { color: var(--c); }
.pm-bar > li > span:not(.ac-pill) { display: block; margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 760px) {
  .pm-bar { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pm-bar > li + li .pm-bar-seg { border-left: 0; }
  .pm-bar > li > b { margin-top: 24px; font-size: 16px; }
  .pm-bar > li > span:not(.ac-pill) { font-size: 14.5px; }
}
/* 색소 리드 — 가로로 긴 설명 그림이라 그림 칸을 넓힘 (10-14) */
@media (min-width: 900px) { .pm-page .hx-lead { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; } }
/* 색소 진단 — 야누스 장비 이미지 키움 (10-14) */
.pm-page .pm-janus-pic img { max-width: 420px; width: 100%; margin: 0 auto; }
@media (max-width: 760px) { .pm-page .pm-janus-pic img { max-width: 300px; } }
/* 색소 광원별 촬영 — 화살표를 사진 밖 가장자리(반쯤 걸침)로, 사진을 가리지 않게 (10-14) */
.pm-shots-stage { position: relative; }
@media (min-width: 761px) {
  .pm-shots-btn { width: 44px; height: 44px; }
  .pm-shots-btn.is-prev { left: -22px; } .pm-shots-btn.is-next { right: -22px; }
  .pm-shots-btn svg { width: 20px; height: 20px; }
}
/* 광원 라벨 — 번호 빼고 글씨 키움 (10-14) */
.pm-shots-lab li { font-size: 16.5px; padding: 13px 8px; }
@media (max-width: 760px) { .pm-shots-lab li { font-size: 14.5px; padding: 10px 2px; } }
/* 진단 — 수정된 야누스 이미지(세로형)는 원래 비율대로 (10-14) */
.pm-page .pm-janus-pic img { aspect-ratio: auto; height: auto; }
/* 회복 섹션 인물 사진 — 크기를 맞춰 준 원본 비율 그대로, 잘리지 않게 (10-14) */
.pm-page figure.pm-portrait, .pm-page figure.pm-portrait img { aspect-ratio: auto; height: auto; }
.pm-page figure.pm-portrait img { object-fit: contain; }
.pm-page figure.pm-portrait { max-width: 300px; }
@media (max-width: 760px) { .pm-page figure.pm-portrait { max-width: 260px; } }
/* 인물 사진 — 폭은 칸에 맞추고 높이만 줄임(4:3, 얼굴 기준 자르기) */
.pm-page figure.pm-portrait { max-width: none; }
.pm-page figure.pm-portrait img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 760px) { .pm-page figure.pm-portrait { max-width: none; } }
.pm-page figure.pm-portrait img { aspect-ratio: 1 / 1; object-position: 50% 25%; }
/* ══ 10-14 색소 '스킨부스터 전달 도구' — 밋밋한 3칸 → 걸친 알약 + 피부층 단면 미니 도해(바늘·성분·고주파) ══ */
.pm-tools2 { list-style: none; margin: 18px 0 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 18px; }
.pm-tools2 > li { position: relative; display: flex; flex-direction: column; padding: 30px 20px 18px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.pm-tools2 .ac-pill { background: var(--c); }
.pm-tools2-fig { display: block; width: 100%; height: auto; margin: 0 0 14px; overflow: visible; }
.pm-tools2-fig .ep { fill: #f4dccd; } .pm-tools2-fig .de { fill: #fbeee6; }
.pm-tools2-fig text { font-size: 8.5px; fill: #a08676; font-weight: 600; }
.pm-tools2-fig .nd { stroke: color-mix(in srgb, var(--c) 80%, #000); stroke-width: 1.6; stroke-linecap: round; }
.pm-tools2-fig .dt { fill: var(--c); opacity: .75; }
.pm-tools2-fig .ht { fill: #f08a4b; opacity: .35; }
.pm-tools2 > li > b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--c); }
.pm-tools2 > li > p { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: var(--tg-body); word-break: keep-all; }
.pm-tools2 > li > p b { color: var(--tg-ink); }
.pm-tools2 > li > em { align-self: flex-start; margin-top: auto; padding-top: 14px; font-style: normal; }
.pm-tools2 > li > em::before { content: ""; }
.pm-tools2 > li > em { display: inline-block; }
.pm-tools2 > li > em { font-size: 13px; font-weight: 600; color: var(--c); }
.pm-tools2 > li > em { background: linear-gradient(color-mix(in srgb, var(--c) 12%, #fff), color-mix(in srgb, var(--c) 12%, #fff)) left bottom / 100% 0 no-repeat; }
@media (max-width: 1099px) and (min-width: 761px) { .pm-tools2 { grid-template-columns: minmax(0, 1fr); } .pm-tools2 > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; } .pm-tools2-fig { grid-row: span 3; margin: 0; } }
@media (max-width: 760px) { .pm-tools2 { grid-template-columns: minmax(0, 1fr); } .pm-tools2 > li { padding: 28px 16px 16px; } .pm-tools2-fig { max-width: 260px; } }
/* 진피 색소 = 더 짙고 크게(속기미가 더 짙고 오래 남는다는 문장과 맞춤), 가장자리만 살짝 번짐 (10-14) */
.pm-page .is-der .pm-depth-layer { background:
  radial-gradient(circle at 70% 38%, rgba(62, 36, 22, .95) 0 10px, rgba(62, 36, 22, 0) 15px),
  radial-gradient(circle at 87% 70%, rgba(62, 36, 22, .9) 0 8px, rgba(62, 36, 22, 0) 13px),
  radial-gradient(circle at 60% 78%, rgba(70, 42, 26, .88) 0 7px, rgba(70, 42, 26, 0) 11px),
  radial-gradient(circle at 90% 30%, rgba(70, 42, 26, .8) 0 5px, rgba(70, 42, 26, 0) 9px),
  #efd6cc; }
/* 표피/진피 행 — 라벨과 설명을 한 줄로(라벨 앞, 설명 뒤, 세로 가운데) (10-14) */
.pm-page .pm-depth-txt { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.pm-page .pm-depth-txt .ac-pill { position: static; flex: none; transform: none; }
@media (max-width: 760px) { .pm-page .pm-depth-txt { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; } }
/* 라벨이 표피/진피 그림 칸 경계에 걸치게 (PC·태블릿) (10-14) */
@media (min-width: 761px) {
  .pm-page .pm-depth-txt { position: relative; display: block; padding: 22px 24px 22px 92px; align-self: center; }
  .pm-page .pm-depth-row { align-items: stretch; }
  .pm-page .pm-depth-txt { display: flex; align-items: center; }
  .pm-page .pm-depth-txt .ac-pill { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
}
/* 라벨이 가운데 걸치므로 색소 점은 위·아래로 비켜 배치 (PC·태블릿) */
@media (min-width: 761px) {
  .pm-page .is-epi .pm-depth-layer { background:
    radial-gradient(circle at 66% 20%, #9c6a40 0 4px, transparent 5px),
    radial-gradient(circle at 88% 24%, #a8794c 0 3px, transparent 4px),
    radial-gradient(circle at 74% 82%, #8a5a34 0 5px, transparent 6px),
    radial-gradient(circle at 92% 78%, #9c6a40 0 3px, transparent 4px),
    #f7ebdf; }
  .pm-page .is-der .pm-depth-layer { background:
    radial-gradient(circle at 70% 21%, rgba(62, 36, 22, .95) 0 9px, rgba(62, 36, 22, 0) 14px),
    radial-gradient(circle at 90% 18%, rgba(70, 42, 26, .8) 0 5px, rgba(70, 42, 26, 0) 9px),
    radial-gradient(circle at 76% 84%, rgba(62, 36, 22, .9) 0 8px, rgba(62, 36, 22, 0) 13px),
    radial-gradient(circle at 93% 80%, rgba(70, 42, 26, .88) 0 6px, rgba(70, 42, 26, 0) 10px),
    #efd6cc; }
}
/* 표피/진피 그림 칸 넓힘 180 → 250px (PC·태블릿) */
@media (min-width: 761px) { .pm-page .pm-depth-row { grid-template-columns: 250px minmax(0, 1fr); } }
/* 라벨은 그림 칸에 살짝만(약 24px) 걸치게 */
@media (min-width: 761px) { .pm-page .pm-depth-txt { padding-left: 128px; } .pm-page .pm-depth-txt .ac-pill { transform: translate(-24px, -50%); } }
/* 점 위치는 처음 배치로 되돌림(사용자 선호) — 진피 점의 짙은 색은 유지 */
@media (min-width: 761px) {
  .pm-page .is-epi .pm-depth-layer { background:
    radial-gradient(circle at 64% 30%, #9c6a40 0 4px, transparent 5px),
    radial-gradient(circle at 78% 62%, #8a5a34 0 5px, transparent 6px),
    radial-gradient(circle at 88% 28%, #a8794c 0 3px, transparent 4px),
    radial-gradient(circle at 70% 80%, #9c6a40 0 3px, transparent 4px),
    #f7ebdf; }
  .pm-page .is-der .pm-depth-layer { background:
    radial-gradient(circle at 70% 38%, rgba(62, 36, 22, .95) 0 10px, rgba(62, 36, 22, 0) 15px),
    radial-gradient(circle at 87% 70%, rgba(62, 36, 22, .9) 0 8px, rgba(62, 36, 22, 0) 13px),
    radial-gradient(circle at 60% 78%, rgba(70, 42, 26, .88) 0 7px, rgba(70, 42, 26, 0) 11px),
    radial-gradient(circle at 90% 30%, rgba(70, 42, 26, .8) 0 5px, rgba(70, 42, 26, 0) 9px),
    #efd6cc; }
}
/* 점 전체를 왼쪽으로 조금 이동(약 12%p) */
@media (min-width: 761px) {
  .pm-page .is-epi .pm-depth-layer { background:
    radial-gradient(circle at 52% 30%, #9c6a40 0 4px, transparent 5px),
    radial-gradient(circle at 66% 62%, #8a5a34 0 5px, transparent 6px),
    radial-gradient(circle at 76% 28%, #a8794c 0 3px, transparent 4px),
    radial-gradient(circle at 58% 80%, #9c6a40 0 3px, transparent 4px),
    #f7ebdf; }
  .pm-page .is-der .pm-depth-layer { background:
    radial-gradient(circle at 58% 38%, rgba(62, 36, 22, .95) 0 10px, rgba(62, 36, 22, 0) 15px),
    radial-gradient(circle at 75% 70%, rgba(62, 36, 22, .9) 0 8px, rgba(62, 36, 22, 0) 13px),
    radial-gradient(circle at 48% 78%, rgba(70, 42, 26, .88) 0 7px, rgba(70, 42, 26, 0) 11px),
    radial-gradient(circle at 78% 30%, rgba(70, 42, 26, .8) 0 5px, rgba(70, 42, 26, 0) 9px),
    #efd6cc; }
}
/* 진피 점 크기 약 20% 축소 */
@media (min-width: 761px) {
  .pm-page .is-der .pm-depth-layer { background:
    radial-gradient(circle at 58% 38%, rgba(62, 36, 22, .95) 0 8px, rgba(62, 36, 22, 0) 12px),
    radial-gradient(circle at 75% 70%, rgba(62, 36, 22, .9) 0 6px, rgba(62, 36, 22, 0) 10px),
    radial-gradient(circle at 48% 78%, rgba(70, 42, 26, .88) 0 5.5px, rgba(70, 42, 26, 0) 9px),
    radial-gradient(circle at 78% 30%, rgba(70, 42, 26, .8) 0 4px, rgba(70, 42, 26, 0) 7px),
    #efd6cc; }
}
/* 전달 도구 바늘 선 — 화면 기준 1px 가늘게(약 2.6 → 1.6px) */
.pm-tools2-fig .nd { stroke-width: 1; }
/* 회복 — 소제목과 단계 플로우 사이 간격 넓힘 (18 → 34px) */
.pm-page #pm-recover .pm-rec { margin-top: 16px; }
/* 회복 단계 아이콘 — 원 없는 마스크, 제목 앞 (10-14) */
.pm-rec h3 { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.pm-rec-ic { flex: none; width: 34px; height: 34px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (max-width: 760px) { .pm-rec-ic { width: 30px; height: 30px; } }
/* 색소 회복 단계 번호 원 펄스 — 사이트 공용 fpGtPulse(2.4s, 0.4초 간격) (10-14) */
.pm-rec > li > .ac-no { animation: fpGtPulse 2.4s ease-out infinite; }
.pm-rec > li:nth-child(2) > .ac-no { animation-delay: .4s; }
.pm-rec > li:nth-child(3) > .ac-no { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) { .pm-rec > li > .ac-no { animation: none; } }
.pm-page #pm-recover .pm-rec { margin-top: 38px; }
/* 여드름 WHY 사진 — 세로로 늘리고 머리 위가 잘리지 않게 위쪽 기준 (10-14) */
#ae-cause .ac-visit-pic img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 62% 0; }
/* 여드름 세 가지 이유 — 얼굴 그림 키움 (104 → 128px, 모바일 78 → 96px) */
.ae-cause-hd { grid-template-columns: 128px minmax(0, 1fr); }
.ae-face { width: 128px; height: 128px; }
@media (max-width: 760px) { .ae-cause-hd { grid-template-columns: minmax(0, 1fr); } .ae-face { width: 96px; height: 96px; } }
.ae-cause-hd { grid-template-columns: 156px minmax(0, 1fr); }
.ae-face { width: 156px; height: 156px; }
@media (max-width: 760px) { .ae-cause-hd { grid-template-columns: minmax(0, 1fr); } .ae-face { width: 116px; height: 116px; } }
/* 여드름 '피지를 부르는 세 가지 이유' — 넓은 화면(1100+)에서 3장 한 줄: 얼굴 위·글 아래 가운데, 흐름 칸은 세로 (10-14) */
@media (min-width: 1100px) {
  .ae-cause3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ae-cause3 > li { display: flex; flex-direction: column; padding: 34px 18px 20px; }
  .ae-cause3 .fp-hanja { font-size: 54px; top: 12px; right: 14px; }
  .ae-cause-hd { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding-right: 0; text-align: center; }
  .ae-face { width: 120px; height: 120px; }
  .ae-cause-hd h3 { margin-bottom: 6px; }
  .ae-cause-hd p { font-size: 15px; line-height: 1.7; }
  .ae-chain { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
  .ae-chain li { min-height: 46px; }
  .ae-chain li + li::after { left: 50%; top: -11px; transform: translateX(-50%) rotate(135deg); }
  .ae-res { margin-top: auto; justify-content: center; text-align: center; font-size: 15px; }
  .ae-chain + .ae-res, .ae-chain ~ .ae-res { margin-top: 14px; }
}
@media (min-width: 1100px) { .ae-cause-hd { margin-bottom: 18px; } .ae-cause3 > li > .ae-chain { margin-top: auto; } .ae-res { flex-direction: column; gap: 8px; } }
/* 1100~1239px 는 카드가 너무 좁아(약 210px) 한 줄 3장 대신 2단(얼굴+글 | 흐름)으로 */
@media (min-width: 1100px) and (max-width: 1239px) { .ae-cause3 { grid-template-columns: minmax(0, 1fr); } .ae-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; } .ae-chain li + li::after { left: -17px; top: 50%; transform: translateY(-50%) rotate(45deg); } }
/* 세 얼굴 그림의 실제 얼굴 폭 맞춤 — 그림마다 여백·장식이 달라 얼굴이 다르게 보이던 것.
   눈높이 얼굴 폭 측정: 열(heat) 200 / 각질(turnover) 243 / 영양(dry) 223 (400px 기준) → 열 기준으로 나머지를 줄임 */
.ae-cause3 > li .ae-face { -webkit-mask-size: 100%; mask-size: 100%; }
.ae-cause3 > li:nth-child(2) .ae-face { -webkit-mask-size: 82%; mask-size: 82%; }
.ae-cause3 > li:nth-child(3) .ae-face { -webkit-mask-size: 90%; mask-size: 90%; }
@media (min-width: 1100px) { .ae-face { width: 134px; height: 134px; } }
/* 첫 번째(열) 얼굴만 더 크게 */
.ae-cause3 > li:nth-child(1) .ae-face { -webkit-mask-size: 114%; mask-size: 114%; }
/* 세 가지 이유 — 소제목과 카드 사이 간격 넓힘(라벨 위 23 → 41px) */
.ae-cause3 { margin-top: 18px; }
/* 위 margin 은 소제목 margin 과 겹쳐(collapse) 효과가 없어 padding 으로 */
.ae-cause3 { margin-top: 0; padding-top: 32px; }
/* 두·세 번째 얼굴도 첫 번째(114%)와 같은 얼굴 폭으로: 각질 243→94%, 영양 223→102% */
.ae-cause3 > li:nth-child(2) .ae-face { -webkit-mask-size: 94%; mask-size: 94%; }
.ae-cause3 > li:nth-child(3) .ae-face { -webkit-mask-size: 102%; mask-size: 102%; }
/* 세 가지 이유 — 설명 문장은 왼쪽 정렬(제목·얼굴은 가운데 유지) */
@media (min-width: 1100px) { .ae-cause-hd p { text-align: left; justify-self: stretch; } }
/* 세 가지 이유 — 1·2·3 흐름 칸이 답답해 보여 박스를 걷어내고 가는 세로선 + 번호 점 타임라인으로 (한 줄 3장 배치, 10-14) */
@media (min-width: 1240px) {
  .ae-chain { position: relative; gap: 0; padding: 16px 0 4px; border-top: 1px solid color-mix(in srgb, var(--c) 16%, #fff); }
  .ae-chain::before { content: ""; position: absolute; left: 11.5px; top: 36px; bottom: 24px; width: 1px; background: color-mix(in srgb, var(--c) 40%, #fff); }
  .ae-chain li { min-height: 0; padding: 8px 0 8px 38px; background: none; font-size: 14.5px; }
  .ae-chain li::before { z-index: 1; left: 0; width: 24px; height: 24px; box-shadow: 0 0 0 4px #fff; }
  .ae-chain li + li::after { display: none; }
  .ae-chain li:last-child { color: var(--c); }
  .ae-cause3 > li > .ae-res { margin-top: 12px; }
}
/* 흐름 점 사이 연결선 길게 — 줄 간격 넓힘 */
@media (min-width: 1240px) { .ae-chain li { padding-top: 15px; padding-bottom: 15px; } .ae-chain::before { top: 41px; bottom: 30px; } }
@media (min-width: 1240px) { .ae-chain li { padding-top: 24px; padding-bottom: 24px; } .ae-chain::before { top: 50px; bottom: 39px; } }
/* '이렇게 나타납니다' 라벨 — 점선 박스 위에 걸치기, 바탕색 없이 테두리만(흰 바탕으로 점선을 가림) (10-14) */
.ae-res { position: relative; margin-top: 26px; padding: 22px 16px 14px; }
.ae-res span { position: absolute; top: 0; left: 16px; transform: translateY(-50%); background: #fff; border: 1px solid var(--c); color: var(--c); }
@media (min-width: 1240px) { .ae-res span { left: 50%; transform: translate(-50%, -50%); } .ae-cause3 > li > .ae-res { margin-top: 24px; padding-top: 24px; } }
/* 흐름 글씨 키움 14.5 → 16px(PC 한 줄 배치), 15.5px(그 외) */
.ae-chain li { font-size: 15.5px; }
@media (min-width: 1240px) { .ae-chain li { font-size: 16px; } .ae-chain::before { top: 52px; bottom: 40px; } }
/* 결과 문구(붉고 따가운 염증성 여드름 등) 키움 */
.ae-res { font-size: 17.5px; }
@media (min-width: 1240px) { .ae-res { font-size: 17.5px; } }
@media (max-width: 760px) { .ae-res { font-size: 16.5px; } }
/* ══ 10-14 여드름 '악화의 고리' 재디자인 — 아이콘 원 노드(번호·펄스) + 노드색 호 위로 흐르는 점선 + 가운데 붉은 빛 ══ */
.ae-ring { max-width: 560px; }
.ae-ring-base { stroke: rgba(192, 80, 58, .08); stroke-width: 14; }
.ae-ring-glow { fill: rgba(192, 80, 58, .07); stroke: none; }
.ae-ring-arc { stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; animation: aeFlow 1.6s linear infinite; }
@keyframes aeFlow { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .ae-ring-arc { animation: none; } }
.ae-ring-svg marker path { fill: #c0503a; }
.ae-ring-c small { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .2em; color: #c0503a; opacity: .75; }
.ae-ring-c b { font-size: 24px; }
.ae-ring-c span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--tg-body); }
.ae-node { width: auto; padding: 0; background: none; border: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ae-node-ic { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 2px solid var(--c); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--c) 70%, #000); animation: fpGtPulse 2.4s ease-out infinite; }
.ae-node.is-r .ae-node-ic { animation-delay: .4s; } .ae-node.is-b .ae-node-ic { animation-delay: .8s; } .ae-node.is-l .ae-node-ic { animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .ae-node-ic { animation: none; } }
.ae-node-ic::before { content: ""; width: 40px; height: 40px; background: color-mix(in srgb, var(--c) 80%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ae-node-ic em { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; font-style: normal; }
.ae-node-t { display: block; padding: 4px 10px; background: rgba(255, 255, 255, .92); text-align: center; white-space: nowrap; }
.ae-node-t small { display: block; margin-bottom: 2px; font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--c); }
.ae-node-t b { display: block; font-size: 15.5px; font-weight: 700; color: var(--tg-ink); }
/* 원 중심이 고리 위에 오도록 — 원(78px) 중심 기준 배치, 글은 원 아래 */
.ae-node.is-t, .ae-node.is-b, .ae-node.is-r, .ae-node.is-l { transform: translate(-50%, -39px); }
.ae-node.is-t { top: 18%; } .ae-node.is-b { top: 82%; } .ae-node.is-r { left: 82%; } .ae-node.is-l { left: 18%; }
@media (max-width: 560px) {
  .ae-node-ic { width: 60px; height: 60px; } .ae-node-ic::before { width: 30px; height: 30px; }
  .ae-node-ic em { width: 22px; height: 22px; font-size: 10px; }
  .ae-node.is-t, .ae-node.is-b, .ae-node.is-r, .ae-node.is-l { transform: translate(-50%, -30px); }
  .ae-node.is-r { left: 82%; right: auto; } .ae-node.is-l { left: 18%; }
  .ae-node-t { padding: 3px 6px; } .ae-node-t b { font-size: 13px; } .ae-node-t small { font-size: 9px; letter-spacing: .06em; }
  .ae-ring-c b { font-size: 18px; } .ae-ring-c span { font-size: 11.5px; }
}
/* 01 열 노드 — 얼굴+열기 그림은 선이 가늘어 조금 크게 */
.ae-node.is-t .ae-node-ic::before { width: 54px; height: 54px; }
@media (max-width: 560px) { .ae-node.is-t .ae-node-ic::before { width: 40px; height: 40px; } }
.ae-node.is-t .ae-node-ic::before { width: 60px; height: 60px; background: var(--c); }
@media (max-width: 560px) { .ae-node.is-t .ae-node-ic::before { width: 46px; height: 46px; } }
/* 악화의 고리 전체 크게 (560 → 680px) */
.ae-ring { max-width: 680px; }
.ae-node-ic { width: 92px; height: 92px; } .ae-node-ic::before { width: 48px; height: 48px; }
.ae-node.is-t .ae-node-ic::before { width: 66px; height: 66px; }
.ae-node.is-t, .ae-node.is-b, .ae-node.is-r, .ae-node.is-l { transform: translate(-50%, -46px); }
.ae-node-t b { font-size: 16.5px; } .ae-ring-c b { font-size: 28px; } .ae-ring-c span { font-size: 14.5px; }
@media (max-width: 560px) { .ae-node-ic { width: 60px; height: 60px; } .ae-node-ic::before { width: 30px; height: 30px; } .ae-node.is-t .ae-node-ic::before { width: 44px; height: 44px; } .ae-node.is-t, .ae-node.is-b, .ae-node.is-r, .ae-node.is-l { transform: translate(-50%, -30px); } .ae-node-t b { font-size: 13px; } .ae-ring-c b { font-size: 18px; } .ae-ring-c span { font-size: 11.5px; } }
/* 01 열 노드 새 아이콘(굵은 선) — 다른 노드 아이콘과 비슷한 크기, 같은 색 처리 */
.ae-node.is-t .ae-node-ic::before { width: 54px; height: 54px; background: color-mix(in srgb, var(--c) 80%, #fff); }
@media (max-width: 560px) { .ae-node.is-t .ae-node-ic::before { width: 34px; height: 34px; } }
.ae-node.is-b .ae-node-ic::before { width: 52px; height: 52px; }
@media (max-width: 560px) { .ae-node.is-b .ae-node-ic::before { width: 33px; height: 33px; } }
/* 악화의 고리 — 소제목과 위 노드 사이 빈 공간 줄임 (PC 102 → 약 46px, 모바일 53 → 약 36px) */
.ae-ring { margin-top: -34px; }
@media (max-width: 560px) { .ae-ring { margin-top: 5px; } }
.ae-ring { margin-top: -52px; }
@media (max-width: 1099px) { .ae-ring { margin-top: -34px; } }
@media (max-width: 560px) { .ae-ring { margin-top: -12px; } }
/* 04 염증 노드 — 글을 원 왼쪽으로 옮겨 아래 고리 화살표가 가리지 않게 (넓은 화면) */
@media (min-width: 1100px) {
  .ae-node.is-l { flex-direction: row-reverse; gap: 10px; transform: translate(calc(-100% + 46px), -50%); }
  .ae-node.is-l .ae-node-t { text-align: right; padding: 4px 4px 4px 10px; }
}
/* 1100~1239px 는 왼쪽 글이 왼쪽 칸을 침범해 원래(원 아래 글)로 */
@media (min-width: 1100px) and (max-width: 1239px) { .ae-node.is-l { flex-direction: column; gap: 8px; transform: translate(-50%, -46px); } .ae-node.is-l .ae-node-t { text-align: center; padding: 4px 10px; } }
/* 01 열 노드 — 글을 원 위로 (원 중심은 고리 위 그대로), 그만큼 고리를 아래로 */
.ae-node.is-t { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 46px)); }
.ae-ring { margin-top: 6px; }
@media (max-width: 1099px) { .ae-ring { margin-top: 20px; } }
@media (max-width: 560px) { .ae-node.is-t { transform: translate(-50%, calc(-100% + 30px)); } .ae-ring { margin-top: 30px; } }
@media (max-width: 1099px) { .ae-ring { margin-top: 34px; } }
@media (max-width: 560px) { .ae-ring { margin-top: 48px; } }
/* 02 피지 노드 — 원(아이콘)이 왼쪽, 글이 오른쪽 (04 와 대칭, 넓은 화면) */
@media (min-width: 1240px) { .ae-node.is-r { flex-direction: row; gap: 10px; transform: translate(-46px, -50%); } .ae-node.is-r .ae-node-t { text-align: left; padding: 4px 10px 4px 4px; } }
/* PC 만 고리 그림을 더 위로 (소제목~01 글 43 → 약 20px) */
@media (min-width: 1100px) { .ae-ring { margin-top: -17px; } }
/* 가운데 원 — 중심이 진하고 바깥으로 옅어지는 그라데이션 */
.ae-ring-glow { fill: url(#aeGlowG); }
/* 악화의 고리 전체 조금 더 크게 (넓은 화면): 고리 680 → 760px, 원 92 → 102px */
@media (min-width: 1240px) {
  .ae-ring { max-width: 760px; }
  .ae-node-ic { width: 102px; height: 102px; } .ae-node-ic::before { width: 54px; height: 54px; }
  .ae-node.is-t .ae-node-ic::before { width: 60px; height: 60px; } .ae-node.is-b .ae-node-ic::before { width: 58px; height: 58px; }
  .ae-node-ic em { width: 30px; height: 30px; font-size: 12.5px; }
  .ae-node.is-b { transform: translate(-50%, -51px); }
  .ae-node.is-t { transform: translate(-50%, calc(-100% + 51px)); }
  .ae-node.is-l { transform: translate(calc(-100% + 51px), -50%); }
  .ae-node.is-r { transform: translate(-51px, -50%); }
  .ae-node-t b { font-size: 17.5px; } .ae-node-t small { font-size: 11px; }
  .ae-ring-c b { font-size: 31px; } .ae-ring-c span { font-size: 15px; } .ae-ring-c small { font-size: 11.5px; }
}
/* 고리 조금 줄임 760 → 720px */
@media (min-width: 1240px) { .ae-ring { max-width: 720px; } }
/* 고리 단계 이름 글씨 키움(네 단계 같이) */
.ae-node-t b { font-size: 17.5px; }
@media (min-width: 1240px) { .ae-node-t b { font-size: 19px; } .ae-node-t small { font-size: 11.5px; } }
@media (max-width: 560px) { .ae-node-t b { font-size: 14px; } }
/* 모바일도 1·2·3 흐름을 PC 와 같은 세로선 + 번호 점으로 */
@media (max-width: 760px) {
  .ae-chain { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; padding: 12px 0 2px; border-top: 1px solid color-mix(in srgb, var(--c) 16%, #fff); }
  .ae-chain::before { content: ""; position: absolute; left: 11.5px; top: 41px; bottom: 31px; width: 1px; background: color-mix(in srgb, var(--c) 40%, #fff); }
  .ae-chain li { min-height: 0; padding: 18px 0 18px 38px; background: none; font-size: 15.5px; }
  .ae-chain li::before { z-index: 1; left: 0; width: 24px; height: 24px; box-shadow: 0 0 0 4px #fff; }
  .ae-chain li + li::after { display: none; }
  .ae-chain li:last-child { color: var(--c); }
}
/* 모바일 고리 — 단계 글 흰 바탕이 화살표를 가려 바탕 대신 흰 테두리 글씨로 */
@media (max-width: 760px) { .ae-node-t { background: none; padding: 2px 4px; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; } .ae-ring-c small { font-size: 9px; } }
/* 여드름 볼 사진 — 폭은 칸 그대로, 세로를 늘림(16:9 → 4:3), 볼·여드름이 가운데 오게 좌우만 조금 자름 (10-14) */
#ae-cycle .ac-visit-pic img[src*="ae-cheek"] { aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 50%; }
/* 「고리를 끊는 두 개의 축」만 위로 — 고리 아래 빈 공간 줄임(PC, 03 글 아래 78 → 44px) */
@media (min-width: 761px) { .ae-ring + .ta-sub { margin-top: 22px; } }
/* PC(1100+)만 적용 — 태블릿은 원래 간격 */
@media (min-width: 761px) and (max-width: 1099px) { .ae-ring + .ta-sub { margin-top: 56px; } }
/* 여드름 — 오른쪽 첫 소제목 높이를 왼쪽 큰 제목(h2)에 맞춤 (색소 페이지와 같은 방식, 2단일 때) */
@media (min-width: 900px) { .ae-page .hx-split-bd > .ta-sub.is-first { margin-top: 29px; } }
/* 여드름 — 소제목 없는 섹션도 오른쪽 내용 시작을 왼쪽 큰 제목(h2) 윗선에 맞춤 (2단일 때) */
@media (min-width: 900px) { .ae-page .hx-split-bd > :first-child:not(.ta-sub) { margin-top: 33px; } }
/* 여드름 변증표 — 모바일에서 「주로 나타나는 양상」 열 폭 줄임 (표 760 → 580px, 가운데 열 436 → 약 260px) */
@media (max-width: 760px) { .ta-page .tg-table.ae-rx-tbl { min-width: 580px; } .ta-page .tg-table.ae-rx-tbl thead th:nth-child(2) { width: 260px; } }
/* 여드름 변증표 — 변증 유형 열 넓힘, '폐열 肺熱' 한 줄 · '상초 열 · 이마 · 코' 한 줄 (10-14) */
.ae-rx-tbl tbody th { white-space: nowrap; }
.ae-rx-tbl tbody th i { display: inline; margin-left: 6px; }
.ae-rx-tbl tbody th small { white-space: nowrap; }
.ta-page .tg-table.ae-rx-tbl thead th:first-child { width: 210px; }
@media (max-width: 760px) { .ta-page .tg-table.ae-rx-tbl { min-width: 620px; } .ta-page .tg-table.ae-rx-tbl thead th:first-child { width: 190px; } }
/* 변증 유형 열 넓힘·한 줄은 PC 만 — 모바일은 이전대로 되돌림 */
@media (max-width: 760px) { .ae-rx-tbl tbody th, .ae-rx-tbl tbody th small { white-space: normal; } .ae-rx-tbl tbody th i { display: block; margin-left: 0; } .ta-page .tg-table.ae-rx-tbl { min-width: 580px; } .ta-page .tg-table.ae-rx-tbl thead th:first-child { width: auto; } }
/* 여드름 변증표 색 변경 — 틸 → 로즈 플럼(악화의 고리 04 염증 색 계열) */
.tile-tbl.is-ae.ae-rx-tbl { --tc: #8a4a6a; }
.ae-rx-tbl tbody th i { color: var(--tc); }
/* ══ 10-14 여드름 '치료의 흐름' 재디자인 — 번호 원(펄스) + 이어지는 선, 아래 카드(걸친 알약·아이콘·영문 단계) ══ */
.ae-flow3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.ae-flow3 > li { position: relative; display: flex; flex-direction: column; align-items: center; }
.ae-flow3 > li + li::before { content: ""; position: absolute; top: 28px; right: calc(50% + 34px); width: calc(100% - 50px); height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #fff), var(--c)); }
.ae-flow3 > li + li::after { content: ""; position: absolute; top: 23px; right: calc(50% + 34px); border-left: 9px solid var(--c); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ae-f3-no { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--c); background: #fff; color: var(--c); font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; animation: fpGtPulse 2.4s ease-out infinite; }
.ae-flow3 > li:nth-child(2) .ae-f3-no { animation-delay: .4s; } .ae-flow3 > li:nth-child(3) .ae-f3-no { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) { .ae-f3-no { animation: none; } }
.ae-f3-card { position: relative; flex: 1; width: 100%; margin-top: 30px; padding: 32px 20px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 10px 26px -18px rgba(20, 32, 27, .32); }
.ae-f3-card .ac-pill { background: var(--c); }
.ae-f3-ic { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ae-f3-card small { display: block; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: color-mix(in srgb, var(--c) 80%, #fff); }
.ae-f3-card h3 { margin: 8px 0 10px; padding-right: 50px; font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.4; color: var(--c); word-break: keep-all; }
.ae-f3-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
@media (max-width: 1099px) {
  .ae-flow3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ae-flow3 > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-bottom: 34px; }
  .ae-flow3 > li:last-child { padding-bottom: 0; }
  .ae-flow3 > li + li::after { display: none; }
  .ae-flow3 > li::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; right: auto; width: 2px; height: auto; background: color-mix(in srgb, var(--c) 30%, #fff); }
  .ae-flow3 > li:last-child::before { display: none; }
  .ae-f3-card { margin-top: 14px; }
}
@media (max-width: 560px) { .ae-flow3 > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; } .ae-f3-no { width: 44px; height: 44px; font-size: 15px; } .ae-flow3 > li::before { left: 21px; top: 44px; } .ae-f3-card { padding: 30px 16px 18px; } .ae-f3-ic { width: 38px; height: 38px; top: 16px; right: 14px; } .ae-f3-card h3 { font-size: 17px; padding-right: 42px; } }

/* 10-14 피부 4페이지 소제목 마커 — 한 색이던 것을 섹션마다 다른 파스텔로(사이트 공통 팔레트, 항노화와 같은 방식) */
.ae-page #ae-cause .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,200,150,.48) 62%); }
.ae-page #ae-cycle .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140,225,190,.45) 62%); }
.ae-page #ae-rx .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150,205,255,.45) 62%); }
.ae-page #ae-tx .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,170,190,.42) 62%); }
.hr-page #hr-sig .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,200,150,.48) 62%); }
.hr-page #hr-alo .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140,225,190,.45) 62%); }
.hr-page #hr-why .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150,205,255,.45) 62%); }
.hr-page #hr-view .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,170,190,.42) 62%); }
.hr-page #hr-tx .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(250,216,78,.45) 62%); }
.hr-page #hr-hbot .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(200,180,245,.45) 62%); }
.pm-page #pm-why .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,200,150,.48) 62%); }
.pm-page #pm-dx .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140,225,190,.45) 62%); }
.pm-page #pm-prep .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150,205,255,.45) 62%); }
.pm-page #pm-pico .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,170,190,.42) 62%); }
.pm-page #pm-recover .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(250,216,78,.45) 62%); }
.ro-page #ro-root .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,200,150,.48) 62%); }
.ro-page #ro-diff .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(140,225,190,.45) 62%); }
.ro-page #ro-plan .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(150,205,255,.45) 62%); }
.ro-page #ro-step1 .ta-sub-h { background-image: linear-gradient(transparent 62%, rgba(255,170,190,.42) 62%); }
/* 치료 흐름 요약 문장 — 플로우 아래, 옅은 바탕 + 위 구분선 */
.ae-flow-cap { margin: 30px 0 0; padding: 18px 22px; background: color-mix(in srgb, #3f7f8c 6%, #fff); border-top: 1px solid color-mix(in srgb, #3f7f8c 45%, #fff); font-size: 15.5px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.ae-flow-cap b { color: var(--tg-ink); }
/* ══ 10-14 여드름흉터 三 핵심 시술(원고 순서로 분리) — 걸친 알약 + 원 없는 아이콘 + 한자 워터마크 카드 2×2 ══ */
.as-page .as-core4 .fp-why-ico { width: 46px; height: 46px; background: none; border-radius: 0; }
.as-page .as-core4 .fp-why-ico::before { width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 72%, #fff); }
.as-page .as-core4 .fp-hanja { position: absolute; top: 14px; right: 18px; font-family: 'Noto Serif KR', serif; font-size: 60px; font-weight: 700; line-height: 1; color: var(--c); opacity: .1; pointer-events: none; }
.as-page .as-core4 .fp-why-hd h3 { margin: 0; color: var(--c); }
.as-page .as-core4 .as-for { margin-top: 14px !important; }
@media (max-width: 560px) { .as-page .as-core4 .fp-why-ico, .as-page .as-core4 .fp-why-ico::before { width: 40px; height: 40px; } }
/* 4장이 3+1 로 남지 않게 2×2 */
.as-page .fp-why.as-core4 > li { grid-column: span 3; }
@media (max-width: 760px) { .as-page .fp-why.as-core4 > li { grid-column: 1 / -1; } }
.as-page .fp-why.as-core4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; padding-top: 14px; }
.as-page .fp-why.as-core4 > li { grid-column: auto; }
@media (max-width: 760px) { .as-page .fp-why.as-core4 { grid-template-columns: minmax(0, 1fr); } }
/* 같은 줄 카드의 「적용」 칸 높이 맞춤 */
.as-page .fp-why.as-core4 > li { display: flex; flex-direction: column; } .as-page .fp-why.as-core4 > li > div { display: flex; flex-direction: column; flex: 1; } .as-page .fp-why.as-core4 .as-for { margin-top: auto !important; } .as-page .fp-why.as-core4 > li > div > p:not(.as-for) { margin-bottom: 14px; }
/* 여드름흉터 '흉터의 종류' — PC 한 줄에 2장 (5번째 PIE·PIH 는 한 줄 전체), 카드 안은 글 → 깊이 눈금 세로 (10-14) */
@media (min-width: 1100px) {
  .as-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .as-types > .as-type:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .as-types > .as-type { display: flex; flex-direction: column; }
  .as-type-bd { flex: 1; grid-template-columns: minmax(0, 1fr); padding: 16px 20px 20px; }
  .as-type-fig { padding: 24px 16px 8px; }
  .as-type h3 { font-size: 18px; }
  .as-type-txt p { font-size: 15px; }
  .as-type-meta { max-width: none; }
  .as-types > .as-type:last-child:nth-child(odd) .as-type-bd { grid-template-columns: minmax(0, 1fr) 236px; }
}
/* 5번째(홍반성·색소성 흔적)도 다른 카드와 같은 크기(한 칸) */
@media (min-width: 1100px) { .as-types > .as-type:last-child:nth-child(odd) { grid-column: auto; } .as-types > .as-type:last-child:nth-child(odd) .as-type-bd { grid-template-columns: minmax(0, 1fr); } }
/* 1×3 보완 — 가로로 긴 단면 그림(비율 제각각)을 16:10 으로 자르면 흉터가 잘려 나가 같은 높이 틀 안에 전체가 보이게(contain) */
@media (min-width: 1180px) { .as-stage-fig img, .as-stage > li:first-child .as-stage-fig img { aspect-ratio: 2.3 / 1; object-fit: contain; background: #fff; } .as-stage-fig { padding: 26px 14px 8px; } }
/* 1180~1279 도 2+1 로 남지 않게 3열 */
@media (min-width: 1180px) { .as-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* 여드름흉터 치료의 흐름 — 여드름 페이지와 같은 흐름 디자인(번호 원·화살표 선·카드), 소제목 없는 섹션이라 h2 윗선에 맞춤 */
@media (min-width: 900px) { .as-page #as-flow .hx-split-bd > :first-child { margin-top: 33px; } }
.as-flow3 + .fp-warn { margin-top: 40px; }
/* 여드름흉터 흐름 요약 문장 — 여드름과 같은 위치·형식, 페이지 보라색 */
.as-flow-cap { background: color-mix(in srgb, #6a5a8c 6%, #fff); border-top-color: color-mix(in srgb, #6a5a8c 45%, #fff); }

/* 10-15 탈모 리드 — 사진(hr-heat.jpg) 대신 자율신경 인체 도해(.ad-ib) 상열하한|수승화강 나란히, 알약은 위 테두리에 걸침 */
.ad-hero.hr-hero { overflow: visible; margin-top: 14px; }
.hr-hero .hr-ib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hr-ib .ad-ib { position: relative; padding: 30px 8px 6px; }
.hr-ib .ad-ib + .ad-ib { border-left: 1px solid #e3e8dc; }
.hr-ib .ad-ib-k { font-size: 12px; padding: 5px 13px; }
.hr-ib .ad-ib-t { margin-top: 4px; font-size: 22px; }
.hr-ib .ad-ib-s { font-size: 13.5px; }
.hr-ib .ad-ib-cl b { font-size: 13px; }
.hr-ib .ad-ib-cl span { font-size: 11.5px; }
.hr-ib .ad-ib-cl i { width: 22px; height: 22px; margin-bottom: 4px; font-size: 12px; }
.hr-ib .ad-ib-cl { transform: translateY(calc(-100% + 8.2px)); }
.hr-hero-cap .is-cool b { color: #2a8fae; }
@media (max-width: 599px) {
  .hr-hero .hr-ib { grid-template-columns: minmax(0, 1fr); }
  .hr-ib .ad-ib { padding: 30px 14px 10px; }
  .hr-ib .ad-ib + .ad-ib { border-left: 0; border-top: 1px solid #e3e8dc; margin-top: 14px; }
  .hr-ib .ad-ib-stage { max-width: 360px; margin-left: auto; margin-right: auto; }
  .hr-hero-cap { grid-template-columns: minmax(0, 1fr); }
  .hr-hero-cap span + span { border-left: 0; border-top: 1px solid #e3e8dc; }
}
/* 탈모 리드 도해 아래 上熱下寒·水升火降 설명 가운데 정렬 (10-15) */
.hr-hero-cap span { text-align: center; }
/* 탈모 두피 단면 이미지 외곽 박스 선 제거 (10-15) */
.hr-layer { border: 0; }

/* 10-15 탈모 리드 도해만 — 여성 실루엣(hr-body-f) 크게 + 예전 일러스트식 그래픽(머리 위 열 화살표·X·끊긴 점선·발 냉기 / 정수리 화살표·파란 원·오르는 삼각형) */
.hr-ib .hr-stage { aspect-ratio: 400 / 620; margin-top: -6px; }
.hr-ib .hr-stage .ad-ib-body, .hr-ib .hr-stage .hr-body-ln { position: absolute; left: 26.98%; top: 8.065%; width: 46.03%; height: 89.77%; aspect-ratio: auto; -webkit-mask: url('/assets/images/hair/hr-body-f.png?v=1') 0 0 / 100% 100% no-repeat; mask: url('/assets/images/hair/hr-body-f.png?v=1') 0 0 / 100% 100% no-repeat; }
.hr-ib .hr-stage .ad-ib-body { background: #f6ece2; }
.hr-ib .hr-stage .hr-body-ln { background: #c9b4a1; -webkit-mask-image: url('/assets/images/hair/hr-body-f-line.png?v=1'); mask-image: url('/assets/images/hair/hr-body-f-line.png?v=1'); }
.hr-ib .ad-ib-svg .hr-ar { stroke: #d0493b; stroke-width: 3.2; }
.hr-ib .ad-ib-svg .hr-up { stroke: url(#hrUpG); stroke-width: 3.2; }
.hr-ib .ad-ib-svg .hr-x { stroke: #8494ad; stroke-width: 3; }
.hr-ib .ad-ib-svg .hr-dash { stroke: #8494ad; stroke-width: 2.4; stroke-dasharray: 9 8; stroke-linecap: butt; }
.hr-ib .hr-tri path { fill: #2f5c9a; stroke: none; animation: hrTri 2.4s ease-in-out infinite; }
.hr-ib .hr-tri path:nth-child(2) { animation-delay: .4s; } .hr-ib .hr-tri path:nth-child(3) { animation-delay: .8s; }
@keyframes hrTri { 0%, 100% { opacity: .45; } 40% { opacity: 1; } }
.hr-ib .hr-rise { animation: hrRise 2.4s ease-in-out infinite; }
@keyframes hrRise { 0%, 100% { transform: translateY(2px); opacity: .75; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hr-ib .hr-tri path, .hr-ib .hr-rise { animation: none; opacity: 1; } }
.hr-ib .ad-ib-cl.is-cold i { background: #e3eaf5; color: #3d64a0; } .hr-ib .ad-ib-cl.is-cold b { color: #3d64a0; }
.hr-ib .ad-ib-cl.is-cool i { background: #e3eaf5; color: #2f5c9a; } .hr-ib .ad-ib-cl.is-cool b { color: #2f5c9a; }
.hr-ib .ad-ib-cl.is-warm i { background: #fbe8e3; color: #d0493b; } .hr-ib .ad-ib-cl.is-warm b { color: #c4433a; }
/* 탈모 리드 도해 — 좁은 PC(900~1199)에서는 리드를 1단으로 내려 도해 폭 확보, 알약 한 줄 */
@media (min-width: 900px) and (max-width: 1199px) { .hr-page .hx-lead { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hr-page .hr-hero { width: 100%; max-width: 760px; margin: 14px auto 0; } }
.hr-ib .ad-ib-k { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) { .hr-page .hx-lead .pg-intro { margin-left: 0; margin-right: 0; max-width: none; } }
/* 탈모 리드 도해 인체 더 키움 — 무대 400×704, 인체 폭 53.8%(10-15) */
.hr-ib .hr-stage { aspect-ratio: 400 / 704; }
.hr-ib .hr-stage .ad-ib-body, .hr-ib .hr-stage .hr-body-ln { left: 23.125%; top: 6.534%; width: 53.75%; height: 92.33%; }
/* 탈모 리드 도해 인체 — 세로 그대로, 가로만 넓힘 53.75→60% (10-15) */
.hr-ib .hr-stage .ad-ib-body, .hr-ib .hr-stage .hr-body-ln { left: 20%; width: 60%; }
/* 탈모 리드 도해 영역 조금 넓힘 (10-15) */
@media (min-width: 1200px) { .hr-page .hx-lead { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; } }
@media (min-width: 900px) and (max-width: 1199px) { .hr-page .hr-hero { max-width: 840px; } }

/* 10-15 탈모 '시술은 이 순서로 작용합니다' — B안: 번호 원 3개를 색 이어지는 띠로 연결 + 공용 펄스, 설명은 원 아래 */
.hr-seq.hr-seqb { position: relative; gap: 0 24px; margin-top: 8px; }
.hr-seqb::before { content: ""; position: absolute; top: 27px; left: calc((100% - 48px) / 6); right: calc((100% - 48px) / 6); height: 3px; background: linear-gradient(90deg, #a2563c, #2f6fb3 50%, #5f7442); }
.hr-seqb li { padding: 0; background: none; border: 0; text-align: center; }
.hr-seqb li + li::before { display: none; }
.hr-seqb .hr-sq-no { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-style: normal; font-size: 17px; font-weight: 600; animation: fpGtPulse 2.4s ease-out infinite; }
.hr-seqb li:nth-child(2) .hr-sq-no { animation-delay: .4s; } .hr-seqb li:nth-child(3) .hr-sq-no { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) { .hr-seqb .hr-sq-no { animation: none; } }
.hr-seqb small { font-family: inherit; font-size: 13px; letter-spacing: .02em; }
.hr-seqb b { margin-top: 4px; font-size: 17px; }
.hr-seqb span { margin-top: 5px; font-size: 14.5px; }
@media (max-width: 760px) {
  .hr-seq.hr-seqb { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hr-seqb::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 3px; height: auto; background: linear-gradient(180deg, #a2563c, #2f6fb3 50%, #5f7442); }
  .hr-seqb li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: center; padding-bottom: 22px; text-align: left; }
  .hr-seqb li:last-child { padding-bottom: 0; }
  .hr-seqb .hr-sq-no { grid-row: 1 / span 3; margin: 0; }
  .hr-seqb small, .hr-seqb b, .hr-seqb span { grid-column: 2; }
}
/* 소제목을 단면도 위로 올림 — 단면도 설명과 순서 띠 사이 간격 (10-15) */
.hr-layer + .hr-seq.hr-seqb { margin-top: 40px; }
.hr-seq.hr-seqb + .hr-lay3 { margin-top: 52px; }
/* 10-15 탈모 두피 단면도 — 주석선 없는 새 이미지 + 빨간 약침 선을 SVG로 그림(점은 라벨 점이 덮음) */
.hr-ndl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hr-ndl path { fill: none; stroke: #b8432f; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hr-ndl circle { fill: #e8786a; opacity: .2; }

/* 10-15 탈모 두피 단면도 — 원고(sb-) 도해 요소 적용: 왼쪽 층 이름, 바늘 번호 1·2, 혈류 회복 화살표, 과긴장·이완, 근육 이름, 범례 */
.hr-layer-grid { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.hr-lyr { position: relative; list-style: none; margin: 0; padding: 0; }
.hr-lyr li { position: absolute; left: 0; right: 0; top: calc(var(--y) * 1%); transform: translateY(-50%); padding-right: 22px; text-align: right; }
.hr-lyr li::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; border-top: 1px dashed #c9bfb2; }
.hr-lyr b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #6b7478; white-space: nowrap; }
.hr-lyr small { display: block; margin-top: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: #9aa3a8; white-space: nowrap; }
.hr-lyr .is-fol b { font-size: 15px; font-weight: 700; color: #1d3f6e; }
.hr-lyr .is-mus b { font-size: 15px; font-weight: 700; color: #b3382c; }
.hr-ndl .hr-flow path { stroke: #35608f; stroke-width: 2; }
.hr-nb { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #b3382c; color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; }
.hr-tag.is-flow { border-color: #b9cbe0; color: #35608f; }
.hr-tag.is-mus { border-color: #e2c4bb; color: #8e4a3e; }
.hr-layer.hr-layer-d .hr-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 0 0 118px; border-top: 0; font-size: 13.5px; color: var(--tg-body); }
.hr-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hr-legend i { display: block; width: 16px; height: 3px; background: var(--c); }
@media (max-width: 760px) {
  .hr-layer-grid { grid-template-columns: 62px minmax(0, 1fr); }
  .hr-lyr li { padding-right: 8px; } .hr-lyr li::after { display: none; }
  .hr-lyr b, .hr-lyr .is-fol b, .hr-lyr .is-mus b { font-size: 11px; white-space: normal; word-break: keep-all; }
  .hr-lyr small { display: none; }
  .hr-nb { width: 18px; height: 18px; font-size: 10px; }
  .hr-layer.hr-layer-d .hr-legend { padding-left: 0; gap: 6px 14px; font-size: 12.5px; }
  .hr-layer-d .hr-tag { display: inline-block; padding: 2px 6px; font-size: 10px; }
  .hr-layer-d .hr-tag.is-mus { white-space: nowrap; }
}
.hr-layer-d .hr-mk.is-r { background: #5f7442; } .hr-layer-d .hr-mk.is-l { background: #a2563c; }
/* 단면도 모바일 — 층 이름은 짧게, 그림 위 보조 라벨은 숨기고(범례로), 알약은 '1단계·2단계'만 */
@media (max-width: 760px) {
  .hr-layer-grid { grid-template-columns: 48px minmax(0, 1fr); }
  .hr-lyr li { padding-right: 6px; }
  .hr-lyr b, .hr-lyr .is-fol b, .hr-lyr .is-mus b { font-size: 0; white-space: nowrap; }
  .hr-lyr b::after { content: attr(data-m); font-size: 10.5px; }
  .hr-layer-d .hr-tag { display: none; }
  .hr-layer-d .hr-mk { font-size: 0; padding: 3px 7px; }
  .hr-layer-d .hr-mk::before { content: attr(data-m); font-size: 10.5px; }
}
/* 혈류 회복 화살표 — 굵게 + 아래에서 위로 진해지는 그라데이션, 작은 삼각 화살촉 (10-15) */
.hr-ndl .hr-flow path { stroke: url(#hrFlowG); stroke-width: 3; stroke-linecap: butt; }
.hr-ndl .hr-flow path.hd { fill: #35608f; stroke: none; }
/* 1·2번 약침 선 조금 굵게 + 선 끝 점에 펄스(고리가 퍼졌다 사라짐, 0.4초 간격) (10-15) */
.hr-ndl > path { stroke-width: 2.4; }
.hr-ndl > circle { fill: #d9614b; opacity: 1; transform-box: fill-box; transform-origin: 50% 50%; animation: hrDotPulse 2.4s ease-out infinite; }
.hr-ndl > circle:nth-of-type(2) { animation-delay: .4s; }
@keyframes hrDotPulse { 0% { transform: scale(.5); opacity: .5; } 70%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hr-ndl > circle { animation: none; opacity: .2; } }
/* 단면도 범례 우측 정렬 (10-15) */
.hr-layer.hr-layer-d .hr-legend { justify-content: flex-end; padding-left: 0; }
/* 범례를 그림 쪽으로 붙임 — 이미지 아래 흰 여백만큼 당김 (10-15) */
.hr-layer.hr-layer-d .hr-legend { padding-top: 0; margin-top: -10px; }
@media (max-width: 760px) { .hr-layer.hr-layer-d .hr-legend { margin-top: 0; padding-top: 4px; } }
.hr-layer.hr-layer-d .hr-legend { position: relative; z-index: 2; }
/* 10-15 원형탈모 계열 3유형 — PC(1100+)는 한 줄 3칸: 그림 위, 글 아래 */
@media (min-width: 1100px) {
  .hr-alo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
  .hr-alo article { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 14px; padding: 30px 18px 20px; }
  .hr-alo figure { width: 100%; max-width: 170px; margin: 0 auto; }
  .hr-alo h3 { font-size: 18px; }
  .hr-alo dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .hr-alo dt { padding-top: 8px; } .hr-alo dt:first-child { padding-top: 0; }
  .hr-alo dd { font-size: 14.5px; line-height: 1.65; }
  .hr-alo .ac-pill { left: 18px; }
}
/* 10-15 원형탈모 3유형 형태·특징·접근 — 항목명을 유형색 알약으로, '접근'(우리 치료)은 유형색 옅은 바탕 칸으로 강조 */
.hr-alo dt { justify-self: start; align-self: start; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); font-size: 12.5px; line-height: 1.4; letter-spacing: .04em; }
@media (min-width: 1100px) {
  .hr-alo dl { gap: 0; padding-top: 14px; }
  .hr-alo dt, .hr-alo dt:first-child { padding: 3px 10px; margin-top: 14px; }
  .hr-alo dt:first-child { margin-top: 0; }
  .hr-alo dd { margin-top: 7px; }
  .hr-alo dt:last-of-type { position: relative; z-index: 1; margin-top: 18px; margin-left: 12px; background: var(--c); color: #fff; }
  .hr-alo dd:last-of-type { position: relative; margin-top: -12px; padding: 20px 14px 14px; background: color-mix(in srgb, var(--c) 7%, #fff); border-top: 2px solid color-mix(in srgb, var(--c) 55%, #fff); color: var(--tg-ink-2, #3a4440); }
}
@media (min-width: 1100px) {
  .hr-alo-tx { display: flex; flex-direction: column; height: 100%; }
  .hr-alo dl { display: flex; flex-direction: column; flex: 1; }
  .hr-alo dt { align-self: flex-start; }
  .hr-alo dd:nth-of-type(2) { margin-bottom: 18px; }
  .hr-alo dt:last-of-type { margin-top: auto; }
}
/* '접근' 칸 3장 높이 통일 — 가장 긴 글 기준 줄 수만큼 최소 높이 (10-15) */
@media (min-width: 1100px) { .hr-alo dd:last-of-type { box-sizing: border-box; min-height: calc(14.5px * 1.65 * 4 + 34px); } }
@media (min-width: 1100px) and (max-width: 1299px) { .hr-alo dd:last-of-type { min-height: calc(14.5px * 1.65 * 5 + 34px); } }
@media (min-width: 1300px) { .hr-alo dd:last-of-type { min-height: 134px; } }
/* ↑ 최소 높이는 페이지 스크립트가 세 칸 중 가장 큰 값으로 맞춤 */
@media (min-width: 1100px) { .hr-alo dd:last-of-type { min-height: 0; } }
/* 원형탈모 3유형 일러스트 조금 키움 (10-15) */
@media (min-width: 1100px) { .hr-alo figure { max-width: 205px; } .hr-alo article { padding-top: 26px; } }
@media (min-width: 761px) and (max-width: 1099px) { .hr-alo article { grid-template-columns: 220px minmax(0, 1fr); } }
@media (max-width: 760px) { .hr-alo figure { max-width: 236px; } }
/* 10-15 원형탈모 범위 막대 — 번호를 이름 뒤 워터마크로 */
.hr-prog li { position: relative; grid-template-columns: 170px minmax(0, 1fr); padding: 14px 0 14px 14px; overflow: hidden; }
.hr-prog small { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); z-index: 0; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.02em; opacity: .14; pointer-events: none; }
.hr-prog b, .hr-prog span { position: relative; z-index: 1; grid-column: 1; }
.hr-prog i { grid-column: 2; }
@media (max-width: 760px) {
  .hr-prog li { grid-template-columns: 118px minmax(0, 1fr); padding-left: 10px; }
  .hr-prog small { font-size: 38px; left: 2px; }
}
.hr-prog li { grid-template-columns: 200px minmax(0, 1fr); padding-left: 0; }
.hr-prog small { left: 0; font-size: 54px; opacity: .17; }
.hr-prog b, .hr-prog span { padding-left: 36px; }
@media (max-width: 760px) { .hr-prog li { grid-template-columns: 146px minmax(0, 1fr); padding-left: 0; } .hr-prog small { font-size: 42px; } .hr-prog b, .hr-prog span { padding-left: 28px; } }
/* 워터마크 번호를 줄 오른쪽 끝으로 — 글과 겹치지 않게, 막대는 번호 자리만큼 짧게 */
.hr-prog li { grid-template-columns: 170px minmax(0, 1fr); }
.hr-prog b, .hr-prog span { padding-left: 0; }
.hr-prog small { left: auto; right: 2px; font-size: 56px; opacity: .2; }
.hr-prog i { width: calc((100% - 88px) * var(--w) / 100); }
@media (max-width: 760px) { .hr-prog li { grid-template-columns: 118px minmax(0, 1fr); } .hr-prog b, .hr-prog span { padding-left: 0; } .hr-prog small { font-size: 40px; right: 0; } .hr-prog i { width: calc((100% - 56px) * var(--w) / 100); } }
/* 워터마크 번호를 줄 앞(왼쪽)으로 — 이름과 겹치지 않게 앞 칸 확보, 막대는 다시 전체 폭 기준 (10-15) */
.hr-prog li { grid-template-columns: 70px 150px minmax(0, 1fr); }
.hr-prog small { position: static; grid-column: 1; grid-row: 1 / 3; transform: none; font-size: 54px; opacity: .2; }
.hr-prog b, .hr-prog span { grid-column: 2; }
.hr-prog i { grid-column: 3; width: calc(var(--w) * 1%); }
@media (max-width: 760px) { .hr-prog li { grid-template-columns: 48px 108px minmax(0, 1fr); column-gap: 8px; } .hr-prog small { font-size: 38px; } .hr-prog i { width: calc(var(--w) * 1%); } }
/* 10-15 탈모 — 오른쪽 첫 소제목·첫 내용 위치를 왼쪽 큰 제목(h2) 윗선에 맞춤 (여드름·색소와 동일) */
@media (min-width: 900px) {
  .hr-page .hx-split-bd > .ta-sub.is-first { margin-top: 29px; }
  .hr-page .hx-split-bd > :first-child:not(.ta-sub) { margin-top: 33px; }
}
/* 원형탈모 범위 막대 워터마크 번호 조금 진하게 (10-15) */
.hr-prog small { opacity: .36; }

/* 10-15 원형탈모 범위 — C안: 머리 일러스트 4개를 화살표로 연결(단발→다발→사행→전두), 아래 큰 타이틀, 번호는 옅은 워터마크 */
.hr-prog2 { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; }
.hr-prog2 li { position: relative; text-align: center; }
.hr-prog2 li + li::before { content: ""; position: absolute; left: -21px; top: 64px; width: 10px; height: 10px; border-top: 2px solid #b5c1a6; border-right: 2px solid #b5c1a6; transform: rotate(45deg); }
.hr-prog2 small { position: absolute; left: 0; top: -4px; font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 700; line-height: 1; color: var(--c); opacity: .3; }
.hr-prog2 figure { width: 132px; max-width: 100%; margin: 0 auto; }
.hr-prog2 img { display: block; width: 100%; height: auto; }
.hr-prog2 b { display: block; margin-top: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--c); }
.hr-prog2 span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--tg-body); word-break: keep-all; }
.hr-prog2 + .hr-prog-cap { margin-top: 26px; }
@media (max-width: 760px) {
  .hr-prog2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .hr-prog2 li:nth-child(3)::before { display: none; }
  .hr-prog2 li + li::before { left: -17px; top: 52px; }
  .hr-prog2 figure { width: 108px; }
  .hr-prog2 small { font-size: 28px; }
  .hr-prog2 b { font-size: 18px; }
  .hr-prog2 span { font-size: 13.5px; }
}
.hr-prog2 { margin-top: 26px; }

/* 10-15 탈모 12가지 치료 아코디언(GROUP A·B) = 안면홍조(ro-txs)·항노화(lf-txs)와 같은 디자인: 큰 워터마크 번호, 본문 한 단·들여쓰기 */
.hr-txs .jg-case-no { width: 92px; flex: 0 0 92px; font-size: 64px; font-weight: 700; opacity: .16; letter-spacing: -.03em; }
.hr-txs .hr-tx-bd { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 24px 0 72px; }
.hr-txs .hr-tx-bd p b { color: var(--tg-ink); }
.hr-txs .hr-tags { margin: 14px 24px 22px 72px; }
.hr-txs .hr-tx-note { margin-left: 72px; }
.hr-txs .et-more { margin-left: 72px; }
@media (max-width: 760px) {
  .hr-txs .jg-case-no { width: 64px; flex-basis: 64px; font-size: 46px; }
  .hr-txs .hr-tx-bd { padding: 0 16px; }
  .hr-txs .hr-tags { margin: 12px 16px 18px; }
  .hr-txs .hr-tx-note, .hr-txs .et-more { margin-left: 16px; }
}
/* 12가지 치료 아코디언 — 치료별 아이콘(원 없이, 치료색 72% 마스크) (10-15) */
.hr-tx-ic { flex: 0 0 40px; width: 40px; height: 40px; margin-left: -14px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (max-width: 760px) { .hr-tx-ic { flex-basis: 30px; width: 30px; height: 30px; margin-left: -10px; } .hr-txs .jg-case > summary { gap: 12px; } }
/* 아이콘 추가 후 모바일 넘침 방지 — 제목 칸이 줄어들 수 있게, 번호·아이콘 폭 축소 */
.hr-txs .jg-case { min-width: 0; }
.hr-txs .jg-case-t { min-width: 0; flex: 1 1 auto; }
@media (max-width: 760px) {
  .hr-txs .jg-case > summary { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .hr-txs .jg-case-no { width: 50px; flex-basis: 50px; font-size: 40px; }
  .hr-tx-ic { flex-basis: 28px; width: 28px; height: 28px; margin-left: -6px; }
  .hr-txs .jg-case-t b, .hr-txs .jg-case-t em { white-space: normal; }
}
/* 탈모 TYPES 4유형 아코디언 — 유형별 아이콘 (12가지 치료와 같은 방식) (10-15) */
.hr-types .hr-tx-ic { flex: 0 0 46px; width: 46px; height: 46px; }
.hr-types .jg-case-t { min-width: 0; flex: 1 1 auto; }
@media (max-width: 760px) { .hr-types .hr-tx-ic { flex-basis: 32px; width: 32px; height: 32px; margin-left: -8px; } .hr-types .jg-case > summary { gap: 10px; } .hr-types .jg-case-no { width: 50px; flex-basis: 50px; font-size: 40px; } }

/* 10-15 탈모 '중심이 되는 여섯 가지' — 원고 '탈모 치료 6단계'(STEP 01~06): 2열 타일, 아이콘 + 이름 + 한자 워터마크 */
.hr-core6 { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hr-core6 li { position: relative; overflow: hidden; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 14px 13px; background: #fff; border: 1px solid #d6e0c8; }
.hr-core6 small { grid-column: 1 / -1; margin-bottom: 8px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #8a9a72; }
.hr-c6-ic { grid-row: 2; width: 34px; height: 34px; background: color-mix(in srgb, #5f7442 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hr-core6 b { grid-row: 2; position: relative; z-index: 1; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tg-ink); word-break: keep-all; }
.hr-core6 em { position: absolute; right: 8px; bottom: -6px; font-family: 'Noto Serif KR', serif; font-style: normal; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #5f7442; opacity: .12; white-space: nowrap; pointer-events: none; }
.hr-core6 li:hover { border-color: #5f7442; }
@media (min-width: 761px) and (max-width: 899px) { .hr-core6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hr-core6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .hr-core6 li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 12px; } .hr-c6-ic { width: 28px; height: 28px; } .hr-core6 b { font-size: 15px; } .hr-core6 em { font-size: 22px; } }
.hr-core6 em { top: 10px; bottom: auto; right: 10px; font-size: 20px; opacity: .2; }
@media (max-width: 760px) { .hr-core6 em { font-size: 17px; top: 9px; right: 8px; } }

/* 10-15 탈모 '탈모 치료 6단계' 독립 섹션(원고 Core Protocol) — 위: STEP 타일 6칸(누르면 아래 설명으로), 아래: 단계별 설명 카드(걸친 알약·아이콘·태그) */
#hr-core .hr-core6 { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #d6e0c8; border-left: 1px solid #d6e0c8; }
#hr-core .hr-core6 li { display: block; padding: 0; border: 0; border-right: 1px solid #d6e0c8; border-bottom: 1px solid #d6e0c8; }
#hr-core .hr-core6 a { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 18px 18px 17px; color: inherit; text-decoration: none; transition: background .2s; }
#hr-core .hr-core6 a:hover, #hr-core .hr-core6 a:focus-visible { background: color-mix(in srgb, var(--c) 6%, #fff); }
#hr-core .hr-core6 small { color: var(--c); }
#hr-core .hr-c6-ic { width: 36px; height: 36px; background: color-mix(in srgb, var(--c) 72%, #fff); }
#hr-core .hr-core6 b { font-size: 17px; }
#hr-core .hr-core6 em { color: var(--c); opacity: .22; top: 14px; right: 14px; font-size: 19px; }
.hr-c6d { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 44px; }
@media (min-width: 1100px) { .hr-c6d { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; } }
.hr-c6d article { position: relative; padding: 30px 22px 6px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); scroll-margin-top: 110px; }
.hr-c6d .ac-pill { position: absolute; top: 0; left: 20px; transform: translateY(-50%); margin: 0; background: var(--c); color: #fff; letter-spacing: .06em; }
.hr-c6d .hr-c6-ic { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hr-c6d h3 { margin: 0 56px 10px 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); }
.hr-c6d h3 em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--c); }
.hr-c6d p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.hr-c6d .hr-tags { margin: 14px 0 20px; }
@media (max-width: 760px) {
  #hr-core .hr-core6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hr-core .hr-core6 a { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 14px 12px; }
  #hr-core .hr-c6-ic { width: 28px; height: 28px; }
  #hr-core .hr-core6 b { font-size: 15.5px; }
  #hr-core .hr-core6 em { font-size: 16px; top: 12px; right: 10px; }
  .hr-c6d { margin-top: 36px; }
  .hr-c6d article { padding: 28px 16px 4px; }
  .hr-c6d .hr-c6-ic { top: 18px; right: 16px; width: 34px; height: 34px; }
  .hr-c6d h3 { font-size: 17.5px; margin-right: 44px; }
  .hr-c6d p { font-size: 14.5px; }
}
/* 6단계 — 위 STEP 타일은 아래 카드와 중복이라 삭제, 번호는 카드 아래쪽 큰 워터마크로 (10-15) */
.hr-c6d { margin-top: 0; gap: 18px; }
.hr-c6d article { overflow: hidden; padding-top: 24px; }
.hr-c6d .hr-c6-no { position: absolute; right: 14px; bottom: -14px; font-family: 'Poppins', sans-serif; font-size: 78px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--c); opacity: .1; pointer-events: none; }
.hr-c6d h3, .hr-c6d p { position: relative; z-index: 1; }
@media (max-width: 760px) { .hr-c6d .hr-c6-no { font-size: 60px; bottom: -10px; } .hr-c6d article { padding-top: 20px; } }

/* 10-15 자율신경실조 '네 치료를 놓는 순서' — 말풍선 상자 오른쪽에 치료 아이콘(원 없이, 단계색 72%) */
.ad-vflow .ad-vf-ic { position: absolute; top: 50%; right: 20px; width: 46px; height: 46px; transform: translateY(-50%); background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ad-vflow > li > div:has(.ad-vf-ic) { padding-right: 84px; }
@media (max-width: 560px) { .ad-vflow .ad-vf-ic { top: 16px; right: 14px; width: 32px; height: 32px; transform: none; } .ad-vflow > li > div:has(.ad-vf-ic) { padding-right: 56px; } }
@media (min-width: 561px) { .ad-vflow .ad-vf-ic { width: 56px; height: 56px; right: 26px; } .ad-vflow > li > div:has(.ad-vf-ic) { padding-right: 100px; } }
/* 네 치료 순서 아이콘을 상자 앞쪽(왼쪽)으로 (10-15) */
.ad-vflow .ad-vf-ic { left: 24px; right: auto; }
.ad-vflow > li > div:has(.ad-vf-ic) { padding-right: 22px; padding-left: 100px; }
@media (max-width: 560px) { .ad-vflow .ad-vf-ic { left: 14px; right: auto; top: 16px; } .ad-vflow > li > div:has(.ad-vf-ic) { padding-right: 16px; padding-left: 58px; } }
/* 네 치료 순서 아이콘 키움 56→70 (모바일 32→40) (10-15) */
@media (min-width: 561px) { .ad-vflow .ad-vf-ic { width: 70px; height: 70px; left: 26px; } .ad-vflow > li > div:has(.ad-vf-ic) { padding-left: 120px; } }
@media (max-width: 560px) { .ad-vflow .ad-vf-ic { width: 40px; height: 40px; left: 12px; } .ad-vflow > li > div:has(.ad-vf-ic) { padding-left: 64px; } }
/* 탈모 아코디언 아이콘(12가지 치료·4유형) 키움 — PC 40/46 → 56, 모바일 28/32 → 36 (10-15) */
.hr-txs .hr-tx-ic, .hr-types .hr-tx-ic { flex: 0 0 56px; width: 56px; height: 56px; margin-left: -12px; }
@media (max-width: 760px) { .hr-txs .hr-tx-ic, .hr-types .hr-tx-ic { flex-basis: 36px; width: 36px; height: 36px; margin-left: -6px; } }

/* 10-15 탈모 FLOW · 5 STAGES — 원고 흐름도대로: 단계 카드(걸친 알약) + 연결선(전환 조건 라벨) + 분기(DECISION) + 반복 표시, 치료 타일은 아이콘 포함
   GROUP 색 변경: A(몸) 코랄 #c0634a, B(두피·모낭) 청록 #2f7a72, 분기 보라 #6b5a8a */
.hr-legend .is-a b { background: #c0634a; } .hr-legend .is-b b { background: #2f7a72; }
.hr-legend .is-d b { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #6b5a8a; border: 1px solid #6b5a8a; }
.hr-legend .is-d b i { width: 8px; height: 8px; background: #6b5a8a; transform: rotate(45deg); }
.hr-fc { display: flex; flex-direction: column; }
.hr-fc-st { position: relative; padding: 28px 24px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 32%, #fff); }
.hr-fc-st > .ac-pill { position: absolute; top: 0; left: 22px; transform: translateY(-50%); margin: 0; background: var(--c); color: #fff; letter-spacing: .08em; }
.hr-fc-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--c); }
.hr-fc-g { padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 11px; letter-spacing: .06em; }
.hr-fc-st.is-a .hr-fc-g { background: #c0634a; } .hr-fc-st.is-b .hr-fc-g { background: #2f7a72; }
.hr-fc-st h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--tg-ink); }
.hr-fc-sub { margin: 4px 0 0; font-size: 14.5px; font-weight: 700; color: var(--c); }
.hr-fc-st > p:not(.hr-fc-k):not(.hr-fc-sub):not(.hr-fc-loop) { margin: 10px 0 0; font-size: 15px; line-height: 1.75; color: var(--tg-body); word-break: keep-all; }
.hr-fc-go { position: relative; display: flex; justify-content: center; align-items: center; min-height: 46px; }
.hr-fc-go::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 8px; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--c1), var(--c2)); }
.hr-fc-go::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border: 6px solid transparent; border-top: 9px solid var(--c2); border-bottom: 0; }
.hr-fc-go:has(span) { min-height: 64px; }
.hr-fc-go span { position: relative; z-index: 1; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #d6dcd8; font-size: 13px; font-weight: 600; color: #4f5a57; }
.hr-fc-tx { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hr-fc-tx li { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-content: start; padding: 12px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.hr-fc-ic { grid-row: 1 / 4; align-self: start; width: 34px; height: 34px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hr-fc-tx small { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--c); }
.hr-fc-tx b { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--tg-ink); word-break: keep-all; }
.hr-fc-tx span { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #5d6563; word-break: keep-all; }
.hr-fc-tx.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hr-fc-tx li.is-sig { background: var(--c); border-color: var(--c); }
.hr-fc-tx li.is-sig .hr-fc-ic { background: #fff; }
.hr-fc-tx li.is-sig small, .hr-fc-tx li.is-sig b { color: #fff; }
.hr-fc-tx li.is-sig span { color: rgba(255, 255, 255, .85); }
.hr-fc-dec { margin-top: 14px; }
.hr-fc-q { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 700; color: var(--tg-ink); }
.hr-fc-q i { width: 14px; height: 14px; background: #6b5a8a; transform: rotate(45deg); }
.hr-fc-q span { padding: 4px 10px; border-radius: 999px; border: 1px solid #6b5a8a; color: #6b5a8a; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.hr-fc-br { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.hr-fc-br::before { content: ""; position: absolute; left: 25%; right: 25%; top: -14px; height: 14px; border: 2px solid #b9aed0; border-bottom: 0; }
.hr-fc-br::after { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 10px; background: #b9aed0; }
.hr-fc-br > div { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); }
.hr-fc-br .is-yes { background: color-mix(in srgb, var(--c) 8%, #fff); }
.hr-fc-br .is-no { border-style: dashed; background: #fff; }
.hr-fc-br small { display: block; font-size: 12.5px; font-weight: 700; color: var(--c); }
.hr-fc-br b { display: block; margin-top: 4px; font-size: 15.5px; color: var(--tg-ink); }
.hr-fc-br b em { font-family: 'Poppins', sans-serif; font-style: normal; color: var(--c); }
.hr-fc-br .is-no b { color: #7f8c87; }
.hr-fc-br span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--tg-body); word-break: keep-all; }
.hr-fc-chain { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin: 12px 0 0; padding: 0; }
.hr-fc-chain li { position: relative; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-size: 14px; font-weight: 700; }
.hr-fc-chain li + li::before { content: ""; position: absolute; left: -19px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--c); border-right: 2px solid var(--c); transform: translateY(-50%) rotate(45deg); }
.hr-fc-loop { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 7px 14px 7px 10px; border: 1px dashed var(--c); color: var(--tg-body); font-size: 14px; }
.hr-fc-loop i { font-style: normal; font-size: 18px; line-height: 1; color: var(--c); }
.hr-fc-loop b { color: var(--c); }
.hr-fc + .fp-warn { margin-top: 40px; }
@media (max-width: 760px) {
  .hr-fc-st { padding: 26px 16px 18px; }
  .hr-fc-st h3 { font-size: 18px; }
  .hr-fc-tx, .hr-fc-tx.is-4 { grid-template-columns: minmax(0, 1fr); }
  .hr-fc-br { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
  .hr-fc-br::before, .hr-fc-br::after { display: none; }
}
/* STAGE 02 치료 7개 — 4칸(4+3), 모바일 2칸 */
@media (min-width: 1100px) { .hr-fc-tx:not(.is-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hr-fc-tx, .hr-fc-tx.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hr-fc-tx li { grid-template-columns: minmax(0, 1fr); padding: 10px; } .hr-fc-ic { grid-row: auto; width: 28px; height: 28px; margin-bottom: 6px; } }
/* STAGE 02 치료 7개 한 줄 — PC(1100+) 7칸, 아이콘 위·글 아래 가운데 (10-15) */
@media (min-width: 1100px) {
  .hr-fc-tx:not(.is-4) { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .hr-fc-tx:not(.is-4) li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 12px 4px 11px; }
  .hr-fc-tx:not(.is-4) .hr-fc-ic { grid-row: auto; width: 32px; height: 32px; margin-bottom: 6px; }
  .hr-fc-tx:not(.is-4) b { font-size: 13.5px; letter-spacing: -.03em; }
  .hr-fc-tx:not(.is-4) span { font-size: 12px; }
}
/* STAGE 03 분기 '예·아니오'를 갈래선이 닿는 상자 위 테두리에 걸친 라벨로 (10-15) */
.hr-fc-br > div { position: relative; padding-top: 22px; }
.hr-fc-br .hr-fc-yn { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-block; margin: 0; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.hr-fc-br .is-yes .hr-fc-yn { background: var(--c); color: #fff; }
.hr-fc-br .is-no .hr-fc-yn { background: #fff; color: #7f8c87; border: 1px solid #b8c2be; }
.hr-fc-br .is-no small { color: #7f8c87; }
@media (max-width: 760px) { .hr-fc-br { gap: 22px; margin-top: 22px; } .hr-fc-br .hr-fc-yn { left: 16px; transform: translateY(-50%); } }
@media (min-width: 761px) { .hr-fc-br { margin-top: 40px; } .hr-fc-br::before { top: -24px; height: 24px; } .hr-fc-br::after { top: -36px; height: 12px; } }
.hr-fc-st > p.hr-fc-c { text-align: center; }
/* 원고 .hub 처럼 — 치료 묶음 앞 문구·DECISION 질문을 가운데 점선 알약으로, 아래로 짧은 줄기선 (10-15) */
.hr-fc-st > p.hr-fc-hub { position: relative; display: table; margin: 16px auto 0; padding: 8px 20px; border: 1px dashed #c3cbc7; border-radius: 100px; background: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.5; color: #5d6563; text-align: center; }
.hr-fc-hub b { font-weight: 700; color: var(--tg-ink); }
.hr-fc-hub + .hr-fc-tx { position: relative; margin-top: 30px; }
.hr-fc-hub + .hr-fc-tx::before { content: ""; position: absolute; left: 50%; top: -30px; width: 1px; height: 30px; background: #c3cbc7; }
.hr-fc-dec { text-align: center; }
.hr-fc-q { display: inline-flex; justify-content: center; padding: 8px 20px; border: 1px dashed #b9aed0; border-radius: 100px; background: rgba(255, 255, 255, .7); }
.hr-fc-br { text-align: left; }
@media (max-width: 760px) { .hr-fc-st > p.hr-fc-hub { padding: 7px 14px; font-size: 13.5px; } .hr-fc-q { padding: 8px 14px; font-size: 14.5px; gap: 8px; } }
#hr-flow .hr-fc-st > p.hr-fc-hub { margin: 16px auto 0; font-size: 14.5px; line-height: 1.5; color: #5d6563; }
@media (max-width: 760px) { #hr-flow .hr-fc-st > p.hr-fc-hub { font-size: 13.5px; } }

/* 10-15 탈모 FLOW · 5 STAGES — 원고(fc-scope) 흐름도 구조 그대로: 왼쪽 STAGE 이름, 오른쪽 흐름도(입구 상자 → 점선 알약 → 가지선 → 치료 칸 → 모이는 선 → 화살표 라벨 → 판단 육각형 → 예/아니오 → 출구 상자), 오른쪽 반복 점선
   색: GROUP A 코랄 #c0634a, GROUP B 청록 #2f7a72, 판단 보라 #6b5a8a */
.hr-f2, .hr-f2-rep { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 26px; }
.hr-f2-rep { grid-column: 1 / -1; position: relative; }
.hr-f2-rep > .hr-f2-cell, .hr-f2-rep > .hr-f2-go { padding-right: 44px; }
.hr-f2 > .hr-f2-cell, .hr-f2 > .hr-f2-go { padding-right: 44px; }
.hr-f2-lab { padding-top: 2px; }
.hr-f2-pill { display: inline-block; padding: 5px 11px; background: var(--c); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; line-height: 1.2; }
.hr-f2-lab b { display: block; margin-top: 12px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.hr-f2-lab small { display: block; margin-top: 8px; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; color: #7d8784; }
/* 입구·출구 상자 */
.hr-f2-box { padding: 18px 22px; border: 1px solid #3d5a80; background: color-mix(in srgb, #3d5a80 6%, #fff); }
.hr-f2-box h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--tg-ink); }
.hr-f2-box p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--tg-body); word-break: keep-all; }
.hr-f2-box.is-exit { border-color: #2f7a72; background: color-mix(in srgb, #2f7a72 7%, #fff); }
/* 화살표 */
.hr-f2-go { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 52px; }
.hr-f2-go::before { content: ""; width: 1px; flex: 1 1 auto; min-height: 30px; background: #b8c0b0; }
.hr-f2-go::after { content: ""; border: 5px solid transparent; border-top: 8px solid #b8c0b0; border-bottom: 0; }
.hr-f2-go span { order: 3; margin: 6px 0 10px; font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: .14em; color: #7d8784; }
/* 점선 알약 */
.hr-f2-hub { display: table; margin: 0 auto; padding: 8px 20px; border: 1px dashed #c3cbc7; border-radius: 100px; background: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.5; color: #5d6563; text-align: center; }
.hr-f2-hub b { font-weight: 700; color: var(--tg-ink); }
/* 가지선 + 치료 칸 */
.hr-f2-fan { position: relative; display: grid; gap: 8px; margin-top: 22px; padding: 22px 0; }
.hr-f2-fan.is-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hr-f2-fan.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hr-f2-fan.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 0; }
.hr-f2-fan::before { content: ""; position: absolute; left: 50%; top: -22px; width: 1px; height: 22px; background: #b8c0b0; }
.hr-f2-fan.is-7::after, .hr-f2-fan.is-4::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 0; }
.hr-f2-nd { position: relative; display: flex; flex-direction: column; padding: 12px 10px 13px; background: #fbfaf7; border: 1px solid #ddd8cc; }
.hr-f2-nd::before, .hr-f2-nd::after { content: ""; position: absolute; left: 50%; width: 1px; height: 22px; background: #b8c0b0; }
.hr-f2-nd::before { top: -23px; }
.hr-f2-fan.is-7 .hr-f2-nd::after, .hr-f2-fan.is-4 .hr-f2-nd::after { bottom: -23px; }
.hr-f2-fan.is-2 .hr-f2-nd::after { display: none; }
/* 가로 버스선: 첫 칸 가운데 ~ 끝 칸 가운데 */
.hr-f2-fan > .hr-f2-nd:first-child > span::before, .hr-f2-fan > .hr-f2-nd:first-child > span::after { content: none; }
.hr-f2-fan { --n: 7; }
.hr-f2-fan.is-4 { --n: 4; } .hr-f2-fan.is-2 { --n: 2; }
.hr-f2-cell { position: relative; }
.hr-f2-fan > i.hr-f2-bus { display: none; }
.hr-f2-fan { background: linear-gradient(#b8c0b0, #b8c0b0) no-repeat calc(50% / var(--n)) 0 / calc(100% - 100% / var(--n)) 1px, linear-gradient(#b8c0b0, #b8c0b0) no-repeat calc(50% / var(--n)) 100% / calc(100% - 100% / var(--n)) 1px; }
.hr-f2-fan.is-2 { background: linear-gradient(#b9aed0, #b9aed0) no-repeat 25% 0 / 50% 1px; }
.hr-f2-nd > span { display: inline-block; align-self: flex-start; padding: 3px 7px; background: var(--g, #3d5a80); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; }
.hr-f2-cell.is-a { --g: #c0634a; } .hr-f2-cell.is-b { --g: #2f7a72; }
.hr-f2-nd b { margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--tg-ink); word-break: keep-all; }
.hr-f2-nd small { margin-top: 5px; font-size: 12px; line-height: 1.5; color: #6b7471; word-break: keep-all; }
.hr-f2-nd small i { font-style: normal; font-weight: 700; color: var(--g); }
.hr-f2-nd em { align-self: flex-start; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--g) 12%, #fff); color: var(--g); font-style: normal; font-size: 11.5px; font-weight: 700; }
.hr-f2-nd.is-skip { border-style: dashed; background: transparent; }
.hr-f2-nd.is-skip > span { background: #8a9490; }
/* 판단 육각형 */
.hr-f2-dec { position: relative; display: table; margin: 0 auto; padding: 12px 40px; background: #fff; text-align: center; clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); filter: drop-shadow(0 0 0 #6b5a8a); }
.hr-f2-dec::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.hr-f2-cell .hr-f2-dec { background: linear-gradient(#fff, #fff) padding-box; outline: 0; }
.hr-f2-dec small { display: block; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #6b5a8a; }
.hr-f2-dec b { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--tg-ink); }
.hr-f2-dwrap { display: none; }
/* 예/아니오 라벨: 갈래선 위 */
.hr-f2-fan.is-2 { margin-top: 26px; padding-top: 44px; }
.hr-f2-fan.is-2::before { top: -26px; height: 26px; background: #b9aed0; }
.hr-f2-fan.is-2 .hr-f2-nd::before { top: -45px; height: 44px; background: #b9aed0; }
.hr-f2-yn { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 3px 12px; border-radius: 100px; border: 1px dashed #b8c0b0; background: #fff; color: #7d8784; font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; }
.hr-f2-yn.is-yes { border-color: #2f7a72; background: color-mix(in srgb, #2f7a72 10%, #fff); color: #2f7a72; }
/* 반복 점선 (STAGE 02 ~ 05 오른쪽) */
.hr-f2-loop { position: absolute; right: 0; top: 18px; bottom: 54px; width: 26px; border: 1px dashed #c0634a; border-left: 0; }
.hr-f2-loop::before { content: ""; position: absolute; left: -10px; top: -5px; border: 5px solid transparent; border-right: 8px solid #c0634a; border-left: 0; }
.hr-f2-loop span { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); padding: 8px 2px; background: var(--tg-bg, #fff); writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #c0634a; white-space: nowrap; }
.hr-f2 + .fp-warn { margin-top: 40px; }
/* 좁은 PC: 7칸 → 4칸, 가로 버스선 숨김 */
@media (max-width: 1299px) {
  .hr-f2-fan.is-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hr-f2-fan.is-7, .hr-f2-fan.is-4 { background: none; }
  .hr-f2-fan.is-7 .hr-f2-nd::before, .hr-f2-fan.is-7 .hr-f2-nd::after, .hr-f2-fan.is-4 .hr-f2-nd::before, .hr-f2-fan.is-4 .hr-f2-nd::after { display: none; }
}
/* 모바일: STAGE 이름을 흐름 위로, 칸 2열, 반복선 숨김 */
@media (max-width: 760px) {
  .hr-f2, .hr-f2-rep { grid-template-columns: minmax(0, 1fr); }
  .hr-f2 > .hr-f2 > div:empty, .hr-f2 > div:empty, .hr-f2-rep > div:empty { display: none; }
  .hr-f2-rep > .hr-f2-cell, .hr-f2-rep > .hr-f2-go, .hr-f2 > .hr-f2-cell, .hr-f2 > .hr-f2-go { padding-right: 0; }
  .hr-f2-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 12px; }
  .hr-f2-lab b { margin-top: 0; font-size: 17px; }
  .hr-f2-lab small { flex-basis: 100%; margin-top: 0; }
  .hr-f2-lab small br { display: none; }
  .hr-f2-fan.is-7, .hr-f2-fan.is-4, .hr-f2-fan.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-f2-loop { display: none; }
  .hr-f2-fan.is-2 { background: none; padding-top: 30px; }
  .hr-f2-fan.is-2 .hr-f2-nd::before { display: none; }
  .hr-f2-yn { top: -26px; left: 0; transform: none; }
  .hr-f2-dec { padding: 12px 30px; }
}
/* 육각형 테두리: 바깥 보라 + 안쪽 흰 면 */
.hr-f2-cell .hr-f2-dec { isolation: isolate; background: #6b5a8a; filter: none; }
.hr-f2-dec::before { inset: 1.5px; background: #fbfaf7; clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); }
@media (max-width: 760px) {
  .hr-f2 > div:empty:not(.hr-f2-go), .hr-f2-rep > div:empty:not(.hr-f2-go) { display: none; }
  .hr-f2 > .hr-f2-go:empty, .hr-f2-rep > .hr-f2-go:empty { display: flex; min-height: 44px; margin: 6px 0; }
  .hr-f2-go { margin: 6px 0; }
}
/* STAGE 03 판단 — 위 점선 알약과 같은 모양, 앞에 작은 다이아몬드 + 문구 (DECISION 테두리 알약 없앰) (10-15) */
.hr-fc-q { gap: 8px; padding: 8px 20px; border-color: #c3cbc7; font-size: 14.5px; font-weight: 700; }
.hr-fc-q i { width: 8px; height: 8px; flex: 0 0 8px; background: #6b5a8a; }
.hr-fc-q span { padding: 0; border: 0; border-radius: 0; font-size: 11px; color: #6b5a8a; }
/* STAGE 04 치료 4개 한 줄 — STAGE 02 와 같은 세로 칸(아이콘 위·글 아래 가운데) (10-15) */
@media (min-width: 1100px) {
  .hr-fc-tx.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hr-fc-tx.is-4 li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 14px 8px 13px; }
  .hr-fc-tx.is-4 .hr-fc-ic { grid-row: auto; width: 36px; height: 36px; margin-bottom: 6px; }
  .hr-fc-tx.is-4 b { font-size: 14.5px; }
}
/* STAGE 03 갈래선 세로 길이 늘림 (10-15) */
@media (min-width: 761px) { .hr-fc-br { margin-top: 64px; } .hr-fc-br::before { top: -36px; height: 36px; } .hr-fc-br::after { top: -64px; height: 28px; } }
/* STAGE 04 — 점선 알약 아래 가지선: 줄기 → 가로선 → 카드 4장으로 세로선 4개 (10-15) */
@media (min-width: 1100px) {
  .hr-fc-hub + .hr-fc-tx.is-4 { margin-top: 56px; }
  .hr-fc-hub + .hr-fc-tx.is-4::before { top: -56px; height: 28px; }
  .hr-fc-hub + .hr-fc-tx.is-4::after { content: ""; position: absolute; top: -28px; left: calc((100% - 18px) / 8); right: calc((100% - 18px) / 8); height: 1px; background: #c3cbc7; }
  .hr-fc-tx.is-4 li { position: relative; }
  .hr-fc-tx.is-4 li::before { content: ""; position: absolute; left: 50%; top: -28px; width: 1px; height: 28px; background: #c3cbc7; }
}
/* STAGE 02 — 같은 가지선: 줄기 → 가로선 → 카드 7장 세로선 (10-15) */
@media (min-width: 1100px) {
  .hr-fc-hub + .hr-fc-tx:not(.is-4) { margin-top: 56px; }
  .hr-fc-hub + .hr-fc-tx:not(.is-4)::before { top: -56px; height: 28px; }
  .hr-fc-hub + .hr-fc-tx:not(.is-4)::after { content: ""; position: absolute; top: -28px; left: calc((100% - 36px) / 14); right: calc((100% - 36px) / 14); height: 1px; background: #c3cbc7; }
  .hr-fc-tx:not(.is-4) li { position: relative; }
  .hr-fc-tx:not(.is-4) li::before { content: ""; position: absolute; left: 50%; top: -28px; width: 1px; height: 28px; background: #c3cbc7; }
}
/* 가지선 = 단계색(02 코랄·04 청록), 점선 알약 테두리 2px·단계색 (10-15) */
.hr-fc-hub + .hr-fc-tx::before, .hr-fc-hub + .hr-fc-tx::after, .hr-fc-hub + .hr-fc-tx li::before { background: color-mix(in srgb, var(--c) 70%, #fff) !important; }
#hr-flow .hr-fc-st > p.hr-fc-hub { border: 2px dashed color-mix(in srgb, var(--c) 55%, #fff); }
.hr-fc-q { border-width: 2px; }
/* 제목과 점선 알약 사이 간격 좁힘 (10-15) */
#hr-flow .hr-fc-st > p.hr-fc-hub { margin-top: 2px; }
.hr-fc-dec { margin-top: 2px; }
/* 가지선 세로 길이 늘림: 줄기 28→38, 카드 쪽 28→36 (10-15) */
@media (min-width: 1100px) {
  .hr-fc-hub + .hr-fc-tx.is-4, .hr-fc-hub + .hr-fc-tx:not(.is-4) { margin-top: 74px; }
  .hr-fc-hub + .hr-fc-tx.is-4::before, .hr-fc-hub + .hr-fc-tx:not(.is-4)::before { top: -74px; height: 38px; }
  .hr-fc-hub + .hr-fc-tx.is-4::after, .hr-fc-hub + .hr-fc-tx:not(.is-4)::after { top: -36px; }
  .hr-fc-tx.is-4 li::before, .hr-fc-tx:not(.is-4) li::before { top: -36px; height: 36px; }
}
/* 점선 알약 줄기선 위치 미세 보정 — 사용자 지정 49.9% (가운데 카드 세로선과 한 줄로) (10-15) */
.hr-fc-hub + .hr-fc-tx::before { left: 49.9%; }
/* STAGE 03 갈래선 두께 2px → 1px (다른 가지선과 같게) (10-15) */
.hr-fc-br::before { border-width: 1px; }
.hr-fc-br::after { width: 1px; left: 49.9%; }
/* 단계 사이 화살촉 키움 12×9 → 18×13 (10-15) */
.hr-fc-go::after { border-left-width: 9px; border-right-width: 9px; border-top-width: 13px; }
.hr-fc-go::before { bottom: 12px; }
/* DECISION 글자·다이아몬드 키움 (10-15) */
.hr-fc-q span { font-size: 13px; }
.hr-fc-q i { width: 11px; height: 11px; flex: 0 0 11px; }
/* DECISION 점선 테두리 = 판단 보라 (갈래선·다이아몬드와 같은 계열) (10-15) */
.hr-fc-q { border-color: color-mix(in srgb, #6b5a8a 55%, #fff); }
/* 화살촉 조금 줄임 18×13 → 14×11 (10-15) */
.hr-fc-go::after { border-left-width: 7px; border-right-width: 7px; border-top-width: 11px; }
.hr-fc-go::before { bottom: 10px; }
/* 단계 사이 화살표 세로 길이 늘림 46→64, 라벨 있는 곳 64→84 (10-15) */
.hr-fc-go { min-height: 64px; }
.hr-fc-go:has(span) { min-height: 84px; }
/* 모바일: 제목과 점선 알약 사이 조금 띄움 (10-15) */
@media (max-width: 760px) { #hr-flow .hr-fc-st > p.hr-fc-hub, .hr-fc-dec { margin-top: 12px; } }
/* STAGE 05 '경과 확인 → 간격 조정 → 유지 관리' — 모바일에서 줄바꿈되며 화살표가 줄 앞에 걸리던 문제: 한 줄 고정·작게 (10-15) */
@media (max-width: 760px) {
  .hr-fc-chain { flex-wrap: nowrap; gap: 0 18px; }
  .hr-fc-chain li { flex: 0 1 auto; padding: 5px 10px; font-size: 13px; white-space: nowrap; }
  .hr-fc-chain li + li::before { left: -13px; width: 6px; height: 6px; }
}
@media (max-width: 360px) { .hr-fc-chain { gap: 0 14px; } .hr-fc-chain li { padding: 5px 8px; font-size: 12px; } .hr-fc-chain li + li::before { left: -11px; } }
/* 모바일: STAGE 카드 머리(알약·영문 라벨·제목·부제) 가운데 정렬 (10-15) */
@media (max-width: 760px) {
  .hr-fc-st > .ac-pill { left: 50%; transform: translate(-50%, -50%); }
  .hr-fc-k { justify-content: center; text-align: center; }
  .hr-fc-st h3, .hr-fc-sub { text-align: center; }
}
/* 모바일: 가운데 STAGE 알약이 화살촉을 가리지 않게 — 화살표 끝을 알약 위로 (10-15) */
@media (max-width: 760px) { .hr-fc-go { margin-bottom: 15px; } }
/* 모바일: 단계 제목 위아래 여백 늘림 (10-15) */
@media (max-width: 760px) {
  .hr-fc-k { margin-bottom: 12px; }
  #hr-flow .hr-fc-st > p.hr-fc-hub, .hr-fc-dec { margin-top: 20px; }
}
/* 모바일 FLOW 치료 칸 — 번호를 아이콘 옆 같은 줄에 (10-15) */
@media (max-width: 760px) {
  .hr-fc-tx li, .hr-fc-tx.is-4 li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: center; }
  .hr-fc-tx .hr-fc-ic { grid-row: 1; grid-column: 1; margin-bottom: 0; }
  .hr-fc-tx small { grid-row: 1; grid-column: 2; }
  .hr-fc-tx b, .hr-fc-tx span { grid-column: 1 / -1; }
  .hr-fc-tx b { margin-top: 8px; }
}
/* 모바일 FLOW 자연스러운 줄바꿈 — 단어 단위(keep-all) + 짧은 칸은 줄 길이 균형, 문단은 마지막 줄 외톨이 방지 (10-15) */
@media (max-width: 760px) {
  #hr-flow { word-break: keep-all; overflow-wrap: break-word; }
  #hr-flow .hr-fc-tx b, #hr-flow .hr-fc-tx span, #hr-flow .hr-fc-br b, #hr-flow .hr-fc-br span, #hr-flow .hr-fc-st h3, #hr-flow .hr-fc-hub, #hr-flow .hr-fc-q { text-wrap: balance; }
  #hr-flow p, #hr-flow li { text-wrap: pretty; }
}
/* 시술 순서(B안) 모바일 세로 연결선 3px → 1px (10-15) */
@media (max-width: 760px) { .hr-seqb::before { width: 1px; left: 27.5px; } }
/* 시술 순서(B안) PC 가로 연결선도 3px → 1px (10-15) */
@media (min-width: 761px) { .hr-seqb::before { height: 1px; top: 28px; } }

/* 10-15 뼈·관절 개요(herb-bone) — 외곽 박스 모서리 직각 (알약·버튼은 그대로) */
.herb-page.is-bone :is(.rx-spec, .rx-callout, .rx-card, .rx-card-pic, .hc-caution > li, .hc-caution-pic, .rx-disclaimer) { border-radius: 0; }

/* 10-15 뼈·관절 HEALING STAGES — 단계 아이콘(염증기 골절 / 복원기 세포 재생 / 재형성기 단단해진 뼈), 원 없이 초록 72% 마스크, 번호 줄 오른쪽 */
.herb-page.is-bone #hx-stage .hc-factors li { position: relative; }
.herb-page.is-bone .hc-st-ic { position: absolute; top: 20px; right: 0; width: 52px; height: 52px; background: color-mix(in srgb, #137a52 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (min-width: 761px) { .herb-page.is-bone .hc-st-ic { top: 22px; right: 22px; } }
@media (max-width: 760px) { .herb-page.is-bone .hc-st-ic { width: 40px; height: 40px; top: 18px; } .herb-page.is-bone #hx-stage .hc-factors li { padding-right: 52px; } }

/* 10-15 특수한약 비교(약재 → 처방) 가운데 화살표 — A안: 작은 흰 원 + 얇은 꺾쇠, 1px 테두리, 그림자 없음 (모든 fx 처방 페이지 공통) */
@media (min-width: 760px) {
  .fx-vs .fx-vs-arrow { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1px solid #cfe3d8; background: #fff; box-shadow: none; }
  .fx-vs .fx-vs-arrow .fx-band-img { display: none; }
  .fx-vs .fx-vs-arrow::before { content: ""; width: 10px; height: 10px; margin-left: -4px; border-top: 1.5px solid #137a52; border-right: 1.5px solid #137a52; transform: rotate(45deg); }
}

/* 10-15 특수한약 처방 상세 '회복 단계' 3칸(fx-steps) — A안: 번호 원(초록 단계색) + 이어지는 가는 선 + 공용 펄스, 아래 아이콘(있으면)·제목·설명 가운데. 3칸 목록 21개 페이지 공통 */
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) { counter-reset: fxst; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li { --c: #137a52; counter-increment: fxst; position: relative; display: flex; flex-direction: column; align-items: center; padding: 72px 16px 0; text-align: center; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(2) { --c: #2e8c66; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(3) { --c: #4fa07f; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::after { content: counter(fxst, decimal-leading-zero); position: absolute; top: 0; left: 50%; width: 54px; height: 54px; margin-left: -27px; border: 0; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; box-shadow: none; animation: fpGtPulse 2.4s ease-out infinite; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(2)::after { animation-delay: .4s; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(3)::after { animation-delay: .8s; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:first-child::after { background: var(--c); }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::before, .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:first-child::before { content: ""; position: absolute; top: 27px; left: 50%; right: auto; bottom: auto; width: 100%; height: 1px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:last-child::before { display: none; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li > span { display: none; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) .fx-st-ic { display: block; width: 42px; height: 42px; margin: 0 auto 10px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) b { margin-bottom: 8px; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) p { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::after { animation: none; } }
@media (max-width: 759px) {
  .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li { align-items: flex-start; padding: 2px 0 28px 64px; text-align: left; min-height: 64px; }
  .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::after { left: 0; margin-left: 0; width: 46px; height: 46px; font-size: 15px; }
  .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::before, .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:first-child::before { top: 46px; left: 22.5px; bottom: 0; width: 1px; height: auto; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 55%, #fff)); }
  .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) .fx-st-ic { width: 34px; height: 34px; margin: 0 0 8px; }
}
/* 특수한약 비교(약재 vs 처방) 두 상자 모서리 직각 (10-15, fx 처방 페이지 공통) */
.fx-vs .fx-vs-col { border-radius: 0; }
/* 비교 섹션 왼쪽 제목을 오른쪽 상자 윗선에 맞춤 (가운데 정렬 → 위 정렬) (10-15) */
@media (min-width: 960px) { .fx-compare { align-items: start; } .fx-compare-hd { margin-top: 0; padding-top: 0; } .fx-compare-hd .fx-h { margin-top: 0; } }
@media (min-width: 960px) { .fx-compare-hd .fx-h { margin-top: -7px; } }
/* 비교 화살표 다시 — C안: 짙은 초록 원(오른쪽 상자 색)이 경계에 걸치고 흰 테두리 + 흰 꺾쇠 (10-15) */
@media (min-width: 760px) {
  .fx-vs .fx-vs-arrow { width: 50px; height: 50px; margin: -25px 0 0 -25px; border: 3px solid #fff; background: #137a52; }
  .fx-vs .fx-vs-arrow::before { width: 11px; height: 11px; margin-left: -5px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
}
/* 효과 카드 워터마크 번호 조금 줄임 (10-15, fx 공통) */
.fx-effect-cards em { font-size: 72px; top: -2px; right: 20px; }
@media (max-width: 560px) { .fx-effect-cards em { font-size: 58px; top: -2px; } }
/* 처방 상세 회복 단계 번호 원 — 컬러풀하게(갈색 → 파랑 → 올리브, 탈모 '시술 순서'와 같은 계열), 선은 앞뒤 색을 잇는 그라데이션 (10-15, 3칸 21개 페이지 공통) */
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(1) { --c: #b8613f; --n: #2f6fb3; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(2) { --c: #2f6fb3; --n: #5f7442; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(3) { --c: #5f7442; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::before, .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:first-child::before { background: linear-gradient(90deg, var(--c), var(--n, var(--c))); }
@media (max-width: 759px) { .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::before, .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:first-child::before { background: linear-gradient(var(--c), var(--n, var(--c))); } }
/* 연결선이 1px 이라 진한 색끼리 섞이면 회색처럼 보임 → 각 색의 밝은 톤으로 이어 줌 */
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::before, .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:first-child::before { height: 2px; top: 26px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), color-mix(in srgb, var(--n, var(--c)) 60%, #fff)); }
@media (max-width: 759px) { .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li::before, .fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:first-child::before { height: auto; width: 2px; left: 22px; top: 46px; background: linear-gradient(color-mix(in srgb, var(--c) 60%, #fff), color-mix(in srgb, var(--n, var(--c)) 60%, #fff)); } }
/* 특수한약 '안내' 상자 모서리 직각 (아직 아래 상자로 남은 페이지들) (10-15) */
.rx-disclaimer { border-radius: 0; }
/* 처방 상세 FAQ — 표준 FAQ 디자인 + 원래의 연한 초록 전폭 배경 유지 (10-15) */
.fx-page #hx-faq.fx-soft { padding-top: 80px; padding-bottom: 80px; }
.fx-page #hx-faq.fx-soft .faq-list .faq { background: transparent; }
@media (max-width: 760px) { .fx-page #hx-faq.fx-soft { padding-top: 56px; padding-bottom: 56px; } }
/* 처방 상세 FAQ 배경 — 위 연한 초록에서 아래로 갈수록 흰색 (전폭) (10-15) */
.fx-page #hx-faq.fx-soft { position: relative; isolation: isolate; background: none; box-shadow: none; clip-path: none; }
.fx-page #hx-faq.fx-soft::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient(180deg, var(--fx-soft) 0%, var(--fx-soft) 25%, #fff 100%); pointer-events: none; }
/* ↑ 100vw 가상요소는 PC 스크롤바 폭만큼 가로 스크롤을 만들 수 있어 → border-image 바깥 칠하기(레이아웃에 영향 없음)로 교체 */
.fx-page #hx-faq.fx-soft::before { content: none; }
.fx-page #hx-faq.fx-soft { border-image: linear-gradient(180deg, var(--fx-soft) 0%, var(--fx-soft) 25%, #fff 100%) fill 0 / 0 / 0 100vmax; }
/* 처방 상세 FAQ 아래 응급 안내(fx-alert) — FAQ 목록 아래로 옮겨짐, 모서리 직각 (10-15) */
.fx-page #hx-faq .fx-alert { margin: 28px 0 0; border-radius: 0; }
/* 처방 상세 CASE 띠 — 모서리 직각, 'CASE 01' 을 초록 알약 라벨로 (10-15, fx 공통) */
.fx-band { border-radius: 0; }
.fx-band-txt em { align-self: flex-start; margin-bottom: 4px; padding: 3px 10px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 11.5px; letter-spacing: .1em; line-height: 1.4; }
/* 효과 섹션 왼쪽 제목을 오른쪽 카드 윗선에 맞춤 (가운데 → 위 정렬, fx 공통) (10-15) */
@media (min-width: 960px) { .fx-effect { align-items: start; } .fx-effect-hd .fx-h { margin-top: -7px; } }
/* 처방 상세(fx) 박스 모서리 전부 직각 — 복용 안내 띠·약재 노트·관련 자료·효과 카드·대상 카드·특별한 이유·함께 복용·소개 사진 (원형 약재 구슬·알약은 그대로) (10-15) */
.fx-page :is(.fx-dose, .fx-herb-box, .fx-ref-body, .fx-effect-cards > li, .fx-for-grid > li, .fx-reason-list > li, .fx-reason-list figure, .fx-with-pic, .fx-with-card, .fx-intro-pic, .fx-intro-pic img, .fx-step-cards.is-four > li, .fx-step-cards.is-check > li) { border-radius: 0; }

/* 10-15 처방 상세 구성 약재 구슬 — 실제 약재 사진 배경(.has-photo, --pic) + 어두운 막 위 흰 이름 (오공환부터) */
.fx-herbs .fx-herb-orbs li .fx-orb.has-photo { background: linear-gradient(180deg, rgba(15, 25, 20, .28), rgba(15, 25, 20, .55)), var(--pic) center / cover no-repeat; }
.fx-herbs .fx-herb-orbs li .fx-orb.has-photo b { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.fx-herbs .fx-herb-orbs li .fx-orb.has-photo i { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }

/* 10-15 처방 상세 '복용·제형 안내' 띠(fx-dose) 새 디자인 — 한 덩어리 표 대신 떨어진 카드, 윗선 초록 2px, 체크 아이콘 + 제목, 아래 큰 워터마크 번호 (fx 공통) */
.fx-herbs .fx-dose { gap: 14px; border: 0; background: none; overflow: visible; counter-reset: fxd; }
.fx-herbs .fx-dose li, .fx-herbs .fx-dose li + li, .fx-herbs .fx-dose.is-four li:nth-child(n+3) { counter-increment: fxd; position: relative; overflow: hidden; padding: 26px 24px 30px; background: #fff; border: 1px solid var(--fx-line); border-top: 2px solid var(--tg-med); border-radius: 0; }
.fx-herbs .fx-dose b { position: relative; z-index: 1; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.45; color: var(--tg-ink); word-break: keep-all; }
.fx-herbs .fx-dose b::before { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; box-shadow: none; background: var(--tg-med) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.fx-herbs .fx-dose span { position: relative; z-index: 1; padding-left: 32px; }
.fx-herbs .fx-dose li::after { content: counter(fxd, decimal-leading-zero); position: absolute; right: 14px; bottom: -12px; z-index: 0; font-family: 'Poppins', sans-serif; font-size: 58px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: rgba(19, 122, 82, .08); pointer-events: none; }
@media (max-width: 760px) { .fx-herbs .fx-dose li, .fx-herbs .fx-dose li + li { padding: 22px 18px 26px; } .fx-herbs .fx-dose li::after { font-size: 48px; } }
/* 처방 상세 약재 구슬 조금 크게 132 → 156 (모바일 112 → 128) (10-15, fx 공통) */
.fx-herbs .fx-herb-orbs .fx-orb { width: 156px; height: 156px; }
.fx-herbs .fx-herb-orbs .fx-orb b { font-size: 26px; }
@media (max-width: 760px) { .fx-herbs .fx-herb-orbs .fx-orb { width: 128px; height: 128px; } .fx-herbs .fx-herb-orbs .fx-orb b { font-size: 22px; } }
/* 약재 구슬 사이 + 키움 26 → 36px, 원 커진 만큼 세로 위치 맞춤 (10-15) */
@media (min-width: 1100px) { .fx-herbs .fx-herb-orbs li + li::after { top: 60px; left: -26px; width: 32px; font-size: 36px; font-weight: 400; } }
/* 약재 구슬 조금 더 156 → 176 (모바일 128 → 140), + 위치 따라 내림 (10-15) */
.fx-herbs .fx-herb-orbs .fx-orb, .fx-herbs .fx-herb-orbs.is-pic .fx-orb { width: 176px; height: 176px; }
.fx-herbs .fx-herb-orbs .fx-orb b { font-size: 28px; }
@media (min-width: 1100px) { .fx-herbs .fx-herb-orbs li + li::after { top: 70px; } }
@media (max-width: 760px) { .fx-herbs .fx-herb-orbs .fx-orb, .fx-herbs .fx-herb-orbs.is-pic .fx-orb { width: 140px; height: 140px; } .fx-herbs .fx-herb-orbs .fx-orb b { font-size: 23px; } }

/* 10-15 접골탕 연구 블록(fx-research) 새 디자인 — 왼쪽 짙은 초록 '연구 카드'(라벨·제목·설명·출처), 오른쪽 관찰 결과 3단계 세로 흐름(아이콘 원 + 번호 + 연결선), 아래 안내 띠. 모서리 직각 */
.fx-research { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border-radius: 0; border: 1px solid var(--fx-line); overflow: hidden; }
.fx-research-hd { padding: 40px 40px 36px; background: linear-gradient(160deg, var(--tg-deep) 0%, #1d5846 100%); color: #fff; }
.fx-research-hd em { background: rgba(143, 211, 180, .18); color: #bfe8d5; border: 1px solid rgba(191, 232, 213, .35); }
.fx-research-hd b { margin-top: 4px; font-size: 26px; font-weight: 600; line-height: 1.4; color: #fff; word-break: keep-all; }
.fx-research-hd p { color: rgba(255, 255, 255, .82); }
.fx-research-hd p .br-pc { display: none; }
.fx-research-cards { counter-reset: none; margin: 0; padding: 32px 36px 8px; grid-template-columns: minmax(0, 1fr) !important; gap: 0; background: #fff; }
.fx-research-cards li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 0 0 26px; border-radius: 0; background: none; overflow: visible; }
.fx-research-cards li:not(:last-child)::before { content: ""; position: absolute; left: 27.5px; top: 58px; bottom: 4px; width: 1px; background: linear-gradient(var(--tg-med), rgba(19, 122, 82, .2)); }
.fx-research-cards .fx-rs-ic { grid-row: 1 / span 3; display: block; width: 56px; height: 56px; border-radius: 50%; background: var(--fx-soft) ; position: relative; }
.fx-research-cards .fx-rs-ic::after { content: ""; position: absolute; inset: 12px; background: color-mix(in srgb, var(--tg-med) 80%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fx-research-cards span { position: static; grid-column: 2; margin: 2px 0 0; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; line-height: 1.3; color: var(--tg-med); opacity: 1; }
.fx-research-cards span::before { content: "RESULT "; }
.fx-research-cards b { grid-column: 2; padding-right: 0; margin-top: 3px; font-size: 19px; }
.fx-research-cards p { grid-column: 2; margin-top: 4px; font-size: 15.5px; }
.fx-research-note { grid-column: 1 / -1; margin: 0; border-radius: 0; border-top: 1px solid #efe3c4; }
.fx-research-cite { grid-column: 1 / -1; margin: 0; padding: 14px 20px 18px; background: #fff; }
@media (min-width: 960px) {
  .fx-research { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .fx-research-hd { justify-content: center; padding: 48px 44px; }
  .fx-research-cards { padding: 40px 44px 14px; }
}
@media (max-width: 560px) { .fx-research-hd { padding: 30px 22px 28px; } .fx-research-cards { padding: 26px 20px 4px; } .fx-research-cards li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; } .fx-research-cards .fx-rs-ic { width: 46px; height: 46px; } .fx-research-cards .fx-rs-ic::after { inset: 10px; } .fx-research-cards li:not(:last-child)::before { left: 22.5px; top: 48px; } }
/* 처방 상세 회복 단계 번호 원 색 다시 — 차분한 톤(더스티 틸 → 샌드 골드 → 모브 로즈), 펄스 고리도 같은 톤 (10-15) */
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(1) { --c: #3f7f86; --n: #b8894a; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(2) { --c: #b8894a; --n: #a8667a; }
.fx-steps > .fx-step-cards:not(.is-check):not(.is-four) > li:nth-child(3) { --c: #a8667a; }
/* 처방 상세 생활 관리 카드 — 워터마크 번호 줄임 + 모서리 직각 (10-15, fx 공통) */
.fx-care-cards li, .fx-care-cards .fx-care-pic, .fx-care-cards .fx-care-pic img { border-radius: 0; }
.fx-care-cards span { font-size: 56px; top: calc(62.5cqw + 8px); right: 12px; }
@media (max-width: 560px) { .fx-care-cards span { font-size: 50px; } }
/* 10-15 특수한약 개요 페이지 공통(.is-bone 과 같은 처리를 .is-ov 에도) — 박스 직각, 단계 아이콘 */
.herb-page.is-ov :is(.rx-spec, .rx-callout, .rx-card, .rx-card-pic, .hc-caution > li, .hc-caution-pic, .rx-disclaimer) { border-radius: 0; }
.herb-page.is-ov .hc-factors li { position: relative; }
.herb-page.is-ov .hc-st-ic { position: absolute; top: 20px; right: 0; width: 52px; height: 52px; background: color-mix(in srgb, #137a52 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (min-width: 761px) { .herb-page.is-ov .hc-st-ic { top: 22px; right: 22px; } }
@media (max-width: 760px) { .herb-page.is-ov .hc-st-ic { width: 40px; height: 40px; top: 18px; } .herb-page.is-ov .hc-factors li { padding-right: 52px; } }
/* 심적환 상세 — 상단 소개 제품 이미지 키움 50% → 66% (10-15) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="sj-product"]) { width: 66%; left: -80px; bottom: -34px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="sj-product"]) { width: 72%; } }
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="sj-product"]) { width: 82%; left: -110px; bottom: -44px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="sj-product"]) { width: 84%; } }
/* 처방 상세 상단 — 응급 안내를 키워드 칩 아래(왼쪽 소개 글 안)로 (10-15) */
.fx-intro-txt .fx-alert-intro { max-width: none; margin: 22px 0 0; padding: 16px 20px; border-radius: 0; font-size: 14.5px; line-height: 1.7; }
.fx-intro-txt .fx-alert-intro b { font-size: 15.5px; margin-bottom: 4px; }
/* 상단 응급 안내 — 상자 없이 빨간 글씨만 (10-15) */
.fx-intro-txt .fx-alert-intro { padding: 0; background: none; border: 0; box-shadow: none; color: #c0392b; }
.fx-intro-txt .fx-alert-intro b { color: #b02a1c; }
/* 처방 상세 상단 소개 글·응급 안내 — 단어 단위 + 줄 길이 균형(끝에 두세 단어만 남지 않게) (10-15) */
.fx-intro-txt p, .fx-intro-txt .fx-alert-intro { word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.fx-intro-txt .fx-bal { display: block; text-wrap: balance; }
/* 처방 상세(fx) 전체 — 단어 중간에서 끊기지 않게(keep-all), 카드 제목·작은 제목은 줄 길이 균형, 본문은 외톨이 단어 방지 (10-15) */
.fx-page :is(h2, h3, b, strong, em, p, li, span, dt, dd, small, figcaption, summary) { word-break: keep-all; overflow-wrap: break-word; }
.fx-page :is(h2, h3, .fx-h, li > b, dt, .fx-band-txt b, .faq-subject) { text-wrap: balance; }
.fx-page :is(p, dd, li > span, .faq-a) { text-wrap: pretty; }
.fx-page :is(.fx-herb-name b, .fx-herb-name span, .fx-research-hd b, .fx-vs-head b) { display: block; text-wrap: balance; }
/* 처방 상세 상단 일반 '안내'(is-soft)는 빨강 대신 차분한 회녹색 글씨 (10-15) */
.fx-intro-txt .fx-alert-intro.is-soft { color: var(--tg-ink-2); }
.fx-intro-txt .fx-alert-intro.is-soft b { color: var(--tg-med-deep); }
/* 씨알공진단 상세 — 상단 소개 제품 이미지 키움 (10-15) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ssg-product"]) { width: 72%; left: -96px; bottom: -40px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ssg-product"]) { width: 76%; } }
.fx-intro-txt .fx-alert-intro .fx-bal { display: block; text-wrap: balance; }

/* 10-15 처방 상세 NOTE 상자(fx-herb-box + fx-herb-name) — E안: 짙은 초록 블록 대신 미색 바탕 + 원형 i 아이콘, 제목 옆 작은 부제, 아래 본문 (fx 공통) */
.fx-page .fx-herb-box:has(.fx-herb-name), .fx-steps .fx-herb-box:has(.fx-herb-name) { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: start; padding: 24px 28px; border: 0; border-radius: 0; background: #f8f6ef; overflow: visible; }
.fx-page .fx-herb-box:has(.fx-herb-name)::before { content: "i"; grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #b8894a; color: #b8894a; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; font-style: italic; line-height: 1; }
.fx-page .fx-herb-box .fx-herb-name { grid-column: 2; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 3px 0 0; background: none; color: inherit; }
.fx-page .fx-herb-box .fx-herb-name em { display: none; }
.fx-page .fx-herb-box .fx-herb-name b, .fx-steps .fx-herb-box .fx-herb-name b { display: inline; margin: 0; font-size: 18px; font-weight: 600; color: var(--tg-ink); }
.fx-page .fx-herb-box .fx-herb-name span { display: inline; font-size: 13.5px; color: #8a7a5a; }
.fx-page .fx-herb-box .fx-herb-body, .fx-page .fx-herb-box:has(.fx-herb-name) > p { grid-column: 2; padding: 0; }
.fx-page .fx-herb-box .fx-herb-body > p, .fx-steps .fx-herb-box .fx-herb-body > p { font-size: 15.5px; line-height: 1.75; }
@media (max-width: 560px) { .fx-page .fx-herb-box:has(.fx-herb-name) { grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; padding: 20px 18px; } .fx-page .fx-herb-box:has(.fx-herb-name)::before { width: 36px; height: 36px; font-size: 18px; } .fx-page .fx-herb-box .fx-herb-name b { font-size: 16.5px; } }
.fx-page .fx-herb-box .fx-herb-name { justify-content: flex-start; text-align: left; }
.fx-page .fx-herb-box .fx-herb-body > p { text-wrap: pretty; }
/* 함께 복용 — 칠기연조제 제품 이미지 조금 줄임(전체 확대 1.15 → 0.86) (10-15) */
.fx-with-pic img[src*="ck-product"] { transform: scale(.86); }
.fx-with-card:hover .fx-with-pic img[src*="ck-product"] { transform: scale(.9); }

/* 10-15 교감단 체크형 3단계(is-check)도 A안과 같게 — 번호 원(틸·골드·로즈) + 이어지는 선 + 펄스 + 아이콘·제목 가운데, 체크 목록은 왼쪽 정렬 유지 */
.fx-steps > .fx-step-cards.is-check { counter-reset: fxst; }
.fx-steps > .fx-step-cards.is-check > li { --c: #3f7f86; --n: #b8894a; counter-increment: fxst; position: relative; display: flex; flex-direction: column; align-items: center; padding: 72px 16px 0; text-align: center; border: 0; background: none; box-shadow: none; }
.fx-steps > .fx-step-cards.is-check > li:nth-child(2) { --c: #b8894a; --n: #a8667a; }
.fx-steps > .fx-step-cards.is-check > li:nth-child(3) { --c: #a8667a; --n: #a8667a; }
.fx-steps > .fx-step-cards.is-check > li::after { content: counter(fxst, decimal-leading-zero); position: absolute; top: 0; left: 50%; width: 54px; height: 54px; margin-left: -27px; border: 0; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; box-shadow: none; animation: fpGtPulse 2.4s ease-out infinite; }
.fx-steps > .fx-step-cards.is-check > li:nth-child(2)::after { animation-delay: .4s; } .fx-steps > .fx-step-cards.is-check > li:nth-child(3)::after { animation-delay: .8s; }
.fx-steps > .fx-step-cards.is-check > li::before, .fx-steps > .fx-step-cards.is-check > li:first-child::before { content: ""; position: absolute; top: 26px; left: 50%; right: auto; bottom: auto; width: 100%; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), color-mix(in srgb, var(--n) 60%, #fff)); }
.fx-steps > .fx-step-cards.is-check > li:last-child::before { display: none; }
.fx-steps > .fx-step-cards.is-check > li > span { display: none; }
.fx-steps > .fx-step-cards.is-check .fx-st-ic { display: block; width: 42px; height: 42px; margin: 0 auto 10px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fx-steps > .fx-step-cards.is-check .fx-check { align-self: stretch; margin-top: 10px; text-align: left; }
.fx-steps > .fx-step-cards.is-check .fx-check li::before { border-color: var(--c); }
.fx-steps > .fx-step-cards.is-check .fx-check li::after { border-color: var(--c); }
@media (prefers-reduced-motion: reduce) { .fx-steps > .fx-step-cards.is-check > li::after { animation: none; } }
@media (max-width: 759px) {
  .fx-steps > .fx-step-cards.is-check > li { align-items: flex-start; padding: 2px 0 28px 64px; text-align: left; }
  .fx-steps > .fx-step-cards.is-check > li::after { left: 0; margin-left: 0; width: 46px; height: 46px; font-size: 15px; }
  .fx-steps > .fx-step-cards.is-check > li::before, .fx-steps > .fx-step-cards.is-check > li:first-child::before { top: 46px; left: 22px; bottom: 0; width: 2px; height: auto; background: linear-gradient(color-mix(in srgb, var(--c) 60%, #fff), color-mix(in srgb, var(--n) 60%, #fff)); }
  .fx-steps > .fx-step-cards.is-check .fx-st-ic { width: 34px; height: 34px; margin: 0 0 8px; }
}
/* 함께 복용 — 공진단·경옥고 이미지 조금 키움 1.15 → 1.32 (10-15) */
.fx-with-pic img[src*="with-gongjin"] { transform: scale(1.32); }
.fx-with-card:hover .fx-with-pic img[src*="with-gongjin"] { transform: scale(1.37); }
/* 교감단 체크 목록 — V표 대신 단계색 점 (10-15) */
.fx-steps > .fx-step-cards.is-check .fx-check li { padding-left: 18px; }
.fx-steps > .fx-step-cards.is-check .fx-check li::before { top: .62em; left: 2px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--c); }
.fx-steps > .fx-step-cards.is-check .fx-check li::after { content: none; }
.fx-steps > .fx-step-cards.is-check .fx-check li::before { -webkit-mask: none; mask: none; }
/* 함께 복용 — 교감단 이미지 줄임 1.15 → 0.9 (10-15) */
.fx-with-pic img[src*="gd-product"] { transform: scale(.9); }
.fx-with-card:hover .fx-with-pic img[src*="gd-product"] { transform: scale(.94); }
/* 씨알공진단 구조 이미지 — 섹션 아래 따로 떠 있던 둥근 카드 대신, 왼쪽 제목 칸 안(안내 문구 아래)에 사진 + 설명 나란히, 박스 없이 직각 (10-15) */
.fx-compare-hd .fx-core { max-width: none; margin: 28px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
.fx-compare-hd .fx-core img { max-width: 150px; border-radius: 0; }
.fx-compare-hd .fx-core figcaption { font-size: 15px; gap: 6px; }
@media (max-width: 560px) { .fx-compare-hd .fx-core { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; } .fx-compare-hd .fx-core img { max-width: 120px; } }
/* 특진단 상세 — 상단 제품 이미지 키움 (10-15) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="tj-product"]) { width: 62%; left: -84px; bottom: -40px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="tj-product"]) { width: 68%; } }
/* 특진단 상단 제품 — 할머니 얼굴을 가리지 않게 아래로 (10-15) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="tj-product"]) { width: 56%; left: -84px; bottom: -110px; } .fx-intro-visual:has(img[src*="tj-product"]) { margin-bottom: 90px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="tj-product"]) { width: 60%; bottom: -60px; } .fx-intro-visual:has(img[src*="tj-product"]) { margin-bottom: 50px; } }
/* 연령고본단 상단 제품 조금 키움 34% → 44% (10-15) */
@media (min-width: 561px) { .fx-intro-prod:has(img[src*="yr-product"]) { width: 44%; left: -56px; bottom: -24px; } }
@media (max-width: 560px) { .fx-intro-prod:has(img[src*="yr-product"]) { width: 46%; } }
/* 연령고본단 '중년의 건강 고민' 옆 제품 이미지 줄임 (10-15) */
.fx-for-hd .fx-product img[src*="yr-product"] { max-height: 320px; }
@media (max-width: 959px) { .fx-for-hd .fx-product img[src*="yr-product"] { max-height: 260px; } }
/* 칠기연조제 상단 제품 키움 50% → 64% (10-15) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 64%; left: -84px; bottom: -36px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 70%; } }
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 74%; left: -100px; bottom: -44px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 78%; } }
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 60%; left: -76px; bottom: -32px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 66%; } }
/* 녹용소건중탕 '우리 아이에게 맞는 관리가' 옆 제품 이미지 줄임 (10-15) */
.fx-for-hd .fx-product img[src*="ns-product"] { max-height: 320px; }
@media (max-width: 959px) { .fx-for-hd .fx-product img[src*="ns-product"] { max-height: 260px; } }
/* 특수한약 개요 처방 카드 — 제품 사진이 없는 처방은 인물 사진을 칸에 꽉 채움 (10-15) */
.herb-page.is-ov .rx-card-pic.is-photo { padding: 0; overflow: hidden; }
.herb-page.is-ov .rx-card-pic.is-photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
/* 안면홍조 Step 카드 '주로 다루는 쪽' 의사요소 — 외국어 (10-15) */
body.lang-en .ro-for::before { content: "Main focus"; }
body.lang-jp .ro-for::before { content: "主な対象"; }
body.lang-cn .ro-for::before { content: "主要针对"; }
/* 항노화 진단 태그 '· 깊이' 의사요소 — 외국어 (10-15) */
body.lang-en .lf-dg-tag em::before { content: "· Depth "; }
body.lang-jp .lf-dg-tag em::before { content: "・深さ "; }
body.lang-cn .lf-dg-tag em::before { content: "· 深度 "; }
/* 외국어 표 — 한국어 기준 nowrap 칸이 번역문에서 표를 PC 폭 밖으로 밀어 가로스크롤이 생김 → 외국어는 줄바꿈 허용 (10-16) */
body:not(.lang-kr) .tg-table thead th,
body:not(.lang-kr) .tg-table tbody th,
body:not(.lang-kr) .ac-page .ac-table td:nth-of-type(2),
body:not(.lang-kr) .cr-page .cr-table td:nth-of-type(1) { white-space: normal; }

/* ═══ 진료·시설안내 v3 (2026-10-16 고객 아티팩트 반영) — 진료시간 카드 + 힐링존·시설 사진 ═══ */
/* 진료시간 — 평일/주말 두 줄 + 요일 칩 + 야간진료 */
.gd3-hours { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 960px) { .gd3-hours { grid-template-columns: minmax(300px, 3fr) minmax(0, 8fr); gap: 40px; } }   /* 10-16 시간표 넓게(2차) */
/* (10-16 삭제) .gd3-hours 오른쪽 100px */
.gd3-hd .pg-h2-sub { margin-bottom: 0; }
.gd3-card { border: 1px solid #e5eae6; background: #fff; padding: 32px; box-shadow: 0 16px 40px rgba(12, 63, 43, .06); }
.gd3-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 4px 18px; }
.gd3-lb { font-size: 17px; font-weight: 600; color: var(--tg-ink); }
.gd3-lb em { font-style: normal; margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--tg-mute, #737d76); }
.gd3-tm { font-size: 21px; font-weight: 700; color: #0c3f2b; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.gd3-week { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid #e5eae6; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.gd3-week li { padding: 11px 2px 10px; text-align: center; }
.gd3-week b { display: block; font-size: 14.5px; font-weight: 600; color: var(--tg-ink); }
.gd3-week span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--tg-mute, #737d76); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em; }
.gd3-week li.is-off { background: #f4f7f5; }
.gd3-week li.is-today { background: var(--tg-med); }
.gd3-week li.is-today b { color: #fff; }
.gd3-week li.is-today span { color: rgba(255, 255, 255, .8); }
.gd3-night { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 14px 16px; background: var(--tg-med-soft); font-size: 15px; color: #0c3f2b; }
.gd3-night strong { font-weight: 700; color: var(--tg-med); }
.gd3-night span { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .gd3-card { padding: 24px 20px; }
  .gd3-lb { font-size: 16px; } .gd3-lb em { font-size: 13px; }
  .gd3-tm { font-size: 19px; }
  .gd3-week { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .gd3-week span { font-size: 11px; }
}

/* 시설 · 힐링존 — 화면 끝까지 이어지는 딥그린 띠 (border-image 바깥 확장: 가로스크롤 없음) */
.gd3-fac { position: relative; padding: 100px 0 108px; color: #f2f6f3;
  border-image: linear-gradient(180deg, #0f4430 0%, #0a3324 70%, #082e1f 100%) fill 0 / 0 / 0 100vmax; }
.gd3-fac .hx-eyebrow { color: #6fd0a3; }
.gd3-fac .pg-h2 { color: #fff; }
.gd3-fac-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.gd3-fac-hd .pg-h2 { margin-bottom: 0; }
.gd3-fac-hd > p { max-width: 380px; margin: 0; font-size: 15.5px; line-height: 1.75; color: rgba(242, 246, 243, .68); word-break: keep-all; }
.gd3-tag { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(7, 32, 22, .5);
  border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.gd3-hz { position: relative; margin: 0; overflow: hidden; aspect-ratio: 21 / 9; background: #082e1f; }
.gd3-hz-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.gd3-hz-slide { position: relative; flex: 0 0 100%; height: 100%; }
.gd3-hz-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gd3-hz::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 32, 22, .04) 35%, rgba(7, 32, 22, .78) 100%); }
.gd3-hz-copy { position: absolute; left: 36px; right: 180px; bottom: 30px; z-index: 3; }
.gd3-hz-en { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .3em; color: rgba(255, 255, 255, .62); }
.gd3-hz-copy h3 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.gd3-hz-copy h3 + p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .85); word-break: keep-all; }
.gd3-hz-nav { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, .38); background: rgba(7, 32, 22, .45); color: #fff; display: grid; place-items: center; cursor: pointer;
  opacity: .6; transition: opacity .25s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gd3-hz-nav svg { width: 18px; height: 18px; }
.gd3-hz-nav.is-prev { left: 18px; } .gd3-hz-nav.is-next { right: 18px; }
.gd3-hz:hover .gd3-hz-nav, .gd3-hz-nav:focus-visible { opacity: 1; }
.gd3-hz-dots { position: absolute; right: 26px; bottom: 30px; z-index: 4; display: flex; gap: 7px; }
.gd3-hz-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .3s, background .3s; }
.gd3-hz-dots button.on { width: 22px; background: #d8a54a; }
@media (prefers-reduced-motion: reduce) { .gd3-hz-track { transition: none; } }

.gd3-mid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
@media (min-width: 960px) { .gd3-mid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px; } }
.gd3-quote, .gd3-info { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); padding: 40px 36px;
  display: flex; flex-direction: column; justify-content: center; }
.gd3-quote { gap: 26px; }
.gd3-q { margin: 0; font-size: 24px; line-height: 1.6; font-weight: 600; color: #fff; word-break: keep-all; }
.gd3-q em { font-style: normal; color: #6fd0a3; }
.gd3-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gd3-chips li { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.gd3-info h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: #6fd0a3; }
.gd3-info dl { margin: 0; }
.gd3-info dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 15px; }
.gd3-info dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.gd3-info dt { flex: none; color: rgba(242, 246, 243, .58); font-weight: 500; }
.gd3-info dd { margin: 0; color: #fff; font-weight: 600; text-align: right; word-break: keep-all; }

.gd3-gal-h { margin: 56px 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: #6fd0a3; }
.gd3-gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gd3-gal li { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #0c3f2b; }
.gd3-gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .6, .2, 1); }
.gd3-gal li:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .gd3-gal img { transition: none; } }

@media (max-width: 720px) {
  .gd3-fac { padding: 72px 0 80px; }
  .gd3-fac-hd { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .gd3-fac-hd > p { max-width: none; font-size: 15px; }
  .gd3-hz { aspect-ratio: 4 / 3; }
  .gd3-hz-copy { left: 20px; right: 20px; bottom: 40px; }
  .gd3-hz-copy h3 { font-size: 28px; }
  .gd3-hz-copy h3 + p { font-size: 13.5px; }
  .gd3-hz-dots { left: 20px; right: auto; bottom: 18px; }
  .gd3-hz-nav { width: 38px; height: 38px; margin-top: -19px; opacity: .8; }
  .gd3-hz-nav.is-prev { left: 10px; } .gd3-hz-nav.is-next { right: 10px; }
  .gd3-quote, .gd3-info { padding: 28px 22px; }
  .gd3-q { font-size: 19px; }
  .gd3-info dl > div { font-size: 14px; padding: 11px 0; }
  /* 3열 그리드 → 가로로 밀어 보는 카드 */
  .gd3-gal-h { margin-top: 44px; }
  .gd3-gal { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .gd3-gal::-webkit-scrollbar { display: none; }
  .gd3-gal li { scroll-snap-align: start; }
}
/* 진료시간 제목 왼쪽 정렬, 시설 띠도 오른쪽 퀵메뉴 자리 비움 (10-16) */
.pg-body .gd3-hd, .pg-body .gd3-hd .hx-eyebrow, .pg-body .gd3-hd .pg-h2, .pg-body .gd3-hd .pg-h2-sub,
.pg-body .gd3-fac-hd .hx-eyebrow, .pg-body .gd3-fac-hd .pg-h2 { text-align: left; }
/* (10-16 삭제) .gd3-fac 오른쪽 100px */
/* 모바일 힐링존 — 화살표가 제목을 가려 숨김(스와이프·점으로 넘김) */
@media (max-width: 720px) { .gd3-hz-nav { display: none; } }

/* ═══ 이벤트 게시판 (2026-10-16) — 건강매거진 카드 + 진행 중/마감 탭 ═══ */
.ev-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ev-tabs { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: #eef4f1; }
.ev-tabs a { padding: 11px 24px; border-radius: 999px; font-size: 15.5px; font-weight: 500; color: var(--tg-ink-2); text-decoration: none; transition: background .2s, color .2s; }
.ev-tabs a:hover { color: var(--tg-med); }
.ev-tabs a.on { background: var(--tg-med); color: #fff; box-shadow: 0 6px 16px rgba(19, 122, 82, .22); }
.ev-tabs a:focus-visible { outline: 2px solid var(--tg-med); outline-offset: 2px; }
@media (min-width: 760px) { .ev-write { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } }
.ev-badge { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 5px 12px; border-radius: 999px; background: var(--tg-med); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.ev-card.is-ended .ev-badge { background: rgba(40, 46, 43, .72); }
.ev-card.is-ended .col-pic img { filter: grayscale(.85); opacity: .8; }
.ev-card.is-ended .col-name { color: var(--tg-ink-2); }
.ev-card .col-meta em { font-variant-numeric: tabular-nums; }
.ev-empty { margin: 8px auto 0; max-width: 560px; padding: 64px 24px; text-align: center; border: 1px dashed rgba(19, 122, 82, .25); color: var(--tg-ink-2); word-break: keep-all; }
@media (max-width: 560px) { .ev-tabs a { padding: 10px 16px; font-size: 14.5px; } }
/* 진료시간 카드 PC 글자 키움 (10-16) — 요일 칸이 충분히 넓은 1200px 이상만 */
@media (min-width: 1200px) {
  .gd3-lb { font-size: 18.5px; } .gd3-lb em { font-size: 15px; }
  .gd3-tm { font-size: 24px; }
  .gd3-week li { padding: 13px 2px 12px; }
  .gd3-week b { font-size: 16px; } .gd3-week span { font-size: 13px; margin-top: 4px; }
  .gd3-night { font-size: 16.5px; padding: 16px 18px; }
}
/* 야간진료 줄 → 알약 (10-16): 바깥 연초록 알약 + 안쪽 진초록 "야간진료" 알약 */
.gd3-night { display: inline-flex; padding: 5px 20px 5px 5px; border-radius: 999px; gap: 12px; }
.gd3-night strong { padding: 7px 16px; border-radius: 999px; background: var(--tg-med); color: #fff; font-weight: 600; }
@media (min-width: 1200px) { .gd3-night { padding: 6px 24px 6px 6px; } .gd3-night strong { padding: 8px 18px; } }
/* 야간진료 알약 길게 (10-16) — 시간 글자는 남는 폭 가운데 */
.gd3-night span { flex: 1; text-align: center; }
@media (min-width: 721px) { .gd3-night { min-width: 360px; } }
@media (min-width: 1200px) { .gd3-night { min-width: 420px; } }
@media (max-width: 720px) { .gd3-night { display: flex; } }
/* 평일·주말도 야간진료와 같은 알약, 오른쪽 정렬 · 세 알약 너비 동일 (10-16) */
.gd3-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 20px; }
.gd3-pills .gd3-night { margin: 0; }
.gd3-night strong { min-width: 112px; text-align: center; }
.gd3-night strong em { font-style: normal; font-weight: 400; opacity: .85; margin-left: 2px; }
@media (min-width: 721px) { .gd3-night { width: 380px; min-width: 0; } }
@media (min-width: 1200px) { .gd3-night { width: 440px; } .gd3-night strong { min-width: 128px; } .gd3-night span { font-size: 17.5px; } }
@media (max-width: 720px) { .gd3-pills { align-items: stretch; } }
/* 진초록 라벨 넓게 (10-16) */
.gd3-night strong { min-width: 132px; }
@media (min-width: 1200px) { .gd3-night strong { min-width: 156px; } }
/* 평일·주말 알약 한 줄로 (10-16) — 카드 폭 반씩, 야간진료도 같은 너비 */
@media (min-width: 721px) {
  .gd3-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gd3-pills .gd3-night { width: auto; }
  .gd3-card > .gd3-night { width: calc(50% - 5px); }
}
/* 좁은 PC에서 알약 시간이 두 줄로 꺾이지 않게 (10-16) */
.gd3-night span { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 1199px) { .gd3-night { gap: 8px; padding-right: 12px; font-size: 14px; } .gd3-night strong { min-width: 100px; padding: 7px 12px; } }
/* 진료시간 카드 여유 공간 (10-16) */
@media (min-width: 721px) {
  .gd3-card { padding: 44px 32px 46px; }   /* 아래위만 넓힘 */
  .gd3-pills { gap: 10px; padding-bottom: 30px; }
  .gd3-week { padding-top: 30px; }
  .gd3-card > .gd3-night { margin-top: 30px; }
}
/* 요일 칸 테두리 (10-16) */
.gd3-week li { border: 1px solid #dfe7e2; }
.gd3-week li.is-off { border-color: #e3e9e5; }
.gd3-week li.is-today { border-color: var(--tg-med); }
/* 야간진료 알약 — 밤 느낌 남색, 가운데 정렬 (10-16) */
.gd3-card > .gd3-night { display: flex; margin-left: auto; margin-right: auto; background: #eceff8; color: #26305e; }
.gd3-card > .gd3-night strong { background: #34407a; }
/* 진료·시설안내 — 시설 띠가 마지막이면 푸터에 바로 붙임 (10-16) */
.gd2 > .gd3-fac:last-of-type { margin-bottom: 0; }
.pg-body:has(.gd2 > .gd3-fac:last-of-type) { padding-bottom: 0; }
/* 시설 띠 → 푸터(#132d27)로 자연스럽게 이어지는 그라데이션 (10-16) */
.gd3-fac { border-image: linear-gradient(180deg, #0f4a34 0%, #0e3f2d 45%, #11352b 75%, #132d27 100%) fill 0 / 0 / 0 100vmax; }
/* 의료진 소개 — 원장 카드 컨테이너 폭 줄임 (10-16, 이 페이지만) */
.dr-page .dr-card { max-width: 1180px; margin-left: auto; margin-right: auto; }
/* 원장 사진 키움 (10-16) — 360 → PC 440 · 모바일 420 (원본 480x600) */
@media (min-width: 1100px) {
  .dr-card { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; }
  .dr-card.is-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}
@media (max-width: 899px) { .dr-photo { max-width: 420px; } }
/* 두 원장 카드 사이 간격 넓힘 (10-16) 96 → PC 160 · 모바일 120 */
.dr-page .dr-card:has(+ .dr-card) { margin-bottom: 160px; }
@media (max-width: 899px) { .dr-page .dr-card:has(+ .dr-card) { margin-bottom: 96px; } }
/* 마지막 원장 카드 ↔ 푸터 간격 (10-16) 72 → PC 160 · 모바일 52 → 96 */
.dr-page .dr-card:last-child { margin-bottom: 88px; }
@media (max-width: 899px) { .dr-page .dr-card:last-child { margin-bottom: 44px; } }
/* 4단계 회복 단계(축천환 배뇨 유형, 10-16) — 공통 3단계 디자인을 4칸으로: 4번째 색 보라 */
@media (min-width: 760px) { .fx-steps > .fx-step-cards.is-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fx-steps > .fx-step-cards.is-n4 > li:nth-child(3) { --n: #6c6a9e; }
.fx-steps > .fx-step-cards.is-n4 > li:nth-child(4) { --c: #6c6a9e; }
.fx-steps > .fx-step-cards.is-n4 > li:nth-child(4)::after { animation-delay: 1.2s; }
/* 을자탕 상단 제품 이미지 키움 (10-16) 50% → 66% */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ej-product"]) { width: 66%; left: -84px; bottom: -40px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ej-product"]) { width: 70%; } }

/* 을자탕 치핵 1~4도 단계(is-four) — 아이콘 없이 색만 공통 단계 색(청록·금·장미·보라)으로 (10-16) */
.fx-steps > .fx-step-cards.is-four > li { --c: #3f7f86; --n: #b8894a; }
.fx-steps > .fx-step-cards.is-four > li:nth-child(2) { --c: #b8894a; --n: #a8667a; }
.fx-steps > .fx-step-cards.is-four > li:nth-child(3) { --c: #a8667a; --n: #6c6a9e; }
.fx-steps > .fx-step-cards.is-four > li:nth-child(4) { --c: #6c6a9e; --n: #6c6a9e; }
.fx-steps > .fx-step-cards.is-four > li::after { border-color: var(--c); animation-name: fpGtPulse; }
.fx-steps > .fx-step-cards.is-four > li:first-child::after { background: var(--c); }
.fx-steps > .fx-step-cards.is-four > li::before { background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--n) 45%, #fff)); }
@media (max-width: 759px) { .fx-steps > .fx-step-cards.is-four > li::before { background: linear-gradient(var(--c), color-mix(in srgb, var(--n) 45%, #fff)); } }
.fx-steps > .fx-step-cards.is-four > li > span { color: var(--c); }
/* 외국어 "Key herb" 배지가 약재 구슬(.fx-herb-orbs)에도 붙던 문제 — kr 처럼 숨김 (10-16) */
body:not(.lang-kr) .fx-herbs .fx-herb-orbs li:first-child::before { content: none; }
/* NOTE 상자 본문 안 굵은 단어 — 한 줄 안에 이어지게 (산후보약 몸의 변화 안내, 10-19) */
.fx-herb-body > p > b { display: inline; margin: 0; font-size: inherit; }
.fx-herb-body > p + p { margin-top: 6px; }
/* 특수한약 상단 이미지 교체(10-19, 고객 폴더 특수한약처방) — 인물이 오른쪽이라 잘릴 때 오른쪽 기준 */
.fx-intro-pic img[src*="/herb/top-"] { object-position: 72% center; }
/* 웅담캡슐 — 상단 사진이 곰으로 바뀌어 왼쪽 아래는 제품 누끼 (10-19) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ud-product"]) { width: 60%; left: -80px; bottom: -40px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ud-product"]) { width: 64%; } }
/* 산골캡슐 상단 이미지 — 틀 크기는 그대로, 사진만 확대해 왼쪽 빈 배경 줄임 (10-19) */
.fx-intro-pic img[src*="top-bone-sangol"] { transform: scale(1.3); transform-origin: 82% 62%; }
.fx-intro-pic img[src*="top-bone-ogong"] { transform: scale(1.3); transform-origin: 84% 50%; }   /* 오공환 동일 (10-19) */
.fx-intro-pic img[src*="top-bone-jeopgol"] { transform: scale(1.3); transform-origin: 88% 18%; }   /* 접골탕 동일 (10-19) */
/* 발효계족환 상단 제품 키움 (10-19) 60% → 72% */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="gj-product"]) { width: 72%; left: -116px; bottom: -40px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="gj-product"]) { width: 76%; } }
/* 골인캡슐 — 상단 사진 확대 + 제품 키움 (10-19) */
.fx-intro-pic img[src*="top-autonomic-golin"] { transform: scale(1.3); transform-origin: 80% 40%; }
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="gi-product"]) { width: 62%; left: -116px; bottom: -34px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="gi-product"]) { width: 68%; } }
/* 특진단 상단 제품 키움 (10-19) 56% → 62% */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="tj-product"]) { width: 62%; left: -92px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="tj-product"]) { width: 66%; } }
/* 연령고본단 — 상단 사진 확대 + 제품 키움 (10-19) 44% → 52% */
.fx-intro-pic img[src*="top-vitality-yeonryeong"] { transform: scale(1.3); transform-origin: 78% 45%; }
@media (min-width: 561px) { .fx-intro-prod:has(img[src*="yr-product"]) { width: 52%; left: -72px; bottom: -30px; } }
@media (max-width: 560px) { .fx-intro-prod:has(img[src*="yr-product"]) { width: 54%; } }
/* 칠기연조제 상단 제품 키움 (10-19) 60% → 68% */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 68%; left: -90px; bottom: -38px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ck-product"]) { width: 72%; } }
.fx-intro-pic img[src*="top-vitality-chilgi"] { transform: scale(1.15); transform-origin: 85% 85%; }   /* 칠기연조제 상단 사진 확대 (10-19) */
/* 녹용소건중탕 상단 제품 키움 (10-19) 34% → 44% */
@media (min-width: 561px) { .fx-intro-prod:has(img[src*="ns-product"]) { width: 44%; left: -64px; bottom: -26px; } }
@media (max-width: 560px) { .fx-intro-prod:has(img[src*="ns-product"]) { width: 50%; } }
.fx-intro-pic img[src*="top-vitality-nokyong"] { transform: scale(1.15); transform-origin: 80% 50%; }   /* 녹용소건중탕 상단 사진 1.15 확대 (10-19) */
.fx-intro-pic img[src*="top-uro-chukcheon"] { transform: scale(1.2); transform-origin: 92% 60%; }   /* 축천환 상단 사진 확대·배경 줄임 (10-19) */
/* 을자탕 치핵·치열·치루 카드 — 직각 + 위 테두리에 걸친 알약 라벨, 그림 테두리·흰 여백 잘라냄 (10-19) */
.fx-types li { position: relative; border-radius: 0; padding-top: 40px; --c: #c0566a; }
.fx-types li:nth-child(2) { --c: #b8894a; }
.fx-types li:nth-child(3) { --c: #6c6a9e; }
.fx-types figure { border-radius: 0; }
.fx-types li > b { position: absolute; top: 0; left: 24px; transform: translateY(-50%); margin: 0; padding: 8px 20px; border-radius: 999px; background: var(--c); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent); }
@media (max-width: 759px) { .fx-types { gap: 34px; } }
/* 을자탕 치핵 1~4도 아이콘 (10-19, 바탕화면 free-icon → rx-hem-1~4) */
.fx-steps > .fx-step-cards.is-four .fx-st-ic { display: block; width: 52px; height: 52px; margin: 0 0 12px; background: color-mix(in srgb, var(--c) 78%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (max-width: 759px) { .fx-steps > .fx-step-cards.is-four .fx-st-ic { width: 42px; height: 42px; margin-bottom: 8px; } }
/* 을자탕 치핵 단계 — 공통 단계 디자인(is-n4) + 원 안에 "1도~4도" (10-19) */
.fx-steps > .fx-step-cards.is-grade:not(.is-check):not(.is-four) > li::after { content: counter(fxst) "도"; font-family: inherit; font-size: 16px; }
@media (max-width: 759px) { .fx-steps > .fx-step-cards.is-grade:not(.is-check):not(.is-four) > li::after { font-size: 14px; } }
.fx-steps > .fx-step-cards.is-grade > li > b { line-height: 1.4; }   /* 을자탕 치핵 단계 제목 행간 1.75 → 1.4 (10-19) */
/* 온경탕 상단 제품 키움 (10-19) 50% → 66% */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="og2-product"]) { width: 66%; left: -84px; bottom: -36px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="og2-product"]) { width: 70%; } }
/* 온경탕 — 여백 잘라낸 제품 이미지(og2-product-t) 크기 (10-19) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="og2-product-t"]) { width: 48%; left: -72px; bottom: -34px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="og2-product-t"]) { width: 52%; } }

/* 산후보약 처방 상담 — 출산 전(2) / 출산 후(3) 두 그룹 + 가운데 '출산' 화살표, + 연결 없음 (10-19) */
.sh-stage { margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: stretch; }
@media (min-width: 1100px) { .sh-stage { grid-template-columns: minmax(0, 2fr) 56px minmax(0, 3fr); gap: 16px; } }
.sh-grp { background: #fff; border: 1px solid var(--fx-line, #e3e9e6); padding: 30px 24px 26px; position: relative; display: flex; flex-direction: column; }
.sh-grp.is-pre { --g: #2f6f58; }
.sh-grp.is-post { --g: #8e4a5a; }
.sh-grp-h { position: absolute; top: 0; left: 24px; transform: translateY(-50%); margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 999px; background: var(--g); color: #fff; }
.sh-grp-h em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .16em; opacity: .8; }
.sh-grp-h b { font-size: 15.5px; font-weight: 600; }
.fx-herbs .sh-grp .fx-herb-orbs { margin: 14px 0 0; gap: 28px 16px; }
@media (min-width: 640px) {
  .fx-herbs .sh-grp .fx-herb-orbs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-herbs .sh-grp .fx-herb-orbs.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fx-herbs .sh-grp .fx-herb-orbs li + li::after { content: none; }
.fx-herbs .sh-grp.is-post .fx-herb-orbs li:nth-child(1) .fx-orb { background: linear-gradient(140deg, #6a2e3c, #b0606f); box-shadow: 0 14px 30px rgba(106,46,60,.22); }
.fx-herbs .sh-grp.is-post .fx-herb-orbs li:nth-child(2) .fx-orb { background: linear-gradient(140deg, #5a3d26, #a3744c); box-shadow: 0 14px 30px rgba(90,61,38,.22); }
.fx-herbs .sh-grp.is-post .fx-herb-orbs li:nth-child(3) .fx-orb { background: linear-gradient(140deg, #1a5a66, #3f9fa9); box-shadow: 0 14px 30px rgba(26,90,102,.22); }
.sh-grp-d { margin: auto 0 0; padding-top: 18px; border-top: 1px dashed color-mix(in srgb, var(--g) 30%, #fff); font-size: 14.5px; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fx-herbs .sh-grp .fx-herb-orbs { margin-bottom: 20px; }
/* 가운데 '출산' 화살표 */
.sh-arrow { display: flex; align-items: center; justify-content: center; }
.sh-arrow span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tg-med); color: #fff; font-size: 14px; font-weight: 600; position: relative; animation: fpGtPulse 2.4s ease-out infinite; --c: #137a52; }
.sh-arrow span::after { content: ""; position: absolute; right: -14px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left-color: var(--tg-med); }
@media (max-width: 1099px) { .sh-arrow span::after { right: auto; left: 50%; top: auto; bottom: -14px; margin: 0 0 0 -7px; border-left-color: transparent; border-top-color: var(--tg-med); } }
@media (prefers-reduced-motion: reduce) { .sh-arrow span { animation: none; } }
@media (max-width: 1099px) { .sh-stage { gap: 40px; } }
.fx-herbs .sh-grp.is-post .fx-herb-orbs li:nth-child(1) em { background: #f6e7eb; color: #8e4a5a; }
.fx-herbs .sh-grp.is-post .fx-herb-orbs li:nth-child(2) em { background: #f2e9df; color: #6b4a2e; }
.fx-herbs .sh-grp.is-post .fx-herb-orbs li:nth-child(3) em { background: #e2f0f1; color: #1a5a66; }
/* 출산 화살촉 크게 — 원에 붙은 삼각형 (10-19) */
.sh-arrow span::after { right: -17px; margin-top: -13px; border-width: 13px 0 13px 20px; border-style: solid; border-color: transparent transparent transparent var(--tg-med); }
@media (max-width: 1099px) { .sh-arrow span::after { right: auto; left: 50%; top: auto; bottom: -17px; margin: 0 0 0 -13px; border-width: 20px 13px 0 13px; border-color: var(--tg-med) transparent transparent transparent; } }
/* 출산 원 키움 56 → 70 (10-19) */
@media (min-width: 1100px) { .sh-stage { grid-template-columns: minmax(0, 2fr) 76px minmax(0, 3fr); } }
.sh-arrow span { width: 70px; height: 70px; font-size: 15.5px; }
.sh-arrow span::after { right: -19px; margin-top: -14px; border-width: 14px 0 14px 22px; }
@media (max-width: 1099px) { .sh-arrow span::after { bottom: -19px; margin-left: -14px; border-width: 22px 14px 0 14px; } }
/* 출산 화살촉 끝 각도 80° — 반높이 14px, 길이 14/tan40°≈17px (10-19) */
.sh-arrow span::after { right: -15px; border-width: 14px 0 14px 17px; }
@media (max-width: 1099px) { .sh-arrow span::after { bottom: -15px; border-width: 17px 14px 0 14px; } }
/* 출산 화살촉 끝 각도 90° — 반높이 14px = 길이 14px (10-19) */
.sh-arrow span::after { right: -12px; border-width: 14px 0 14px 14px; }
@media (max-width: 1099px) { .sh-arrow span::after { bottom: -12px; border-width: 14px 14px 0 14px; } }
/* 출산 화살촉 키움(90° 유지) 14 → 18px (10-19) */
.sh-arrow span::after { right: -15px; margin-top: -18px; border-width: 18px 0 18px 18px; }
@media (max-width: 1099px) { .sh-arrow span::after { bottom: -15px; margin-top: 0; margin-left: -18px; border-width: 18px 18px 0 18px; } }
.sh-arrow span::after { right: -11px; }   /* 화살촉을 원에 더 붙임 (10-19) */
@media (max-width: 1099px) { .sh-arrow span::after { bottom: -11px; } }
/* 출산 화살촉 18 → 22px (90° 유지, 원에 붙임) (10-19) */
.sh-arrow span::after { right: -14px; margin-top: -22px; border-width: 22px 0 22px 22px; }
@media (max-width: 1099px) { .sh-arrow span::after { bottom: -14px; margin-top: 0; margin-left: -22px; border-width: 22px 22px 0 22px; } }
/* 진료 5단계(fx-flow5) → 공통 회복 단계 디자인 5칸 (온경탕·오매환, 10-19) */
@media (min-width: 760px) { .fx-steps > .fx-step-cards.is-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fx-steps > .fx-step-cards.is-n5 > li:nth-child(3) { --n: #6c6a9e; }
.fx-steps > .fx-step-cards.is-n5 > li:nth-child(4) { --c: #6c6a9e; --n: #4f8a5b; }
.fx-steps > .fx-step-cards.is-n5 > li:nth-child(5) { --c: #4f8a5b; }
.fx-steps > .fx-step-cards.is-n5 > li:nth-child(4)::after { animation-delay: 1.2s; }
.fx-steps > .fx-step-cards.is-n5 > li:nth-child(5)::after { animation-delay: 1.6s; }
@media (min-width: 760px) { .fx-steps > .fx-step-cards.is-n5 > li { padding-left: 8px; padding-right: 8px; } }
.fx-flow5.fx-steps > .fx-lead { font-size: 15.5px; }
/* 함께 복용 — 오패산 병 이미지 줄임 (10-19) */
.fx-with-pic img[src*="op-product-front"] { transform: scale(.72); }
.fx-with-card:hover .fx-with-pic img[src*="op-product-front"] { transform: scale(.76); }
/* 소화 개요 — 곤담환·오패산 카드 제품 키움 (웅담 제외) (10-19) */
.herb-page.is-ov .rx-card-pic img[src*="gd2-product"], .herb-page.is-ov .rx-card-pic img[src*="op-product"] { max-height: 224px; max-width: 100%; }
@media (max-width: 560px) { .herb-page.is-ov .rx-card-pic img[src*="gd2-product"], .herb-page.is-ov .rx-card-pic img[src*="op-product"] { max-height: 180px; } }
/* 함께 복용 — 오패산 조금 키움(.72→.86), 웅담캡슐은 누끼 png + 줄임 (10-19) */
.fx-with-pic img[src*="op-product-front"] { transform: scale(.86); }
.fx-with-card:hover .fx-with-pic img[src*="op-product-front"] { transform: scale(.9); }
.fx-with-pic img[src*="ud-product.png"] { transform: scale(.84); object-fit: contain; }
.fx-with-card:hover .fx-with-pic img[src*="ud-product.png"] { transform: scale(.88); }
/* 웅담캡슐 함께복용 — 녹용 처방은 녹용 사진으로 칸 채움, 곤담환 제품 줄임 (10-19) */
.fx-with-pic img[src*="with-nokyong"] { object-fit: cover; transform: none; }
.fx-with-card:hover .fx-with-pic img[src*="with-nokyong"] { transform: scale(1.04); }
.fx-with-pic img[src*="gd2-product-front"] { transform: scale(.82); }
.fx-with-card:hover .fx-with-pic img[src*="gd2-product-front"] { transform: scale(.86); }
/* 웅담캡슐 상담대상 제품(누끼) 줄임 (10-19) */
.fx-for-hd .fx-product img[src*="ud-product-cut"] { max-width: 78%; margin: 0 auto; }
@media (max-width: 959px) { .fx-for-hd .fx-product img[src*="ud-product-cut"] { max-width: 70%; } }
.fx-herbs .fx-dose + .fx-herb-box { margin-top: 24px; }   /* 약재 노트 상자를 조합 카드 아래로 (10-19) */
/* 함께 복용 — 교감단 살짝 줄임 .9 → .82 (10-19) */
.fx-with-pic img[src*="gd-product"] { transform: scale(.82); }
.fx-with-card:hover .fx-with-pic img[src*="gd-product"] { transform: scale(.86); }
/* 함께 복용 — 오매환(온경탕 박스 누끼) 줄임 (10-19) */
.fx-with-pic img[src*="og2-product-t"] { transform: scale(.8); }
.fx-with-card:hover .fx-with-pic img[src*="og2-product-t"] { transform: scale(.84); }
/* 호흡기·구강 개요 카드 제품 크기 (10-19) */
.herb-page.is-ov .rx-card-pic img[src*="ce-product"] { max-height: 224px; max-width: 100%; }
@media (max-width: 560px) { .herb-page.is-ov .rx-card-pic img[src*="ce-product"] { max-height: 180px; } }
/* 향성파적환 상단 제품(여백 잘라낸 hp-product-t) 크게 (10-19) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="hp-product-t"]) { width: 66%; left: -88px; bottom: -36px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="hp-product-t"]) { width: 72%; } }
.fx-with-pic img[src*="ab-product-t"] { transform: scale(.9); }   /* 함께 복용 — 알비환 잘리지 않게 (10-19) */
.fx-with-card:hover .fx-with-pic img[src*="ab-product-t"] { transform: scale(.94); }
.fx-with-pic img[src*="ab-product-t"] { transform: scale(.8); }   /* 함께 복용 — 알비환 조금 더 줄임 (10-19) */
.fx-with-card:hover .fx-with-pic img[src*="ab-product-t"] { transform: scale(.84); }
/* 알비환 상단 제품(여백 잘라낸 ab-product-t) 키움 (10-19) */
@media (min-width: 561px) { .fx-intro-prod.is-wide:has(img[src*="ab-product-t"]) { width: 56%; left: -84px; bottom: -36px; } }
@media (max-width: 560px) { .fx-intro-prod.is-wide:has(img[src*="ab-product-t"]) { width: 62%; } }
.fx-steps.fx-flow5 > .fx-herb-box { grid-area: box; }
/* 함께 복용 — 향성파적환 키움, 치은환 줄임 (10-19) */
.fx-with-pic img[src*="hp-product-t"] { transform: scale(1.12); }
.fx-with-card:hover .fx-with-pic img[src*="hp-product-t"] { transform: scale(1.16); }
.fx-with-pic img[src*="ce-product-front"] { transform: scale(.8); }
.fx-with-card:hover .fx-with-pic img[src*="ce-product-front"] { transform: scale(.84); }
.fx-with-pic img[src*="hp-product-t"] { transform: scale(.98); }   /* 향성파적환 1.12 → .98 (10-19) */
.fx-with-card:hover .fx-with-pic img[src*="hp-product-t"] { transform: scale(1.02); }
/* 특수한약 상세 좌우 비율을 다른 메뉴(hx-split 29:71, 간격 52px)와 통일 — 36:64 → 29:71 (10-19) */
@media (min-width: 960px) {
  .fx-page > .fx-worry, .fx-page > .fx-steps, .fx-page > .fx-compare, .fx-page > .fx-for, .fx-page > .fx-effect { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); column-gap: 52px; }
}
@media (min-width: 960px) and (max-width: 1279px) { .fx-page > .fx-worry, .fx-page > .fx-steps, .fx-page > .fx-compare, .fx-page > .fx-for, .fx-page > .fx-effect { grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr); column-gap: 40px; } }   /* 좁은 PC도 hx-split 과 동일 (10-19) */

/* 알비환 '처방 전 알아두는 알비환 안내' — D안: 타이틀 좌 / 걸친 알약 라벨 카드 3+2 우 (10-19) */
.ab-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 960px) { .ab-guide { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); column-gap: 52px; align-items: start; } }
@media (min-width: 960px) and (max-width: 1279px) { .ab-guide { grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr); column-gap: 40px; } }
.ab-guide-hd { text-align: left; }
.pg-body .ab-guide-hd .fx-h, .pg-body .ab-guide-hd .fx-sub { text-align: left; }
.ab-pts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 16px; }
@media (min-width: 640px) {
  .ab-pts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ab-pts > li { grid-column: span 2; }
  .ab-pts > li:nth-child(4) { grid-column: 2 / span 2; }
  .ab-pts > li:nth-child(5) { grid-column: 4 / span 2; }
}
.ab-pts > li { --c: #3f7f86; position: relative; background: #fff; border: 1px solid var(--fx-line, #e3e9e6); padding: 34px 20px 24px; text-align: center; box-shadow: 0 10px 24px rgba(19, 45, 39, .05); }
.ab-pts > li:nth-child(2) { --c: #b8894a; }
.ab-pts > li:nth-child(3) { --c: #a8667a; }
.ab-pts > li:nth-child(4) { --c: #6c6a9e; }
.ab-pts > li:nth-child(5) { --c: #4f8a5b; }
.ab-pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 6px 16px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.ab-ico { display: block; width: 44px; height: 44px; margin: 0 auto 12px; background: color-mix(in srgb, var(--c) 72%, #fff); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ab-pts b { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; color: var(--tg-ink); word-break: keep-all; }
.ab-pts p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; text-wrap: pretty; }
.ab-guide .fx-herbs-note { margin-top: 26px; text-align: left; }
/* 알비환 안내 카드 3x2 — 6번째 NOTE(패키지 안내) 카드, 가운데 배치 해제 (10-19) */
@media (min-width: 640px) { .ab-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ab-pts > li, .ab-pts > li:nth-child(4), .ab-pts > li:nth-child(5) { grid-column: auto; } }
.ab-pts > li.is-note { --c: #7a857f; }
.ab-pts > li.is-care { --c: #4f8a5b; }   /* 치은환 CARE 카드 (10-19) */
/* 을자탕 치핵 단계 원 "N도" — 외국어 (10-19) */
body.lang-en .fx-steps > .fx-step-cards.is-grade:not(.is-check):not(.is-four) > li::after { content: "G" counter(fxst); }
body.lang-jp .fx-steps > .fx-step-cards.is-grade:not(.is-check):not(.is-four) > li::after { content: counter(fxst) "度"; }
body.lang-cn .fx-steps > .fx-step-cards.is-grade:not(.is-check):not(.is-four) > li::after { content: counter(fxst) "度"; }

/* 연혁 연결선 밝게 (2026-10-19) — 진한 초록 선이 어두운 배경에 묻혀 보이지 않았다. 흰 계열로, 양끝은 옅게 */
.hist .hist-rule {
  background: linear-gradient(to right,
    rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .62) 22%,
    rgba(255, 255, 255, .62) 78%, rgba(255, 255, 255, .12) 100%);
}
@media (max-width: 760px) {
  .hist .hist-rule {
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .62) 22%,
      rgba(255, 255, 255, .62) 78%, rgba(255, 255, 255, .12) 100%);
  }
}

/* 메인 OUR PROMISE 인용문 — 일·중은 둘째 줄이 꽉 차서 닫는 따옴표(110px)가 화면 밖으로 13px 나가 가로 스크롤이 생겼다 (2026-10-19) */
.home-promise { overflow-x: clip; }
/* 메인 칼럼·유튜브 — 원형 펄스(340px, 확대 애니메이션)가 커지는 순간 모바일 화면 밖으로 나가 가로 흔들림 (2026-10-19) */
section:has(> * .hc2-aside), section:has(.hc2-aside) { overflow-x: clip; }
/* FAQ 게시판 — 관리자 글쓰기 링크 (서브 배너 공용화 후 본문 위로, 2026-10-19) */
.faq-admin-tools { display: flex; justify-content: flex-end; padding-top: 28px; }
.faq-admin-tools .faq-write-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 26px; font-size: 16px; font-weight: 500; }
/* 오른쪽 정렬하되 고정 퀵메뉴(오른쪽 약 115px)와 겹치지 않게 — 화면 오른쪽 끝에서 130px 안쪽까지만 */
@media (min-width: 761px) { .faq-admin-tools .faq-write-btn { margin-right: max(0px, calc(130px - (100vw - 100%) / 2)); } }
@media (max-width: 760px) { .faq-admin-tools { padding-top: 20px; } .faq-admin-tools .faq-write-btn { height: 44px; padding: 0 20px; font-size: 15px; } }

/* FAQ — 좌측 타이틀·상담 / 우측 질문 목록 (2026-10-19). 비율은 특수한약 세부페이지와 같다(29:71) */
.fq-split { display: flex; flex-direction: column; gap: 28px; }
.fq-side { display: contents; }
.fq-hd { order: 1; }
.pg-body .fq-hd, .pg-body .fq-hd .hx-eyebrow, .pg-body .fq-hd .fx-h, .pg-body .fq-hd .fx-sub { text-align: left; }
.fq-bd { order: 2; min-width: 0; }
.fq-ask { order: 3; }
.fq-hd .hx-eyebrow { color: var(--tg-med); }
.fq-hd .fx-h { margin-bottom: 12px; }
.fq-hd .fx-sub { margin: 0; font-size: 16px; }
.fq-ask { display: grid; gap: 10px; padding: 26px 24px; background: var(--tg-med-soft, #eef5f1); }
.fq-ask b { font-size: 18px; font-weight: 600; color: var(--tg-ink); letter-spacing: -.02em; word-break: keep-all; }
.fq-ask p { margin: 0 0 8px; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--tg-ink-2); word-break: keep-all; }
.fq-ask .tg-btn { width: 100%; min-height: 50px; font-size: 15.5px; }
.fq-ask .tg-btn-ghost { background: #fff; }
.fq-bd .faq-list { border-top: 2px solid var(--tg-ink); }
@media (min-width: 960px) {
  .fq-split { display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); column-gap: 52px; align-items: start; }
  .fq-side { display: flex; flex-direction: column; gap: 32px; position: sticky; top: 120px; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .fq-split { grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr); column-gap: 40px; }
}
/* 게시판 글쓰기·수정 — 폼 컨테이너 폭 1200px (2026-10-19) */
.post-write { max-width: 1200px; }
/* FAQ 게시판 — 펼침 표시를 다른 페이지 FAQ 와 같은 원형 + / − 버튼으로 (2026-10-19) */
.fq-bd .faq > summary { align-items: center; padding-right: 72px; }
.fq-bd .faq > summary::after {
  content: ""; right: 14px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  border: 1px solid rgba(19, 122, 82, .35); border-radius: 50%; transform: none;
  background:
    linear-gradient(var(--tg-med), var(--tg-med)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--tg-med), var(--tg-med)) center / 1.5px 12px no-repeat;
  transition: background-size .2s, border-color .2s;
}
.fq-bd .faq[open] > summary::after {
  transform: none; margin-top: -17px; border-color: var(--tg-med);
  background:
    linear-gradient(var(--tg-med), var(--tg-med)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--tg-med), var(--tg-med)) center / 1.5px 0 no-repeat;
}
@media (max-width: 560px) {
  .fq-bd .faq > summary { padding-right: 52px; }
  .fq-bd .faq > summary::after { right: 6px; width: 30px; height: 30px; margin-top: -15px; }
  .fq-bd .faq[open] > summary::after { margin-top: -15px; }
}
/* FAQ 게시판 — Q 원 / A 테두리 원 / 열리면 연초록 바탕 (2026-10-19, 다른 페이지 #hx-faq 와 같은 구성) */
.fq-bd .faq { background: transparent; transition: background-color .2s; }
.fq-bd .faq[open] { background: #f3f8f5; }
.fq-bd .faq > summary { gap: 18px; padding: 22px 72px 22px 20px; }
.fq-bd .faq-q {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tg-med-soft, #e6f1ec); color: var(--tg-med);
  font-size: 16px; font-weight: 600; letter-spacing: 0; transition: background-color .2s, color .2s;
}
.fq-bd .faq[open] .faq-q { background: var(--tg-med); color: #fff; }
.fq-bd .faq-subject { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; color: var(--tg-ink); }
.fq-bd .faq > summary:hover .faq-subject, .fq-bd .faq[open] .faq-subject { color: var(--tg-med); }
.fq-bd .faq-a { position: relative; padding: 0 72px 30px 78px; }
.fq-bd .faq-a::before {
  content: "A"; position: absolute; left: 20px; top: -2px;
  width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(19, 122, 82, .45); color: var(--tg-med); background: #fff;
  font-size: 16px; font-weight: 500;
}
.fq-bd .faq-a > :first-child { padding-top: 7px; }
.fq-bd .faq-a p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--tg-ink-2); }
.fq-bd .faq-a b { color: var(--tg-ink); font-weight: 500; }
@media (max-width: 560px) {
  .fq-bd .faq > summary { gap: 12px; padding: 18px 52px 18px 10px; }
  .fq-bd .faq-q { width: 32px; height: 32px; font-size: 14px; }
  .fq-bd .faq-subject { font-size: 16.5px; }
  .fq-bd .faq-a { padding: 0 14px 24px 54px; }
  .fq-bd .faq-a::before { left: 10px; width: 32px; height: 32px; font-size: 14px; }
  .fq-bd .faq-a > :first-child { padding-top: 3px; }
  .fq-bd .faq-a p { font-size: 15.5px; }
}
/* 클리닉 칼럼 게시판(has-cats = clinic-column 전용) — 목록 글자 전체 +1px (2026-10-19) */
.board-page.has-cats .board-table th { font-size: 15.5px; }
.board-page.has-cats .board-table td, .board-page.has-cats .board-table .subj, .board-page.has-cats .board-table .subj a { font-size: 15px; }
.board-page.has-cats .cc-cat { font-size: 13.5px; }
.board-page.has-cats .cc-cats a { font-size: 16px; }
.board-page.has-cats .board-tools input, .board-page.has-cats .board-tools button, .board-page.has-cats .board-tools select { font-size: 15px; }
@media (max-width: 640px) { .board-page.has-cats .cc-cats a { font-size: 15px; } }
/* 게시판 글쓰기 — 분류 선택창이 폼 스타일 없이 브라우저 기본 모양으로 나오던 것 (2026-10-19)
   제목 입력칸과 같은 테두리·모서리·글자, 짧은 값이라 폭은 다른 짧은 입력칸(465px)과 같게. 에디터 툴바 셀렉트는 제외 */
.write-form > label > select {
  width: 100%; max-width: none; height: 40px; box-sizing: border-box;   /* 10-19 요청: 제목 칸과 같은 전체 폭 */
  padding: 0 40px 0 12px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23137a52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 15px; color: var(--tg-ink); cursor: pointer;
}
.write-form > label > select:focus { outline: none; border-color: var(--tg-med); box-shadow: 0 0 0 3px rgba(19, 122, 82, .12); }
.write-form > label > select:invalid { color: var(--tg-mute, #8a9a93); }
.write-form > label > select option { color: var(--tg-ink); }
/* 클리닉 칼럼 — 번호와 제목 사이 간격 조금 넓힘 (번호 열 41 → 50px, 글자 사이 약 17 → 26px, 2026-10-19) */
.board-page.has-cats .board-table th.num-col { width: 50px; min-width: 50px; }
/* 게시판 목록 검색·글쓰기 — 오른쪽 정렬, 사이트 초록 버튼, 모서리 각지게 (2026-10-19) */
.board-tools { margin-left: auto; }
.board-tools .search input, .board-tools .search button, .board-tools .btn-primary { border-radius: 0; }
.board-tools .search input:focus { outline: none; border-color: var(--tg-med); }
.board-tools .btn-primary { background: var(--tg-med); border: 1px solid var(--tg-med); color: #fff; padding: 0 18px; text-decoration: none; }
.board-tools .btn-primary:hover { background: var(--tg-med-deep, #0f5f40); border-color: var(--tg-med-deep, #0f5f40); color: #fff; }
@media (min-width: 761px) { .board-head .board-tools { margin-right: max(0px, calc(130px - (100vw - 100%) / 2)); } }   /* 고정 퀵메뉴와 겹치지 않게 */
/* 검색 버튼은 테두리형 — 채운 초록 글쓰기 버튼과 구분 (2026-10-19) */
.board-tools .search button { background: #fff; color: var(--tg-med); border: 1px solid var(--tg-med); padding: 0 18px; }
.board-tools .search button:hover { background: var(--tg-med-soft, #e6f1ec); }
@media (max-width: 760px) { .board-tools { margin-left: 0; } }
@media (min-width: 761px) { .board-tools .search input { width: 300px; } }   /* 검색 필드 폭 넓힘 (2026-10-19) */
/* 게시판 글쓰기 — 게시(수정) 버튼 사이트 초록 + 폭 넓힘 (2026-10-19) */
.write-form .form-actions .btn-primary { min-width: 120px; justify-content: center; background: var(--tg-med); border-color: var(--tg-med); color: #fff; }
.write-form .form-actions .btn-primary:hover { background: var(--tg-med-deep, #0f5f40); border-color: var(--tg-med-deep, #0f5f40); }
.write-form .form-actions .btn { min-width: 100px; justify-content: center; }   /* 취소 버튼도 폭 맞춤 */
/* 게시글 보기 하단 버튼(목록으로·편집·삭제) 높이 통일 — a 는 본문 줄높이를 물려받아 47px, button 은 38px 이었다 (2026-10-19) */
.post-actions { align-items: center; }
.post-actions form { display: inline-flex; margin: 0; }
.post-actions .btn { height: 44px; padding-top: 0; padding-bottom: 0; line-height: 1; box-sizing: border-box; }

/* 태블릿 폭 헤더 (2026-10-19) — 가로 메뉴(대메뉴 5개)가 769~940px 에서는 어느 언어도 들어가지 않아 언어·메뉴 버튼이 화면 밖으로 밀렸다.
   영어는 메뉴 이름이 길어 1100px 까지 밀렸다. 이 구간은 가로 메뉴를 숨기고 전체메뉴(사이트맵) 버튼으로 연다. 768px 이하는 기존 햄버거 그대로 */
@media (min-width: 769px) and (max-width: 1000px) {
  .site-header .gnb { display: none; }
  .header-actions .sm-btn { display: inline-flex; }
}
@media (min-width: 1001px) and (max-width: 1100px) {
  body.lang-en .site-header .gnb { display: none; }
  body.lang-en .header-actions .sm-btn { display: inline-flex; }
}

/* 게시글 본문 표 — 편집기에서 붙여 넣은 표가 width:760~1080px 고정이라 모바일에서 화면 밖으로 나가 좌우 스크롤이 생겼다(클리닉 칼럼 18건, 2026-10-19).
   PC 는 본문 폭까지만, 모바일은 표 자체를 화면 폭에 맞춘다(넘치는 경우 표 안에서만 스크롤) */
article.post table { max-width: 100% !important; }
@media (max-width: 760px) { article.post table { display: block; overflow-x: auto; width: auto !important; } }

/* 걸친 알약 라벨이 긴 문장일 때(만성 허리통증 '즉시 응급 진료…') 좁은 화면에서 카드 밖으로 나가던 것 — 글자를 조금 줄이고, 그래도 넘치면 줄바꿈 */
@media (max-width: 420px) { .ac-pill { font-size: 12px; letter-spacing: 0; max-width: calc(100% - 44px); white-space: normal; line-height: 1.35; } }
/* 의료진 — 학력·주요 경력·학회 소제목 16 → 18px (2026-10-19) */
.dr-col h4 { font-size: 18px; }
@media (max-width: 560px) { .dr-col h4 { font-size: 17px; } }


/* ═══ 특수한약처방 — 비대면 처방 안내 (2026-10-20). 서브 배너 안, 브레드크럼 위·왼쪽 글자 영역(오른쪽 이미지 안 가림) ═══ */
.rx-remote2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: min(720px, 62%); margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; }
.rx-remote2-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: #ffd65a; color: #0d4a31;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1; white-space: nowrap; box-shadow: 0 4px 12px rgba(160, 120, 0, .18); }
.rx-remote2-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #d23b2a; }
.rx-remote2-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(210, 59, 42, .55); animation: rxRemotePulse 1.8s ease-out infinite; }
@keyframes rxRemotePulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.rx-remote2-txt { font-weight: 500; color: var(--tg-ink); word-break: keep-all; }
.rx-remote2-tel { font-weight: 700; color: var(--tg-med); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.rx-remote2-tel:hover { color: var(--tg-med-deep, #0f5f40); }
@media (max-width: 760px) {
  .rx-remote2 { max-width: none; gap: 8px 10px; margin-bottom: 14px; font-size: 14.5px; }
  .rx-remote2-pill { font-size: 13.5px; padding: 6px 13px; }
}
@media (prefers-reduced-motion: reduce) { .rx-remote2-dot::after { animation: none; } }
.rx-remote2 { max-width: min(560px, 46%); }
.rx-remote2 { display: block; }
.rx-remote2-pill { display: flex; width: max-content; margin-bottom: 9px; }
.rx-remote2-txt { text-wrap: pretty; }
.rx-remote2-tel { margin-left: 10px; }
@media (max-width: 760px) { .rx-remote2 { max-width: none; } }
@media (max-width: 760px) { .rx-remote2 { text-wrap: balance; } .rx-remote2-txt { display: block; } }   /* 모바일 "…받으실 수 / 있습니다" 외톨이 줄 방지 */
/* 10-20: 설명 문구 삭제 → 알약만, 크게 */
.rx-remote2-pill { margin-bottom: 0; gap: 10px; padding: 10px 22px; font-size: 18px; box-shadow: 0 6px 16px rgba(160, 120, 0, .22); }
.rx-remote2-dot { width: 10px; height: 10px; }
@media (max-width: 760px) { .rx-remote2-pill { padding: 9px 18px; font-size: 16px; } }
/* 10-20: 더 눈에 띄게 — 선명한 주황-빨강 그라데이션 + 흰 글자, 빛이 지나가는 반짝임, 은은한 맥박 그림자 */
.rx-remote2-pill { position: relative; overflow: hidden; gap: 11px; padding: 12px 26px 12px 22px; font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: #fff; background: linear-gradient(100deg, #e2412f 0%, #ffa700 100%); box-shadow: 0 8px 22px rgba(226, 65, 47, .35);
  animation: rxPillGlow 2.4s ease-in-out infinite; }
.rx-remote2-pill::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); animation: rxPillShine 3.2s ease-in-out infinite; }
.rx-remote2-dot { width: 11px; height: 11px; background: #fff; }
.rx-remote2-dot::after { border-color: rgba(255, 255, 255, .8); }
@keyframes rxPillShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes rxPillGlow { 0%, 100% { box-shadow: 0 8px 22px rgba(226, 65, 47, .35); } 50% { box-shadow: 0 8px 30px rgba(226, 65, 47, .6), 0 0 0 6px rgba(242, 106, 46, .14); } }
@media (max-width: 760px) { .rx-remote2-pill { padding: 10px 20px 10px 17px; font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .rx-remote2-pill, .rx-remote2-pill::before { animation: none; } }
.rx-remote2-pill { gap: 16px; } @media (max-width: 760px) { .rx-remote2-pill { gap: 13px; } }   /* 10-20: 점과 문구 간격 11 → 16px */
.rx-remote2-pill.is-cta { display: inline-flex; margin: 0 0 18px; }   /* 하단 상담 띠 안 */
/* 하단 상담 띠 — 띠는 그대로 두고 버튼만 고정 퀵메뉴(오른쪽 약 115px) 앞에서 끝나게 (2026-10-20, A안).
   띠 오른쪽 바깥 여백 = 24px + (화면이 1500 보다 넓으면 그 절반). 버튼 끝이 화면 오른쪽에서 130px 안쪽이 되도록 안쪽 여백을 늘린다 */
@media (min-width: 901px) { .pg-cta { padding-right: max(52px, calc(106px - max(0px, (100vw - 1500px) / 2))); } }