/* 게시글 편집기(public/editor.js)와, 편집기로 쓴 본문(글 보기)의 모양.
   글자색·배경색 값은 src/rich-text.js 의 TEXT_COLORS·HIGHLIGHTS 와 같아야 합니다. 글 배경 #202a2d 대비 4.5:1 이상. */

.rich-editor[hidden], .board-editor textarea[hidden], .rich-panel[hidden], .rich-image-tools[hidden], .rich-draft[hidden] { display: none !important; }

/* ---------- 편집기 틀 ---------- */
.rich-editor { display: grid; min-width: 0; border: 1px solid #3f565b; border-radius: 10px; background: #1b262a; }
/* 도구 막대: 글 적는 칸이 안에서 스크롤되므로 늘 그 위에 있어요 (펼침 메뉴의 기준 위치) */
.rich-toolbar { position: relative; z-index: 30; box-shadow: 0 4px 10px #0004; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid #3a4c50; border-radius: 10px 10px 0 0; background: #223035; }
.rich-group { display: flex; flex-wrap: wrap; gap: 2px; padding-right: 6px; border-right: 1px solid #3a4c50; }
.rich-group:last-of-type { padding-right: 0; border-right: 0; }
.site-main .rich-toolbar .rich-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: #dce8e9; font-size: 14px; line-height: 1; cursor: pointer;
}
.site-main .rich-toolbar .rich-tool:hover { background: #30454a; border-color: #4f6b71; }
.site-main .rich-toolbar button:focus-visible { outline: 2px solid #ffd398; outline-offset: 1px; }
.site-main .rich-toolbar .rich-tool[aria-pressed="true"], .site-main .rich-toolbar .rich-tool[aria-expanded="true"] { background: #376b76; border-color: #79aeb6; color: #fff; }
.site-main .rich-toolbar .rich-tool svg { width: 20px; height: 20px; }
.site-main .rich-toolbar .rich-menu-button svg:last-of-type { width: 14px; height: 14px; margin-left: -2px; }
.rich-tool--text span { font-size: 13px; font-weight: 700; }
.rich-glyph { font-size: 16px; line-height: 1; }
.rich-glyph.is-bold { font-weight: 800; }
.rich-glyph.is-italic { font-style: italic; transform: skewX(-10deg); }
.rich-glyph.is-underline { text-decoration: underline; text-underline-offset: 3px; }
.rich-glyph.is-strike { text-decoration: line-through; }
.rich-glyph.is-color { padding-bottom: 2px; box-shadow: inset 0 -3px #ff8787; }
.rich-glyph.is-highlight { padding: 2px 3px; border-radius: 3px; background: #ffe066; color: #1d2023; }
.rich-glyph.is-size, .rich-glyph.is-heading { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }

/* 펼침 메뉴(글자색·배경색·크기·정렬) */
.rich-menu { position: relative; display: inline-flex; }
.rich-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; gap: 8px;
  width: max-content; max-width: 300px; padding: 12px; border: 1px solid #55737a; border-radius: 10px;
  background: #1a2529; box-shadow: 0 12px 28px #0009;
}
.site-main .rich-panel .rich-panel-title { color: #b7cbce; font-size: 12px; font-weight: 700; }
.rich-swatches { display: grid; grid-template-columns: repeat(5, 40px); gap: 6px; }
.site-main .rich-panel .rich-swatch { width: 40px; height: 40px; border: 2px solid #ffffff2e; border-radius: 8px; cursor: pointer; }
.site-main .rich-panel .rich-swatch:hover { border-color: #fff; }
.site-main .rich-panel .rich-panel-option {
  min-height: 40px; padding: 0 12px; border: 1px solid #3f565b; border-radius: 7px;
  background: #223035; color: #e3eeee; font-size: 14px; text-align: left; cursor: pointer;
}
.site-main .rich-panel .rich-panel-option:hover { background: #30454a; }
/* 글자 크기 메뉴: 숫자를 그 크기로 보여 주고, 길면 메뉴 안에서 넘겨 봐요 */
.rich-size-list { display: grid; gap: 4px; max-height: min(340px, 55vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: thin; }
.site-main .rich-panel .rich-size-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 112px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.site-main .rich-panel .rich-size-option small { color: #b7cbce; font-size: 11px; font-weight: 700; }
.site-main .rich-panel .size-10 { font-size: 10px; } .site-main .rich-panel .size-11 { font-size: 11px; } .site-main .rich-panel .size-12 { font-size: 12px; }
.site-main .rich-panel .size-13 { font-size: 13px; } .site-main .rich-panel .size-14 { font-size: 14px; } .site-main .rich-panel .size-15 { font-size: 15px; }
.site-main .rich-panel .size-16 { font-size: 16px; } .site-main .rich-panel .size-18 { font-size: 18px; } .site-main .rich-panel .size-20 { font-size: 20px; }
.site-main .rich-panel .size-24 { font-size: 24px; } .site-main .rich-panel .size-28 { font-size: 28px; } .site-main .rich-panel .size-32 { font-size: 32px; }
.site-main .rich-panel .size-36 { font-size: 36px; }
/* 링크 메뉴: 주소 칸 + 적용·링크 빼기 */
.site-main .rich-panel .rich-link-input {
  width: min(280px, 100%); min-height: 40px; padding: 0 12px; border: 1px solid #55737a; border-radius: 7px;
  background: #11191c; color: #e3eeee; font-size: 14px;
}
.site-main .rich-panel .rich-link-input:focus-visible { outline: 2px solid #88c4ca; outline-offset: 1px; }
.rich-link-actions { display: flex; gap: 6px; }
.rich-link-actions .rich-panel-option { flex: 1; text-align: center; }
.swatch-tc-red { background: #ff8787; } .swatch-tc-orange { background: #ffa94d; } .swatch-tc-yellow { background: #ffd43b; }
.swatch-tc-green { background: #69db7c; } .swatch-tc-sky { background: #66d9e8; } .swatch-tc-blue { background: #8ab4ff; }
.swatch-tc-purple { background: #c4a5ff; } .swatch-tc-pink { background: #f783ac; } .swatch-tc-gray { background: #b5c3c5; }
.swatch-hl-yellow { background: #ffe066; } .swatch-hl-green { background: #b2f2bb; } .swatch-hl-sky { background: #a5d8ff; } .swatch-hl-pink { background: #fcc2d7; }

/* 사진 설명·임시 저장 줄 */
.rich-image-tools, .rich-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-bottom: 1px solid #3a4c50; background: #1e2c30; font-size: 13px; }
.site-main .community-page .rich-image-tools label { font-size: 13px; }
.site-main .community-page .rich-image-tools input { flex: 1 1 200px; width: auto; min-width: 0; min-height: 40px; padding: 8px 12px; }
.site-main .rich-draft p { flex: 1 1 220px; color: #d6e3e4; }
.rich-draft > div { display: flex; gap: 6px; }

/* 아래 상태 줄: 글자 수·사진 수·안내 */
.rich-status { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px; border-top: 1px solid #3a4c50; color: #b7cbce; font-size: 12px; }
.rich-status strong { color: #e8f1f1; font-weight: 700; }
.rich-status .is-over strong { color: #ff8787; }
.rich-message { margin-left: auto; color: #ffd398; }

/* ---------- 본문 (편집 칸 · 글 보기 공통) ---------- */
.rich-content { position: relative; min-width: 0; color: #dfe9e9; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; word-break: keep-all; }
/* 글 적는 칸: 높이 540px 고정, 글이 길면 칸 안에서 스크롤 (사용자 요청 2026-11-10). 오른쪽 아래 모서리를 끌어 높이를 바꿀 수 있어요. */
.rich-editor .rich-content {
  height: 540px; min-height: 240px; padding: 20px 22px; background: #202a2d; outline: none; cursor: text;
  overflow-y: auto; resize: vertical; scrollbar-width: thin; scrollbar-color: #55737a transparent;
}
.rich-editor .rich-content:focus-visible { box-shadow: inset 0 0 0 2px #88c4ca; }
.rich-content.is-empty::before { content: attr(data-placeholder); position: absolute; top: 20px; left: 22px; color: #a3b7ba; pointer-events: none; }
.site-main .community-page .rich-content p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
/* 글쓰기 화면의 '.board-editor h2'(구역 제목) 모양이 본문 소제목에 섞이지 않게 padding·border 도 정합니다. */
.site-main .rich-content h2 { margin: 18px 0 6px; padding: 0; border: 0; color: #ffffff; font-size: 1.3em; font-weight: 800; line-height: 1.5; }
.site-main .rich-content > h2:first-child { margin-top: 0; }
.site-main .rich-content blockquote { margin: 12px 0; padding: 10px 16px; border-left: 4px solid #88c4ca; border-radius: 0 8px 8px 0; background: #1a2427; color: #d3e1e2; }
.site-main .rich-content ul, .site-main .rich-content ol { margin: 8px 0; padding-left: 1.5em; }
.site-main .rich-content ul { list-style: disc; }
.site-main .rich-content ol { list-style: decimal; }
.site-main .rich-content li { margin: 2px 0; list-style: inherit; }
.site-main .rich-content hr { margin: 20px 0; border: 0; border-top: 1px solid #4a6267; }
.site-main .rich-content img { max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
.site-main .rich-content a { color: #a2d9de; text-decoration: underline; text-underline-offset: 3px; }
.rich-content strong { font-weight: 800; }
.rich-content em { font-style: italic; }
.rich-content u { text-decoration: underline; text-underline-offset: 3px; }
.rich-content s { text-decoration: line-through; }
.rich-content .ta-center { text-align: center; }
.rich-content .ta-right { text-align: right; }
.site-main .rich-content .ta-center img { margin-inline: auto; }
.site-main .rich-content .ta-right img { margin-left: auto; }

.rich-content .tc-red { color: #ff8787; } .rich-content .tc-orange { color: #ffa94d; } .rich-content .tc-yellow { color: #ffd43b; }
.rich-content .tc-green { color: #69db7c; } .rich-content .tc-sky { color: #66d9e8; } .rich-content .tc-blue { color: #8ab4ff; }
.rich-content .tc-purple { color: #c4a5ff; } .rich-content .tc-pink { color: #f783ac; } .rich-content .tc-gray { color: #b5c3c5; }
/* 형광펜: 밝은 배경 위 글자는 늘 진한 색 (글자색·링크 포함) */
.rich-content .hl-yellow { background: #ffe066; } .rich-content .hl-green { background: #b2f2bb; }
.rich-content .hl-sky { background: #a5d8ff; } .rich-content .hl-pink { background: #fcc2d7; }
.rich-content :is(.hl-yellow, .hl-green, .hl-sky, .hl-pink), .rich-content :is(.hl-yellow, .hl-green, .hl-sky, .hl-pink) :is(span, a) { color: #1d2023; }
.rich-content :is(.hl-yellow, .hl-green, .hl-sky, .hl-pink) { padding: 1px 2px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 글자 크기(px, src/rich-text.js FONT_SIZES). 큰 글자는 줄 간격을 조금 줄여요. */
.rich-content .fs-10 { font-size: 10px; } .rich-content .fs-11 { font-size: 11px; } .rich-content .fs-12 { font-size: 12px; }
.rich-content .fs-13 { font-size: 13px; } .rich-content .fs-14 { font-size: 14px; } .rich-content .fs-15 { font-size: 15px; }
.rich-content .fs-18 { font-size: 18px; } .rich-content .fs-20 { font-size: 20px; } .rich-content .fs-24 { font-size: 24px; line-height: 1.6; }
.rich-content .fs-28 { font-size: 28px; line-height: 1.5; } .rich-content .fs-32 { font-size: 32px; line-height: 1.45; } .rich-content .fs-36 { font-size: 36px; line-height: 1.4; }

/* 편집 중에만 */
.rich-editor .rich-content img { cursor: pointer; }
.rich-editor .rich-content img.is-selected { outline: 3px solid #ffd398; outline-offset: 2px; }
.rich-uploading { display: inline-flex; padding: 10px 14px; border: 1px dashed #6d8f95; border-radius: 8px; color: #c8d8da; font-size: 13px; }

@media (max-width: 620px) {
  .rich-group { padding-right: 4px; }
  /* 좁은 화면: 펼침 메뉴는 도구 막대 너비에 맞춰 아래로 (화면 밖으로 넘치지 않게) */
  .rich-menu { position: static; }
  .rich-panel { left: 8px; right: 8px; width: auto; max-width: none; }
  .rich-editor .rich-content { height: min(450px, 60vh); min-height: 200px; padding: 16px; }
  .rich-content.is-empty::before { top: 16px; left: 16px; }
  .rich-message { margin-left: 0; flex-basis: 100%; }
}