@import url(https://fonts.googleapis.com/css?family=Roboto:300);

@font-face {
  font-family: 'Cafe24Supermagic-Bold-v1.0';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Webkit (Safari, Chrome, Edge) */
::-webkit-scrollbar {
  width: 5px; /* 스크롤바의 너비 */
}

::-webkit-scrollbar-track {
  background: #EEEEEE; /* 스크롤바 트랙의 배경색 */
}

::-webkit-scrollbar-thumb {
  background: #393E46; /* 스크롤바의 색상 */
  border-radius: 10px; /* 스크롤바의 모서리 둥글기 */
}

body {
  /*background-color: #222831;*/
  /* 검정색 배경 */
  margin: 0;
  padding: 0;

  color: #EEEEEE;
  /* 글자 색상을 흰색으로 지정 */
  text-align: center;
  /* 가운데 정렬 */

  background: linear-gradient(90deg, #000000 0%, rgb(0, 0, 0) 50%);
  /* font-family: "Roboto", sans-serif; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Cafe24Supermagic-Bold-v1.0', sans-serif;
  
}

.background-image {
  position: relative;
  /* 배경 이미지를 포함하는 요소를 상대적으로 배치합니다 */
  height: 90vh;
  /* 화면 높이에 맞춰 배경 이미지를 표시합니다 */
  overflow: hidden;
  /* 자식 요소들이 넘치는 부분은 보이지 않도록 합니다 */

  /* Flexbox를 사용하여 자식 요소들을 가운데로 정렬합니다 */
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.background-image::before {
  content: "";
  /* 가상 요소를 사용하여 배경에 불투명도를 적용합니다 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("bgImg.jpg");
  /* 이미지 파일의 경로를 지정하세요 */
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  /* 배경 이미지에 불투명도를 적용합니다 */
}

/* .content 내부에 있는 li와 img 요소의 스타일을 수정합니다 */
.content {

  padding-top: 5px;

    display: none;
    /* 처음에는 다른 화면을 감추기 위해 display: none;을 사용합니다 */

    position: relative;
    /* 내용을 담당하는 요소를 상대적으로 배치합니다 */
    z-index: 1;
    /* 내용을 배경 위에 표시하도록 배경보다 위에 배치합니다 */
    color: #EEEEEE;
    font-size: 18px;
    /* padding: 50px;
 */
    /* Flexbox를 사용하여 내부 요소들을 가운데로 정렬합니다 */
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.content li {
  list-style: none;
}

.content img {
  max-width: 95%;
  /* img 요소가 부모 요소에 맞게 조절됩니다 */
  border: 2px solid #222831;
  /* img 요소에 흰색 테두리를 추가합니다 */
  border-radius: 5px;
  /* img 요소의 테두리를 둥글게 처리합니다 */
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  /* img 요소에 흰색 그림자 효과를 추가합니다 */
}

.content .real-upload {
  display: none;
}

.content .upload {
  display: flex;

  flex-direction: column;

  justify-content: center;
  /* 가로 방향 가운데 정렬 */
  align-items: center;
  /* 세로 방향 가운데 정렬 */
  font-size: 1.5rem;
  /* 원하는 크기로 설정 */
  
  width: auto;
  height: auto;

  margin-bottom: 30px;

  background-color: #EEEEEE;

  /* dotted 점선 border 설정 예시 */
 /*  border: 3px dotted hwb(243 40% 26%);
  border-radius: 10px; */
  /* 점선 border 설정 */
  padding: 10px;
  /* 내용과의 간격을 위한 padding 설정 */
  text-align: center;
  /* 내용 가운데 정렬을 위한 설정 */
  }

  .fa-regular {
    color: #00ADB5;
  }

  .upload p:hover{
    color:#66c4c9;
  }

  .fa-regular:hover{
    color: #66c4c9;
  }

  .content .image-preview {
    width: 100px;
    height: 100px;
    /* background-color: aquamarine; */
    display: flex;
    /* gap: 20px; */
  }

  .title {
    /* margin-top: 50px; */
    position: relative;
    z-index: 1;
    color: #222831;
    /* 타이틀 글자 색상을 흰색으로 지정 */
    font-size: 28px;
    /* 타이틀 글자 크기 */
    font-weight: bold;
    /* 타이틀 글자 굵기 */
  }

  .start-scene {
    /* padding: 30px; */
    
    display: flex;

    padding-top: 5px;

    position: relative;
    /* 내용을 담당하는 요소를 상대적으로 배치합니다 */
    z-index: 1;
    /* 내용을 배경 위에 표시하도록 배경보다 위에 배치합니다 */
    color: #EEEEEE;
    font-size: 18px;
    /* padding: 50px;
 */
    /* Flexbox를 사용하여 내부 요소들을 가운데로 정렬합니다 */
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .start-scene p{
    color:#222831;
  }

  .content p{
    color: #222831;
    font-weight: bold;
  }

  .howtouse{
    margin-top: -10px;
    background-color: #222831;
    height: 270px;
    width: 294px;
    margin: auto;
  }

  /*여기부터 가져온거*/
  .login-page {
    width: 360px;
    padding: 8% 0 0;
    margin: auto;
  }

  .form {
    position: relative;
    z-index: 1;
    background: #EEEEEE;
    /* max-width: 360px; */
    width:  370px; 
    height: 650px;
    margin: 0 auto 100px;
    /* padding-left: 45px;
    padding-right: 45px;
    padding-bottom: 45px; */
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

    display: flex;
    flex-direction: column;
    /* 자식 요소들을 세로로 배치 */
    align-items: center;
    /* 가로 방향 가운데 정렬 */
    /* min-height: 100vh; */
    /* 최소한 화면 높이만큼 높이를 설정 (예시로 100vh 사용) */
  }

  /* 768px 보다 작은 화면 크기에 대한 스타일 */
  /* @media (max-width: 767px) {
    .form {
      width: 100%;
  
      height: 600px;
    }
  } */

  .form input {
    font-family: 'Cafe24Supermagic-Bold-v1.0', sans-serif;
    outline: 0;
    background: #EEEEEE;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
  }

  .form button {
    font-family: 'Cafe24Supermagic-Bold-v1.0', sans-serif;
    text-transform: uppercase;
    outline: 0;
    width: 80%;
    border: 0/* 2px solid #00ADB5 */;
    padding: 15px;
    margin-bottom: 15px;
    /* margin-top:-12px; */

    font-size: 14px;
    /* -webkit-transition: all 0 ease; */
    /* transition: all 0 ease; */
    transition: background-color 0.3s ease;
    cursor: pointer;
    border-radius: 30px;

    background: #00ADB5;
    color:#EEEEEE;
    font-weight: bold;
  }

  .form button:hover,
  .form button:active{
    background: #66c4c9;
  }

  .form .message {
    margin: 15px 0 0;
    color: #EEEEEE;
    font-size: 12px;
  }

  .form .message a {
    color: #00ADB5;
    text-decoration: none;
  }

  .form .register-form {
    display: none;
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin: 0 auto;
  }

  .container:before,
  .container:after {
    content: "";
    display: block;
    clear: both;
  }

  .container .info {
    margin: 50px auto;
    text-align: center;
  }

  .container .info h1 {
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    font-weight: 300;
    color: #222831;
  }

  .container .info span {
    color: #393E46;
    font-size: 12px;
  }

  .container .info span a {
    color: #222831;
    text-decoration: none;
  }

  .container .info span .fa {
    color: #EF3B3A;
  }

  .green-text {
    color: #00ADB5;
    /* 초록색 글자 색상을 지정합니다. */
  }

  .result {
    padding-top: 5px;

    display: none;
    /* 처음에는 다른 화면을 감추기 위해 display: none;을 사용합니다 */

    position: relative;
    /* 내용을 담당하는 요소를 상대적으로 배치합니다 */
    z-index: 1;
    /* 내용을 배경 위에 표시하도록 배경보다 위에 배치합니다 */
    color: #EEEEEE;
    font-size: 18px;
    /* padding: 50px;
 */
    /* Flexbox를 사용하여 내부 요소들을 가운데로 정렬합니다 */
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .result h1{
    color: #222831;
  }

  .result p{
    color: #222831;
  }

  .others {
    flex: 1;
    /* 나머지 공간을 차지하도록 설정 */
    width: 100%;
    /* 너비를 100%로 설정 */
    padding-top: 12px;
    padding-bottom: 12px;
    /* max-height: 330px; */
   
  }

  /* 이미지 미리보기를 위한 스타일 */
  .image-container {
    width: 350px;
    /* 이미지 미리보기 너비를 100%로 설정 */
    height: 280px;
    /* 이미지 미리보기 최대 높이를 500px로 설정 (원하는 크기로 변경 가능) */
    overflow-y: auto;
    /* 세로 방향으로 스크롤이 가능하도록 설정 */
    overflow-x: hidden;
    /* 수평 스크롤 비활성화 */
    margin-top: 15px;
    margin:auto;

    /* border: 2px solid #4CAF50; */
  }

  .image-container img {
    width: 100%;
    /* 이미지의 너비를 100%로 설정하여 부모 요소에 맞게 크기 조정 */
  }

#croppedCanvas{
  background-color: #222831;
}

#ment{
  width: 100%;
  font-size: 30px;
  white-space: nowrap;
  overflow : hidden;
  text-overflow : ellipsis
}

.btnDivs{
  /* margin-top:30px; */
  width:100%;
}

.btn_comm{
  width: 50px;
  height: 50px;
  padding: 10px;
  border-radius: 100%;
}

.btn_comm:hover{
  filter: brightness(120%);
}

/* #shareClip{
  background-color: #393E46;
} */
/* 
#shareFb{
  background-color: #3b5998;
} */
/* 
#kakaotalk-sharing-btn{
  background-color: #F7E600 ; 
}

#shareTw{
  background-color: #00acee;
}
 */
.sns{
 margin-bottom: 20px;
}

.kakao-ad{
  /* position:absolute;
  bottom:0; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top:20px; */
  min-width: 320px;
  min-height: 100px;
  /* background-color: red; */
  /* left:50%;
  transform: translateX(-50%);  */
}