/* ============================================================
   ylvbible.org — Bible Homes Inc.
   공통 스타일 · 빌드 과정 없음

   원칙
   1. 굵은 산세리프 · 거의 검정. 흐린 회색 본문 금지
   2. 읽는 것이 아니라 고르는 화면. 카드와 블록 위주
   3. 성경 본문이 나오는 자리에서만 세리프로 조용하게
   ============================================================ */

:root{
  /* 글자 — 대비 최우선 */
  --ink:#0e1116;         /* 제목·본문 기본. 거의 검정 */
  --ink-2:#2b333d;       /* 보조 본문. 이보다 흐리게 쓰지 않는다 */
  --ink-3:#59626e;       /* 아주 작은 라벨 전용 */
  --on-dark:#ffffff;
  --on-dark-2:#d5dce6;

  /* 바탕 */
  --bg:#ffffff;
  --bg-2:#f2f4f8;
  --bg-3:#e7ebf2;

  /* 브랜드 */
  --navy:#14294d;
  --navy-2:#1d3a63;
  --navy-hi:#24406f;
  --gold:#b8862f;
  --gold-hi:#d3a04a;
  --gold-soft:#fdf6e8;

  --line:#dfe4ec;

  /* 성경의 갈래 색 — 꾸미려는 색이 아니라 구약과 신약을 가르는 표시다.
     구약은 감청 계열, 신약은 금색 계열. 배경은 옅게, 마우스를 올리면 진하게. */
  --ot-bg:#e6edf8;   --ot-line:#93aad2;   --ot-ink:#1d3a63;   --ot-on:#14294d;
  --nt-bg:#faf0da;   --nt-line:#cba966;   --nt-ink:#7d5a1c;   --nt-on:#8a6114;
  --tc-bg:#e6f0ec;   --tc-line:#8fbcab;   --tc-ink:#1f5a49;   --tc-on:#1f5a49;

  --radius:18px;
  --radius-lg:26px;
  --shadow:0 2px 10px rgba(16,24,40,0.05);
  --shadow-lift:0 12px 28px -12px rgba(16,24,40,0.28);

  --sans:'Noto Sans KR','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Manrope','Noto Sans KR',system-ui,sans-serif;
  --serif:'Noto Serif KR',Georgia,serif;

  /* 글자 크기 — --fs 는 사용자가 「가」 단추로 바꾸는 값,
     --fs-boost 는 화면이 커질수록 더해지는 값 */
  --fs:1rem;
  --fs-boost:0px;

  /* 전체 폭과 읽는 폭 — 화면 크기에 따라 함께 자란다 */
  --wrap:78rem;
  --read:38rem;
}

/* 넓은 화면에서 여백만 늘어나지 않도록 본문도 같이 키운다 */
@media (min-width:1500px){
  :root{ --wrap:86rem; --read:43rem; --fs-boost:1px; }
}
@media (min-width:1900px){
  :root{ --wrap:94rem; --read:47rem; --fs-boost:2.5px; }
}
@media (min-width:2400px){
  :root{ --wrap:104rem; --read:52rem; --fs-boost:4px; }
}

html[data-theme="dark"]{
  --ink:#f2f5f9;
  --ink-2:#c8d1dd;
  --ink-3:#9aa5b3;
  --bg:#0f1319;
  --bg-2:#161b23;
  --bg-3:#1e2530;
  --navy:#7ea0d8;
  --navy-hi:#9db7e4;
  --gold:#d9ab5c;
  --gold-hi:#e8c184;
  --gold-soft:#241d10;
  --ot-bg:#1a2231;   --ot-line:#2e3a4e;   --ot-ink:#9db7e4;   --ot-on:#7ea0d8;
  --nt-bg:#241d10;   --nt-line:#463a20;   --nt-ink:#e8c184;   --nt-on:#d9ab5c;
  --tc-bg:#152420;   --tc-line:#28413a;   --tc-ink:#8fc9b6;   --tc-on:#6fb59f;
  --line:#2a323d;
  --shadow:0 2px 10px rgba(0,0,0,0.4);
  --shadow-lift:0 12px 28px -12px rgba(0,0,0,0.7);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{
  font-size:calc(var(--fs) + var(--fs-boost));
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* 머리말이 position:sticky 라 그냥 뛰면 목표가 그 밑에 숨는다.
     넉넉히 비켜 준다. 좁은 화면은 메뉴가 한 줄 더 내려가므로 더 크게. */
  scroll-padding-top:5.6rem;
}
@media (max-width:860px){html{scroll-padding-top:8.2rem;}}
body{
  font-family:var(--sans);
  font-weight:400;
  background:var(--bg);
  color:var(--ink);
  line-height:1.68;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;}
::selection{background:var(--gold-hi);color:#0e1116;}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--navy);color:#fff;padding:12px 20px;}
.skip:focus{left:0;}

/* ============================================================
   헤더
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.head-inner{
  max-width:var(--wrap);margin:0 auto;
  padding:0.85rem 1.4rem;
  display:flex;align-items:center;gap:1.4rem;
}
.brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;flex-shrink:0;}
.brand img{width:38px;}
.brand b{
  font-family:var(--display);
  font-size:0.98rem;font-weight:800;letter-spacing:-0.2px;
  color:var(--ink);line-height:1.2;white-space:nowrap;
}
.brand b span{
  display:block;font-family:var(--sans);
  font-size:0.68rem;font-weight:500;color:var(--ink-3);letter-spacing:0;
}

.nav{display:flex;align-items:center;gap:0.2rem;margin-left:0.6rem;}
.nav a{
  text-decoration:none;color:var(--ink);
  font-size:0.95rem;font-weight:600;
  padding:0.5rem 0.85rem;border-radius:10px;
  white-space:nowrap;transition:background .18s;
}
.nav a:hover{background:var(--bg-2);}
.nav a[aria-current="page"]{color:var(--gold);}

.head-right{margin-left:auto;display:flex;align-items:center;gap:0.55rem;}
.pill{
  display:inline-flex;align-items:center;gap:0.4rem;
  text-decoration:none;white-space:nowrap;
  font-size:0.9rem;font-weight:700;
  padding:0.55rem 1.15rem;border-radius:999px;
  border:1.5px solid var(--ink);color:var(--ink);
  background:transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.pill:hover{background:var(--ink);color:var(--bg);}
.pill.plain{border-color:transparent;font-weight:600;padding:0.55rem 0.7rem;}
.pill.plain:hover{background:var(--bg-2);color:var(--ink);}
.iconbtn{
  width:2.2rem;height:2.2rem;flex-shrink:0;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--ink);cursor:pointer;
  font-size:0.85rem;font-weight:700;
  transition:background .18s;
}
.iconbtn:hover{background:var(--bg-2);}

.burger{display:none;}

@media (max-width:1080px){
  .nav a{padding:0.5rem 0.6rem;font-size:0.9rem;}
  .brand b span{display:none;}
}
@media (max-width:900px){
  .head-inner{gap:0.7rem;}
  .nav{
    order:3;width:100%;margin-left:0;
    flex-wrap:nowrap;overflow-x:auto;
    padding-bottom:0.15rem;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none;}
  .head-inner{flex-wrap:wrap;}
  .head-right{margin-left:auto;}
}

/* ============================================================
   레이아웃
   ============================================================ */
main{flex:1;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.4rem;}
.band{padding:4.5rem 0;}
.band.tight{padding:3rem 0;}
.band.grey{background:var(--bg-2);}
.band.navy{background:var(--navy);color:var(--on-dark);}
.band.navy h2,.band.navy h3{color:var(--on-dark);}
.band.navy p{color:var(--on-dark-2);}
html[data-theme="dark"] .band.navy{background:var(--bg-3);}

/* ---------- 표제 ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.25;
  font-weight:800;
}
h1{font-size:clamp(2rem,5vw,3.2rem);}
h2{font-size:clamp(1.55rem,3.4vw,2.35rem);}
h3{font-size:clamp(1.1rem,2vw,1.3rem);font-weight:700;}
h4{font-size:1rem;font-weight:700;}

.eyebrow{
  font-family:var(--display);
  font-size:0.74rem;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:0.6rem;
}
.band.navy .eyebrow{color:var(--gold-hi);}

.head-block{max-width:44rem;margin-bottom:2.4rem;}
.head-block.mid{margin-left:auto;margin-right:auto;text-align:center;}
.head-block p{
  margin-top:0.9rem;
  font-size:1.08rem;color:var(--ink-2);font-weight:500;
}

/* ============================================================
   버튼
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  text-decoration:none;cursor:pointer;border:0;
  font-family:var(--sans);
  font-size:0.98rem;font-weight:700;
  padding:0.8rem 1.7rem;border-radius:999px;
  background:var(--navy);color:#fff;
  transition:transform .18s, background .2s, box-shadow .2s;
}
.btn:hover{background:var(--navy-hi);transform:translateY(-1px);box-shadow:var(--shadow-lift);}
.btn.gold{background:var(--gold);color:#fff;}
.btn.gold:hover{background:var(--gold-hi);}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--bg);}
.btn.on-navy{background:#fff;color:var(--navy);}
.btn.on-navy:hover{background:var(--gold-hi);color:#0e1116;}
html[data-theme="dark"] .btn{color:#0e1116;background:var(--navy);}
html[data-theme="dark"] .btn.gold{color:#0e1116;}
.btn-row{display:flex;gap:0.7rem;flex-wrap:wrap;margin-top:1.6rem;}

.arrow-link{
  display:inline-flex;align-items:center;gap:0.4rem;
  text-decoration:none;font-weight:700;font-size:0.95rem;
  color:var(--ink);
}
.arrow-link:hover{color:var(--gold);}
.arrow-link::after{content:"→";transition:transform .2s;}
.arrow-link:hover::after{transform:translateX(3px);}

/* ============================================================
   히어로 — 좌: 큰 블록 / 우: 의도 카드
   ============================================================ */
.hero{
  display:grid;gap:1rem;
  grid-template-columns:1.35fr 1fr;
  align-items:stretch;
  padding:1.6rem 0 3rem;
}
@media (max-width:940px){ .hero{grid-template-columns:1fr;} }

.hero-main{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(211,160,74,0.30) 0%, rgba(211,160,74,0) 55%),
    linear-gradient(150deg, #1f3a66 0%, #14294d 46%, #0d1c35 100%);
  color:#fff;
  padding:3.2rem 2.6rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:24rem;
}
.hero-main .eyebrow{color:var(--gold-hi);}
.hero-main h1{color:#fff;font-size:clamp(1.9rem,3.8vw,2.9rem);}
.hero-main p{
  margin-top:1rem;max-width:30rem;
  color:#d5dce6;font-size:1.05rem;font-weight:500;
}
.hero-mark{
  position:absolute;right:-2rem;top:-2rem;
  width:15rem;opacity:0.09;pointer-events:none;
}
@media (max-width:600px){ .hero-main{padding:2.2rem 1.5rem;min-height:19rem;} }

/* 의도 카드 — "나는 …하고 싶습니다" */
.intents{display:flex;flex-direction:column;gap:0.62rem;}
.intent{
  display:flex;align-items:center;gap:0.9rem;
  text-decoration:none;color:var(--ink);
  background:var(--bg-2);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:1.05rem 1.2rem;
  flex:1;
  transition:background .2s, border-color .2s, transform .2s;
}
.intent:hover{background:var(--bg);border-color:var(--line);transform:translateX(3px);box-shadow:var(--shadow-lift);}
.intent .ico{
  width:2.5rem;height:2.5rem;flex-shrink:0;
  border-radius:999px;background:var(--navy);
  display:grid;place-items:center;color:#fff;
}
.intent .ico svg{width:1.25rem;height:1.25rem;}
.intent b{font-size:1rem;font-weight:700;line-height:1.35;}
.intent .go{margin-left:auto;color:var(--gold);font-weight:800;flex-shrink:0;}

/* ============================================================
   카드
   ============================================================ */
.grid{display:grid;gap:1rem;}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));}

.card{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.band.grey .card{background:var(--bg);}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--ink);}
.card .ico{
  width:2.8rem;height:2.8rem;margin-bottom:1rem;
  border-radius:12px;background:var(--gold-soft);color:var(--gold);
  display:grid;place-items:center;
}
.card .ico svg{width:1.4rem;height:1.4rem;}
.card h3{margin-bottom:0.5rem;}
.card p{color:var(--ink-2);font-size:0.95rem;font-weight:500;}
.card .arrow-link{margin-top:auto;padding-top:1.1rem;}
.card .btn{margin-top:auto;align-self:stretch;}

/* ---------- 내려받기 카드 (메인 전면) ---------- */
.dl{
  display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2rem 1.8rem 1.8rem;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.dl:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--ink);}
/* 카드 머리의 그림 판 — 화면 캡처 대신 직접 그린 삽화 */
.dl .art{
  margin:-2rem -1.8rem 1.5rem;
  height:7rem;
  display:grid;place-items:center;
  color:#fff;position:relative;overflow:hidden;
}
.dl .art svg{width:auto;height:4.4rem;position:relative;z-index:1;}
.dl .art::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size:18px 18px;opacity:0.55;
}
.art.navy{background:linear-gradient(145deg,#27436f 0%,#14294d 55%,#0d1c35 100%);}
.art.gold{background:linear-gradient(145deg,#d3a04a 0%,#b8862f 55%,#8a621c 100%);}
.art.deep{background:linear-gradient(145deg,#2b3a4a 0%,#18232f 55%,#0e1116 100%);}
/* 갈래마다 색을 달리해 한눈에 구분되게 한다 — 감청·금색과 어울리는 낮은 채도의 자연색 */
.art.teal{background:linear-gradient(145deg,#356b72 0%,#1d4950 55%,#122f34 100%);}
.art.plum{background:linear-gradient(145deg,#5a4070 0%,#3c2a4f 55%,#241733 100%);}
.art.olive{background:linear-gradient(145deg,#586b41 0%,#3b4a2b 55%,#252f19 100%);}
.art.clay{background:linear-gradient(145deg,#7d4a37 0%,#5a3325 55%,#361d15 100%);}
.art .glowdot{
  position:absolute;border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 70%);
  z-index:0;
}

.dl .plat{
  display:inline-flex;align-items:center;gap:0.45rem;
  align-self:flex-start;
  font-family:var(--display);font-size:0.7rem;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--gold);
  background:var(--gold-soft);
  padding:0.35rem 0.7rem;border-radius:999px;
  margin-bottom:1.1rem;
}
.dl h3{font-size:clamp(1.15rem,2.1vw,1.4rem);margin-bottom:0.55rem;}
.dl p{color:var(--ink-2);font-size:0.96rem;font-weight:500;margin-bottom:1.5rem;}
.dl .meta{
  margin-top:0.9rem;font-size:0.8rem;font-weight:600;color:var(--ink-3);
  display:flex;gap:0.5rem;flex-wrap:wrap;
}
.dl .btn{margin-top:auto;width:100%;}

.dl-strip{
  display:grid;gap:0.8rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.dl-mini{
  display:flex;align-items:center;gap:0.85rem;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.2rem;background:var(--bg);
  transition:border-color .2s,background .2s;
}
.dl-mini:hover{border-color:var(--ink);background:var(--bg-2);}
.dl-mini .ico{
  width:2.2rem;height:2.2rem;flex-shrink:0;border-radius:10px;
  background:var(--bg-2);color:var(--ink);display:grid;place-items:center;
}
.dl-mini .ico svg{width:1.2rem;height:1.2rem;}
.dl-mini b{font-size:0.96rem;font-weight:700;}
.dl-mini span{display:block;font-size:0.82rem;font-weight:500;color:var(--ink-3);}
.dl-mini .go{margin-left:auto;color:var(--gold);font-weight:800;}

/* ── 받는 갈래 번호 ──────────────────────────────────────────
   몇 가지가 있는지 한눈에 들어오게 한다. 큰 카드는 그림 위 모서리에,
   작은 줄은 아이콘 앞에 붙인다. */
.dl .art .num{
  position:absolute;z-index:2;top:0.6rem;left:0.8rem;
  width:1.8rem;height:1.8rem;border-radius:999px;
  display:grid;place-items:center;
  font-family:var(--display);font-size:1.02rem;font-weight:900;
  color:#fff;background:rgba(0,0,0,0.34);
  border:1.5px solid rgba(255,255,255,0.72);
  backdrop-filter:blur(2px);
}
.dl-mini .num{
  flex-shrink:0;
  width:1.65rem;height:1.65rem;border-radius:999px;
  display:grid;place-items:center;
  font-family:var(--display);font-size:0.82rem;font-weight:900;
  color:#fff;background:var(--navy);
}
.dl-mini.soon .num{background:var(--bg);color:var(--ink-3);border:1.5px dashed var(--line);}

/* 아직 나오지 않은 것 — 링크가 아니다 (누를 수 없음을 눈으로 알린다) */
.dl-mini.soon{cursor:default;border-style:dashed;background:var(--bg-2);}
.dl-mini.soon:hover{border-color:var(--line);background:var(--bg-2);}
.dl-mini.soon .ico{background:var(--bg);color:var(--ink-3);}
.dl-mini.soon .go{
  color:var(--navy);background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:0.2rem 0.7rem;font-size:0.76rem;font-weight:800;
  white-space:nowrap;
}

/* 색면 큰 블록 */
.slab{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  padding:2.6rem 2.2rem;
  color:#fff;text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:17rem;
  transition:transform .2s;
}
a.slab:hover{transform:translateY(-3px);}
.slab.navy{background:linear-gradient(150deg,#1f3a63,#101f38);}
.slab.gold{background:linear-gradient(150deg,#c99440,#8f6520);}
.slab.ink{background:linear-gradient(150deg,#242c36,#0e1116);}
.slab h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:800;}
.slab p{color:rgba(255,255,255,0.86);margin-top:0.6rem;font-weight:500;}
.slab .eyebrow{color:rgba(255,255,255,0.75);}
.slab .btn{margin-top:1.4rem;align-self:flex-start;}

/* 반반 블록 */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--bg);
}
.split .fill{
  min-height:16rem;display:grid;place-items:center;
  background:linear-gradient(150deg,#1f3a63,#101f38);color:#fff;
  padding:2rem;text-align:center;
}
.split .fill .big{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.2;
}
.split .body{padding:2.4rem 2.2rem;}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }

/* ============================================================
   단계 목록 · 체크 목록
   ============================================================ */
.steps{counter-reset:s;display:grid;gap:1rem;margin-top:1.8rem;}
.step{
  display:flex;gap:1.1rem;align-items:flex-start;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem 1.5rem;
  counter-increment:s;
}
.step::before{
  content:counter(s);
  flex-shrink:0;width:2.3rem;height:2.3rem;
  border-radius:999px;background:var(--navy);color:#fff;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:0.95rem;
}
.step h3{margin-bottom:0.35rem;}
.step p{color:var(--ink-2);font-size:0.95rem;font-weight:500;}

.checks{list-style:none;display:grid;gap:0.85rem;margin-top:1.4rem;}
.checks li{
  position:relative;padding-left:2.3rem;
  font-weight:500;color:var(--ink-2);line-height:1.75;
}
.checks li::before{
  content:"✓";position:absolute;left:0;top:0.2rem;
  width:1.5rem;height:1.5rem;
  border-radius:999px;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-size:0.8rem;font-weight:800;
}
.checks b{color:var(--ink);}

/* ============================================================
   그래픽 — 제품 화면 · 원어 글자 장식 · 패턴
   ============================================================ */

/* ---------- 기기 틀에 넣은 제품 화면 ---------- */
.shot{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 26px 60px -30px rgba(16,24,40,0.55), 0 2px 8px rgba(16,24,40,0.06);
}
html[data-theme="dark"] .shot{box-shadow:0 26px 60px -30px rgba(0,0,0,0.9);}
.shot .bar{
  display:flex;align-items:center;gap:0.4rem;
  padding:0.6rem 0.85rem;
  background:var(--bg-2);border-bottom:1px solid var(--line);
}
.shot .bar i{width:0.55rem;height:0.55rem;border-radius:999px;background:var(--line);display:block;}
.shot .bar span{
  margin-left:0.5rem;font-size:0.72rem;font-weight:600;color:var(--ink-3);
  letter-spacing:0.3px;
}
.shot img{width:100%;display:block;}
/* 긴 화면을 위에서부터 잘라 보여 준다 */
.shot.crop{max-height:30rem;}
.shot.crop img{object-fit:cover;object-position:top center;height:100%;}
.shot.tall.crop{max-height:38rem;}
/* 세부가 보이도록 확대해 자른다 */
.shot.zoom img{width:170%;max-width:none;margin-left:-35%;}
.shot.zoom.left img{margin-left:0;}
.eyebrow .plain-case{text-transform:none;}

.shot-tilt{transform:rotate(-1.4deg);}
.shot-stack{position:relative;}
.shot-stack .back{
  position:absolute;inset:2.2rem -1.6rem -1.6rem 2.2rem;
  border-radius:16px;background:var(--bg-3);
  transform:rotate(2.2deg);z-index:0;
}
.shot-stack .shot{position:relative;z-index:1;}

/* ---------- 화면 + 글 나란히 ---------- */
.showcase{
  display:grid;gap:2.6rem;align-items:center;
  grid-template-columns:1fr 1fr;
}
.showcase.flip .col-text{order:2;}
@media (max-width:900px){
  .showcase{grid-template-columns:1fr;gap:1.8rem;}
  .showcase.flip .col-text{order:0;}
}

/* ---------- 원어 글자 장식 ---------- */
.ornament{
  font-family:'Noto Serif Hebrew','Noto Serif KR',Georgia,serif;
  font-weight:600;
  line-height:1;
  color:var(--gold);
  opacity:0.13;
  pointer-events:none;user-select:none;
  position:absolute;
  white-space:nowrap;
}
.ornament.greek{font-family:Georgia,'Times New Roman',serif;}
.hero-main .ornament{
  color:#fff;opacity:0.10;
  font-size:clamp(4rem,11vw,9rem);
  right:1.4rem;top:0.6rem;
}
.band .ornament{font-size:clamp(5rem,13vw,11rem);}

.wordmark{
  font-family:'Noto Serif Hebrew',Georgia,serif;
  font-size:clamp(2.6rem,6vw,4.4rem);
  font-weight:600;line-height:1.1;
  color:var(--gold);
  direction:rtl;
}
.wordmark.greek{font-family:Georgia,'Times New Roman',serif;direction:ltr;}
.wordmark + .gloss{
  margin-top:0.7rem;font-size:0.92rem;font-weight:600;color:var(--ink-3);
  letter-spacing:0.3px;
}

/* ── 아직 나오지 않았지만 알리는 자리 (아이폰 앱) ─────────────
   2026-08-18 사용자 지시로 신설. 메인에서 눈에 띄어야 하므로
   작은 줄(.dl-mini.soon)이 아니라 한 폭을 쓴다. 한·영 공통이다.
   ⚠️ 링크를 걸지 않는다 — 없는 곳으로 나가는 링크는 심사에서 잡힌다.
   ⚠️ 날짜를 못 박지 않는다. */
.soon-band{
  display:grid;grid-template-columns:auto 1fr;gap:1.7rem;align-items:center;
  margin-top:2.2rem;padding:1.9rem 2rem;
  border-radius:var(--radius-lg);
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(211,160,74,0.22) 0%, rgba(211,160,74,0) 60%),
    linear-gradient(150deg,#20406f 0%,#14294d 52%,#0a1526 100%);
}
.soon-band::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:24px 24px;opacity:0.45;pointer-events:none;
}
.soon-band > *{position:relative;z-index:1;}
.soon-band .mark{
  width:5.4rem;height:5.4rem;border-radius:20px;display:grid;place-items:center;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
}
.soon-band .mark svg{width:2.9rem;height:2.9rem;color:#f0d9a6;}
.soon-band .tag{
  display:inline-block;font-family:var(--display);
  font-size:0.72rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:#0e1116;background:#e6c884;border-radius:999px;
  padding:0.3rem 0.85rem;margin-bottom:0.75rem;
}
.soon-band h3{
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  margin:0 0 0.55rem;color:#fff;line-height:1.35;
}
.soon-band p{
  margin:0;color:var(--on-dark-2);font-weight:500;
  font-size:0.98rem;line-height:1.75;
}
.soon-band .meta{
  margin-top:0.9rem;font-size:0.84rem;font-weight:700;
  color:#e6c884;letter-spacing:0.02em;
}
@media (max-width:640px){
  .soon-band{
    grid-template-columns:1fr;gap:1.2rem;
    text-align:center;justify-items:center;padding:1.7rem 1.3rem;
  }
}

/* ---------- 큰 히브리어 배너 ---------- */
.heb-hero{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(85% 70% at 50% 0%, rgba(211,160,74,0.24) 0%, rgba(211,160,74,0) 62%),
    linear-gradient(155deg,#20406f 0%,#14294d 48%,#0a1526 100%);
  color:#fff;text-align:center;
  /* 2026-08-18 배너가 너무 컸다. 여백과 글자를 함께 줄였다 — 한·영 공통이다. */
  padding:2.9rem 1.6rem 2.4rem;
}
.heb-hero::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:24px 24px;opacity:0.5;pointer-events:none;
}
.heb-hero > *{position:relative;z-index:1;}
.heb-hero.deep{
  background:
    radial-gradient(85% 70% at 50% 0%, rgba(211,160,74,0.20) 0%, rgba(211,160,74,0) 62%),
    linear-gradient(155deg,#39434f 0%,#20262f 48%,#0c0f14 100%);
}
.heb-hero.gold{
  background:
    radial-gradient(85% 70% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(155deg,#d8ad5c 0%,#b8862f 50%,#7d5716 100%);
}
.heb-hero.gold .heb{color:#fff8ea;text-shadow:0 6px 40px rgba(0,0,0,0.28);}
.heb-hero.gold .kicker{color:#fff3dc;}
/* 두 낱말짜리 긴 표현은 조금 작게 */
.heb-hero.two .heb{font-size:clamp(1.9rem,6vw,3.6rem);line-height:1.34;}
.heb-hero.greek .heb{
  font-family:Georgia,'Times New Roman',serif;
  direction:ltr;
  font-size:clamp(2rem,6.6vw,4.2rem);
  letter-spacing:0.01em;
}
.heb-hero.greek.two .heb{font-size:clamp(1.8rem,5.4vw,3.4rem);}
.heb-hero .kicker{
  font-family:var(--display);font-size:0.72rem;font-weight:800;
  letter-spacing:2.2px;text-transform:uppercase;
  color:#e6c884;margin-bottom:1rem;
}
.heb-hero .heb{
  font-family:'Noto Serif Hebrew','Noto Serif KR',serif;
  direction:rtl;font-weight:600;
  font-size:clamp(2.5rem,8.5vw,5rem);
  line-height:1.26;
  color:#f0d9a6;
  text-shadow:0 6px 34px rgba(211,160,74,0.35);
  margin-bottom:0.8rem;
}
.heb-hero .translit{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1rem,2.3vw,1.4rem);
  letter-spacing:0.06em;color:#fff;
}
.heb-hero .gloss{
  margin-top:0.55rem;font-size:0.95rem;font-weight:500;
  color:rgba(255,255,255,0.78);
}
.heb-hero .rule{
  width:4rem;height:2px;background:#d3a04a;
  margin:1.3rem auto 0;border-radius:2px;opacity:.8;
}

/* ---------- 약속 — 큰 말씀 한 자리 ---------- */
.promise{max-width:36rem;margin:0 auto;text-align:center;}
.promise .say{
  font-family:var(--display);
  font-size:clamp(1.35rem,3.3vw,2.05rem);
  line-height:1.55;font-weight:700;
  letter-spacing:-0.01em;
  color:#fff;
}
.promise .say em{
  font-style:normal;color:#f0d9a6;
}
.promise cite{
  display:block;margin-top:1.5rem;font-style:normal;
  font-family:var(--display);font-size:0.78rem;font-weight:800;
  letter-spacing:1.8px;text-transform:uppercase;
  color:#d3a04a;
}
.promise .rule{
  width:4rem;height:2px;background:#d3a04a;
  margin:1.8rem auto 0;border-radius:2px;opacity:.75;
}
.band.grey .promise .say{color:var(--ink);}
.band.grey .promise .say em{color:var(--gold);}
.band.grey .promise cite{color:var(--ink-3);}

/* ---------- 낱말 분해 ---------- */
.word-study{
  display:grid;gap:1rem;margin:2.2rem 0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.word-study .w{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem;background:var(--bg);text-align:center;
}
.word-study .w .big{
  font-family:'Noto Serif Hebrew',Georgia,serif;
  direction:rtl;font-size:clamp(2.4rem,6vw,3.4rem);font-weight:600;
  color:var(--gold);line-height:1.2;
}
.word-study .w.greek .big{
  font-family:Georgia,'Times New Roman',serif;direction:ltr;
  font-size:clamp(1.7rem,4.4vw,2.4rem);
  white-space:nowrap;
}
.word-study .w.wide{grid-column:1 / -1;}
.word-study .w .rom{
  margin-top:0.5rem;font-family:var(--display);font-weight:800;
  font-size:0.98rem;letter-spacing:0.04em;color:var(--ink);
}
.word-study .w .mean{
  margin-top:0.6rem;font-size:0.92rem;font-weight:500;
  color:var(--ink-2);line-height:1.65;
}
.word-study .w .root{
  display:inline-block;margin-top:0.9rem;
  font-size:0.76rem;font-weight:700;letter-spacing:0.4px;
  color:var(--gold);background:var(--gold-soft);
  padding:0.3rem 0.7rem;border-radius:999px;
}

/* 원어 낱말 칩 — 배우기 구역 장식 겸 안내 */
.word-chips{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.6rem;}
.chip{
  display:inline-flex;align-items:baseline;gap:0.5rem;
  border:1px solid var(--line);border-radius:999px;
  padding:0.5rem 1rem;background:var(--bg);
  font-size:0.9rem;font-weight:600;color:var(--ink-2);
}
.chip b{
  font-family:'Noto Serif Hebrew',Georgia,serif;
  font-size:1.15rem;font-weight:600;color:var(--gold);
}
.chip.greek b{font-family:Georgia,'Times New Roman',serif;}

/* ---------- 구역 배경 표정 ---------- */
.band.figured{position:relative;overflow:hidden;}
.band.figured > .wrap{position:relative;z-index:1;}
.band.glow{
  background:
    radial-gradient(90% 60% at 10% 0%, rgba(184,134,47,0.10) 0%, rgba(184,134,47,0) 60%),
    radial-gradient(70% 60% at 92% 100%, rgba(20,41,77,0.09) 0%, rgba(20,41,77,0) 62%),
    var(--bg);
}
html[data-theme="dark"] .band.glow{
  background:
    radial-gradient(90% 60% at 10% 0%, rgba(217,171,92,0.10) 0%, rgba(217,171,92,0) 60%),
    var(--bg);
}
.band.navy.figured::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:0.6;
}

/* 큰 아이콘 */
.card .ico.lg,.ico.lg{
  width:3.4rem;height:3.4rem;border-radius:16px;
  background:var(--navy);color:#fff;
}
.card .ico.lg svg,.ico.lg svg{width:1.7rem;height:1.7rem;}
.ico.lg.gold{background:var(--gold);}
html[data-theme="dark"] .ico.lg{color:#0e1116;}

/* ============================================================
   숫자 띠
   ============================================================ */
.stats{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));text-align:center;}
.stat b{
  display:block;font-family:var(--display);
  font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;
  color:var(--gold-hi);line-height:1.1;
}
.band.navy .stat span{color:var(--on-dark-2);}
.stat span{display:block;margin-top:0.4rem;font-size:0.88rem;font-weight:600;color:var(--ink-2);}

/* ============================================================
   읽는 화면 — 성경 본문이 나오는 자리
   ============================================================ */
.read{max-width:var(--read);margin:0 auto;padding:0 1.4rem;}
.read h2{margin:2.8rem 0 1rem;}
.read h3{margin:2rem 0 0.6rem;}
.read p{
  margin:0 0 1.2rem;
  font-size:1.06rem;line-height:1.85;
  color:var(--ink);font-weight:400;
}
.read .lede{font-size:1.18rem;font-weight:500;color:var(--ink);margin-bottom:1.8rem;}
.read ul,.read ol{margin:0 0 1.4rem 1.3rem;}
.read li{margin-bottom:0.6rem;line-height:1.8;}
.read strong{font-weight:700;color:var(--ink);}
.read a{color:var(--gold);font-weight:600;text-underline-offset:3px;}

/* 글 속의 성경 인용.
   2026-08-19 — 세리프(Noto Serif KR 400)를 쓰다가 획이 얇아 흐렸다.
   성경 본문 쪽과 똑같이 Noto Sans KR 500 으로 맞춘다. 인용이라는 표시는
   왼쪽 금색 선과 바탕색이 맡는다. */
.scripture{
  font-family:var(--sans);
  margin:2.2rem 0;padding:1.7rem 1.8rem;
  background:var(--bg-2);border-radius:var(--radius);
  border-left:4px solid var(--gold);
}
.scripture p{
  font-family:var(--sans);
  font-size:1.08rem;line-height:1.75;color:var(--ink);font-weight:500;
  margin:0 0 0.6rem;
}
.scripture p:last-of-type{margin-bottom:0;}
.scripture cite{
  display:block;margin-top:0.9rem;font-style:normal;
  font-family:var(--sans);font-size:0.82rem;font-weight:700;
  letter-spacing:0.3px;color:var(--ink-3);
}
.scripture.plain{background:transparent;border-left:0;padding:0;}

.pull{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,2.8vw,1.75rem);line-height:1.4;
  color:var(--ink);margin:2.6rem 0;
  padding-left:1.2rem;border-left:4px solid var(--gold);
}

.note{
  margin:2rem 0;padding:1.2rem 1.4rem;
  border-radius:var(--radius);background:var(--bg-2);
  font-size:0.96rem;font-weight:500;color:var(--ink-2);
}
.note b{color:var(--ink);}
.note.urgent{background:var(--gold-soft);border:1px solid var(--gold);}
html[data-theme="dark"] .note.urgent{border-color:var(--gold);}
.note a{color:var(--gold);font-weight:700;}

/* ============================================================
   빵부스러기 · 페이저
   ============================================================ */
.crumb{
  max-width:var(--wrap);margin:0 auto;padding:1.1rem 1.4rem 0;
  font-size:0.82rem;font-weight:600;color:var(--ink-3);
  display:flex;gap:0.45rem;flex-wrap:wrap;
}
.crumb a{text-decoration:none;color:var(--ink-3);}
.crumb a:hover{color:var(--gold);}
.crumb i{font-style:normal;opacity:0.5;}

.pager{
  display:grid;gap:0.8rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:3rem;
}
.pager a{
  text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.3rem;transition:border-color .2s,background .2s;
}
.pager a:hover{border-color:var(--ink);background:var(--bg-2);}
.pager span{
  display:block;font-size:0.72rem;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--gold);margin-bottom:0.3rem;
}
.pager b{font-size:1rem;font-weight:700;}

/* ============================================================
   표
   ============================================================ */
.table-scroll{overflow-x:auto;margin:2rem 0;}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:0.94rem;}
th,td{padding:0.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-weight:800;font-size:0.78rem;letter-spacing:0.8px;text-transform:uppercase;color:var(--ink-3);}
td{font-weight:500;color:var(--ink-2);}
td strong{color:var(--ink);}

/* ============================================================
   푸터
   ============================================================ */
.site-foot{
  margin-top:auto;background:var(--navy);color:var(--on-dark-2);
  padding:3.6rem 1.4rem 2.4rem;font-size:0.92rem;
}
html[data-theme="dark"] .site-foot{background:var(--bg-2);}
.foot-inner{max-width:var(--wrap);margin:0 auto;}
.foot-cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-bottom:2.8rem;}
.foot-cols h4{font-size:0.76rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-hi);margin-bottom:0.9rem;}
.foot-cols ul{list-style:none;}
.foot-cols li{margin-bottom:0.5rem;}
.foot-cols a{text-decoration:none;color:var(--on-dark-2);font-weight:500;}
.foot-cols a:hover{color:#fff;text-decoration:underline;}
html[data-theme="dark"] .foot-cols a{color:var(--ink-2);}
html[data-theme="dark"] .foot-cols a:hover{color:var(--ink);}

.org{padding-top:1.9rem;border-top:1px solid rgba(255,255,255,0.16);line-height:1.8;}
html[data-theme="dark"] .org{border-top-color:var(--line);}
.org b{display:block;font-family:var(--display);font-size:0.98rem;font-weight:800;color:#fff;margin-bottom:0.25rem;}
html[data-theme="dark"] .org b{color:var(--ink);}
.org .status{color:#fff;font-weight:600;}
html[data-theme="dark"] .org .status{color:var(--ink);}
.org a{color:var(--gold-hi);font-weight:600;}
.credits{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,0.12);font-size:0.78rem;line-height:1.75;color:rgba(255,255,255,0.66);}
html[data-theme="dark"] .credits{border-top-color:var(--line);color:var(--ink-3);}

/* ============================================================
   언어 관문
   ============================================================ */
.gate{flex:1;display:grid;place-items:center;text-align:center;padding:4rem 1.5rem;}
.gate img{width:clamp(88px,12vw,116px);margin:0 auto 1.8rem;}
.gate p{color:var(--ink-2);font-weight:500;margin:0.8rem 0 2.2rem;}


/* ============================================================
   성경 읽기 — /{lang}/bible/…
   66권 차례 · 장 목록 · 장 본문
   ============================================================ */

/* ── 닻 메뉴 — 긴 쪽 맨 위에 놓는다 ── */
.jump{
  display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center;
  margin:0 0 2rem;padding:0.9rem 1rem;
  border-radius:var(--radius);border:1.5px solid var(--line);
  background:var(--bg-2);
}
.jump b{
  font-family:var(--display);font-size:0.8rem;font-weight:800;
  letter-spacing:0.06em;color:var(--ink-3);margin-right:0.3rem;
}
.jump a{
  display:inline-block;padding:0.36rem 0.75rem;border-radius:999px;
  border:1.5px solid var(--line);background:var(--bg);
  font-size:0.88rem;font-weight:700;color:var(--ink);text-decoration:none;
  transition:background 0.12s,color 0.12s,border-color 0.12s;
}
.jump a:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
html[data-theme="dark"] .jump a:hover{color:#0f1319;}

/* ── 맨 위로 ── */
.to-top{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:50;
  display:none;align-items:center;gap:0.45rem;
  padding:0.72rem 1.1rem;border-radius:999px;
  border:2px solid var(--navy);background:var(--navy);color:#fff;
  font-family:var(--display);font-size:0.92rem;font-weight:800;
  text-decoration:none;cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(16,24,40,0.55);
  transition:transform 0.14s,box-shadow 0.14s;
}
.to-top.show{display:inline-flex;}
.to-top:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(16,24,40,0.6);}
.to-top svg{width:1.05rem;height:1.05rem;}
html[data-theme="dark"] .to-top{background:var(--navy);border-color:var(--navy);color:#0f1319;}
@media (max-width:560px){
  .to-top{right:0.9rem;bottom:0.9rem;padding:0.66rem 0.95rem;font-size:0.86rem;}
}

/* ── 오래 비어 있던 클래스 넷 ──
   HTML 에는 쓰이는데 CSS 에 규칙이 없었다. `_source/_css점검.mjs` 가 찾아냈다. */

/* 채운 단추 — 지금까지 그냥 `.btn` 으로만 보이고 있었다 */
.btn.solid{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn.solid:hover{background:var(--navy-hi);border-color:var(--navy-hi);}
html[data-theme="dark"] .btn.solid{color:#0f1319;}

/* 푸터의 가운뎃점 구분 */
.sep{color:var(--ink-3);}

/* 글 옆에 화면 사진을 세우는 칸 */
.col-shot{min-width:0;}
.col-shot .shot{margin:0;}

/* 「표를 옆으로 밀어 보세요」 — 좁은 화면에서만 뜻이 있다 */
.scroll-cue{
  margin:0.6rem 0 0.4rem;text-align:center;
  font-size:0.84rem;font-weight:600;color:var(--ink-3);
}
@media (min-width:820px){.scroll-cue{display:none;}}

/* ============================================================
   양피지 — 우리 본문을 얹은 그림
   그림 파일이 아니라 CSS·SVG 다. 글이 진짜 글이라 검색엔진이 읽고,
   무게는 2 KB 아래이며, 어떤 화면에서도 안 깨진다.
   ============================================================ */
.parch{
  --tilt:0deg;
  position:relative;margin:0;padding:0;
  transform:rotate(var(--tilt));
  filter:drop-shadow(0 18px 28px rgba(48,32,10,0.28));
}
.parch-in{
  position:relative;overflow:hidden;
  padding:clamp(1.6rem,4vw,2.8rem) clamp(1.4rem,4vw,2.6rem);
  /* 낡은 종이빛 — 가운데는 밝고 가장자리로 갈수록 그을린다 */
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,252,240,0.95) 0%, rgba(255,252,240,0) 55%),
    radial-gradient(80% 70% at 85% 85%, rgba(150,110,55,0.18) 0%, rgba(150,110,55,0) 60%),
    linear-gradient(160deg,#f6ead0 0%,#efdfbe 42%,#e6d2a9 100%);
  /* 가장자리를 톱니처럼 뜯어 낸 모양 */
  clip-path:polygon(
    0.6% 2%, 8% 0.5%, 22% 1.8%, 38% 0.4%, 54% 1.9%, 70% 0.6%, 86% 1.7%, 99.4% 0.8%,
    98.6% 14%, 99.5% 30%, 98.4% 46%, 99.6% 62%, 98.5% 78%, 99.4% 92%,
    88% 99.3%, 72% 98.2%, 56% 99.5%, 40% 98.4%, 24% 99.6%, 10% 98.5%, 0.5% 99.2%,
    1.4% 84%, 0.4% 68%, 1.6% 52%, 0.5% 36%, 1.5% 20%
  );
}
/* 종이 결 */
.parch-in::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:multiply;opacity:0.5;
}
/* 세로로 지나가는 옛 접힌 자국 */
.parch-in::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(120,86,40,0) 0%, rgba(120,86,40,0.09) 26%, rgba(120,86,40,0) 27%,
    rgba(120,86,40,0) 72%, rgba(120,86,40,0.07) 73%, rgba(120,86,40,0) 74%);
}
.parch .src,
.parch .tr,
.parch figcaption{position:relative;z-index:1;}

/* 원문 — 잉크빛 */
.parch .src{
  font-family:'Noto Serif Hebrew',Georgia,serif;
  font-size:clamp(1.5rem,4.4vw,2.5rem);
  font-weight:600;line-height:1.75;
  color:#3b2a12;
  margin:0 0 1.1rem;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.parch.greek .src{font-family:Georgia,'Times New Roman',serif;font-style:italic;}
/* 우리 번역 */
.parch .tr{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(0.98rem,2.1vw,1.12rem);line-height:1.75;
  color:#4a3720;
  margin:0;
}
.parch figcaption{
  margin-top:1.1rem;padding-top:0.8rem;
  border-top:1px solid rgba(120,86,40,0.28);
  font-family:var(--display);font-size:0.82rem;font-weight:800;
  letter-spacing:0.06em;
}
.parch figcaption a{color:#7a5a24;text-decoration:none;}
.parch figcaption a:hover{color:#3b2a12;text-decoration:underline;}
.parch.sm .src{font-size:clamp(1.2rem,3vw,1.7rem);}
.parch.sm .parch-in{padding:1.3rem 1.4rem;}

/* 어두운 판에서도 양피지는 양피지다 — 다만 눈부시지 않게 낮춘다 */
html[data-theme="dark"] .parch-in{filter:brightness(0.82) saturate(0.92);}
html[data-theme="dark"] .parch{filter:drop-shadow(0 18px 28px rgba(0,0,0,0.55));}

/* 두 장을 겹쳐 놓는 자리 */
.parch-pair{
  display:grid;gap:clamp(1.4rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  align-items:start;
}
@media print{
  .parch-in::before,.parch-in::after{display:none;}
  .parch{filter:none;transform:none;}
  .parch-in{background:none;border:0.4pt solid #999;clip-path:none;}
}

/* ── 성경해설 목록 ──
   ⚠️ 2026-08-19: 이 규칙 덩어리를 한 번 통째로 날린 적이 있다.
   HTML 에는 `.st-group`·`.study-card` 가 그대로 있는데 CSS 만 없어서 밋밋해졌다.
   묶음 상자에는 배경을 두지 않는다 — 색은 카드가 입는다. */
.st-group{margin:0 0 3rem;}
.st-group h2{
  display:flex;align-items:center;gap:0.6rem;
  font-family:var(--display);font-size:1.14rem;font-weight:800;
  margin:0 0 0.4rem;
}
.st-group h2::before{content:"";width:0.9rem;height:0.9rem;border-radius:4px;flex:0 0 auto;}
.st-group.ot h2{color:var(--ot-ink);} .st-group.ot h2::before{background:var(--ot-on);}
.st-group.nt h2{color:var(--nt-ink);} .st-group.nt h2::before{background:var(--nt-on);}
.st-group.tc h2{color:var(--tc-ink);} .st-group.tc h2::before{background:var(--tc-on);}
.st-group > p{color:var(--ink-2);font-weight:500;margin:0 0 1.3rem;}
.st-group .grid{margin:0;}

.study-card{
  position:relative;padding:1.4rem 2.8rem 1.4rem 1.4rem;
  border-width:2px;border-style:solid;
}
.st-group.ot .study-card{background:var(--ot-bg);border-color:var(--ot-line);}
.st-group.nt .study-card{background:var(--nt-bg);border-color:var(--nt-line);}
.st-group.tc .study-card{background:var(--tc-bg);border-color:var(--tc-line);}

/* 아이콘 — 묶음 색으로 테두리를 두른 동그란 자리 */
.study-card .ico{
  width:2.5rem;height:2.5rem;margin-bottom:0.9rem;
  border-radius:12px;border:2px solid;
  background:var(--bg);
  display:grid;place-items:center;
}
.study-card .ico svg{width:1.25rem;height:1.25rem;}
.st-group.ot .study-card .ico{border-color:var(--ot-on);color:var(--ot-on);}
.st-group.nt .study-card .ico{border-color:var(--nt-on);color:var(--nt-on);}
.st-group.tc .study-card .ico{border-color:var(--tc-on);color:var(--tc-on);}

.study-card h3{font-size:1.06rem;line-height:1.45;margin:0 0 0.5rem;}
.study-card p{margin:0;font-size:0.94rem;}
.st-group.ot .study-card h3{color:var(--ot-ink);}
.st-group.nt .study-card h3{color:var(--nt-ink);}
.st-group.tc .study-card h3{color:var(--tc-ink);}
.study-card .go{
  position:absolute;right:1.2rem;top:1.5rem;
  font-weight:800;transition:transform 0.14s;
}
.st-group.ot .study-card .go{color:var(--ot-on);}
.st-group.nt .study-card .go{color:var(--nt-on);}
.st-group.tc .study-card .go{color:var(--tc-on);}

/* 마우스를 올리면 묶음 색으로 꽉 찬다 — 66권 단추와 같은 방식 */
.st-group.ot a.study-card:hover{background:var(--ot-on);border-color:var(--ot-on);}
.st-group.nt a.study-card:hover{background:var(--nt-on);border-color:var(--nt-on);}
.st-group.tc a.study-card:hover{background:var(--tc-on);border-color:var(--tc-on);}
.st-group a.study-card:hover h3,
.st-group a.study-card:hover p,
.st-group a.study-card:hover .go{color:#fff;}
.st-group a.study-card:hover .go{transform:translateX(3px);}
.st-group a.study-card:hover .ico{background:transparent;border-color:rgba(255,255,255,0.85);color:#fff;}
html[data-theme="dark"] .st-group a.study-card:hover h3,
html[data-theme="dark"] .st-group a.study-card:hover p,
html[data-theme="dark"] .st-group a.study-card:hover .go{color:#0f1319;}
html[data-theme="dark"] .st-group a.study-card:hover .ico{border-color:rgba(15,19,25,0.7);color:#0f1319;}

/* 구약·신약 눈썹 표시 */
.eyebrow.tag-ot{color:var(--ot-ink);}
.eyebrow.tag-nt{color:var(--nt-ink);}
.eyebrow.tag-ot a,.eyebrow.tag-nt a{color:inherit;}

/* ============================================================
   1년 1독 읽기표 — /{lang}/read/
   ⛔ 날짜를 쓰지 않는다. 번호만 쓴다.
   ============================================================ */

/* 하루에 몇 줄 → 한 해 몇 독 */
.speeds{display:grid;gap:0.9rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));}
.sp{
  padding:1.3rem 1.4rem;border-radius:var(--radius);
  border:2px solid var(--ot-line);background:var(--ot-bg);
}
.sp:nth-child(2){border-color:var(--nt-line);background:var(--nt-bg);}
.sp:nth-child(3){border-color:var(--tc-line);background:var(--tc-bg);}
.sp .a{font-size:1.02rem;font-weight:600;color:var(--ink-2);margin:0;}
.sp .b{font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--ink);margin:0.25rem 0 0.4rem;}
.sp .c{font-size:0.88rem;font-weight:600;color:var(--ink-3);margin:0;}
.sp:nth-child(1) .b{color:var(--ot-ink);}
.sp:nth-child(2) .b{color:var(--nt-ink);}
.sp:nth-child(3) .b{color:var(--tc-ink);}

/* 하루 쪽 — 세 번 앉는 자리 */
.sit{margin:0 0 1.8rem;}
.sit h2{
  display:flex;align-items:center;gap:0.6rem;
  font-family:var(--display);font-size:1.02rem;font-weight:800;
  letter-spacing:0.04em;margin:0 0 0.8rem;color:var(--ink-3);
}
.sit h2::before{content:"";width:0.9rem;height:0.9rem;border-radius:4px;flex:0 0 auto;}
.sit.morning h2{color:var(--ot-ink);} .sit.morning h2::before{background:var(--ot-on);}
.sit.midday  h2{color:var(--nt-ink);} .sit.midday  h2::before{background:var(--nt-on);}
.sit.evening h2{color:var(--tc-ink);} .sit.evening h2::before{background:var(--tc-on);}

.tk-list{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem;}
.tk-list li{
  display:grid;gap:0.2rem 1rem;align-items:baseline;
  grid-template-columns:7.5rem 1fr auto;
  padding:0.8rem 1rem;border-radius:12px;
  border:2px solid var(--line);background:var(--bg-2);
}
.sit.morning .tk-list li{border-color:var(--ot-line);background:var(--ot-bg);}
.sit.midday  .tk-list li{border-color:var(--nt-line);background:var(--nt-bg);}
.sit.evening .tk-list li{border-color:var(--tc-line);background:var(--tc-bg);}
.tk-list .tk{font-family:var(--display);font-weight:800;font-size:0.9rem;color:var(--ink-3);}
.tk-list .pg{font-weight:600;font-size:1.04rem;color:var(--ink);}
.tk-list .pg a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px;}
.tk-list .pg a:hover{color:var(--gold);}
.tk-list .vc{font-size:0.82rem;font-weight:600;color:var(--ink-3);white-space:nowrap;}
.tk-list.shape li{grid-template-columns:7.5rem 1fr;}

/* 한 해 표 — 365줄. 자바스크립트 없이 다 보인다 */
.year{
  list-style:none;margin:0;padding:0;display:grid;gap:0.35rem;
  grid-template-columns:repeat(auto-fill,minmax(23rem,1fr));
}
.year a{
  display:grid;gap:0.9rem;align-items:baseline;
  grid-template-columns:2.6rem 1fr;
  padding:0.6rem 0.85rem;border-radius:10px;
  border:1.5px solid var(--line);background:var(--bg);
  text-decoration:none;
  transition:background 0.12s,border-color 0.12s,transform 0.12s;
}
.year a:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-1px);}
.year b{
  font-family:var(--display);font-weight:800;font-size:0.95rem;
  color:var(--gold);text-align:right;
}
.year span{font-size:0.86rem;font-weight:600;color:var(--ink-2);line-height:1.5;}
.year a:hover b{color:var(--gold-hi);}
.year a:hover span{color:#fff;}
html[data-theme="dark"] .year a:hover span{color:#0f1319;}

@media (max-width:560px){
  .tk-list li{grid-template-columns:1fr auto;}
  .tk-list .tk{grid-column:1 / -1;}
  .year{grid-template-columns:1fr;}
}

/* ── 첫 화면의 66권 띠 ── */
.bible-strip{margin-top:1.6rem;}
.bible-strip h3{
  display:flex;align-items:center;gap:0.6rem;
  font-family:var(--display);font-size:0.9rem;font-weight:800;
  letter-spacing:0.06em;margin:2rem 0 0.9rem;
}
.bible-strip h3::before{content:"";width:0.9rem;height:0.9rem;border-radius:4px;flex:0 0 auto;}
.bible-strip h3.ot{color:var(--ot-ink);}
.bible-strip h3.ot::before{background:var(--ot-on);}
.bible-strip h3.nt{color:var(--nt-ink);}
.bible-strip h3.nt::before{background:var(--nt-on);}
.bible-strip h3:first-child{margin-top:0;}

.strip{display:flex;flex-wrap:wrap;gap:0.45rem;}
.strip a{
  display:inline-block;padding:0.5rem 0.95rem;
  border-radius:999px;
  border:2px solid var(--line);
  background:var(--bg-2);
  font-size:0.95rem;font-weight:700;color:var(--ink);
  text-decoration:none;line-height:1.35;
  transition:background 0.14s,color 0.14s,border-color 0.14s,transform 0.14s,box-shadow 0.14s;
}
.strip.ot a{background:var(--ot-bg);border-color:var(--ot-line);color:var(--ot-ink);}
.strip.nt a{background:var(--nt-bg);border-color:var(--nt-line);color:var(--nt-ink);}
.strip.ot a:hover{background:var(--ot-on);border-color:var(--ot-on);color:#fff;transform:translateY(-2px);box-shadow:0 8px 16px -6px rgba(20,41,77,0.5);}
.strip.nt a:hover{background:var(--nt-on);border-color:var(--nt-on);color:#fff;transform:translateY(-2px);box-shadow:0 8px 16px -6px rgba(138,97,20,0.5);}
html[data-theme="dark"] .strip.ot a:hover,
html[data-theme="dark"] .strip.nt a:hover{color:#0f1319;}
.strip-more{margin:1.7rem 0 0;}

/* ── 66권 차례 쪽 ──
   묶음은 옅은 갈래 색 판, 그 위에 흰 단추가 올라간다.
   판과 단추가 같은 색이면 뭉개진다 — 단추는 반드시 판보다 밝아야 한다. */
.bk-group{margin:0 0 2.8rem;}
.bk-group h2{
  display:flex;align-items:center;gap:0.6rem;
  font-family:var(--display);font-size:1.06rem;font-weight:800;
  letter-spacing:0.02em;
  margin:0 0 1rem;padding-bottom:0.7rem;
  border-bottom:1.5px solid var(--line);
}
.bk-group h2::before{content:"";width:0.9rem;height:0.9rem;border-radius:4px;flex:0 0 auto;}
.bk-group.ot h2{color:var(--ot-ink);border-bottom-color:var(--ot-line);}
.bk-group.nt h2{color:var(--nt-ink);border-bottom-color:var(--nt-line);}
.bk-group.ot h2::before{background:var(--ot-on);}
.bk-group.nt h2::before{background:var(--nt-on);}

.bk-list{
  list-style:none;margin:0;padding:0;display:grid;gap:0.5rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.bk-list a{
  display:flex;align-items:center;justify-content:space-between;gap:0.6rem;
  padding:0.82rem 1rem;border-radius:12px;
  border:2px solid var(--line);
  background:var(--bg-2);
  text-decoration:none;
  transition:background 0.14s,color 0.14s,border-color 0.14s,transform 0.14s,box-shadow 0.14s;
}
.bk-group.ot .bk-list a{background:var(--ot-bg);border-color:var(--ot-line);}
.bk-group.nt .bk-list a{background:var(--nt-bg);border-color:var(--nt-line);}
.bk-list b{font-weight:700;color:var(--ink);font-size:1rem;}
.bk-list span{font-size:0.82rem;font-weight:600;color:var(--ink-3);white-space:nowrap;}
.bk-group.ot .bk-list b{color:var(--ot-ink);}
.bk-group.nt .bk-list b{color:var(--nt-ink);}
.bk-group.ot .bk-list a:hover{background:var(--ot-on);border-color:var(--ot-on);transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(20,41,77,0.55);}
.bk-group.nt .bk-list a:hover{background:var(--nt-on);border-color:var(--nt-on);transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(138,97,20,0.55);}
/* 마우스오버 때 글씨는 흰색.
   ⚠️ `.bk-group.ot .bk-list b`(클래스 3개)가 `.bk-list a:hover b`(클래스 2개)보다
   특이도가 높아서, 갈래를 안 붙이면 이 규칙이 지고 글씨가 안 보인다. */
.bk-group.ot .bk-list a:hover b,.bk-group.ot .bk-list a:hover span,
.bk-group.nt .bk-list a:hover b,.bk-group.nt .bk-list a:hover span{color:#fff;}
html[data-theme="dark"] .bk-group.ot .bk-list a:hover b,
html[data-theme="dark"] .bk-group.ot .bk-list a:hover span,
html[data-theme="dark"] .bk-group.nt .bk-list a:hover b,
html[data-theme="dark"] .bk-group.nt .bk-list a:hover span{color:#0f1319;}

/* ── 장 고르기 ── */
.ch-grid{
  display:grid;gap:0.45rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
}
.ch-grid a{
  display:grid;place-items:center;min-height:54px;
  border-radius:12px;
  border:2px solid var(--line);
  background:var(--bg-2);
  font-family:var(--display);font-weight:700;font-size:1.04rem;
  color:var(--ink);text-decoration:none;
  transition:background 0.14s,color 0.14s,border-color 0.14s,transform 0.14s,box-shadow 0.14s;
}
.ch-grid.ot a{background:var(--ot-bg);border-color:var(--ot-line);color:var(--ot-ink);}
.ch-grid.nt a{background:var(--nt-bg);border-color:var(--nt-line);color:var(--nt-ink);}
.ch-grid.ot a:hover{background:var(--ot-on);border-color:var(--ot-on);color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(20,41,77,0.55);}
.ch-grid.nt a:hover{background:var(--nt-on);border-color:var(--nt-on);color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(138,97,20,0.55);}
html[data-theme="dark"] .ch-grid.ot a:hover,
html[data-theme="dark"] .ch-grid.nt a:hover{color:#0f1319;}

/* ── 장 본문 ──
   읽는 자리다. 세리프로 조용하게, 줄 사이를 넉넉히. */
.chapter h1{margin:0.4rem 0 2rem;}
/* 성경 본문의 글자체는 `/ko/bible/` 머리글(「예슈아 직역성경입니다…」)과 똑같이 맞춘다.
   앞서는 Noto Serif KR 400 이었는데 획이 얇아 흐리게 보였다.
   `.head-block p` 와 같은 Noto Sans KR 500 이다. 줄간은 2 → 1.75 로 좁혔다. */
.chapter .vs{
  scroll-margin-top:5.6rem;
  font-family:var(--sans);
  font-size:1.08rem;line-height:1.75;
  color:var(--ink);font-weight:500;
  margin:0 0 0.7rem;
  text-indent:0;
}
.chapter .vn{
  display:inline-block;min-width:1.9em;
  font-family:var(--display);font-size:0.74rem;font-weight:800;
  color:var(--gold);text-decoration:none;
  vertical-align:0.35em;letter-spacing:0.02em;
}
.chapter .vn:hover{color:var(--ink);}
/* 절 하나를 주소로 가리켜 들어왔을 때 어디인지 보이게 */
.chapter .vs:target{
  background:var(--gold-soft);
  border-radius:8px;
  box-shadow:0 0 0 0.5rem var(--gold-soft);
}
html[data-theme="dark"] .chapter .vs:target{
  background:rgba(184,134,47,0.18);box-shadow:0 0 0 0.5rem rgba(184,134,47,0.18);
}
.ch-tools{margin:2.4rem 0 0;}
.note.deeper h2{
  font-family:var(--display);font-size:1.05rem;font-weight:800;
  color:var(--ink);margin:0 0 0.5rem;
}
.note.deeper p{margin:0 0 0.9rem;}
.note.deeper .btn-row{margin:0;display:flex;flex-wrap:wrap;gap:0.6rem;}
.note.deeper .btn{font-size:0.9rem;padding:0.6rem 1.1rem;}

@media (max-width:520px){
  .bk-list{grid-template-columns:1fr 1fr;}
  .ch-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));}
  .chapter .vs{font-size:1.05rem;line-height:1.72;}
}

/* ============================================================
   인쇄 — PDF 를 따로 만들지 않는다.
   브라우저의 「PDF 로 저장」이 이 판을 쓴다.
   ============================================================ */
@media print{
  .site-head,.crumb,.pager,.head-right,.site-foot,.skip,.to-top,.jump,
  .ch-tools,.note.deeper,.btn,.btn-row{display:none !important;}
  html{--fs:100%;}
  body{background:#fff;color:#000;}
  .band{padding:0 !important;}
  .read,.wrap{max-width:none;padding:0;}
  a{color:#000;text-decoration:none;}
  h1{font-size:19pt;margin:0 0 12pt;}
  .eyebrow{font-size:9pt;color:#444;margin:0 0 4pt;}
  .chapter .vs{font-size:10.5pt;line-height:1.5;margin:0 0 4pt;
    orphans:3;widows:3;}
  .chapter .vn{color:#666;font-size:8pt;min-width:1.8em;}
  .bk-list a,.ch-grid a{background:none;border:0.4pt solid #999;}
  .year{grid-template-columns:1fr 1fr;gap:0;}
  .year a{border:0;padding:1.5pt 0;background:none;}
  .year b{font-size:8pt;} .year span{font-size:8pt;}
  .tk-list li{border:0.4pt solid #999;background:none;padding:4pt 6pt;}
  .tk-list .pg a{border:0;}
  .speeds{grid-template-columns:1fr 1fr 1fr;}
  .sp{border:0.4pt solid #999;background:none;padding:6pt;}
  /* 인쇄물이 어디서 왔는지 남긴다.
     .read 마다 붙이면 한 쪽에 여러 번 나온다 — main 에 한 번만 붙인다. */
  main::after{
    content:"ylvbible.org · 예슈아 직역성경 (YLV) · Bible Homes Inc. 501(c)(3)";
    display:block;margin-top:16pt;padding-top:6pt;
    border-top:0.4pt solid #999;font-size:8pt;color:#555;
  }
  @page{margin:16mm 15mm;}
}

/* 어두운 판에서는 흰 그림자가 티가 안 나므로 뺀다 */
html[data-theme="dark"] .bk-list a,
html[data-theme="dark"] .ch-grid a,
html[data-theme="dark"] .strip a{box-shadow:none;}