@charset "UTF-8";
.youtube-overlay-link {
  color: #1a0dab;
  cursor: pointer;
  text-decoration: underline; }

/* 오버레이의 전체 레이아웃 설정 */
.youtube-overlay {
  display: none;
  /* 기본적으로 오버레이를 숨김 */
  position: fixed;
  /* 화면에 고정되도록 설정 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* 배경을 어둡게 조정하여 대비를 높임 */
  z-index: 1000;
  /* 다른 요소들보다 앞에 위치하도록 설정 */
  justify-content: center;
  /* 수평 방향으로 가운데 정렬 */
  align-items: center;
  /* 수직 방향으로 가운데 정렬 */ }

/* 오버레이 콘텐츠 영역 설정 */
.youtube-overlay-content {
  background-color: #fff;
  /* 배경색을 흰색으로 설정 */
  padding: 0;
  /* 패딩을 제거하여 콘텐츠가 꽉 차도록 설정 */
  border-radius: 5px;
  /* 모서리를 둥글게 설정 */
  width: 80%;
  height: auto;
  max-width: 900px;
  /* 최대 너비를 900px로 설정 */
  aspect-ratio: 16 / 9;
  /* 16:9 비율 설정 */
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  /* 그림자를 추가하여 구분을 명확히 함 */
  display: flex;
  justify-content: center;
  /* 수평 방향으로 가운데 정렬 */
  align-items: center;
  /* 수직 방향으로 가운데 정렬 */ }

/* 유튜브 iframe의 크기 설정 */
.youtube-overlay-content iframe {
  width: 100%;
  /* 너비를 부모 요소에 맞게 설정 */
  height: 100%;
  /* 높이를 부모 요소에 맞게 설정 */
  border: none;
  /* 테두리를 제거 */ }

/* 닫기 버튼 설정 */
.youtube-overlay-close {
  position: absolute;
  /* 절대 위치로 설정하여 오버레이 내부에 배치 */
  top: 10px;
  right: 10px;
  font-size: 24px;
  /* 글꼴 크기 설정 */
  font-weight: bold;
  /* 글꼴 굵기 설정 */
  color: #fff;
  /* 글자 색상을 흰색으로 설정 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 반투명 배경 추가 */
  border: none;
  /* 테두리 제거 */
  border-radius: 3px;
  /* 모서리를 둥글게 설정 */
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  /* 수평 방향으로 가운데 정렬 */
  align-items: center;
  /* 수직 방향으로 가운데 정렬 */
  cursor: pointer;
  /* 커서 모양을 포인터로 설정 */
  z-index: 1010;
  /* 닫기 버튼이 항상 최상위에 위치하도록 설정 */ }

/* 모바일 화면에서의 설정 */
@media (max-width: 768px) {
  .youtube-overlay-content {
    width: 95%;
    /* 너비를 95%로 설정하여 여백을 줄임 */
    max-width: 100%;
    /* 모바일에서는 최대 너비를 해제 */
    height: auto;
    aspect-ratio: 16 / 9;
    /* 16:9 비율 유지 */
    padding: 0;
    /* 모바일에서는 패딩 조정 */ }
  .youtube-overlay-content iframe {
    width: 100%;
    /* 너비를 부모 요소에 맞게 설정 */
    height: 100%;
    /* 높이를 부모 요소에 맞게 설정 */ }
  .youtube-overlay-close {
    font-size: 20px;
    /* 모바일에서는 닫기 버튼 크기 조정 */
    top: 5px;
    right: 5px; } }