@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../fonts/SpoqaHanSansNeo-Bold.otf") format("otf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../fonts/SpoqaHanSansNeo-Regular.otf") format("otf");
  font-weight: 400;
  font-style: normal;
}

/* 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 {
  --orange: #d97652;
  --white: #fff;
  --subscribe-navy: #263140;
  --header-bg: #f2e9d8;
  --font-main: "Spoqa Han Sans Neo", sans-serif;
  --placeholder-gray: #767676;
}

html {
  font-size: 10px;
  /* #top으로 올라갈 때 부드럽게 올라가는 속성 */
  scroll-behavior: smooth;
}

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

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

/* ===== header ===== ===================================*/
/* sticky를 할지 fixed를 할지 고민했지만 자연스럽게 header 사라지는게 나을 것 같아서 sticky */
header {
  position: sticky;
  top: 0;
  background: var(--header-bg);
  z-index: 9999;
}

/* 안쪽 컨테이너: 폭은 100%, 좌우 패딩만 반응형 */
header .container {
  max-width: 128rem;
  margin-inline: auto;

  display: flex;
  align-items: center;

  /* 로고와 nav 사이 간격(반응형을 고려해서 넣었음) */
  gap: clamp(1.2rem, 3vw, 4rem);
  padding: clamp(1.2rem, 2.2vw, 3.2rem) clamp(1.6rem, 4vw, 3.2rem);
}

/* 메뉴를 오른쪽으로 밀기 */
header nav {
  margin-left: auto;
}

header nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 3rem); /* Home–About–Support 사이 간격 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Support ↔ Download만 추가 간격 */
header nav li:nth-last-child(2) {
  margin: 0 clamp(1rem, 1.5vw, 4rem) 0 0;
}

header nav a {
  text-decoration: none;
  color: #000;
  font-size: 1.6rem;
}
header nav .btn {
  display: inline-flex;
  width: 14rem;
  height: 5rem;
  border-radius: 4rem;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}

/* 기본: 데스크톱에선 햄버거 숨김 */
.nav-toggle {
  display: none;
  width: 3.2rem;
  height: 3.2rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  margin-left: auto;
  text-decoration: none;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 0.2rem;
  background: var(--subscribe-navy);
  border-radius: 0.1rem;
}

/* ===== main / 히어로 ========================================*/
main {
  width: 100%;
}

/* 히어로 섹션 배경 */
#download {
  background: var(--header-bg);
  background-color: var(--header-bg);
}

.hero-container {
  max-width: 128rem;
  margin-inline: auto;
  box-sizing: border-box;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(3.2rem, 4vw, 13.1rem);

  padding-block: 1.2rem 0;
  padding-inline: clamp(1.6rem, 4vw, 3.2rem);
}

/* 왼쪽 텍스트 칼럼 */
.hero-text {
  /* 빈 공간이 있으면 커지고, 화면이 좁아지면 줄어들고, 기본 크기는 300px로 */
  flex: 1 1 30rem;
  text-align: left;
  min-width: 0;
}

.hero-text .hero-heading {
  max-width: 73.4rem;
  /* 중간값 계산:734 ÷ 1920 × 100 = 38.23vw */
  width: clamp(26.4rem, 38.24vw, 73.4rem);
  /* line-height 줄간격으로 높이 맞추기: 48px(폰트 크기) *1.25 = 약 120px */
  line-height: 1.25;
  font-size: clamp(2.4rem, 3.5vw, 4.8rem);
  font-weight: 700;
  margin: 0 0 4rem;
  color: #000;
}

.hero-text p {
  max-width: 43.9rem;
  width: clamp(28rem, 18.703vw, 43.9rem);
  color: #000;
  margin: 0 0 4rem;
  font-size: clamp(1.4rem, 0.833vw, 1.6rem);
  line-height: 1.3;
}

/* 다운로드 버튼 */
.hero-text .download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.4rem;
  border-radius: 2.8rem;
  background: var(--orange);
  color: #fff;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}

/* 오른쪽 이미지 칼럼 */
.hero-photo {
  /* 반응형에서 width를 조절하면 박스도 같이 바뀔 수 있게 flex 속성 부여 */
  flex: 0 0 auto;
  align-self: center;
  position: relative;
}

.hero-photo img {
  max-width: 41.5rem;
  width: clamp(24rem, 38vw, 41.5rem);
  min-width: 0; /* 326px 고정 해제(겹침 방지) */
  height: auto;
  object-fit: contain; /* 잘림 없이 축소 */
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}

/* ===== about =========================================*/
#about {
  background: #fff;
}

/* 래퍼: 양 옆 여백과 가로 두 열 배치 */
#about .main-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: clamp(4rem, 6vw, 8rem) clamp(1.6rem, 16.666vw, 32rem);
  gap: clamp(2.4rem, 5vw, 11rem); /* 2) gap도 반응형 */
  max-width: 192rem;
  margin: 0 auto;
  box-sizing: border-box;
  flex-wrap: wrap;
}

/* 왼쪽 이미지 카드 */
#about .main-photo {
  flex: 0 0 clamp(32.7rem, 34.375vw, 66rem);
  max-width: 66rem;
  /* 기본 520px, 공간 부족하면 약간 줄어듦 */
}
#about .main-photo img {
  display: block;
  max-width: 66rem;
  width: clamp(32.7rem, 34.375vw, 66rem);
  height: auto;
  border-radius: 3rem;
  box-shadow: 10px 10px 30px 0px #00000040;
  aspect-ratio: 660/390;
}

/* 오른쪽 텍스트 칼럼 */
#about .copy {
  flex: 1 1 0; /* 남은 영역 유동으로 가져감 */
  text-align: left;
  min-width: 0; /* 긴 단어/줄바꿈 안전장치 */
}
#about .copy h2 {
  font-weight: 700;
  /* 1.875vw: 36(최대값) / 1920(화면 너비) * 100 */
  font-size: clamp(2.4rem, 1.875vw, 3.6rem);
  line-height: 1.25;
  margin: 0 0 4rem 0;
  color: #000;
  max-width: 51rem;
}
#about .copy p {
  /* 0.8333vw: 16(최대값) / 1920(화면 너비) * 100 */
  font-size: clamp(1.4rem, 0.833vw, 1.6rem);
  line-height: 1.5;
  color: #000;
  margin: 0;
  max-width: 50.8rem;
}

/* ===== gallery =========================================*/
.gallery-container {
  align-items: center;
}

.gallery-container h2 {
  max-width: 92.9rem;
  width: 100%;

  font-size: clamp(2.4rem, 2.5vw, 4.8rem);
  text-align: center;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 4rem;
  justify-content: center;
  margin: 0 auto 4rem;
}

/* line-height = 원하는 높이 / font-size */
/* line-height = (42px / 16px) 2줄로 넣을거니까 /2를 한 번 더 함 */

.gallery-container p {
  max-width: 73.9rem;
  /* 아래 코드로 인해 전체 화면 스크롤 발생 */
  /* width: 100%;  */
  font-size: 1.6rem;
  text-align: center;
  color: #000;
  line-height: 1.3;
  margin: 0 auto;
  margin-bottom: 8.8rem;
  justify-content: center;
}

.gallery-photo {
  display: flex;
  flex-direction: row;
  gap: 7.2rem;
  align-items: center;
  margin: 0 32rem 9rem;
  justify-content: center;
}

.cat-photo img {
  aspect-ratio: 1/1;
  max-width: 37.8rem;
  width: 100%;
  border-radius: 3rem;
  min-width: 260px; /* 최소 너비 보장 */
  min-height: 260px; /* 최소 높이 보장 */
  box-shadow: 10px 10px 30px 0px #00000040;
}

.gallery-container-text {
  /* width: min(938px, calc(100% - 982px)); */
  width: min(93.8rem, calc(100% - 8.2rem));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 버튼을 오른쪽 끝으로 */
  margin-bottom: 9rem;
}

.gallery-container-text .learn-more {
  /* flex: 1 1 auto; */
  max-width: 73.9rem;
  /* clamp값 중간값 수정하기 */
  width: clamp(32.6rem, 0, 73.9rem);
  font-size: 1.6rem;

  min-height: 6.4rem; /* 내용이 한 줄이어도 최소 64px 보장 */
  text-align: left;
  margin: 0;
}

.gallery-container-text .btn {
  flex: 0 0 auto;
  margin-left: 5.2rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.4rem;
  border-radius: 2.8rem;
  background: var(--orange);
  color: #fff;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}

/* ===== subscribe =========================================*/

#subscribe-heading {
  position: relative;
}

/* <구독 카드 >*/
.subscribe-container {
  position: absolute; /* 겹쳐 보이게는 유지 */
  left: 50%;
  top: calc(100% - 34rem);
  transform: translate(-50%, -50%);
  z-index: 100;

  max-width: 128rem;
  width: clamp(32.6rem, 67.1875vw, 128rem);

  /* 높이는 '고정' 말고 '최소 높이'만 줘서 내용이 많아지면 늘어나게 */
  min-height: clamp(20rem, 10.4167vw, 32.6rem);

  display: flex;
  align-items: center;
  justify-content: space-between;

  /* 공간이 부족하면 다음 줄로 내려가게 */
  flex-wrap: wrap;

  /* 가로 간격은 너무 커지지 않게 상한 낮춤 */
  column-gap: clamp(2rem, 4vw, 6rem);
  row-gap: 2rem;

  padding: clamp(3.6rem, 2.5vw, 5rem) clamp(3.2rem, 3vw, 5.8rem);
  background-color: var(--subscribe-navy);
  border-radius: 3rem;
  color: #fff;
  text-align: left;

  overflow: hidden;
}
/* 왼쪽 텍스트 묶음 */
.subscribe-text {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  max-width: 49.1rem;
}

/* 제목/설명: id 로 선택해야 함 */
#subscribe-title {
  font-weight: 700;
  font-size: clamp(2.4rem, 1.875vw, 3.6rem);
  width: auto;
  max-width: 46.6rem;
}

#subscribe-subtext {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.4;
}

.subscribe-form {
  width: 100%;
  max-width: 53rem;
  height: auto;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 9999px;
  padding: 1rem 1rem 1rem 1.6rem;
  gap: 0;
  padding-left: 2.8rem;
  flex-wrap: wrap;
  position: relative;
}

.subscribe-icon {
  margin: 0;
  flex: 0 0 2.4rem;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}

/* placehorder 적히는 부분 */
.subscribe-form input {
  flex: 1;
  /* 메일 아이콘 <-> enter 사이의 간격 */
  margin-left: 1.6rem; /* 기본 margin 제거 */
  padding: 0; /* 기본 padding 제거(원하면 padding-left만 4~8px) */
  border: 0;
  outline: 0;
  font-size: 1.6rem;
  color: var(--subscribe-navy);
}

/* 버튼 */
.subscribe-btn {
  border: 0;
  border-radius: 4rem;
  padding: 1.2rem 2rem;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* <------- 카드 겹쳐보이게 만들기 ------------->  */
#subscribe {
  position: relative;
  /* 배경 높이 확보(배경높이(340px) + 카드 높이 절반) */
  min-height: calc(340px + (clamp(200px, 10.4167vw, 326px) / 2));
}

/* 배경 이미지 */
.subscribe-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34rem;
  z-index: 0;

  background-image: url("../images/img_5.png");
  background-size: cover; /* 이미지 꽉 채우기 */
  background-position: center; /* 중앙 정렬 */
  background-repeat: no-repeat;
}

/* <----- 호버 버튼  ------->*/
.scroll-top-btn {
  position: absolute;
  right: 2.4rem;
  bottom: 2.4rem;

  display: inline-block;
  width: 5rem;
  height: 5rem;
  background: url("../images/scroll-top-btn.png") center / contain no-repeat;
}

/* hover/focus 시 SVG2로 변경 */
.scroll-top-btn:hover,
.scroll-top-btn:focus-visible {
  background-image: url("../images/scroll-top-btn-hover.png");
}

/* ===== modal(구독 확인 메시지) ========================================*/
.modal {
  display: none; /* 처음엔 숨김 */
  position: fixed;
  z-index: 9999; /* 최상단 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 모달 내용 */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../images/modal.png");
  border-radius: 3rem;
  width: 60rem;
  height: 40rem;
  text-align: center;
  box-shadow: 0px 0px 30px 0px #00000033;
}

.close-btn {
  position: absolute;
  right: 1.2rem;
  top: 0.8rem;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
}

.modal-title {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--orange);
  margin-top: 19.6rem;
  margin-bottom: 1.2rem;
}

.modal-text {
  font-size: 1.4rem;
  margin-bottom: 3.8rem;
}
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.4rem;
  border-radius: 2.8rem;
  background: var(--orange);
  color: #fff;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}

/* ===== footer ========================================*/
/* 1) 바깥 footer는 block으로 */
footer {
  display: block;
}

.container-footer {
  width: clamp(39rem, 66.146vw, calc(192rem - 65rem));

  margin-inline: auto; /* 가운데 배치 */
  height: 16rem;

  display: flex;
  align-items: center;
}

.mobile-menu {
  display: none;
}

/* 로고는 왼쪽, 소셜은 오른쪽 */
.container-footer .social {
  width: clamp(17.6rem, 10.520833vw, 22.8rem);
  display: flex;
  gap: clamp(1.6rem, 0.9375vw, 2rem);
  padding: 0;
  margin: 0;
  /* 오른쪽 끝 정렬 */
  margin-left: auto;
  list-style: none;
}

/* ===== 1920px -> 576px로 넘어갈 때 어색한 부분의 반응형 추가================*/
/* - about 섹션: 좁아지면 세로로 쌓기 (이미지 위 / 텍스트 아래) */
/* - gallery 섹션: 좁아지면 슬라이드로 보여주기  */
@media (max-width: 900px) {
  /* 가로 → 세로 */
  #about .main-container {
    flex-direction: column;
    align-items: center; /* 자식들이 가로폭 100% 사용 */
    gap: 2.4rem;
    padding-inline: 1.6rem; /* 좌우 여백 살짝 줄여줌 */
  }

  /* 이미지 카드: 가로 제한 해제하고 꽉 차게 */
  #about .main-photo {
    flex: 0 0 auto; /* 고정 너비 해제 */
    max-width: 100%;
  }
  #about .main-photo img {
    width: 100%;
    height: auto;
  }

  /* 텍스트 칼럼: 가로 제한 해제하고 읽기 좋게 */
  #about .copy {
    max-width: none; /* 508px/510px 같은 제한 해제 */
    text-align: left; /* 필요하면 center로 바꿔도 OK */
  }
  #about .copy h2 {
    max-width: none;
    font-size: 2.8rem; /* 너무 쪼그라들지 않게 하드 바닥값 */
    line-height: 1.3;
  }
  #about .copy p {
    max-width: none;
    font-size: 1.6rem; /* 본문 글자도 바닥값 16px로 고정 */
    line-height: 1.5;
  }

  .gallery-container {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
    overflow: hidden; /* 가로 스크롤 방지 */
  }

  .gallery-photo {
    /* 스크롤 컨테이너 */
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* 핵심 */
    margin-right: -3.2rem;
    min-height: 24rem;
    margin-left: 0;
    margin-bottom: 6rem;
    list-style: none;
    scroll-snap-type: x mandatory;
    justify-content: start;

    /* 그림자 효과를 위한 패딩 추가 */
    padding: 1rem 0; /* 위아래 패딩으로 그림자 공간 확보 */
  }

  .gallery-photo > li {
    flex: 0 0 auto;
    list-style: none;
    scroll-snap-align: start;
  }

  .gallery-photo img {
    display: block;
    width: 26rem;
    height: auto;
    border-radius: 1.8rem;
    flex-shrink: 0;
    box-shadow: 10px 10px 20px 0px #00000040;
  }
}

/* - hero 섹션: 가운데 정렬 */
@media (min-width: 576px) and (max-width: 716px) {
  .hero-text {
    display: flex; /* flexbox 사용 */
    flex-direction: column; /* 위아래로 쌓기 */
    align-items: center; /* 가로축 중앙 정렬 */
    justify-content: center; /* 세로축 중앙  */
    text-align: center; /* 텍스트도 중앙 정렬 */
    max-width: 56rem;
    margin: 3rem auto 0;
    gap: 3rem;
    min-width: 0;
  }

  .hero-text .hero-heading {
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height: 1.3;
    width: auto;
    margin: 0;
  }

  .hero-text p {
    font-size: clamp(1.4rem, 1.9vw, 1.6rem);
    line-height: 1.35;
    max-width: 56rem;
    margin: 0;
  }

  .hero-text .download {
    margin-top: 0.8rem;
  }

  /* 이미지 중앙 정렬 + 폭만 유동(세로는 비율로 자동) */
  .hero-photo {
    width: 100%;
    margin: 0 auto; /* 데스크톱 여백 영향 제거 */
    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center; /* 세로 기준 정렬 */
  }

  .hero-photo img {
    width: clamp(28rem, 62vw, 48rem); /* 이 구간에서 약 500px 안쪽으로 */
    height: auto; /* 비율 유지 */
    aspect-ratio: 415 / 766; /* 원본 비율 */
    object-fit: cover; /* 잘림 방지 */
    min-width: 0; /* 데스크톱 min-width 영향 제거 */
    display: block;
  }
}

/* - subscribe 섹션: 660px 이하에서 모두 가운데 정렬 */
@media screen and (max-width: 660px) {
  .subscribe-container {
    display: flex;
    flex-direction: column;
    /* 안에 있는 요소들이 같은 너비를 가지게 함 */
    align-items: stretch;
    gap: 2rem;
  }

  /* 왼쪽 정렬: 텍스트 */
  .subscribe-text {
    text-align: left;
    align-items: flex-start;
  }
  #subscribe-title {
    text-align: left;
  }

  /* 가운데 정렬: input */
  .subscribe-form input {
    display: block;
    margin: 0 auto; /* 가운데 */
    width: 100%;
  }

  /* 오른쪽 정렬: 버튼 */
  .subscribe-btn {
    display: block;
    /* 오른쪽 정렬 */
    margin-left: auto;
  }
}