/* 헤더 */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(4rem, 6vw, 12rem) 4rem 0;
}

/* 헤더 로고*/
.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  max-width: clamp(27.8rem, 29vw, 56.4rem);
  aspect-ratio: 564 / 265;

  background-image: -webkit-image-set(
    url(../images/clock-s.png) 1x,
    url(../images/clock-m.png) 2x,
    url(../images/clock-l.png) 3x
  );

  background-image: image-set(
    url(../images/clock-s.png) 1x,
    url(../images/clock-m.png) 2x,
    url(../images/clock-l.png) 3x
  );

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.header-logo-link img {
  width: 100%;
  height: auto;
}

/* 메인 */
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6rem, 5.2vw, 10rem);
  padding: clamp(3.2rem, 27vw, 5.2rem) 1.5rem 0;
}

/* 메인 인용문 섹션 */
.main-dfn-container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: clamp(3.2rem, 4vw, 8rem);
  text-align: center;
  line-height: clamp(2.4rem, 2vw, 4rem);
}
/* 인용문 슬로건 */
.dfn-slogan {
  font-family: var(--slogan-font);
  font-size: clamp(2.2rem, 1.8vw, 3.6rem);
  font-weight: 700;
  color: #f5df4d;
}
/* 인용문 */
.dfn-title {
  display: flex;
  font-size: var(--font-size-dfn);
}
/* 인용문 타이틀 */
.dfn-title span dfn {
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* 인용문 가상요소 쌍따옴표 */
.dfn-title::before {
  content: "";
  display: inline-block;
  width: clamp(2rem, 1.8vw, 3.6rem);
  aspect-ratio: 36 / 32;
  background-image: url(../images/start-quotation.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.dfn-title::after {
  content: "";
  display: inline-block;
  width: clamp(2rem, 1.8vw, 3.6rem);
  aspect-ratio: 36 / 32;
  background-image: url(../images/end-quotation.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* //메인 인용문 섹션 */

/* 메인 입력, 결과 필드 섹션 */
.input-result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(7.4rem, 6.8vw, 13.1rem);
}

/* 입력 필드 박스 */
.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 1vw, 2rem);
}
/* 분야 입력 박스 */
.input-job-box {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1vw, 2rem);
}
/* 시간 및 텍스트 입력 박스 */
.input-text-hour-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 1vw, 2rem);
}
/* 시간 및 텍스트 입력 박스 미디어 쿼리 - 위치 배열 */
@media screen and (min-width: 768px) {
  .input-text-hour-box {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

/* 시간 입력 박스 */
.input-hour-box {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1vw, 2em);
}

/* 분야, 시간 인풋 */
.job-title,
.hour-title {
  width: clamp(15.6rem, 12vw, 22.8rem);
  aspect-ratio: 228 / 56;
  text-align: center;
  font-size: var(--font-size-base);
}
/* //입력 필드 박스 */

/* 입력, 결과 버튼 */
.input-result-btn {
  width: clamp(24rem, 30vw, 56.7rem);
  aspect-ratio: 567 / 64;
  padding: 2rem clamp(3.8rem, 2.8vw, 5rem);
  line-height: clamp(2rem, 2vw, 3rem);
  position: relative;
}
.input-result-btn::after {
  content: "";
  width: clamp(4.3rem, 3.3vw, 6.4rem);
  aspect-ratio: 64 / 72;
  background-image: url(../images/click.svg);
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateX(120%) translateY(-20%);
}
/* //입력, 결과 버튼 */

/* 결과 필드 박스 */
.result-box {
  font-size: var(--font-size-result);
  line-height: clamp(2.4rem, 2vw, 4rem);
}

.result-job,
.result-hour {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
.result-job-output,
.result-hour-output {
  font-size: var(--font-size-big);
  font-weight: 700;
  line-height: clamp(4rem, 7vw, 10rem);
}
/* //결과 필드 박스 */
/* //메인 입력 결과 필드 섹션*/

/* 훈련하러 가기/ 공유 버튼 섹션 */
.training-share-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.8rem, 0.6vw, 1.2rem);
}
/* 훈련하러 가기 버튼 */
.training-btn,
.share-btn {
  height: clamp(4.6rem, 3.3vw, 6.4rem);
  padding: clamp(1.6rem, 1vw, 2rem) clamp(2.4rem, 2.6vw, 5rem);
  white-space: nowrap;
  text-align: center;
}
.training-btn {
  width: clamp(20rem, 30vw, 37.2rem);
}

.share-btn {
  width: clamp(10rem, 15vw, 19rem);
  background-color: #fff;
}
/* //훈련하러 가기 버튼 */
/* //메인*/

/* 푸터 */
.footer {
  margin: 6rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
  padding-inline: 5rem;
  text-align: center;
}
.weniv-logo img {
  max-width: clamp(12rem, 9vw, 16.8rem);
  width: 100%;
  height: auto;
  aspect-ratio: 168 / 36;
}
.copyright-info {
  font-family: var(--footer-font);
  font-size: clamp(0.9rem, 0.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.4rem;
}
/* //푸터 */

/* 모달 */
.training-modal {
  border: none;
  border-radius: 2rem;
  width: clamp(33rem, 55vw, 70rem);
  aspect-ratio: 508 / 656;
  padding: clamp(4.1rem, 4.2vw, 8rem) clamp(4.5rem, 8vw, 14.6rem);
}
.dialog-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2.4rem, 2.6vw, 5rem);
}
/* 모달 응원의 메시지 */
.modal-message-container {
  color: var(--primary-color);
  font-weight: 700;
  font-family: "tvN-Enjoystories", sans-serif;
  font-size: 3.6rem;
  text-align: center;
}
.message-title {
  font-size: clamp(6.4rem, 5vw, 9.6rem);
  line-height: 8rem;
}
.only-desktop-message {
  display: none;
}
@media screen and (min-width: 768px) {
  .only-desktop-message {
    display: inline;
  }
}
/* 모달 라이캣 이미지*/
.training-modal img {
  width: 100%;
  height: auto;
  aspect-ratio: 438 / 342;
}
/* 훈련하러 가기 링크 */
.cta-btn {
  width: clamp(24rem, 50vw, 50rem);
  aspect-ratio: 508 / 64;
  padding: 2rem clamp(4.4rem, 2.5vw, 4.5rem);
  background-color: var(--btn-color);
  border-radius: 1.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 700;
}