/* 21세기 대군부인 모바일 - Pretendard 폰트 */
.evt_wrap,
.evt_wrap .content_wrap {
  font-family: 'pretend-regular', sans-serif;
}
.sub-wrap{border-bottom: 0;
  margin-bottom: 0;
  background: #000;}
/* 공통 섹션 */
.content_wrap {
  max-width: 640px;
  margin: 0 auto;
  background: #000;
  color: #fff;
}
.content_wrap section{margin-bottom: 0;background: #000;border-bottom: 8px solid #171A1D;}
/* main-img: 헤더·nav 제외하고 뷰포트 하단까지 채움, 가로 중앙 정렬 */
.main-img {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.main-img img {
  display: block;
  height: 100%;
  width: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center top;
}
.main-img p{position: absolute;bottom: 10px;left: 0;width: 100%;text-align: center;display: inline-block;font-size: 1.5rem;color: #fff;line-height: 3rem;}
.section-tit {
  width: 160px;
  margin-bottom: 24px;
  font-family: 'pretend-light';
  font-size: 20px;
  color: #F8F9FA;
  padding: 20px 0 4px;
  border-bottom: 1px solid #CED4DA;
}

.link-more {
  font-family: 'pretend-medium', sans-serif;
  font-size: 12px;
  color: #CED4DA;
  text-decoration: none;
}

/* wrap-preview 예고 영역 */
.wrap-preview {
  position: relative;
  display: block;
}

.wrap-preview .preview-play-icon,
.wrap-behind .preview-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.wrap-preview a {
  display: block;
  position: relative;
}

.preview-text-wrap {
  width: calc(100% - 32px);
  position: absolute;
  left: 16px;
  bottom: 13px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.preview-tit {
  width: 100%;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.35px;
}

/* wrap-cast 주요 인물 */
.wrap-cast {
  position: relative;
  padding-bottom: 16px;
  border-bottom: 1px solid #333;
}

.wrap-cast .section-tit {
  display: inline-block;
  margin: 0 16px 24px;
  line-height: 24px;
}

.wrap-cast .link-more {
  position: absolute;
  top: 23px;
  right: 16px;
}

.cast-list {
  list-style: none;
  margin: 0 16px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cast-list li {
  flex: 1;
  min-width: 0;
}

.cast-list li a {
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: 'pretend-regular', sans-serif;
  font-size: 13px;
}

.cast-list li a img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin: 0 auto 4px;
}

.cast-list li a span {
  display: block;
  color: #CED4DA;
  font-size: 14px;
  line-height: 20px;
  font-family: 'pretend-light';
}

.cast-btns {
  display: flex;
  gap: 8px;
  margin: 24px 16px;
}

.btn-cast {
  flex: 1;
  display: block;
  padding: 12px;
  text-align: center;
  font-family: 'pretend-regular';
  font-size: 16px;
  color: #ADB5BD;
  border: 1px solid #343A40;
  text-decoration: none;
}

/* wrap-photo 현장 사진 */
.wrap-photo {
  padding-bottom: 24px;
  border-bottom: 1px solid #333;
}

.wrap-photo .section-tit {
  display: inline-block;
  margin: 0 16px 24px;
}

.wrap-photo .link-more {
  position: absolute;
  top: 25px;
  right: 16px;
}

.wrap-photo {
  position: relative;
}

/* 360px 기준 136px 비율 유지 (aspect-ratio로 반응형) */
.photo-main {
  width: 100%;
  aspect-ratio: 360 / 136;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}

.photo-main a {
  position: absolute;
  inset: 0;
  display: block;
}

.photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* 메인 포토 텍스트 오버레이 + 그라데이션 */
.photo-main-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0) 50%, rgba(13, 13, 13, 0.78) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 16px;
}

.photo-main-caption {
  font-family: 'pretend-regular', sans-serif;
  font-size: 11px;
  color: #fff;
  text-decoration: underline;
  text-underline-position: under;
  margin-bottom: 4px;
}

.photo-main-tit {
  font-family: 'pretend-regular';
  font-size: 14px;
  color: #fff;
  line-height: 20px;
}

.photo-list {
  margin: 0 16px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.photo-list li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: 'pretend-regular', sans-serif;
  font-size: 13px;
}

.photo-list li a img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-bottom: 8px;
}

.photo-list li a span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #CED4DA;
  font-size: 14px;
  line-height: 20px;
}

/* wrap-behind 비하인드 */
.wrap-behind {
  padding-bottom: 24px;
  border-bottom: 1px solid #333;
}
.wrap-behind .section-tit{
    margin: 0 16px 24px;
}
/* 360px 기준 202px 비율 유지 (aspect-ratio로 반응형) */
.behind-link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 202;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}

.behind-link img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.behind-gradient {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0) 57.26%, rgba(13, 13, 13, 0.80) 100%);
}

.behind-text-wrap {
  width: calc(100% - 32px);
  position: absolute;
  left: 16px;
  bottom: 13px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.behind-caption {
  font-family: 'pretend-regular', sans-serif;
    font-size: 11px;
    color: #fff;
    text-decoration: underline;
    text-underline-position: under;
    margin-bottom: 4px;}

.behind-tit {
  width: 100%;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.35px;
  font-family: 'pretend-regular';
}


/* wrap-news 공식 뉴스 */
.wrap-news {
  padding-bottom: 16px;
  border-bottom: 1px solid #333;
}

.wrap-news .section-tit {
  display: inline-block;
}

.wrap-news .link-more {
  position: absolute;
  top: 24px;
  right: 17px;
}

.wrap-news {
  position: relative;
  padding: 0 16px;
}

.news-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.news-list li {
  border-bottom: 1px solid #424950;
}

.news-list li:first-child a{padding-top:0;}
.news-list li:last-child {
}

.news-list li a {
  display: flex;
  align-items: flex-start;
  padding: 16px 0 8px;
  color: #D6D6D6;
  text-decoration: none;
  font-family: 'pretend-regular', sans-serif;
  font-size: 16px;
  flex-direction: column;
}

.news-date {
  font-family: 'pretend-medium', sans-serif;
  font-size: 14px;
  color: #C2C2C2;
  letter-spacing: -0.35px;
  line-height: 20px;
  margin-bottom: 4px;
}

.news-tit {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
  letter-spacing: -0.4px;
}

/* wrap-vod 최신 영상 */
.wrap-vod {padding-bottom: 24px;}
.wrap-vod .section-tit{margin:0 16px 24px}
.vod-list {
  padding: 0 16px;
  list-style: none;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}

.vod-list::-webkit-scrollbar {
  height: 4px;
}

.vod-list::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 2px;
}

.vod-list li {
  flex-shrink: 0;
  width: 120px;
}

.vod-list li a {
  display: block;
}

.vod-list li a img {
  width: 100%; 
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-bottom: 8px;
  position: relative;
}

.vod-list li a span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  color: #CED4DA;
  font-size: 14px;
}

/* wrap-history 주요 연표 */
.wrap-history{
  padding: 0 16px 24px;
}
.history-status-bar {
  position: relative;
  height: 2px;
  background: #757575;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}
.history-status-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 100%;
  background: #CED4DA;
  border-radius: 2px;
  transition: left 0.25s ease;
}
section.wrap-history{background: url(/images/perfectcrown/bg_history.png) center -5px no-repeat;
    background-size: 112%;}
.wrap-history .section-tit {
  padding: 20px 0 4px;
  line-height: 24px;
}
.wrap-concept .section-tit {margin:0 16px 24px}
.wrap-concept img{border-top:8px solid #171a1d}
.history-swiper {
  overflow: hidden;
  margin: 0 -16px;
  min-height: 100vh;
}
.history-swiper .swiper-slide {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  cursor: pointer;
}
.history-swiper .swiper-slide img {
  width: 100%;
  display: block;
  vertical-align: top;
  object-fit: contain;
  object-position: top center;
  box-sizing: border-box;
  padding: 0 16px;
  pointer-events: none;
}

