/*
 * Re:Bible 웹 페이지가 함께 쓰는 바탕.
 *
 * 앱 안 브라우저(iOS SFSafariViewController)로 열리는 것이 첫 쓰임새라, 앱 화면과 이어져 보이게
 * 앱의 색과 글자 크기를 그대로 옮겼다 — `Re-Bible-iOS/Bible/Challenge/View/ChallengeAboutView.swift`.
 */

:root {
  --paper: #F4F3EF;
  --ink: #1B1A18;
  --ink-80: rgba(27, 26, 24, 0.8);
  --ink-45: rgba(27, 26, 24, 0.45);
  --rule: rgba(27, 26, 24, 0.1);
  --voice: #2E5457;
  --voice-soft: #DCE6E4;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1A18;
    --ink: #F4F3EF;
    --ink-80: rgba(244, 243, 239, 0.8);
    --ink-45: rgba(244, 243, 239, 0.5);
    --rule: rgba(244, 243, 239, 0.12);
    --voice: #8FB7B4;
    --voice-soft: rgba(143, 183, 180, 0.16);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* 안내와 버튼은 고딕체. */
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  /* 한국어는 낱말 가운데서 줄이 끊기면 읽기 어렵다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px calc(40px + env(safe-area-inset-bottom, 0px));
}