@charset "utf-8";
/*
 * presidential-travels (순방 모아보기) 전용 스타일
 * - 기존 cwd.css 에 있던 .visitArea / .photoWrap 순방 전용 규칙을 이 파일로 분리
 * - 범용 유틸리티(fs_24, mt_10 등)는 cwd.css 에 유지
 */

/* 순방 목록 버튼 영역 (구 인라인 <style>) */
.visit_list button {
  width: 100%;
  height: 100%;
}

/*
 * 순방 모아보기 — 게시판별 섹션 (Figma 6224:76241 등 6종)
 */
.visitArea .visit_cont.visit_cont--board {
  display: block;
  width: 100%;
  padding-top: 0;
}

.visitArea .visit_boardSection {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 0;
  border-bottom: 1px solid #cdd1d5;
  box-sizing: border-box;
}

.visitArea .visit_boardTit {
  flex: 0 0 303px;
  width: 303px;
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
  word-break: keep-all;
}

.visitArea .visit_boardBody {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.visitArea .visit_boardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC(본문 950px) → 3열 ≈ 303px */
  gap: 20px;
  width: 100%;
}

.visitArea .visit_card {
  width: 100%; /* 그리드 트랙 채움 */
  max-width: 100%;
  min-width: 0; /* 그리드 아이템 넘침 방지 */
}

.visitArea .visit_card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.visitArea .visit_card_img {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  /* 이미지를 가운데 배치 (여백이 생겨도 이미지 자체를 중앙에) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.visitArea .visit_card_img img {
  display: block;
  /* 박스를 꽉 채우지 않고 실제 이미지 크기로 축소 → border-radius 가 보이는 이미지에 적용됨 */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 16px; /* 라운드는 이미지에 적용 */
  object-fit: contain; /* 잘림 없이 비율 유지 */
}

/* 나머지 카드: 3:2 가로형 (가로 기준) */
.visitArea .visit_card.photoType .visit_card_img,
.visitArea .visit_card.speechType .visit_card_img,
.visitArea .visit_card.videoType .visit_card_img {
  aspect-ratio: 3 / 2;
}

/* 카드뉴스: 고정 비율(aspect-ratio) 대신 이미지 높이에 맞춰 영역이 줄어들게 → 빈 공간 제거.
 * 이미지가 가로를 채우고 높이는 이미지 비율대로(잘림 없음, 라운드 유지) */
.visitArea .visit_card.cardNewsType .visit_card_img img {
  width: 100%;
  height: auto;
}

.visitArea .visit_card.videoType .visit_card_img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  mask: url(/type/common/img/common/ico_play_fill.svg) no-repeat center / contain;
  -webkit-mask: url(/type/common/img/common/ico_play_fill.svg) no-repeat center / contain;
}

.visitArea .visit_card_tit {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 최대 2줄, 넘치면 ... */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.visitArea .visit_card--hidden {
  display: none;
}

.visitArea .visit_boardSection.is-expanded .visit_card--hidden {
  display: block;
}

/* 접힘 + 펼치기 유효: 다음 줄을 50px 미리보기 + 하단 그라데이션
 * (max-height 는 JS 가 다음 줄 위치+50px 로 설정) */
.visitArea .visit_boardSection.is-peek .visit_boardGrid {
  position: relative;
  overflow: hidden;
}
.visitArea .visit_boardSection.is-peek .visit_boardGrid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);
  pointer-events: none;
}

.visitArea .visit_boardMore {
  display: flex;
  width: 334px;
  max-width: 100%;
  height: 50px;
  min-width: 78px;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--surface-primary, #007be0);
  background: transparent;
  color: var(--color-text-primary, #0076d8);
  font-family: "Pretendard GOV";
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 25.5px */
  cursor: pointer;
  box-sizing: border-box;
}

.visitArea .visit_boardMore_icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--color-text-primary, #0076d8);
  mask: url(/type/common/img/common/ico_angle.svg) no-repeat center / contain;
  -webkit-mask: url(/type/common/img/common/ico_angle.svg) no-repeat center / contain;
  transition: transform 0.2s ease;
}

.visitArea .visit_boardSection.is-expanded .visit_boardMore_icon {
  transform: rotate(-180deg);
}

.visitArea .visit_boardMore.visit_boardMore--hide {
  display: none;
}

@media all and (max-width: 1280px) {
  .visitArea .visit_boardSection {
    flex-direction: column;
    gap: 24px;
  }

  .visitArea .visit_boardTit {
    flex: 0 0 auto;
    width: 100%;
    font-size: 28px;
  }

  .visitArea .visit_boardBody {
    width: 100%;
    align-items: flex-start;
  }
}

@media all and (max-width: 768px) {
  .visitArea .visit_boardSection {
    padding: 24px 0;
  }

  .visitArea .visit_boardTit {
    font-size: 24px;
  }

  /* 768px 이하: 3열 → 2열 */
  .visitArea .visit_boardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .visitArea .visit_card {
    width: 100%;
    max-width: none;
  }

  /* 모바일: 전체보기 버튼 가로 꽉 채움 */
  .visitArea .visit_boardMore {
    width: 100%;
  }
}

/* 순방 사진 슬라이드: 슬라이드(.swiper-slide)와 동일하게 이미지에도 라운드 적용 */
.photoWrap .photo_slide .photoSwiper .goodsImg img {
  border-radius: 1.2rem;
}

/* 순방 슬라이드: .goodsImg 안의 이미지 + 텍스트(.txtL)가 겹치지 않게 세로 배치.
 * (board.css 의 .goodsImg 는 이미지 전용(padding-top 고정박스 + 절대배치 img)이라
 *  세로로 긴 이미지가 영역을 넘어 .txtL 을 덮는 문제를 여기서 해소) */
.photoWrap .photo_slide .photoSwiper .goodsImg {
  padding-top: 0;
  z-index: auto;
  display: flex;
  flex-direction: column;
}
/* 이미지 영역: 비율 고정 박스 안에서 contain → 세로 이미지도 영역 밖으로 넘치지 않음 */
.photoWrap .photo_slide .photoSwiper .goodsImg > a {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.photoWrap .photo_slide .photoSwiper .goodsImg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-height: none;
  object-fit: contain;
}
/* 텍스트 영역: 이미지 아래에 흐름 배치 → 항상 보이도록 */
.photoWrap .photo_slide .photoSwiper .goodsImg .txtL {
  position: relative;
  z-index: 0;
}
/* 슬라이드 링크 포커스 링.
 * - overflow:hidden 에 잘리지 않도록 안쪽(outline-offset 음수)에 그림
 * - 디밍 오버레이(::before z-index:4) 위로 올림(z-index:5)
 * - loop 캐러셀에서 포커스가 프로그램적으로 옮겨지면 :focus-visible 이 안 잡히는 경우가 있어
 *   :focus 로 처리(포커스가 있으면 항상 링 표시) */
.photoWrap .photo_slide .photoSwiper .goodsImg > a:focus {
  outline: 2px solid var(--color-text-primary, #0076d8);
  outline-offset: -2px;
  border-radius: 1.2rem;
  z-index: 5;
}
/* 비활성 슬라이드 디밍 오버레이: 이미지+텍스트 전체를 덮어 함께 투명도 적용
 * (active 슬라이드에서는 board.css 가 display:none 처리) */
.photoWrap .photo_slide .photoSwiper .goodsImg::before {
  height: 100%;
  z-index: 4;
}

/* 순방 사진 슬라이드: 이전 - 페이지네이션 - 다음 중앙 정렬 */
.photoWrap .swiper_util {
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 0.8rem;
}
.photoWrap .swiper_util .swiper-pagination {
  order: 0;
  margin: 0;
}
.photoWrap .swiper_util .swiper-button-prev,
.photoWrap .swiper_util .swiper-button-next {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  margin: 0;
}
.photoWrap .swiper_util .swiper-button-prev {
  order: 1;
}
.photoWrap .swiper_util .swiper-button-next {
  order: 2;
}