/* 인체 아틀라스 — 과학 아틀라스 생물의학 갈래의 도구 페이지
   팔레트는 science.css 의 변수를 그대로 쓴다(별도 :root 없음).
   무대는 암전 + 비네트, 점은 황동(정보) / 시안(더 깊은 층으로).
   생성 2026-08-16 · 팬 추가 2026-08-16:
   확대(open) 중에는 stage 가 끌기 화면이 된다(grab 커서 · touch-action 차단).
   .pt 는 --ips(역배율)로 확대해도 점·이름표가 화면 크기를 유지한다. */
/* 2026-09-29 고침: --stage 가 어디에도 정의돼 있지 않아 무대가 투명했고, 소개 절(#ba-intro)이
   도구 위로 비쳐 보였다. 무대 색을 여기서 정하고, 도구는 첫 화면 한 장을 다 쓰고
   소개 절은 그 아래(스크롤해야 보이는 자리)에 놓는다. 도구 화면은 전과 같다. */
.bodyatlas{--panel:400px;--stage:#0A1120}
*{box-sizing:border-box}
body.bodyatlas{margin:0;overflow-x:hidden;background:var(--ink);
  overscroll-behavior:none;-webkit-text-size-adjust:100%}
#app{position:relative;height:100vh;height:100dvh;display:flex;overflow:hidden}
body.bodyatlas > #ba-intro,body.bodyatlas > .foot-note{max-width:820px;margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px}
body.bodyatlas > #ba-intro{margin-top:56px}
body.bodyatlas > .foot-note{margin-bottom:56px}
#stage{position:relative;flex:1;overflow:hidden;background:var(--stage);touch-action:none}
body.open #stage{cursor:grab}
body.open #stage.dragging{cursor:grabbing}
#stage::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 62% 58% at 50% 46%, transparent 40%, rgba(5,10,20,.78) 100%)}
#viewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#zoomer{position:relative;transition:transform .8s cubic-bezier(.22,.75,.2,1);
  transform-origin:50% 50%;will-change:transform}
#zoomer.noanim{transition:none}
#zoomer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .45s ease}
#zoomer img.show{opacity:1}
#zoomer.fading{opacity:.25;transition:opacity .25s}

.pt{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:0;padding:0;cursor:pointer;background:transparent;z-index:3;
  transform:scale(var(--ips,1));transform-origin:50% 50%}
.pt::before{content:'';position:absolute;inset:5px;border-radius:50%;
  background:var(--brass-soft);
  animation:glow 2.1s ease-in-out infinite;animation-delay:var(--tw,0s);
  transition:inset .22s, background .22s}
.pt::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid var(--brass);opacity:.55;
  animation:breathe 2.1s ease-out infinite;animation-delay:var(--tw,0s)}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 1px rgba(12,21,38,.65),0 0 9px 2px rgba(201,162,39,.45)}
  50%{box-shadow:0 0 0 1px rgba(12,21,38,.65),0 0 17px 6px rgba(201,162,39,.95),0 0 30px 10px rgba(201,162,39,.3)}
}
@keyframes breathe{0%{transform:scale(.55);opacity:.75}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
.pt.deep::before{background:var(--cyan);animation-name:glowc}
@keyframes glowc{
  0%,100%{box-shadow:0 0 0 1px rgba(12,21,38,.65),0 0 9px 2px rgba(111,183,201,.5)}
  50%{box-shadow:0 0 0 1px rgba(12,21,38,.65),0 0 18px 6px rgba(111,183,201,.95),0 0 32px 11px rgba(111,183,201,.32)}
}
.pt.deep::after{border-color:var(--cyan)}
.pt:hover::before,.pt.on::before{inset:2px;background:#fff4d0;animation:none;
  box-shadow:0 0 0 1px rgba(12,21,38,.65),0 0 19px 7px rgba(255,232,160,.95)}
.pt:hover::after,.pt.on::after{animation:none;transform:scale(1.75);opacity:.95}
/* 어지럼을 피하려는 설정에서는 깜빡임을 멈추고 밝은 상태로 고정한다 */
@media (prefers-reduced-motion:reduce){
  .pt::before{animation:none;box-shadow:0 0 0 1px rgba(12,21,38,.65),0 0 14px 5px rgba(201,162,39,.8)}
  .pt.deep::before{animation:none;box-shadow:0 0 0 1px rgba(12,21,38,.65),0 0 15px 5px rgba(111,183,201,.85)}
  .pt::after{animation:none;opacity:.5}
}
/* 손가락 기기 — 점을 키워 과녁을 넓힌다 */
@media (pointer:coarse){
  .pt{width:24px;height:24px;margin:-12px 0 0 -12px}
  .pt::before{inset:6px}
}
.pt .lb{position:absolute;left:19px;top:50%;transform:translateY(-50%) translateX(-6px);
  white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--brass-soft);background:rgba(6,11,22,.85);padding:3px 9px;border-radius:4px;
  border:1px solid rgba(201,162,39,.3);opacity:0;pointer-events:none;transition:.2s}
.pt.deep .lb{color:var(--cyan);border-color:rgba(111,183,201,.35)}
.pt:hover .lb,.pt.on .lb{opacity:1;transform:translateY(-50%) translateX(0)}
.pt[data-side="l"] .lb{left:auto;right:19px;transform:translateY(-50%) translateX(6px)}
.pt[data-side="l"]:hover .lb,.pt[data-side="l"].on .lb{transform:translateY(-50%) translateX(0)}

#top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  gap:14px;padding:14px 20px;pointer-events:none;flex-wrap:wrap}
@media (max-width:900px){
  #top{gap:8px;padding:9px 11px;padding-top:calc(9px + env(safe-area-inset-top))}
  #sys button{font-size:12px;padding:6px 10px}
  .brandline{font-size:10px;letter-spacing:.12em}
  #crumb{font-size:10.5px;width:100%;order:3}
}
#top>*{pointer-events:auto}
#backbtn{width:34px;height:34px;flex:0 0 auto;font-size:17px;line-height:1;color:var(--chalk);
  background:rgba(18,29,51,.85);border:1px solid var(--ink-3);border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.16s;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#backbtn:hover{border-color:var(--brass);color:var(--brass)}
#backbtn:active{background:var(--ink-3)}
@media (max-width:900px){#backbtn{width:38px;height:38px}}
.brandline{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brass);opacity:.9}
.brandline b{color:var(--chalk);font-weight:500}
#sys{display:flex;gap:6px;background:rgba(18,29,51,.72);border:1px solid var(--ink-3);
  border-radius:9px;padding:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#sys button{font-family:var(--sans);font-size:12.5px;color:var(--chalk-dim);background:0;
  border:0;border-radius:6px;padding:6px 13px;cursor:pointer;transition:.16s}
#sys button:hover{color:var(--chalk)}
#sys button.on{background:var(--ink-3);color:var(--brass-soft)}
#crumb{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px}
#crumb button{background:0;border:0;padding:0;cursor:pointer;color:var(--chalk-dim);font:inherit;transition:.15s}
#crumb button:hover{color:var(--brass)}
#crumb b{color:var(--chalk);font-weight:500}
#crumb i{color:var(--ink-3);font-style:normal}
#zoomctl{position:absolute;right:16px;bottom:16px;z-index:6;display:flex;flex-direction:column;gap:5px;
  opacity:0;pointer-events:none;transition:opacity .3s}
body.open #zoomctl{opacity:1;pointer-events:auto}
#zoomctl button{width:36px;height:36px;font-family:var(--mono);font-size:16px;line-height:1;
  color:var(--chalk-dim);background:rgba(18,29,51,.85);border:1px solid var(--ink-3);
  border-radius:8px;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:.16s;
  display:flex;align-items:center;justify-content:center;padding:0}
#zoomctl button:hover{border-color:var(--brass);color:var(--brass)}
#zoomctl button:active{background:var(--ink-3)}
@media (max-width:900px){#zoomctl{right:12px;bottom:12px}#zoomctl button{width:42px;height:42px}}

#flipbtn{font-family:var(--sans);font-size:12px;color:var(--cyan);
  background:rgba(111,183,201,.10);border:1px solid rgba(111,183,201,.34);border-radius:7px;
  padding:7px 12px;cursor:pointer;transition:.16s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);white-space:nowrap}
#flipbtn:hover{background:rgba(111,183,201,.2);border-color:var(--cyan)}
#flipbtn[hidden]{display:none}

#listbtn{font-family:var(--sans);font-size:12px;color:var(--chalk-dim);
  background:rgba(18,29,51,.72);border:1px solid var(--ink-3);border-radius:7px;
  padding:7px 12px;cursor:pointer;transition:.16s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#listbtn:hover,body.listing #listbtn{border-color:var(--brass);color:var(--brass)}
#listbox{position:absolute;left:20px;top:58px;z-index:7;width:270px;max-height:64vh;overflow-y:auto;
  background:rgba(12,21,38,.96);border:1px solid var(--ink-3);border-radius:11px;padding:12px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transform:translateY(-7px);transition:.2s}
body.listing #listbox{opacity:1;pointer-events:auto;transform:none}
.lx-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--brass);
  margin:2px 0 10px;padding-left:2px}
#listbox button{display:block;width:100%;text-align:left;background:0;border:0;
  border-radius:7px;padding:8px 10px;cursor:pointer;transition:.13s}
#listbox button:hover{background:var(--ink-3)}
#listbox button b{display:block;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--chalk)}
#listbox button span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--chalk-dim);opacity:.65;margin-top:1px}
#listbox button.deep b{color:var(--cyan)}
@media (max-width:900px){
  #listbox{left:11px;right:11px;width:auto;top:auto;bottom:0;max-height:70vh;
    border-radius:14px 14px 0 0;padding:14px 12px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(14px)}
  #listbox button{padding:11px 10px}
  #listbox button b{font-size:15px}
}

#loadchip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--brass-soft);
  background:rgba(12,21,38,.9);border:1px solid rgba(201,162,39,.3);border-radius:8px;
  padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .25s}
#loadchip.show{opacity:1}
#loadchip::after{content:'';display:inline-block;width:9px;height:9px;margin-left:9px;
  border-radius:50%;border:1.5px solid var(--brass);border-top-color:transparent;
  vertical-align:-1px;animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#hint{position:absolute;bottom:18px;left:0;right:64px;text-align:center;z-index:4;
  font-family:var(--mono);font-size:11px;color:var(--chalk-dim);opacity:.5;transition:.4s;
  padding:0 12px;line-height:1.5;word-break:keep-all}
@media (max-width:900px){#hint{right:60px;bottom:10px;font-size:10px}}
#hint.hide{opacity:0}
#vstamp{position:absolute;left:10px;bottom:8px;z-index:4;background:0;border:0;padding:4px;
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--chalk-dim);
  opacity:.4;cursor:pointer}
#diag{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:9;max-width:92%;
  font-family:var(--mono);font-size:11px;line-height:1.5;color:#ffd7d7;background:rgba(70,15,20,.95);
  border:1px solid rgba(255,120,120,.5);border-radius:8px;padding:9px 13px;
  display:none;word-break:break-all}
#diag.show{display:block}

#panel{width:0;flex:0 0 auto;overflow:hidden;background:var(--ink-2);
  border-left:1px solid var(--ink-3);transition:width .5s cubic-bezier(.22,.75,.2,1)}
body.open #panel{width:var(--panel)}
@media (max-width:900px){
  /* --panel 은 body.bodyatlas 에 있다. :root 에 덮어써 봐야 더 가까운 body 가 이긴다.
     이 한 줄이 어긋나 모바일에서 패널 폭이 400px 로 남고 글이 잘려 나갔다. */
  body.bodyatlas{--panel:100%}
  #app{flex-direction:column}
  #panel{height:0;border:0}
  body.open #panel{height:auto}
  body.open #stage{flex:0 0 52%;min-height:0}
  body.open #panel{width:100%;flex:1 1 auto;min-height:0;
    border-left:0;border-top:1px solid var(--ink-3)}
}
@media (max-width:900px) and (orientation:landscape){
  /* 가로로 눕히면 위아래로 나누는 것이 최악이다 — 좌우로 되돌린다 */
  #app{flex-direction:row}
  body.open #stage{flex:1 1 auto}
  body.bodyatlas{--panel:46%}
  body.open #panel{width:46%;flex:0 0 auto;border-left:1px solid var(--ink-3);border-top:0}
}
#pin{width:var(--panel);height:100%;overflow-y:auto;padding:28px 28px 60px}
@media (max-width:900px){#pin{width:100%;padding:18px 16px 46px;
  padding-bottom:calc(46px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .p-ko{font-size:24px}.p-sum{font-size:14.5px}}
#pin::-webkit-scrollbar{width:8px}
#pin::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:4px}
.p-kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--brass);margin-bottom:13px}
.p-ko{font-family:var(--disp);font-weight:700;font-size:29px;line-height:1.3;margin:0 0 6px}
.p-en{font-family:var(--mono);font-size:12px;color:var(--chalk-dim);margin:0 0 3px}
.p-la{font-family:var(--mono);font-size:11px;color:var(--chalk-dim);opacity:.6;font-style:italic;margin:0 0 18px}
.p-gym{font-size:13px;line-height:1.7;color:var(--cyan);background:rgba(111,183,201,.07);
  border:1px solid rgba(111,183,201,.22);border-radius:8px;padding:9px 12px;margin:0 0 16px;
  word-break:keep-all}
.p-gym i{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  font-style:normal;color:var(--chalk-dim);opacity:.7;margin-bottom:3px}
.p-sum{font-size:15px;line-height:1.85;word-break:keep-all;padding-bottom:20px;
  border-bottom:1px solid var(--ink-3);margin-bottom:22px}
.p-enter{display:block;width:100%;text-align:left;font-family:var(--sans);font-size:13.5px;
  color:var(--cyan);background:rgba(111,183,201,.07);border:1px solid rgba(111,183,201,.3);
  border-radius:9px;padding:12px 15px;cursor:pointer;margin-bottom:24px;transition:.16s}
.p-enter:hover{background:rgba(111,183,201,.14);border-color:var(--cyan)}
.p-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--brass);
  margin:0 0 11px;display:flex;align-items:center;gap:9px}
.p-h::after{content:'';flex:1;height:1px;background:var(--ink-3)}
.p-list{list-style:none;margin:0 0 26px;padding:0}
.p-list li{position:relative;padding-left:15px;font-size:14px;line-height:1.8;
  color:var(--chalk-dim);margin-bottom:8px;word-break:keep-all}
.p-list li::before{content:'';position:absolute;left:0;top:.72em;width:4px;height:4px;
  border-radius:50%;background:var(--brass);opacity:.55}
.p-dz{list-style:none;margin:0 0 26px;padding:0}
.p-dz li{padding:11px 14px;border:1px solid var(--ink-3);border-radius:8px;margin-bottom:8px;
  background:rgba(224,104,94,.05)}
.p-dz b{display:block;font-size:14px;color:var(--chalk);margin-bottom:3px;font-weight:600}
.p-dz span{font-size:13px;color:var(--chalk-dim);line-height:1.65;word-break:keep-all}
.p-near{display:flex;flex-wrap:wrap;gap:8px}
.p-near button i{display:inline;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;color:var(--chalk-dim);opacity:.62;margin-left:6px}
.p-near button{font-family:var(--sans);font-size:13px;color:var(--chalk-dim);background:var(--ink);
  border:1px solid var(--ink-3);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.16s}
.p-near button:hover{border-color:var(--brass);color:var(--brass)}
.p-note{margin-top:28px;padding-top:17px;border-top:1px solid var(--ink-3);
  font-size:11.5px;line-height:1.7;color:var(--chalk-dim);opacity:.55;word-break:keep-all}

/* 페이지 머리 — h1 은 화면에서 숨기지 않고 브랜드 줄 옆에 작게 둔다.
   검색결과 품질(h1 존재)과 화면 밀도를 동시에 만족시키기 위해서다. */
.brandline{text-decoration:none}
.ba-h1{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;
  color:var(--chalk-dim);opacity:.55;margin:0;white-space:nowrap}
@media (max-width:1100px){.ba-h1{display:none}}
.ba-back{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--chalk-dim);
  background:rgba(18,29,51,.72);border:1px solid var(--ink-3);border-radius:7px;
  padding:7px 11px;text-decoration:none;transition:.16s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ba-back:hover{border-color:var(--brass);color:var(--brass)}