/* ===========================================================================
   에디터 본문 출력용 스타일  —  .editor-content 안에서만 적용된다.
   공지사항/칼럼/치료사례 등 관리자 에디터로 쓴 HTML 을 뿌리는 곳마다 붙인다.

   왜 필요한가:
   reset-css 가 b·strong·em·i·s·u·sub·sup·h1~h6·ul·ol·table·td·th 까지 전부
   `font: inherit; border: 0; vertical-align: baseline` 로 밀어버린다.
   그래서 관리자가 굵게/기울임/윗첨자/표/목록을 써도 화면엔 밋밋한 글자만 남는다.
   여기서 그 기본값들을 되살려 에디터에서 보이던 모습과 맞춘다.

   값은 관리자 에디터에 설정된 스타일에 맞춘다. 별도 설정이 없는 요소는
   TinyMCE 기본 content css 기준(표 테두리 #ccc, figcaption 회색 중앙 등).
   관리자가 넣은 인라인 style 은 항상 이 규칙들을 이긴다.

   에디터 두 가지를 같이 받는다:
   · 예전 글(TinyMCE) — 아래 기본 규칙들이 모양을 만든다.
   · 새 에디터(Nex) — 사진·인용구·표·접기 같은 "컴포넌트" 는 data-ne 속성이 붙고
     모양은 전부 인라인 style 로 구워져 온다. 그래서 여기서 할 일은 꾸미기가 아니라
     "예전 글용 규칙이 컴포넌트에 끼어들지 않게 비켜주기" 다. 맨 아래 묶음 참고.
   =========================================================================== */

   .editor-content {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    /* 긴 URL 이 모바일에서 본문 폭을 뚫고 나가지 않게 */
    overflow-wrap: break-word;
}

/* 이 사이트 common.css 가 div·p·li·ul·ol·a 에 font-size:16px 를 요소 단위로 직접 건다.
   그대로 두면 본문 문단·목록이 위 루트 크기(15px)를 물려받지 못하고 16px 로 남는다.
   본문 안에서만 상속으로 되돌린다. */
.editor-content div,
.editor-content p,
.editor-content ul,
.editor-content ol,
.editor-content li,
.editor-content a {
    font-size: inherit;
}

/* 좌/우 정렬(float) 이미지가 글 끝에 있으면 본문 아래(목록·푸터)로 흘러내린다 */
.editor-content::after {
    content: "";
    display: block;
    clear: both;
}

/* 블록 여백 ------------------------------------------------------------------ */
.editor-content p,
.editor-content ul,
.editor-content ol,
.editor-content dl,
.editor-content pre,
.editor-content table,
.editor-content figure,
.editor-content blockquote {
    margin: 0 0 1em;
}

.editor-content > *:last-child {
    margin-bottom: 0;
}

/* 제목 ----------------------------------------------------------------------- */
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
    margin: 1.6em 0 0.6em;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
}

.editor-content h1 { font-size: 2em; }
.editor-content h2 { font-size: 1.6em; }
.editor-content h3 { font-size: 1.3em; }
.editor-content h4 { font-size: 1.15em; }
.editor-content h5 { font-size: 1em; }
.editor-content h6 { font-size: 0.9em; }

.editor-content h1:first-child,
.editor-content h2:first-child,
.editor-content h3:first-child,
.editor-content h4:first-child {
    margin-top: 0;
}

/* 인라인 서식 — 리셋이 지운 것들을 되살린다 ---------------------------------- */
.editor-content b,
.editor-content strong {
    font-weight: 700;
}

.editor-content i,
.editor-content em,
.editor-content cite,
.editor-content dfn,
.editor-content var,
.editor-content address {
    font-style: italic;
}

.editor-content u,
.editor-content ins {
    text-decoration: underline;
}

.editor-content s,
.editor-content del,
.editor-content strike {
    text-decoration: line-through;
}

/* s 안에 밑줄 span 이 들어오는 경우(에디터가 그렇게 저장한다)까지 둘 다 살린다 */
.editor-content s [style*="underline"],
.editor-content del [style*="underline"] {
    text-decoration: underline line-through;
}

.editor-content sup,
.editor-content sub {
    font-size: 0.75em;
    line-height: 0;
}

.editor-content sup { vertical-align: super; }
.editor-content sub { vertical-align: sub; }

.editor-content small {
    font-size: 0.8em;
}

.editor-content mark {
    background-color: #fff3a3;
    color: inherit;
}

.editor-content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* 링크 — common.css 가 a 를 색·밑줄 없이 만들어 두어 본문에서만 되살린다 */
.editor-content a {
    color: #f19f73;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.editor-content a:hover {
    color: #f8b864;
}

/* 목록 ----------------------------------------------------------------------- */
.editor-content ul,
.editor-content ol {
    padding-left: 1.6em;
}

.editor-content ul { list-style: disc; }
.editor-content ol { list-style: decimal; }
.editor-content ul ul { list-style: circle; }
.editor-content ul ul ul { list-style: square; }
.editor-content ol ol { list-style: lower-alpha; }
.editor-content ol ol ol { list-style: lower-roman; }

.editor-content li {
    margin: 0.2em 0;
    /* common.css 가 li 에 list-style:none 을 직접 걸어 ul/ol 의 불릿·번호가 사라진다 */
    list-style: inherit;
}

.editor-content li > ul,
.editor-content li > ol {
    margin: 0.2em 0 0;
}

.editor-content dt { font-weight: 700; }
.editor-content dd { margin: 0 0 0.5em 1.2em; }

/* 인용문 / 코드 --------------------------------------------------------------- */
/* 관리자 에디터에 설정된 값 그대로 (기본 TinyMCE 인용문 스타일이 아니다) */
.editor-content blockquote {
    margin: 20px 0;
    padding: 12px 20px;
    border-left: 4px solid #667eea;
    border-radius: 0 8px 8px 0;
    background: #f8f9fa;
}

.editor-content blockquote > *:last-child {
    margin-bottom: 0;
}

.editor-content pre {
    padding: 14px 16px;
    border-radius: 6px;
    background-color: #f5f5f5;
    overflow-x: auto;
    white-space: pre;
    font-family: Consolas, Monaco, 'D2Coding', monospace;
    font-size: 0.9em;
    line-height: 1.6;
}

.editor-content code,
.editor-content kbd,
.editor-content samp,
.editor-content tt {
    padding: 0.1em 0.3em;
    border-radius: 3px;
    background-color: #e8e8e8;
    font-family: Consolas, Monaco, 'D2Coding', monospace;
    font-size: 0.9em;
}

.editor-content pre code {
    padding: 0;
    background: none;
    font-size: 1em;
}

/* 표 — 리셋이 border:0 을 걸어 border="1" 속성까지 무력화한다 ------------------ */
.editor-content table {
    max-width: 100%;
    border-collapse: collapse;
}

.editor-content table td,
.editor-content table th {
    vertical-align: middle;
    text-align: left;
}

.editor-content table th {
    font-weight: 700;
}

/* 테두리는 에디터가 만든 표(border="1")에만. 에디터 화면도 그렇게 보인다.
   '이미지 2단' 템플릿·붙여넣은 레이아웃용 표(border 속성 없음)에 격자선이 생기지 않게 한다. */
.editor-content table[border]:not([border="0"]) td,
.editor-content table[border]:not([border="0"]) th {
    padding: 8px 12px;
    border: 1px solid #ccc;
}

.editor-content table[border]:not([border="0"]) th {
    background-color: #f7f7f7;
}

.editor-content caption {
    padding-bottom: 8px;
    font-size: 0.9em;
    color: #9c9c9c;
}

/* 이미지 / 미디어 ------------------------------------------------------------- */
/* 링크 걸린 이미지가 눌리도록 본문 안에서는 pointer-events 를 보장한다. */
.editor-content img {
    max-width: 100%;
    height: auto;
    pointer-events: auto;
    vertical-align: middle;
}

.editor-content figure {
    max-width: 100%;
}

.editor-content figure figcaption {
    margin-top: 6px;
    font-size: 0.85em;
    text-align: center;
    color: #9c9c9c;
}

/* 좌/우 정렬 이미지(에디터가 float 인라인 style 로 저장)와 글 사이 간격 */
.editor-content img[style*="float: left"] {
    margin: 0.3em 1em 0.5em 0;
}

.editor-content img[style*="float: right"] {
    margin: 0.3em 0 0.5em 1em;
}

.editor-content iframe,
.editor-content video {
    max-width: 100%;
    border: 0;
}

.editor-content video {
    height: auto;
}

/* 유튜브·비메오 등 삽입 영상은 width="560" height="314" 고정으로 저장된다.
   폭만 줄고 높이는 그대로라 모바일에서 찌그러지므로 16:9 로 맞춘다. */
.editor-content iframe[src*="youtube"],
.editor-content iframe[src*="youtu.be"],
.editor-content iframe[src*="vimeo"],
.editor-content iframe[src*="tv.naver"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* 아코디언(접었다 펴는 블록) — 리셋이 summary 를 display:block 으로 만들면 ▶ 표시가 사라진다.
   새 에디터의 접기(details[data-ne])는 테두리·여백을 인라인으로 들고 오므로 여기서 비켜준다. */
.editor-content details:not([data-ne]) {
    margin: 0 0 1em;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

.editor-content summary {
    display: list-item;
    list-style: disclosure-closed inside;
    cursor: pointer;
}

.editor-content details:not([data-ne]) > summary {
    padding: 10px 14px;
    font-weight: 700;
}

.editor-content details[open] > summary {
    list-style-type: disclosure-open;
}

.editor-content details:not([data-ne])[open] > summary {
    border-bottom: 1px solid #e5e5e5;
}

.editor-content details:not([data-ne]) > :not(summary) {
    margin-left: 14px;
    margin-right: 14px;
}

.editor-content details:not([data-ne]) > :not(summary):first-of-type {
    margin-top: 10px;
}

.editor-content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #ccc;
}

/* 정렬 — 에디터가 클래스로 저장하는 경우까지 받는다(인라인 style 은 그대로 먹는다) */
.editor-content .mce-align-left    { text-align: left; }
.editor-content .mce-align-center  { text-align: center; }
.editor-content .mce-align-right   { text-align: right; }
.editor-content .mce-align-justify { text-align: justify; }

/* 새 에디터(Nex) 컴포넌트 ----------------------------------------------------
   사진·동영상·인용구·구분선·강조박스·표·접기·링크카드·소스코드·스티커는 data-ne 가 붙고
   모양은 인라인 style 로 온다(인라인이 이 파일의 규칙을 이긴다). 여기서는 인라인으로
   담을 수 없는 것만 채운다: 자식 요소 여백, 목록 표시, 링크카드 hover. */

/* 상자 안(강조박스·접기·인용구 등) 마지막 문단의 아래 여백은 상자 padding 과 겹친다 */
.editor-content [data-ne] > *:last-child,
.editor-content [data-ne] > * > *:last-child {
    margin-bottom: 0;
}

/* 링크 카드: 글자색·밑줄 없음은 인라인 style 에 있고, 누를 수 있다는 느낌만 더한다 */
.editor-content a[data-ne="link"] {
    transition: border-color .15s, box-shadow .15s;
}

.editor-content a[data-ne="link"]:hover {
    border-color: #c9cfd6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* 동영상: 바깥 상자가 16:9 비율을 잡고 iframe 은 그 안을 꽉 채운다.
   위쪽 유튜브 규칙(aspect-ratio)이 끼어들지 않게 한다 */
.editor-content [data-ne="video"] iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* 문단·목록 간격을 에디터 화면과 맞춘다. 컴포넌트가 하나라도 있는 글(= 새 에디터로 쓴 글)에만
   적용해서, 예전 글의 문단 간격은 그대로 둔다.
   ponytail: :has() 를 못 쓰는 낡은 브라우저나 컴포넌트가 하나도 없는 글은 예전 간격으로 보인다.
   전체를 새 에디터 간격으로 바꾸려면 :has(...) 를 떼면 된다. */
.editor-content:has([data-ne]) p {
    margin: 0 0 4px;
}

.editor-content:has([data-ne]) ul,
.editor-content:has([data-ne]) ol {
    margin: 16px 0;
}

.editor-content:has([data-ne]) li {
    margin: 0 0 8px;
}

/* 반응형 --------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* 폭을 고정해 만든 예전 표는 좁은 화면에서 가로 스크롤로 넘긴다.
       새 에디터 표(width:100%)는 그대로 두면 칸이 알아서 줄어든다 */
    .editor-content table:not([data-ne]) {
        display: block;
        width: 100% !important;
        overflow-x: auto;
    }

    /* 새 에디터 표: 칸이 너무 좁아지면 가로로 넘긴다 */
    .editor-content table[data-ne] {
        display: block;
        overflow-x: auto;
    }

    /* 사진 여러 장(콜라주)은 좁은 화면에서 2열로 */
    .editor-content [data-ne="image"][data-layout="grid3"] > div {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}