@font-face {
  font-family: "Hyperspace.otf";
  src: url("/Hyperspace\ Bold.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: Arial, sans-serif;
  height: 100vh;
  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#overlay {
  position: fixed;
  /* 중앙 정렬 */
  justify-content: center;
  align-items: center;

  width: 100vw;
  height: 100vh;

  z-index: 1001;
  display: none;

  background-color: rgba(255, 255, 255, 0.381);
}

.popup-content {
  display: inline-block; /* 내용 크기에 맞게 */
  max-width: 70vw;
  max-height: 100vh;

  overflow: auto;
}

.content1 {
  max-width: 100%;
  height: auto;

  display: block;
  margin: 50px auto;
}
.content2 {
  display: inline-block;
  max-height: 90vh;
  max-width: 150%;
}

/* 가로스크롤 */
.scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 90vw;
}

/* 메뉴 아이콘 */
.close-icon {
  position: fixed;
  /* 위치 */
  top: 2vh;
  right: 13vw;

  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 33px;
}

.close-icon div {
  width: 30px;
  height: 5px;
  background: #685f64;
}

.close-icon div:nth-child(1) {
  transform: rotate(45deg) translate(20px);
}
.close-icon div:nth-child(2) {
  transform: rotate(-45deg) translate(20px);
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 50px;
}
.title p {
  font-family: "Hyperspace.otf", Verdana, sans-serif;
  font-size: 5vw;
  text-shadow: 3px 3px 3px rgb(114, 114, 114);
  margin: 0;
}

.frame {
  display: flex;
  flex-direction: column;

  /* 센터정렬 */
  justify-content: center;
  align-items: center;
  width: 100%;
}

.frame.blur {
  filter: blur(7px);
  transition: filter 0.2s ease; /* 부드럽게 */
}

.apart {
  padding: 0 15%;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .apart { padding: 0 10px; }
  .title p { font-size: 8vw; }
  .popup-content { max-width: 100vw; }
  .close-icon { display: none; }
  .content2 { margin: 0 30px; max-height: 40vh; }
}

/* 부드러운 색상 변화를 위한 transition */
.glass1 {
  transition: fill 0.3s ease;
}
/* 마우스 커서를 변경하여 상호작용 가능함을 나타냄 (선택 사항) */
.glass1:hover {
  fill: rgb(243, 217, 23);
  cursor: pointer;
}

.st0 {
  fill: none;
}
.st0,
.st1 {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st0,
.st1,
.st2 {
  stroke: #685f64;
}
.st3,
.st2 {
  fill: #1e1c1d;
}
.st4,
.st1 {
  fill: #221f20;
}
.st5 {
  fill: #fff;
  stroke: #fff;
}
.st5,
.st2 {
  stroke-miterlimit: 10;
}