@font-face {
  font-family: "GmarketSans";
  src: url("../fonts/GmarketSansLight.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GmarketSans";
  src: url("../fonts/GmarketSansMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "GmarketSans";
  src: url("../fonts/GmarketSansBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-VariableFont_wght.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* utils */
.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  --bg-purple: #5b2386;
  --text-white: #fff;
  --yellow: #fcee21;
  --btn-yellow: #fcee21;
  --font-main: "GmarketSans", sans-serif;
  --placeholder-gray: #babcbe;
}

/* =========== 본문 시작 ===================================*/
html {
  font-size: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-purple);
  color: var(--text-white);
  font-family: var(--font-main);
  text-align: center;
  position: relative;
  font-size: 2.4rem;
}

/* =========== header ===================================*/
/* 타이틀 섹션 */
.title-section {
  max-width: 192rem;
  margin: 12rem auto 5.2rem;
}

.title-section img {
  max-width: 56.4rem;
  width: 100%;
  height: auto;
  margin: 0 auto 5.2rem;
  display: block;
}

/* 인용구 */
.quote-img {
  width: 48.6rem !important;
  height: auto;
  max-width: 56.4rem;
  margin: 0 auto;
  display: block;
}

/* =========== main ===================================*/
.container {
  max-width: 192rem;
  margin: 0 auto;
}

/* 설명 섹션 */
.description {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 48.5rem;
  margin: 8rem auto 8rem;
  gap: 2rem;
  font-size: 2.4rem;
  line-height: 100%;
}

/* 양쪽 따옴표 가상 요소로 삽입 */
.description::before {
  content: "";
  display: inline-block;
  width: 3.6rem;
  height: 3.2rem;

  background-image: url("../images/left.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.description::after {
  content: "";
  display: inline-block;
  width: 3.6rem;
  height: 3.2rem;

  background-image: url("../images/right.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.description p {
  font-family: var(--font-main);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-white);
  text-align: center;
  vertical-align: middle;
  /* 사용 가능한 공간을 균등하게 차지 */
  flex: 1;
}

.description p .highlight {
  font-family: var(--font-main);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-white);
  text-align: center;
  vertical-align: middle;
}

/* <-------- 폼 섹션 ------------> */
.form-section {
  max-width: 771px;
  margin: 0 auto 12rem;
}

.form-section form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.form-row .time {
  width: 100%;
}

.form-section label {
  font-family: var(--font-main);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 100%;
  color: var(--text-white);
  text-align: center;
  vertical-align: middle;
}

.form-section input {
  padding: 1.6rem 4rem;
  font-size: 2.4rem;
  font-weight: 400;
  border-radius: 0.8rem;
  border: none;
  width: 22.8rem;
  height: 5.6rem;
  text-align: center;
  background-color: var(--text-white);
  color: var(--placeholder-gray);
}

.form-section input::placeholder {
  color: var(--placeholder-gray);
}

/* <-------- 계산 섹션 ------------> */
.calc-btn {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  gap: 1rem;
  margin: 12rem auto 0; /* auto로 가로 중앙 정렬 */
  /* 양쪽 여백  677px*/
  max-width: 56.7rem;
  width: clamp(24rem, 54.7rem, 56.7rem);

  height: auto;
  padding: 2rem 5rem;

  background: #fcee21;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 1.2rem;
  border: none;
  cursor: pointer;

  font-family: var(--font-main);
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--bg-purple);
  text-align: center;
  letter-spacing: -0.03em;
}

/* <--------  아이콘 이미지 가상요소로 처리 ------------> */
.calc-btn::after {
  content: "";
  display: block;
  width: 6.4rem;
  height: 7.2rem;

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

  position: absolute;
  right: -7.1rem; /* 버튼 오른쪽에 위치 */
  top: 1.4rem;
  margin-left: 0.7rem;
}

/* <-------- 결과 섹션 ------------> */
.result {
  max-width: 66.3rem;
  margin: 14.2rem auto 5.2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.result-row {
  display: flex;
  /* 중앙 정렬을 위한 속성 */
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 1.2rem;
  flex-wrap: wrap;

  font-family: var(--font-main);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 100%;
  color: var(--text-white);
}

.result .highlight {
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--text-white);
  line-height: 7.2rem;
}

/* <------- (결과 부분) 레이아웃 자연스럽게 보이게 미디어 쿼리 추가 ------------> */
@media screen and (max-width: 799px) {
  .result {
    gap: 0;
  }
  .result-row {
    font-size: 2rem;
  }
  .result .highlight {
    font-size: 3rem;
  }
}
/* CTA 버튼 */
.cta-btn {
  max-width: 57rem;
  margin: 0 auto 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  gap: 1.2rem;
  flex-wrap: wrap;

  font-family: var(--font-main);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 100%;
  text-align: center;
}

.go-btn,
.share-btn {
  display: inline-flex;
  padding: 2rem 5rem;
  align-items: center;
  justify-content: center;

  font-size: 2.4rem;
  font-weight: 500;
  text-decoration: none;
  font-family: var(--font-main);

  border: none;
  border-radius: 1.2rem;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);

  cursor: pointer;
}

.go-btn {
  background-color: var(--btn-yellow);
  color: var(--bg-purple);
  width: 36.5rem;
}

.share-btn {
  background-color: var(--text-white);
  color: var(--bg-purple);
  width: 19.3rem;
}

/* =========== footer ===================================*/
.footer {
  margin-top: 6rem;
  text-align: center;
}

.footer-logo {
  width: 16.8rem;
  height: 3.6rem;
  margin-bottom: 2rem;
}

/* footer 폰트 변경 추가 */
.footer p {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-white);
  max-width: 36.5rem;
  margin: 0 auto;
  margin-bottom: 12rem;
}

/* =========== 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-dialog[open] {
  /* 뷰포트 기준으로 고정 위치 */
  position: fixed;
  /* 위치 설정 */
  top: 50%;
  left: 50%;
  /* 화면 중앙에 위치 */
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
}

/* 배경 오버레이 */
/* 모달 뒤 배경을 어둡게 처리 */
.modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.1);
}

/* 모달 안 카드 스타일 */
.modal-container {
  background: #fff;
  border-radius: 2rem;
  box-shadow: 4px 4px 30px 0px #00000026;
  width: clamp(48rem, 56vw, 80rem);
  /* 패딩도 유동화 */
  padding: clamp(2.4rem, 4vw, 8rem) clamp(2.4rem, 7vw, 14.6rem);
  /* 너무 낮은 화면에서 잘리면 스크롤 */
  max-height: calc(100vh - 3.2rem);
  /* width: clamp(300px, 41.6667vw, 800px); */
}
.cheering-text {
  background: url("../images/modal-text.png") no-repeat center;
  background-size: cover;
  width: clamp(20rem, 20.625vw, 39.6rem); /* 1920px 기준 39.6rem = 396px */
  aspect-ratio: 396 / 150; /* 가로:세로 비율 유지 */
  margin: 0 auto;
}
/* <-------- 모달창 이미지 깨짐 현상 대응 ------------> */
@media (min-width: 800px) {
  .cheering-text {
    background-image: url("../images/modal-text-2x.png");
    background-size: cover;
  }
}

.cheering-licat {
  margin-top: 4rem;
  width: clamp(30rem, 22.8125vw, 43.8rem); /* 최소 300px, 최대 438px */
  height: clamp(23rem, 17.8125vw, 34.2rem); /* 최소 230px, 최대 342px */
}

.modal-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: #fcee21;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 1.2rem;
  font-weight: 500;

  line-height: 2.4rem;
  color: var(--bg-purple);
  border: none;
  cursor: pointer;
  /* 1920px에선 24rem, 화면이 줄면 최대 20rem까지 자연 축소 (컨테이너 넘치지 않게 100% 제한) */
  width: min(100%, clamp(20rem, 34.7vw, 50.8rem));

  /* 1920px 7.2rem → 576px 근처에선 ~5.6rem까지 축소 */
  height: clamp(5.6rem, 9.7vw, 6.4rem);

  /* 좌우/상하 패딩도 함께 유동화 */
  /* padding: clamp(1.2rem, 2vw, 2rem) clamp(2rem, 3.5vw, 4.45rem); */

  font-size: clamp(1.4rem, 1.1rem + 0.677vw, 2.4rem);
  font-family: "GmarketSans", sans-serif;
  word-break: keep-all;
  margin: 6rem auto 0; /* 가운데 정렬 */
}