@charset "utf-8"; /* ============================================================================ base.css — 모든 페이지의 바탕 ---------------------------------------------------------------------------- · 웹폰트 · 리셋 · 언어별 본문 글꼴 · 전역 타이포 · CMS 편집기(TinyMCE)가 본문에 넣는 마크업(.editor-style · 성구 카드) · 어느 화면에도 속하지 않는 전역 보정과 에러 화면 가장 먼저 로드된다. 여기 있는 것은 뒤에 오는 모든 파일이 덮어쓸 수 있다. ============================================================================ */ @font-face { font-family: 'Jamee-Noori-Nastaleeq'; font-style: normal; font-weight: 400; font-stretch: 100%; src: url(../fonts/Jamee-Noori-Nastaleeq-Regular.ttf) format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; font-display: swap; } /* 웹폰트 — Noto Sans(400/500/700) 는 의 로 받는다 (incAssets.php). 옛 layout.css 는 여기서 @import 로 받았는데, @import 는 이 파일을 다 읽은 뒤에야 글꼴을 받으러 가므로 굵은 글씨가 잠시 합성 볼드로 그려졌다. */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../fonts/roboto-v20-latin-regular.eot'); src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v20-latin-regular.woff') format('woff'), url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); font-display: swap; } /* ── 리셋 ─────────────────────────────────────────────────────────── */ html, body {height:100%; width:100%;} body {letter-spacing:-0.02em; background:var(--paper); color:var(--copy);} body.align-right {direction:rtl;} /* font-size 는 «상속» 으로 둔다. 오래 이 자리에 16px 가 직접 박혀 있었다. 그것은 상속이 아니라 **직접 지정**이라 그릇에 크기를 주고 자식이 물려받는 방식을 원리적으로 막았다 — 화면마다 글자 크기를 다시 적어야 했고, 그래서 font-size 선언이 755개로 불었으며, 되돌리려는 font-size:inherit|revert 가 12곳에 흩어졌다. 뿌리에서 한 번 주고 아래로 흐르게 한다. 그릇에 크기를 주면 이제 안쪽 글자가 따라온다. */ * { margin: 0; padding: 0; list-style: none; font-size: inherit; font-family: var(--font-sans); } html {font-size:100%;} /* 뿌리 16px — rem 토큰이 서는 기준 */ body {font-size:var(--fs-md);} /* 여기서부터 흘러내린다 */ ul > li > a {text-decoration:none;} a {color:var(--copy); text-decoration:none; transition:color var(--t-fast);} em {font-style:normal} table {border-collapse:collapse; width:100%;} button {cursor:pointer; border:none; background:transparent;} button:focus {outline:none;} :focus-visible {outline:2px solid var(--gold); outline-offset:2px;} /* 폼 컨트롤은 border + box-shadow 링을 사용하므로 전역 outline과 겹치지 않게 한다. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; } i {display:inline-block;} .inner {width:1180px; position:relative; margin:0 auto} .inner:after {display:block; content:''; clear:both;} select {box-sizing:border-box; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none;} select::-ms-expand {display:none;} h1,h2,h3,h4,h5,h6 {margin:.5rem 0; letter-spacing:-0.03em; color:var(--ink);} ::placeholder {color:var(--faint);} img {border:0;} ::selection {background:var(--gold-soft); color:var(--ink);} body.lang-chinese *,body.lang-taiwanese * {font-family:'Noto Serif SC','Noto Sans', serif;} body.lang-japanese * {font-family:'Noto Serif JP','Noto Sans', serif;} body.lang-hebrew * {font-family:'Noto Serif Hebrew','Noto Sans', serif;} body.lang-bengali * {font-family:'Noto Sans','Kalpurush','Helvetica','ARIAL', serif;} body.lang-khmer * {font-family:'Noto Sans Khmer','Noto Sans','TAHOMA','Helvetica','ARIAL', serif;} body.lang-hindi * {font-family:'Hind','Noto Sans',sans-serif;} body.lang-burmese * {font-family:'Pyidaungsu','Noto Sans','TAHOMA','ARIAL', serif;} body.lang-thai * {font-family:'Noto Sans Thai','Noto Sans', serif;} body.lang-urdu *,body.lang-punjabi * {font-family:'Jamee-Noori-Nastaleeq','Noto Sans', serif;} body.lang-amharic * {font-family:'Noto Sans Ethiopic','Nyala','TAHOMA', serif;} /* ── 에디터 본문 · 성구 카드 (TinyMCE 가 넣는 마크업) ─────────────────────────────────── */ /* ── 에디터 본문 (editor-style) ─────────────────────────────────────── */ .editor-style h1 {font-size:1.8rem} .editor-style h2 {font-size:var(--fs-xl)} .editor-style h3 {font-size:1.25rem} .editor-style h4 {font-size:1.15rem} .editor-style h5 {font-size:1.05rem} .editor-style h6 {font-size:var(--fs-md)} /* DB 본문 그릇의 바탕 크기. 아래 * {font-size:inherit} 가 안쪽 글자를 여기에 맞추므로 «그릇의 크기가 곧 본문 크기» 다. 영역이 제 크기를 원하면 page/*.css 나 sub.css 에서 덮는다 (뒤에 실리므로 이긴다) — 설교 17px · 성막 소개 15.5px 이 그렇다. */ .editor-style {font-size:var(--fs-md)} .editor-style * {font-size:inherit} .editor-style img {display:block; max-width:100%; height:auto;} .editor-style table {max-width:100%;} .editor-style em {font-style:italic} .editor-style iframe {max-width:100%; max-height:50vw;} /* ── 에디터 성경 구절 카드·모달 (my-custom-*) ─────────────────────── --accent-color·--bg-color 등은 에디터 컨텐츠가 인라인 style 로 넣는 변수다. 기본값만 골드 체계로 바꾼다. 구절 본문은 의도된 세리프. */ .editor-style details.my-custom-modal-details,details.my-custom-modal-details {border:none; background:transparent; margin:0; padding:0; overflow:visible; display:inline-block;} .editor-style details.my-custom-modal-details > *:not(summary),details.my-custom-modal-details > *:not(summary) { border-top:none; padding:0; background-color:rgba(31, 26, 18, .15); } .editor-style .my-custom-modal-btn,.my-custom-modal-btn,.editor-style details.my-custom-modal-details summary.my-custom-modal-btn,details.my-custom-modal-details summary.my-custom-modal-btn {display:inline-flex; align-items:center; justify-content:center; padding:10px 26px; font-size:var(--fs-base); font-weight:700; color:var(--paper); background-color:var(--accent-color, var(--gold)); border:none; border-radius:var(--r-pill); cursor:pointer; transition:background-color var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast), transform var(--t-fast); text-decoration:none; box-shadow:var(--sh-gold); user-select:none; outline:none; list-style:none;} .editor-style .my-custom-modal-btn::-webkit-details-marker,.my-custom-modal-btn::-webkit-details-marker,.editor-style details.my-custom-modal-details summary.my-custom-modal-btn::-webkit-details-marker,details.my-custom-modal-details summary.my-custom-modal-btn::-webkit-details-marker {display:none;} .editor-style .my-custom-modal-btn::before,.my-custom-modal-btn::before,.editor-style details.my-custom-modal-details summary.my-custom-modal-btn::before,details.my-custom-modal-details summary.my-custom-modal-btn::before {display:none;} .editor-style .my-custom-modal-btn:hover,.my-custom-modal-btn:hover,.editor-style details.my-custom-modal-details summary.my-custom-modal-btn:hover,details.my-custom-modal-details summary.my-custom-modal-btn:hover {filter:brightness(.92); box-shadow:var(--sh-lift);} .editor-style .my-custom-modal-btn:active,.my-custom-modal-btn:active,.editor-style details.my-custom-modal-details summary.my-custom-modal-btn:active,details.my-custom-modal-details summary.my-custom-modal-btn:active {transform:scale(.97);} .editor-style .my-custom-scripture-preview,.my-custom-scripture-preview { position:relative; overflow:hidden; font-family:Georgia, 'Times New Roman', serif; font-size:1.02em; line-height:1.75; color:var(--ink); transition:max-height var(--t-base); /* 데스크톱 기본 높이. 모바일 값은 아래 767 블록 (구 768/769 분기를 통합) */ max-height:var(--height-pc, 9.2em); } @media (max-width:767px) { .editor-style .my-custom-scripture-preview,.my-custom-scripture-preview { max-height:var(--height-mobile, 8.2em); } } .editor-style .my-custom-modal-overlay,.my-custom-modal-overlay {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:var(--veil); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:var(--z-toast); opacity:0; transition:opacity var(--t-base); border:none; margin:0; padding:0;} .editor-style details.my-custom-modal-details[open] .my-custom-modal-overlay,details.my-custom-modal-details[open] .my-custom-modal-overlay {display:flex; opacity:1;} .editor-style .my-custom-modal-content,.my-custom-modal-content {background:var(--paper); width:600px; max-width:90%; max-height:80vh; border-radius:var(--r-lg); box-shadow:var(--sh-pop); overflow:hidden; display:flex; flex-direction:column; transform:translateY(-20px); transition:transform var(--t-base); border:none; margin:0; padding:0;} .editor-style details.my-custom-modal-details[open] .my-custom-modal-content,details.my-custom-modal-details[open] .my-custom-modal-content {transform:translateY(0);} .editor-style .my-custom-modal-header,.my-custom-modal-header {display:flex; align-items:center; justify-content:space-between; padding:1.1em 1.4em; border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--paper); z-index:var(--z-base); text-align:left; box-sizing:border-box;} .editor-style .my-custom-modal-category,.my-custom-modal-category {font-size:.78em; letter-spacing:.08em; color:var(--accent-color, var(--gold)); font-weight:700; text-transform:uppercase; font-family:var(--font-sans); margin-bottom:2px; text-align:left;} .editor-style .my-custom-modal-title,.my-custom-modal-title {font-size:1.15em; font-weight:700; color:var(--ink); margin-top:.15em; margin-bottom:0; font-family:var(--font-sans); text-align:left;} .editor-style .my-custom-modal-close,.my-custom-modal-close {font-size:var(--fs-xl); font-weight:400; color:var(--muted); cursor:pointer; transition:color var(--t-fast); line-height:1; user-select:none; padding:5px;} .editor-style .my-custom-modal-close:hover,.my-custom-modal-close:hover {color:var(--ink);} .editor-style .my-custom-modal-body,.my-custom-modal-body {flex:1; overflow-y:auto; max-height:500px; padding:1.4em 1.6em 1.6em 1.6em; font-family:Georgia, 'Times New Roman', serif; font-size:1.05em; line-height:1.85; color:var(--ink); text-align:left; box-sizing:border-box;} .editor-style .my-custom-modal-subcaption,.my-custom-modal-subcaption {font-size:.82em; color:var(--copy-soft); margin:0 0 1.1em 0; font-family:var(--font-sans); font-style:italic; line-height:1.4; text-align:left;} .editor-style .my-custom-modal-verse-num,.my-custom-modal-verse-num {color:var(--accent-color, var(--gold)); font-size:.7em; font-weight:700; margin-right:.18em; vertical-align:super; line-height:0;} .editor-style .my-custom-modal-footer,.my-custom-modal-footer {padding:.9em 1.4em; border-top:1px solid var(--line-soft); text-align:right; position:sticky; bottom:0; background:var(--paper); z-index:var(--z-base); cursor:pointer; user-select:none; color:var(--copy-soft); font-family:var(--font-sans); font-size:var(--fs-base); font-weight:500; transition:color var(--t-fast); box-sizing:border-box;} .editor-style .my-custom-modal-footer:hover,.my-custom-modal-footer:hover {color:var(--ink);} /* 구절 자동 번호 (ul/li) */ .editor-style .my-custom-modal-body ul,.my-custom-modal-body ul,.editor-style .my-custom-scripture-preview ul,.my-custom-scripture-preview ul { list-style-type:none; padding-left:0; margin-left:0; margin-top:.5em; margin-bottom:.5em; counter-reset:bible-verse; } .editor-style .my-custom-modal-body ul li,.my-custom-modal-body ul li,.editor-style .my-custom-scripture-preview ul li,.my-custom-scripture-preview ul li { position:relative; padding-left:0; margin-bottom:.6em; line-height:var(--lh-loose); } .editor-style .my-custom-modal-body ul li::before,.my-custom-modal-body ul li::before,.editor-style .my-custom-scripture-preview ul li::before,.my-custom-scripture-preview ul li::before { counter-increment:bible-verse; content:counter(bible-verse); font-size:.72em; font-weight:700; vertical-align:super; margin-right:5px; color:var(--accent-color, var(--gold)); font-family:var(--font-sans); } /* 구절 카드 */ .editor-style .my-custom-scripture-card,.my-custom-scripture-card { background:var(--bg-color, var(--gold-wash)); border-left:4px solid var(--accent-color, var(--gold)); border-top:1px solid var(--border-color, var(--gold-line)); border-right:1px solid var(--border-color, var(--gold-line)); border-bottom:1px solid var(--border-color, var(--gold-line)); padding:1.1em 1.3em .6em 1.3em; margin-bottom:1.5em; border-radius:var(--r-sm); box-sizing:border-box; text-align:left; } .editor-style .my-custom-scripture-fade,.my-custom-scripture-fade { position:absolute; bottom:0; left:0; width:100%; height:3.6em; background:linear-gradient(to bottom, var(--fade-bg-start, transparent), var(--bg-color, var(--gold-wash))); pointer-events:none; } .editor-style .my-custom-scripture-btn-container,.my-custom-scripture-btn-container { text-align:center; margin-top:.4em; } .editor-style .my-custom-card-title-container,.my-custom-card-title-container { font-size:.82em; letter-spacing:.08em; color:var(--accent-color, var(--gold)); font-weight:700; text-transform:uppercase; margin-bottom:.5em; font-family:var(--font-sans); } .editor-style .my-custom-modal-header-text,.my-custom-modal-header-text { flex:1; text-align:left; } /* ── 전역 보정 ─────────────────────────────────────────────────────────────── */ /* ── 전역 보정 ──────────────────────────────────────────────────────── */ /* Cookiebot 이 나중에 주입하는 자기 CSS 를 이긴다 — !important 필요 */ .CookieDeclarationIntro br {display:none;} .CookieDeclarationIntro br::after {content:" ";} .CookieDeclarationType { padding:1.5rem 1rem; margin:2rem 0 !important; border-top:4px solid var(--ink) !important; } /* 에디터 본문의 인라인 font-size 를 이긴다 — !important 필요 */ .highlight { color:var(--bad); font-size:105% !important; } .pc { display:block; } .mobile { display:none; } @media (max-width:1024px) { .pc { display:none; } .mobile { display:block; } } /* popup.js 가 인라인으로 opacity 를 애니메이션한다 — !important 로 상한 고정 */ .popup-background { opacity:.4 !important; } #A_Wrap { padding-top:0; } .text-ellipsis { width:100%; overflow:hidden; text-wrap:nowrap; text-overflow:ellipsis; } /* ── 에러 페이지 (error_page) ───────────────────────────────────────────────── */ /* ── 에러 페이지 (error_page) ───────────────────────────────────────── */ /* main.css .main-contents .inner > * 의 !important 마진·특이도와 겨룬다 */ .error-page { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin:5rem auto !important; } .error-page h2 { font-size:2rem; font-weight:700; letter-spacing:-.02em; } .error-page img { max-width:40vw; } .error-page button { font-size:1.25rem; margin-top:1.5rem; max-width:100%; padding:.7rem 5rem; background:var(--ink); color:var(--paper); border-radius:var(--r-pill); transition:background-color var(--t-fast); } .error-page button:hover { background:var(--accent); } @media (max-width:767px) { /* 구 600 분기 통합 */ .error-page { flex-direction:column; margin:3rem auto 4rem !important; } .error-page h2 { font-size:var(--fs-xl); text-align:center; } .error-page button { font-size:var(--fs-md); } } /* ── 모션 존중 (prefers-reduced-motion) ────────────────────────────────────── */ /* ── 모션 존중 ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce) { .editor-style .my-custom-modal-btn,.my-custom-modal-btn, .my-custom-scripture-preview,.my-custom-modal-overlay,.my-custom-modal-content, summary,summary::before, .section-followUs .youtube-links img,.section-followUs .blog-area li img, .follow-page .section-followUs .grid-row a, .section-recommend .book-swiper.book-recommend-area .book-list .item img, #notice ul li { transition:none; } }