/* 홈(/) — 라이브 staircrusher.club(Framer) 복제.
   구간: 데스크톱 1200–1919(기본) / ≥1920 / 태블릿 810–1199 / 모바일 <810.
   라이브 태블릿은 여러 블록을 transform:scale(.8) 로 줄여 보여 준다 — 글자 크기·위치를 맞추려고 그대로 따라 한다. */

/* 라이브는 굵기마다 패밀리를 따로 쓴다("Pretendard Bold" 를 weight 400 으로 쓰는 식) — 여기선 같은 파일을 weight 로 고른다 */
.home .f-semibold { font-weight: 600; }
.home .f-bold { font-weight: 700; }
.home .f-regular { font-weight: 400; }

.home p, .home h1, .home h2 { white-space: pre; }
.home h1, .home h2 { font-weight: 400; }

/* 구간별로 문구·줄바꿈이 다른 텍스트: v-dt = 데스크톱·태블릿, v-m = 모바일, v-dm = 데스크톱·모바일, v-t = 태블릿 */
.v-m, .v-t { display: none; }

/* ---------- 히어로 ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.hero-title { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero-sub { color: #fff; font-size: 30px; line-height: 36px; }
.hero-logo { width: 432px; height: 72px; }
.store-badges { display: flex; justify-content: center; align-items: center; gap: 12px; }
.store-badges a { display: block; }
.store-badges img { width: 100%; height: auto; }
.badge-app-store { width: 195px; aspect-ratio: 3.19672; }
.badge-google-play { width: 211px; aspect-ratio: 3.45902; }

/* ---------- 소개 띠 ---------- */
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 340px;
  padding: 40px;
  overflow: hidden;
  background: #22314a;
  color: #fff;
  text-align: center;
}
.intro p { font-size: 32px; line-height: 51.2px; letter-spacing: -0.64px; }

/* ---------- 기능 3종 ---------- */
.features { display: flex; justify-content: center; align-items: center; padding: 160px 0; overflow: hidden; background: #fff; }
.features-inner { display: flex; flex-direction: column; align-items: center; gap: 100px; width: 1080px; }
.feature { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1000px; }
.feature-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: min-content; padding-top: 120px; }
.feature-detail .feature-text { gap: 24px; }
.feature-label { color: #0e64d3; font-size: 28px; line-height: 42px; letter-spacing: -0.5px; }
.feature-label strong { font-weight: 600; } /* 라이브: 'Pretendard SemiBold' 를 700 으로 요청 → SemiBold 파일 */
.feature-title { color: #333; font-size: 40px; font-weight: 400; line-height: 56px; letter-spacing: -2px; }
.feature-title-spans { font-size: 4px; line-height: 5.6px; }
.feature-title-inter { font-family: Inter, sans-serif; } /* 라이브 모바일 버그 그대로: 이 제목만 Inter 700 (한글은 시스템 글꼴로 빠진다) */
.feature-title-spans span, .feature-title .br-40 { font-size: 40px; line-height: 56px; }
.feature-phone {
  width: 360px;
  height: auto;
  aspect-ratio: 0.493151;
  object-fit: contain;
  object-position: 0% 50%;
  filter: drop-shadow(-15px 16px 15px rgba(88, 89, 92, 0.35));
}
.feature-phone-wrap { display: flex; flex: none; justify-content: center; align-items: center; gap: 10px; padding: 0 40px; overflow: hidden; }
.feature-phone-wrap .feature-phone { flex: none; }
.feature-detail .feature-phone { height: 849px; aspect-ratio: auto; }

/* ---------- 이용자 후기 (무한 가로 스크롤) ---------- */
.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  height: 750px;
  padding: 120px 0;
  overflow: hidden;
  background: #f9fafb;
}
.reviews-title { width: 766px; text-align: center; }
.reviews-title p { color: #111; font-size: 40px; line-height: 56px; letter-spacing: -0.8px; white-space: pre-wrap; }
.review-track {
  --shift: -3060px; /* 한 벌 = 6장 × (카드 470 + 간격 40) */
  display: flex;
  flex: none;
  align-items: center;
  gap: 40px;
  width: max-content;
  height: 380px;
  animation: review-scroll 51s linear infinite; /* 라이브와 같은 60px/s */
  will-change: transform; /* 라이브 티커와 같게 — 안티에일리어싱 동일화 */
}
@keyframes review-scroll { to { transform: translateX(var(--shift)); } }
@media (prefers-reduced-motion: reduce) { .review-track { animation: none; } }
.review-card {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 470px;
  height: 360px;
  padding: 40px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 4px 4px 9px #eff2f5;
}
.review-body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.review-quote { width: 29px; height: 23px; }
.review-text { width: 390px; color: #111; font-size: 28px; font-weight: 500; line-height: 42px; letter-spacing: -0.56px; white-space: pre-wrap !important; }
.review-foot { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.review-author { display: flex; flex: none; align-items: center; gap: 12px; width: 305px; }
.review-author p { color: #000; font-size: 22px; line-height: 33px; letter-spacing: -0.44px; }
.review-author .review-role { color: #0072b2; font-weight: 500; }
.review-character { flex: none; width: 90px; height: 71px; }

/* ---------- 함께 문제 뿌시는 법 ---------- */
.howto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 0 160px;
}
.howto > :not(.howto-bg) { position: relative; }
.howto-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.howto-title { width: 100%; text-align: center; }
.howto-title p { color: #111; font-size: 40px; line-height: 56px; letter-spacing: -0.8px; white-space: pre-wrap; }
.howto-list { display: flex; align-items: center; gap: 20px; width: 100%; }
.howto-item { display: flex; flex: 1 0 0; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-width: 0; border-radius: 12px; }
.howto-head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.howto-icon { width: 120px; height: 120px; }
.howto-name { color: #111; font-size: 28px; line-height: 39.2px; letter-spacing: -0.56px; text-align: center; }
.howto-desc { width: 255px; color: #3f3f45; text-align: center; }
.howto-desc p { font-size: 22px; line-height: 33px; letter-spacing: -0.44px; white-space: pre-wrap; }
.howto-desc .desc-sm { font-size: 20px; line-height: 30px; letter-spacing: -0.4px; }
.howto-desc .desc-sm span { font-size: 22px; line-height: 33px; letter-spacing: -0.44px; }
.howto-desc .desc-lg { font-size: 24px; line-height: 36px; letter-spacing: -0.48px; }
.howto-line { flex: none; width: 3px; height: 289px; }

/* ---------- 자주 묻는 질문 ---------- */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 100px 36px 200px;
  overflow: hidden;
  background: #f9fafb;
}
.faq-title { width: 100%; text-align: center; }
.faq-title p { color: #111; font-size: 40px; font-weight: 700; line-height: 56px; letter-spacing: -0.8px; white-space: pre-wrap; }
.faq-list { display: flex; flex: none; flex-direction: column; justify-content: center; align-items: center; gap: 12px; width: 100%; max-width: 1200px; }
.faq-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  padding: 24px 30px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 4px 4px 9px #eff2f5;
}
.faq-question { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; }
.faq-q-group { display: flex; align-items: center; gap: 12px; }
.faq-q { color: #0e64d3; font-size: 28px; font-weight: 700; line-height: 42px; letter-spacing: -0.56px; }
.faq-text { color: #111; font-size: 24px; line-height: 33.6px; letter-spacing: -0.48px; }
.faq-chevron { flex: none; width: 32px; height: 32px; transform: rotate(180deg); }
.faq-answer-wrap { display: none; flex-direction: column; gap: 10px; width: 100%; padding: 0 0 8px 32px; }
.faq-answer { color: #272727; font-size: 22px; line-height: 35.2px; letter-spacing: -0.44px; white-space: pre-wrap !important; }
.faq-item.open .faq-q { color: #1d85ff; }
.faq-item.open .faq-text { line-height: 36px; }
.faq-item.open .faq-chevron { transform: none; }
.faq-item.open .faq-answer-wrap { display: flex; }

/* ---------- 하단 CTA ---------- */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 433px;
  padding: 160px 100px;
  overflow: hidden;
  background: #0e64d3;
}
.cta-inner { display: flex; flex: none; flex-direction: column; justify-content: center; align-items: flex-start; gap: 60px; width: 100%; max-width: 1200px; }
.cta-title p { color: #fff; font-weight: 700; }
.cta-title-sm { font-size: 32px; line-height: 51.2px; letter-spacing: -0.64px; }
.cta-title-lg { font-size: 40px; line-height: 64px; letter-spacing: -0.8px; }
.cta-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; width: 100%; }
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px 16px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px #fff;
}
.cta-button img { width: 25px; height: 25px; }
.cta-button p { color: #fff; font-size: 18px; font-weight: 700; line-height: 25.2px; letter-spacing: -0.36px; text-align: center; }
.cta-deco { position: absolute; z-index: 1; right: 0; bottom: 0; width: 738px; height: 185px; }
.cta-ground { position: absolute; left: 0; bottom: 0; width: calc(100% + 1px); max-width: none; height: 61px; }
.cta-characters { position: absolute; top: calc(48.7805% - 83.6132px); left: calc(54.4715% - 209.096px); width: 418px; height: 167.19px; max-width: none; }

/* ================= ≥1920 (라이브 기본 구간) ================= */
@media (min-width: 1920px) {
  :root { --footer-pt: 80px; } /* 라이브 홈은 ≥1920 에서만 푸터 윗여백 80 (1200–1919 는 base 의 72) */
  .howto-list { gap: 30px; }
  .cta { padding: 160px 36px; }
  .cta-title-sm { font-size: 36px; line-height: 57.6px; letter-spacing: -0.72px; }
  .cta-title-lg { font-size: 48px; line-height: 76.8px; letter-spacing: -0.96px; }
  .cta-ground { top: 123px; right: auto; bottom: auto; width: 739px; height: 62px; }
  .cta-characters { top: 0; left: 193px; }
}

/* ================= 태블릿 (810–1199) ================= */
@media (max-width: 1199.98px) {
  .v-dm { display: none; }
  .v-t { display: block; }

  .hero-sub { font-size: 24px; line-height: 28.8px; }
  .hero-logo { width: 360px; height: 60px; }
  .badge-app-store { width: 163px; }
  .badge-google-play { width: 176px; }

  .intro { height: 300px; }
  .intro p { font-size: 24px; line-height: 38.4px; letter-spacing: -0.48px; }

  .features { padding: 0; }
  .features-inner { flex: 1 0 0; gap: 20px; width: auto; min-width: 100px; padding: 60px 0; }
  .feature { flex-wrap: nowrap; flex: none; width: 1000px; padding: 0 80px; transform: scale(0.8); }
  .feature-map .feature-text { width: 345px; }
  .feature-detail .feature-text, .feature-review .feature-text { gap: 12px; }
  .feature-review .feature-text { width: 405px; }
  .feature-phone { width: 345px; }
  .feature-phone-wrap { height: 813px; }

  .reviews { height: auto; }
  .review-track { --shift: -1992px; gap: 12px; height: 260px; animation-duration: 33.2s; }
  .review-card { width: 320px; height: 240px; padding: 20px; }
  .review-body { gap: 8px; }
  .review-quote { width: 13px; height: 10.31px; }
  .review-text { width: 280px; font-size: 20px; line-height: 30px; letter-spacing: -0.4px; }
  .review-author { width: auto; }
  .review-author p { font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }
  .review-character { width: 62px; height: 48.9px; }

  .howto { overflow: hidden; }
  .howto-title p { font-size: 32px; line-height: 44.8px; letter-spacing: -0.64px; white-space: pre; }
  .howto-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 36px; padding: 24px; }
  .howto-item { align-self: start; width: 100%; }
  .howto-line { display: none; }

  .faq { gap: 0; padding: 80px 40px 100px; }
  .faq-title { transform: scale(0.8); }
  .faq-list { width: 120%; gap: 8px; transform: scale(0.8); }

  .cta { padding: 80px 36px 160px 40px; }
  .cta-inner { transform: scale(0.8); transform-origin: 0 0; }
  .cta-title-sm { font-size: 36px; line-height: 57.6px; letter-spacing: -0.72px; }
  .cta-title-lg { font-size: 48px; line-height: 76.8px; letter-spacing: -0.96px; }
  .cta-deco { transform: scale(0.8); transform-origin: 100% 100%; }
  .cta-ground { top: 123px; right: auto; bottom: auto; width: 739px; height: 62px; }
  .cta-characters { top: 0; left: 193px; }
}

/* ================= 모바일 (<810) ================= */
@media (max-width: 809.98px) {
  .v-dt, .v-t { display: none; }
  .v-m, .v-dm { display: block; }

  .hero { height: 133.041vh; }
  .hero-content { gap: 30px; }
  .hero-sub { font-size: 20px; line-height: 24px; }
  .hero-logo { width: 240px; height: 40px; }
  .store-badges { gap: 16px; }
  .badge-app-store { width: 128px; }
  .badge-google-play { width: 138px; }

  .intro { height: auto; padding: 80px 40px; }
  .intro p { font-size: 20px; line-height: 28px; letter-spacing: -0.4px; }

  .features { flex-direction: column; padding: 0 0 80px; }
  .features-inner { flex: none; gap: 100px; width: 100%; padding: 0; }
  .feature { flex-direction: column; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 40px; width: 100%; height: 887px; padding: 16px; transform: none; }
  .feature-review { height: 897px; }
  .feature .feature-text { flex: 1 0 0; gap: 12px; width: 100%; min-height: 0; padding: 32px 0 0 20px; }
  .feature-review .feature-text { padding-top: 0; }
  .feature-label { font-size: 14px; line-height: 21px; }
  .feature-title { font-size: 24px; line-height: 33.6px; }
  .feature-detail .feature-title { font-weight: 700; }
  .feature-phone, .feature-phone-wrap { order: 1; }
  .feature-phone { width: 320px; object-position: 50% 50%; }
  .feature-phone-wrap { height: auto; }
  .feature-detail .feature-phone { height: 669px; }

  .reviews { gap: 48px; padding: 80px 0; }
  .reviews-title { width: 390px; }
  .reviews-title p { font-size: 24px; line-height: 33.6px; letter-spacing: -0.48px; white-space: pre; }
  .review-track { --shift: -1368px; height: 210px; animation-duration: 22.8s; }
  .review-card { width: 216px; height: 190px; }
  .review-body { width: min-content; }
  .review-text { width: 184px; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }
  .review-author p { font-size: 14px; line-height: 21px; letter-spacing: -0.28px; }
  .review-character { width: 44px; height: 34.7px; }

  .howto-title p { font-size: 24px; line-height: 33.6px; letter-spacing: -0.48px; }
  .howto-list { display: flex; flex-direction: column; align-items: center; gap: 78px; padding: 0; }
  .howto-item { width: 100%; }
  .howto-crusher .howto-head { display: block; position: relative; width: 100%; height: 166px; }
  .howto-crusher .howto-icon { position: absolute; top: 0; left: calc(50% - 60px); }
  .howto-crusher .howto-name { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
  .howto-name { font-size: 24px; line-height: 33.6px; letter-spacing: -0.48px; }
  .howto-desc { width: 100%; color: #777584; }
  .howto-desc p { font-size: 20px; line-height: 30px; letter-spacing: -0.4px; }
  .howto-crusher .howto-desc p { font-size: 18px; line-height: 27px; letter-spacing: -0.36px; }
  .howto-crusher .howto-desc .desc-br { font-size: 22px; line-height: 33px; letter-spacing: -0.44px; }

  .faq { align-items: flex-start; gap: 24px; padding: 36px 16px; }
  .faq-title { transform: none; }
  .faq-title p { font-size: 24px; line-height: 33.6px; letter-spacing: -0.48px; text-align: left; }
  .faq-list { width: 100%; transform: none; }
  .faq-item { padding: 14px 16px; }
  .faq-item.open { gap: 24px; }
  .faq-q-group { flex: 1 0 0; min-width: 0; }
  .faq-q { color: #1d85ff; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }
  .faq-text, .faq-item.open .faq-text { flex: 1 0 0; min-width: 0; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; white-space: pre-wrap; }
  .faq-chevron { width: 24px; height: 24px; }
  .faq-answer-wrap { padding: 0 0 8px; }
  .faq-answer { font-size: 16px; line-height: 25.6px; letter-spacing: -0.32px; }

  .cta { padding: 60px 16px 160px; }
  .cta-inner { gap: 30px; transform: none; }
  .cta-title-sm { font-size: 18px; line-height: 28.8px; letter-spacing: -0.36px; }
  .cta-title-lg { font-size: 24px; line-height: 38.4px; letter-spacing: -0.48px; }
  .cta-button { padding: 12px 16px; }
  .cta-button p { font-size: 16px; line-height: 22.4px; letter-spacing: -0.32px; }
  .cta-deco { transform: scale(0.6); }
}