/* ================================================================
   pe-editor.css — 바른영어훈련소 게시판 본문 스타일 + 에디터 UI
   .pe-content : 글 보기 화면과 에디터 내부가 똑같이 공유 (WYSIWYG 보장)
   ================================================================ */

/* ---------- 본문 타이포그래피 ---------- */
.pe-content {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    line-height: 1.85;
    color: #26282b;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.pe-content p { margin: 0 0 4px; min-height: 1.85em; }
.pe-content p.text-center { text-align: center; }

.pe-content h2 {
    font-size: 24px; font-weight: 800; line-height: 1.4;
    margin: 32px 0 10px; color: #17181a;
}
.pe-content h3 {
    font-size: 19px; font-weight: 700; line-height: 1.5;
    margin: 22px 0 8px; color: #17181a;
}
.pe-content h2:first-child,
.pe-content h3:first-child { margin-top: 0; }
.pe-content strong, .pe-content b { font-weight: 700; }
.pe-content a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }

.pe-content ul, .pe-content ol { margin: 8px 0 16px; padding-left: 26px; }
.pe-content ul li { list-style: disc; margin: 4px 0; }
.pe-content ol li { list-style: decimal; margin: 4px 0; }

.pe-content blockquote {
    margin: 28px 0; padding: 4px 0 4px 0;
    text-align: center; font-size: 18px; font-weight: 600;
    color: #45484d; position: relative;
}
.pe-content blockquote::before,
.pe-content blockquote::after {
    display: block; font-size: 44px; line-height: 1;
    color: #d3d6db; font-family: Georgia, serif;
    height: 22px;            /* 따옴표 잉크 높이만큼만 박스 차지 (여백은 마진으로만 제어) */
    overflow: visible;
}
.pe-content blockquote::before {
    content: '\201C';
    margin-bottom: 10px;
}
.pe-content blockquote::after {
    content: '\201D';
    margin-top: 10px;
}
.pe-content hr {
    border: none; height: 1px; background: #e5e8eb;
    margin: 36px auto; width: 120px;
}

/* ---------- 형광펜 밑줄 (두께 3단계 × 노랑/민트) ----------
   배경 그라디언트로 글자 아래쪽만 칠하는 방식 (Wadiz 스타일)   */
.pe-content .hl-y1, .pe-content .hl-m1,
.pe-content .hl-y2, .pe-content .hl-m2,
.pe-content .hl-y3, .pe-content .hl-m3 {
    padding: 0 1px; border-radius: 2px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.pe-content .hl-y1 { background: linear-gradient(transparent 72%, #ffe14d 72%); }
.pe-content .hl-y2 { background: linear-gradient(transparent 45%, #ffe97a 45%); }
.pe-content .hl-y3 { background: #fff3ae; }
.pe-content .hl-m1 { background: linear-gradient(transparent 72%, #7fe8cf 72%); }
.pe-content .hl-m2 { background: linear-gradient(transparent 45%, #a4f0dd 45%); }
.pe-content .hl-m3 { background: #c9f7ea; }

/* ---------- 이미지 ---------- */
.pe-content figure.pe-img {
    margin: 28px auto; max-width: 640px; text-align: center;
}
.pe-content figure.pe-img.pe-img--wide { max-width: 100%; }
.pe-content figure.pe-img img {
    display: block; width: 100%; height: auto; margin: 0 auto;
}
.pe-content figure.pe-img img.img-round { border-radius: 20px; }
.pe-content figure.pe-img figcaption,
.pe-content .pe-caption {
    margin-top: 10px; font-size: 13px; color: #8b95a1; line-height: 1.6;
}
.pe-content figure.pe-img figcaption:empty { display: none; }

/* 옛날 글(레거시 HTML) 최소한의 보호 */
.pe-content.pe-legacy img { max-width: 100%; height: auto; }
.pe-content.pe-legacy table { max-width: 100%; }

/* ================================================================
   에디터 UI
   ================================================================ */
.pe-editor { position: relative; border: 1px solid #e5e8eb; border-radius: 16px; background: #fff; }

.pe-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 8px 10px; border-bottom: 1px solid #f0f2f5;
    background: #fbfcfd; position: sticky; top: 0; z-index: 20;
}
.pe-toolbar .pe-sep { width: 1px; height: 20px; background: #e5e8eb; margin: 0 6px; }
.pe-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border: none; background: transparent; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: #45484d; cursor: pointer;
    transition: background .12s;
}
.pe-btn:hover { background: #eef1f4; }
.pe-btn.on { background: #17181a; color: #fff; }
.pe-btn .material-icons { font-size: 19px; }

/* 형광펜 팝오버 */
.pe-pop {
    position: absolute; z-index: 40; background: #fff;
    border: 1px solid #e5e8eb; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 10px; display: none;
}
.pe-pop.open { display: block; }
.pe-pop .pe-pop-row { display: flex; gap: 6px; margin-bottom: 6px; }
.pe-pop .pe-pop-row:last-child { margin-bottom: 0; }
.pe-hl-sample {
    border: 1px solid #edf0f3; border-radius: 8px; background: #fff;
    padding: 4px 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pe-hl-sample:hover { border-color: #c8cdd4; }
.pe-hl-sample span { padding: 0 2px; border-radius: 2px; }

/* 본문 편집 영역 */
.pe-body {
    min-height: 380px; max-height: 70vh; overflow-y: auto;
    padding: 24px 26px 60px; outline: none;
}
.pe-body:empty::before,
.pe-body.pe-empty::before {
    content: attr(data-placeholder);
    color: #b0b8c1; position: absolute; pointer-events: none;
}
.pe-body { position: relative; }

/* 이미지 선택 버블 */
.pe-img-bubble {
    position: absolute; z-index: 50; display: none;
    background: #17181a; color: #fff; border-radius: 10px;
    padding: 4px; gap: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.pe-img-bubble.open { display: flex; }
.pe-img-bubble button {
    border: none; background: transparent; color: #d7dade;
    font-size: 12px; font-weight: 600; padding: 6px 9px;
    border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
}
.pe-img-bubble button:hover { background: rgba(255,255,255,.12); color: #fff; }
.pe-img-bubble button.on { background: #ffe14d; color: #17181a; }
.pe-img-bubble .material-icons { font-size: 15px; }

.pe-body figure.pe-img.pe-selected img { outline: 3px solid #ffd400; outline-offset: 2px; }

/* 업로드 진행 */
.pe-uploading { opacity: .45; filter: grayscale(1); }

/* 모바일 */
@media (max-width: 640px) {
    .pe-content { font-size: 16px; }
    .pe-content h2 { font-size: 21px; }
    .pe-content h3 { font-size: 17.5px; }
    .pe-body { padding: 18px 16px 50px; }
}