/*
 * ===================================================================
 * sf-lecture-one 테마의 에디터 스타일시트 (WYSIWYG)
 * ===================================================================
 *
 * 이 CSS는 워드프레스 블록 에디터(.editor-styles-wrapper)와
 * 클래식 에디터(body.mce-content-body) 양쪽 모두에 적용되어,
 * 관리자 글쓰기 화면을 실제 프론트엔드와 유사하게 만들어줍니다.
 *
 * @file       assets/css/editor-style.css
 * @package    sf-lecture-one
 * @version    1.2.0
 * @date       2024-05-24 12:00:00
 */


/* ==========================================================================
   1. 에디터 기본 레이아웃 및 타이포그래피
   ========================================================================== */

/*
 * [핵심] 클래식 에디터(body.mce-content-body)와
 * 블록 에디터의 각 블록(.wp-block)의 최대 너비를 프론트엔드와 통일합니다.
 * - max-width: 964px; single-post.css 등과 동일한 너비로 설정합니다.
 * - padding: 0 20px; 좌우에 여백을 주어 텍스트가 편집창 가장자리에 붙는 것을 방지합니다.
 */
body.mce-content-body,
.editor-styles-wrapper .wp-block {
    max-width: 964px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/*
 * [공통] 클래식 에디터와 블록 에디터의 기본 폰트, 색상, 줄 간격 등을
 * 프론트엔드(global.css)와 동일하게 동기화합니다.
 */
body.mce-content-body,
.editor-styles-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/*
 * [블록 에디터 전용]
 * 블록 에디터의 최상위 컨테이너(.editor-styles-wrapper)가 너비를 제한하는 경우가 있으므로,
 * 이 제한을 풀어주어 내부의 .wp-block이 max-width: 964px를 올바르게 적용받도록 합니다.
 */
.editor-styles-wrapper {
    max-width: none;
}

/* [공통] 제목(h1-h6) 태그의 기본 스타일 */
body.mce-content-body h1, .editor-styles-wrapper h1,
body.mce-content-body h2, .editor-styles-wrapper h2,
body.mce-content-body h3, .editor-styles-wrapper h3,
body.mce-content-body h4, .editor-styles-wrapper h4,
body.mce-content-body h5, .editor-styles-wrapper h5,
body.mce-content-body h6, .editor-styles-wrapper h6 {
    line-height: 1.2;
}

/* [공통] 링크(a) 태그 스타일 */
body.mce-content-body a,
.editor-styles-wrapper a {
    color: #0073aa;
    text-decoration: none;
}
body.mce-content-body a:hover,
.editor-styles-wrapper a:hover {
    text-decoration: underline;
}

/* [공통] 본문 단락(p) 스타일 */
body.mce-content-body p,
.editor-styles-wrapper p {
    margin-bottom: 1.5em;
}


/* ==========================================================================
   2. 코드 블록 동기화 (Prism.js 스타일 모방)
   ========================================================================== */

/*
 * [핵심] 코드 블록(<pre>) 스타일 동기화
 * 프론트엔드에서 Prism.js의 'Okaidia' 테마와 유사하게 보이도록 스타일을 정의합니다.
 * 이 스타일은 에디터에서만 적용되며, 실제 하이라이팅 기능은 없습니다.
 */
body.mce-content-body pre,
.editor-styles-wrapper .wp-block-code pre,
.editor-styles-wrapper pre.wp-block-preformatted {
    font-family: 'D2Coding', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    color: #f8f8f2 !important; /* Prism Okaidia 테마의 기본 텍스트 색상 */
    background-color: #272822 !important; /* Prism Okaidia 테마의 배경색 */
    padding: 1.5rem !important;
    border: none !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    white-space: pre !important;
    margin-bottom: 1.5em !important;
}

/*
 * <pre> 태그 안의 <code> 태그는 부모(<pre>)의 스타일을 그대로 상속받도록 초기화합니다.
 * 이는 워드프레스가 <code> 태그에 불필요한 기본 스타일을 적용하는 것을 방지합니다.
 */
body.mce-content-body pre > code,
.editor-styles-wrapper .wp-block-code code {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/*
 * 인라인 코드(<code>) 스타일 동기화
 * <pre> 태그 안에 있지 않은 <code> 태그에 대한 스타일입니다. (global.css와 동일)
 */
body.mce-content-body :not(pre) > code,
.editor-styles-wrapper :not(pre) > code {
    font-family: 'D2Coding', monospace;
    background-color: #f0f0f0;
    color: #c7254e;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}