/*
 * 글 속 성경 구절 링크와 미리보기. 설계 문서: docs/common/scripture-links.md 3장
 *
 * 링크는 글자색을 그대로 두고 점선 밑줄만 긋는다. 사전 설명 한 항목에 인용이 10~25개라 파랗게 칠하면 본문이
 * 링크 목록이 된다. 색은 theme.css 토큰만 쓴다.
 */

.scripture-link {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: var(--color-text-secondary);
    text-underline-offset: 3px;
    /* 터치 대상이 글자 높이뿐이라 위아래로 조금 넓힌다. 줄 간격은 바뀌지 않는다(인라인 padding). */
    padding-block: 2px;
}

.scripture-link[aria-expanded="true"] {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .scripture-link:hover {
        color: inherit;
        text-decoration-style: solid;
        text-decoration-color: currentColor;
    }
}

.scripture-preview {
    padding: 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    box-shadow: 0 10px 30px var(--color-shadow);
}

.scripture-preview:focus {
    outline: none;
}

.scripture-preview-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.scripture-preview-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    padding: 0.875rem 1rem 0.5rem;
}

.scripture-preview-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.scripture-preview-translation {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.scripture-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 1rem;
}

.scripture-preview-body:focus {
    outline: none;
}

.scripture-preview-body:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.scripture-preview-verse {
    margin: 0 0 0.5rem;
    line-height: 1.7;
    white-space: normal;
}

.scripture-preview-number {
    margin-right: 0.35em;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.scripture-preview-message {
    margin: 0 0 0.5rem;
    color: var(--color-text-secondary);
}

.scripture-preview-more {
    font-size: 0.875rem;
}

.scripture-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.875rem;
    border-top: 1px solid var(--color-border);
}

/* 데스크톱 — 링크 아래(모자라면 위) 팝오버. 위치는 preview.js 가 문서 좌표로 넣는다. */
.scripture-popover {
    position: absolute;
    z-index: 1040;
    width: min(380px, calc(100vw - 24px));
    max-height: min(60vh, 460px);
    border-radius: 12px;
}

.scripture-popover:not([hidden]) {
    display: flex;
    flex-direction: column;
}

/*
 * 터치 — 바닥에 붙는 바텀시트. display 는 [open] 에만 건다 — UA 의 `dialog:not([open]) { display: none }` 에
 * 작성자 스타일이 이겨 닫힌 시트가 문서 끝에 그려진다(word-stats.css 와 같은 이유).
 * UA 의 `dialog:modal` max-width 를 none 으로 되돌려야 좌우 틈 없이 붙는다.
 */
.scripture-sheet {
    width: 100%;
    max-width: none;
    max-height: 75vh;
    max-height: 75dvh;
    margin: auto auto 0;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px var(--color-shadow);
}

.scripture-sheet[open] {
    display: flex;
    flex-direction: column;
}

.scripture-sheet::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
}

.scripture-sheet .scripture-preview-actions {
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
}

.scripture-sheet .scripture-preview-actions .btn {
    flex: 1 1 0;
    padding-block: 0.5rem;
}