/* 한 화면 배치(그림 밑 조작 줄 하나), 붙일 자리 안내.
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
/* 단추 글자는 단어 가운데서 끊지 않는다 (「다시 붙이/기」처럼) */
#reader button,
#reader .choice span,
#gnb button,
#reader-settings button,
#finish button {
  word-break: keep-all;
  overflow-wrap: normal;
}
#reader .item-rail #again {
  flex-wrap: wrap;
  line-height: 1.25;
}

/* ───── 한 화면 배치: 그림 밑 조작 줄 하나, 그림은 화면 높이에 맞춘다 ─────
   많이 쓰는 아이패드 가로(사파리 주소창 뺀 높이): 9세대 1080×740, 10세대·에어 11 1180×750, 프로 11 1194×764, 미니 1133×674, 13인치 1366×950.
   그림 너비 = min(칸 너비, (화면 높이 − 위쪽 줄·진행 줄·조작 줄 높이) × 그림 비율) */
#reader {
  --reader-chrome: 204px;
}
#gnb {
  height: 64px;
}
#reader .reader-progress {
  margin: 6px 0 8px;
}
#reader .reader-progress .restart-button {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 15px;
}
#reader .reading-layout {
  gap: 10px;
}
#reader .picture-side {
  justify-items: center;
}
#reader .board {
  width: min(100%,calc((100vh - var(--reader-chrome)) * var(--ratio,1.6)));
  width: min(100%,calc((100dvh - var(--reader-chrome)) * var(--ratio,1.6)));
}
#reader .picture-side.ending-scene .board {
  justify-self: center;
}
.reader-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #e5e8dc;
  border-radius: 22px;
  box-shadow: 0 2px 10px #2b3f2f0d;
}
.reader-bar .media-button,
.reader-bar .autoplay-switch {
  height: 46px;
}
#reader .reader-bar .quiz {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 12px;
  background: none;
  border: 0;
  border-left: 1px solid #e5e8dc;
  border-radius: 0;
}
#reader .reader-bar .quiz[hidden] {
  display: none;
}
#reader .reader-bar .quiz h3 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 2px 0 0;
  font:
    21px/1.3 Jua,
    sans-serif;
  color: #2f4a3c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#reader .reader-bar .sound-button {
  flex: none;
  min-height: 44px;
  white-space: nowrap;
}
#reader .reader-bar .autoplay-switch {
  margin-left: auto;
}
/* 틀렸을 때 안내·힌트 글은 조작 줄 위에 말풍선으로 */
#reader .reader-bar #quiz-feedback {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: 6;
  max-width: min(92%, 640px);
  margin: 0;
  padding: 10px 16px;
  border-radius: 16px;
  background: #fffaf1f2;
  box-shadow: 0 6px 20px #2b3f2f26;
  font:
    17px/1.45 Jua,
    sans-serif;
  color: #6b4a2c;
  text-align: center;
  pointer-events: none;
}
#reader .reader-bar #quiz-feedback:empty {
  display: none;
}
@media (min-width: 701px) {
  #reader .story-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (min-width: 701px) and (max-height: 700px) {
  #gnb {
    height: 56px;
  }
  #reader {
    --reader-chrome: 188px;
  }
  #reader .reader-progress {
    margin: 4px 0 6px;
  }
}
@media (max-width: 700px) {
  #reader {
    --reader-chrome: 0px;
  }
  #reader .board {
    width: 100%;
  }
  .reader-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  #reader .reader-bar .quiz {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    padding: 6px 0 0;
    border-left: 0;
    border-top: 1px solid #e5e8dc;
  }
  #reader .reader-bar .quiz h3 {
    white-space: normal;
    flex-basis: 100%;
    font-size: 18px;
  }
}

/* 붙일 자리 안내: 글자·＋ 를 크게 */
#reader .target-label {
  bottom: -36px;
  padding: 4px 12px;
  border-radius: 12px;
  font:
    17px/1.3 Jua,
    sans-serif;
  color: #3e5941;
  box-shadow: 0 2px 8px #2b3f2f1f;
}
#reader #target-symbol {
  width: 42px;
  height: 42px;
}
#reader #target-symbol .icon {
  width: 26px;
  height: 26px;
}
@media (max-width: 700px) {
  #reader .target-label {
    bottom: -26px;
    padding: 2px 8px;
    font-size: 13px;
  }
  #reader #target-symbol {
    width: 30px;
    height: 30px;
  }
  #reader #target-symbol .icon {
    width: 20px;
    height: 20px;
  }
}