/* 참조 성경 패널 정적 스타일.
 * reference-panel.blade.php 의 인라인 <style> 에서 옮겨 왔다 (formal 260810-1457 Phase C).
 * 33 KB 가 성경 장 페이지마다 실려 나갔다 — 외부 파일은 브라우저·CDN 이 한 번만 받는다.
 * 서버 값(Blade 표현식)이 하나도 없어 그대로 옮길 수 있었다.
 */
    /* 참조 성경 패널 — 폴드 펼침/소형 태블릿(≥720px)부터 우측 도킹 컬럼 사용.
       더 좁은 폰 화면은 하단 도킹 셸로 폴백한다. */
    /* 컬럼 래퍼는 기본적으로 박스 트리에서 사라진다(display: contents) — 하단 도킹/모바일은 기존 그대로. */
    #scripture-viewer .scripture-ref-column {
        display: contents;
    }
    #scripture-viewer .scripture-ref-panel {
        position: relative;
        display: none;
        min-width: 0;
        flex-direction: column;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        background: #ffffff;
        overflow: hidden;
    }
    @media (min-width: 720px) {
        #scripture-viewer[data-ref-panel-place="side"][data-ref-panel-state="open"] .scripture-reading-layout,
        #scripture-viewer[data-ref-panel-place="side"][data-ref-panel-state="collapsed"] .scripture-reading-layout {
            grid-template-columns: minmax(0, 1fr) var(--scripture-ref-width, 30rem);
        }
        #scripture-viewer[data-ref-panel-place="side"][data-ref-panel-state="collapsed"] .scripture-reading-layout {
            grid-template-columns: minmax(0, 1fr) 2.75rem;
        }
        /* 우측 컬럼 = 본문 카드와 같은 세로 크기의 grid item(본문 행). 패널의 sticky clamp 기준이 된다.
           ⛔ 패널 자체를 grid item 으로 두면 안 된다 — Chrome 은 sticky grid item 을 grid area(본문 행)가
           아니라 grid 컨테이너 전체로 clamp 해서, 자료칩 행(+숨김 여백)만큼 본문 카드 아래로 삐져나간다
           (2026-07-14 실측: 본문 바닥 대비 +70px, 자료 숨김 시 +145px). */
        #scripture-viewer[data-ref-panel-place="side"][data-ref-panel-state="open"] .scripture-ref-column,
        #scripture-viewer[data-ref-panel-place="side"][data-ref-panel-state="collapsed"] .scripture-ref-column {
            display: block;
            position: relative;
            grid-column: 2;
            grid-row: 1;
            align-self: start;
            min-width: 0;
            height: var(--scripture-text-panel-h, auto);
        }
        #scripture-viewer[data-ref-panel-place="side"][data-ref-panel-state="open"] .scripture-ref-panel,
        #scripture-viewer[data-ref-panel-place="side"][data-ref-panel-state="collapsed"] .scripture-ref-panel {
            display: flex;
            /* 본문 카드 높이(--scripture-text-panel-h)를 넘지 않고, 긴 장에서는 화면 높이로 잘라
               sticky 로 따라온다(내부 스크롤). 래퍼가 본문 높이이므로 바닥은 본문 카드에서 멈춘다. */
            position: sticky;
            top: 0.75rem;
            width: 100%;
            height: min(var(--scripture-text-panel-h, calc(100vh - 1.5rem)), calc(100vh - 1.5rem));
            max-height: calc(100vh - 1.5rem);
        }
    }
    #scripture-viewer[data-ref-panel-state="collapsed"] .scripture-ref-shell,
    #scripture-viewer[data-ref-panel-state="collapsed"] .scripture-ref-splitter,
    #scripture-viewer[data-ref-panel-state="collapsed"] .scripture-ref-grip {
        display: none;
    }
    #scripture-viewer[data-ref-panel-state="open"] .scripture-ref-expand {
        display: none;
    }

    /* 접힘 레일 — 세로 라벨 */
    #scripture-viewer .scripture-ref-expand {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem 0;
        border: 0;
        background: transparent;
        color: #57534e;
        font-size: 0.72rem;
        font-weight: 900;
        cursor: pointer;
    }
    #scripture-viewer .scripture-ref-expand:hover { background: #f5f5f4; }
    #scripture-viewer .scripture-ref-expand-text {
        writing-mode: vertical-rl;
        letter-spacing: 0.08em;
    }

    /* 스플리터 — 본문과 패널 사이. 컬럼 왼쪽 가장자리에 겹쳐 둔다. */
    #scripture-viewer .scripture-ref-splitter {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -0.5rem;
        width: 0.75rem;
        cursor: col-resize;
        z-index: 2;
        touch-action: none;
    }
    #scripture-viewer .scripture-ref-splitter::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: transparent;
        transition: background 140ms ease;
    }
    #scripture-viewer .scripture-ref-splitter:hover::after,
    #scripture-viewer .scripture-ref-splitter:focus-visible::after,
    #scripture-viewer .scripture-ref-splitter.is-dragging::after {
        background: #f59e0b;
    }

    #scripture-viewer .scripture-ref-shell {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1;
    }
    #scripture-viewer .scripture-ref-head {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        border-bottom: 1px solid #e7e5e4;
        padding: 0.45rem 0.5rem;
    }
    #scripture-viewer .scripture-ref-grip {
        position: absolute;
        z-index: 4;
        top: 50%;
        left: 0;
        width: 0.75rem;
        height: 3.4rem;
        transform: translateY(-50%);
        border-radius: 999px;
        background: transparent;
        cursor: col-resize;
        touch-action: none;
    }
    #scripture-viewer .scripture-ref-grip::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 2.6rem;
        transform: translate(-50%, -50%);
        border-radius: 999px;
        background: #d6d3d1;
        transition: background 140ms ease;
    }
    #scripture-viewer .scripture-ref-grip:hover::after,
    #scripture-viewer .scripture-ref-grip.is-dragging::after {
        background: #f59e0b;
    }
    #scripture-viewer .scripture-ref-tabs {
        display: flex;
        flex: 0 1 auto;
        min-width: 0;
        gap: 0.3rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    #scripture-viewer .scripture-ref-tab-strip {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        gap: 0.3rem;
    }
    #scripture-viewer .scripture-ref-tab {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex: none;
        border: 1px solid #e7e5e4;
        border-radius: 999px;
        background: #fafaf9;
        padding: 0.22rem 0.5rem;
        color: #57534e;
        font-size: 0.68rem;
        font-weight: 800;
        white-space: nowrap;
        cursor: pointer;
    }
    #scripture-viewer .scripture-ref-tab[aria-selected="true"] {
        border-color: #1c1917;
        background: #1c1917;
        color: #ffffff;
    }
    #scripture-viewer .scripture-ref-tab-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        width: 0.9rem;
        height: 0.9rem;
        font-size: 0.7rem;
        line-height: 1;
        opacity: 0.65;
    }
    #scripture-viewer .scripture-ref-tab-close:hover { opacity: 1; }
    #scripture-viewer .scripture-ref-head-actions {
        display: flex;
        flex: none;
        align-items: center;
        gap: 0.15rem;
    }
    #scripture-viewer .scripture-ref-add-tab {
        flex: none;
    }
    #scripture-viewer .scripture-ref-place-toggle {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.85rem;
        height: 1.85rem;
        border: 1px solid #e7e5e4;
        border-radius: 999px;
        background: #fafaf9;
        padding: 0;
        color: #57534e;
        cursor: pointer;
        transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    }
    #scripture-viewer .scripture-ref-place-toggle:hover {
        border-color: #d6d3d1;
        background: #f5f5f4;
        color: #1c1917;
    }
    #scripture-viewer .scripture-ref-place-toggle.is-bottom {
        background: #1c1917;
        border-color: #1c1917;
        color: #ffffff;
    }
    #scripture-viewer .scripture-ref-place-toggle[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
    }
    #scripture-viewer .scripture-ref-place-toggle svg {
        width: 0.95rem;
        height: 0.95rem;
        flex: 0 0 auto;
    }
    #scripture-viewer .scripture-ref-place-icon[hidden] {
        display: none !important;
    }
    #scripture-viewer .scripture-ref-icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        border: 1px solid transparent;
        border-radius: 0.375rem;
        background: transparent;
        color: #57534e;
        cursor: pointer;
    }
    #scripture-viewer .scripture-ref-icon-button:hover {
        border-color: #e7e5e4;
        background: #f5f5f4;
        color: #1c1917;
    }
    #scripture-viewer .scripture-ref-icon-button[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
    }
    /* 닫기(×) — 탭바 오른쪽 끝 고정(탭이 많아 가로 스크롤이 생겨도 항상 보인다) */
    #scripture-viewer .scripture-ref-close {
        flex: none;
        margin-left: 0.15rem;
    }

    /* 키보드 포커스 — 라이트/다크 모두에서 또렷하게 보여야 한다(키보드만으로 조작 가능). */
    #scripture-viewer .scripture-ref-tab:focus-visible,
    #scripture-viewer .scripture-ref-icon-button:focus-visible,
    #scripture-viewer .scripture-ref-select:focus-visible,
    #scripture-viewer .scripture-ref-splitter:focus-visible,
    #scripture-viewer .scripture-ref-content:focus-visible {
        outline: 2px solid #f59e0b;
        outline-offset: 2px;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-tab:focus-visible,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-icon-button:focus-visible,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-select:focus-visible,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-splitter:focus-visible,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content:focus-visible {
        outline-color: #fbbf24;
    }

    #scripture-viewer .scripture-ref-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.32rem;
        border-bottom: 1px solid #e7e5e4;
        padding: 0.5rem;
    }
    #scripture-viewer .scripture-ref-field {
        display: flex;
        flex: 0 1 auto;
        min-width: 0;
        flex-direction: column;
        gap: 0.15rem;
    }
    #scripture-viewer .scripture-ref-field--version {
        flex-basis: 7rem;
        max-width: 8rem;
    }
    #scripture-viewer .scripture-ref-field--book {
        flex-basis: 5.8rem;
        max-width: 6.8rem;
    }
    #scripture-viewer .scripture-ref-field--narrow { flex: 0 0 3.65rem; }
    #scripture-viewer .scripture-ref-field-label {
        color: #78716c;
        font-size: 0.6rem;
        font-weight: 900;
    }
    #scripture-viewer .scripture-ref-select {
        width: 100%;
        border: 1px solid #e7e5e4;
        border-radius: 0.375rem;
        background: #ffffff;
        padding: 0.28rem 0.4rem;
        color: #1c1917;
        font-size: 0.74rem;
        font-weight: 700;
    }
    #scripture-viewer .scripture-ref-nav {
        display: flex;
        flex: none;
        align-items: center;
        gap: 0.15rem;
        margin-left: auto;
        padding-bottom: 0.1rem;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-controls {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.22rem;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-field-label {
        display: none;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-field--version {
        flex-basis: 5.4rem;
        max-width: 5.7rem;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-field--book {
        flex-basis: 3.6rem;
        max-width: 4rem;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-field--narrow {
        flex: 0 0 3.05rem;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-select {
        padding: 0.24rem 0.28rem;
        font-size: 0.7rem;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-nav {
        gap: 0.08rem;
        margin-left: 0;
        padding-bottom: 0;
    }
    #scripture-viewer .scripture-ref-panel.is-compact-controls .scripture-ref-icon-button {
        width: 1.5rem;
        height: 1.5rem;
    }

    #scripture-viewer .scripture-ref-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        /* 하단 여백 — 끝까지 스크롤했을 때 마지막 절이 패널 바닥에 붙지 않게 넉넉히 둔다. */
        padding: 0.75rem 0.85rem 2.75rem;
        /* 스크롤바는 border 안쪽 가장자리에 그려진다 — 투명 우측 보더 4px 로 패널 테두리에서 띄운다.
           (padding 은 스크롤바 위치를 바꾸지 못한다.) */
        border-right: 4px solid transparent;
    }
    /* 패널 스크롤바 — 레일 + 화살표 + pill 디자인:
         버튼  = 위/아래 끝의 작은 화살표(클릭 시 한 칸씩 스크롤 — 네이티브 동작)
         트랙  = 두 화살표 사이를 잇는 1px 세로 레일(스크롤 가능 영역을 알려준다)
         thumb = 레일 위에 얹힌 둥근 pill(흰 배경 + 1px 테두리). hover 시 테두리가 진해진다.
       ⛔ Chrome 은 표준 scrollbar-width/scrollbar-color 가 지정되면 ::-webkit-scrollbar 의사요소를
       무시한다 — 이 형태는 의사요소로만 만들 수 있으므로 표준 속성은 의사요소를 지원하지 않는
       Firefox 전용으로 분리한다(아래 @supports). 네이티브 스크롤(휠·키보드·터치·a11y)은 그대로다. */
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar {
        width: 5px;
    }
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar-button:single-button {
        display: block;
        height: 9px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 5px 5px;
    }
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar-button:single-button:vertical:decrement {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5L5 3.5L8 6.5' fill='none' stroke='%23a8a29e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar-button:single-button:vertical:increment {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%23a8a29e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar-track-piece {
        background-color: transparent;
        /* 5px 거터의 한가운데(2~3px)에 1px 레일 */
        background-image: linear-gradient(to right, transparent 2px, #e7e5e4 2px, #e7e5e4 3px, transparent 3px);
    }
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar-thumb {
        min-height: 20px;
        border-radius: 9999px;
        /* 예시 톤 — 흰 pill 이 아니라 옅은 회색 pill(테두리는 한 단계 진하게). */
        border: 1px solid #d6d3d1;
        background-color: #e7e5e4;
        background-clip: padding-box;
        box-shadow: none;
        transition: border-color 150ms ease, background-color 150ms ease;
    }
    #scripture-viewer .scripture-ref-content:hover::-webkit-scrollbar-thumb {
        border-color: #a8a29e;
        background-color: #d6d3d1;
    }
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar-thumb:hover,
    #scripture-viewer .scripture-ref-content::-webkit-scrollbar-thumb:active {
        border-color: #78716c;
        background-color: #a8a29e;
    }
    /* Firefox — ::-webkit-scrollbar 미지원이라 이 형태를 만들 수 없다. 표준 속성으로 근사한다. */
    @supports not selector(::-webkit-scrollbar) {
        #scripture-viewer .scripture-ref-content {
            scrollbar-width: thin;
            scrollbar-color: rgba(87, 83, 78, 0.45) rgba(231, 229, 228, 0.9);
        }
        #scripture-viewer .scripture-ref-content:hover,
        #scripture-viewer .scripture-ref-content:focus-within {
            scrollbar-color: rgba(68, 64, 60, 0.75) rgba(231, 229, 228, 0.9);
        }
    }
    #scripture-viewer .scripture-ref-font-controls {
        position: sticky;
        top: -0.75rem;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.18rem;
        margin: -0.35rem 0 0.45rem;
        padding: 0.18rem 0 0.25rem;
        pointer-events: none;
    }
    #scripture-viewer .scripture-ref-body-nav {
        display: inline-flex;
        align-items: center;
        gap: 0.12rem;
        padding: 0.1rem;
        border: 1px solid rgba(214, 211, 209, 0.72);
        border-radius: 0.48rem;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 2px rgb(28 25 23 / 0.06);
        pointer-events: auto;
    }
    #scripture-viewer .scripture-ref-body-nav-button {
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 0.36rem;
        line-height: 1;
        text-decoration: none;
    }
    #scripture-viewer .scripture-ref-body-nav-button svg {
        width: 0.95rem;
        height: 0.95rem;
    }
    #scripture-viewer .scripture-ref-body-nav-button[aria-disabled="true"] {
        opacity: 0.4;
        cursor: not-allowed;
    }
    #scripture-viewer .scripture-ref-font-size-group {
        display: inline-flex;
        align-items: center;
        gap: 0.18rem;
        pointer-events: auto;
    }
    #scripture-viewer .scripture-ref-font-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.55rem;
        height: 1.55rem;
        border: 1px solid #d6d3d1;
        border-radius: 0.4rem;
        background: rgba(255, 255, 255, 0.94);
        color: #44403c;
        font-size: 0.95rem;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 1px 2px rgb(28 25 23 / 0.08);
        cursor: pointer;
        pointer-events: auto;
    }
    #scripture-viewer .scripture-ref-font-button:hover {
        border-color: #a8a29e;
        background: #fafaf9;
        color: #1c1917;
    }
    #scripture-viewer .scripture-ref-font-button[disabled] {
        opacity: 0.42;
        cursor: not-allowed;
    }
    #scripture-viewer .scripture-ref-verse {
        display: flex;
        gap: 0.45rem;
        border-radius: 0.375rem;
        padding: 0.18rem 0.28rem;
        color: #292524;
        font-size: var(--scripture-ref-font-size, 0.92rem);
        line-height: 1.75;
        cursor: pointer;
    }
    #scripture-viewer .scripture-ref-verse:hover { background: #fafaf9; }
    #scripture-viewer .scripture-ref-verse.is-selected { background: #fef3c7; }
    #scripture-viewer .scripture-ref-verse.is-target { background: #fef9c3; }
    #scripture-viewer .scripture-ref-verse-no {
        flex: none;
        min-width: 1.4rem;
        color: #a8a29e;
        font-size: 0.7rem;
        font-weight: 900;
        line-height: 1.9;
        text-align: right;
    }
    #scripture-viewer .scripture-ref-state {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 2rem 0.5rem;
        color: #78716c;
        font-size: 0.78rem;
        font-weight: 700;
        text-align: center;
    }
    #scripture-viewer .scripture-ref-spinner {
        display: inline-block;
        box-sizing: border-box;
        width: 1em;
        height: 1em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        will-change: transform;
        animation: scripture-ref-spin 0.8s linear infinite;
    }
    @keyframes scripture-ref-spin {
        from { transform: rotate(0); }
        to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
        #scripture-viewer .scripture-ref-spinner { animation-duration: 1.8s; }
        #scripture-viewer .scripture-ref-splitter::after { transition: none; }
    }
    #scripture-viewer .scripture-ref-retry {
        border: 1px solid #e7e5e4;
        border-radius: 999px;
        padding: 0.2rem 0.6rem;
        font-size: 0.7rem;
        font-weight: 900;
    }
    #scripture-viewer .scripture-ref-copy-bar {
        position: sticky;
        bottom: 0;
        display: flex;
        justify-content: flex-end;
        gap: 0.35rem;
        padding-top: 0.5rem;
    }
    #scripture-viewer .scripture-ref-copy-button {
        border: 1px solid #1c1917;
        border-radius: 999px;
        background: #1c1917;
        padding: 0.25rem 0.7rem;
        color: #ffffff;
        font-size: 0.7rem;
        font-weight: 900;
    }

    /* 하단 도킹 — 데스크탑에서도 사용자가 선택할 수 있는 참조 성경 표시 방식.
       모바일은 아래 media query 가 폭을 full 로 보정한다. */
    #scripture-viewer[data-ref-panel-place="bottom"][data-ref-panel-state="open"] .scripture-ref-panel,
    #scripture-viewer[data-ref-panel-place="bottom"][data-ref-panel-state="collapsed"] .scripture-ref-panel {
        display: flex;
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 0;
        z-index: 45;
        width: min(56rem, calc(100vw - 2rem));
        height: var(--scripture-ref-height, 45vh);
        transform: translateX(-50%);
        border-width: 1px 1px 0 1px;
        border-radius: 0.9rem 0.9rem 0 0;
        box-shadow: 0 -10px 28px rgba(28, 25, 23, 0.16);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    @media (min-width: 1024px) {
        #scripture-viewer.sermon-editing:not(.sermon-collapsed)[data-ref-panel-place="bottom"][data-ref-panel-state="open"] .scripture-ref-panel,
        #scripture-viewer.sermon-editing:not(.sermon-collapsed)[data-ref-panel-place="bottom"][data-ref-panel-state="collapsed"] .scripture-ref-panel {
            left: calc((100vw - var(--sermon-editor-dock-width, 30rem)) / 2);
            width: min(56rem, calc(100vw - var(--sermon-editor-dock-width, 30rem) - 2rem));
        }
    }
    #scripture-viewer[data-ref-panel-place="bottom"][data-ref-panel-state="open"] .scripture-reading-layout {
        padding-bottom: var(--scripture-ref-height, 45vh);
    }
    #scripture-viewer[data-ref-panel-place="bottom"] .scripture-ref-splitter {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 1.15rem;
        cursor: row-resize;
    }
    #scripture-viewer[data-ref-panel-place="bottom"] .scripture-ref-splitter::after {
        top: 0.45rem;
        left: 50%;
        width: 2.6rem;
        height: 4px;
        transform: translateX(-50%);
        background: #d6d3d1;
    }
    #scripture-viewer[data-ref-panel-place="bottom"] .scripture-ref-grip {
        top: 0.38rem;
        left: 50%;
        width: 3rem;
        height: 0.75rem;
        transform: translateX(-50%);
        cursor: row-resize;
    }
    #scripture-viewer[data-ref-panel-place="bottom"] .scripture-ref-grip::after {
        top: 50%;
        left: 50%;
        width: 2.7rem;
        height: 4px;
        transform: translate(-50%, -50%);
    }
    #scripture-viewer[data-ref-panel-place="bottom"] .scripture-ref-head {
        padding-top: 0.95rem;
    }

    /* ── 좁은 모바일(<720px): 하단 도킹 분할 ─────────────────────────────────
       세로 화면에서는 좌우가 아니라 위=현재 본문 / 아래=참조 본문으로 나눈다.
       모달(<dialog>)이 아니라 화면에 붙박이는 영역이라 본문을 계속 읽고 조작할 수 있다.
       높이는 상단 핸들 드래그로 조절(기본 45vh). (2026-07-12 사용자 선택) */
    @media (max-width: 719px) {
        #scripture-viewer[data-ref-panel-place="bottom"][data-ref-panel-state="open"] .scripture-ref-panel,
        #scripture-viewer[data-ref-panel-place="bottom"][data-ref-panel-state="collapsed"] .scripture-ref-panel {
            display: flex;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 45;
            width: auto;
            height: var(--scripture-ref-height, 45vh);
            transform: none;
            border-width: 1px 0 0 0;
            border-radius: 0.9rem 0.9rem 0 0;
            box-shadow: 0 -10px 28px rgba(28, 25, 23, 0.16);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        /* 본문 마지막 절이 패널에 가리지 않도록 아래 여백 확보 */
        #scripture-viewer[data-ref-panel-place="bottom"][data-ref-panel-state="open"] .scripture-reading-layout {
            padding-bottom: var(--scripture-ref-height, 45vh);
        }
        /* 스플리터: 세로(폭)가 아니라 가로(높이) 핸들 */
        #scripture-viewer[data-ref-panel-place="bottom"] .scripture-ref-splitter {
            top: 0;
            right: 0;
            bottom: auto;
            left: 0;
            width: auto;
            height: 1.15rem;
            cursor: row-resize;
        }
        #scripture-viewer[data-ref-panel-place="bottom"] .scripture-ref-splitter::after {
            top: 0.45rem;
            left: 50%;
            width: 2.6rem;
            height: 4px;
            transform: translateX(-50%);
            background: #d6d3d1;
        }
        #scripture-viewer .scripture-ref-head { padding-top: 0.95rem; }
        /* 좁은 화면에서는 선택기 위 라벨(역본/권/장)을 숨긴다 — 셀렉트 값만으로 충분하고 세로 공간이 아깝다.
           라벨은 aria-label 로 남아 보조기술에는 그대로 전달된다. (2026-07-13 사용자 요청) */
        #scripture-viewer .scripture-ref-field-label { display: none; }
        #scripture-viewer .scripture-ref-controls { padding: 0.45rem 0.5rem; }
        /* 접힘 레일(세로 라벨)은 데스크탑 전용 */
        #scripture-viewer .scripture-ref-expand { display: none; }
        /* 하단 고정 UI(성경 듣기 / 사전 강조)가 패널과 겹치지 않게 — 패널을 닫으면 되돌아온다. */
        body:has(#scripture-viewer[data-ref-panel-state="open"]) [data-reader-listen],
        body:has(#scripture-viewer[data-ref-panel-state="open"]) .scripture-term-toggle {
            display: none !important;
        }
    }

    /* 다크 */
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-panel {
        border-color: #292524;
        background: #1c1917;
    }
    /* 다크 — 레일/화살표/pill 색만 뒤집는다(어두운 배경 위 밝은 pill). */
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content::-webkit-scrollbar-track-piece {
        background-image: linear-gradient(to right, transparent 2px, #44403c 2px, #44403c 3px, transparent 3px);
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content::-webkit-scrollbar-button:single-button:vertical:decrement {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5L5 3.5L8 6.5' fill='none' stroke='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content::-webkit-scrollbar-button:single-button:vertical:increment {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content::-webkit-scrollbar-thumb {
        border-color: #57534e;
        background-color: #d6d3d1;
        box-shadow: none;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content:hover::-webkit-scrollbar-thumb {
        border-color: #78716c;
        background-color: #e7e5e4;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content::-webkit-scrollbar-thumb:hover,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content::-webkit-scrollbar-thumb:active {
        border-color: #a8a29e;
        background-color: #fafaf9;
    }
    @supports not selector(::-webkit-scrollbar) {
        #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content {
            scrollbar-color: rgba(214, 211, 209, 0.35) rgba(41, 37, 36, 0.9);
        }
        #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content:hover,
        #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-content:focus-within {
            scrollbar-color: rgba(231, 229, 228, 0.6) rgba(41, 37, 36, 0.9);
        }
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-head,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-controls {
        border-color: #292524;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-tab {
        border-color: #44403c;
        background: #292524;
        color: #d6d3d1;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-tab[aria-selected="true"] {
        border-color: #fbbf24;
        background: #fbbf24;
        color: #1c1917;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-grip::after {
        background: #57534e;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-grip:hover::after,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-grip.is-dragging::after,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-splitter:hover::after,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-splitter:focus-visible::after,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-splitter.is-dragging::after {
        background: #fbbf24;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-icon-button,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-expand {
        color: #d6d3d1;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-place-toggle {
        border-color: #44403c;
        background: #292524;
        color: #d6d3d1;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-place-toggle:hover {
        border-color: #57534e;
        background: #44403c;
        color: #f5f5f4;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-place-toggle.is-bottom {
        border-color: #fbbf24;
        background: #fbbf24;
        color: #1c1917;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-icon-button:hover,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-expand:hover {
        border-color: #44403c;
        background: #292524;
        color: #fafaf9;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-select {
        border-color: #44403c;
        background: #292524;
        color: #fafaf9;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-font-button {
        border-color: #57534e;
        background: rgba(41, 37, 36, 0.94);
        color: #e7e5e4;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-body-nav {
        border-color: rgba(68, 64, 60, 0.85);
        background: rgba(41, 37, 36, 0.94);
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-font-button:hover {
        border-color: #a8a29e;
        background: #44403c;
        color: #ffffff;
    }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-verse { color: #e7e5e4; }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-verse:hover { background: #292524; }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-verse.is-selected,
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-verse.is-target { background: #451a03; }
    #scripture-viewer[data-scripture-theme="dark"] .scripture-ref-copy-button {
        border-color: #fbbf24;
        background: #fbbf24;
        color: #1c1917;
    }