/* 3D 인체 보기 창 — 테마와 상관없이 늘 어두운 '엑스레이 판' */
.bv { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; color: #e6f1f5;
  background: radial-gradient(120% 85% at 50% 32%, #15323d 0%, #0b1a22 52%, #060d12 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 210, 235, .10); -webkit-user-select: none; user-select: none; }
.bv::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(140, 200, 225, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 200, 225, .045) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%); }
.bv-cv, .bv > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; z-index: 1; outline: none; }
.bv { min-width: 0; max-width: 100%; overscroll-behavior: contain; touch-action: none; container-type: inline-size; }   /* 좁은 3D 칸(글 옆 작은 3D)도 휴대폰처럼 — 아래 @container */   /* 3D 칸 안(단추·출처 위 포함)에서는 바깥 페이지가 움직이지 않게 */
.bv-cv, .bv > canvas { touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .bv-cv, .bv > canvas { cursor: grab; } }   /* PC: 끌어서 옮기기(손 모양), 구조물 위에서는 손가락 모양 — anatomy3d.js _hover */
.bv-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; z-index: 3; font-size: 13.5px; color: rgba(214, 234, 242, .82); text-align: center; padding: 20px; }
.bv-load[hidden] { display: none; }
.bv-spin { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(143, 211, 255, .18); border-top-color: #8fd3ff; animation: bvspin 1s linear infinite; }
@keyframes bvspin { to { transform: rotate(360deg); } }
.bv-label { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 12px 8px; border-radius: 12px; background: rgba(9, 21, 28, .86); border: 1px solid rgba(246, 166, 35, .6);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35); white-space: nowrap; will-change: transform; }
.bv-label::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: rgba(9, 21, 28, .86); border-right: 1px solid rgba(246, 166, 35, .6); border-bottom: 1px solid rgba(246, 166, 35, .6); }
.bv-label b { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.bv-label span { font-size: 11.5px; color: #ffcf7d; }
.bv-tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; font-size: 12.5px; padding: 4px 9px; border-radius: 8px; background: rgba(9, 21, 28, .9); color: #e8f4f8; border: 1px solid rgba(143, 211, 255, .25); }
.bv-tip[hidden], .bv-label[hidden] { display: none; }
.bv-tools { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.bv-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; pointer-events: auto;
  background: rgba(8, 20, 27, .74); border: 1px solid rgba(150, 210, 235, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bv-seg { flex-shrink: 0; }
.bv-seg button { white-space: nowrap; font: inherit; font-size: 12.5px; font-weight: 500; color: rgba(214, 234, 242, .78); background: transparent; border: 0; border-radius: 999px;
  min-height: 32px; min-width: 32px; padding: 0 11px; cursor: pointer; transition: background .15s, color .15s; }
.bv-seg button:hover { color: #fff; background: rgba(143, 211, 255, .10); }
.bv-seg button[aria-pressed="true"] { color: #08161d; background: #8fd3ff; }
.bv-seg button:focus-visible { outline: 2px solid #f6a623; outline-offset: 1px; }
.bv-zoom { margin-left: auto; }
.bv-sex[hidden] { display: none; }
.bv-sex button { min-width: 36px; padding: 0 10px; }
.bv-sex button[data-sex="f"][aria-pressed="true"] { background: #f2b6c4; }   /* 여성 몸일 때 단추 색만 조금 다르게(몸 색은 그대로) */
.bv-hint { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 5; margin: 0; font-size: 11.5px; color: rgba(214, 234, 242, .55); pointer-events: none; transition: color .2s; }
.bv-hint.is-on { color: #ffcf7d; }
.bv.is-active { box-shadow: inset 0 0 0 1px rgba(246, 166, 35, .35); }
@media (max-width: 560px) {
  .bv-seg button { font-size: 12.5px; padding: 0 9px; min-height: 34px; }
  .bv-tools { left: 8px; right: 8px; bottom: 8px; gap: 5px; flex-wrap: nowrap; }
  .bv-l { display: none; }
  .bv-zoom [data-zoom] { display: none; }
  .bv-hint { font-size: 11px; }
  /* 휴대폰: 아래 줄에 다 안 들어가서 남·여 단추는 아래 줄 바로 위 오른쪽에 */
  .bv-tools .bv-sex { position: absolute; right: 0; bottom: calc(100% + 6px); }
}
@media (prefers-reduced-motion: reduce) { .bv-spin { animation: none; } }

/* 구조물 보기(anatomy3d.js) */
.bv .bv-credit { position: absolute; right: 12px; top: 10px; margin: 0; font-size: 11px; color: rgba(190, 220, 230, .55); pointer-events: none; z-index: 2; }
.bv .bv-load { position: absolute; inset: 0; display: grid; place-items: center; color: #cfe3e8; font-size: 14px; pointer-events: none; z-index: 2; }
.bv .bv-load[hidden] { display: none; }
/* 휴대폰: 위쪽 안내 글이 오른쪽 출처 표시와 겹치지 않게 */
@media (max-width: 560px) { .bv .bv-credit { font-size: 10.5px; left: 12px; right: 12px; text-align: right; } .bv .bv-hint { top: 28px; right: 12px; max-width: none; line-height: 1.35; } }
.bv a.bv-credit { pointer-events: auto; text-decoration: none; }
.bv a.bv-credit:hover { color: rgba(220, 240, 246, .9); text-decoration: underline; }
/* 여성 몸일 때 안내(3D 아래쪽 왼편, 도구 줄 바로 위) */
.bv .bv-fnote { position: absolute; left: 12px; bottom: 56px; z-index: 5; margin: 0; max-width: calc(100% - 24px); font-size: 11px; line-height: 1.4; color: rgba(214, 234, 242, .62); pointer-events: none; }
.bv .bv-fnote[hidden] { display: none; }
.bv .bv-fnote a { color: rgba(242, 182, 196, .9); pointer-events: auto; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .bv .bv-fnote { left: 10px; bottom: 54px; max-width: calc(100% - 130px); font-size: 10.5px; } }
/* 3D 칸 너비가 좁으면(휴대폰, 또는 PC 에서 글 옆 작은 3D) 도구 줄을 한 줄로: 확대 ± 숨김, 남·여는 줄 위 오른쪽, 여성 안내는 줄 위 왼쪽 */
@container (max-width: 560px) {
  .bv-seg button { font-size: 12.5px; padding: 0 9px; min-height: 34px; }
  .bv-sex button { min-width: 34px; padding: 0 9px; }
  .bv-tools { left: 8px; right: 8px; bottom: 8px; gap: 5px; flex-wrap: nowrap; }
  .bv-zoom [data-zoom] { display: none; }
  .bv-tools .bv-sex { position: absolute; right: 0; bottom: calc(100% + 6px); }
  .bv .bv-fnote { left: 10px; bottom: 54px; max-width: calc(100% - 130px); font-size: 10.5px; }
}

/* 단면 보기 — 도구 줄 위에 뜨는 작은 판(방향·깊이). 여성 몸 안내 글·남녀 단추를 가리지 않게 자리를 잡음 */
.bv-cut { position: absolute; left: 10px; bottom: 58px; z-index: 5; width: min(250px, calc(100% - 20px)); display: flex; flex-direction: column; gap: 3px; padding: 6px 10px 7px; border-radius: 14px; background: rgba(8, 22, 29, .78); border: 1px solid rgba(143, 211, 255, .16); }
.bv-cut[hidden] { display: none; }
.bv-cut .bv-seg { align-self: flex-start; }
.bv-cut .bv-seg button { padding: 0 11px; min-height: 30px; }
.bv-cut input[type=range] { width: 100%; margin: 0; height: 24px; accent-color: #f6a623; touch-action: none; }
.bv-cut p { margin: 0; font-size: 10.5px; line-height: 1.35; color: rgba(214, 234, 242, .72); }
.bv.bv-f .bv-cut { bottom: 86px; }
@media (max-width: 560px) {
  .bv-cut { left: 8px; bottom: 50px; width: calc(100% - 112px); padding: 6px 8px; }
  .bv.bv-f .bv-cut { bottom: 112px; }
  .bv-cut .bv-seg button { padding: 0 9px; }
}
@container (max-width: 560px) {
  .bv-cut { left: 8px; bottom: 50px; width: calc(100% - 112px); padding: 6px 8px; }
  .bv.bv-f .bv-cut { bottom: 112px; }
  .bv-cut .bv-seg button { padding: 0 9px; }
}