/* 앱소개 (/app) — 라이브(staircrusher.club/app) 복제.
   구간은 라이브 Framer 와 같은 넷: 기본값 = 1200–1919, @media ≥1920 / 810–1199 / <810 가 덮는다. */

/* 구간별로 줄이 갈리는 문장은 라이브처럼 문장 단위로 두 벌 두고 하나만 보인다 */
.only-desktop, .only-tablet, .only-mobile { display: none; }

/* ── 히어로 (탐색 #explore / 등록 #regist) ── */
.app-hero { position: relative; height: 520px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.app-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.app-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 105px; padding: 0 36px; }
.app-hero--register .app-hero-inner { gap: 120px; }
.app-hero-content { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.app-hero-title { color: #fff; font-size: 40px; font-weight: 800; line-height: 60px; letter-spacing: -0.8px; text-align: center; white-space: pre; }
.app-hero--register .app-hero-title { font-weight: 700; }

.store-buttons { display: flex; gap: 10px; }
.store-button { display: block; }
.store-button img { width: 100%; height: auto; }
.store-button--apple { width: 195px; aspect-ratio: 195 / 61; }
.store-button--google { width: 211px; aspect-ratio: 211 / 61; }

.app-tabs { display: flex; width: 1080px; background: #fff; }
.app-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 84px; padding: 20px 24px; background: #45454a; color: #fbfbfb; font-size: 28px; font-weight: 600; line-height: 33.6px; white-space: pre; }
.app-hero--register .app-tab { color: #fff; }
.app-tab.is-active { background: #fff; color: #000; font-weight: 700; }

/* ── 섹션 도입 문구 ── */
.app-intro { display: flex; flex-direction: column; align-items: center; padding: 160px 36px 40px; background: #fff; }
.app-intro--gray { background: #fafbfc; }
.app-intro-inner { display: flex; flex-direction: column; gap: 12px; width: 1080px; overflow: hidden; }
.app-eyebrow { color: var(--blue); font-size: 28px; font-weight: 700; line-height: 33.6px; letter-spacing: -0.56px; white-space: pre; }
.app-intro-title { color: #000; font-size: 44px; font-weight: 700; line-height: 66px; letter-spacing: -0.88px; white-space: pre; }
/* 라이브는 "Pretendard SemiBold" 패밀리 + weight 400 = SemiBold 파일 */
.app-intro-title--semibold { font-weight: 600; }

/* ── 기능 소개 행 ── */
.feature { display: flex; justify-content: center; padding: 100px 36px; background: #fff; }
.feature--gray { background: #fafbfc; }
.feature-inner { display: flex; align-items: center; justify-content: space-between; width: 1080px; overflow: hidden; }
.feature-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.feature-title { color: #333; font-size: 32px; font-weight: 700; line-height: 48px; letter-spacing: -0.64px; white-space: pre; }
.feature-title em { font-style: normal; color: var(--blue); }
.feature-desc { display: flex; flex-direction: column; gap: 12px; }
.feature-body { color: #3f3f45; font-size: 22px; line-height: 35.2px; letter-spacing: -0.44px; white-space: pre; }
.feature-note { color: #75757c; font-size: 18px; line-height: 27px; letter-spacing: -0.36px; white-space: pre; }
.feature-media { position: relative; flex: none; width: 560px; aspect-ratio: 1.4; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }

.feature--entrance { padding: 50px 36px; }
.feature--entrance .feature-inner { justify-content: center; gap: 80px; }
.feature--entrance .feature-media { order: -1; aspect-ratio: 1.40092; }
/* 화장실 지도: 560×400 이미지를 둥근 상자 안 가운데에(라이브처럼 1px 아래로) 둔다 */
.feature--toilet .feature-media { height: 400px; aspect-ratio: auto; border-radius: 12px; overflow: hidden; }
.feature--toilet .feature-media img { position: absolute; top: 50.25%; left: 50%; width: 560px; height: 100%; max-width: none; transform: translate(-50%, -50%); }
.feature--review .feature-inner, .feature--special .feature-inner { justify-content: center; gap: 60px; }
.feature--review .feature-media { order: -1; border-radius: 12px; overflow: hidden; }
.feature--special { padding-bottom: 160px; }
.feature--conquer { padding: 100px 36px 200px; }
.feature--conquer .feature-inner { justify-content: center; gap: 60px; overflow: visible; }
.feature--conquer .feature-title { color: #070707; }
.feature--conquer .feature-note { font-size: 20px; line-height: 30px; letter-spacing: -0.4px; }

/* ── 입구 정보 등록 (폰 2개) ── */
.register { display: flex; justify-content: center; padding: 160px 0 84px; background: #fff; overflow: hidden; }
.register-inner { display: grid; grid-template-columns: 529px 551px; justify-content: space-between; align-items: start; width: 1080px; }
.register-head { display: flex; flex-direction: column; gap: 12px; }
.register-title { color: #000; font-size: 44px; font-weight: 700; line-height: 66px; letter-spacing: -0.88px; white-space: pre; }
.register-items { display: contents; }
.register-item { display: flex; flex-direction: column; width: 464px; }
/* 라이브는 폰 높이(875.6)를 반올림한 994 고정 높이 */
.register-item--form { grid-column: 1; flex-direction: column-reverse; justify-content: flex-end; gap: 40px; height: 994px; margin-top: 108px; }
.register-item--photo { grid-column: 2; grid-row: 1 / span 2; justify-self: center; gap: 60px; padding-top: 100px; }
.register-phone { width: 100%; height: auto; }
.register-caption { display: flex; justify-content: center; color: #3f3f45; font-size: 26px; line-height: 39px; letter-spacing: -0.52px; white-space: pre; }
.register-item--form .register-caption { justify-content: flex-start; padding-left: 20px; }

/* ── ≥1920 ── */
@media (min-width: 1920px) {
  .app-hero-title { font-size: 48px; line-height: 72px; letter-spacing: -0.96px; }
  .app-hero--register .app-hero-inner { gap: 100px; }
  .app-eyebrow { font-size: 32px; line-height: 41.6px; letter-spacing: -0.64px; }
  .app-intro--gray, .feature--gray { background: #fbfbfb; }
  .app-intro--gray .app-intro-inner { width: 1200px; }
  .feature-title { color: #070707; }
  .feature-desc { gap: 10px; }
  .feature--toilet .feature-note { font-size: 20px; line-height: 30px; letter-spacing: -0.4px; }
  /* 오른쪽 텍스트가 칼럼을 채우지 않고 오른쪽 끝에 붙는다 */
  .feature--entrance .feature-inner, .feature--conquer .feature-inner { justify-content: space-between; gap: 0; }
  .feature--entrance .feature-text, .feature--conquer .feature-text { flex: none; }
  .feature--review .feature-inner, .feature--special .feature-inner { width: 1200px; gap: 27px; }
  .register-head { gap: 20px; }
  .register .app-eyebrow { line-height: 44.8px; }
  .register-title { line-height: 61.6px; }
}

/* ── 태블릿 810–1199 ── */
@media (max-width: 1199.98px) {
  .only-tablet { display: inline; }
  .no-tablet { display: none; }

  .app-hero { height: 400px; }
  .app-hero-inner { gap: 60px; }
  .app-hero--register .app-hero-inner { gap: 100px; }
  .app-hero-title { font-size: 36px; line-height: 54px; letter-spacing: -0.72px; }
  .store-button--apple { width: 163px; }
  .store-button--google { width: 176px; }
  .app-tabs { width: 100%; }
  .app-tab { font-size: 24px; line-height: 28.8px; }

  .app-intro { padding: 80px 40px 40px; }
  .app-intro-inner { width: 100%; }
  .app-eyebrow { font-size: 20px; line-height: 26px; letter-spacing: -0.4px; }
  .app-intro-title { font-size: 36px; line-height: 54px; letter-spacing: -0.72px; }
  .app-intro--gray { background: #fbfbfb; }

  .feature, .feature--entrance, .feature--conquer { padding: 80px 40px 60px; }
  .feature--gray { background: #fbfbfb; }
  .feature-inner, .feature--entrance .feature-inner, .feature--review .feature-inner, .feature--special .feature-inner, .feature--conquer .feature-inner { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 40px; width: 100%; }
  .feature-text { flex: none; }
  .feature-media, .feature--entrance .feature-media, .feature--review .feature-media { order: 0; width: 100%; }
  .feature-title { font-size: 26px; line-height: 39px; letter-spacing: -0.52px; }
  .feature-body { font-size: 20px; line-height: 32px; letter-spacing: -0.4px; }
  .feature-note { font-size: 16px; line-height: 24px; letter-spacing: -0.32px; }
  .feature-desc { gap: 10px; }
  .feature--entrance { padding: 50px 40px 60px; }
  .feature--toilet { padding: 100px 40px; }
  .feature--review { padding: 80px 40px; }
  .feature--special { padding: 100px 40px 80px; }
  .feature--conquer { padding: 100px 40px 200px; }
  .feature--conquer .feature-body { line-height: 30px; }

  .register { padding: 100px 40px 84px; }
  .register-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; }
  .register-head { width: 529px; gap: 20px; }
  .register .app-eyebrow { line-height: 28px; }
  .register-title { font-size: 26px; line-height: 36.4px; letter-spacing: -0.52px; }
  .register-items { display: flex; flex-direction: column; align-items: center; gap: 27px; width: 100%; }
  .register-item--form, .register-item--photo { flex-direction: column; justify-content: center; margin: 0; padding: 0; }
  .register-item--form { height: 994px; gap: 20px; }
  .register-item--photo { gap: 0; }
  .register-caption { font-size: 24px; line-height: 38.4px; letter-spacing: -0.48px; }
}

/* ── 모바일 <810 ── */
@media (max-width: 809.98px) {
  .only-tablet { display: none; }
  .no-tablet { display: inline; }
  .only-mobile { display: inline; }
  .no-mobile { display: none; }

  .app-hero { height: 300px; }
  .app-hero-inner { gap: 40px; padding: 0 16px; }
  .app-hero--register .app-hero-inner { gap: 64px; }
  .app-hero-title { font-size: 28px; line-height: 42px; letter-spacing: -0.56px; }
  .app-hero--register .app-hero-title { font-size: 32px; line-height: 48px; letter-spacing: -0.64px; }
  .app-hero--register .app-hero-bg { object-position: 70% 59.7%; }
  .store-button--apple { width: 128px; }
  .store-button--google { width: 138px; }
  .app-tab { height: auto; padding: 20px 0; font-size: 16px; line-height: 19.2px; text-align: center; white-space: normal; }

  .app-intro { padding: 80px 16px 0; }
  .app-intro--gray { padding-bottom: 40px; }
  .app-eyebrow { font-size: 14px; line-height: 18.2px; letter-spacing: -0.28px; }
  .app-intro-title { font-size: 24px; line-height: 36px; letter-spacing: -0.48px; }
  .app-intro--gray .app-intro-title { line-height: 33.6px; }

  .feature, .feature--entrance, .feature--conquer { padding: 60px 16px; }
  .feature--entrance, .feature--toilet, .feature--special { padding: 20px 16px 60px; }
  .feature--review { padding: 40px 16px 100px; }
  .feature--special { padding-bottom: 100px; }
  .feature--conquer { padding: 0 16px 160px; }
  .feature-title { font-size: 22px; line-height: 33px; letter-spacing: -0.44px; }
  .feature--review .feature-title { line-height: 30.8px; }
  .feature-body, .feature--conquer .feature-body { font-size: 16px; line-height: 25.6px; letter-spacing: -0.32px; }
  .feature-note, .feature--conquer .feature-note { font-size: 14px; line-height: 21px; letter-spacing: -0.28px; }
  .feature--toilet .feature-media { height: auto; aspect-ratio: 1.59; }

  .register { padding: 80px 16px 84px; }
  .register-inner { gap: 20px; }
  .register-head { width: 100%; gap: 12px; }
  .register .app-eyebrow { line-height: 19.6px; }
  .register-title { font-size: 22px; line-height: 30.8px; letter-spacing: -0.44px; }
  .register-item { width: 300px; }
  .register-item--form { height: 641.3px; justify-content: flex-start; }
  .register-caption { font-size: 18px; line-height: 27px; letter-spacing: -0.36px; }
}

/* 데스크톱에서만 보이는 줄바꿈 변형 */
@media (min-width: 1200px) {
  .only-desktop { display: inline; }
  .no-desktop { display: none; }
}