/* ===============================================
   Offcanvas Backdrop — Keep Header Blur Visible
   헤더 영역(높이: --hdr-h) 위에는 백드롭을 배치하지 않음
   - iOS/Safari 포함 모든 브라우저 대응
   - 헤더 높이는 signature-header.mjs 가 --hdr-h 로 주입
   =============================================== */

   .oc-root .oc-backdrop{
    /* 헤더 높이만큼 상단을 비워 백드롭을 아래에서 시작 */
    position: absolute;
    inset: calc(var(--hdr-h, 64px)) 0 0 0 !important; /* top right bottom left */
    /* 기존 디자인 유지 */
    background: rgba(255,255,255,.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.08) brightness(.98);
            backdrop-filter: blur(14px) saturate(1.08) brightness(.98);
    opacity: 0;
    transition: opacity .46s cubic-bezier(.22,.61,.36,1);
  }
  
  /* 활성화 시 페이드인 */
  .oc-root.is-active .oc-backdrop{ opacity: 1; }
  
  /* 상단 경계가 딱 잘려 보이지 않도록 아주 은은한 페더 */
  .oc-root .oc-backdrop::after{
    content:"";
    position:absolute; left:0; right:0; top:-18px; height:18px;
    /* 헤더와 자연스럽게 섞이도록 투명→흰색 그라데이션 */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 100%);
    pointer-events:none;
  }