/* 공개 화면, 관리자 미리보기와 Tiptap 편집 본문이 같은 문서 규칙을 사용한다. */
.policy-rich-text {
    --policy-document-max-width: 68.75rem;
    background: #fff;
    box-sizing: border-box;
    color: #212529;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.45;
    margin-inline: auto;
    max-width: var(--policy-document-max-width);
    overflow-wrap: anywhere;
    width: 100%;
    word-break: keep-all;
}

.policy-rich-text *,
.policy-rich-text *::before,
.policy-rich-text *::after {
    box-sizing: border-box;
}

.policy-rich-text > :first-child {
    margin-top: 0;
}

.policy-rich-text > :last-child {
    margin-bottom: 0;
}

.policy-rich-text h2,
.policy-rich-text h3 {
    font-weight: 700;
    line-height: 1.45;
}

.policy-rich-text h2 {
    font-size: 1rem;
    margin: 1.5rem 0 .75rem;
}

.policy-rich-text h3 {
    font-size: .9375rem;
    margin: 1.25rem 0 .625rem;
}

.policy-rich-text p {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0 0 .25rem;
    padding: 0;
}

/*
 * 줄 간격 단계는 줄 높이와 문단 사이 여백을 함께 조절한다.
 * 목록은 첫 문단의 설정을 항목의 줄 높이와 여백에도 적용한다.
 * 직계 자식만 검사하여 중첩 목록의 설정이 상위 항목까지 바뀌지 않게 한다.
 */
.policy-rich-text [data-line-spacing="none"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="none"]) {
    line-height: 1.25;
}

.policy-rich-text p[data-line-spacing="none"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="none"]) {
    margin-bottom: 0;
}

.policy-rich-text [data-line-spacing="very-tight"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="very-tight"]) {
    line-height: 1.35;
}

.policy-rich-text p[data-line-spacing="very-tight"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="very-tight"]) {
    margin-bottom: .125rem;
}

.policy-rich-text [data-line-spacing="tight"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="tight"]) {
    line-height: 1.45;
}

.policy-rich-text p[data-line-spacing="tight"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="tight"]) {
    margin-bottom: .25rem;
}

.policy-rich-text [data-line-spacing="normal"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="normal"]) {
    line-height: 1.5;
}

.policy-rich-text p[data-line-spacing="normal"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="normal"]) {
    margin-bottom: .5rem;
}

.policy-rich-text [data-line-spacing="wide"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="wide"]) {
    line-height: 1.7;
}

.policy-rich-text p[data-line-spacing="wide"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="wide"]) {
    margin-bottom: .625rem;
}

.policy-rich-text [data-line-spacing="very-wide"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="very-wide"]) {
    line-height: 2;
}

.policy-rich-text p[data-line-spacing="very-wide"],
.policy-rich-text li:has(> p:first-child[data-line-spacing="very-wide"]) {
    margin-bottom: .75rem;
}

/* 기존 편집기가 저장한 숫자형 줄 간격도 겹침 없이 표시한다. */
.policy-rich-text [style*="line-height:1.0"],
.policy-rich-text [style*="line-height: 1.0"],
.policy-rich-text li:has(> p:first-child:is([style*="line-height:1.0"], [style*="line-height: 1.0"])) {
    line-height: 1.25 !important;
}

.policy-rich-text p[style*="line-height:1.0"],
.policy-rich-text p[style*="line-height: 1.0"],
.policy-rich-text li:has(> p:first-child:is([style*="line-height:1.0"], [style*="line-height: 1.0"])) {
    margin-bottom: 0;
}

.policy-rich-text [style*="line-height:1.2"],
.policy-rich-text [style*="line-height: 1.2"],
.policy-rich-text li:has(> p:first-child:is([style*="line-height:1.2"], [style*="line-height: 1.2"])) {
    line-height: 1.35 !important;
}

.policy-rich-text p[style*="line-height:1.2"],
.policy-rich-text p[style*="line-height: 1.2"],
.policy-rich-text li:has(> p:first-child:is([style*="line-height:1.2"], [style*="line-height: 1.2"])) {
    margin-bottom: .125rem;
}

/* 관리자 폼의 목록 규칙보다 우선하며 편집기와 공개 화면에 같은 들여쓰기를 사용한다. */
.policy-rich-text.policy-rich-text ol,
.policy-rich-text.policy-rich-text ul {
    margin: 0 0 .75rem;
    padding: 0 0 0 1.5rem;
    list-style-position: outside;
}

.policy-rich-text.policy-rich-text ul > li {
    list-style-type: disc;
}

.policy-rich-text.policy-rich-text ol > li {
    list-style-type: decimal;
}

.policy-rich-text li {
    font-size: inherit;
    /* 상위 항목만 수정했을 때 선택하지 않은 중첩 항목에 간격이 전파되지 않게 한다. */
    line-height: 1.45;
    margin-bottom: .25rem;
    padding: 0;
}

.policy-rich-text.policy-rich-text li > ol,
.policy-rich-text.policy-rich-text li > ul {
    margin-bottom: 0;
}

.policy-rich-text li > p:last-child {
    margin-bottom: 0;
}

.policy-rich-text blockquote {
    border-left: 3px solid var(--bs-border-color, #dee2e6);
    color: #6c757d;
    margin: 1rem 0;
    padding: .25rem 0 .25rem 1rem;
}

.policy-rich-text hr {
    border: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    margin: 1.5rem 0;
    opacity: 1;
}

.policy-rich-text a {
    color: #0d6efd;
    overflow-wrap: anywhere;
    text-decoration: underline;
}

.policy-rich-text table {
    border-collapse: collapse;
    display: table;
    margin: 1rem 0;
    table-layout: fixed;
    width: 100%;
}

.policy-rich-text th,
.policy-rich-text td {
    border: 1px solid #dee2e6;
    font-size: inherit;
    line-height: inherit;
    padding: .625rem .75rem;
    text-align: left;
    vertical-align: middle;
}

.policy-rich-text th {
    background: #f8f9fa;
    font-weight: 700;
    text-align: center;
}

.policy-rich-text td[data-cell-vertical-align="top"],
.policy-rich-text th[data-cell-vertical-align="top"] {
    vertical-align: top;
}

.policy-rich-text td[data-cell-vertical-align="middle"],
.policy-rich-text th[data-cell-vertical-align="middle"] {
    vertical-align: middle;
}

.policy-rich-text td[data-cell-vertical-align="bottom"],
.policy-rich-text th[data-cell-vertical-align="bottom"] {
    vertical-align: bottom;
}

.policy-rich-text td[data-cell-background="none"],
.policy-rich-text th[data-cell-background="none"] {
    background: #fff;
}

.policy-rich-text td[data-cell-background="neutral"],
.policy-rich-text th[data-cell-background="neutral"] {
    background: #f8f9fa;
}

.policy-rich-text td[data-cell-background="blue"],
.policy-rich-text th[data-cell-background="blue"] {
    background: #e7f1ff;
}

.policy-rich-text td[data-cell-background="yellow"],
.policy-rich-text th[data-cell-background="yellow"] {
    background: #fff3cd;
}

.policy-rich-text td[data-cell-padding="compact"],
.policy-rich-text th[data-cell-padding="compact"] {
    padding: .375rem .5rem;
}

.policy-rich-text td[data-cell-padding="spacious"],
.policy-rich-text th[data-cell-padding="spacious"] {
    padding: .875rem 1rem;
}

.policy-rich-text img {
    display: block;
    height: auto;
    margin: 1rem auto;
    max-width: 100%;
}

.policy-admin-readonly {
    background: #fff;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    max-width: calc(var(--policy-document-max-width) + 3rem);
    padding: 1.5rem;
}

/* 등록 버전이 없을 때 사용하는 기존 정책 템플릿의 표도 같은 스타일을 유지한다. */
.policy-table {
    overflow-x: auto;
}

.policy-table th {
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.policy-table td {
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .policy-rich-text table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: normal;
    }

    .policy-rich-text th,
    .policy-rich-text td {
        min-width: 8rem;
    }

    .policy-table table,
    .policy-table thead,
    .policy-table tbody,
    .policy-table th,
    .policy-table td,
    .policy-table tr {
        display: block;
    }

    .policy-table thead {
        display: none;
    }

    .policy-table tr {
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        overflow: hidden;
    }

    .policy-table td {
        border: 0;
        border-bottom: 1px solid var(--bs-border-color);
        padding: .75rem;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .policy-table td:last-child {
        border-bottom: 0;
    }

    .policy-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--bs-secondary-color);
        font-weight: 700;
        margin-bottom: .25rem;
    }
}