/* 글쓰기 편집기 + 서식 글 보기 — 공개 화면 · 관리자 화면 공통 */
.rte { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: visible; }
.rte:focus-within { border-color: #2E7D32; }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid #eef0ee; background: #fafbfa; border-radius: 10px 10px 0 0; position: sticky; top: 64px; z-index: 5; }
.rte-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: #374151; cursor: pointer; font: 600 15px/1 'Noto Sans KR', sans-serif; }
.rte-btn:hover { background: #eef2ee; }
.rte-btn.on { background: #E8F5E9; color: #1B5E20; }
.rte-sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 4px; }
.rte-select { height: 32px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; padding: 0 6px; font-size: 14px; }
.rte-pop { position: absolute; z-index: 20; margin-top: 38px; margin-left: -36px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 188px; padding: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.rte-pop[hidden] { display: none; }
.rte-linkpop { width: 300px; }
.rte-linkpop input { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 8px; }
.rte-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); cursor: pointer; }
.rte-reset { border: 0; background: none; color: #6b7280; cursor: pointer; font-size: 13px; padding: 4px 6px; }
.rte-area { position: relative; min-height: 380px; padding: 16px 18px; outline: none; overflow-wrap: anywhere; }
.rte-area:empty::before, .rte-area:has(> p:only-child > br:only-child)::before { content: attr(data-placeholder); color: #9ca3af; position: absolute; pointer-events: none; }
.rte-area img { max-width: 100%; height: auto; border-radius: 6px; }
.rte-foot { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-top: 1px solid #eef0ee; font-size: 12px; color: #6b7280; }
.rte-foot .over { color: #b91c1c; font-weight: 700; }
.rte-note { color: #6b7280; font-size: 12px; }
.rte-draft { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; background: #fffbea; color: #6b4e00; font-size: 14px; }

/* 서식 글 보기 (글 본문 · 편집 영역 같은 모양) */
.post-body p { margin: 0 0 .35em; }
.post-body h2 { font-size: 1.35rem; margin: 1em 0 .4em; line-height: 1.4; }
.post-body h3 { font-size: 1.12rem; margin: .9em 0 .35em; line-height: 1.45; }
.post-body blockquote { margin: .8em 0; padding: 8px 14px; border-left: 3px solid #A5C8A7; background: #f6f8f6; color: #374151; }
.post-body hr { border: 0; border-top: 1px solid #d1d5db; margin: 1.4em 0; }
.post-body ul, .post-body ol { margin: .4em 0 .6em; padding-left: 1.6em; }
.post-body li { margin: .15em 0; }
.post-body img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }
.post-body [style*="text-align:center"] img, .post-body [style*="text-align: center"] img { margin-left: auto; margin-right: auto; }
.post-body [style*="text-align:right"] img, .post-body [style*="text-align: right"] img { margin-left: auto; }

/* 후기 평점 고르기 (글쓰기 화면에만. 사이트에는 평점을 보여 주지 않는다) */
.rating { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.rating label { cursor: pointer; }
.rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating span { display: inline-grid; place-items: center; min-width: 44px; height: 38px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font-size: 14px; color: #4b5563; }
.rating input:checked + span { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.rating input:focus-visible + span { outline: 2px solid #1565C0; outline-offset: 2px; }
.rating-help { font-size: 12px; color: #6b7280; margin-top: 4px; }

@media (max-width: 720px) {
  .rte-bar { top: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rte-area { min-height: 300px; padding: 12px; }
  .rte-pop { position: fixed; left: 16px !important; right: 16px; margin: 0; top: 30%; width: auto; }
}
.field .rte-select, .rte-bar .rte-select { width: auto; flex: 0 0 auto; padding: 0 6px; height: 32px; }