/* ---------- <picture> 는 레이아웃에서 투명하게 ----------
   WebP 를 먼저 제공하려고 <img> 를 <picture> 로 감쌌습니다.
   display:contents 를 주면 <picture> 자체는 배치에 관여하지 않아
   기존 flex/grid 레이아웃이 그대로 유지됩니다. */
picture {
  display: contents;
}

@charset "UTF-8";
/* ============================================================================
   redent_loading.css — 화면 전환 / 데이터 로딩 표시
   ----------------------------------------------------------------------------
   JSP 사이트는 화면을 옮길 때마다 [HTML → jQuery → 데이터조회 → 그리기 → 이미지]
   순서로 진행되어, 그리기 전까지 화면이 비어 보입니다.
   그 사이를 채워 "멈춘 것처럼" 느껴지지 않게 합니다.
   ========================================================================== */

/* ---------- 전체 화면 로딩 막 ---------- */
#rd-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 1;
  transition: opacity 0.25s ease;
}
#rd-loading.rd-hide {
  opacity: 0;
  pointer-events: none;
}
#rd-loading.rd-gone {
  display: none;
}

#rd-loading .rd-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid #f0dcdc;
  border-top-color: #ca0a0a;
  border-radius: 50%;
  animation: rd-spin 0.8s linear infinite;
}
@keyframes rd-spin {
  to {
    transform: rotate(360deg);
  }
}

#rd-loading .rd-loading-text {
  font-family: "Nanum Gothic", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  color: #999;
  letter-spacing: -0.3px;
}

/* ---------- 상단 진행 막대 (화면 전환 클릭 직후) ---------- */
#rd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #ca0a0a, #e85a5a);
  z-index: 100001;
  opacity: 0;
  transition: width 0.25s ease, opacity 0.25s ease;
}
#rd-progress.rd-run {
  opacity: 1;
}

/* ---------- 이미지가 도착하기 전 자리 표시 ---------- */
.card__image,
.wcard__image,
.book_img,
.histroyimg {
  background-color: #f6f6f6;
  background-image: linear-gradient(100deg, #f6f6f6 30%, #ededed 50%, #f6f6f6 70%);
  background-size: 400% 100%;
  animation: rd-shimmer 1.4s ease-in-out infinite;
}
/* 이미지가 다 뜨면 자리 표시 제거 */
.card__image.rd-loaded,
.wcard__image.rd-loaded,
.book_img.rd-loaded,
.histroyimg.rd-loaded {
  background: none;
  animation: none;
}
@keyframes rd-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* 이미지는 도착하면 부드럽게 나타납니다.
   숨기는 것은 스크립트가 rd-pending 을 붙인 경우에만 — 스크립트가 실패해도
   이미지가 사라지지 않도록 기본값은 '보임' 입니다. */
.card__image img,
.wcard__image img,
.book_img img,
.histroyimg img {
  transition: opacity 0.35s ease;
}
img.rd-pending {
  opacity: 0;
}
img.rd-in {
  opacity: 1;
}

/* 움직임 최소화를 설정한 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
  #rd-loading .rd-spinner {
    animation-duration: 2s;
  }
  .card__image,
  .wcard__image,
  .book_img,
  .histroyimg {
    animation: none;
  }
  .card__image img,
  .wcard__image img,
  .book_img img,
  .histroyimg img {
    opacity: 1;
    transition: none;
  }
}


/* ============================================================================
   이미지가 도착하기 전에도 "자리"를 미리 잡아둡니다.
   ----------------------------------------------------------------------------
   이 규칙이 없으면 사진이 오기 전까지 높이가 0 이라 위아래 영역이 서로 붙어
   보이다가, 사진이 도착하는 순간 화면이 툭 밀립니다.
   aspect-ratio 의 'auto' 는 "사진이 도착하면 진짜 비율을 쓰고, 그 전에는
   적어둔 비율만큼 자리를 잡는다"는 뜻이라 다 뜬 뒤 모양은 그대로입니다.
   ========================================================================== */

/* 책 표지 — 사진이 오기 전에 잡아둘 임시 자리.
   'auto' 가 앞에 있어 사진이 도착하면 원래 비율을 씁니다.
   목록의 실제 표지 자리와 같은 비율을 써야 사진이 뜨는 순간 덜컥거리지
   않으므로 redent_web.css 의 --rd-cover-ratio 와 같은 값(0.783)입니다. */
.bookimg,
.card__image img,
.card__image > picture > img,
.card_books img {
  aspect-ratio: auto 0.783;
  height: auto;
}

/* 책 상세 / 뉴스 상세 — 표지는 3:4, 세로로 긴 본문 이미지는 최소 높이만 */
.book_img1 {
  aspect-ratio: auto 3 / 4;
  height: auto;
}



/* 브랜딩 로고 — 정사각형 */
.boxes img {
  aspect-ratio: auto 1 / 1;
}



/* ============================================================================
   책 표지에 마우스를 올리면 작가·출간일 안내
   ----------------------------------------------------------------------------
   손가락으로 쓰는 기기에는 '마우스 올리기'가 없으므로,
   마우스가 있는 환경(hover: hover)에서만 나타나게 합니다.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .rd-hasmeta {
    position: relative;
    overflow: hidden;
  }
  .rd-hasmeta::after {
    content: attr(data-meta);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    background: rgba(20, 20, 20, 0.82);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    word-break: keep-all;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
  }
  .rd-hasmeta:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
  /* 설명이 비어 있으면 띄우지 않습니다 */
  .rd-hasmeta[data-meta=""]::after {
    display: none;
  }
}

/* 움직임을 줄이도록 설정한 사용자는 애니메이션 없이 바로 */
@media (prefers-reduced-motion: reduce) {
  .rd-hasmeta::after {
    transition: none;
  }
}


/* ============================================================================
   투명한 그림(PNG) 뒤로 회색이 비치지 않도록
   ----------------------------------------------------------------------------
   자리 표시(회색 반짝임)는 이미지가 오기 전까지만 필요합니다.
   이미지가 도착하면 rd-loaded 가 붙어 사라지지만, 혹시 그 신호를 놓치더라도
   그림이 실제로 그려진 뒤에는 회색이 남지 않도록 한 겹 더 막아 둡니다.
   ========================================================================== */


/* 그림 자체에는 배경을 두지 않습니다.
   투명한 PNG(로고·연혁 사진 일부)는 투명한 부분으로 배경색이 비쳐 보여서,
   배경이 회색으로 칠해진 것처럼 보였습니다.
   기다리는 동안의 자리 표시는 그림을 감싸는 칸이 맡습니다. */
.boxes img,
.histroyimg img,
.card__image img,
.book_imgs {
  background: none;
}


/* ============================================================================
   책 표지 아래 '작가 · 출간일' 한 줄
   ----------------------------------------------------------------------------
   손가락으로 쓰는 기기(휴대폰·태블릿)에는 '마우스 올리기'가 없어서,
   그런 기기에서는 표지 아래에 항상 보이게 합니다.
   마우스가 있는 화면에서는 표지에 올렸을 때 뜨므로 여기서는 감춥니다.
   ========================================================================== */
.rd-bookmeta {
  display: none;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a8a8a;
  word-break: keep-all;
}
.rd-bookmeta:empty {
  display: none !important;
}

@media (hover: none), (pointer: coarse) {
  .rd-bookmeta {
    display: block;
  }
}

/* 메인 BOOKS 슬라이드는 카드 높이가 275px 로 정해져 있어,
   한 줄만 보여주고 넘치면 … 로 줄입니다. */
.card.swiper-slide .rd-bookmeta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  margin-top: 2px;
}

/* 출판 목록은 제목과 같이 가운데 정렬 */
.card__content .rd-bookmeta,
.card_book_text + .rd-bookmeta {
  text-align: center;
}


/* ============================================================================
   본문 이미지(뉴스 상세 · 도서 상세)
   ----------------------------------------------------------------------------
   가로는 화면에 맞추고, 세로는 사진 원래 비율을 그대로 씁니다.
   억지로 늘리거나 잘라내지 않습니다.
   ========================================================================== */
/* 본문 이미지: 가로에 맞추고 세로는 원래 비율대로 */
.book_imgs,
.book_img2,
.book_img3 {
  max-width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
}

/* 사진이 도착하기 전에만 빈 자리를 만들어 둡니다.
   사진을 감싸는 칸에 걸기 때문에 사진 모양에는 영향이 없고,
   사진이 도착하면(rd-loaded) 곧바로 사라집니다. */

/* ============================================================================
   뉴스 상세의 동영상
   ----------------------------------------------------------------------------
   유튜브가 준비되기 전에도 16:9 자리를 잡아 두어 화면이 밀리지 않게 하고,
   기다리는 동안 '불러오는 중' 을 보여줍니다.
   ========================================================================== */

/* 옛 브라우저(aspect-ratio 를 모르는 경우) 대비 */
@supports not (aspect-ratio: 16 / 9) {
  .rd-video {
    height: 0;
    padding-bottom: 56.25%;
  }
}






/* ============================================================================
   뉴스 · 도서 본문 이미지의 자리 잡기
   ----------------------------------------------------------------------------
   'auto' 가 붙은 aspect-ratio 는 사진이 도착하면 진짜 비율을 쓰고,
   그 전에만 적어둔 비율로 자리를 잡습니다.
   사진 모양을 건드리지 않으면서 화면이 밀리는 것도 막습니다.
   ========================================================================== */

/* 조각으로 나눈 긴 이미지는 이어 붙였을 때 틈이 없어야 합니다 */
.rd-parts {
  display: block;
  font-size: 0;
  line-height: 0;
}
.rd-part {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: auto;
}

/* 동영상은 바로 위 이미지에 붙여 둡니다 */


/* ============================================================================
   뉴스 상세의 동영상
   ----------------------------------------------------------------------------
   padding-bottom 56.25% 는 '가로의 56.25% 만큼 세로를 확보' 한다는 뜻입니다.
   16:9 비율이며, 아주 오래된 브라우저에서도 항상 똑같이 동작합니다.
   ========================================================================== */

/* 동영상을 감싼 칸이 폭을 제대로 갖도록 */
.book_vod {
  display: block;
  width: 100%;
  margin-top: 12px;
}


/* ============================================================================
   연혁 사진
   ----------------------------------------------------------------------------
   · 가로는 모든 사진이 같습니다 (화면 폭에 대한 비율)
   · 세로는 사진이 가진 원래 비율 그대로입니다 — 늘리거나 줄이지 않습니다
   ========================================================================== */
/* 연혁 사진 — 가로만 맞추고 세로는 원래 비율 그대로 */
.histroyimg > img,
.histroyimg > picture > img,
.histroyimg > .rd-parts,
.histroyimg > .rd-parts img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  min-height: 0;
  max-height: none;
}

/* 조각으로 나눈 이미지도 다른 사진과 같은 폭을 쓰도록 */
.histroyimg > .rd-parts {
  display: block;
  width: 70%;
  margin: 0 12px;
}
@media all and (min-width: 500px) {
  .histroyimg > .rd-parts {
    width: 60%;
    margin: 0 20px;
  }
}


/* ============================================================================
   뉴스 상세의 동영상
   ----------------------------------------------------------------------------
   겹쳐 올리지 않고 글·사진과 같은 줄기에 그대로 놓습니다.
   가로는 화면에 맞추고, 세로는 16:9 로 정해집니다.
   aspect-ratio 를 모르는 옛 브라우저를 위해 vw 로도 한 번 더 지정합니다.
   ========================================================================== */



/* ============================================================================
   뉴스 상세의 동영상
   ----------------------------------------------------------------------------
   · 화면 가운데에 놓습니다.
   · 세로는 16:9 로 자동 계산됩니다 (높이를 직접 적지 않습니다).
     예전에 vw 로도 높이를 적어 두었더니 두 값이 어긋나 아래쪽에
     빈 회색 띠가 생겼습니다. 이제 한 가지 방법만 씁니다.
   · 배경색도 없앴습니다 — 영상이 뜨기 전 회색 덩어리로 보이던 원인입니다.
   ========================================================================== */
.book_vod {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  text-align: center;   /* 가운데 정렬 */
  position: static;
  background: none;
}

iframe.rd-video,
video.rd-video {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 24px;  /* 가운데 정렬 */
  border: 0;
  background: none;
  border-radius: 12px;
  overflow: hidden;
}

/* 서버에 올린 동영상 파일은 세로 영상일 수도 있어 비율을 고정하지 않습니다 */
video.rd-videofile {
  aspect-ratio: auto;
  height: auto;
  background: #000;
}

/* ============================================================================
   동영상 표지 (누르기 전에 보이는 그림 + 재생 단추)
   ----------------------------------------------------------------------------
   유튜브 재생기를 처음부터 불러오지 않고, 표지 그림 한 장만 먼저 받습니다.
   자리(16:9)와 모서리는 재생기와 똑같이 맞춰 두어, 눌러서 재생기로 바뀌어도
   화면이 밀리지 않습니다.
   ========================================================================== */
.rd-vodcover {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.rd-vodcover .rd-vodthumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 유튜브 표지는 4:3 이라 위아래를 살짝 잘라 채웁니다 */
  border: 0;
}

/* 가운데 재생 단추 — 그림 파일 없이 CSS 로만 그립니다.
   표지가 어두운 영상(첫 장면이 검은 화면인 경우)에서도 단추가 보이도록
   기본색을 브랜드 빨강으로 둡니다. 회색이었을 때는 검은 표지에 묻혔습니다. */
.rd-vodcover .rd-vodplay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 12px;
  background: #d93535;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: background 0.2s ease, transform 0.2s ease;
}
.rd-vodcover .rd-vodplay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -6px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.rd-vodcover:hover .rd-vodplay,
.rd-vodcover:focus-visible .rd-vodplay {
  background: #b62a2a;
  transform: scale(1.08);
}
.rd-vodcover:focus-visible {
  outline: 3px solid #d93535;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rd-vodcover .rd-vodplay {
    transition: none;
  }
  .rd-vodcover:hover .rd-vodplay,
  .rd-vodcover:focus-visible .rd-vodplay {
    transform: none;
  }
}