/* scripture.how reader static CSS; dynamic rules remain inline in source order. */
#scripture-viewer .semantic-mark {
    display: inline-block;
    position: relative;
    border-radius: 0.25rem;
    line-height: 1.32;
    padding: 0.12em 0.18em 0.14em;
    vertical-align: baseline;
}
#scripture-viewer .semantic-mark sup {
    display: inline-block;
    margin-left: 0.04em;
    font-size: 0.58em;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    text-decoration-line: none;
    vertical-align: super;
    white-space: pre-wrap;
}
#scripture-viewer .semantic-mark--has-comment::after {
    content: "";
    position: absolute;
    top: -0.24em;
    right: -0.24em;
    width: 0.48em;
    height: 0.48em;
    border-radius: 9999px;
    background: #0f172a;
    box-shadow: 0 0 0 2px #ffffff;
}
#scripture-viewer .semantic-mark--background sup,
#scripture-viewer .semantic-format-background sup {
    border-radius: 0.2rem;
    background: inherit;
    color: inherit;
    padding: 0.04em 0.08em;
    transform: translate(-0.06em, 0.18em);
}
#scripture-viewer[data-annotations="hidden"] [data-reader-annotation]:not([data-reader-heading]),
#scripture-viewer[data-annotations="hidden"] [data-inline-commentary-shell],
#scripture-viewer[data-annotations="hidden"] br[data-format-line-break],
#scripture-viewer[data-annotations="hidden"] .scripture-structural-block,
#scripture-viewer[data-annotations="hidden"] .scripture-range-rails {
    display: none !important;
}
#scripture-viewer[data-annotations="hidden"] .scripture-heading-note,
#scripture-viewer[data-annotations="hidden"] [data-heading-edit-action] {
    display: none !important;
}
#scripture-viewer[data-annotations="hidden"] .semantic-mark {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#scripture-viewer[data-annotations="hidden"] .semantic-mark sup {
    display: none !important;
}
#scripture-viewer[data-annotations="hidden"] .semantic-mark--has-comment::after {
    display: none !important;
}
#scripture-viewer[data-annotations="hidden"] .semantic-format-bold {
    font-weight: inherit !important;
}
#scripture-viewer[data-annotations="hidden"] .semantic-format-italic {
    font-style: normal !important;
}
#scripture-viewer[data-annotations="hidden"] .semantic-format-underline,
#scripture-viewer[data-annotations="hidden"] .semantic-format-strike {
    text-decoration: none !important;
}
#scripture-viewer[data-annotations="hidden"] .semantic-format-background {
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    box-decoration-break: initial !important;
    -webkit-box-decoration-break: initial !important;
}
/* 각주 마커 (formal 260704-2130 Phase D) — 원어 버튼·노트 배지와 시각 구분: 작은 위첨자, 흐린 앰버 */
#scripture-viewer .scripture-footnote-marker {
    display: inline;
    cursor: pointer;
    font-size: 0.62em;
    line-height: 0;
    font-weight: 700;
    color: rgb(180 83 9 / 0.85);
    vertical-align: super;
    margin: 0 0.05em;
    padding: 0 0.1em;
    border-radius: 3px;
    user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
}
#scripture-viewer .scripture-footnote-marker:hover,
#scripture-viewer .scripture-footnote-marker:focus-visible {
    color: rgb(146 64 14);
    background: rgb(251 191 36 / 0.22);
    outline: none;
}
#scripture-viewer .scripture-footnote-marker.scripture-footnote-marker--active {
    color: rgb(146 64 14);
    background: rgb(251 191 36 / 0.35);
}
#scripture-viewer[data-scripture-theme="dark"] .scripture-footnote-marker {
    color: rgb(252 211 77 / 0.8);
}
#scripture-viewer[data-scripture-theme="dark"] .scripture-footnote-marker:hover,
#scripture-viewer[data-scripture-theme="dark"] .scripture-footnote-marker:focus-visible,
#scripture-viewer[data-scripture-theme="dark"] .scripture-footnote-marker.scripture-footnote-marker--active {
    color: rgb(253 230 138);
    background: rgb(251 191 36 / 0.2);
}
#scripture-viewer[data-footnotes="hidden"] .scripture-footnote-marker {
    display: none !important;
}
.scripture-footnote-item--active {
    border-color: rgb(251 191 36) !important;
    background: rgb(254 243 199) !important;
}
#scripture-viewer [data-inline-note-toggle] {
    display: none;
}
#scripture-viewer[data-note-display="collapsed"] [data-inline-note-toggle] {
    display: inline-flex;
}
#scripture-viewer[data-note-display="expanded"] [data-inline-note-toggle] {
    display: none !important;
}
#scripture-viewer[data-annotations="hidden"] [data-inline-note-toggle] {
    display: none !important;
}

/* 주석 숨김('전부 숨김') 시 상단 색상 의미 바도 함께 숨김 — 소유/비소유(게스트 공개노트) 공통 일관. (260706-2331 사용자 요청) */
#scripture-viewer[data-annotations="hidden"] .scripture-note-guide[data-edit-guide="0"] {
    display: none;
}
#scripture-viewer[data-note-display="collapsed"] .scripture-heading-note,
#scripture-viewer[data-note-display="collapsed"] [data-section-note-shell]:not([data-note-expanded="1"]) {
    display: none !important;
}
#scripture-viewer[data-note-display="collapsed"] [data-inline-commentary-shell]:not([data-section-note-shell]):not([data-note-expanded="1"]) [data-inline-commentary-view],
#scripture-viewer[data-note-display="collapsed"] [data-inline-commentary-shell]:not([data-section-note-shell]):not([data-note-expanded="1"]) .scripture-inline-commentary-view {
    display: none !important;
}
#scripture-viewer .msk-fui-image-lightbox {
    position: fixed !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    inset: 0 !important;
    border-radius: 0 !important;
}
#scripture-viewer .msk-fui-image-lightbox-shell {
    min-height: 100dvh !important;
    height: 100dvh !important;
}
#scripture-viewer .msk-fui-image-lightbox-header {
    position: absolute;
    top: 1.25rem;
    right: 1.75rem;
    z-index: 2;
    flex-shrink: 0;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
#scripture-viewer .msk-fui-image-lightbox-caption {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    border-top: 1px solid rgb(255 255 255 / 0.14);
    background: rgb(12 10 9 / 0.92);
    padding: 0.7rem 1rem 0.95rem;
    text-align: center;
}
#scripture-viewer .msk-fui-image-lightbox-title {
    display: block !important;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.4;
}
#scripture-viewer .msk-fui-image-lightbox-subtitle {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.72);
    line-height: 1.4;
}
#scripture-viewer .msk-fui-image-lightbox-close {
    border: 1px solid rgb(255 255 255 / 0.82) !important;
    background: rgb(0 0 0 / 0.62) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.28);
}
#scripture-viewer .msk-fui-image-lightbox-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
#scripture-viewer .msk-fui-image-lightbox-body img {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain;
}
#scripture-viewer .semantic-lightbox-nav,
#scripture-viewer .semantic-lightbox-dots {
    display: none;
}
#scripture-viewer .msk-fui-image-lightbox.is-semantic-gallery .semantic-lightbox-nav {
    position: fixed;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 0.75);
    border-radius: 9999px;
    background: rgb(0 0 0 / 0.58);
    color: #ffffff;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 16px 32px rgb(0 0 0 / 0.32);
}
#scripture-viewer .msk-fui-image-lightbox.is-semantic-gallery .semantic-lightbox-nav:hover,
#scripture-viewer .msk-fui-image-lightbox.is-semantic-gallery .semantic-lightbox-nav:focus-visible {
    background: rgb(0 0 0 / 0.78);
}
#scripture-viewer .semantic-lightbox-nav--prev {
    left: 1.25rem;
}
#scripture-viewer .semantic-lightbox-nav--next {
    right: 1.25rem;
}
#scripture-viewer .msk-fui-image-lightbox.is-semantic-gallery .semantic-lightbox-dots {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    max-width: min(34rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    overflow-x: auto;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 9999px;
    background: rgb(0 0 0 / 0.48);
    padding: 0.55rem 0.7rem;
}
#scripture-viewer .semantic-lightbox-dot {
    width: 0.6rem;
    height: 0.6rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.42);
}
#scripture-viewer .semantic-lightbox-dot.is-active {
    width: 1.45rem;
    background: #ffffff;
}
@media (max-width: 640px) {
    #scripture-viewer .msk-fui-image-lightbox.is-semantic-gallery .semantic-lightbox-nav {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.55rem;
    }
    #scripture-viewer .semantic-lightbox-nav--prev {
        left: 0.75rem;
    }
    #scripture-viewer .semantic-lightbox-nav--next {
        right: 0.75rem;
    }
    #scripture-viewer .msk-fui-image-lightbox.is-semantic-gallery .semantic-lightbox-dots {
        bottom: 0.85rem;
    }
}
#scripture-viewer .semantic-diagram-gallery {
    position: relative;
}
#scripture-viewer .semantic-diagram-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
#scripture-viewer .semantic-diagram-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
#scripture-viewer .semantic-diagram-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 0.82);
    border-radius: 9999px;
    background: rgb(0 0 0 / 0.55);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.24);
}
#scripture-viewer .semantic-diagram-nav--prev {
    left: 0.75rem;
}
#scripture-viewer .semantic-diagram-nav--next {
    right: 0.75rem;
}
#scripture-viewer .semantic-diagram-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}
#scripture-viewer .semantic-diagram-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background: #d6d3d1;
}
#scripture-viewer .semantic-diagram-dot.is-active {
    background: #292524;
}
#scripture-viewer .semantic-diagram-sort-list {
    display: grid;
    gap: 0.5rem;
}
#scripture-viewer .semantic-diagram-sort-item {
    cursor: grab;
}
#scripture-viewer .semantic-diagram-sort-item.is-dragging {
    cursor: grabbing;
    opacity: 0.55;
}
#scripture-viewer .semantic-mark[data-dialog-open],
#scripture-viewer [data-reader-annotation][data-dialog-open] {
    cursor: pointer;
}
#scripture-viewer[data-edit-mode="1"] .semantic-mark {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
#scripture-viewer .scripture-note-view-lock-tooltip {
    position: fixed;
    z-index: 2147483000;
    max-width: min(32rem, calc(100vw - 2rem));
    transform: translate(-0.35rem, -50%);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 0.75rem;
    background: #1c1917;
    color: #ffffff;
    padding: 0.7rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 18px 40px rgb(28 25 23 / 0.26);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
#scripture-viewer .scripture-note-view-lock-tooltip::after {
    content: "";
    position: absolute;
    left: -0.42rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    transform: translateY(-50%) rotate(45deg);
    background: #1c1917;
    border-bottom: 1px solid rgb(255 255 255 / 0.14);
    border-left: 1px solid rgb(255 255 255 / 0.14);
}
#scripture-viewer .scripture-note-view-lock-tooltip[data-placement="left"] {
    transform: translate(0.35rem, -50%);
}
#scripture-viewer .scripture-note-view-lock-tooltip[data-placement="left"]::after {
    left: auto;
    right: -0.42rem;
    border: 0;
    border-right: 1px solid rgb(255 255 255 / 0.14);
    border-top: 1px solid rgb(255 255 255 / 0.14);
}
#scripture-viewer .scripture-note-view-lock-tooltip.is-visible {
    transform: translate(0, -50%);
    opacity: 1;
}
#scripture-viewer .scripture-note-view-lock-tooltip[data-placement="left"].is-visible {
    transform: translate(0, -50%);
}
#scripture-viewer[data-annotations="hidden"] [data-existing-annotation],
#scripture-viewer[data-annotations="hidden"] .semantic-mark {
    pointer-events: none !important;
    cursor: inherit !important;
    -webkit-user-select: text;
    user-select: text;
}
body.term-highlight-on #scripture-viewer[data-annotations="hidden"] .semantic-mark:has(.scripture-term-link) {
    pointer-events: auto !important;
}
body.term-highlight-on #scripture-viewer[data-annotations="hidden"] .semantic-mark:has(.scripture-term-link) .scripture-term-link {
    pointer-events: auto !important;
    cursor: pointer !important;
}
#scripture-viewer[data-edit-mode="1"] .semantic-mark.semantic-mark--editing {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}
#scripture-viewer[data-annotations="hidden"] .semantic-mark.semantic-mark--editing {
    outline: 0 !important;
}
/* 본문 굵게 — 설정 시트의 '글꼴' 옆 토글(기본 꺼짐). 절 본문만 굵게 하고 UI·버튼은 건드리지 않는다.
   700 을 쓰는 이유: 웹폰트가 400/700 두 weight 만 싣는다(ReaderFontCatalog). 600 은 실제 면이
   없어 브라우저가 합성하거나 700 으로 스냅되므로, 처음부터 실재하는 굵기를 지정한다. */
#scripture-viewer[data-font-bold="1"] .scripture-passage {
    font-weight: 700;
}
#scripture-viewer .scripture-passage {
    font-family: var(--scripture-body-font-family);
    font-size: var(--scripture-body-font-size);
    line-height: var(--scripture-body-line-height);
    position: relative;
    /* 번호 칸과 본문 칸의 상단 박스가 아니라 첫 글자 기준선을 맞춘다.
       좁은 화면에서 본문이 여러 줄로 접혀도 절 번호가 첫 줄 위로 뜨지 않는다. */
    align-items: baseline;
    padding: var(--scripture-selected-passage-padding-y) var(--scripture-selected-passage-padding-x);
    margin-bottom: var(--scripture-passage-gap);
    scroll-margin-top: 9.5rem;
    transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, padding 0.14s ease, margin 0.14s ease;
}
#scripture-viewer:not([data-edit-mode="1"]) .scripture-passage {
    cursor: pointer;
}
#scripture-viewer .scripture-passage.is-selected {
    border-color: #f59e0b;
    background: #fffbeb;
    box-shadow: 0 0 0 1px rgb(245 158 11 / 0.18), inset 3px 0 0 #f59e0b;
}
/* 선택 액션 3버튼(전체해제·말씀 카드·전체복사)을 하나의 flex 바에 담아 배치를 일정하게 한다.
   예전엔 버튼마다 고정 right(0.5/5.2/10.4rem)라 라벨 폭(복사↔전체복사 등)에 따라 간격이 들쭉날쭉했다. */
#scripture-viewer .scripture-verse-action-bar {
    position: absolute;
    right: 0.5rem;
    top: calc(100% + 0.32rem);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
#scripture-viewer .scripture-verse-copy-button {
    display: inline-flex;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid #f59e0b;
    background: #ffffff;
    color: #92400e;
    padding: 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 6px 16px rgb(28 25 23 / 0.12);
}
#scripture-viewer .scripture-verse-copy-button:hover {
    background: #f59e0b;
    color: #ffffff;
}
/* 선택 구절 → 말씀 카드. action-bar 안에서 flex 로 배치되므로 고정 right 불필요. */
#scripture-viewer .scripture-verse-card-button {
    border-color: #d6d3d1;
    color: #57534e;
    text-decoration: none;
}
#scripture-viewer .scripture-verse-card-button:hover {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}
#scripture-viewer .scripture-verse-clear-button {
    display: inline-flex;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid #d6d3d1;
    background: #ffffff;
    color: #57534e;
    padding: 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 6px 16px rgb(28 25 23 / 0.1);
}
#scripture-viewer .scripture-verse-clear-button:hover {
    border-color: #78716c;
    background: #78716c;
    color: #ffffff;
}
#scripture-viewer[data-font-size="xs"] {
    --scripture-body-font-size: 0.78rem;
    --scripture-body-line-height: 1.68rem;
    --scripture-text-10: 0.54rem;
    --scripture-text-11: 0.59rem;
    --scripture-text-xs: 0.64rem;
    --scripture-text-sm: 0.75rem;
    --scripture-text-base: 0.86rem;
    --scripture-text-lg: 0.97rem;
    --scripture-text-xl: 1.08rem;
    --scripture-text-2xl: 1.29rem;
}
#scripture-viewer[data-font-size="sm"] {
    --scripture-body-font-size: 0.875rem;
    --scripture-body-line-height: 1.8rem;
    --scripture-text-10: 0.575rem;
    --scripture-text-11: 0.6325rem;
    --scripture-text-xs: 0.69rem;
    --scripture-text-sm: 0.805rem;
    --scripture-text-base: 0.92rem;
    --scripture-text-lg: 1.035rem;
    --scripture-text-xl: 1.15rem;
    --scripture-text-2xl: 1.38rem;
}
#scripture-viewer[data-font-size="md"] {
    --scripture-body-font-size: 0.95rem;
    --scripture-body-line-height: 1.85rem;
    --scripture-text-10: 0.625rem;
    --scripture-text-11: 0.6875rem;
    --scripture-text-xs: 0.75rem;
    --scripture-text-sm: 0.875rem;
    --scripture-text-base: 1rem;
    --scripture-text-lg: 1.125rem;
    --scripture-text-xl: 1.25rem;
    --scripture-text-2xl: 1.5rem;
}
#scripture-viewer[data-font-size="lg"] {
    --scripture-body-font-size: 1.25rem;
    --scripture-body-line-height: 2.5rem;
    --scripture-text-10: 0.7rem;
    --scripture-text-11: 0.77rem;
    --scripture-text-xs: 0.84rem;
    --scripture-text-sm: 0.98rem;
    --scripture-text-base: 1.12rem;
    --scripture-text-lg: 1.26rem;
    --scripture-text-xl: 1.4rem;
    --scripture-text-2xl: 1.68rem;
}
#scripture-viewer[data-font-size="xl"] {
    --scripture-body-font-size: 1.5rem;
    --scripture-body-line-height: 3rem;
    --scripture-text-10: 0.78rem;
    --scripture-text-11: 0.86rem;
    --scripture-text-xs: 0.94rem;
    --scripture-text-sm: 1.09rem;
    --scripture-text-base: 1.25rem;
    --scripture-text-lg: 1.4rem;
    --scripture-text-xl: 1.56rem;
    --scripture-text-2xl: 1.875rem;
}
#scripture-viewer[data-font-family="serif"] {
    --scripture-body-font-family: "Noto Serif KR", Georgia, serif;
}
#scripture-viewer[data-font-family="sans"] {
    --scripture-body-font-family: "Noto Sans KR", Inter, system-ui, sans-serif;
}
#scripture-viewer[data-font-family="system"] {
    --scripture-body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}