/* =====================================================================
 *  editor-content.css
 *  게시판 상세(.view-body)의 에디터 작성 본문 렌더링 전용 스타일.
 *  reset.css 로 초기화된 요소(h1~h6, ul/ol, table, blockquote 등)를
 *  복원합니다. .editor-content 스코프로 한정되어 기존 디자인에 영향 없음.
 * ===================================================================== */

.editor-content {
    font-size: var(--fs-18);
    line-height: 1.9;
    color: var(--grayscale8);
    overflow-wrap: break-word;
}

/* reset.css 의 `span{display:inline-block}` 은 본문 강조(color)용 <span> 을
   원자 박스로 만들어 줄바꿈을 어색하게 끊고, justify 와 만나면 짧은 줄이
   전체 너비로 늘어나 글자 간격이 터진다 → 본문 span 은 inline 으로 복원 */
.editor-content span { display: inline; }

/* 문단 */
.editor-content p {
    margin: 0 0 0.75em;
    line-height: 1.85;
    /* 양쪽맞춤(오른쪽 끝까지 flush): break-all 로 글자 단위 개행 + justify 로
       감긴 줄의 좌·우 끝을 맞춤.
       ※ text-align-last:left 가 핵심 — 문단 '마지막 줄'과 '강제 줄바꿈(<br>) 앞 줄'을
         왼쪽 정렬로 고정해, 짧은 줄이 전체 너비로 늘어나 글자 간격이 터지는 문제를 방지. */
    word-break: break-all;
    text-align: justify;
    text-align-last: left;
}
/* 목록·표 안의 문단은 굳이 양쪽맞춤 불필요 → 왼쪽 정렬 */
.editor-content li p,
.editor-content td p { text-align: left; text-align-last: left; }
.editor-content p:last-child { margin-bottom: 0; }
/* Quill 이 만드는 빈 문단(<p><br></p>)은 여백을 이중으로 키움 → 한 줄 정도로 축소 */
.editor-content p:has(> br:only-child) {
    margin: 0;
    height: 0.9em;
    line-height: 0.9em;
    overflow: hidden;
}

/* 제목 */
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
    margin: 1.6em 0 0.7em;
    font-weight: 700;
    line-height: 1.4;
    color: var(--grayscale10);
}
.editor-content h1 { font-size: var(--fs-32); }
.editor-content h2 { font-size: var(--fs-28); }
.editor-content h3 { font-size: var(--fs-24);}
.editor-content h4 { font-size: var(--fs-20); }
.editor-content h5 { font-size: var(--fs-18); }
.editor-content h6 { font-size: var(--fs-16); color: var(--grayscale7); }
.editor-content :is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }

/* 강조 */
.editor-content strong, .editor-content b { font-weight: 700; color: var(--grayscale9); }
.editor-content em, .editor-content i { font-style: italic; }
.editor-content u { text-decoration: underline; }
.editor-content s, .editor-content del { text-decoration: line-through; color: var(--grayscale6); }
.editor-content mark { background: var(--color-mint-light); padding: 0 3px; border-radius: 3px; }

/* 링크 */
.editor-content a {
    color: var(--color-main);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition-fast);
}
.editor-content a:hover { color: var(--color-sub); }

/* 목록 */
.editor-content ul,
.editor-content ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}
.editor-content li { margin: 0.15em 0; line-height: 1.75; }
.editor-content li::marker { color: var(--color-mint); }
.editor-content ul ul, .editor-content ol ol,
.editor-content ul ol, .editor-content ol ul { margin: 0.15em 0; }

/* 마커 복원: reset.css 의 `li{list-style:none}` 이 li 에 직접 걸려
   ul/ol 에 준 list-style 이 상속으로 무효화됨 → li 를 직접 지정해 복원 */
.editor-content ul > li { list-style: disc outside; }
.editor-content ol > li:not([data-list]) { list-style: decimal outside; }

/* Quill 2.x 목록: 불릿/번호 모두 <ol><li data-list="bullet|ordered"> 로 저장되고
   마커는 list-style 이 아니라 가상요소로 그려야 함(편집기 전용 .ql-ui span 은 숨김) */
.editor-content ol:has(> li[data-list]) { list-style: none; counter-reset: ql-ord; }
.editor-content li[data-list] { list-style: none; position: relative; }
.editor-content li[data-list] > .ql-ui { display: none; }
.editor-content li[data-list="bullet"]::before {
    content: "\2022";
    position: absolute; left: -1em;
    color: var(--color-mint); font-weight: 700;
}
.editor-content li[data-list="ordered"] { counter-increment: ql-ord; }
.editor-content li[data-list="ordered"]::before {
    content: counter(ql-ord) ".";
    position: absolute; left: -1.4em;
    color: var(--color-mint); font-weight: 700;
}

/* 인용 */
.editor-content blockquote {
    margin: 1.4em 0;
    padding: 18px 24px;
    border-left: 4px solid var(--color-mint);
    background: var(--color-mint-light);
    border-radius: 0 10px 10px 0;
    color: var(--grayscale7);
}
.editor-content blockquote p:last-child { margin-bottom: 0; }

/* 이미지 */
.editor-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4em auto;
    border-radius: 12px;
}

/* 구분선 */
.editor-content hr {
    border: 0;
    border-top: 1px solid var(--grayscale3);
    margin: 2em 0;
}

/* 표 */
.editor-content .table-scroll { overflow-x: auto; margin: 1.4em 0; }
.editor-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: var(--fs-16);
}
.editor-content table th,
.editor-content table td {
    border: 1px solid var(--grayscale3);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}
.editor-content table th {
    background: var(--color-mint-light);
    font-weight: 600;
    color: var(--grayscale9);
}
.editor-content table tr:nth-child(even) td { background: var(--grayscale1); }

/* 코드 */
.editor-content code {
    font-family: 'Consolas', 'Menlo', monospace;
    background: var(--grayscale2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-main);
}
.editor-content pre {
    background: var(--grayscale10);
    color: #f5f5f5;
    padding: 18px 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 1.4em 0;
    line-height: 1.6;
}
.editor-content pre code { background: none; color: inherit; padding: 0; }

/* 유튜브 등 임베드 */
.editor-content iframe {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 0;
    border-radius: 12px;
    margin: 1.4em 0;
}

/* 정렬 (에디터 산출 클래스 대응)
   ※ text-align-last 를 반드시 함께 지정해야 함 — .editor-content p 가 justify 용으로
     text-align-last:left 를 걸어두기 때문에, 정렬 클래스에서 안 덮으면 가운데/오른쪽
     정렬의 '마지막 줄(=한 줄짜리 제목 등)'이 왼쪽으로 끌려가 정렬이 안 먹는다. */
.editor-content .ql-align-center,
.editor-content [style*="text-align: center"] { text-align: center; text-align-last: center; }
.editor-content .ql-align-center > span { text-align: center; }
.editor-content .ql-align-right,
.editor-content [style*="text-align: right"] { text-align: right; text-align-last: right; }
.editor-content .ql-align-right > span { text-align: right; }
.editor-content .ql-align-justify,
.editor-content [style*="text-align: justify"] { text-align: justify; text-align-last: left; }

/* 들여쓰기 (Quill indent) */
.editor-content .ql-indent-1 { padding-left: 2em; }
.editor-content .ql-indent-2 { padding-left: 4em; }
.editor-content .ql-indent-3 { padding-left: 6em; }
.editor-content li.ql-indent-1 { padding-left: 0; margin-left: 2em; }
.editor-content li.ql-indent-2 { padding-left: 0; margin-left: 4em; }
.editor-content li.ql-indent-3 { padding-left: 0; margin-left: 6em; }

/* 동영상 임베드 (Quill video) */
.editor-content iframe.ql-video {
    display: block;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.4em auto;
}

/* 반응형 */
@media screen and (max-width: 500px) {
    .editor-content { font-size: var(--fs-16); }
    .editor-content blockquote { padding: 14px 18px; }
}