/* 순천만 전용 CSS */

/* INTRO - BEGIN */
.page-fill {
  padding: 16.5% 0 9%;
  justify-content: start;
}
.content-logo {
  width: 160px;
  height: 62px;
  background-image: url('../image/ui/logo_photoframe_vertical.svg');
}
.photoframe {
  margin: 5.5% 0;
}
#startARText {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-color-gray);
}
#startARButton.wyft-button {
  margin-top: 2.7%;
  width: 246px;
  height: 50px;
  font-size: 16px;
}
/* INTRO - END */

/* ERROR PAGE - BEGIN */
.error-page-image {
  height: 28%;
  min-height: 218px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#reason {
  margin: 0;
  text-underline-offset: 7px;
}
#error_message {
  height: auto;
}
#context{
  margin-top: 2.3dvh;
}
#context.time {
  font-size: 14px;
}
#error_message .highlight,
#error_message .highlight {
  font-size: 16px;
}
#error_message .colored {
  color: var(--text-color-sub);
}
#detail {
  color: var(--text-color-white);
  font-size: 14px;
}
#detail.gap {
  margin-top: 5.4dvh;
}
/* ERROR PAGE - END */

/* ENTRY - BEGIN */
#entry {
  background-color: #222;
}
.aliens {
  margin: 4.6% 0 2.6%;
}
/* ENTRY - END */

/* BUTTON - BEGIN */
.scm-button {
  position: relative;

  border: 3px solid rgba(255,255,255,0.5);
  background: #000;
  border-radius: 50%;

  width: 66px;
  height: 66px;
  z-index: 7;

  padding: 0;
}
.scm-button img {
  filter: none;
}
.scm-button.to-map {
  width: 50px;
  height: 50px;

  position: absolute;
  top: 17px;
  left: 17px;

  padding-bottom: 3px;
}
/* BUTTON - END */

/* 토스트 메세지 */
.scm-toast {
  background-color: rgba(0,0,0,0.6);
  border-radius: 12px;
  text-align: center;

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

  position: absolute;

  color: #FFF;

  font-size: 14px;
  line-height: 17px;

  z-index: 13;
}
.scm-toast.stay {
  display: flex !important;
}
.scm-toast.show {
  display: flex !important;
  animation: fadeInOut 6s forwards; /* 1s fade in + 5s visible + 1s fade out */
}
@keyframes fadeInOut {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* quick fade in (first 0.6s if total=6s) */
  85%  { opacity: 1; }   /* stay visible for ~5s */
  100% { opacity: 0; }   /* fade out */
}
#scm-toast-top {
  top: 11%;
  left: 50%;
  transform: translate(-50%);

  width: 83%;
  max-width: 298px;
  padding: 13px 0;
}

/* 순천만 메세지 팝업 */
#scm-message-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90%;
  max-width: 314px;
  padding: 54px 15px 22px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 7;

  background-color: rgba(0,0,0,0.8);
  color: var(--text-color-white);
  font-size: 16px;

  border: 2px solid #000;
  border-radius: 20px;
}
#scm-message-text {
  text-align: center;
}
.scm-message-highlight {
  color: #FFF690;
}
.onceperday {
  margin-top: 20px;
}
#onceperday {
  width: auto;
  background-color: #FFF;
}
#scm-message-button {
  margin-top: 20px;
  padding: 5px 10px;
  width: 104px;
  height: 40px;
}

/* 프리뷰 */
#photo-preview,
#video-preview {
  display: none;
}

#preview.photo #photo-preview,
#preview.video #video-preview {
  display: flex;
}

/* 화면 가리개 */
#scm-screen-block {
  position: fixed;
  top: 0;
  left: 0;

  z-index: 100;

  width: 100%;
  height: 100%;

  display: none;
  justify-content: center;
  align-items: center;
}
.screen-block-content {
  background: rgba(0,0,0,0.8);
  width: 74.4%;
  max-width: 268px;
  height: 202px;

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

  border-radius: 20px;
}
.scm-screen-block-image-area {
  width: 213px;
  height: 120px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.wait-img-download,
.wait-img-preview {
  display: none;
}
#scm-screen-block.wait-download .wait-img-download {
  display: flex;
}
#scm-screen-block.wait-preview .wait-img-preview {
  display: flex;
}
#scm-screen-block-message {
  margin-top: 4px;
  font-size: 14px;
  height: 18px;
}

/* 콘텐츠 */
body {
  max-width: 500px;
  max-height: 1500px;

  position: relative;
}
#photo-content {
  background-image: url('../image/노을정원 배경.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content-wrap {
  position: absolute;
  background-color: cornflowerblue;
  overflow: hidden;
}
.content-wrap > *:not(button) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.content-wrap video {
  object-fit: cover;
  object-position: center;
}
.content-wrap button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
  z-index: 5;

  display: none;
  justify-content: center;
  align-items: center;

  width: 60px;
  height: 30px;
  border-radius: 100px;
  border: 1px solid black;

  font-size: 14px;
  color: black;
  background-color: white;
}
.content-wrap video {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
}
.content-wrap video.hidden {
  opacity: 0;
}
.content-wrap canvas {
  z-index: 1;
}
.content-1 {
  width: 50%;
  height: 33.33%;
  top: 8.5%;
  left: 13.33%;
}
.content-2 {
  width: 51.8%;
  height: 33.33%;
  bottom: 20.5%;
  right: 8.1%;
}

#gif-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* 스샷 켄버스 */
#screen_draw {
  position: fixed;
  top: 0;
  left: -999em;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: burlywood;
}

.gifs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* display: none; */
}
.gifs > * {
  position: absolute;
  z-index: 6;
}
#bird1 {
  top: -8.5%;
  left: 0;
  width: 45%;
}
#bird2 {
  top: 10.5%;
  right: -21%;
  width: 78%;
}
#bird3 {
  bottom: 21.2%;
  left: -7%;
  width: 54%;
}
#bird4 {
  bottom: 30.6%;
  right: -3%;
  width: 10%;
}
#bird5 {
  bottom: 9.4%;
  left: 3%;
  width: 100%;
}
#grass {
  bottom: 0%;
  left: 0%;
  width: 100%;
}

/* ETC */
.message-panel-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
#btn-camera-guide {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translate(-50%, -100%);

  padding: 12px 17px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 12px;

  display: none;
  justify-content: center;
  align-items: center;
  z-index: 7;

  white-space: nowrap;

  font-size: 14px;
  line-height: 16px;
}
#btn-camera-guide.tip::before {
  content: "";
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid rgba(0,0,0,0.7);

  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translate(-50%);

  display: flex;
}
#btn-camera-guide > span {
  display: flex;
  align-items: center;
}
#btn-camera-guide .recording-circle {
  width: 14px;
  height: 14px;
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;

  display: none;
  justify-content: center;
  align-items: center;

  margin-right: 4px;
}
#btn-camera-guide .recording-circle::after{
  content: '';
  width: 10px;
  height: 10px;
  background-color: #E50000;
  border-radius: 50%;
}
#btn-camera-guide.stay .recording-circle{
  display: flex;
}

/* 오류 페이지 스타일 변경 */
#system_error_page {
  z-index: 99;
}
#system_error_page > div {
  position: relative;

  width: 85.6%;
  max-width: 308px;

  border: 1px solid #FFF;
  border-radius: 20px;
  background-color: rgba(0,0,0,0.8);

  display: none;
  flex-direction: column;
  align-items: center;

  padding: 26px 22px 22px;
}
#system_error_page.gps-fail .scm-gps-fail {
  display: flex;
}
#system_error_page.cam-fail .scm-cam-fail {
  display: flex;
}
#system_error_page.cam-deactivated .scm-cam-deactivated {
    display: flex;
}
#system_error_page.os-fail .scm-os-fail {
  display: flex;
}
#system_error_page.motion-fail .scm-motion-fail {
  display: flex;
}
.permission-fail-message1 {
  margin-top: 21px;

  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}
.permission-fail-message2 {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}
.scm-os-fail .permission-fail-message2,
.scm-motion-fail .permission-fail-message2 {
  margin-top: 17px;
  margin-bottom: 26px;
}
#system_error_page .guide-img,
#system_error_page .guide-msg {
  margin-top: 14px;
  max-width: 100%;
}
#system_error_page .guide-msg {
  font-size: 12px;
  line-height: 15px;
}
#system_error_page button {
  background-color: #5B45FF;
  color: #FFF;
  width: 104px;
  height: 40px;
  font-size: 14px;
  line-height: 18px;
  font-family: 'Pretendard', sans-serif;

  position: relative;
  bottom: 0;

  margin-top: 26px;
}

#unity-loading-bar {
  justify-content: start;
}