/* <-------- 모바일 버전(최대 너비 576px) ---------------> */

/* =========== header ===================================*/
/* 타이틀 섹션 */
.title-section {
  max-width: 57.6rem;
  width: calc(100% - 3rem);
  margin: 4rem auto 3.2rem;
}

.title-section img {
  width: 27.8rem;
  height: auto;
  margin: 0 auto 3.2rem;
  display: block;
}

/* 인용구 */
.quote-img {
  width: 29.7rem !important;
  height: auto;
  margin-bottom: 3.2rem;
}

/* =========== main ===================================*/
.container {
  max-width: 57.6rem;
  width: calc(100% - 3rem);
  margin: 0 auto;
}

/* 설명 섹션 */
.description {
  width: calc(100% - 3rem);
  max-width: 33rem;
  margin: 0 auto 6rem;
  gap: 0;
}

/* 양쪽 따옴표 */
.description::before {
  width: 2rem;
  height: 1.8rem;
}

.description::after {
  width: 2rem;
  height: 1.8rem;
}
.description p {
  max-width: 29rem;
  font-size: 1.3rem;
}

.description p .highlight {
  font-size: 1.4rem;
}

/* <-------- 폼 섹션 ------------> */
.form-section {
  margin: 0 auto 6.8rem;
}

.form-row {
  display: flex;
  font-size: 1.4rem;
  gap: 0.8rem;
  /* 자동 줄 바꿈 */
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* for="time" 속성을 가진 label 요소 */
.form-row label[for="time"] {
  width: 100%;
  display: block;
}

.form-section form {
  gap: 1.2rem;
}

.form-section p {
  font-size: 1.4rem;
}
.form-section label {
  font-size: 1.4rem;
}

.form-section input {
  padding: 1.2rem 3.5rem;
  font-size: 1.4rem;
  width: 15.6rem;
  height: 3.8rem;
}

/* <-------- 계산 섹션 ------------> */
.calc-btn-container {
  gap: 0.4rem;
  position: relative;
}

.calc-btn {
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 7.2rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4; /* 줄 간격 */
  text-align: center; /* 가운데 정렬 */
  /* 한글 줄바꿈(단어 단위) */
  word-break: keep-all;
  position: relative;
  margin-top: 6.8rem;
  padding: 2rem 3.8rem; /* 좌우 여백 */
}

.calc-btn .enter {
  display: block;
  width: 100%;
}

.calc-btn::after {
  content: "";

  background-image: url("../images/icon.png");
  background-size: cover;
  background-repeat: no-repeat;

  width: 4.3rem;
  height: 4.8rem;
  position: absolute;
  right: -4.5rem;
  top: 6.2rem;
  /* 위쪽으로 50% 이동 */
  transform: translateY(-50%);
}

/* <-------- 결과 섹션 ------------> */
.result {
  display: block;
  margin: 6.8rem 3.7rem 5.2rem;
}

/* 각 줄(문장) */
.result-row {
  display: block;
  text-align: center;
  line-height: 1.25;
  margin: 0;
}

.result-row + .result-row {
  margin-top: 0.8rem;
}

.result-row p {
  display: inline;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
}

.result-row .highlight {
  display: inline;
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

/* CTA 버튼 */
.cta-btn {
  max-width: 31.3rem;
  margin: 0 auto 6rem;
  font-weight: 500;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 1.4rem;
}

.go-btn,
.share-btn {
  padding: 1.6rem 2.4rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.go-btn {
  width: 20.3rem;
  height: 4.6rem;
}

.share-btn {
  width: 10.2rem;
  height: 4.6rem;
}

/* =========== footer ===================================*/
.footer {
  margin: 6rem auto 4.8rem;
}

.footer-logo {
  width: 11.824rem;
  height: auto;
  margin-bottom: 1.2rem;
}

.footer p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =========== modal(모달창) ===================================*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* 모달 버튼 */
.modal-container {
  max-width: 33rem;
  height: 50rem;
  margin: 0 auto;
  padding: 4rem 4.5rem 4.2rem;
}

.cheering-text {
  background: url("../images/modal-text-mobile.png") no-repeat center;
  width: 24rem;
  height: 11rem;
}
.cheering-licat {
  margin-top: 2.4rem;
  width: 24rem;
  height: 18.8rem;
}

.modal-btn {
  width: 24rem;
  height: 7.2rem;
  background: #fcee21;
  padding: 2rem 4.45rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  word-break: keep-all;
  margin: 2.4rem auto 0;
}