* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard';
    font-style: normal;
    background-color: #f5f5f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.theme-dark {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.theme-dark .container {
    background-color: #2d2d2d;
    color: #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: #0F64C0;
    color: #fff;
}

.btn-primary:hover {
    background: #1976d2;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #6c757d;
    color: #fff;
}

.btn-secondary:hover {
    background: #5a6268;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.loading-placeholder {
    display: none;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.empty-message {
    text-align: center;
    padding: 40px;
    color: #666;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
}

.pagination a,
.pagination span {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination a:hover {
    background-color: #2196f3;
    color: white;
    border-color: #2196f3;
}

.pagination .active {
    background-color: #2196f3;
    color: white;
    border-color: #2196f3;
}

/* CMS 본문 루트: 각 페이지 #…Content 와 함께 .page-content 사용 (pageRenderer 등) */
.page-content {
    width: 100%;
}

/* pageRenderer.mediaTextPlainToSafeHtml — 줄 단위 div (부모 타이포 상속) */
.media-text-plain-line {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* Quill 저장 HTML: 피그마 등 대용량 이미지가 본문/뷰포트를 넘지 않도록 (공개 상세·메인 EDITOR 섹션 공통) */
.ql-editor {
    max-width: 100%;
    padding: 0px !important;
    /* quill.snow.css는 이 파일보다 나중에 로드되므로 덮어쓰는 값을 !important로 복원 */
    height: auto !important;
    overflow-y: visible !important;
    white-space: pre-wrap;
    overflow-wrap: break-word;

    img {
        max-width: 100%;
        height: auto !important;
    }

    hr {
        display: block;
        width: 100%;
        height: 0;
        border: none;
        border-top: 1px solid #C4C7D0;
        margin: 24px 0;
        background: transparent;
    }

    video {
        max-width: 100%;
        height: auto;
    }

    iframe {
        max-width: 100%;
    }

    pre {
        overflow-x: auto;
        white-space: pre;
        word-break: normal;
        max-width: 100%;
    }

    /* quill-table-better 테이블: pre-wrap 상속 차단 + 기본 border */
    table, td, th {
        white-space: normal;
    }

    /* 셀 본문(ql-table-block)은 에디터와 동일하게 공백·들여쓰기 보존 */
    .ql-table-block {
        white-space: pre-wrap;
    }

    table {
        border-collapse: collapse;
        /* width는 quill-table-better inline style(width:Xpx)을 우선으로 두고,
           컨테이너보다 좁으면 늘어나지 않도록 max-width만 제한 */
        max-width: 100%;
        border: 1px solid #cbd5e1;
    }

    /*
     * 관리자 body.admin .board-admin__detail-body.ql-editor td/th 와 동일.
     * .ql-editor table td 로 specificity 를 올려 quill-table-better.css( th { padding:2px 5px } )가
     * common.css 뒤에 로드돼도 padding 이 덮이지 않게 함.
     */
    table td,
    table th {
        border: 1px solid #cbd5e1;
        padding: 8px 10px;
        min-width: 40px;
        word-break: break-word;
        /* vertical-align은 quill-table-better inline style 우선 — 기본값(middle) 유지 */
    }

    th {
        font-weight: 700;
        /* background는 quill-table-better inline style이 지정하므로 여기선 설정 안 함 */
    }

    .qlbt-cell-line {
        white-space: pre-wrap;
    }

    .qlbt-table-wrapper {
        overflow-x: auto;
        max-width: 100%;
    }

    /*
     * Cell Properties에서 none으로 설정한 셀도 개별 처리.
     */
    table[style*="border-style: none"] {
        border: 0 !important;
    }
    table[style*="border-style: none"] th,
    table[style*="border-style: none"] td {
        border: 0 !important;
    }
    td[style*="border-style: none"],
    th[style*="border-style: none"] {
        border: 0 !important;
    }

    /*
     * 상세(읽기 전용): 저장 HTML에 남은 ql-cell-focused/selected 편집용 하이라이트 제거
     * (공개 사이트 .ql-editor 는 모두 조회용)
     */
    td.ql-cell-focused::after,
    th.ql-cell-focused::after,
    td.ql-cell-selected::after,
    th.ql-cell-selected::after,
    .ql-cell-selected-after::after {
        content: none !important;
        display: none !important;
        border: none !important;
        background: none !important;
    }

    td.ql-cell-focused,
    th.ql-cell-focused,
    td.ql-cell-selected,
    th.ql-cell-selected {
        position: static;
    }

    @media (max-width: 768px) {
        iframe {
            width: 100%;
            aspect-ratio: 16 / 9;
            height: auto;
        }
    }
}

/* ── Back to Top (FAB) — 공개 전 페이지 공통. scrollY > 400 노출, 최상단 도달 시 숨김 */
.back-to-top {
    position: fixed;
    right: 60px;
    bottom: 60px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 푸터/CTA 근처에서는 문서에 고정(absolute)되어 함께 스크롤 — 떨림 방지 */
.back-to-top.back-to-top--docked {
    position: absolute;
    bottom: auto;
}

.back-to-top__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #16294e;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-to-top__circle svg {
    width: 24px;
    height: 24px;
}

.back-to-top:hover .back-to-top__circle {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.32);
}

.back-to-top__label {
    font-weight: 600;
    font-size: clamp(12px, calc(12px + (100vw - 390px) * 6 / 378), 18px);
    line-height: 160%;
    letter-spacing: 0.04em;
    color: #162D55;
}

@media (max-width: 768px) {
    .back-to-top {
        right: 20px;
        bottom: calc(32px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
    }

    .back-to-top__circle {
        width: 48px;
        height: 48px;
    }

    .back-to-top__circle svg {
        width: 20px;
        height: 20px;
    }

    .back-to-top__label {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transform: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .back-to-top.is-visible {
        transform: none;
    }
}

/*
 * 강조 블록 (에디터 삽입형)
 * 띠 색/두께/간격/배경/폰트/정렬은 인라인 style로 저장되므로
 * 공개 페이지에서는 여백·줄바꿈 처리만 보강한다.
 */
.editor-callout-bar {
    margin: 16px 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.editor-callout-bar__headline {
    font-weight: 600;
}

.editor-callout-bar__body {
    font-weight: 400;
}