@font-face {
  font-family: "Paperlogy";
  src: url("/fonts/Paperlogy-4Regular.ttf") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Paperlogy";
  src: url("/fonts/Paperlogy-5Medium.ttf") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Paperlogy";
  src: url("/fonts/Paperlogy-6SemiBold.ttf") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Paperlogy";
  src: url("/fonts/Paperlogy-7Bold.ttf") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Paperlogy";
  src: url("/fonts/Paperlogy-8ExtraBold.ttf") format("woff2");
  font-weight: 800;
  font-style: normal;
}

body {
  background-color: #eedda4;
}

body,
button,
input::placeholder {
  margin: 0;
  font-family: "Paperlogy";
}
h1,
h2,
p,
span,
form {
  margin: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* 초기 로드 시 재생 아이콘은 보이도록 설정 */
#overlay-play-icon {
  display: block;
}

/* 초기 로드 시 일시정지 아이콘은 숨기도록 설정 */
#overlay-pause-icon {
  display: none;
}

/*.video-area {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eedda4;
}*/

.video-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eedda4;
  z-index: 1;
}

/*.video-area .video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
*/
.video-wrapper {
  width: 100%;
  height: 100%;
}

/*.video-area .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}*/

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

.main-area {
  background-color: #eedda4;
  width: 100%;
  height: fit-content;
  display: none;
}
.main-area .content-area {
  position: relative;
  width: 100%;
  max-width: 343px;
  height: 100%;
  background-color: #eedda4;
  padding: 44px 0px 60px;
  margin: 0 auto;
}
.main-area .content-area .image-area {
  padding: 0 38px;
}
.main-area .content-area .image-area img {
  width: 100%;
}
.main-area .content-area .content-box {
  position: relative;
  margin-top: -134px;
}
.main-area .content-area .content {
  background-color: #fff;
  border-radius: 16px;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: #000;
  text-align: center;
  padding: 20px 16px;
}

.main-area .content-area .content + .content {
  margin-top: 44px;
}
.main-area .content-area .content .title {
  color: #323232;
  font-size: 28px;
  font-weight: 800;
}

.main-area .content-area .content .title-area {
  margin: 6px 0px 24px;
}
.main-area .content-area .content .sub-title {
  font-size: 16px;
  font-weight: 400;
  color: #323232;
  line-height: 20px;
  margin-top: 4px;
}
.main-area .content-area .content .sub-title span {
  font-weight: 500;
}
.main-area .content-area .content ul li {
  background-color: #dfe7eb;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  display: flex;
  align-items: center;
}
.main-area .content-area .content ul li + li {
  margin-top: 12px;
}
.main-area .content-area .content ul li > span {
  margin-right: 12px;
  font-weight: 800;
}
.main-area .content-area .content ul li p > span {
  font-weight: 600;
}
.main-area .content-area .content .form > div {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-area .content-area .content .form > div + div {
  margin-top: 16px;
}
.main-area .content-area .content .form > div span {
  display: inline-block;
  width: 74px;
  font-weight: 500;
  color: #323232;
  margin-right: 4px;
  font-size: 14px;
  flex-shrink: 0;
}
.main-area .content-area .content .form input[type="text"],
.main-area .content-area .content .form input[type="tel"] {
  padding: 16px 12px;
  border-radius: 4px;
  background-color: #dfe7eb;
  border: none;
  font-size: 14px;
  width: 100%;
}

.main-area .content-area .content .form input[type="text"]::placeholder,
.main-area .content-area .content .form input[type="tel"]::placeholder {
  color: #777C7E;
  font-size: 14px;
  font-weight: 500;;
}
.main-area .content-area .content .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}
.main-area .content-area .content .checkbox span {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
.main-area .content-area .content .checkbox input[type="checkbox"] {
  display: none;
}
.main-area .content-area .content .checkbox input[type="checkbox"] + label {
  display: inline-block;
  width: 21px;
  height: 21px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-right: 6px;
}
.main-area
  .content-area
  .content
  .checkbox
  input[type="checkbox"]:checked
  + label {
  border: 2px solid #faa61a;
  background: url("/images/icon_checkbox.png") no-repeat center;
}
.main-area .content-area .content h2 {
  font-size: 16px;
  font-weight: 700;
  color: #323232;
}
.main-area .content-area .content .button {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  padding: 20px 0;
  box-shadow: 0px 4px 1.3px 0px rgba(149, 149, 154, 0.25);
  border: none;
  background-color: #faa61a;
  border-radius: 8px;
  margin-top: 12px;
  cursor: pointer;
}
.main-area .content-area .content .button:disabled {
  background-color: #edf0f5;
  color: #c2c6cb;
}
@media (max-width: 1620px) {
  .video-area .video-wrapper {
    padding-top: 0;
    height: 100%;
  }
}
@media (max-width: 450px) {
  .main-area .content-area {
    margin: 0 16px;
    max-width: -webkit-fill-available;
  }
  .main-area .content-area .content-box {
    margin-top: -40%;
  }
}

/* 오버레이 스타일 */
#video-overlay {
  position: fixed; /* 비디오 영역 위에 고정 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* 버튼 중앙 정렬 */
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3); /* 반투명 배경 (선택 사항) */
  z-index: 2; /* 비디오보다 위에 위치 */
  cursor: pointer;
  transition: opacity 0.3s ease; /* 부드러운 표시/숨김 효과 */
}

/* 오버레이 숨김 상태 */
#video-overlay.hidden {
  opacity: 0;
  /* pointer-events: none; /* <-- 이 줄을 제거하거나 주석 처리 */
}

/* 버튼 자체는 오버레이가 보일 때만 클릭 가능하게 */
#video-overlay #overlay-play-pause-button {
  pointer-events: auto; /* 오버레이가 보일 때는 항상 클릭 가능 */
}

/* 통합 재생/일시정지 버튼 스타일 */
#overlay-play-pause-button {
  background-color: #fff;
  /*    background: rgba(0, 0, 0, 0.7);*/
  border: 2px solid white;
  border-radius: 50%;
  width: 80px; /* 크기 조절 */
  height: 80px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-shadow: 0px 4px 26.7px 0px rgba(202, 204, 206, 1);
}

#overlay-play-pause-button img {
  width: 50%; /* 아이콘 크기 조절 */
  height: 50%;
  display: block;
}

/* style.css 파일에 추가 */

/* 기본 스피너 스타일 (크기, 색상 등 조절 가능) */
.button .spinner {
  display: inline-block; /* 또는 block */
  width: 1em;            /* 버튼 폰트 크기에 비례하도록 설정 */
  height: 1em;
  vertical-align: text-bottom; /* 텍스트 기준 수직 정렬 */
  border: 0.15em solid currentColor; /* 버튼 텍스트 색상 상속 */
  border-right-color: transparent; /* 한쪽 테두리 투명하게 */
  border-radius: 50%;
  animation: spinner-border .75s linear infinite; /* 애니메이션 적용 */
  margin-left: 0.5em; /* 텍스트와의 간격 (필요시) */
}

/* 스피너 회전 애니메이션 */
@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

/* 버튼이 로딩 중일 때의 스타일 */
.button.loading .button-text {
  display: none; /* 로딩 중에는 텍스트 숨김 */
}

.button.loading .spinner {
  display: inline-block; /* 로딩 중에는 스피너 표시 */
}

/* 로딩 중일 때 버튼 클릭 방지 (disabled와 함께 사용) */
.button.loading {
  cursor: not-allowed;
  /* 필요하다면 로딩 중 배경색 등 변경 */
  /* background-color: #cccccc; */
}