html { font-size:16px; overscroll-behavior-y: contain; }
  body { background:#FBF9F4; color:#132018; overscroll-behavior-y: contain;
    background-image:
      radial-gradient(circle at 12% 6%, rgba(34,81,60,.055) 0, transparent 46%),
      radial-gradient(circle at 88% 3%, rgba(180,105,58,.05) 0, transparent 40%);
    background-attachment:fixed; }
  .kr-serif { font-family:'Noto Serif KR',serif; word-break:keep-all; }
  .keep, .prewrap { word-break:keep-all; }
  .prewrap { white-space:pre-wrap; line-height:1.9; }
  .mark { background:linear-gradient(transparent 62%, rgba(180,105,58,.28) 62%); }
  /* ★ [지도가 메뉴 위로 올라타는 문제 수정] Leaflet이 내부적으로 쓰는 z-index(400~1000)가
     상단 메뉴(z-50)보다 높은데, 지도 상자가 독립된 쌓임 맥락을 갖고 있지 않아 스크롤 시
     지도 내부 레이어가 메뉴 위로 그대로 노출됐다. isolation:isolate로 지도 상자를 별도
     쌓임 맥락으로 감싸 내부 z-index가 상자 밖으로 새어나가지 않게 한다. */
  #map, #xmap { isolation:isolate; }

  /* 배너 텍스트 가독성을 위한 드롭 섀도우 */
  .banner-text-shadow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  /* 스켈레톤 — 콜드 스타트 1~3초를 "고장"으로 보이지 않게 */
  .sk { position:relative; overflow:hidden; background:#EDE8DB; border-radius:.5rem; }
  .sk::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
    animation:shimmer 1.4s infinite; }
  @keyframes shimmer { 100% { transform:translateX(100%); } }

  /* 스크롤 등장 (IntersectionObserver 자체 구현 — GSAP 없이도 돕니다) */
  .rise { opacity:0; transform:translateY(20px); transition:opacity .75s ease, transform .75s ease; }
  .rise.on { opacity:1; transform:none; }

  /* 상단 진행바 (NProgress 대체 자체 구현 — 0.3KB) */
  #bar { position:fixed; top:0; left:0; height:2px; width:0; z-index:80;
         background:linear-gradient(90deg,#4E7A5E,#B4693A); transition:width .25s ease, opacity .4s ease; }

  /* 세로 타임라인 */
  .tl { position:relative; padding-left:1.7rem; }
  .tl::before { content:''; position:absolute; left:.36rem; top:.4rem; bottom:.4rem; width:2px; background:#E4DED0; }
  .tl-dot { position:absolute; left:0; top:.5rem; width:.78rem; height:.78rem; border-radius:999px;
            background:#22513C; box-shadow:0 0 0 3px #FBF9F4; }

  .noscroll::-webkit-scrollbar { display:none; }
  .noscroll { -ms-overflow-style:none; scrollbar-width:none; }
  .card { background:#fff; border:1px solid #E4DED0; border-radius:1rem;
          box-shadow:0 1px 2px rgba(19,32,24,.04); transition:transform .35s ease, box-shadow .35s ease; }
  .bible-flat { background:transparent; border:0; box-shadow:none; padding:.25rem .1rem; }
  .bible-flat p[data-v] { scroll-margin-top:5rem; }
  .card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(19,32,24,.09); }

  /* 유튜브 파사드 (lite-youtube 자체 구현 — 1MB 절약) */
  .facade { position:relative; cursor:pointer; }
  .facade .play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .facade .play i { width:74px; height:52px; border-radius:14px; background:rgba(19,32,24,.72);
    display:flex; align-items:center; justify-content:center; transition:background .25s ease; }
  .facade:hover .play i { background:#B4693A; }

  /* 말씀 카드 (html2canvas 로 PNG 저장되는 그 화면) */
  #verseCard { width:1080px; height:1080px; }

  /* 묵상노트 — 아날로그 일기장 감성. 처음엔 좁은 상자에 스크롤 스냅으로 가둬 봤지만
   * 사이트 전체의 부드러운 스크롤(Lenis)과 서로 부딪혀 PC·모바일 모두에서 스크롤이
   * 막히는 문제가 있었다. 그래서 평범한 페이지 흐름으로 되돌리고, 장식만 남긴다. */
  .dev-paper {
    background-color: #FFFEFA;
    background-image:
      radial-gradient(circle at 8% 12%, rgba(34,81,60,.05) 0, transparent 40%),
      radial-gradient(circle at 94% 88%, rgba(180,105,58,.045) 0, transparent 42%);
    box-shadow: 0 1px 2px rgba(19,32,24,.05), 0 18px 34px -20px rgba(19,32,24,.28);
  }
  .dev-tape {
    position:absolute; top:-.6rem; width:4.6rem; height:1.5rem; opacity:.62;
    background: repeating-linear-gradient(135deg, rgba(180,105,58,.55) 0 6px, rgba(180,105,58,.4) 6px 12px);
    box-shadow: 0 1px 2px rgba(19,32,24,.15);
  }
  .dev-tape.left  { left: 1.4rem; transform: rotate(-5deg); }
  .dev-tape.right { right: 1.4rem; transform: rotate(4deg); }
  .dev-earfold {
    position:absolute; right:0; bottom:0; width:0; height:0; pointer-events:none;
    border-style:solid; border-width:0 0 1.9rem 1.9rem; border-color:transparent transparent #E9E0CA transparent;
    filter: drop-shadow(-1px -1px 1px rgba(19,32,24,.12));
  }
  .dev-fade-in { animation: devFadeIn .4s ease; }
  @keyframes devFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

  /* 인쇄: 주보·일정만 나오게 */
  @media print { header,footer,.noprint { display:none !important; } body { background:#fff; } }

  @media (prefers-reduced-motion: reduce) {
    .rise { opacity:1 !important; transform:none !important; transition:none !important; }
    html { scroll-behavior:auto; }
    .card:hover { transform:none; }
  }