/* 하이센스 «진단 중» 장면(diagnose.js). 바탕은 영상 바탕과 같은 하이센스 보라 종이색 — 이음새 없이. */
.hsd{position:fixed;inset:0;z-index:80;display:grid;place-content:center;justify-items:center;gap:4px;padding:16px;background:#f6f1ff;color:#251d3d;overflow:hidden}
.hsd-stage{position:relative;width:min(440px,calc(100vw - 32px),calc(100dvh - 140px));aspect-ratio:1}
.hsd-stage>img,.hsd-stage>video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#f6f1ff}
/* 영상 해독 색이 브라우저마다 1~2 차이 나서 생기는 네모 테두리를 가장자리 4%만 흐려 지운다 */
.hsd-stage>video{-webkit-mask-image:linear-gradient(90deg,#0000,#000 4%,#000 96%,#0000),linear-gradient(#0000,#000 4%,#000 96%,#0000);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000,#000 4%,#000 96%,#0000),linear-gradient(#0000,#000 4%,#000 96%,#0000);mask-composite:intersect}
.hsd:not(.still) .hsd-still,.hsd.still .hsd-video{display:none}
.hsd-cap{margin:0;display:flex;align-items:center;gap:10px;font-size:clamp(18px,4.6vw,22px);line-height:1.4;font-weight:800;letter-spacing:-.5px;color:#4f22c4;text-align:center;word-break:keep-all}
.hsd-text{display:block}
.hsd-dots{display:inline-flex;gap:5px;padding-top:4px}
.hsd-dots i{width:7px;height:7px;border-radius:50%;background:#6c3be8}
@media(prefers-reduced-motion:no-preference){
 .hsd-dots i{animation:hsd-dot 1.05s cubic-bezier(.215,.61,.355,1) infinite}
 .hsd-dots i:nth-child(2){animation-delay:.14s}.hsd-dots i:nth-child(3){animation-delay:.28s}
 @keyframes hsd-dot{0%,55%,100%{transform:none}25%{transform:translateY(-7px)}}
}
@media print{.hsd{display:none}}