/**
 * 서식 있는 본문의 모양 — 내부 화면 · 학생 포털 · 유학원 포털이 함께 쓴다.
 *
 * app.css 와 나눈 이유: 포털 두 곳은 app.css 를 읽지 않는다(휴대전화에서 먼저 쓰이므로
 * 필요한 것만 싣는다). 같은 내용을 두 군데 적으면 한쪽만 고쳐지는 날이 온다.
 */
/* ─────────────────────────────────────────────────────────────
   서식 있는 본문 (게시판·문의·상담)

   ⚠️ 그림은 언제나 본문 너비 안에 들어와야 한다.
      선생님들이 올리는 그림은 대개 화면 캡처라 2000px 가 넘는다.
      그대로 두면 표가 옆으로 밀려 글을 읽을 수 없게 된다.
   ───────────────────────────────────────────────────────────── */
.kc-rich { font-size: 13px; line-height: 1.7; color: #334155; word-break: break-word; }
.kc-rich img {
  max-width: 100%; height: auto;      /* 가로를 맞추고 세로는 비율대로 */
  display: block; margin: .5rem 0;
  border-radius: 4px; border: 1px solid #e2e8f0;
  cursor: zoom-in;                    /* 눌러서 원래 크기로 볼 수 있다 */
}
.kc-rich p { margin: 0 0 .35rem; }
.kc-rich h1 { font-size: 1.45em; font-weight: 700; margin: .7rem 0 .35rem; }
.kc-rich h2 { font-size: 1.25em; font-weight: 700; margin: .7rem 0 .35rem; }
.kc-rich h3 { font-size: 1.1em;  font-weight: 700; margin: .6rem 0 .3rem; }
.kc-rich ul, .kc-rich ol { margin: .3rem 0 .5rem; padding-left: 1.4rem; }
.kc-rich ul { list-style: disc; }
.kc-rich ol { list-style: decimal; }
.kc-rich li { margin: .12rem 0; }
.kc-rich blockquote {
  border-left: 3px solid #cbd5e1; padding: .2rem .8rem;
  margin: .5rem 0; color: #475569; background: #f8fafc;
}
.kc-rich pre, .kc-rich .ql-syntax {
  background: #0f172a; color: #e2e8f0; padding: .7rem .9rem; border-radius: 6px;
  overflow-x: auto; font-size: 12px; margin: .5rem 0;
}
.kc-rich code { background: #f1f5f9; padding: .05rem .3rem; border-radius: 3px; font-size: .92em; }
.kc-rich a { color: #1d4ed8; text-decoration: underline; }
.kc-rich table { border-collapse: collapse; margin: .5rem 0; }
.kc-rich th, .kc-rich td { border: 1px solid #cbd5e1; padding: .25rem .5rem; }
.kc-rich .ql-align-center { text-align: center; }
.kc-rich .ql-align-right  { text-align: right; }
.kc-rich .ql-align-justify{ text-align: justify; }
.kc-rich .ql-indent-1 { padding-left: 2rem; }
.kc-rich .ql-indent-2 { padding-left: 4rem; }
.kc-rich .ql-indent-3 { padding-left: 6rem; }

/* 편집기 — 글 쓰는 칸이 본문과 같은 모양이어야 결과를 예측할 수 있다 */
.kc-rich-editor .ql-editor { font-size: 13px; line-height: 1.7; }
.kc-rich-editor .ql-editor img { max-width: 100%; height: auto; }
.kc-rich-editor.ql-container { border-color: #cbd5e1; border-radius: 0 0 4px 4px; }
.ql-toolbar.ql-snow { border-color: #cbd5e1; border-radius: 4px 4px 0 0; background: #f8fafc; }

/* 그림을 눌렀을 때 원래 크기로 보는 창.
   ⚠️ 창(Modal, z-index 8000~) 안의 글에서도 그림을 누른다.
      그보다 낮으면 그림이 창 뒤에 깔려 닫을 수도 없다. */
.kc-imgview {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(15, 23, 42, .85);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  cursor: zoom-out;
}
.kc-imgview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 첨부로 올라온 그림 — 글 아래에 펼쳐 보여 준다 */
.kc-attach-img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid #e2e8f0; border-radius: 4px; cursor: zoom-in;
}