/* ============================================================
   ylvbible.org — 새 디자인 껍데기 (2026-09-30)
   모든 쪽에 실린다: 윗띠 · 머리말(펼침 메뉴) · 쪽 머리 그림 · 초대 띠 · 바닥글
   클래스는 모두 y2- 로 시작한다 — 기존 site.css 와 부딪치지 않게.
   아래쪽에는 기존 쪽(site.css)을 새 색·새 제목 글꼴로 맞추는 덮개가 있다.
   ============================================================ */
:root{
  --y2-ink:#16140f; --y2-text:#2a2721; --y2-muted:#5b554a; --y2-soft:#7a7366;
  --y2-cream:#f7f1e6; --y2-sand:#efe5d2; --y2-line:#e2d6c0;
  --y2-deep:#1c2a24; --y2-deep-2:#263a31; --y2-foot:#141f1a;
  --y2-terra:#b4532e; --y2-terra-d:#983f1f; --y2-gold:#d9ae62;
  --y2-serif:'Fraunces','Noto Serif KR',Georgia,serif;
  --y2-sans:'Manrope','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;
  --y2-shadow:0 1px 2px rgba(22,20,15,.06),0 10px 30px rgba(22,20,15,.09);
}
.y2-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
body{font-variant-ligatures:no-contextual;font-feature-settings:"calt" 0,"liga" 0}

/* ---------- 윗띠 ---------- */
.y2-top{background:var(--y2-deep);color:#cdd7d1;font:600 .82rem/1.4 var(--y2-sans)}
.y2-top .y2-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px}
.y2-top b{color:#fff;font-weight:700}
.y2-np{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.5em}
.y2-np::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--y2-gold);flex:none}
.y2-np:hover{color:#fff}
.y2-np-short{display:none}
.y2-top-r a{color:#e8eee9;text-decoration:none;margin-left:18px}
.y2-top-r a:hover{color:var(--y2-gold)}

/* ---------- 머리말 ---------- */
.y2-head{position:sticky;top:0;z-index:60;background:rgba(247,241,230,.96);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--y2-line)}
.y2-head .y2-wrap{display:flex;align-items:center;gap:26px;min-height:74px;position:relative}
.y2-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.y2-brand img{width:42px;height:42px;border-radius:50%}
.y2-brand b{display:block;font:800 1.02rem/1.1 var(--y2-sans);color:var(--y2-ink);letter-spacing:.02em}
.y2-brand span span{display:block;font:600 .74rem/1.3 var(--y2-sans);color:var(--y2-soft)}
.y2-nav{display:flex;align-items:center;gap:2px;margin:0 0 0 auto;padding:0;list-style:none}
.y2-nav>li{position:relative;list-style:none}
.y2-nav>li>a,.y2-nav>li>span{display:block;padding:.7em .85em;font:700 .95rem/1 var(--y2-sans);color:var(--y2-ink);text-decoration:none;border-radius:8px;cursor:pointer}
.y2-nav>li>a:hover,.y2-nav>li:hover>span,.y2-nav>li:focus-within>span,.y2-nav>li>a[aria-current]{background:var(--y2-sand)}
.y2-dd>span::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px;opacity:.55}
.y2-ddm{display:none;position:absolute;top:100%;left:0;min-width:310px;background:#fff;border:1px solid var(--y2-line);border-radius:14px;box-shadow:var(--y2-shadow);padding:10px;z-index:70}
.y2-dd:hover .y2-ddm,.y2-dd:focus-within .y2-ddm{display:block}
.y2-ddm a{display:block;padding:.6em .8em;border-radius:8px;text-decoration:none}
.y2-ddm a b{display:block;font:800 .95rem/1.3 var(--y2-sans);color:var(--y2-ink)}
.y2-ddm a small{display:block;color:var(--y2-soft);font:500 .82rem/1.45 var(--y2-sans)}
.y2-ddm a:hover,.y2-ddm a[aria-current]{background:var(--y2-sand)}
.y2-cta{flex:none;display:inline-flex;align-items:center;font:800 .95rem/1 var(--y2-sans);text-decoration:none;color:#fff;background:var(--y2-terra);padding:.85em 1.4em;border-radius:999px}
.y2-cta:hover{background:var(--y2-terra-d)}
.y2-mnav{display:none;margin-left:auto}
.y2-mnav summary{list-style:none;cursor:pointer;font:800 .95rem/1 var(--y2-sans);padding:.65em 1.1em;border:2px solid var(--y2-ink);border-radius:999px;color:var(--y2-ink)}
.y2-mnav summary::-webkit-details-marker{display:none}
.y2-mpanel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--y2-line);box-shadow:var(--y2-shadow);padding:6px 24px 22px;max-height:80vh;overflow:auto}
.y2-mpanel h4{font:800 .76rem/1 var(--y2-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--y2-soft);margin:18px 0 4px}
.y2-mpanel a{display:block;padding:.6em 0;font:700 1rem/1.3 var(--y2-sans);text-decoration:none;color:var(--y2-ink);border-bottom:1px solid var(--y2-sand)}
.y2-mpanel .y2-mcta{margin-top:16px;text-align:center;border:0;border-radius:999px;background:var(--y2-terra);color:#fff;padding:.8em}
@media (max-width:1080px){.y2-nav,.y2-cta{display:none}.y2-mnav{display:block}}
@media (max-width:640px){.y2-np-long{display:none}.y2-np-short{display:inline}.y2-top-r a{margin-left:12px}.y2-head .y2-wrap{min-height:66px}}

/* ---------- 쪽 머리 그림 ---------- */
.y2-heroimg{height:clamp(160px,24vw,320px);background:var(--y2-deep) center/cover no-repeat;position:relative}
.y2-heroimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,26,0) 55%,rgba(20,30,26,.28) 100%)}

/* ---------- 초대 띠 · 바닥글 ---------- */
.y2-eyebrow{font:800 .8rem/1 var(--y2-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--y2-gold);margin:0 0 .8rem}
.y2-invite{background:var(--y2-deep);color:#dbe4de;padding:56px 0}
.y2-invite .y2-wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.y2-invite h2{font-family:var(--y2-serif);font-weight:600;color:#fff;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.25;margin:0;max-width:24em}
html[lang="ko"] .y2-invite h2{font-weight:700;letter-spacing:-.03em}
.y2-invite-btns{display:flex;gap:12px;flex-wrap:wrap}
.y2-btn{display:inline-flex;align-items:center;font:800 .98rem/1 var(--y2-sans);text-decoration:none;padding:.95em 1.5em;border-radius:999px;border:2px solid transparent}
.y2-btn-terra{background:var(--y2-terra);color:#fff}
.y2-btn-terra:hover{background:var(--y2-terra-d)}
.y2-btn-line{border-color:rgba(255,255,255,.7);color:#fff}
.y2-btn-line:hover{background:rgba(255,255,255,.12)}
.y2-foot{background:var(--y2-foot);color:#a9b8af;font:500 .92rem/1.7 var(--y2-sans);padding:60px 0 30px}
.y2-foot-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:30px}
.y2-foot h4{font:800 .78rem/1.2 var(--y2-sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.y2-foot ul{list-style:none;margin:0;padding:0}
.y2-foot li{margin:0 0 .45em}
.y2-foot a{color:#cfd9d3;text-decoration:none}
.y2-foot a:hover{color:var(--y2-gold)}
.y2-org b{display:block;font:800 1.08rem/1.35 var(--y2-sans);color:#fff;margin-bottom:6px}
.y2-np-pill{display:inline-block;margin:12px 0;padding:.4em .9em;border:1px solid rgba(217,174,98,.5);border-radius:999px;color:var(--y2-gold)!important;font-weight:700;font-size:.82rem}
.y2-contact{margin-top:6px}
.y2-credits{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;font-size:.8rem;line-height:1.7;color:#8a9a91}
@media (max-width:1100px){.y2-foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){.y2-foot-grid{grid-template-columns:1fr 1fr}.y2-org{grid-column:1/-1}}

/* ============================================================
   기존 쪽(site.css) 덮개 — 새 색 · 새 제목 글꼴
   구약·신약 갈래 색(--ot-* · --nt-*)은 표시라서 건드리지 않는다.
   ============================================================ */
body.y2-classic{
  --navy:#1c2a24; --navy-2:#263a31; --navy-hi:#2f4a3e;
  --gold:#b4532e; --gold-hi:#cf6a42; --gold-soft:#fbeee6;
  --bg:#fbf7ef; --bg-2:#f3ecdf; --bg-3:#ebe1cf; --line:#e5dac6;
  --ink:#16140f; --ink-2:#2f2b24; --ink-3:#6a6356;
  background:#fbf7ef;
}
body.y2-classic h1,body.y2-classic h2{font-family:var(--y2-serif);font-weight:600;letter-spacing:-.01em}
html[lang="ko"] body.y2-classic h1,html[lang="ko"] body.y2-classic h2{font-weight:700;letter-spacing:-.03em}
body.y2-classic .site-head,body.y2-classic .site-foot{display:none}
@media print{.y2-top,.y2-head,.y2-heroimg,.y2-invite,.y2-foot,.to-top{display:none!important}}

/* 새 디자인 쪽(v2)의 빵부스러기 — site.css 가 없는 쪽에서도 같은 모양 */
body.y2-v2 .crumb{max-width:1200px;margin:0 auto;padding:16px 24px 0;font:600 .86rem/1.5 var(--y2-sans);color:var(--y2-soft)}
body.y2-v2 .crumb a{color:var(--y2-soft);text-decoration:none}
body.y2-v2 .crumb a:hover{color:var(--y2-terra)}
body.y2-v2 .crumb i{font-style:normal;margin:0 .45em;opacity:.6}
body.y2-v2 .crumb span{color:var(--y2-ink)}

/* 기존 쪽의 남색 그라디언트 배너들을 새 짙은 녹색으로 */
body.y2-classic .heb-hero{background:radial-gradient(85% 70% at 50% 0%,rgba(217,174,98,.24) 0%,rgba(217,174,98,0) 62%),linear-gradient(155deg,#2c4337 0%,#1c2a24 50%,#111a16 100%)}
body.y2-classic .hero-main,body.y2-classic .soon-band{background:radial-gradient(80% 120% at 12% 0%,rgba(217,174,98,.2) 0%,rgba(217,174,98,0) 60%),linear-gradient(150deg,#2c4337 0%,#1c2a24 52%,#111a16 100%)}
body.y2-classic .art.navy{background:linear-gradient(145deg,#2c4337 0%,#1c2a24 55%,#111a16 100%)}
body.y2-classic .slab.navy{background:linear-gradient(150deg,#2c4337,#141f1a)}

/* ============================================================
   2026-09-30 사장님: 「웹에서 가운데로만 모이면 안 좋다 · 자동 조절이 돼야지」
   읽는 폭을 화면 폭의 비율로 — 좁으면 꽉 차게, 넓으면 넓게 (최대 약 990px)
   글자도 화면에 따라 조금씩 커진다. 왼쪽 빈자리에는 「이 쪽의 차례」(shell.js)
   ============================================================ */
body.y2-classic{--read:clamp(36rem,64vw,62rem)}
body.y2-classic .read p,body.y2-classic .read li{font-size:clamp(1.02rem,.92rem + .32vw,1.24rem)}
html{scroll-padding-top:96px}
.y2-toc{position:fixed;top:118px;z-index:40;
  right:calc(50vw + var(--read,38rem) / 2 + 20px);
  width:clamp(150px,calc((100vw - var(--read,38rem)) / 2 - 44px),260px);
  max-height:calc(100vh - 150px);overflow:auto;
  font:600 .86rem/1.45 var(--y2-sans);color:var(--y2-soft);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
.y2-toc.show{opacity:1;visibility:visible}
.y2-toc b{display:block;font:800 .74rem/1 var(--y2-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--y2-terra);margin:0 0 10px}
.y2-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--y2-line)}
.y2-toc li{margin:0}
.y2-toc a{display:block;padding:.4em 0 .4em 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--y2-muted);text-decoration:none}
.y2-toc a:hover{color:var(--y2-ink)}
.y2-toc a.on{color:var(--y2-ink);border-left-color:var(--y2-terra);font-weight:800}
@media (max-width:1199px){.y2-toc{display:none}}
/* 아주 넓은 화면에서 줄이 너무 길어지지 않게 — 최대 1000px */
body.y2-classic{--read:min(clamp(36rem,64vw,62rem),1000px)}