/* 글 편집기(SiteEditor)·보여 주기(.rich)·작성 창 모양 — 4단계(2026-10-14), js/site-editor.js와 짝.
   색은 사이트에 이미 있는 값만(--ink #29223e · --purple #7046bd · --soft #f2edfc · --line #e7e0f0 · 흐린 글 #736985 · 입력칸 테두리 #8b8298 ·
   버튼 #eee7f8/#654498 · 눌림 #7046bd · 알림 #f1ebfa · 오류 #a33f60). 글 본문은 맑은 고딕, 제목은 몽토리. 크기는 px(4K는 html zoom이 키움).
   다른 페이지에서도 이 파일 + site-editor.js + /vendor/tiptap만으로 쓸 수 있게 토큰은 기본값을 함께 적는다. */

/* ───────── 보여 주기 — 공지·게시글 본문(편집기 안도 같은 모양) ───────── */
.rich{font-family:"Malgun Gothic","맑은 고딕",sans-serif;font-size:16px;line-height:1.8;color:var(--ink,#29223e);overflow-wrap:anywhere;word-break:keep-all}
.rich>:first-child{margin-top:0}
.rich>:last-child{margin-bottom:0}
.rich p{margin:0}
.rich p:empty::before{content:"\a0"} /* 비워 둔 줄도 한 줄로 */
.rich h2,.rich h3{font-family:"NostalgicMongtori","Malgun Gothic",sans-serif;line-height:1.45;margin:.9em 0 .35em;color:inherit}
.rich h2{font-size:24px}
.rich h3{font-size:20px}
.rich ul,.rich ol{margin:.35em 0;padding-left:1.6em}
.rich li>p{margin:0}
.rich blockquote{margin:.6em 0;padding:8px 14px;border-left:3px solid var(--purple,#7046bd);border-radius:0 10px 10px 0;background:var(--soft,#f2edfc)}
.rich a{color:var(--purple,#7046bd);text-decoration:underline;text-underline-offset:3px}
.rich a:hover{color:#603ba4}
.rich img{display:block;max-width:100%;height:auto;margin:12px 0;border-radius:12px}
.rich hr{height:0;margin:20px 0;border:0;border-top:1px solid var(--line,#e7e0f0)}
.rich code{padding:1px 5px;border-radius:5px;background:var(--soft,#f2edfc);font-family:Consolas,monospace;font-size:.92em}
.rich pre{margin:.6em 0;padding:12px 14px;border-radius:10px;background:var(--soft,#f2edfc);overflow-x:auto;white-space:pre}
.rich pre code{padding:0;background:none}
.rich table{border-collapse:collapse;margin:0}
.rich th,.rich td{min-width:3em;padding:6px 10px;border:1px solid var(--line,#e7e0f0);vertical-align:top;text-align:left}
.rich th{background:var(--soft,#f2edfc);font-weight:700}
.rich .rich-table,.rich .tableWrapper{max-width:100%;margin:12px 0;overflow-x:auto}

/* ───────── 편집기 틀 ───────── */
.se{position:relative;display:flex;flex-direction:column;border:1px solid #8b8298;border-radius:12px;background:#fff;color:var(--ink,#29223e)}
.se:has(.se-content:focus-visible){outline:3px solid var(--purple,#7046bd);outline-offset:1px}
.se-top{position:sticky;top:0;z-index:2;border-bottom:1px solid var(--line,#e7e0f0);border-radius:12px 12px 0 0;background:#fff}
.se-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px}
.se-group{display:flex;flex-shrink:0;align-items:center;gap:4px}
.se-group+.se-group{padding-left:6px;border-left:1px solid var(--line,#e7e0f0)}
.se-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:36px;height:36px;margin:0;padding:0 8px;border:0;border-radius:10px;background:#eee7f8;color:#654498;font:15px/1 "Malgun Gothic","맑은 고딕",sans-serif;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.se-btn:hover{background:#e5daef}
.se-btn[aria-pressed=true],.se-btn[aria-expanded=true]{background:var(--purple,#7046bd);color:#fff}
.se-btn:disabled{opacity:.45;cursor:default}
.se-btn:disabled:hover{background:#eee7f8}
.se-btn:focus-visible{outline:3px solid var(--purple,#7046bd);outline-offset:2px}
.se-btn b,.se-btn i,.se-btn u,.se-btn s{font-family:Georgia,"Times New Roman",serif;font-size:17px}
.se-btn b{font-weight:800}
.se-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.se-btn svg .se-dot{fill:currentColor;stroke:none}
.se-btn svg .se-faint{opacity:.45}
.se-btn svg text{fill:currentColor;stroke:none;font:600 6.5px/1 "Malgun Gothic",sans-serif}
.se-word{padding:0 10px}
.se-caret{font-size:11px;opacity:.8}
.se-ink{padding:0 1px 1px;border-bottom:3px solid var(--se-pick,#29223e);line-height:1.1}
.se-wash{padding:1px 4px;border-radius:4px;background:var(--se-pick,transparent);box-shadow:inset 0 0 0 1px #8b829866;color:var(--ink,#29223e)}
.se-btn[aria-expanded=true] .se-wash{box-shadow:inset 0 0 0 1px #ffffffaa}
/* 크기·색·표 고르기 — 막대 바로 아래 한 줄(휴대폰에서도 잘리지 않게 위치 계산 없이 펼침) */
.se-tray{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border-top:1px solid var(--line,#e7e0f0);background:#faf9fd}
.se-swatch{width:36px;height:36px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:var(--se-sw);box-shadow:inset 0 0 0 1px #8b829899;cursor:pointer;-webkit-tap-highlight-color:transparent}
.se-swatch:focus-visible{outline:3px solid var(--purple,#7046bd);outline-offset:3px}
.se-swatch:hover{background:var(--se-sw);box-shadow:inset 0 0 0 1px #8b8298,0 0 0 2px #e5daef}
.se-swatch[aria-pressed=true],.se-swatch[aria-pressed=true]:hover{background:var(--se-sw);box-shadow:inset 0 0 0 1px #8b8298,0 0 0 2px #fff,0 0 0 4px var(--purple,#7046bd)}
.se-area{flex:1;min-width:0}
.se-content{min-height:clamp(220px,40dvh,420px);padding:16px 18px;outline:none;caret-color:var(--purple,#7046bd)}
.se-content p.is-editor-empty:first-child::before{content:attr(data-placeholder);float:left;height:0;color:#736985;pointer-events:none}
.se-content img.ProseMirror-selectednode{outline:3px solid var(--purple,#7046bd);outline-offset:2px}
.se-content .selectedCell{background:#eee7f8}
.se-content a{cursor:text}
.se-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:6px 12px;border-top:1px solid var(--line,#e7e0f0);color:#736985;font:13px/1.5 "Malgun Gothic","맑은 고딕",sans-serif}
.se-status:empty{display:none}
.se-status{color:#654498}
.se.is-busy .se-status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--purple,#7046bd);vertical-align:1px;animation:se-pulse 1s ease-in-out infinite alternate}
.se-count{margin-left:auto}
.se-count.is-full{color:#a33f60;font-weight:700}
@keyframes se-pulse{from{opacity:.25}}

/* ───────── 링크 넣기 대화상자(편집 창 위에 한 겹 더) ───────── */
dialog.se-dialog{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));height:fit-content;max-width:none;max-height:90dvh;padding:28px;border:1px solid var(--line,#e7e0f0);border-radius:20px;background:#fff;color:var(--ink,#29223e);overflow:auto;font:16px/1.6 "NostalgicMongtori","Malgun Gothic",sans-serif}
dialog.se-dialog::backdrop{background:#21133166;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.se-dialog h2{margin:0 0 14px;font-size:22px}
.se-dialog label{display:block;margin:12px 0 5px}
.se-dialog input{display:block;box-sizing:border-box;width:100%;padding:10px;border:1px solid #8b8298;border-radius:8px;background:#fff;color:var(--ink,#29223e);font:16px/1.5 "Malgun Gothic","맑은 고딕",sans-serif}
.se-dialog input:focus-visible{outline:3px solid var(--purple,#7046bd);outline-offset:1px}
.se-hint{margin:6px 0 0;color:#736985;font-size:14px}
.se-error{margin:10px 0 0;color:#a33f60;font-size:15px}
.se-error:empty{display:none}
.se-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:22px}
.se-actions button{min-height:40px;padding:9px 16px;border:1px solid var(--line,#e7e0f0);border-radius:10px;background:#fff;color:var(--ink,#29223e);font:inherit;cursor:pointer}
.se-actions button:hover{background:var(--soft,#f2edfc)}
.se-actions .se-save{background:var(--purple,#7046bd);color:#fff}
.se-actions .se-save:hover{background:#603ba4}
.se-actions .se-danger{margin-right:auto;color:#a33f60}
.se-actions button:focus-visible{outline:3px solid var(--purple,#7046bd);outline-offset:4px}

/* ───────── 작성 창(공지 작성·게시글 작성 공용) — 넓은 창, 휴대폰은 아래에서 올라오는 거의 전체 높이 시트 ─────────
   <dialog class="se-compose"><form><div class="se-compose-head">h2 + p</div><div class="se-compose-body">…편집기…</div>
   <div class="se-compose-foot">오류 p + 버튼 줄</div></form></dialog> — 머리·버튼 줄은 고정, 가운데만 넘기고 도구 막대는 그 위에 붙음 */
dialog.se-compose{position:fixed;inset:0;margin:auto;width:min(880px,calc(100vw - 48px));height:auto;max-width:none;max-height:90dvh;padding:0;border:1px solid var(--line,#e7e0f0);border-radius:20px;background:#fff;color:var(--ink,#29223e);overflow:hidden}
dialog.se-compose[open]{display:flex;flex-direction:column}
dialog.se-compose::backdrop{background:#21133166;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.se-compose>form{display:flex;flex:1;flex-direction:column;min-height:0}
.se-compose-head{flex-shrink:0;padding:22px 28px 14px;border-bottom:1px solid var(--line,#e7e0f0)}
.se-compose-head h2{margin:0;font-size:22px;line-height:1.4}
.se-compose-head p{margin:4px 0 0;color:#736985;font-size:14px}
.se-compose-head p a{color:#654498;text-decoration:underline;text-underline-offset:3px}
.se-compose-body{--se-pad:16px;flex:1;min-height:0;padding:var(--se-pad) 28px 22px;overflow:auto;overscroll-behavior:contain}
.se-compose-body .se-top{top:calc(var(--se-pad) * -1)} /* 넘기는 칸의 위 여백만큼 올려 붙여 틈으로 글이 비치지 않게 */
.se-compose-foot{flex-shrink:0;padding:12px 28px 16px;border-top:1px solid var(--line,#e7e0f0);background:#fff}
.se-compose-foot>p:empty{display:none}
.se-compose-foot>p{margin:0 0 8px}
.se-compose-foot .form-actions,.se-compose-foot .se-actions{margin:0}
.se-compose .se-label{display:block;margin:16px 0 5px}
.se-draft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 14px;padding:8px 8px 8px 16px;border-radius:13px;background:#f1ebfa;color:#654498;font-size:14px}
.se-draft[hidden]{display:none}
.se-draft button{min-height:36px;padding:6px 12px;border:0;border-radius:10px;background:#fff;color:#654498;font:inherit;cursor:pointer}
.se-draft button:hover{background:#e5daef}
.se-draft button:focus-visible{outline:3px solid var(--purple,#7046bd);outline-offset:2px}

/* 휴대폰·태블릿 — 누르는 곳 44px */
@media(max-width:1199px){
  .se-btn,.se-swatch{min-width:44px;height:44px}
  .se-swatch{width:44px}
  .se-actions button,.se-draft button{min-height:44px}
}
/* 휴대폰 — 도구 막대는 한 줄 가로 넘김, 창·대화상자는 아래 시트 */
@media(max-width:640px){
  .se-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .se-bar::-webkit-scrollbar{display:none}
  .se-btn:focus-visible{outline-offset:-3px}
  .se-content{padding:14px 14px}
  .rich h2{font-size:22px}
  .rich h3{font-size:19px}
  dialog.se-compose{inset:auto 0 0;margin:0;width:100%;max-width:100%;height:calc(100dvh - 12px);max-height:none;border-width:1px 0 0;border-radius:20px 20px 0 0;animation:se-sheet .22s ease-out}
  .se-compose-head{padding:18px 16px 10px}
  .se-compose-head h2{font-size:20px}
  .se-compose-body{--se-pad:14px;padding:var(--se-pad) 16px 18px}
  .se-compose-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
  dialog.se-dialog{inset:auto 0 0;margin:0;width:100%;max-height:90dvh;border-width:1px 0 0;border-radius:20px 20px 0 0;padding:24px 16px calc(20px + env(safe-area-inset-bottom));animation:se-sheet .22s ease-out}
}
@keyframes se-sheet{from{transform:translateY(40px);opacity:.5}}
/* 4K — html zoom이 화면 높이 단위도 키우므로 줄여 맞춤(첫 화면 dialog.editor와 같게) */
@media(min-width:2400px){dialog.se-compose,dialog.se-dialog{max-height:60dvh}.se-content{min-height:clamp(220px,27dvh,420px)}}
@media(min-width:3200px){dialog.se-compose,dialog.se-dialog{max-height:45dvh}.se-content{min-height:clamp(220px,20dvh,420px)}}
@media(prefers-reduced-motion:reduce){dialog.se-compose,dialog.se-dialog,.se.is-busy .se-status::before{animation:none}}