/* 앱 이름 옆 소개, 책장 카드·다 읽은 화면의 ‘다 읽음’ 도장.
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
/* ───── 앱 이름 옆 한 줄 소개 (책장에서만) ───── */
#gnb .brand-slogan {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid #d5dccb;
  font-size: 15px;
  color: #59684f;
  white-space: nowrap;
}
body.reading-book #gnb .brand-slogan {
  display: none;
}

/* ───── 책장 카드: 한 줄 설명, 다 읽은 책은 도장 ───── */
.book-card .book-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.9em;
  margin: 0 8px 6px;
  font-size: 15px;
  line-height: 1.45;
  color: #59684f;
  word-break: keep-all;
}
.read-stamp {
  display: block;
  color: #d0412c;
}
.read-stamp text {
  font-weight: 400;
}
.book-card {
  position: relative;
}
.card-stamp {
  position: absolute;
  z-index: 4;
  right: 18px;
  top: 18px;
  width: 84px;
  height: auto;
  transform: rotate(12deg);
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 #fffaf1) drop-shadow(0 0 2px #fffaf1);
}

/* ───── 다 읽은 화면: 같은 도장을 쾅 찍는다 ───── */
.finish-stamp {
  display: block;
  width: 150px;
  margin: 0 auto 10px;
}
.finish-stamp .read-stamp {
  width: 100%;
  height: auto;
  transform: rotate(-14deg);
  animation: stamp-down 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) both 0.15s;
}
@keyframes stamp-down {
  from {
    opacity: 0;
    transform: scale(1.9) rotate(-4deg);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-14deg);
  }
}
@media (max-width: 700px) {
  #gnb .brand-slogan {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .finish-stamp .read-stamp {
    animation: none;
  }
}
@media (max-width: 500px) {
  .media-button {
    height: 44px;
    padding: 0 13px;
    font-size: 15px;
  }
}