/* ────────────────────────────────────────────────
   Verse Font Size — :root 변수로 전역 적용
   설계 문서: docs/bible/bible-verse-dynamic-font-size.md
   인라인 부트스트랩 스크립트(fragments/head.html)가 :root 변수를 paint 전 덮어쓴다.
   ──────────────────────────────────────────────── */
:root { --verse-font-size: 1.125rem; }

.verse-text {
    font-size: var(--verse-font-size);
    transition: font-size 150ms ease-out;
}

/* 컨트롤 — top-nav-right 내부 컨테이너. 토글 + 절대 위치 dropdown 패널 */
.verse-font-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 토글 — top-nav-btn 컨벤션 따름 (Bootstrap btn-outline-secondary 클래스 직접 적용됨).
   verse-font-toggle 고유 사이즈/폰트는 유지하되 nav 와 어울리는 폭 조정. */
.verse-font-toggle.top-nav-btn {
    font-weight: 600;
    font-size: 1rem;
}

/* 펼친 패널 — 토글 하단에 절대 위치 dropdown (계정 메뉴와 동일 패턴) */
.verse-font-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem var(--color-shadow);
    white-space: nowrap;
}

/* stepper — Aa 텍스트가 비례 크기로 자기설명형 시각 위계 제공 */
.verse-font-stepper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

/* 점 = 44x44 hit + 내부 Aa 텍스트(비례 크기). 활성 상태는 채워진 원형 배경 */
.verse-font-dot {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6c757d);
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 120ms, color 120ms;
}

.verse-font-dot-label {
    font-weight: 500;
    line-height: 1;
    transition: font-weight 120ms;
}

/* 단계별 Aa 비례 크기 — 사용자가 보자마자 "어느 게 큰 글씨인지" 인지 가능 */
.verse-font-dot[data-step="1"] .verse-font-dot-label { font-size: 0.75rem; }
.verse-font-dot[data-step="2"] .verse-font-dot-label { font-size: 0.875rem; }
.verse-font-dot[data-step="3"] .verse-font-dot-label { font-size: 1rem; }
.verse-font-dot[data-step="4"] .verse-font-dot-label { font-size: 1.25rem; }
.verse-font-dot[data-step="5"] .verse-font-dot-label { font-size: 1.5rem; }

/* 활성 단계 — 채워진 원 + 흰색 굵은 텍스트 */
.verse-font-dot[aria-checked="true"] {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}
.verse-font-dot[aria-checked="true"] .verse-font-dot-label {
    font-weight: 700;
}

/* 호버(데스크탑) — 미세 강조 */
@media (hover: hover) and (pointer: fine) {
    .verse-font-dot:hover:not([aria-checked="true"]) {
        background: var(--color-bg-elevated-strong, rgba(0, 0, 0, 0.06));
        color: var(--color-text-primary);
    }
}

.verse-font-dot:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
    border-radius: 50%;
}

/* 우측 컨트롤 */
.verse-font-reset {
    min-width: 44px;
    height: 44px;
    padding: 0 0.875rem;
    border: 1px solid var(--color-border-control);
    background: transparent;
    color: var(--color-text-primary);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.verse-font-reset:disabled { opacity: 0.4; cursor: not-allowed; }
.verse-font-reset .verse-font-reset-icon { display: none; }

.verse-font-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 다크 모드 — 활성 단계 대비 보강 */
html[data-theme="dark"] .verse-font-dot[aria-checked="true"] {
    background: #4ea3ff;
    color: #0f1216;
}

/* 모션 감소 */
@media (prefers-reduced-motion: reduce) {
    .verse-text,
    .verse-font-dot,
    .verse-font-dot-label,
    .verse-font-control { transition: none; }
}

/* 고대비 — 활성 단계 외곽선 추가 */
@media (prefers-contrast: more) {
    .verse-font-dot[aria-checked="true"] {
        outline: 2px solid var(--color-text-primary);
        outline-offset: -4px;
    }
}

/* 모바일 — dropdown 을 viewport 중앙 정렬로 변경 (fixed + translateX).
   상대 위치(absolute right:0) 는 좁은 화면에서 토글에 anchor 되어 좌측으로 늘어나
   시각적 불균형. 중앙 정렬이 thumb reach 와 시각 위계 모두 유리. */
@media (max-width: 419.98px) {
    .verse-font-panel {
        position: fixed;
        top: calc(var(--top-nav-height, 52px) + 0.25rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        gap: 0.25rem;
        padding: 0.5rem 0.5rem;
    }

    /* top-nav 가 스크롤로 숨겨졌을 때 패널도 화면 상단에 붙도록 */
    .has-fixed-nav.top-nav-hidden .verse-font-panel {
        top: 0.25rem;
    }

    .verse-font-stepper { gap: 0; }

    .verse-font-reset {
        width: 44px;
        padding: 0;
        font-size: 1.125rem;
    }
    .verse-font-reset .verse-font-reset-label { display: none; }
    .verse-font-reset .verse-font-reset-icon { display: inline; }
}

/* 인쇄 — 컨트롤 숨김, 본문 기본 크기 */
@media print {
    .verse-font-control { display: none; }
    .verse-text { font-size: 1rem !important; }
}

/* 장 메모 / 읽음 버튼 50:50 균등 배치 */
.flex-half {
    flex: 1 1 0;
    min-width: 0;
}

/* 읽음 완료 버튼 */
.chapter-memo-btn {
    --bs-btn-color: var(--color-text-primary);
    --bs-btn-border-color: var(--color-border-control);
    --bs-btn-hover-color: var(--color-text-primary);
    --bs-btn-hover-bg: var(--color-bg-elevated);
    --bs-btn-hover-border-color: var(--color-border-control);
    --bs-btn-active-color: var(--color-text-primary);
    --bs-btn-active-bg: var(--color-bg-elevated);
    --bs-btn-active-border-color: var(--color-border-control);
}

.chapter-memo-btn.btn-secondary {
    --bs-btn-color: var(--color-text-primary);
    --bs-btn-bg: var(--color-bg-elevated-strong);
    --bs-btn-border-color: var(--color-border-control);
    --bs-btn-hover-color: var(--color-text-primary);
    --bs-btn-hover-bg: var(--color-bg-elevated-strong-hover);
    --bs-btn-hover-border-color: var(--color-border-control);
    --bs-btn-active-color: var(--color-text-primary);
    --bs-btn-active-bg: var(--color-bg-elevated-strong-hover);
    --bs-btn-active-border-color: var(--color-border-control);
}

.mark-read-btn {
    --bs-btn-color: #157347;
    --bs-btn-border-color: rgba(25, 135, 84, 0.45);
    --bs-btn-hover-color: #0f5132;
    --bs-btn-hover-bg: rgba(25, 135, 84, 0.12);
    --bs-btn-hover-border-color: rgba(25, 135, 84, 0.55);
    --bs-btn-active-color: #0f5132;
    --bs-btn-active-bg: rgba(25, 135, 84, 0.18);
    --bs-btn-active-border-color: rgba(25, 135, 84, 0.65);
}

html[data-theme="dark"] .mark-read-btn {
    --bs-btn-color: #8fd8b2;
    --bs-btn-border-color: rgba(117, 183, 152, 0.5);
    --bs-btn-hover-color: #d7f5e3;
    --bs-btn-hover-bg: rgba(117, 183, 152, 0.14);
    --bs-btn-hover-border-color: rgba(117, 183, 152, 0.65);
    --bs-btn-active-color: #d7f5e3;
    --bs-btn-active-bg: rgba(117, 183, 152, 0.2);
    --bs-btn-active-border-color: rgba(117, 183, 152, 0.72);
}

.mark-read-btn.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #146c43;
}

html[data-theme="dark"] .mark-read-btn.btn-success {
    --bs-btn-color: #0f1216;
    --bs-btn-bg: #75b798;
    --bs-btn-border-color: #75b798;
    --bs-btn-hover-color: #0f1216;
    --bs-btn-hover-bg: #8fd8b2;
    --bs-btn-hover-border-color: #8fd8b2;
    --bs-btn-active-color: #0f1216;
    --bs-btn-active-bg: #8fd8b2;
    --bs-btn-active-border-color: #8fd8b2;
}

.mark-read-btn.read-done {
    pointer-events: none;
    opacity: 1;
}

/* 메모 박스 */
.memo-container {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 1rem;
    color: var(--color-text-primary);
    box-shadow: 0 0.125rem 0.25rem var(--color-shadow);
}

.memo-container textarea {
    resize: vertical;
}

.verse-text {
    cursor: pointer;
    display: block;
    line-height: 1.6;
    padding: 0;
}

html[data-theme="dark"] .verse-text,
html[data-theme="dark"] .verse-text.text-body {
    color: #ffffff !important;
}

.verse-text.active {
    color: #0d6efd;
    font-weight: bold;
    text-decoration: underline;
}

.verse-highlight-yellow {
    background-color: #fff59d;
    border-radius: 4px;
    padding: 2px 4px;
}

.verse-highlight-green {
    background-color: #c8f7c5;
    border-radius: 4px;
    padding: 2px 4px;
}

.verse-highlight-pink {
    background-color: #ffd6e7;
    border-radius: 4px;
    padding: 2px 4px;
}

.verse-highlight-blue {
    background-color: #bbdefb;
    border-radius: 4px;
    padding: 2px 4px;
}

.verse-highlight-purple {
    background-color: #e1bee7;
    border-radius: 4px;
    padding: 2px 4px;
}

.verse-highlight-orange {
    background-color: #ffe0b2;
    border-radius: 4px;
    padding: 2px 4px;
}

html[data-theme="dark"] .verse-text.verse-highlight-yellow,
html[data-theme="dark"] .verse-text.verse-highlight-green,
html[data-theme="dark"] .verse-text.verse-highlight-pink,
html[data-theme="dark"] .verse-text.verse-highlight-blue,
html[data-theme="dark"] .verse-text.verse-highlight-purple,
html[data-theme="dark"] .verse-text.verse-highlight-orange,
html[data-theme="dark"] .verse-text.text-body.verse-highlight-yellow,
html[data-theme="dark"] .verse-text.text-body.verse-highlight-green,
html[data-theme="dark"] .verse-text.text-body.verse-highlight-pink,
html[data-theme="dark"] .verse-text.text-body.verse-highlight-blue,
html[data-theme="dark"] .verse-text.text-body.verse-highlight-purple,
html[data-theme="dark"] .verse-text.text-body.verse-highlight-orange,
html[data-theme="dark"] .verse-text.verse-spotlight-target,
html[data-theme="dark"] .verse-text.text-body.verse-spotlight-target {
    color: #1f2933 !important;
}

/* CSS-only Memo Icon */
.verse-has-memo {
    position: relative;
}

/* Emoji Memo Icon */
.verse-has-memo::after {
    content: '📝';
    display: inline-block;
    margin-left: 0.35rem;
    vertical-align: baseline;
    position: relative;
    top: -0.08em;
    font-size: 0.9rem;
    line-height: 1;
    filter: grayscale(1);
    /* Muted by default */
    opacity: 0.6;
    transition: all 0.2s ease;
}

/* Active/Hover State */
.verse-has-memo::after,
.verse-has-memo:hover::after {
    filter: grayscale(0);
    /* Full color */
    opacity: 1;
    transform: scale(1.1);
}

/* 검색에서 이동 시 스포트라이트 효과 (상/하단 nav 보다 낮은 z-index) */
.verse-spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.verse-spotlight-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.verse-spotlight-target {
    position: relative;
    z-index: 999;
    color: #1f2933;
    transition: color 0.4s ease;
}

.verse-spotlight-target-td {
    position: relative;
    z-index: 999;
}

/* 스포트라이트 대상 행 — 구절 번호 칸 + 본문 칸을 하나의 흰 카드로 함께 강조 */
.verse-table tr.verse-spotlight-target-row td {
    position: relative;
    z-index: 999;
    background: #fff;
    color: #1f2933;
    border-color: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.4s ease, background 0.4s ease;
}

/* 카드 좌측 끝(구절 번호) — 왼쪽 모서리 둥글게 + 좌측 그림자.
   clip-path 로 오른쪽(이음새) 방향 그림자 번짐을 차단해 세로 구분선이 생기지 않도록 함. */
.verse-table tr.verse-spotlight-target-row td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    box-shadow: -6px 4px 24px rgba(0, 0, 0, 0.25);
    clip-path: inset(-40px 0 -40px -40px);
}

/* 카드 우측 끝(본문) — 오른쪽 모서리 둥글게 + 우측 그림자.
   첫 번째 그림자(blur 0, 흰색 솔리드)를 왼쪽으로 12px 확장해 셀 이음새를 흰색으로 덮음.
   모바일 DPR 서브픽셀 렌더링 시 셀 사이 hairline 틈으로 어두운 오버레이가
   비쳐 세로 구분선처럼 보이는 문제 방지. clip-path 왼쪽 여유(-12px)는 이 솔리드
   확장분만 통과시키고 blur 그림자의 이음새 번짐은 흰 솔리드가 위에서 가림. */
.verse-table tr.verse-spotlight-target-row td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: -12px 0 0 0 #fff, 6px 4px 24px rgba(0, 0, 0, 0.25);
    clip-path: inset(-40px -40px -40px -12px);
}

/* 다크 모드 — 흰 카드 위 텍스트/번호 가독성 확보 (기본 흰색 번호를 어둡게 덮어씀).
   다크 모드 td border-color 규칙보다 우선순위를 높여 카드 내부 가로 구분선을 숨김. */
html[data-theme="dark"] .verse-table tr.verse-spotlight-target-row td,
html[data-theme="dark"] .verse-table tr.verse-spotlight-target-row td:first-child {
    background: #fff;
    color: #1f2933;
    border-color: transparent;
}

.verse-table td {
    vertical-align: baseline;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eef1f4;
}

.verse-table tbody tr:first-child td {
    border-top: 1px solid #eef1f4;
}

html[data-theme="dark"] .verse-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .verse-table tbody tr:first-child td {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.verse-table td:first-child {
    width: 1.75rem;
    text-align: right;
    padding-left: 0;
    padding-right: 0.4rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .verse-table td:first-child {
    color: #ffffff;
}

.verse-fab {
    position: fixed;
    right: 1.5rem;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 1050;
}

/* 배경 딤 처리 (Backdrop) */
.verse-fab::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    /* 배경을 어둡게 눌러줌 */
    backdrop-filter: blur(2px);
    /* 블러 효과로 포커스 집중 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: -1;
    /* 버튼과 메뉴보다 뒤에 위치 */
    pointer-events: none;
}

.verse-fab.is-open::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* 배경 클릭 시 닫기 처리를 위해 (JS 별도 처리 필요하지만 시각적 차단 효과) */
}

.verse-fab-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .verse-fab-toggle:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 6px 14px rgba(13, 110, 253, 0.3);
        background: linear-gradient(135deg, #0b5ed7, #084298);
    }
}

.verse-fab-toggle:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
}

.verse-fab-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.3);
}

.verse-fab-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.verse-fab.is-open .verse-fab-icon {
    transform: rotate(135deg);
}

.verse-fab-menu {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: flex;
    flex-direction: column;
    padding: 0;
    pointer-events: none;
}

.verse-fab.is-open .verse-fab-menu {
    pointer-events: auto;
}

/* 아이템 간 간격 (Gap 대신 사용) */
.verse-fab-item + .verse-fab-item {
    margin-top: 0.75rem;
}

.verse-fab-item + .verse-fab-submenu {
    /* 서브메뉴가 열릴 때만 간격 적용을 위해 트랜지션 처리 */
    margin-top: 0;
    transition: margin-top 0.2s ease-in;
}

.verse-fab.is-open .verse-fab-item + .verse-fab-submenu.is-open {
    margin-top: 0.5rem;
    /* 기존 gap보다 약간 좁게 조정 or 0.75rem */
    transition: margin-top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.verse-fab-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    color: #333;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    /* 닫힐 때는 딜레이 없이 빠르게 매끄럽게 사라지도록 수정 */
    transition: all 0.2s ease-in;
    cursor: pointer;
    text-decoration: none;
    justify-content: flex-end;
}

/* 메뉴 아이템 순차 등장을 위한 딜레이 & 바운스 효과 (열릴 때만 적용) */
.verse-fab.is-open .verse-fab-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* 열릴 때는 기존의 바운스 효과 유지 */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.verse-fab.is-open .verse-fab-item:nth-last-child(1) {
    transition-delay: 0.05s;
}

.verse-fab.is-open .verse-fab-item:nth-last-child(2) {
    transition-delay: 0.1s;
}

.verse-fab.is-open .verse-fab-item:nth-last-child(3) {
    transition-delay: 0.15s;
}

.verse-fab.is-open .verse-fab-item:nth-last-child(4) {
    transition-delay: 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .verse-fab-item:hover {
        background: #f8f9fa;
        color: #0d6efd;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
}

.verse-fab-item-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.verse-fab-item-icon {
    font-size: 1.1rem;
}

.verse-fab-submenu {
    /* 3열 그리드 레이아웃 */
    display: grid;
    grid-template-columns: repeat(3, 32px);
    justify-content: end;
    gap: 0.5rem;

    /* 닫힌 상태 (Default) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    max-height: 0;
    padding-top: 0;
    overflow: hidden;
    /* 높이 애니메이션 시 내용 숨김 (그림자 등 잘릴 수 있으나 페이드아웃으로 커버) */

    /* 닫힐 때: 빠르고 부드럽게 */
    transition: opacity 0.2s ease-in,
    transform 0.2s ease-in,
    max-height 0.2s ease-in,
    padding-top 0.2s ease-in,
    visibility 0.2s ease-in;
}

.verse-fab-submenu.is-open {
    /* 열린 상태 */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 120px;
    /* 충분한 높이 확보 (2행) */
    padding-top: 0.3rem;

    /* 열릴 때: 바운스 효과 */
    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    max-height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding-top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    visibility 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.verse-fab-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
}

.verse-fab-color-yellow {
    background: #fff59d;
}

.verse-fab-color-green {
    background: #c8f7c5;
}

.verse-fab-color-pink {
    background: #ffd6e7;
}

.verse-fab-color-blue {
    background: #bbdefb;
}

.verse-fab-color-purple {
    background: #e1bee7;
}

.verse-fab-color-orange {
    background: #ffe0b2;
}

.verse-fab-color-clear {
    background: #f5f5f5;
    color: #999;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 장 메모 — native <dialog> */
.chapter-memo-panel {
    background: var(--color-bg-elevated-bright);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    width: 90%;
    max-width: 500px;
    padding: 0;
    box-shadow: 0 0.5rem 1.5rem var(--color-shadow);
}

html[data-theme="dark"] .chapter-memo-panel {
    background: var(--color-bg-elevated);
}

.chapter-memo-panel::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.chapter-memo-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.chapter-memo-panel-body {
    padding: 1rem;
}

.chapter-memo-panel-body textarea {
    resize: vertical;
}

.chapter-memo-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 576px) {
    .verse-fab {
        right: 1rem;
        bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .verse-fab-item {
        min-width: 110px;
    }
}