/* 책장 카드 판 표시, 다 읽은 화면.
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
/* 책장 카드: 그림·글·음성이 새로 고친 판인지 (시험하는 동안) */
.book-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 8px 8px;
}
.book-status .chip {
  font-size: 12px;
  line-height: 1.5;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eceee5;
  color: #5e6b58;
  word-break: keep-all;
}
.book-status .chip.new {
  background: #dcecd6;
  color: #2e5a38;
}
.book-status .chip.test {
  background: #f7ead0;
  color: #86561a;
}

/* 다 읽은 뒤: 처음부터 다시 보기 + 다른 동화 보기 */
#finish .finish-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 32px auto 0;
  max-width: 760px;
}
#finish .finish-actions button {
  flex: 1 1 280px;
}
#finish #finish-again {
  border: 3px solid #3e5c45;
  background: #fffaf1;
  color: #3e5c45;
  cursor: pointer;
}
#finish #finish-again:hover {
  background: #eef3e6;
}

/* 다 읽은 화면: 책장 카드처럼 표지를 흰 카드에 담고 ‘다 읽음’ 도장을 모서리에 */
#finish.finish {
  max-width: 820px;
  padding: 36px 16px 56px;
}
#finish .finish-card {
  position: relative;
  width: min(100%, 480px);
  margin: 0 auto 22px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e6e1d3;
  border-radius: 22px;
  box-shadow: 0 10px 26px #2b3f2f14;
}
#finish .finish-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  background: #f0efe6;
}
#finish .finish-card .finish-stamp {
  position: absolute;
  right: -26px;
  top: -30px;
  width: 132px;
  margin: 0;
}
#finish h2 {
  font:
    40px/1.3 Jua,
    sans-serif;
  color: #2f4a3c;
  margin: 0;
}
#finish p#finish-text {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: #59684f;
  word-break: keep-all;
}
#finish .finish-actions {
  margin-top: 28px;
}
@media (max-width: 700px) {
  #finish .finish-card .finish-stamp {
    right: -8px;
    top: -22px;
    width: 96px;
  }
  #finish h2 {
    font-size: 32px;
  }
  #finish p#finish-text {
    font-size: 17px;
  }
}