@charset "utf-8";

#postEditor {
    width: 100%;
    /* 폭 제한은 부모 #postView가 담당(사이트 설정 post_content_width 동적 적용).
       여기서 900 등으로 고정하면 설정값 > 900이 무시됨 → 100%로 부모 채움. */
    max-width: 100%;
    margin: 0 auto;
    padding: 40px;
}

#postEditor article:not(:first-of-type) { margin-top: 60px; }
#postEditor ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#postEditor ul li:not(:first-of-type) {
    margin-top: 30px;
}

#postEditor .sectionTitle {
    font-size: 24px;
    color: #000;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #5e5e5e;
}

#postEditor h1 {
    font-size: 24px !important;
    color: #000;
    font-weight: 800;
}
#postEditor h2 {
    font-size: 20px !important;
    color: #000;
    font-weight: 700;
}

#postEditor h3 {
    font-size: 18px !important;
    color: #000;
    font-weight: 600;
}

/* 헤딩 안 <strong>은 부모 헤딩 크기/굵기 그대로 — post.css의 #postView .post strong {16px}가 덮는 케이스 방어 */
#postEditor h1 strong,
#postEditor h2 strong,
#postEditor h3 strong { font-size: inherit !important; font-weight: inherit; color: inherit; }

/* Filament TextColor extension 출력 — <span class="color" style="--color:#xxx"> 매핑. 어드민엔 자동, 사용자단엔 미정의라 보강 */
#postEditor span.color,
#postEditor .color { color: var(--color); }

#postEditor p {
    color: #000;
    font-weight: 400;
}

#postEditor strong {
    color: #000;
    font-weight: 600;
}

#postEditor em {
    color: #000;
    font-weight: 400;
}

#postEditor .lead strong {
    font-size: 18px !important;
    color: #000;
    font-weight: 600;
}
#postEditor .lead p {
    font-size: 18px !important;
    color: #000;
    font-weight: 600;
}
#postEditor mark {
    color: var(--keyColor);
    background-color: #000;
    padding: 2px 4px;
}

#postEditor del {
    color: #929292;
}
#postEditor s {
    color: #929292;
}
#postEditor u {
    color: #000;
    text-underline-offset: 3px;
}

#postEditor a {
    color: var(--pointColor);
    font-weight: 600;
    text-decoration: none;
}


#postEditor a:hover {
    border-bottom: 1px dotted var(--pointColor);
}

#postEditor hr {
    width: 100%;
    border: 0;
    height: 1px;
    margin: 60px 0;
    background: #e2e2e2;
    display: block;
}

#postEditor blockquote {
    position: relative;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    font-style: italic;
    word-break: keep-all;
    margin: 20px 0;
    padding: 0 10px 0 40px;
    border-left: 3px solid var(--pointColor);
}
#postEditor blockquote:before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    width: 16px;
    height: 16px;
    background-image: url("../images/icon_quote.svg");
    background-size: auto 16px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#postEditor blockquote span {
    font-size: 0.9em;
    color: #5e5e5e;
    font-weight: 400;
    margin-top: 10px;
    display: block;
}
#postEditor blockquote small {
    font-size: 0.9em;
    color: #5e5e5e;
    font-weight: 400;
    margin-top: 10px;
    display: block;
}
#postEditor p a  strong{
    color: var(--pointColor) !important;
}
@media all and (max-width:767px) {
#postView .post p {
    font-size: 18px !important;
}
#postView .post strong {
    font-size: 18px !important;
}
    #postEditor .lead  strong {
    font-size: 20px !important;
}
    #postEditor .lead  p {
    font-size: 20px !important;
}
}