/* 법구 스크롤 랜딩. 색은 앱(style.css)과 같은 값을 쓴다. 스크린샷과 페이지가 한 몸처럼 보이게. */
:root {
  /* 페이지 전체가 어두운 바탕 하나(밝은 모드 없음). 뒤에는 앱의 배경 그림, 앞에는 밝은 앱 화면 */
  --bg: #16130f;
  --bg-2: rgba(31, 27, 21, .82);
  --card: rgba(36, 32, 26, .78);
  --ink: #efe6d4;
  --ink-2: #c4b69c;
  --line: rgba(237, 228, 211, .13);
  --accent: #e09a4f;
  --accent-ink: #16130f;
  --band: rgba(12, 10, 8, .62);
  --band-ink: #efe6d4;
  --band-ink-2: #c4b69c;
  --shadow: 0 40px 80px -24px rgba(0, 0, 0, .8);
  /* 한글: 송명(Song Myung). 붓으로 쓴 궁서 느낌의 명조. 굵기는 400 하나뿐이라 가짜 굵게를 쓰지 않는다.
     영어: Cormorant Garamond. 글자 키가 작아서 영어 페이지는 크기를 한 단계 키운다. */
  --serif: "Song Myung", "Gungsuh", "궁서", "AppleMyungjo", "Nanum Myeongjo", serif;
  --latin: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --radius: 14px;
  --wrap: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.7;
  word-break: keep-all; overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.35; margin: 0; letter-spacing: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* 버튼: 모서리 하나의 체계 (버튼 999px 알약, 카드·폰은 --radius) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, background-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--ink-2); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* 상단 */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 max(16px, calc((100% - var(--wrap)) / 2));
  background: rgba(22, 19, 15, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 18px; }
.brand img { border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-text { text-decoration: none; padding: 8px 10px; color: var(--ink-2); font-size: 15px; }
.nav-text:hover { color: var(--ink); }
.lang {
  min-width: 44px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: 600 14px var(--sans); cursor: pointer;
}

/* 첫 화면: 왼쪽 글, 오른쪽 폰 */
.hero {
  max-width: var(--wrap); margin: 0 auto; padding: 56px 16px 72px;
  display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 48px;
  min-height: calc(100dvh - 64px);
}
.hero h1 {
  font-size: clamp(50px, 6.8vw, 92px); line-height: 1.16; letter-spacing: -0.01em;
  color: #f6ecd8; text-shadow: 0 2px 28px rgba(0, 0, 0, .55);
}
/* 제목 뒤 어두운 번짐: 배경 그림(달·구름) 위에서도 글이 읽히게 */
.hero-copy { position: relative; }
.hero { overflow-x: clip; }
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -18%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(22, 19, 15, .82), rgba(22, 19, 15, 0));
}
.lede { margin-top: 24px; font-size: 19px; color: var(--ink-2); max-width: 24em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-art { position: relative; display: grid; place-items: center; }


/* 폰 틀: 진짜 앱 스크린샷을 감싼다 */
.phone {
  position: relative; margin: 0; width: min(300px, 78vw);
  padding: 10px; border-radius: 46px; background: #1d1913;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .14);
}
.phone img, .phone video { display: block; border-radius: 36px; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; background: var(--bg-2); }
.phone-tilt-r { rotate: 2deg; }
.phone-tilt-l { rotate: -2deg; }

/* 숫자 띠 */
.facts {
  max-width: var(--wrap); margin: 0 auto; padding: 48px 16px 72px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.facts div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; text-align: center; }
.facts div + div { border-left: 1px solid var(--line); }
.facts strong { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.3; }
.facts span { font-size: 14px; color: var(--ink-2); }

/* 선언 띠: 페이지에서 한 번만 쓰는 어두운 면 */
.manifesto {
  margin: 0 16px; padding: 88px 24px; border-radius: var(--radius);
  background: var(--band); color: var(--band-ink); text-align: center; border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.manifesto h2 { font-size: clamp(30px, 4vw, 44px); }
.manifesto p { margin: 20px auto 0; max-width: 34em; color: var(--band-ink-2); font-size: 18px; }

/* 기능 두 개: 글 + 폰 */
.feature {
  max-width: var(--wrap); margin: 0 auto; padding: 120px 16px 40px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;
}
.feature .phone { justify-self: center; }
.feature-flip .feature-copy { order: 2; }
.feature h2 { font-size: clamp(30px, 3.6vw, 42px); }
.feature-copy p { margin-top: 18px; color: var(--ink-2); font-size: 18px; max-width: 26em; }
.feature-copy .note { margin-top: 14px; font-size: 15px; }

/* 작은 기능 셋: 2 + 1 비대칭 */
.bento {
  max-width: var(--wrap); margin: 0 auto; padding: 120px 16px 0;
  display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 16px;
}
.cell { border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cell h3 { font-size: 24px; }
.cell p { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
.cell-copy { padding: 28px 28px 0; }
.cell-size { grid-row: span 2; display: flex; flex-direction: column; }
.cell-size img { margin: 28px auto 0; width: min(320px, 80%); border-radius: 28px 28px 0 0; box-shadow: var(--shadow); }
.crop-bottom { aspect-ratio: 390 / 420; object-fit: cover; object-position: bottom; }
.cell-listen {
  padding: 32px 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px;
  background: linear-gradient(160deg, #c79a5b, #8a6a45 70%); border-color: transparent; color: #fffaf0;
}
.cell-listen p { color: #fff4e2; }
.cell-dark { display: grid; grid-template-columns: 1fr 150px; align-items: end; background: var(--bg-2); }
.cell-dark .cell-copy { padding-bottom: 28px; }
.crop-top { aspect-ratio: 390 / 520; object-fit: cover; object-position: top; margin: 24px 20px 0 0; border-radius: 22px 22px 0 0; }

/* 게송 한 구절 */
.verse { max-width: 760px; margin: 0 auto; padding: 136px 16px 112px; text-align: center; }
.verse blockquote { margin: 0; }
.verse-main { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); line-height: 1.75; }
.verse-pli { margin-top: 24px; font-family: var(--latin); font-weight: 500; font-style: italic; color: var(--ink-2); font-size: 20px; line-height: 1.6; }
.verse footer { margin-top: 20px; font-size: 14px; color: var(--ink-2); letter-spacing: .08em; }

/* 내려받기 */
.download {
  max-width: var(--wrap); margin: 0 auto 96px; padding: 64px 24px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.download h2 { font-size: clamp(30px, 4vw, 44px); }
.download > p { margin: 16px auto 0; max-width: 30em; color: var(--ink-2); }
.store-row { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.store {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 48px; min-width: 160px; padding: 4px 22px; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; line-height: 1.25;
}
.store-name { font-weight: 700; font-size: 16px; }
.store-state { font-size: 12px; opacity: .8; }
.store[aria-disabled="true"] { background: transparent; color: var(--ink-2); border: 1px dashed var(--ink-2); cursor: default; }

/* 바닥 */
.foot {
  max-width: var(--wrap); margin: 0 auto; padding: 40px 16px 56px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; font-size: 14px; color: var(--ink-2);
}
.foot-brand, .foot-head { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 16px; margin-bottom: 8px; }

/* 글꼴: 한글 본문도 붓글씨 명조로. 버튼·메뉴·바닥글은 읽기 쉬운 고딕 그대로 */
.lede, .manifesto p, .feature-copy p, .cell p, .download > p { font-family: var(--serif); }
.lede { font-size: 20px; }
.feature-copy p, .manifesto p { font-size: 19px; }
.facts strong { font-weight: 400; font-size: 34px; }

/* 영어 페이지: 제목·본문 모두 Cormorant Garamond, 크기 키움 */
html[lang="en"] { --serif: var(--latin); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] .facts strong { font-weight: 600; letter-spacing: -0.005em; line-height: 1.12; }
html[lang="en"] .hero h1 { font-size: clamp(44px, 5vw, 70px); line-height: 1.04; }
html[lang="en"] .feature h2, html[lang="en"] .manifesto h2, html[lang="en"] .download h2 { font-size: clamp(36px, 4.4vw, 54px); }
html[lang="en"] .cell h3 { font-size: 30px; }
html[lang="en"] .lede { font-size: 24px; line-height: 1.45; font-weight: 500; }
html[lang="en"] .feature-copy p, html[lang="en"] .manifesto p, html[lang="en"] .download > p { font-size: 22px; line-height: 1.5; font-weight: 500; }
html[lang="en"] .cell p { font-size: 19px; line-height: 1.5; font-weight: 500; }
html[lang="en"] .verse-main { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.5; font-weight: 500; }
html[lang="en"] .facts strong { font-size: 40px; }
html[lang="en"] .brand { font-size: 22px; font-weight: 600; }

/* 고정 배경: 페이지 전체 뒤에 앱의 배경 그림. 스크롤해도 거의 제자리에 있고(페이지보다 훨씬 느리게 위로 흐름),
   구획이 바뀌면 앱이 품마다 그림을 바꾸듯 다른 장면으로 천천히 바뀐다(landing.js). 벤치마크 scrollbibleapp.com 참고 */
.backdrop {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, #231d16, #16130f 70%);
}
.backdrop .scene {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  height: 128vh; width: auto; max-width: none; aspect-ratio: 1 / 2;
  opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.backdrop .scene.on { opacity: .72; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .backdrop .scene { animation: sink linear both; animation-timeline: scroll(root); }
  }
}
@keyframes sink { from { transform: translateY(5vh); } to { transform: translateY(-9vh); } }
@media (prefers-reduced-motion: reduce) { .backdrop .scene { transition: none; } }

/* 움직임: 첫 화면은 올라오며 나타나고, 아래 구획은 화면에 들어올 때 나타난다. CSS만 쓰고 JS가 없어도 내용은 다 보인다. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-art .phone { animation: rise 1s cubic-bezier(.16, 1, .3, 1) .12s both; }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* 좁은 화면: 전부 한 줄 */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; gap: 40px; text-align: left; }
  .hero-art { padding: 8px 0 16px; }
  .feature { grid-template-columns: 1fr; padding-top: 88px; gap: 40px; }
  .feature-flip .feature-copy { order: 0; }
  .bento { grid-template-columns: 1fr; padding-top: 88px; }
  .cell-size { grid-row: auto; }
  .foot { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav-text { display: none; }
  .facts { grid-template-columns: repeat(2, 1fr); row-gap: 16px; padding-bottom: 56px; }
  .facts div:nth-child(3) { border-left: 0; }
  .manifesto { padding: 64px 20px; }
  .cell-dark { grid-template-columns: 1fr 120px; }
  .verse { padding: 104px 16px 88px; }
  .download { margin: 0 16px 72px; padding: 48px 20px; }
  .store-row .btn, .store { width: 100%; max-width: 320px; }
  .store { align-items: center; }
}

@media (max-width: 560px) {
  html[lang="en"] .hero h1 { font-size: 42px; }
  html[lang="en"] .brand { font-size: 19px; }
  .hero h1 { font-size: 50px; }
}