/* ============================================================================
   에디터로 쓴 본문을 "보는 화면" 에서 그대로 재현하는 규칙 — 공지·약관 공용.

   왜 필요한가
     CKEditor 5 는 서식을 대부분 클래스로 내보낸다.
       이미지 정렬  figure.image.image-style-align-center
       이미지 크기  .image_resized  (+ 인라인 width)
       글자 크기    span.text-big / .text-huge …
       형광펜       mark.marker-yellow …
     이 클래스들의 모양은 에디터 안에서는 CKEditor 자체 CSS 가 그려 주지만,
     회원·관리자 화면에는 그 CSS 가 없다. 그래서 관리자가 가운데 정렬해 저장해도
     보는 쪽에서는 아무 일도 일어나지 않았다 (2026-09 "이미지 정렬이 안 됨").

   범위
     모두 .editor-content 안으로 한정한다 — 다른 화면 스타일을 건드리지 않는다.
     적용 대상: 회원 공지 상세·약관·개인정보처리방침, 관리자 공지/약관 상세.

   ※ 여기 있는 선택자는 CKEditor 가 실제로 뱉는 클래스 이름이다. 에디터를 올리거나
     플러그인을 바꿀 때 출력 클래스가 달라지면 이 파일도 같이 봐야 한다.
   ========================================================================= */

/* ── 이미지 ──────────────────────────────────────────────────────────────── */

.editor-content img {
    /* 본문 폭을 넘는 원본(예: width:666px)이 모바일에서 가로로 삐져나오던 것 */
    max-width: 100%;
    height: auto;
}

.editor-content figure {
    margin: 0;
}

.editor-content figure.image {
    display: table;          /* 캡션이 이미지 폭에 맞게 줄바꿈되도록 */
    margin: 16px auto;       /* 기본은 가운데 */
    max-width: 100%;
    clear: both;
}

.editor-content figure.image img {
    display: block;
    margin: 0 auto;
}

/* ※ 아래 정렬 규칙은 반드시 figure.image 를 함께 적어야 한다.
      위의 .editor-content figure.image { margin: 16px auto } 가 클래스만 쓴 선택자보다
      우선순위가 높아, margin 만 바꾸는 정렬(block-align-*)이 통째로 무시된다. (실측 확인) */

/* 글이 옆으로 흐르는 정렬 (float) */
.editor-content figure.image.image-style-align-left,
.editor-content .image-style-align-left {
    float: left;
    margin: 8px 24px 8px 0;
    max-width: 50%;
}

.editor-content figure.image.image-style-align-right,
.editor-content figure.image.image-style-side,
.editor-content .image-style-align-right,
.editor-content .image-style-side {
    float: right;
    margin: 8px 0 8px 24px;
    max-width: 50%;
}

/* 한 줄을 차지하는 정렬 (글이 옆에 오지 않는다) */
.editor-content figure.image.image-style-block-align-left,
.editor-content .image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

.editor-content figure.image.image-style-block-align-right,
.editor-content .image-style-block-align-right {
    margin-left: auto;
    margin-right: 0;
}

.editor-content figure.image.image-style-align-center,
.editor-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

/* 크기 조절한 이미지 — 폭은 인라인 style 로 오고, 넘치지만 않게 막아 준다 */
.editor-content .image_resized {
    max-width: 100%;
    height: auto;
}

.editor-content .image_resized img {
    width: 100%;
}

/* 글 속에 끼워 넣은 이미지 */
.editor-content .image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

.editor-content .image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
}

.editor-content figcaption {
    padding: 6px 8px;
    font-size: 13px;
    color: #767676;
    text-align: center;
    background: #f7f7f7;
    caption-side: bottom;
    display: table-caption;
}

/* float 한 이미지가 본문 밖으로 새지 않게 */
.editor-content::after {
    content: "";
    display: block;
    clear: both;
}

/* ── 표 ──────────────────────────────────────────────────────────────────── */

.editor-content figure.table {
    display: block;
    margin: 16px 0;
    /* 열이 많은 표가 모바일에서 화면을 밀어내지 않게 — 표만 따로 가로 스크롤 */
    overflow-x: auto;
}

/* 회원 화면(.responsive-layout)은 본문 폭이 420px 로 고정이다.
   글쓴이는 관리자 편집기(1000px 남짓)에서 폭을 잡으므로 'width:44.58%' 같은 값이
   그대로 오는데, 회원 화면에서는 187px 이 되어 7열 표가 한 칸 26px 로 찌그러진다.
   폭은 본문을 다 쓰게 하고, 열 비율은 위의 table-layout:fixed 가 지킨다.
   관리자 화면은 편집기와 폭이 비슷해 글쓴이가 정한 값을 그대로 둔다. */
.responsive-layout .editor-content figure.table {
    float: none;
    width: 100% !important;
}

.editor-content table {
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 100%;
}

/* 편집기에서 열 폭을 조절한 표.
   CKEditor 는 그 폭을 <colgroup><col style="width:%"> 로 저장하는데,
   table-layout 이 auto 면 브라우저가 그 값을 '권고' 로만 보고 칸 안의 글자 길이에 맞춰
   다시 잡는다 — 칸이 좁으면 지정 비율을 통째로 버리고 7열을 14.2% 씩 균등 분할했다
   (2026-09-16 확인: 회원 공지 14번). fixed 로 두어야 지정한 비율이 그대로 나온다.
   width 를 함께 줘야 한다 — min-width 만으로는 표 폭이 auto 라 fixed 알고리즘이 돌지 않는다.
   CKEditor 자체 스타일도 .ck-content table.ck-table-resized 에 같은 규칙을 쓴다. */
.editor-content table.ck-table-resized {
    table-layout: fixed;
    width: 100%;
}

.editor-content th,
.editor-content td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    /* 셀 배경·정렬을 지정했으면 인라인 style 로 오므로 그쪽이 이긴다 */
    text-align: left;
    vertical-align: top;
}

.editor-content th {
    background: #f7f7f7;
    font-weight: 600;
}

.editor-content table caption {
    padding: 6px;
    font-size: 13px;
    color: #767676;
    caption-side: top;
    text-align: center;
}

/* ── 글자 크기·형광펜 (클래스로만 나오는 서식) ───────────────────────────── */

.editor-content .text-tiny  { font-size: .7em; }
.editor-content .text-small { font-size: .85em; }
.editor-content .text-big   { font-size: 1.4em; }
.editor-content .text-huge  { font-size: 1.8em; }

.editor-content mark { background: transparent; }
.editor-content .marker-yellow { background-color: #fdfd77; }
.editor-content .marker-green  { background-color: #62f962; }
.editor-content .marker-pink   { background-color: #fc7899; }
.editor-content .marker-blue   { background-color: #72ccfd; }
.editor-content .pen-red       { color: #e71313; background: transparent; }
.editor-content .pen-green     { color: #128a00; background: transparent; }

/* ── 문단 요소 ───────────────────────────────────────────────────────────── */

.editor-content h2 { font-size: 1.4em; font-weight: 700; margin: 24px 0 10px; line-height: 1.4; }
.editor-content h3 { font-size: 1.2em; font-weight: 700; margin: 20px 0 8px; line-height: 1.4; }
.editor-content h4 { font-size: 1.05em; font-weight: 700; margin: 16px 0 8px; }

.editor-content ul,
.editor-content ol {
    /* 목록 표식이 잘리지 않게 — 초기화 CSS 가 padding 을 0 으로 두는 화면이 있다 */
    padding-left: 24px;
    margin: 0 0 12px;
}

.editor-content li { margin: 2px 0; }

.editor-content blockquote {
    margin: 16px 0;
    padding: 4px 0 4px 16px;
    border-left: 4px solid #ddd;
    color: #666;
    font-style: italic;
}

.editor-content hr {
    height: 1px;
    margin: 20px 0;
    border: 0;
    background: #ddd;
}

.editor-content pre {
    padding: 12px;
    border-radius: 4px;
    background: #f7f7f7;
    overflow-x: auto;
}

.editor-content code {
    padding: 1px 4px;
    border-radius: 3px;
    background: #f0f0f0;
    font-size: .95em;
}

.editor-content pre code {
    padding: 0;
    background: transparent;
}

.editor-content a {
    color: #8a6f4d;
    text-decoration: underline;
}

/* ── 다크 모드 (common.css 팔레트) ───────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    .editor-content figcaption {
        background: #1e1e1e;
        color: #a8a8a8;
    }

    .editor-content th,
    .editor-content td { border-color: #3a3a3a; }

    .editor-content th { background: #1e1e1e; }

    .editor-content table caption { color: #a8a8a8; }

    .editor-content blockquote {
        border-left-color: #3a3a3a;
        color: #a8a8a8;
    }

    .editor-content hr { background: #3a3a3a; }

    .editor-content pre { background: #1e1e1e; }

    .editor-content code { background: #2a2a2a; }

    .editor-content a { color: #c9a97e; }

    /* 형광펜은 어두운 배경에서 글자가 묻힌다 — 글자색을 고정한다 */
    .editor-content .marker-yellow,
    .editor-content .marker-green,
    .editor-content .marker-pink,
    .editor-content .marker-blue { color: #121212; }
}