/* 공통 글쓰기 에디터(rich-editor) — 모든 페이지가 이 파일 하나로 같은 에디터를 쓴다. 기능/스타일 변경은 여기서만. */

/* ── 큰 모달 껍데기 ── */
.re-overlay{position:fixed;inset:0;background:#fff;z-index:9700;display:none;flex-direction:column;font-family:'Noto Sans KR',sans-serif}
.re-overlay.on{display:flex}
.re-topbar{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #eee;flex:0 0 auto}
.re-topbar .re-close{font-size:24px;line-height:1;color:#999;background:none;border:0;cursor:pointer;padding:2px 8px}
.re-topbar .re-title-label{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;color:#888}
.re-topbar .re-spacer{flex:1}
.re-topbar .re-msg{font-size:12px;color:#c0392b}
.re-btn{padding:8px 14px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-family:'Noto Sans KR',sans-serif;font-size:13px;color:#555}
.re-btn:hover{background:#f5f5f5}
.re-btn.save{background:#1a1a1a;color:#fff;border-color:#1a1a1a;font-weight:700}
.re-body{flex:1 1 auto;overflow:auto}
.re-inner{max-width:960px;margin:0 auto;width:100%}
.re-title-input{width:100%;border:0;border-bottom:2px solid #1a1a1a;font-size:26px;font-weight:700;padding:24px 48px 12px;font-family:'Noto Sans KR',sans-serif;outline:none;box-sizing:border-box}
.re-title-input::placeholder{color:#ccc}

/* ── 페이지별 추가 입력칸(공개범위·고정 등) ── */
.re-extra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 48px 0;font-size:13px;color:#444}
.re-extra label{display:flex;align-items:center;gap:6px;cursor:pointer;margin:0}
.re-extra input[type=radio],.re-extra input[type=checkbox]{accent-color:#c0392b}
@media(max-width:768px){.re-extra{padding:12px 20px 0}}

/* ── 편집/미리보기 탭 ── */
.re-tabs{display:flex;gap:0;border-bottom:1px solid #eee;padding:0 48px;margin-top:8px}
.re-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 18px;font-family:'Noto Sans KR',sans-serif;font-size:14px;color:#999;cursor:pointer;margin-bottom:-1px}
.re-tabs button.active{color:#1a1a1a;font-weight:700;border-bottom-color:#00c73c}
.re-device-bar{display:none;gap:6px;padding:10px 48px 0}
.re-device-bar button{font-size:12px;padding:5px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;color:#666}
.re-device-bar button.active{border-color:#00c73c;color:#00c73c}
.re-preview{display:none;padding:24px 48px 60px;font-family:'Noto Sans KR',sans-serif;font-size:15px;line-height:1.9;color:#333;margin:0 auto}
.re-preview img{max-width:100%}

/* ── Quill 본체 ── */
.re-quill-wrap{position:relative;padding:0 48px 48px}
.re-quill-wrap .ql-toolbar.ql-snow{border:none!important;background:#fff;border-bottom:1px solid #eee!important;padding:10px 0!important;position:sticky;top:0;z-index:205;flex-wrap:wrap;gap:4px}
.re-quill-wrap .ql-toolbar.ql-snow .ql-formats{margin-right:8px!important}
.re-quill-wrap .ql-snow .ql-picker{margin:0 2px}
.re-quill-wrap .ql-container.ql-snow{border:none!important}
.re-quill-wrap .ql-editor{min-height:520px;font-family:'Noto Sans KR',sans-serif!important;font-size:15px!important;line-height:1.9!important;padding:24px 0!important;color:#333}
.re-quill-wrap .ql-editor hr{border:none;border-top:2px solid #ddd;margin:24px 0}
.re-quill-wrap .ql-editor img{max-width:100%}
.re-quill-wrap .ql-editor.ql-blank::before{font-style:normal!important;color:#ccc!important;font-size:15px!important}
.ql-spacer{width:100%}

/* ── 삽입 박스(정보/팁/주의) — 색 없이 아이콘만 ── */
.ql-box-info::before{content:'ℹ️ '}
.ql-box-tip::before{content:'💡 '}
.ql-box-warning::before{content:'⚠️ '}
/* 예전 글의 인용구 호환용(새로 넣는 메뉴에는 없음) */
.ql-box-quote{border-left:3px solid #ccc;padding-left:12px;color:#666;font-style:italic}

/* ── 이미지 선택·편집바 ── */
.ql-editor img{cursor:pointer}
.ql-editor img.re-img-selected{outline:3px solid #00c73c;outline-offset:2px}
.re-img-bar{position:fixed;z-index:9995;background:#333;border-radius:8px;padding:4px 6px;display:flex;gap:2px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);font-family:'Noto Sans KR',sans-serif}
.re-img-bar button{background:none;border:0;color:#eee;font-size:12px;padding:5px 9px;border-radius:4px;cursor:pointer;font-family:'Noto Sans KR',sans-serif;white-space:nowrap}
.re-img-bar button:hover{background:rgba(255,255,255,.15)}
.re-img-bar button.danger{color:#ff8a80}
.re-img-sep{width:1px;height:14px;background:rgba(255,255,255,.25);margin:0 3px}

/* ── 사진 여러 장 나란히(그리드) ── */
.ql-image-grid{display:grid;gap:4px;margin:16px 0;cursor:pointer;border-radius:4px;overflow:hidden}
.ql-image-grid.grid-2col{grid-template-columns:1fr 1fr}
.ql-image-grid.grid-3col{grid-template-columns:1fr 1fr 1fr}
.ql-image-grid img{width:100%;height:100%;object-fit:cover;display:block}
.ql-image-grid:hover{outline:2px dashed #00c73c;outline-offset:2px}
.ql-image-grid.re-img-selected{outline:3px solid #00c73c;outline-offset:2px}

/* ── 사진 편집 모달(자르기·회전·보정) ── */
.re-crop-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9996;display:flex;align-items:center;justify-content:center;padding:16px;font-family:'Noto Sans KR',sans-serif}
.re-crop-box{background:#fff;border-radius:10px;max-width:860px;width:100%;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.re-crop-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#333}
.re-crop-x{background:none;border:0;font-size:20px;color:#999;cursor:pointer;padding:2px 6px}
.re-crop-canvas{max-height:56vh;overflow:hidden;background:#f4f4f4;border-radius:6px;display:flex;align-items:center;justify-content:center}
.re-crop-canvas img{max-width:100%;max-height:56vh;display:block}
.re-crop-adj{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:#666}
.re-crop-adj label{display:flex;align-items:center;gap:6px}
.re-crop-adj input[type=range]{width:110px}
.re-crop-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── 왼쪽 + 삽입 버튼 + 메뉴 ── */
.re-side-btn{position:fixed;width:36px;height:36px;border-radius:50%;background:#00c73c;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:22px;color:#fff;transition:transform .2s,background .2s;z-index:9992;box-shadow:0 3px 12px rgba(0,199,60,.35);line-height:1;font-weight:700}
.re-side-btn.visible{display:flex}
.re-side-btn:hover{background:#00b336;transform:scale(1.1)}
.re-side-btn.rotated{transform:rotate(45deg);background:#333}
.re-side-menu{position:fixed;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);border:1px solid #eee;display:none;flex-direction:column;z-index:9993;min-width:170px;padding:6px 0}
.re-side-menu.open{display:flex}
.re-side-menu button{display:flex;align-items:center;gap:10px;padding:10px 16px;background:none;border:none;cursor:pointer;font-family:'Noto Sans KR',sans-serif;font-size:13px;color:#444;text-align:left;white-space:nowrap}
.re-side-menu button:hover{background:#f5f5f5}
.re-side-menu .re-si-icon{width:22px;text-align:center;font-size:16px;color:#888}

/* ── Quill 드롭다운 라벨(글꼴·크기·줄간격·자간) ── */
.re-quill-wrap .ql-snow .ql-picker.ql-font{width:132px}
.re-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label{padding-right:20px}   /* 글자가 ⇕ 화살표와 겹치지 않게 */
.re-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.re-quill-wrap .ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'기본 (노토산스)'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="noto-serif"]::before{content:'노토세리프';font-family:'Noto Serif KR'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="gothic-a1"]::before{content:'고딕 A1';font-family:'Gothic A1'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="pretendard"]::before{content:'프리텐다드'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="nanum-gothic"]::before{content:'나눔고딕';font-family:'Nanum Gothic'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="nanum-myeongjo"]::before{content:'나눔명조';font-family:'Nanum Myeongjo'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="nanum-pen"]::before{content:'나눔손글씨';font-family:'Nanum Pen Script'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="black-han"]::before{content:'블랙한산스';font-family:'Black Han Sans'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="do-hyeon"]::before{content:'도현';font-family:'Do Hyeon'}
.re-quill-wrap .ql-snow .ql-picker.ql-font [data-value="jua"]::before{content:'주아';font-family:'Jua'}
.ql-font-noto-serif{font-family:'Noto Serif KR',serif!important}
.ql-font-gothic-a1{font-family:'Gothic A1',sans-serif!important}
.ql-font-pretendard{font-family:'Pretendard Variable',sans-serif!important}
.ql-font-nanum-gothic{font-family:'Nanum Gothic',sans-serif!important}
.ql-font-nanum-myeongjo{font-family:'Nanum Myeongjo',serif!important}
.ql-font-nanum-pen{font-family:'Nanum Pen Script',cursive!important}
.ql-font-black-han{font-family:'Black Han Sans',sans-serif!important}
.ql-font-do-hyeon{font-family:'Do Hyeon',sans-serif!important}
.ql-font-jua{font-family:'Jua',sans-serif!important}
.re-quill-wrap .ql-snow .ql-picker.ql-size{width:60px}
.re-quill-wrap .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.re-quill-wrap .ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'기본'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="12px"]::before{content:'12'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="14px"]::before{content:'14'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="16px"]::before{content:'16'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="18px"]::before{content:'18'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="20px"]::before{content:'20'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="24px"]::before{content:'24'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="28px"]::before{content:'28'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="36px"]::before{content:'36'}
.re-quill-wrap .ql-snow .ql-picker.ql-size [data-value="48px"]::before{content:'48'}
/* 줄간격 드롭다운 — 라벨 없으면 화살표만 보임 */
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight{width:64px}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight .ql-picker-label::before,
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight .ql-picker-item::before{content:'줄간격'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="1"]::before{content:'1.0'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="1.2"]::before{content:'1.2'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="1.4"]::before{content:'1.4'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="1.6"]::before{content:'1.6'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="1.8"]::before{content:'1.8'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="2"]::before{content:'2.0'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="2.5"]::before{content:'2.5'}
.re-quill-wrap .ql-snow .ql-picker.ql-lineHeight [data-value="3"]::before{content:'3.0'}
/* 자간 드롭다운 */
.re-quill-wrap .ql-snow .ql-picker.ql-letterSpacing{width:70px}
.re-quill-wrap .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label::before,
.re-quill-wrap .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item::before{content:'자간'}
.re-quill-wrap .ql-snow .ql-picker.ql-letterSpacing [data-value="-1px"]::before{content:'좁게'}
.re-quill-wrap .ql-snow .ql-picker.ql-letterSpacing [data-value="0px"]::before{content:'기본'}
.re-quill-wrap .ql-snow .ql-picker.ql-letterSpacing [data-value="1px"]::before{content:'넓게'}
.re-quill-wrap .ql-snow .ql-picker.ql-letterSpacing [data-value="2px"]::before{content:'아주넓게'}

@media(max-width:768px){
  .re-title-input{padding:18px 20px 10px;font-size:22px}
  .re-tabs,.re-device-bar,.re-preview{padding-left:20px;padding-right:20px}
  .re-quill-wrap{padding:0 20px 32px}
  .re-side-btn{width:30px;height:30px;font-size:18px}
}