@charset "UTF-8";
/* =============================================================================
 * 프롤로그(카드뉴스) — 표지 카드(메인/리스트 공용) · 인스타형 상세 · 본문 카드 캐러셀
 * ========================================================================== */

/* ===== 페이지 컨테이너 =====
   웹(리스트/상세)은 prologue_base.html 의 .board-web-shell(700px, board.css) + .page-content 가 폭/배경/박스를 담당
   (invitations 와 동일 레이아웃). 모바일만 .prologue-page-content 로 전체 폭 + 상하단 여백 처리. */
.prologue-page-content { width: 100%; box-sizing: border-box; }
body.is-mobile .prologue-page-content { padding: 1rem 1rem 6rem; } /* 위: 상단바와 간격(상세·리스트 공통) / 하단: 고정 하단바에 가리지 않도록 여백 */

/* 모바일: 전역 mobile_base.css 의 .top-gnb{position:fixed; z-index:9999} 를 normal flow 로 되돌려
   콘텐츠가 헤더에 가리지 않게 한다 (기획전 .promotion-page 와 동일 처리). */
.prologue-page.is-mobile .top-gnb { position: static; z-index: auto; }

/* 웹 셸 헤더: 제목을 박스 정중앙에 (board.css 의 margin-right:5rem 보정이 좌측으로 치우쳐 보여서 재정렬).
   뒤로 버튼은 좌측에 absolute 오버레이. */
.prologue-page .board-web-shell-header { position: relative; justify-content: center; }
.prologue-page .board-web-shell-back { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); }
.prologue-page .board-web-shell-title { margin-right: 0; }

/* 웹 셸 내부 콘텐츠 상하 여백 동일·여유있게 (board 기본 0.75rem 은 하단이 너무 붙어 보임) */
.prologue-page .page-content { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ===== 상품 상세 진입 카드 ===== */
/* 제목 "프롤로그" 옆 인라인 리드 — 별도 줄 없이 높이 절약 */
.detail-prologue__lead { margin-left: 0.5rem; font-size: 0.8125rem; font-weight: 400; color: #999; letter-spacing: 0; }
.detail-prologue .prologue-card__thumb { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

/* ===== 공용 표지 카드 (메인 스와이프 / 리스트 세로) ===== */
.prologue-card { display: block; text-decoration: none; color: inherit; }
/* 부모는 클립(overflow:hidden)·다크 배경을 두지 않는다 — 클립 경계의 다크 헤어라인(상단) 방지.
   대신 이미지·dim 이 각자 border-radius 를 상속받아 스스로 모서리를 둥글게 처리한다. */
.prologue-card__thumb {
  position: relative; width: 100%;
  aspect-ratio: 2 / 1;          /* 권장 표지 비율 — 로딩 전/실패에도 영역 확보 */
  background: #eee;             /* 썸네일 미로딩·실패 시 회색 플레이스홀더 */
  border-radius: 0.875rem;
}
/* 2:1 박스에 맞춰 채움. 로딩 실패 시 onerror 로 img 가 숨겨지면 위 회색 bg 가 영역을 채움 */
.prologue-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.prologue-card__dim {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.58) 35%, rgba(0,0,0,0.12) 70%, rgba(0,0,0,0) 100%);
}
.prologue-card__caption {
  position: absolute; left: 1.125rem; right: 1.125rem; bottom: 1.125rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
}
.prologue-card__badge {
  display: inline-block; padding: 0.4rem 0.75rem;
  background: #fff; color: #1a1a1a; border-radius: 1rem;
  font-size: 0.8125rem; font-weight: 700; line-height: 1;
}
.prologue-card__title {
  color: #fff; font-size: 1.1875rem; font-weight: 400; line-height: 1.35;
  letter-spacing: -0.01em; text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== 리스트 페이지 ===== */
/* 텍스트 히어로 — 명대사 인용 (중앙 정렬, 큰따옴표 위·아래 대칭) */
.prologue-hero { position: relative; margin-bottom: 0.75rem; padding: 1.25rem 0; text-align: center; }
.prologue-hero__quote {
  margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #2a2a2a;
  word-break: keep-all;
}
.prologue-hero__quote::before,
.prologue-hero__quote::after {
  content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: 2.75rem; line-height: 0.5; color: #ffc2c2;
}
.prologue-hero__quote::before { margin-bottom: -0.15rem; }                     /* 여는 큰따옴표 (위) — 위쪽 간격 보정 */
.prologue-hero__quote::after  { margin-top: -0.3rem; transform: rotate(180deg); } /* 닫는 큰따옴표 (아래, 대칭) */
.prologue-hero__cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: 0.8125rem; color: #aaa; }
.prologue-hero__cite::before { content: "— "; }
/* 설명 — 인용구와 분리되는 안내 박스 */
.prologue-hero__desc {
  display: block; text-align: left; margin: 1.25rem auto 0; max-width: 28rem;
  background: #f7f7f9; border-radius: 0.75rem; padding: 0.875rem 1.125rem;
  font-size: 0.875rem; line-height: 1.5; color: #666; word-break: keep-all;
}
.prologue-hero__desc-label {
  display: block; margin-bottom: 0.25rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.01em; color: #ff4b4b;
}
body.is-web .prologue-hero { margin-bottom: 1rem; padding: 1.5rem 0; }
body.is-web .prologue-hero__quote { font-size: 1.5rem; }
body.is-web .prologue-hero__quote::before,
body.is-web .prologue-hero__quote::after { font-size: 3.25rem; }

/* 웹/모바일 동일 — 한 줄에 카드 하나(1열). 웹만 카드 간격 약간 넓힘. */
.prologue-list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
body.is-web .prologue-list { gap: 1.5rem; }

/* 카드 입체감 + hover */
.prologue-list .prologue-card__thumb {
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.is-web .prologue-list .prologue-card:hover .prologue-card__thumb {
  transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.13);
}

.prologue-empty { padding: 4rem 0; text-align: center; color: #999; font-size: 0.9375rem; }

/* ===== 상세 ===== */
.prologue-preview-bar {
  margin-bottom: 1rem; padding: 0.625rem 1rem;
  background: #fff5e6; border: 1px solid #ffd591; border-radius: 0.5rem;
  color: #8a5a00; font-size: 0.8125rem;
}
.prologue-detail { display: flex; flex-direction: column; }

/* 상단 프로필 행 (인스타 헤더) — 위 여백은 컨테이너가 담당, 아래: 카드 위 여백 */
.pl-profile { display: flex; align-items: center; gap: 0.875rem; padding: 0 0 1rem; }
.pl-profile__media {
  flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%;
  overflow: hidden; background: #eee; display: block;
}
.pl-profile__media img { width: 100%; height: 100%; object-fit: cover; }
.pl-profile__body { flex: 1; min-width: 0; }
.pl-profile__name { display: block; font-size: 1rem; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.pl-profile__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3125rem; }
.pl-profile__meta { font-size: 0.8125rem; color: #888; }
.pl-profile__hall {
  display: inline-flex; align-items: center; font-size: 0.75rem; color: #555;
  background: #f0f0f2; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; white-space: nowrap;
}
.pl-profile__share {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e8e8e8; border-radius: 0.75rem; background: #fff; color: #333; cursor: pointer;
}
.pl-profile__share:hover { background: #f7f7f7; }

/* 본문 카드 캐러셀 (정사각, 1장씩) */
.pl-carousel { margin: 0 -1rem; }
body.is-web .pl-carousel { margin: 0; } /* radius 없음 — 슬라이드 이미지 모서리 둥글게 처리하지 않는다 */
.pl-carousel__swiper { position: relative; }

/* 좌우 화살표 — 공용 마크업, 모바일은 숨김(스와이프만) / 웹은 반투명(뒤 카드 내용 비침) */
body.is-mobile .pl-carousel__swiper .swiper-button-prev,
body.is-mobile .pl-carousel__swiper .swiper-button-next { display: none; }
.pl-carousel__swiper .swiper-button-prev,
.pl-carousel__swiper .swiper-button-next {
  --swiper-navigation-color: #fff;
  width: 2.5rem; height: 2.5rem; margin-top: -1.25rem;
  background: rgba(0,0,0,0.28); border-radius: 50%;
  transition: background-color 0.15s ease;
}
.pl-carousel__swiper .swiper-button-prev:hover,
.pl-carousel__swiper .swiper-button-next:hover { background: rgba(0,0,0,0.45); }
.pl-carousel__swiper .swiper-button-prev { left: 0.625rem; }
.pl-carousel__swiper .swiper-button-next { right: 0.625rem; }
.pl-carousel__swiper .swiper-button-prev::after,
.pl-carousel__swiper .swiper-button-next::after { font-size: 0.9rem; font-weight: 700; }
.pl-card { position: relative; background: #15171c; }
/* 원본 비율 유지 — 크롭/왜곡 없이 너비에만 맞춰 표시 */
.pl-card__img { display: block; width: 100%; height: auto; }

/* 마지막 추가 슬라이드 — 배경 상품 square 이미지 위 dim + 작품 정보 패널 */
.pl-cta-card { position: relative; }
/* 도달(swiper-slide-active) 시 이미지 위에 dim 이 fade-in 되고 버튼이 천천히 떠오름 */
.pl-cta-card__panel {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(0,0,0,0.7);
  opacity: 0; transition: opacity 0.5s ease;
}
.pl-cta-card.swiper-slide-active .pl-cta-card__panel { opacity: 1; }
.pl-cta-card__btn {
  display: inline-flex; align-items: center;
  padding: 0.9375rem 2.5rem; background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.9); border-radius: 2rem;
  font-size: 1rem; font-weight: 700; text-decoration: none; letter-spacing: 0.01em;
  opacity: 0; transform: translateY(1rem);
  transition: opacity 0.7s ease 0.25s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, background-color 0.2s ease;
}
.pl-cta-card.swiper-slide-active .pl-cta-card__btn { opacity: 1; transform: translateY(0); }
.pl-cta-card__btn:hover { background: rgba(255,255,255,0.14); }
/* 페이지네이션 점 — 사진 밖 하단(인스타 스타일). .swiper-pagination 기본 absolute 를 specificity 로 덮어 static 화 */
.pl-carousel__dots.swiper-pagination { position: static; text-align: center; margin-top: 0.625rem; line-height: 1; }
.pl-carousel__dots .swiper-pagination-bullet { width: 0.375rem; height: 0.375rem; background: #d4d4d4; opacity: 1; margin: 0 0.1875rem; }
.pl-carousel__dots .swiper-pagination-bullet-active { background: #3897f0; }

/* 제목 / 캡션 / 날짜 — 위 패딩으로 이미지 카드 영역과 텍스트 영역을 분리 */
.pl-body { padding: 1.75rem 0 0.5rem; }
.pl-body__title { font-size: 1.125rem; font-weight: 700; color: #262626; line-height: 1.4; margin: 0 0 0.625rem; letter-spacing: -0.02em; } /* 18px */
.pl-body__caption { font-size: 0.875rem; color: #262626; line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; } /* 14px — 어절 단위 줄바꿈(한국어 표준) + 긴 영문/URL 만 강제 줄바꿈 */
.pl-body__date { margin-top: 1.25rem; font-size: 0.75rem; color: #8e8e8e; letter-spacing: 0.02em; }

/* 목록 버튼 — 인스타 secondary 톤 (풀폭 연한 버튼) */
.pl-actions { margin-top: 2rem; }
.pl-actions__list {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.875rem; box-sizing: border-box;
  background: #fafafa; border: 1px solid #efefef; border-radius: 0.625rem;
  color: #262626; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  transition: background-color 0.15s ease;
}
.pl-actions__list:hover { background: #f0f0f0; }
.pl-actions__list svg { color: #8e8e8e; }

/* ===== 메인 홈 섹션 — .category 레이아웃(main.css) 위에 프롤로그 카드만 얹음 ===== */
.prologue-home__swiper { overflow: visible; }
.prologue-home__swiper .swiper-slide { height: auto; }
.prologue-home .prologue-card__thumb { border-radius: 0.75rem; }
/* 모바일 메인 카드만 리스트보다 작게 노출 → 글자/여백 한 단계 축소.
   웹은 base(.prologue-card__*) 크기를 그대로 사용 → prologue.php 리스트 페이지 뱃지/글자 크기와 동일. */
body.is-mobile .prologue-home .prologue-card__caption { left: 0.875rem; right: 0.875rem; bottom: 0.875rem; gap: 0.375rem; }
body.is-mobile .prologue-home .prologue-card__badge { padding: 0.3rem 0.6rem; font-size: 0.6875rem; }
body.is-mobile .prologue-home .prologue-card__title { font-size: 0.875rem; }

/* 웹: .category__swiper 와 동일하게 1100px 중앙정렬 + 클립.
   (프롤로그는 자체 Swiper 초기화라 .category__swiper 클래스를 못 붙임 → 레이아웃만 동일하게 복제)
   → 좌측 쏠림 해결 + 1100px 이상에서 카드 폭 고정(브라우저 크기에 따라 변하지 않음). */
body.is-web .prologue-home__swiper {
  max-width: 1100px; margin: -0.5rem auto 0; overflow: hidden;
  padding-top: 0.5rem;
}