/* MSDS 자료실 - PDF 뷰어 화면 */
html,body{height:100%}
body{background:#3a3d44; overflow:hidden}
@media (prefers-color-scheme: dark){ body{background:#15171c} }

/* 문서 대신 이 컨테이너가 스크롤한다.
   (확대 시 좌우 스크롤이 확실히 동작하도록 pdf.js 공식 뷰어와 같은 구조) */
.vw{
  position:fixed; top:0; left:0; right:0; bottom:0;
  overflow:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* 상단 고정 영역(툴바 + 진행바) */
.vtop{position:sticky; top:0; z-index:30}

/* ---------- 상단 바 ---------- */
.vbar{
  display:flex; align-items:center; gap:2px;
  background:var(--hd); color:var(--hd-fg);
  padding:8px 8px;
  padding-top:calc(8px + env(safe-area-inset-top));
  padding-left:calc(8px + env(safe-area-inset-left));
  padding-right:calc(8px + env(safe-area-inset-right));
  box-shadow:0 1px 6px rgba(0,0,0,.3);
}
.vtitle{
  flex:1 1 auto; min-width:0; margin:0 4px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vbtn{
  flex:0 0 auto; width:38px; height:38px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--hd-fg);
  font-size:19px; font-family:inherit; line-height:1; cursor:pointer;
}
.vbtn:active{background:rgba(255,255,255,.14)}
.vbtn:disabled{opacity:.35}
.vbtn.back::before{
  content:""; width:11px; height:11px;
  border-left:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  transform:rotate(45deg); margin-left:3px;
}
.vbtn.dl::before{
  content:""; width:12px; height:12px; margin-bottom:3px;
  border-left:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  transform:rotate(-45deg);
}
.vbtn.dl::after{
  content:""; position:absolute; width:16px; height:2.2px; margin-top:16px;
  background:currentColor; border-radius:2px;
}
.vbtn.dl{position:relative}

/* ---------- 진행 표시 ---------- */
.vprog{height:3px; background:rgba(255,255,255,.15)}
.vprog span{display:block; height:100%; width:0; background:var(--accent); transition:width .15s linear}

/* ---------- 페이지 ---------- */
.vpages{
  display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:10px 6px 40px;
  /* 확대해서 페이지가 화면보다 넓어져도 좌우 끝까지 스크롤되도록:
     컨테이너 자체를 가장 넓은 페이지에 맞춘다 (flex 가운데정렬의 왼쪽 잘림 방지) */
  width:-webkit-max-content; width:max-content; min-width:100%;
}
.vpage{
  position:relative; background:#fff; flex:0 0 auto;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.vpage canvas{display:block; width:100%; height:100%}

/* ---------- 상태 / 페이지 번호 ---------- */
.vstatus{
  margin:60px auto; max-width:520px; padding:0 20px;
  text-align:center; color:#d5d8dd; font-size:14px; line-height:1.9;
}
.vstatus.err{color:#ffb3ae}

.vpageno{
  position:fixed; z-index:25;
  left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));
  padding:5px 12px; border-radius:999px;
  background:rgba(0,0,0,.62); color:#fff;
  font-size:12px; font-variant-numeric:tabular-nums;
  pointer-events:none;
}