/* ===========================================================================
   에디터 본문 (TinyMCE) 출력용 스타일  —  .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 은 항상 이 규칙들을 이긴다.
   =========================================================================== */

.editor-content {
    font-size: 18px;
    line-height: 1.7;
    color: #595959;
}

/* 블록 여백 ------------------------------------------------------------------ */
.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: var(--c-text);
}

.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;
}

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

.editor-content a:hover {
    color: var(--c-brown-dark);
}

/* 목록 ----------------------------------------------------------------------- */
.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;
}

.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 {
    padding: 8px 12px;
    border: 1px solid #ccc;
    vertical-align: middle;
    text-align: left;
}

.editor-content table th {
    background-color: #f7f7f7;
    font-weight: 700;
}

/* 에디터에서 테두리를 끈 표는 그대로 없앤다 */
.editor-content table[border="0"] td,
.editor-content table[border="0"] th {
    border-width: 0;
}

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

/* 이미지 / 미디어 ------------------------------------------------------------- */
/* main.css 가 모든 img 에 pointer-events:none 을 걸어둬서 링크 걸린 이미지가
   눌리지 않는다. 본문 안에서만 되살린다. */
.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;
}

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

.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; }

/* 반응형 --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .editor-content {
        font-size: 16px;
    }

    /* 폭을 고정해 만든 표는 좁은 화면에서 가로 스크롤로 넘긴다 */
    .editor-content table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
    }
}