/* ══════════════════════════════════════════════════════════
   오브의원 · 장비리프팅 — 페이지 전용
   접두사 dv- 만 쓴다. site.css 는 건드리지 않는다(전 페이지 공유).
   도해는 site.css 의 .layers / .ly1~4 / .pin / .lyt / .pint 를 그대로 쓴다 —
   SVG 글자 크기가 그 viewBox(420) 기준으로 이미 맞춰져 있어서다.
   ══════════════════════════════════════════════════════════ */

/* ── 히어로 — 가로 컷을 세로 프레임에 cover 하면 좌우가 먼저 잘린다.
      모바일은 세로 컷을 따로 쓴다. ── */
.dv-hero__d{display:none}
.dv-hero__m{display:block; --phero-pos:50% 38%}
@media (min-width:760px){
  .dv-hero__d{display:block; --phero-pos:62% 45%}
  .dv-hero__m{display:none}
}

/* ── 04 작용 깊이 도해 ── */
.dv-depthfig{margin:0}
/* 3DEEP 이 걸치는 범위 — 층을 가로지르는 띠. 리니어지의 점 초점과 대비된다. */
.dv-band{fill:var(--accent-w); stroke:var(--accent); stroke-width:1.5; opacity:.9}
.dv-depthfig figcaption{margin-top:1.1rem}

/* ── 05 비교표 ── */
.dv-cap{
  caption-side:top; text-align:left; padding-bottom:.9rem;
  font-size:var(--f-cap); color:var(--muted); line-height:1.6;
}
.dv-tbl td.k{white-space:normal; min-width:6.5em}

/* ── 06 장비 — FDA 승인은 사실이라 남긴다(수식어만 뺀다) ── */
.dv-badge{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  margin-top:1rem; font-size:var(--f-sub); color:var(--muted); line-height:1.6;
}
.dv-badge__t{
  display:inline-flex; align-items:center; height:26px; padding-inline:.8rem;
  font-size:var(--f-cap); font-weight:700; letter-spacing:.04em;
  color:var(--brand); background:var(--accent-w); border-radius:var(--r-pill);
}

/* ── 07 이런 분들 — 항목이 3개라 2열에서 한 칸이 남는다. 모바일은 1열로. ── */
/* 사진(4:3) 옆에 카드 3장을 한 줄로 두면 아래가 통째로 빈다(지적) —
   세로로 쌓아 사진 높이만큼 채운다. 좁은 화면(사진 아래로 내려갈 때)만 가로 3장. */
.dv-who{grid-template-columns:1fr; align-content:stretch}
.dv-who li{display:flex; flex-direction:column; justify-content:center}
@media (min-width:560px) and (max-width:899px){.dv-who{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){#s07 .barea{align-items:stretch}}


/* ⑦ 깊이 도해의 움직임 — 「열이 어느 층에 모이는가」는 정지 그림으로는 안 보인다.
   점이 층마다 다른 리듬으로 맥동하고, 그 층의 띠가 아주 옅게 밝아졌다 돌아온다. */
@keyframes dv-pulse{
  0%,100%{r:6; opacity:.55}
  50%{r:9; opacity:1}
}
@keyframes dv-band{
  0%,100%{opacity:0}
  50%{opacity:.5}
}
.dv-dot{animation:dv-pulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.dv-dot--2{animation-delay:.5s}
.dv-dot--3{animation-delay:1s}
.dv-dot--4{animation-delay:1.5s}
.dv-glow{fill:var(--accent); opacity:0; animation:dv-band 2.8s ease-in-out infinite}
.dv-glow--2{animation-delay:.5s}
.dv-glow--3{animation-delay:1s}
@media (prefers-reduced-motion:reduce){
  .dv-dot,.dv-glow{animation:none}
  .dv-glow{opacity:.28}
}

/* 보유 장비 목록 — 원내 실사진(4:5) + 명칭 + 한 줄 역할. 3열 → 모바일 2열 */
.dv-list{margin-top:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)}
.dv-eq{margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:1rem; grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.dv-eq{grid-template-columns:repeat(3,1fr); gap:1.2rem}}
.dv-eq li{display:grid; gap:.25rem; align-content:start; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:.9rem}
.dv-eq img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:calc(var(--r-card) - 4px); margin-bottom:.5rem}
.dv-eq b{font-size:var(--f-sub); color:var(--ink); line-height:1.4}
.dv-eq span{font-size:var(--f-cap); color:var(--muted); line-height:1.55}
.dv-list .cap{margin-top:1rem}