common-bible/index.html at main · anglican-kr/common-bible · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'sha256-Ql/uJ1Ou2PlS6wibdLtHlsS2PAC1PERYjRj85nr6NqU=' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self' 'sha256-H8hoBBbQZLyCV/84gnOouMYd5d07yzGzrwAXB4enAh0=' 'unsafe-hashes' 'sha256-MhtPZXr7+LpJUY5qtMutB+qWfQtMaPccfe7QXtCcEYc=' https://www.googletagmanager.com; worker-src 'self'; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; media-src 'self'; img-src 'self' data: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com; object-src 'none'; base-uri 'self'">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="공동번역성서 — 대한성공회">
  <meta name="theme-color" content="#faf8f5" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">
  <link rel="canonical" href="https://bible.anglican.kr/">
  <link rel="preload" href="/data/books.json" as="fetch" crossorigin>
  <script src="/js/pre-fetch.js"></script>
  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="공동번역성서">
  <meta property="og:description" content="대한성공회 공동번역성서. 구약·신약 73권 전문을 오프라인에서도 읽을 수 있는 웹 앱.">
  <meta property="og:url" content="https://bible.anglican.kr/">
  <meta property="og:locale" content="ko_KR">
  <meta property="og:image" content="https://bible.anglican.kr/assets/icons/icon-512.png">
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="공동번역성서">
  <meta name="twitter:description" content="대한성공회 공동번역성서. 구약·신약 73권 전문을 오프라인에서도 읽을 수 있는 웹 앱.">
  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "공동번역성서",
    "description": "대한성공회 공동번역성서. 구약·신약 73권 전문을 오프라인에서도 읽을 수 있는 웹 앱.",
    "url": "https://bible.anglican.kr",
    "applicationCategory": "ReligiousApp",
    "operatingSystem": "All",
    "browserRequirements": "Requires JavaScript",
    "offers": { "@type": "Offer", "price": "0" },
    "inLanguage": "ko"
  }
  </script>
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="apple-touch-icon" href="/assets/icons/icon-512-maskable.png">
  <!-- iOS splash screens (apple-touch-startup-image) -->
  <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash/dark-iphone-8.png">
  <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-8plus.png">
  <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-x.png">
  <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash/dark-iphone-xr.png">
  <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-xsmax.png">
  <link rel="apple-touch-startup-image" media="(device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-12mini.png">
  <link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-12.png">
  <link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-12promax.png">
  <link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-14pro.png">
  <link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash/dark-iphone-14promax.png">
  <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash/dark-ipad-mini.png">
  <link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash/dark-ipad-pro-11.png">
  <link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash/dark-ipad-pro-129.png">
  <title>공동번역성서</title>
  <style>
    /* Critical pre-paint styles */
    :root {
      --bg: #faf8f5;
      --bg-card: #ffffff;
      --text: #1a1a2e;
      --text-secondary: #555;
      --accent: #1e3a5f;
      --border: #e0dcd6;
      --radius: 8px;
      --max-width: 720px;
    }
    [data-theme="dark"] {
      --bg: #1a1a2e;
      --bg-card: #252540;
      --text: #e0dcd6;
      --text-secondary: #a0a0a0;
      --accent: #8ab4d8;
      --border: #3a3a55;
    }
    html { background: #1a1a2e; }
    html.launch-done { background: var(--bg); }
    body { margin: 0; background: inherit; color: var(--text); line-height: 1.8; font-family: "Noto Serif KR", "Batang", serif; }

    #app-header {
      position: sticky; top: 0; z-index: 20; background: var(--bg);
      padding: 0.6rem 1rem; max-width: var(--max-width); margin: 0 auto;
    }
    #app { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1rem 1rem; }

    /* Safety overlay before launch-screen markup is parsed */
    html:not(.launch-done) body::before {
      content: ""; position: fixed; inset: 0; z-index: 9998;
      background: #1a1a2e; pointer-events: none;
    }
    #launch-screen {
      position: fixed; inset: 0; z-index: 9999;
      display: flex; align-items: center; justify-content: center;
      background: #1a1a2e;
    }
  </style>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Noto+Serif+KR:wght@400;700&display=swap" media="print" onload="this.media='all'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Noto+Serif+KR:wght@400;700&display=swap">
  </noscript>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <a href="#app" class="skip-link">본문 바로가기</a>
  <div id="a11y-announce" class="sr-only" aria-live="polite" aria-atomic="true"></div>
  <div id="launch-screen" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="35 45 424 581"><path fill="#faf8f5" d="M197 30c4.07.73 7.92 1.88 11.88 3.06 13.35 3.7 26.07 2.29 39.12-2.06q3.69.87 7.31 1.94c12.84 3.43 26 3.26 38.37-2.1C296 30 296 30 299 31l-.52 1.68-2.36 7.7-.81 2.63A102 102 0 0 0 290.62 74v3.68c.17 12.67 2.07 24.89 4.38 37.32l1.3 7.29.39 2.15.37 2.08c4.45 25.17 4.63 60.1-7.06 83.48l1.64-.5c12.38-3.76 24.54-6.76 37.36-8.5l2.67-.4c5.5-.7 11.04-.73 16.58-.79l2.27-.04c12.34-.01 23.93 2.66 35.67 6.23 25.5 7.69 46 6.6 70.9-2.32q3.94-1.38 7.91-2.68l-.59 2.09q-1.22 4.45-2.41 8.91l-.64 2.2c-2.94 11.04-1.9 21.86 1.67 32.58 1.89 6.26 2.26 10.57.1 16.78-4.2 12.22-4.37 23.33-.1 35.57A57 57 0 0 1 465 307l-2-.61c-30.5-9.27-53.77-9.38-84.48-2.1l-2.66.62-2.33.57c-8.36 1.73-16.66 1.76-25.15 1.77h-2.24c-19.47-.03-37.36-3.2-56.14-8.25a738 738 0 0 0 2.57 40.23l1.22 14.08c5.4 61.63 3.44 120.28-4 181.68l-.28 2.2-1.25 10.27a317 317 0 0 0-2.57 37.73l-.01 2.25c0 17.22 1.84 34.07 7.68 50.36.64 2.2.64 2.2-.36 4.2l-2.23-.84-2.96-1.1-2.92-1.09c-5.55-1.87-10.76-2.23-16.58-2.28l-2.43-.03c-5.64.06-9.63 1.14-14.7 3.64-4.1 1.31-7.44-.63-11.18-2.3-11.48-3.28-23.32-1.27-34.16 3l-2.84 1-2-1 .73-1.82c2.65-7.16 4.16-14.29 5.46-21.8l.5-2.93c5.03-30.26.38-60.2-3.22-90.37l-.4-3.35-1.96-16.2c-3-24.52-4.57-48.95-4.61-73.65l-.01-3.92c-.05-31.14 2.68-62.03 5.6-93.01A2156 2156 0 0 0 206 299l-2.29.57-12.72 3.2c-13.87 3.4-27.6 4.67-41.87 4.67H147c-14.08 0-27.3-2.2-40.99-5.44q-4.1-.89-8.19-1.75l-2.98-.67c-22.54-4.6-43.3.89-64.83 7.42l4.19-12.56c2.52-10.87 1.01-21.56-2.22-32.04-1.65-5.76-2.66-10.02-.1-15.59 5.93-13.15 4-27.62-.87-40.78-1-3.03-1-3.03 0-5.03l3.45 1.4c26.87 10.52 48.96 11.32 76.61 3.04 8.66-2.58 16.88-4.88 25.94-5.44l2.09-.13c20.53-1.07 47.22.78 65.91 10.13l-.73-2.18c-11.16-35.75-8.67-71.42-1.45-107.58a117 117 0 0 0-2.19-55.98c-.89-3.17-1.66-6.37-2.44-9.57zm41.57 8.22c-4.76 1.04-9.34 1.1-14.2 1.1h-2.63A80 80 0 0 1 204 37l.8 3.23c6.8 28.2 4.35 53.3-1.08 81.47-5.91 30.89-3.2 63.6 7.28 93.3-5.5-.66-10.67-1.9-16-3.37-24.75-6.68-52.83-11.17-77.85-3.3-3.48 1.08-6.99 2.06-10.5 3.05l-5.52 1.6c-21.26 6.26-42.5 3.17-63.13-3.98l.44 2.64c1.98 12.73 3.54 26.58-2.55 38.55-2.44 4.98 1.13 12.91 2.41 17.95 2.62 10.71 1.53 20.14-.3 30.86l1.63-.33q2.58-.53 5.18-1.03 3.28-.66 6.54-1.44c20.3-4.5 39.82-2.46 59.89 2.17A181 181 0 0 0 210 293c.27 10.25-.59 20.32-1.5 30.51l-.46 5.34q-.6 7-1.23 14l-2.63 30.03c-1.22 13.85-2.3 27.71-2.38 41.62l-.02 2.75c-.27 44.54 4.54 88.15 9.96 132.3 3.28 26.76 3.07 51.88-1.74 78.45l-1 6 2.46-.44c13.25-2.22 23.74-1.83 36.54 2.44 1.83-.52 1.83-.52 3.81-1.37 11.07-4.39 22.76-2.9 34.19-.63a299 299 0 0 0-2.5-18.31c-4.7-29.26-1.09-57.94 2.47-87.15 1.26-10.4 2.45-20.82 3.65-31.23l.7-6.11c5.66-48.62 3.08-97.52-1.64-146.1-1-10.25-1.86-20.52-2.73-30.78l-1.25-14.37-.22-2.47L284 292l2.93 1.02c7.33 2.52 14.54 4.81 22.2 6.17l2.65.48c25.38 4.45 49.5 3.98 74.55-1.81 22.21-5.06 42.5-5.5 64.67.14q3 .54 6 1l-.48-3.47c-1.5-12.14-.9-23.28 2.7-34.98 1.21-5.51.07-9.96-1.78-15.18-3.17-11.11-2.08-24.04-.44-35.37l-3.87.75-2.8.54c-2.44.52-4.82 1.1-7.23 1.73-18.08 4.68-35.25 4.24-53.1-1.02l-5.5-1.57q-4.2-1.18-8.37-2.41l-2.55-.75-2.24-.67c-28.55-7.33-60 1.57-87.34 9.4l1.17-3.75c9.67-31.74 12.42-64.13 5.36-96.7-.88-4.25-1.55-8.52-2.22-12.8l-.37-2.4A167 167 0 0 1 286 83l-.23-3.79c-.44-10.69 1.2-20.54 3.54-30.97l.7-3.11q.3-1.37.64-2.78C291 40 291 40 290 37l-3.33.98c-5.13 1.27-10.1 1.36-15.36 1.33h-2.94c-5.42-.06-10.24-.52-15.5-2-5.57-1.55-8.86-.77-14.3.9"/><path fill="#faf8f5" d="M256.31 43c9.86 2.67 18.73 1.6 28.69 0 1.53 3.07.4 5.33-.37 8.63-5.6 24.13-1.54 48 3.01 71.96 5.39 28.37 1.95 55.58-5.34 83.18-1.04 4.09-2.02 8.02-2.3 12.23l2 2c1.78-.14 1.78-.14 3.95-.7l2.45-.6 2.6-.7 2.57-.69q2.7-.72 5.38-1.47c28.76-7.83 58.18-10.71 87.05-1.84l4.18 1.19q3.45.98 6.91 2.01c17.94 4.91 37.41 1.88 54.91-3.2l-.22 1.7c-1.46 12.63-1.2 23.27 3.22 35.3 1.26 3.79.48 5.1-.87 8.81-3.77 10.38-3.76 20.37-2.13 31.19-3.3 1.65-6.63 0-10.06-.87-5.98-1.47-11.77-2.88-17.94-3.13l-3.09-.16c-9.29-.25-17.89 1.22-26.91 3.16l-10.98 2.3-7.64 1.63c-28.52 6.03-59.53 2.85-87.12-6.36A22 22 0 0 0 281 288l-1 1c.01 2.5.1 4.95.25 7.44l.14 2.5c.73 12.04 1.86 24.05 2.93 36.07 4.02 45.13 4.02 45.13 5.06 63.93l.21 3.8c.95 19.02.44 38-.78 57.01l-.2 3.12a1359 1359 0 0 1-4.11 49.82l-.33 3.28c-.98 9.86-2 19.72-3.16 29.57-2.82 24.48-4.77 50.94.33 75.25.66 3.21.66 3.21.66 7.21l-3-.32c-10.38-.97-19.12-.22-29.14 3-2.4.41-3.68-.14-5.92-1.05-7.57-2.7-14.85-2.81-22.8-2.15l-3.5.3-2.64.22.37-2.07c5.31-30.62 3.14-59.24-.06-89.9-3.81-36.86-7.44-73.44-7.56-110.53l-.02-2.98c-.12-30.45 2.8-60.74 5.6-91.04l1.8-19.57c.7-7.61 1.36-15.27.87-22.91l-1-1c-5.8.48-11.1 1.77-16.69 3.38-21.17 5.82-44.55 8.55-66.37 5.5l-2.8-.39c-9.98-1.46-19.75-3.8-29.54-6.19-18.6-4.45-36.28-1.53-54.6 2.7l.06-1.78c.35-11.3.35-21.45-3.28-32.22-1.2-4.6.23-8.13 1.77-12.5 1.9-6.2 1.78-12.18 1.64-18.62l-.04-3.48L44 216l1.8.37 5.29 1.05 5.6 1.14a101 101 0 0 0 20.44 1.81h3.3A92 92 0 0 0 107 216l3.54-1.09q3.08-.96 6.14-1.98c9.75-2.73 19.15-3.29 29.26-3.24H148c18.07.1 34.5 3.13 51.9 7.9l2.61.73 4.87 1.34c5.4 1.45 5.4 1.45 7.62.34.44-4.68-.27-8.17-1.75-12.62-9.22-28.54-10.3-59.09-4.78-88.4 4.32-23.1 7.27-45.52 2.19-68.85C210 47 210 47 210 43l2.43.48c4.27.62 8.44.75 12.76.77l2.55.01a51 51 0 0 0 16.04-2.65c4.45-1.22 8.25.1 12.53 1.39M247 191c-1.96 9.15-2.31 18-2.26 27.31q.01 3.48-.01 6.96c-.01 7.75.22 15.2 2.27 22.73h2c.88-4.7 1.3-9.36 1.56-14.12l.13-2.28c1.54-29.49 1.54-29.49-2.69-40.6zm-60 63 1 2c1.83.41 1.83.41 4.23.63l2.66.26 2.86.24 2.92.25c14.02 1.15 27.39.18 41.33-1.38l-1-3a118 118 0 0 0-16.56-1.17h-2.39l-4.97-.02-7.53-.03-4.86-.01-2.23-.02c-5.37.02-10.27.91-15.46 2.25m66 0 1 2c1.74.41 1.74.41 4.02.63l2.52.26 2.71.24 2.78.25c14.2 1.22 27.84.13 41.97-1.38l-1-3a118 118 0 0 0-16.56-1.17h-2.39l-4.97-.02-7.53-.03-4.86-.01-2.23-.02c-5.37.02-10.27.91-15.46 2.25m-6 7c-2.18 8.58-2.3 16.8-2.26 25.59q.01 3.6-.01 7.22c-.01 8 .29 15.39 2.27 23.19h2c2.15-19.06 1.95-36.92 0-56z"/></svg>
  </div>
  <header id="app-header">
    <div id="breadcrumb-row">
      <nav id="breadcrumb" aria-label="탐색 경로"></nav>
      <div id="header-actions">
        <div id="search-bar">
          <input id="search-input" type="search" placeholder="검색 (예: 사랑, 창세 1:3)" aria-label="성경 검색" autocomplete="off">
          <button id="search-clear" type="button" aria-label="검색 초기화" hidden>&times;</button>
        </div>
        <div id="settings-anchor"></div>
      </div>
    </div>
    <h1 id="page-title">공동번역성서</h1>
  </header>
  <main id="app" aria-label="성경 본문"></main>
  <noscript>
    <div class="noscript-fallback">
      <h2>공동번역성서</h2>
      <p>대한성공회 공동번역성서 웹 앱입니다. 구약 46권, 신약 27권, 총 73권의 전문을 제공합니다.</p>
      <p>이 앱은 JavaScript가 필요합니다. 브라우저 설정에서 JavaScript를 활성화해 주세요.</p>
    </div>
  </noscript>
  <div id="audio-bar" role="region" aria-label="오디오 플레이어" hidden></div>
  <button id="search-fab" type="button" aria-label="검색">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  </button>
  <div id="install-scrim" aria-hidden="true" hidden></div>
  <div id="install-modal" role="dialog" aria-modal="true" aria-labelledby="install-modal-title" hidden>
    <button id="install-modal-close" type="button" aria-label="닫기">&times;</button>
    <h2 id="install-modal-title">앱으로 설치</h2>
    <div id="install-modal-body"></div>
  </div>
  <div id="search-scrim" aria-hidden="true" hidden></div>
  <div id="search-sheet" role="dialog" aria-label="검색" hidden>
    <div id="search-sheet-handle" aria-hidden="true"><span></span></div>
    <div id="search-sheet-bar">
      <input id="search-sheet-input" type="search" placeholder="검색 (예: 사랑, 창세 1:3)" aria-label="성경 검색" autocomplete="off">
      <button id="search-sheet-clear" type="button" aria-label="검색 초기화" hidden>&times;</button>
    </div>
    <div id="search-sheet-results"></div>
  </div>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-2Q4SRGVNQN"></script>
  <script defer src="/js/gtag-init.js"></script>
  <script defer src="/js/app.js"></script>
</body>
</html>