/* 공지·이벤트 게시글의 공통 안내 편집기(블록형) 삽입.
   1) 부모(뉴스 편집 모달): .sjpost-content-editor > iframe.sjpost-content-frame  (/admin?contentEditor=article)
   2) iframe 안: body[data-content-editor="article"] — 관리 화면 중 편집 캔버스 + 오른쪽 내용 패널(#adminWorkbench)만 남긴다.
   기존 편집 흐름(새 묶음, 미리보기, 내용 추가, 표·글자 서식, 유의사항, 이미지 모음)과 workspace.js의 sticky 계산은 그대로 쓴다. */

/* ── 1. 부모: iframe 틀 ───────────────────────────────────────────── */
.sjpost-content-editor { position: relative; min-width: 0; max-width: 100%; }
/* 선택 표시는 공통 편집기의 각 요소에서 제공하므로 부모의 기존 편집 영역 점선을 겹치지 않는다. */
body.on-edit .sjpost-content-editor[data-admin-content] { outline: none; outline-offset: 0; }
/* 틀 자체는 테두리·배경 없이 둔다. 안쪽 편집 캔버스·내용 패널이 각자 테두리를 가져 이중 테두리·중첩 여백이 생기지 않는다. */
.sjpost-content-editor > .sjpost-content-frame { display: block; width: 100%; max-width: 100%; height: min(70vh, 720px); min-height: 480px; box-sizing: border-box; border: 0; border-radius: 0; background: transparent; }
.sjpost-content-editor > .sjpost-content-frame:focus-visible { outline: 2px solid var(--brand, #315de5); outline-offset: 2px; }
@media (max-width: 640px) {
  /* 모바일은 모달 머리·하단 버튼을 뺀 화면 높이를 편집기에 준다. iframe 안은 한 줄 세로 편집으로 바뀐다. */
  .sjpost-content-editor > .sjpost-content-frame { height: max(420px, calc(100dvh - 180px)); min-height: 420px; }
}

/* ── 2. iframe 안: 편집 캔버스 + 내용 패널만 ─────────────────────────── */
html:has(> body[data-content-editor="article"]), body[data-content-editor="article"] { background: transparent; }
body[data-content-editor="article"] .fradmin-shell { display: block; min-height: 100dvh; }
/* 관리 메뉴·페이지 제목·안내 상태 줄·면책 등급·다른 관리 화면·하단 저장 영역·로그아웃은 게시글 모달에서 쓰지 않는다. */
body[data-content-editor="article"] :is(.fradmin-sidebar, .fradmin-page-header, #adminInsuranceGrades, #adminManagementPanel, #adminNewsPanel, #adminSaveArea, #adminLegacyTemplates) { display: none !important; }
/* 상태 줄은 불러오기 실패(다시 불러오기)일 때만 보인다. 정상·수정 상태는 부모 모달이 안내한다. */
body[data-content-editor="article"] .fradmin-status-row { display: none; }
body[data-content-editor="article"] .fradmin-status-row:has(#adminStatus[data-state="error"], #adminRetry:not([hidden])) { display: flex; min-height: 0; margin: 0 0 10px; }
/* 바깥 여백 없이 iframe 폭 전체를 캔버스 + 내용 패널이 쓴다(안내 페이지 편집과 같은 2단 비율). */
body[data-content-editor="article"] .fradmin-main { max-width: none; padding: 0; }
body[data-content-editor="article"] .fradmin-workbench { gap: 16px; }
body[data-content-editor="article"] .fradmin-document-toolbar { top: 0; }
/* 오른쪽 패널: iframe(자기 viewport) 높이 안에서 최대 높이, 내용이 길면 패널 안에서 스크롤한다. 높이 값은 workspace.js가 iframe 로컬 viewport로 계산. */
body[data-content-editor="article"] .fradmin-field-panel { top: 0; height: auto; max-height: var(--fradmin-field-panel-height, 100dvh); }
body[data-content-editor="article"] .fradmin-canvas-surround { padding: 16px; }
/* 저장은 기존 #adminFieldCommit 하나만 쓴다(하단 저장 영역은 위에서 숨김).
   부모 모달 저장 버튼으로만 저장하려면 root가 body에 data-content-editor-save="parent"를 주면 툴바 저장 버튼을 화면에서 감춘다(요소·이벤트는 유지). */
body[data-content-editor="article"][data-content-editor-save="parent"] #adminFieldCommit { display: none !important; }

/* 좁은 iframe(≤960, workspace.js compact): 내용 묶음 도구줄 → 캔버스 → 내용 패널이 세로로 이어진다. 도구줄은 위에 붙어 새 묶음 추가·저장이 늘 보인다. */
@media (max-width: 960px) {
  body[data-content-editor="article"] .fradmin-main { padding: 0; }
  body[data-content-editor="article"] .fradmin-field-panel { top: auto; height: auto; max-height: none; }
  body[data-content-editor="article"] .fradmin-field-toolbar { top: 0; }
  body[data-content-editor="article"] .fradmin-document-toolbar { top: var(--fradmin-field-toolbar-height); }
}
@media (max-width: 640px) {
  body[data-content-editor="article"] .fradmin-main { padding: 0 0 12px; }
  body[data-content-editor="article"] .fradmin-canvas-surround { padding: 12px 8px; }
}

/* ── 3. Friends 공통 편집기 글: 관리 본문에서 바로 편집(inline) ─────────────────────
   news.js가 route-admin + 공통 편집기일 때 #newsAdminModal(.news-admin-modal)에 .fradmin-post-inline을,
   #adminNewsPanel에 data-article-editing="true"를 준다. 기존 CK 글은 표시가 없어 모달 그대로다(news.html의 두 묶음은 inline style로 display:contents).
   구성: [글 작성 제목 · 목록으로] → [메타 설정 카드(카테고리·구분·제목 …)] → [본문 내용: 공통 편집기, 관리 본문 폭 전체] → [취소·삭제] */
/* 편집 중에는 목록 탭·글쓰기와 목록을 숨기고, 관리 패널의 바깥 카드(흰 바탕·테두리·24px 여백)도 걷어 낸다. */
#adminNewsPanel[data-article-editing="true"] :is(.news-hero, .news-content) { display: none !important; }
#adminNewsPanel[data-article-editing="true"] { padding: 0; border: 0; border-radius: 0; background: transparent; }
/* 모달 틀 해제: 고정 위치·덮개·폭/높이 제한·카드 모양 없이 관리 본문 흐름에 놓는다. */
.news-admin-modal.fradmin-post-inline { position: static; inset: auto; z-index: auto; display: block; }
.news-admin-modal.fradmin-post-inline > .news-modal-overlay { display: none; }
.news-admin-modal.fradmin-post-inline > .news-modal-window { position: static; z-index: auto; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; overflow: visible; transform: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* 글 작성 머리: 제목 + '목록으로'(기존 닫기 버튼) */
.news-admin-modal.fradmin-post-inline .news-modal-head { gap: 12px; padding: 0 0 12px; border-bottom: 0; }
.news-admin-modal.fradmin-post-inline .news-modal-close { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 38px; padding: 0 14px; border: 1px solid var(--line, #dfe4ec); border-radius: 8px; background: #fff; color: var(--ink-2, #4b5563); font-size: 13px; font-weight: 700; line-height: 1.2; }
.news-admin-modal.fradmin-post-inline .news-modal-close::before { content: "←"; font-weight: 600; }
.news-admin-modal.fradmin-post-inline .news-modal-close:hover { border-color: var(--brand, #315de5); color: var(--brand, #315de5); }
.news-admin-modal.fradmin-post-inline .news-modal-close:focus-visible { outline: 2px solid var(--brand, #315de5); outline-offset: 2px; }
/* 폼이 메타 카드 배치의 기준 폭(container). 카드 자신은 자기 폭을 질의할 수 없어 바로 위 폼에 둔다(폼 폭 = 카드 폭). */
.news-admin-modal.fradmin-post-inline .news-modal-body { display: block; padding: 0; overflow: visible; container: news-meta / inline-size; }
/* 메타 설정: 흰 카드 한 장. 폼 폭(container query)에 따라 1칸 → 2칸 → 6칸 그리드로 촘촘히 놓는다.
   필드 표시·숨김(display)은 news.js가 inline style로 정하므로 여기서는 display를 건드리지 않고 칸 배치·간격만 정한다. */
.news-admin-modal.fradmin-post-inline .news-article-meta { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--line, #e1e6ef); border-radius: 12px; background: #fff; }
.news-admin-modal.fradmin-post-inline .news-article-meta > * { min-width: 0; margin: 0; }
/* 라벨과 입력 사이 8px(필드는 news.js가 flex로 표시). 구분/상단 고정 줄 안의 칸도 같은 간격. */
.news-admin-modal.fradmin-post-inline .news-article-meta .news-field { gap: 8px; }
.news-admin-modal.fradmin-post-inline .news-article-meta :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
.news-admin-modal.fradmin-post-inline .news-article-meta :is(input:not([type="checkbox"]):not([type="color"]), select) { min-height: 44px; }
/* 썸네일: 큰 빈 판 대신 낮은 가로형 업로드 칸(클릭·끌어 놓기·미리보기·삭제는 그대로). */
.news-admin-modal.fradmin-post-inline .news-article-meta #newsUploadZone { min-height: 96px; padding: 12px 16px; }
.news-admin-modal.fradmin-post-inline .news-article-meta #newsUploadPlaceholder { flex-direction: row; gap: 8px; }
.news-admin-modal.fradmin-post-inline .news-article-meta #newsUploadPlaceholder .upload-icon { font-size: 20px; }
/* 기간: 두 날짜 칸이 함께 줄어들고(가로 넘침 없음) 아주 좁으면 위아래로 쌓인다. */
.news-admin-modal.fradmin-post-inline .news-article-meta #newsModalDateField > div { min-width: 0; }
.news-admin-modal.fradmin-post-inline .news-article-meta #newsModalDateField input[type="date"] { flex: 1 1 0; min-width: 0; }
/* 강조: 체크와 색 선택을 한 줄로(여러 행 차지 방지). */
.news-admin-modal.fradmin-post-inline .news-article-meta #newsModalAccentField { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 0 !important; }
.news-admin-modal.fradmin-post-inline .news-article-meta #newsModalAccentField > label { flex: none; min-height: 44px; }
.news-admin-modal.fradmin-post-inline .news-article-meta #newsModalAccentField > div { flex: 1 1 220px; min-width: 0; margin-top: 0 !important; }
.news-admin-modal.fradmin-post-inline .news-article-meta #newsModalThumbMetaRow > .news-field { min-width: 0; }
/* 2칸(폼 440px 이상): 카테고리·구분/제목 짝, 나머지는 전체 폭, 주소·정렬은 반 칸. */
@container news-meta (min-width: 440px) {
  .news-admin-modal.fradmin-post-inline .news-article-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-admin-modal.fradmin-post-inline .news-article-meta > * { grid-column: 1 / -1; }
  .news-admin-modal.fradmin-post-inline .news-article-meta > :is(.news-field:has(#newsModalCategory), #newsNoticeHalfRow, .news-field:has(#newsModalSubject), #newsModalAddressField, #newsModalOrderField) { grid-column: span 1; }
  /* 공지(구분 줄이 보일 때)는 제목을 다음 줄 전체 폭으로 */
  .news-admin-modal.fradmin-post-inline .news-article-meta:has(> #newsNoticeHalfRow:not([style*="none"])) > .news-field:has(#newsModalSubject) { grid-column: 1 / -1; }
}
/* 6칸(폼 680px 이상): [카테고리 | 제목] [썸네일(2행) | 기간 · 강조] [요약 | 정렬], 축제는 [주소 | 배지]. */
@container news-meta (min-width: 680px) {
  .news-admin-modal.fradmin-post-inline .news-article-meta { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 20px; padding: 20px; }
  .news-admin-modal.fradmin-post-inline .news-article-meta > :is(.news-field:has(#newsModalCategory), #newsModalAddressField, #newsModalOrderField) { grid-column: span 2; }
  .news-admin-modal.fradmin-post-inline .news-article-meta > :is(#newsNoticeHalfRow, .news-field:has(#newsModalSubject), #newsModalDateField, #newsModalAccentField, #newsModalSummaryField, #newsModalThumbMetaRow) { grid-column: span 4; }
  .news-admin-modal.fradmin-post-inline .news-article-meta > #newsModalThumbField { grid-column: span 2; grid-row: span 2; }
  .news-admin-modal.fradmin-post-inline .news-article-meta > #newsModalThumbField #newsUploadZone { min-height: 112px; }
  .news-admin-modal.fradmin-post-inline .news-article-meta:has(> #newsNoticeHalfRow:not([style*="none"])) > .news-field:has(#newsModalSubject) { grid-column: 1 / -1; }
}
/* 아주 좁은 폼(320px 화면 등): 기간 두 칸을 위아래로. */
@container news-meta (max-width: 339px) {
  .news-admin-modal.fradmin-post-inline .news-article-meta #newsModalDateField > div { flex-direction: column; align-items: stretch; }
  .news-admin-modal.fradmin-post-inline .news-article-meta #newsModalDateField > div > span { display: none; }
}
/* 본문 내용: 카드 밖 독립 영역. 라벨 아래 공통 편집기(캔버스 + 내용 패널)가 관리 본문 폭을 그대로 쓴다. */
.news-admin-modal.fradmin-post-inline .news-article-body { display: block !important; min-width: 0; margin-top: 20px; }
.news-admin-modal.fradmin-post-inline .news-article-body > .news-field { gap: 8px; min-width: 0; margin: 0; }
.news-admin-modal.fradmin-post-inline .news-article-body > .news-field > label { color: var(--ink-1, #273248); font-size: 14px; font-weight: 750; }
.news-admin-modal.fradmin-post-inline .news-modal-foot { gap: 8px; margin-top: 16px; }
/* 저장은 편집기 안 오른쪽 위 저장 하나(부모 폼 전체 저장 연결). 하단에는 취소(목록으로)와 기존 조건의 삭제만 남는다. */
.news-admin-modal.fradmin-post-inline:has(.sjpost-content-editor) .btn-news-submit { display: none !important; }
/* 본문 iframe: 화면의 약 72%, 최소 560px(내용 패널·도구가 잘리지 않는 높이) ~ 최대 760px. 큰 창에서 빈 본문이 과하게 길어지지 않는다.
   1440×1000 → 720px, 1440×800 → 576px. 안쪽은 캔버스·내용 패널이 각자 스크롤한다. */
.fradmin-post-inline .sjpost-content-editor > .sjpost-content-frame { height: clamp(560px, 72vh, 760px); min-height: 560px; }
@media (max-width: 640px) {
  .news-admin-modal.fradmin-post-inline .news-modal-close,
  .news-admin-modal.fradmin-post-inline .news-modal-foot button { min-height: 44px; }
  .news-admin-modal.fradmin-post-inline .news-article-meta { gap: 14px; padding: 14px; }
  .news-admin-modal.fradmin-post-inline .news-article-meta :is(input:not([type="checkbox"]):not([type="color"]), select, textarea) { font-size: 16px; }
  .news-admin-modal.fradmin-post-inline .news-article-body { margin-top: 16px; }
  /* 390×844 → 664px, 320×740 → 560px, 큰 모바일도 최대 680px */
  .fradmin-post-inline .sjpost-content-editor > .sjpost-content-frame { height: max(420px, min(calc(100dvh - 180px), 680px)); min-height: 420px; }
}

/* ── 4. SJ 공통 편집기 글(/support, 이미 본문 inline) ─────────────────────────
   편집 중에만 상세 본문의 큰 여백(34px 38px 42px)을 줄여 편집기 폭을 확보한다. 기존 CK 글·고객 상세에는 적용하지 않는다. */
body.on-edit .notice-detail-body:has(> .sjpost-content-editor) { padding: 16px 12px 20px; }
@media (max-width: 640px) {
  body.on-edit .notice-detail-body:has(> .sjpost-content-editor) { padding: 10px 6px 14px; }
}
/* 공통 글 본문은 안내 표시 모듈을 위해 guide-v2 클래스를 받지만, 안내 페이지 전용 흰 바탕·하단 100px 여백은 필요 없다(고객 상세·편집 모두). */
.notice-detail-article.guide-v2 { padding-bottom: 0; background: transparent; }

/* ── 5. 관리자 공지·이벤트 목록(Friends /admin/news·events, SJ 공통): 배경 한 장 + 목록만 흰 면 ─────────────
   관리 패널의 흰 카드 안에 공개 화면의 회색 .news-main(min-height 80vh)과 흰 목록 카드가 겹쳐 면이 세 겹이던 문제.
   패널·공개 배경을 투명하게 해 관리자 배경(#f4f6fa)으로 잇고, 목록·카드만 흰 면으로 둔다. 공개 고객 화면 CSS는 그대로다. */
.route-admin #adminNewsPanel { padding: 0; border: 0; border-radius: 0; background: transparent; }
.route-admin #adminNewsPanel .news-main { min-height: 0; background: transparent; }
.route-admin #adminNewsPanel .news-hero { background: transparent; }
.route-admin #adminNewsPanel .news-tabs-wrap [data-support-write] { flex-shrink: 0; white-space: nowrap; }
/* 탭 + 글쓰기는 목록 위 관리 막대로: 아래 선 하나로 구분하고 목록과의 간격만 둔다. */
.route-admin #adminNewsPanel .news-content { padding: 20px 0 0; }
/* 탭 안 제목·설명(페이지 머리와 같은 이름)은 작게 한 줄로 줄이고 점선 대신 여백으로 구분한다. 하위 탭 등 기존 내용은 그대로. */
.route-admin #adminNewsPanel .news-sec-head { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; gap: 12px; }
.route-admin #adminNewsPanel .news-sec-head h2 { font-size: 18px; }
.route-admin #adminNewsPanel .news-sec-head p { margin-top: 4px; font-size: 13px; }
/* 목록: 관리 카드와 같은 반경·테두리의 흰 면 */
.route-admin #adminNewsPanel .notice-board { border-radius: 12px; border-color: var(--line, #e1e6ef); }
@media (max-width: 640px) {
  .route-admin #adminNewsPanel .news-content { padding-top: 14px; }
  .route-admin #adminNewsPanel .news-tabs-wrap [data-support-write] { min-height: 44px; }
}

/* ── 6. 게시글 본문의 '새 묶음 추가' 선택창(부모 문서 native dialog) ─────────────────────
   iframe 안 dialog는 dim이 iframe에만 깔려 제목·메타·메뉴가 밝게 남았다. root가 부모 문서에 dialog.sjpost-template-dialog를 만들어
   전체 화면을 같은 dim으로 덮는다. 관리 화면 '새 묶음 추가'(fradmin-template-panel)와 같은 모양이고, workspace.css 없이(공개 /news·/support)도 혼자 동작한다.
   닫힌 dialog는 브라우저 기본(display:none) 그대로 두고, 열렸을 때만 배치를 정한다. */
.sjpost-template-dialog { --sjpost-brand: var(--brand, #315de5); box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #e1e6ef; border-radius: 12px; background: #fff; color: #273248; box-shadow: 0 20px 60px rgba(23, 32, 51, .19); font-family: inherit; font-size: 14px; line-height: 1.45; text-align: left; }
.sjpost-template-dialog[open] { display: flex; flex-direction: column; }
.sjpost-template-dialog::backdrop { background: rgba(23, 32, 51, .38); }
.sjpost-template-dialog *, .sjpost-template-dialog *::before, .sjpost-template-dialog *::after { box-sizing: border-box; }
.sjpost-template-dialog .sjpost-template-heading { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 20px; border-bottom: 1px solid #e6ebf2; background: #fff; }
.sjpost-template-dialog .sjpost-template-heading h2 { margin: 0; padding: 0; color: #273248; font-size: 18px; font-weight: 750; letter-spacing: -.01em; line-height: 1.35; }
.sjpost-template-dialog .sjpost-template-close { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; color: #495367; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sjpost-template-dialog .sjpost-template-close:hover { border-color: #b6c9ed; color: #20324f; background: #f8faff; }
.sjpost-template-dialog .sjpost-template-content { flex: 1 1 auto; min-height: 0; padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
/* 1) 모양: 본문 | 카드 두 칸 */
.sjpost-template-dialog .sjpost-template-style { min-width: 0; margin: 0; padding: 0; border: 0; }
.sjpost-template-dialog .sjpost-template-style > legend, .sjpost-template-dialog .sjpost-template-label { display: block; margin: 0 0 8px; padding: 0; color: #354057; font-size: 13px; font-weight: 750; line-height: 1.4; }
.sjpost-template-dialog .sjpost-template-label { margin-top: 18px; }
.sjpost-template-dialog .sjpost-template-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; min-width: 0; padding: 3px; border: 1px solid #dfe4ed; border-radius: 9px; background: #f4f6fa; }
.sjpost-template-dialog .sjpost-template-segment > label { position: relative; display: block; min-width: 0; margin: 0; }
.sjpost-template-dialog .sjpost-template-segment > label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.sjpost-template-dialog .sjpost-template-segment > label > span { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 38px; padding: 6px 10px; border-radius: 7px; color: #53627a; background: transparent; font-size: 13px; font-weight: 650; line-height: 1.3; text-align: center; }
.sjpost-template-dialog .sjpost-template-segment > label:hover > span { color: var(--sjpost-brand); }
.sjpost-template-dialog .sjpost-template-segment > label > input:checked + span { color: var(--sjpost-brand); background: #fff; box-shadow: 0 1px 3px rgba(23, 32, 51, .12), inset 0 0 0 1px color-mix(in srgb, var(--sjpost-brand), #fff 55%); font-weight: 750; }
.sjpost-template-dialog .sjpost-template-segment > label > input:focus-visible + span { outline: 2px solid var(--sjpost-brand); outline-offset: 1px; }
.sjpost-template-dialog .sjpost-template-segment > label > input:disabled { cursor: not-allowed; }
.sjpost-template-dialog .sjpost-template-segment > label > input:disabled + span { color: #a3adbd; }
/* 2) 넣을 내용: '+ 양식' 버튼 */
.sjpost-template-dialog .sjpost-template-options { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sjpost-template-dialog .sjpost-template-options > button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: 100%; margin: 0; padding: 7px 12px; border: 1px solid #dce4f0; border-radius: 7px; background: #f9fbff; color: #53627a; font: inherit; font-size: 13px; font-weight: 650; line-height: 1.4; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.sjpost-template-dialog .sjpost-template-options > button::before { content: "+"; flex: none; color: var(--sjpost-brand); font-size: 15px; font-weight: 500; line-height: 1; }
.sjpost-template-dialog .sjpost-template-options > button:hover:not(:disabled) { border-color: #9bbcff; background: #f1f6ff; color: var(--sjpost-brand); }
.sjpost-template-dialog .sjpost-template-options > button:disabled { cursor: not-allowed; opacity: .45; }
.sjpost-template-dialog :is(.sjpost-template-close, .sjpost-template-options > button):focus-visible { outline: 2px solid var(--sjpost-brand); outline-offset: 2px; }
/* 3) 안내 양식으로 시작(접힘): 기존 복합 양식. 위 기본 요소('넣을 내용')보다 한 단계 낮은 점선 버튼. */
.sjpost-template-dialog .sjpost-template-presets { margin: 16px 0 0; padding: 0; border: 0; border-top: 1px solid #edf0f5; }
.sjpost-template-dialog .sjpost-template-presets > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 10px 2px 8px; color: #5d6a80; font-size: 13px; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; }
.sjpost-template-dialog .sjpost-template-presets > summary::-webkit-details-marker { display: none; }
.sjpost-template-dialog .sjpost-template-presets > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 0; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.sjpost-template-dialog .sjpost-template-presets[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
.sjpost-template-dialog .sjpost-template-presets > summary:hover { color: var(--sjpost-brand); }
.sjpost-template-dialog .sjpost-template-presets > summary:focus-visible { outline: 2px solid var(--sjpost-brand); outline-offset: 2px; border-radius: 6px; }
.sjpost-template-dialog .sjpost-template-presets > p { margin: 0 0 10px; padding: 0; color: #7a869a; font-size: 12px; font-weight: 500; line-height: 1.5; }
.sjpost-template-dialog .sjpost-template-preset-options { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin-top: 0; padding: 2px 0 4px; }
.sjpost-template-dialog .sjpost-template-preset-options > button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: 100%; margin: 0; padding: 7px 12px; border: 1px dashed #c9d5e7; border-radius: 7px; background: #fff; color: #53627a; font: inherit; font-size: 13px; font-weight: 650; line-height: 1.4; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.sjpost-template-dialog .sjpost-template-preset-options > button::before { content: "+"; flex: none; color: var(--sjpost-brand); font-size: 15px; font-weight: 500; line-height: 1; }
.sjpost-template-dialog .sjpost-template-preset-options > button:hover:not(:disabled) { border-color: #9bbcff; border-style: solid; background: #f1f6ff; color: var(--sjpost-brand); }
.sjpost-template-dialog .sjpost-template-preset-options > button:disabled { cursor: not-allowed; opacity: .45; }
.sjpost-template-dialog .sjpost-template-preset-options > button:focus-visible { outline: 2px solid var(--sjpost-brand); outline-offset: 2px; }
@media (max-width: 640px), (pointer: coarse) {
  .sjpost-template-dialog .sjpost-template-heading { padding: 14px 16px; }
  .sjpost-template-dialog .sjpost-template-content { padding: 14px 16px 18px; }
  .sjpost-template-dialog .sjpost-template-close, .sjpost-template-dialog .sjpost-template-segment > label > span, .sjpost-template-dialog .sjpost-template-options > button { min-height: 44px; }
  .sjpost-template-dialog .sjpost-template-presets > summary, .sjpost-template-dialog .sjpost-template-preset-options > button { min-height: 44px; }
}
@media (max-width: 380px) {
  /* 아주 좁은 화면: 양식 버튼 2열로 고르게 */
  .sjpost-template-dialog :is(.sjpost-template-options, .sjpost-template-preset-options) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
}

/* ── 7. 공지·이벤트 공통 글: 페이지 한 장 스크롤 + 오른쪽 패널이 따라오는 배치(page layout) ─────────────
   부모 iframe을 내용 높이(root가 실측해 inline height)로 늘려 iframe 안 스크롤을 없애고, 바깥 관리 페이지만 스크롤한다.
   iframe 안 sticky는 iframe viewport 기준이라 부모 스크롤을 모르므로, root가 부모 스크롤에 맞춰 --fradmin-host-sticky-top을 갱신하면
   오른쪽 패널(·도구줄)이 그 위치에 붙어 workbench 안에서 따라온다. 패널 본문만 안쪽 스크롤. */
/* 부모: 높이는 root inline 값, 기존 inline 모드의 clamp·최소 높이 해제 */
.sjpost-content-editor > .sjpost-content-frame[data-layout="page"] { min-height: 0 !important; overflow: hidden; }
.fradmin-post-inline .sjpost-content-editor > .sjpost-content-frame[data-layout="page"] { min-height: 0 !important; }
/* 패널을 크게 볼 때 같은 iframe을 부모 화면에 고정한다. 자식 문서·편집 상태는 그대로 유지한다. */
.sjpost-content-editor > .sjpost-content-frame[data-panel-expanded="true"] { position: fixed; inset: 0; z-index: 2147483000; width: 100%; max-width: none; height: 100dvh !important; min-height: 0 !important; margin: 0; border: 0; border-radius: 0; }
/* iframe 안: 문서는 자연 높이(자체 스크롤 없음) */
html:has(> body[data-content-editor-layout="page"]), body[data-content-editor-layout="page"] { overflow: hidden; }
body[data-content-editor-layout="page"] .fradmin-shell { min-height: 0; }
body[data-content-editor-layout="page"] .fradmin-workbench { align-items: start; }
/* 넓은 화면: 오른쪽 패널·문서 도구줄을 부모 스크롤 위치(호스트 오프셋)에 붙인다. 높이는 기존 공통 변수(--fradmin-field-panel-height, 부모 보이는 높이 기준으로 root가 제공). */
body[data-content-editor-layout="page"] .fradmin-field-panel { top: var(--fradmin-host-sticky-top, 0px); max-height: var(--fradmin-field-panel-height, 720px); }
body[data-content-editor-layout="page"] .fradmin-document-toolbar { top: var(--fradmin-host-sticky-top, 0px); }
/* 넓은 화면: 본문이 짧아도 부모 화면의 남은 높이(--fradmin-article-min-height, root가 body에 px로 제공)까지 문서를 채워 아래 빈 공간이 없게 한다.
   도구줄은 고정 높이, 회색 작업 영역이 나머지를 채운다. 내용이 더 길면 자연 높이로 늘어난다(최대 높이 없음). 좁은 화면(≤960)은 기존 자연 흐름. */
@media (min-width: 961px) {
  body[data-content-editor-layout="page"] .fradmin-document { box-sizing: border-box; display: flex; flex-direction: column; min-height: var(--fradmin-article-min-height, 0px); }
  body[data-content-editor-layout="page"] .fradmin-document > .fradmin-document-toolbar { flex: none; }
  body[data-content-editor-layout="page"] .fradmin-document > .fradmin-canvas-surround { flex: 1 0 auto; box-sizing: border-box; }
}
@media (max-width: 960px) {
  /* 좁은 화면: 기존 자연 흐름. 위에 붙는 내용 묶음 도구줄·문서 도구줄에만 호스트 오프셋을 더한다. */
  body[data-content-editor-layout="page"] .fradmin-field-panel { top: auto; max-height: none; }
  body[data-content-editor-layout="page"] .fradmin-field-toolbar { top: var(--fradmin-host-sticky-top, 0px); }
  body[data-content-editor-layout="page"] .fradmin-document-toolbar { top: calc(var(--fradmin-host-sticky-top, 0px) + var(--fradmin-field-toolbar-height, 0px)); }
}

/* 공통 inline 하단 '취소'는 위 '← 목록으로'와 같은 동작이라 숨긴다(기존 CK 모달·공개 모달은 그대로). 하단에는 기존 조건의 삭제만 남는다. */
.news-admin-modal.fradmin-post-inline:has(.sjpost-content-editor) #newsModalCancel { display: none !important; }
/* 하단에 보이는 버튼이 없으면 하단 줄 자체를 숨긴다(삭제는 news.js가 inline display로 표시·숨김). */
.news-admin-modal.fradmin-post-inline:has(.sjpost-content-editor) .news-modal-foot:not(:has(#newsModalDelete:not([style*="none"]))) { display: none; }