@view-transition {
  navigation: auto;
}

.ios-safe-screen {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.ios-safe-screen-fill {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

.ios-safe-sheet {
  max-height: calc(100vh - 1rem);
  max-height: calc(100svh - 1rem);
  max-height: calc(100dvh - 1rem);
}

.booklog-review-textarea {
  resize: none;
  appearance: none;
  -webkit-appearance: none;
}

.booklog-review-textarea::-webkit-resizer {
  width: 0;
  height: 0;
  background: transparent;
  display: none;
}

#book-review,
[id^='highlight-'] {
  scroll-margin-top: 7rem;
}

/* 리더 스크롤은 불러온 챕터만 기준이라 책 전체 위치와 맞지 않아, 스크롤바 대신 진행률 막대로 위치를 보여 줍니다. */
#epub-reader,
#epub-reader .epub-container {
  scrollbar-width: none;
}

#epub-reader::-webkit-scrollbar,
#epub-reader .epub-container::-webkit-scrollbar {
  display: none;
}

/* Safari 17.4 미만의 ::backdrop은 :root 변수를 물려받지 못해, 테마 변수 대신 색을 직접 씁니다. */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Safari는 summary 펼침 표시를 list-style이 아닌 별도 마커로 그립니다. */
summary.list-none::-webkit-details-marker {
  display: none;
}

/* iOS Safari 16은 둥근 스크롤 패널의 높이가 바뀌면 잘림 영역을 갱신하지 않아, 별도 레이어로 그립니다. */
.booklog-scroll-sheet {
  transform: translateZ(0);
}

/* iOS Safari는 16px 미만 입력창을 누르면 화면을 확대하므로, iOS에서만 입력 글자를 16px로 맞춥니다. */
@supports (-webkit-touch-callout: none) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 금방 끝나는 이동에서 안내가 깜빡이지 않게, 0.5초가 지나도 진행 중일 때만 보입니다. */
.booklog-delayed-reveal {
  animation: booklog-delayed-reveal 0.2s ease-out 0.5s both;
}

@keyframes booklog-delayed-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.booklog-linked-section {
  outline: 2px solid #9e6125;
  outline-offset: 4px;
}