/*
 * 한세대 커스텀 오버라이드 (vendor viewer.css 는 원본 유지)
 * 목적
 *   1) PDF.js 기본 뷰어가 350px 미만으로 줄어들지 않는 문제 해결 (320px 대응)
 *   2) 좁은 화면에서 사라지는 페이지 이동 버튼 복원
 *   3) 열람 전용이므로 주석/그리기 편집 기능 제거
 *   4) 핀치줌을 원래 크기로 되돌리는 "맞춤" 버튼 추가
 * viewer.css 이후에 로드되어야 함
 */

/* 뷰어가 350px 밑으로 못 내려가게 막던 하한선 해제 */
#mainContainer {
  min-width: 0;
}

/* 검색바도 300px 하한이 있어 좁은 폭에서 넘침 */
.findbar {
  min-width: 0;
  max-width: calc(100vw - 8px);
  inset-inline-start: 4px;
  box-sizing: border-box;
}

/*
 * 주석(텍스트 추가) / 그리기 편집 기능 제거 — 전 해상도
 * 교육과정 PDF 는 열람 전용이라 불필요하고, 툴바 폭만 차지한다.
 */
#editorModeButtons,
#editorModeSeparator {
  display: none;
}

/* "맞춤" 버튼은 터치 환경에서만 노출한다 (viewer-hansei.js 가 생성) */
#hsuResetZoom {
  display: none;
}

/*
 * 아이콘 지정.
 * PDF.js 의 .toolbarButton::before 는 --toolbar-icon-bg-color 를 깔고
 * mask-image 로 모양을 깎아낸다. 마스크를 안 주면 검은 네모만 남으므로
 * 전용 아이콘을 물려준다. 이러면 hover 색과 다크모드가 기본 버튼과 같아진다.
 */
#hsuResetZoom::before {
  -webkit-mask-image: url(images/hsu-fitScreen.svg);
          mask-image: url(images/hsu-fitScreen.svg);
}

/* 라벨은 보조기기에만 노출 (PDF.js 의 다른 버튼과 동일한 처리) */
#hsuResetZoom > span {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
}

/*
 * 767px 이하 — 모바일 툴바 재구성
 *
 * #toolbarViewerMiddle 은 원래 left:50% 절대 배치라, 안에 버튼이 늘어나면
 * 중앙 기준으로 커지면서 오른쪽 그룹을 침범한다. 흐름 배치로 풀어
 * 좌측 그룹 뒤에 자연스럽게 이어지게 한다.
 */
@media all and (max-width: 767px) {
  #toolbarViewerMiddle {
    position: static;
    left: auto;
    transform: none;
    float: var(--inline-start, left);
  }

  /*
   * 페이지 입력창 축소 (기본 40px).
   * 세 자리를 넘는 문서는 사실상 없으므로 28px 이면 충분하다.
   */
  #toolbarViewerLeft #pageNumber {
    width: 28px;
    padding-inline: 2px;
  }

  /*
   * 맞춤 버튼 — 줌 버튼 옆에 붙는다.
   * 크기(28x28)·여백·hover 색은 .toolbarButton 이 이미 정의하므로 건드리지 않는다.
   * 여기서는 배치만 맞춘다.
   */
  #hsuResetZoom {
    display: inline-block;
    float: var(--inline-start, left);
    margin-inline-start: 4px;
    cursor: pointer;
  }
}

/*
 * 690px 이하
 * PDF.js 는 이 구간에서 .hiddenSmallView 로 이전/다음 버튼을 숨긴다.
 * 여러 장짜리 교육과정 PDF 에서는 페이지 이동이 핵심이므로 되살린다.
 */
@media all and (max-width: 690px) {
  #toolbarViewerLeft .splitToolbarButton.hiddenSmallView {
    display: inline-block;
  }
  #toolbarViewerLeft .splitToolbarButton.hiddenSmallView > .toolbarButton,
  #toolbarViewerLeft .splitToolbarButton.hiddenSmallView > .splitToolbarButtonSeparator {
    display: block;
  }

  /* 사이드바(썸네일/목차)는 좁은 화면에서 실효가 없고 폭만 차지 */
  #sidebarToggle,
  #sidebarContainer {
    display: none;
  }
  #outerContainer #viewerContainer {
    inset-inline-start: 0 !important;
  }
}

/* 560px 이하: 검색은 접는다 (우측 도구메뉴에서 접근 가능) */
@media all and (max-width: 560px) {
  #viewFind {
    display: none;
  }
}

/* 480px 이하 (320px 포함): 간격을 더 좁힌다 */
@media all and (max-width: 480px) {
  #toolbarViewer {
    padding-inline: 2px;
  }
  #hsuResetZoom {
    margin-inline-start: 2px;
  }
}