/* ══════════════════════════════════════════════════════════
   오브의원 · 셀코드 줄기세포 혈액 — 페이지 전용
   접두사 cc- 만 쓴다. site.css 는 건드리지 않는다(전 페이지 공유).
   박스 규격은 --r-card / --r-pill 2종만. 새 색을 만들지 않는다.
   ══════════════════════════════════════════════════════════ */

/* ── 히어로 — 한 장으로 두 비율을 만족시키지 않는다(가로 컷을 세로 프레임에
      cover 하면 좌우가 먼저 잘려 비워 둔 상단 여백이 살아남지 않는다) ── */
.cc-hero__d{display:none}
.cc-hero__m{display:block; --phero-pos:50% 40%}
@media (min-width:760px){
  .cc-hero__d{display:block; --phero-pos:70% 40%}
  .cc-hero__m{display:none}
}

/* ── 04 절차 도식 — 자가 혈액이 몸 밖으로 나갔다 돌아오는 폐루프 ── */
.cc-flowfig{margin:clamp(1.9rem, 1.2rem + 2.6vw, 3rem) 0 0}
.cc-flow{width:100%; height:auto; overflow:visible}
.cc-node{fill:#fff; stroke:var(--line); stroke-width:2}
.cc-node--on{fill:var(--accent-w); stroke:var(--accent)}
.cc-ar{fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.cc-loop{fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:7 7}
/* SVG 안 글자는 viewBox 스케일을 탄다 — 화면 px 로 환산해 폭마다 다시 잡는다.
   viewBox 800 · 375 에서 컨테이너 339px → 스케일 .424 → 32px 이 13.6px 로 찍힌다. */
.cc-t{fill:var(--brand-d); font-family:var(--sans); font-weight:700; text-anchor:middle; font-size:32px}
.cc-t--sub{fill:var(--muted); font-weight:600}
@media (min-width:760px){
  .cc-t{font-size:16px}      /* 760 에서 컨테이너 705px → 스케일 .88 → 14.1px */
}

/* ── 06 구성표 ── */
.cc-cap{
  caption-side:top; text-align:left; padding-bottom:.9rem;
  font-size:var(--f-cap); color:var(--muted); line-height:1.6;
}
.cc-en{
  display:block; margin-top:.2rem; font-family:var(--serif);
  font-size:var(--f-cap); font-weight:400; color:var(--accent); letter-spacing:.02em;
}
.cc-tbl td.k{white-space:normal; min-width:9em}
.cc-inl{color:var(--brand); font-weight:600}

/* ── 07 관리 범위 ── */
.cc-fig img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-card)}
.cc-who__h{margin-top:clamp(2rem, 1.4rem + 2.4vw, 3.25rem)}
.cc-who{display:grid; gap:.6rem; margin-top:1.2rem}
@media (min-width:760px){.cc-who{grid-template-columns:1fr 1fr; column-gap:1.25rem}}
.cc-who li{
  display:grid; grid-template-columns:auto 1fr; column-gap:.95rem; align-items:baseline;
  padding:1rem 1.15rem; background:var(--soft);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.cc-who__n{
  font-family:var(--serif); font-size:var(--f-sub); font-weight:700;
  color:var(--accent); letter-spacing:.06em;
}
.cc-who b{color:var(--ink); font-size:var(--f-body); font-weight:700; line-height:1.55}


/* ⑥ 흐름 도해의 움직임 — 이 페이지에서 유일하게 움직이는 것 */
.cc-dot{fill:var(--accent); opacity:0}
@keyframes cc-run{
   0%{opacity:0}
   4%{opacity:1}
  /* 채혈 → 처리 */
  22%{transform:translate(0,0)}
  /* 아래 offset-path 로 도는 구간 */
  96%{opacity:1}
 100%{opacity:0}
}
.cc-dot{
  offset-path:path("M110 120 H400 H690 C690 252 660 258 600 258 H200 C140 258 110 252 110 120");
  animation:cc-run 7s linear infinite, cc-move 7s linear infinite;
}
@keyframes cc-move{from{offset-distance:0%} to{offset-distance:100%}}
.cc-dot--2{animation-delay:3.5s}
@media (prefers-reduced-motion:reduce){
  .cc-dot{animation:none; opacity:1; offset-distance:18%}
  .cc-dot--2{offset-distance:62%}
}