/* ============================================================================
   blog-content.css — 회원 글의 서식(글꼴·크기·색·형광펜·정렬·표)

   여기 있는 클래스만 저장된다. 목록은 Services/BlogRichText.cs 가 단일 출처이고,
      정화기(SanitizeMemberHtml)가 그 목록에 없는 클래스를 지운다.
      → 클래스를 새로 만들 때는 <b>두 곳을 같이</b> 고쳐야 한다(테스트가 대조한다).

   색은 라이트/다크 두 벌을 여기서 갖는다. 글쓴이가 색을 직접 넣지 못하게 한 이유가 이것이다 —
      한쪽에서만 읽히는 글이 생기면 손쓸 방법이 없다.

   글꼴은 <b>새로 받지 않는다</b>. 이미 깔려 있는 것만 골라 쓴다(글 하나 열자고 폰트를 받으면 느려진다).
   ========================================================================== */

.ro-doc {
    --rd-ink: var(--ro-text, #0f172a);
    --rd-sub: var(--ro-text-sub, #64748b);
    --rd-line: var(--ro-border, #e5e9f0);
    --rd-soft: var(--ro-bg-soft, #f1f5f9);

    --rd-red: #c0392b;
    --rd-orange: #b45309;
    --rd-green: #15803d;
    --rd-blue: #1d4ed8;
    --rd-purple: #6d28d9;
    --rd-gray: #64748b;

    --rd-hl-yellow: #fff3a3;
    --rd-hl-green: #cdf3d2;
    --rd-hl-blue: #d4e8ff;
    --rd-hl-pink: #ffd9e6;
    --rd-hl-ink: #1f2937;      /* 형광펜 위 글자 — 형광펜은 늘 밝은 바탕이라 어두운 글자로 고정 */
}

[data-theme="dark"] .ro-doc {
    --rd-red: #ff8b7a;
    --rd-orange: #f0b357;
    --rd-green: #58cf8b;
    --rd-blue: #8fb2ff;
    --rd-purple: #c0a3ff;
    --rd-gray: #9aa7bd;

    --rd-hl-yellow: #6b5d18;
    --rd-hl-green: #1e4a2c;
    --rd-hl-blue: #1e3a5c;
    --rd-hl-pink: #5c2038;
    --rd-hl-ink: #f4f7ff;      /* 다크에서는 형광펜도 어두워지므로 글자를 밝게 */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ro-doc {
        --rd-red: #ff8b7a;
        --rd-orange: #f0b357;
        --rd-green: #58cf8b;
        --rd-blue: #8fb2ff;
        --rd-purple: #c0a3ff;
        --rd-gray: #9aa7bd;

        --rd-hl-yellow: #6b5d18;
        --rd-hl-green: #1e4a2c;
        --rd-hl-blue: #1e3a5c;
        --rd-hl-pink: #5c2038;
        --rd-hl-ink: #f4f7ff;
    }
}

/* ── 글꼴 ────────────────────────────────────────────────────────────────── */
.ro-doc .ro-ff-sans  { font-family: inherit; }
.ro-doc .ro-ff-serif { font-family: "Nanum Myeongjo", "Batang", "Times New Roman", serif; }
.ro-doc .ro-ff-round { font-family: "Jua", "Nanum Gothic", "Apple SD Gothic Neo", sans-serif; letter-spacing: -.01em; }
.ro-doc .ro-ff-mono  { font-family: "D2Coding", Consolas, "Courier New", monospace; }

/* ── 글자 크기 ── 여섯 단계. 화면 폭에 따라 같이 줄어든다(모바일에서 한 글자씩 줄바꿈되지 않게) */
.ro-doc .ro-fs-1 { font-size: .78em; }
.ro-doc .ro-fs-2 { font-size: .9em; }
.ro-doc .ro-fs-3 { font-size: 1em; }
.ro-doc .ro-fs-4 { font-size: 1.15em; }
.ro-doc .ro-fs-5 { font-size: 1.4em; }
.ro-doc .ro-fs-6 { font-size: 1.75em; line-height: 1.4; }

/* ── 글자 색 ─────────────────────────────────────────────────────────────── */
.ro-doc .ro-c-ink    { color: var(--rd-ink); }
.ro-doc .ro-c-gray   { color: var(--rd-gray); }
.ro-doc .ro-c-red    { color: var(--rd-red); }
.ro-doc .ro-c-orange { color: var(--rd-orange); }
.ro-doc .ro-c-green  { color: var(--rd-green); }
.ro-doc .ro-c-blue   { color: var(--rd-blue); }
.ro-doc .ro-c-purple { color: var(--rd-purple); }

/* ── 형광펜 ── 글자색까지 같이 정한다. 배경만 바꾸면 다크에서 글자가 사라진다 */
.ro-doc .ro-hl-yellow { background: var(--rd-hl-yellow); color: var(--rd-hl-ink); border-radius: 3px; padding: 0 2px; }
.ro-doc .ro-hl-green  { background: var(--rd-hl-green);  color: var(--rd-hl-ink); border-radius: 3px; padding: 0 2px; }
.ro-doc .ro-hl-blue   { background: var(--rd-hl-blue);   color: var(--rd-hl-ink); border-radius: 3px; padding: 0 2px; }
.ro-doc .ro-hl-pink   { background: var(--rd-hl-pink);   color: var(--rd-hl-ink); border-radius: 3px; padding: 0 2px; }

/* ── 정렬 ────────────────────────────────────────────────────────────────── */
.ro-doc .ro-al-left   { text-align: left; }
.ro-doc .ro-al-center { text-align: center; }
.ro-doc .ro-al-right  { text-align: right; }

/* ── 표 ── 좁은 화면에서 표가 페이지를 밀지 않도록 스스로 가로 스크롤한다 ── */
.ro-doc .ro-tbl {
    width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95em;
    display: block; overflow-x: auto; white-space: nowrap;
}
.ro-doc .ro-tbl th, .ro-doc .ro-tbl td {
    border: 1px solid var(--rd-line); padding: 9px 12px; text-align: left; vertical-align: top;
}
.ro-doc .ro-tbl th { background: var(--rd-soft); font-weight: 800; }
.ro-doc .ro-tbl caption { caption-side: bottom; padding-top: 8px; font-size: .85em; color: var(--rd-sub); }

/* 폭이 넉넉하면 줄바꿈을 허용해 읽기 좋게 */
@media (min-width: 700px) {
    .ro-doc .ro-tbl { display: table; white-space: normal; }
}

/* ── 사진 ────────────────────────────────────────────────────────────────── */
.ro-doc .ro-img      { max-width: 100%; height: auto; border-radius: 12px; margin: 14px 0; }
.ro-doc .ro-img-s    { max-width: 320px; }
.ro-doc .ro-img-m    { max-width: 520px; }
.ro-doc .ro-img-l    { max-width: 760px; }
.ro-doc .ro-img-full { width: 100%; }

/* ── 그 밖 ───────────────────────────────────────────────────────────────── */
.ro-doc .ro-quote {
    margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--ro-primary-500, #3A78EE);
    background: var(--rd-soft); border-radius: 0 10px 10px 0; color: var(--rd-ink);
}
.ro-doc .ro-code {
    display: block; padding: 13px 15px; border-radius: 10px; overflow-x: auto;
    background: var(--rd-soft); color: var(--rd-ink);
    font-family: "D2Coding", Consolas, monospace; font-size: .92em; line-height: 1.7;
}
.ro-doc .ro-divider { border: 0; border-top: 1px solid var(--rd-line); margin: 26px 0; }