@font-face {
  font-family: 'Gyeonggi_Title_Light';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Light.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gyeonggi_Title_Medium';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
    font-family: 'Gyeonggi_Title_Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

/* 기본 스타일 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Gyeonggi_Title_Light', sans-serif;
}

/* 바디 스타일 */
body {
  font-family: 'Noto Sans KR', sans-serif;
  background-color: #18181a;
  height: 100vh; /* body가 전체 화면 크기를 차지하도록 설정 */
  display: flex; /* flexbox로 페이지 전체를 사용 */
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */

  padding-top: 64px;
  padding-bottom: 32px;
}

.container {
  display: flex;
  flex-direction: column; /* 내용이 수직으로 배치되도록 설정 */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  border: 1px solid #ffffff50;
  border-radius: 4px; /* 좀 더 부드러운 모서리를 위해 */
  color: #fff;
  width: 32%; /* 화면의 80% 너비를 차지하도록 설정 */
}

.title-text {
  font-size: 4em;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: 'Gyeonggi_Title_Medium', sans-serif;
}

.subtitle-text {
  font-size: 1.2em;
  margin-bottom: 16px;
}

.custom-blockquote {
  width: 100%;
  border-left: 4px solid #ffffff !important;
}

#inputed-id {
  font-size: 1.2em;
  font-family: 'Gyeonggi_Title_Medium', sans-serif;
}

.content-text {
  display: flex;
  font-size: 16px;
  line-height: 1;
  align-self: flex-start;
  background-color: #18181a;
  padding-bottom: 8px;
}
.content-text input[type="checkbox"] {
  margin: 0;
  transform: scale(1.2);
}

.link-text {
  text-decoration: none;
  color: #007BFF;
  transition: 0.1s;
}
.link-text:hover {
  color: #005abb;
}

.inputfield {
  width: 100%;
  height: 48px;
  padding: 16px;
  border: 1px solid #ffffff50;
  border-radius: 4px;
  background-color: #18181a;
  color: #ffffff;
  font-size: 1.2em;
  margin-bottom: 16px;
  outline: none;
  transition: 0.1s;
}
.readonly-input {
  cursor: not-allowed;
  border: 1px solid #ffffff20;
}
.write-input:hover {
  cursor: text;
  border: 1px solid #ffffff;
}

.review-button {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: 1px solid #ffffff50;
  border-radius: 4px;
  background-color: #18181a;
  color: #ffffff;
  font-size: 1.2em;
  cursor: pointer;
  transition: 0.1s;
}
.review-button:hover {
  background-color: #ffffff;
  color: #000000;
}

@media (max-width: 1468px) {
  .container {
    width: 60%;
  }

  .title-text {
    font-size: 2em;
  }

  .subtitle-text {
    font-size: 1.2em;
  }

  #inputed-id {
    font-size: 1.2em;
  }

  .content-text {
    font-size: 1em;
  }

  .inputfield {
    font-size: 1em;
    height: 48px;
  }

  .review-button {
    font-size: 1em;
    height: 48px;
  }
}

@media (max-width: 784px) {
  body {
    padding-top: 64px;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }

  .container {
    width: 80%;
  }

  .title-text {
    font-size: 2em;
  }

  .subtitle-text {
    font-size: 1.2em;
  }

  #inputed-id {
    font-size: 1em;
  }

  .content-text {
    font-size: 1em;
  }

  .inputfield {
    font-size: 1em;
    height: 48px;
  }

  .review-button {
    font-size: 1em;
    height: 48px;
  }
}

@media (max-width: 586px) {
  body {
    padding-top: 64px;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }

  .container {
    width: 92%;
  }

  .title-text {
    font-size: 2em;
  }

  .subtitle-text {
    font-size: 1em;
  }

  #inputed-id {
    font-size: 0.8em;
  }

  .content-text {
    font-size: 0.8em;
  }

  .inputfield {
    font-size: 1em;
    height: 40px;
  }

  .review-button {
    font-size: 1em;
    height: 40px;
  }
}