/* 공통 관리자. 고객 화면의 카드·표는 각 업체의 안내 스타일을 그대로 사용한다. */
.route-admin { --fradmin-sticky-top: 72px; --fradmin-field-toolbar-height: 73px; background: #f4f6fa; }
.route-admin [hidden] { display: none !important; }
/* 관리 화면: 선택 변경 등으로 세로 스크롤바가 생기고 사라질 때 본문 폭이 흔들리지 않게 스크롤바를 항상 둔다.
   (이 Chromium에서는 scrollbar-gutter: stable만으로 자리가 예약되지 않아 overflow-y: scroll로 고정. 겹쳐 뜨는 스크롤바 환경은 변화 없음.)
   게시글 iframe page 레이아웃(html overflow hidden)은 제외. workspace.css는 관리 화면에서만 불러온다. */
html:has(> body.route-admin:not([data-content-editor-layout="page"])) { overflow-y: scroll; scrollbar-gutter: stable; }
.fradmin-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100dvh; }
.fradmin-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; padding: 30px 18px 0; background: #fff; border-right: 1px solid var(--line); }
.fradmin-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 10px 27px; }
.fradmin-brand img, .fradmin-login-brand img { display: block; width: auto; height: auto; max-width: min(100%, 180px); max-height: 40px; object-fit: contain; }
.fradmin-brand > span { padding: 4px 9px; border: 1px solid #e2e9f6; border-radius: 6px; color: var(--brand); background: #f7faff; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.fradmin-navigation { flex: 1; min-height: 0; overflow-y: auto; }
.fradmin-nav-group + .fradmin-nav-group { margin-top: 24px; }
.fradmin-nav-title { margin: 0 0 7px; padding: 0 11px; color: #8a92a2; font-size: 12.5px; font-weight: 750; letter-spacing: .02em; }
.fradmin-nav-group > a { display: block; margin: 3px 0; padding: 11px 12px; border-radius: 6px; color: #4a5366; font-size: 15px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; transition: background .15s, color .15s; }
.fradmin-nav-group > a:hover { background: #f5f7fb; color: var(--ink-1); }
.fradmin-nav-group > a.is-active, .fradmin-nav-group > a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.fradmin-sidebar-footer { flex: none; margin: 24px -18px 0; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.fradmin-session { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #404a5c; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.fradmin-session-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #2aa875; }
.fradmin-sidebar-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; color: #717b8e; font-size: 14px; }
.fradmin-sidebar-actions > a { display: flex; align-items: center; gap: 9px; padding: 10px 8px; border-radius: 6px; color: var(--ink-1); font-weight: 650; line-height: 1.5; }
.fradmin-home-link svg { flex: none; }
.fradmin-sidebar-actions > button { width: 100%; min-height: 40px; padding: 10px 8px; border: 0; border-radius: 6px; color: inherit; background: transparent; font-size: inherit; text-align: left; }
.fradmin-sidebar-actions > :hover { background: var(--brand-soft); }
.fradmin-sidebar-actions > :hover { color: var(--brand); }
.fradmin-main { min-width: 0; width: 100%; max-width: 1600px; margin: 0 auto; padding: 38px 36px 28px; }
.fradmin-page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fradmin-eyebrow { margin: 0 0 8px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.fradmin-heading { min-width: 0; }
.fradmin-heading h1 { margin: 0; color: #172033; font-size: 29px; font-weight: 800; line-height: 1.3; letter-spacing: -.045em; }
.fradmin-heading > p:last-child { margin: 10px 0 0; max-width: 670px; color: #697387; font-size: 13px; line-height: 1.65; }
.fradmin-header-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.fradmin-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: center; transition: background .15s, border-color .15s, box-shadow .15s; }
.fradmin-button-primary { color: #fff; background: var(--brand); box-shadow: 0 2px 5px color-mix(in srgb, var(--brand) 10%, transparent); }
.fradmin-button-primary:hover { background: color-mix(in srgb, var(--brand), #000 14%); }
.fradmin-button-add { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand), #fff 65%); }
.fradmin-button-add:hover { background: color-mix(in srgb, var(--brand), #fff 88%); border-color: var(--brand); }
.fradmin-button-secondary { color: #495367; background: #fff; border-color: #dfe4ed; }
.fradmin-button-secondary:hover { color: #20324f; background: #f8faff; border-color: #b6c9ed; }
.fradmin-button-danger { color: #b04a4a; background: #fff; border-color: #eadede; }
.fradmin-button-danger:hover { background: #fff4f4; border-color: #dda3a3; }
.fradmin-button:disabled { cursor: default; color: #99a4b8; background: #e8edf5; border-color: #e0e6ef; box-shadow: none; }
.fradmin-button-small { min-height: 32px; padding: 6px 12px; font-size: 12px; }
.fradmin-header-actions > a { white-space: nowrap; }
.fradmin-insurance-grades { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.fradmin-insurance-grades > button { flex: 1 1 120px; min-height: 42px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-3); font: inherit; font-size: 14px; font-weight: 600; }
.fradmin-insurance-grades > button:hover { color: var(--brand); border-color: var(--brand); }
.fradmin-insurance-grades > button[aria-pressed="true"], .fradmin-insurance-grades > button.is-active, .fradmin-insurance-grades > button[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
/* 상태 줄: 고정 높이 없이 한 줄(18~20px) + 위아래 8px. 오류일 때만 읽히는 작은 판. */
.fradmin-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 0; margin: 8px 0; }
.fradmin-status-row:has(#adminStatus[data-state="error"]) { padding: 8px 12px; border: 1px solid #f1c4c0; border-radius: 8px; background: #fdf3f2; }
/* 저장 완료와 저장 버튼이 보이는 화면의 미저장 상태: 화면에서 감추되 읽기용 live 영역은 유지한다. 미저장은 저장 버튼에 작게 표시한다. */
.fradmin-status-row.is-compact { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fradmin-status { margin: 0; color: #5f6b80; font-size: 12px; line-height: 1.6; }
.fradmin-status.is-error, .fradmin-status[data-state="error"] { color: #b94d46; }
.fradmin-status.is-success, .fradmin-status[data-state="success"], .fradmin-status[data-state="saved"] { color: #23815b; }
.fradmin-status.is-dirty, .fradmin-status[data-state="dirty"] { color: #9c7131; }
.fradmin-template-panel { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow-y: auto; border: 1px solid #e1e6ef; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px #17203330; }
.fradmin-template-panel::backdrop { background: #17203360; }
.fradmin-template-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.fradmin-template-dialog-heading h2 { margin: 0; color: var(--ink-1); font-size: 18px; font-weight: 750; }
.fradmin-template-content { padding: 15px 18px 18px; }
.fradmin-templates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.fradmin-templates:empty { margin-top: 0; }
.fradmin-templates > button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px; border: 1px solid #dce4f0; border-radius: 7px; color: #53627a; background: #f9fbff; font-size: 12px; font-weight: 650; line-height: 1.45; }
.fradmin-templates > button::before { content: "+"; font-size: 15px; font-weight: 500; color: var(--brand); }
.fradmin-templates > button:hover { border-color: #9bbcff; color: var(--brand); background: #f1f6ff; }
.fradmin-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
.fradmin-document { min-width: 0; border: 1px solid #e1e6ef; border-radius: 12px; background: #fff; }
.fradmin-document-toolbar { position: sticky; top: 20px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 62px; padding: 12px 17px; border-bottom: 1px solid #e8ecf2; border-radius: 12px 12px 0 0; background: #fff; }
.fradmin-modes { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #e6eaf1; border-radius: 8px; background: #f3f5f9; }
.fradmin-modes > button { min-height: 31px; padding: 6px 13px; border: 0; border-radius: 5px; color: #8b94a5; background: transparent; font-size: 12px; font-weight: 650; }
.fradmin-modes > button[aria-pressed="true"] { color: #35445e; background: #fff; box-shadow: 0 1px 4px #0a0e1a12; }
.fradmin-viewport-label { display: inline-flex; align-items: center; gap: 8px; color: #929bad; font-size: 11px; white-space: nowrap; }
.fradmin-viewport-label > select { min-height: 32px; padding: 5px 28px 5px 10px; border: 1px solid #dfe4ec; border-radius: 6px; color: #536078; background-color: #fff; font-size: 12px; }
.fradmin-canvas-surround { min-width: 0; padding: 24px; overflow-x: auto; border-radius: 0 0 12px 12px; background: #f8f9fc; }
.fradmin-canvas { width: 100%; max-width: 1040px; min-height: 390px; margin: 0 auto; color: var(--ink-1); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
:where(.fradmin-canvas) img { max-width: 100%; height: auto; }
:where(.fradmin-canvas) table { width: 100%; border-collapse: collapse; }
.fradmin-canvas :where(th, td) { padding: 12px 14px; border: 1px solid var(--line-strong); vertical-align: top; text-align: left; }
.fradmin-canvas :where(th) { color: #3a455b; background: #f2f5fa; font-weight: 750; }
.fradmin-canvas .guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fradmin-canvas .guide-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) :is(.guide-content-card-grid, .dr-grid) { grid-template-columns: minmax(0, 1fr) !important; }
/* 문구의 줄마다 선을 두르지 않고, 편집 항목의 바깥에 선택 상태를 표시한다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .fradmin-editable-text[data-content-field] { border-radius: 3px; transition: background-color .12s, outline-color .12s; }
.route-admin .fradmin-canvas .fradmin-editable-text { display: inline; min-width: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.route-admin .fradmin-canvas [contenteditable="true"], .route-admin .fradmin-canvas [contenteditable="plaintext-only"] { caret-color: var(--brand); overflow-wrap: anywhere; }
.route-admin .fradmin-canvas img[data-content-field] { cursor: pointer; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas :is(.fradmin-editable-text[data-content-field], [data-content-field-host]) { cursor: text; }
@media (hover: hover) {
  .route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas [data-content-field-host]:hover { outline: 1px dashed #b3c8f0; outline-offset: 4px; }
}
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas [data-content-field-host]:has(> [data-content-field][data-admin-selected="true"], > [data-content-field]:focus) { outline: 1px solid var(--brand); outline-offset: 4px; }
/* 행 구분선과 선택선 사이의 이중 여백을 없애되, 선은 글자 영역 바깥에 둔다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas :is(.guide-row,.gins-trow,tr) > [data-content-field-host]:is(:hover,:has(> [data-content-field][data-admin-selected="true"], > [data-content-field]:focus)),
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas :is(td,th) [data-content-field-host]:is(:hover,:has(> [data-content-field][data-admin-selected="true"], > [data-content-field]:focus)) { outline-offset: 0; }
.route-admin .fradmin-canvas .fradmin-editable-text[data-content-field]:focus { outline: none; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .fradmin-editable-text[data-content-field]:is(:focus, [data-admin-selected="true"]) { background-color: #0b5cff0a; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas img[data-content-field]:is(:focus, [data-admin-selected="true"]) { outline: 1px solid var(--brand); outline-offset: 4px; }
/* 가느다란 선도 편집 화면에서 쉽게 선택한다. 투명 hit 영역은 레이아웃·고객 화면 간격을 바꾸지 않는다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas hr[data-content-field] { position: relative; overflow: visible; cursor: pointer; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas hr[data-content-field]::after { content: ""; position: absolute; inset: -8px 0; background: transparent; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas hr[data-content-field]:is(:hover, :focus, [data-admin-selected="true"]) { outline: 1px solid var(--brand); outline-offset: 7px; }
/* 편집할 때는 원래 접기 표시(+/×)를 숨기고, 제목 편집과 분리된 접기 버튼(.fradmin-details-toggle)을 쓴다. 미리보기에서는 원래 동작한다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .gfaq-mark { display: none; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .g-faq > summary::after { display: none; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas :is(.gfaq,.g-faq) > summary { cursor: text; pointer-events: auto; }
/* 접기 버튼이 있는 summary는 종류(FAQ·유의사항·SJ g-callout-head)와 상관없이 같은 배치. 제목은 남은 폭을 쓰고 꾸밈 표시(aria-hidden)는 원래 크기, 버튼은 오른쪽 끝에 고정. 음수 여백으로 행 높이는 원본과 같게 유지한다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas summary:has(> .fradmin-details-toggle) { display: flex; align-items: center; list-style: none; cursor: text; pointer-events: auto; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas summary:has(> .fradmin-details-toggle)::-webkit-details-marker { display: none; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .g-faq > summary:has(> .fradmin-details-toggle) { align-items: flex-start; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas summary:has(> .fradmin-details-toggle) > :not(.fradmin-details-toggle, [aria-hidden="true"], .g-callout-icon, .gfaq-mark) { flex: 1 1 auto; min-width: 0; }
/* SJ 원문 헤더의 아이콘·제목을 함께 감싼 편집용 span도 원래 가로 배치를 유지한다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas summary.g-callout-head > .fradmin-editable-text:has(> .g-callout-icon) { display: flex; align-items: center; gap: inherit; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas summary.g-callout-head > .fradmin-editable-text > .g-callout-icon { flex: none; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas summary.g-callout-head > .fradmin-editable-text > strong { min-width: 0; }
/* 접힌 SJ 유의사항은 제목 아래 여백(본문과의 간격)을 없앤다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas details:not([open]) > summary.g-callout-head { margin-bottom: 0; }
.route-admin .fradmin-canvas .fradmin-details-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -6px -6px auto; padding: 0; border: 1px solid transparent; border-radius: 6px; color: #66748c; background: transparent; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.route-admin .fradmin-canvas .fradmin-details-toggle:hover { color: var(--brand); border-color: #c9d8f3; background: #f1f6ff; }
.route-admin .fradmin-canvas .fradmin-details-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.route-admin .fradmin-canvas .fradmin-details-toggle > svg { display: block; width: 16px; height: 16px; transition: transform .15s; }
/* SVG는 아래 방향(펼치기) 하나만 두고, 펼쳐진 상태에서는 위 방향(접기)으로 돌린다. */
.route-admin .fradmin-canvas .fradmin-details-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.route-admin:is([data-admin-mode="preview"]) .fradmin-canvas .fradmin-details-toggle, .fradmin-shell.is-preview .fradmin-canvas .fradmin-details-toggle { display: none; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .guide-content-notice { margin-block: 16px; padding: 12px 16px; border-left: 3px solid #d5a134; border-radius: 6px; background: #fffaf0; }
/* 빈 문구: 안내 문자는 DOM에 넣지 않고 data-placeholder를 CSS로만 보여 주며, 누를 수 있는 최소 크기를 둔다. */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .fradmin-editable-text[data-content-field]:is([data-admin-empty="true"], :empty) { position: relative; display: inline-block; min-width: 8em; min-height: 1.4em; vertical-align: top; }
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas .fradmin-editable-text[data-content-field][contenteditable="true"][data-admin-empty="true"]::before { position: absolute; top: 0; left: 0; content: attr(data-placeholder); color: #707a8c; font-weight: 400; pointer-events: none; }
/* 선택한 카드는 카드 전체를 고른 것으로 보이지 않도록 outline 없이 기존 테두리 색만 옅게 바꾼다(두께·여백 불변). */
.route-admin:not([data-admin-mode="preview"]) .fradmin-shell:not(.is-preview) .fradmin-canvas :is(.guide-card, .guide-instable, .guide-article, .gtier:not(.is-reco))[data-card-selected="true"] { border-color: #c9d8f3; }
.fradmin-canvas.is-mobile, .fradmin-canvas[data-viewport="mobile"] { max-width: 375px; padding: 16px; border: 1px solid #dfe5ef; border-radius: 18px; background: #f6f7f9; }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) .guide-card { padding: 20px; }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) :is(.guide-steps, .guide-tiers) { grid-template-columns: 1fr !important; }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) .guide-row { grid-template-columns: 80px minmax(0, 1fr); }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) :is(.gins-thead, .gins-trow) { grid-template-columns: 90px minmax(0, 1fr); }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) :is(.gins-name, .gins-info, .gins-thead > div) { padding: 12px; }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) .guide-article { padding: 20px; }
/* 넓은 화면(>960): 높이 고정 대신 최대 높이. 내용이 짧으면 내용만큼, 길면 화면에 남은 높이(workspace.js가 --fradmin-field-panel-height로 계산)에서 본문만 안쪽 스크롤. 위 추가·저장 도구줄은 고정. */
.fradmin-field-panel { position: sticky; top: 20px; display: flex; flex-direction: column; min-width: 0; height: auto; max-height: var(--fradmin-field-panel-height, calc(100dvh - 40px)); padding: 0; overflow: hidden; border: 1px solid #e1e6ef; border-radius: 12px; background: #fff; }
.fradmin-field-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; border-bottom: 1px solid var(--line); background: #fff; }
.fradmin-field-toolbar h2 { flex: none; margin: 0; color: var(--ink-1); font-size: 15px; font-weight: 750; white-space: nowrap; }
.fradmin-field-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; margin-left: auto; }
.fradmin-field-actions > .fradmin-button { min-height: 38px; padding: 9px 10px; font-size: 12px; white-space: nowrap; }
.fradmin-field-actions > .fradmin-field-commit { min-width: 68px; }
.fradmin-field-commit[data-unsaved="true"]:not(:disabled)::before { content: "미저장"; flex: none; padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .24); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
.fradmin-field-body { flex: 1 1 auto; min-height: 0; padding: 21px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.fradmin-canvas [data-content-field] { scroll-margin-top: var(--fradmin-sticky-top); scroll-margin-bottom: 20px; }
#adminFieldStatus { margin-top: 14px; }
/* 정상·수정·저장 상태는 상단 #adminStatus 한 곳에서만 보이고 읽힌다. 패널은 오류만 눈으로 다시 보여 준다(읽기는 상단 role=alert). */
#adminFieldStatus:not([data-state="error"]) { display: none; }
#adminFieldStatus[data-state="error"] { padding: 8px 10px; border-radius: 6px; background: #fdf1f0; }
.fradmin-field-badge { display: inline-block; margin-bottom: 5px; color: var(--brand); font-size: 11px; font-weight: 750; }
.fradmin-field-heading h3 { margin: 0; color: #344057; font-size: 17px; font-weight: 750; letter-spacing: -.02em; line-height: 1.45; }
.fradmin-field-heading p { margin: 7px 0 0; color: #667085; font-size: 12px; line-height: 1.7; }
.fradmin-field-empty { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border: 1px dashed #dbe3ef; border-radius: 10px; color: #a5afbf; }
.fradmin-field-empty svg { flex: none; width: 28px; height: 28px; }
.fradmin-field-empty p { margin: 0; color: #5f6b80; font-size: 13px; font-weight: 650; line-height: 1.55; }
.fradmin-field-editor { min-width: 0; margin-top: 16px; }
.fradmin-field-editor:empty { margin-top: 0; }
.fradmin-format-tools { width: 100%; margin-top: 16px; }
.fradmin-field-panel .ck.ck-editor { margin-top: 16px; width: 100%; }
.fradmin-field-panel .ck.ck-toolbar .ck-toolbar__items { flex-wrap: wrap; }
.fradmin-field-panel .ck.ck-editor__main > .ck-editor__editable { min-height: 160px; height: auto; max-height: none; padding: 12px; font-size: 14px; line-height: 1.7; }
.fradmin-field-panel .ck.ck-content { height: auto; }
.fradmin-field-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 17px; }
.fradmin-field-controls > button { min-height: 35px; padding: 7px 8px; font-size: 11px; }
.fradmin-save-area { margin-top: 24px; }
.fradmin-save-area > .fradmin-field-commit { width: 100%; min-height: 52px; margin-top: 12px; font-size: 17.5px; }
.fradmin-card-management { margin-top: 20px; }
.fradmin-cards { display: flex; flex-direction: column; gap: 6px; }
.fradmin-card-entry { display: flex; align-items: center; min-width: 0; max-width: 100%; border: 1px solid #e1e7f0; border-radius: 6px; background: #f8faff; }
.fradmin-card-entry:has([aria-pressed="true"]) { border-color: #9ab8f2; background: #edf4ff; }
.fradmin-card-entry > .fradmin-card-link { flex: 1; min-width: 0; min-height: 31px; padding: 6px 9px 6px 3px; border: 0; background: transparent; color: #728099; font-size: 11px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.fradmin-card-entry > .fradmin-card-link:hover { color: var(--brand); }
.fradmin-card-entry > .fradmin-card-link[aria-pressed="true"] { color: var(--brand); font-weight: 700; }
.fradmin-drag-handle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; min-height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #6b7b94; font: 22px/1 sans-serif; cursor: grab; touch-action: none; }
.fradmin-drag-handle:hover:not(:disabled), .fradmin-drag-handle:focus-visible { color: var(--brand); background: var(--brand-soft, #edf4ff); }
.fradmin-drag-handle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.fradmin-drag-handle:disabled { opacity: .35; cursor: default; }
.fradmin-drag-handle:active { cursor: grabbing; }
.fradmin-content-drag-layer { position: fixed; inset: 0; z-index: 14; pointer-events: none; }
.fradmin-content-drag-layer[hidden], .fradmin-content-drag-layer > [hidden] { display: none !important; }
.fradmin-content-drag-layer > button { position: absolute; pointer-events: auto; background: #fff; border: 1px solid #dce4ef; box-shadow: 0 1px 4px #1720331a; }
.fradmin-content-drag-layer > button { color: var(--brand); border-color: color-mix(in srgb, var(--brand), #fff 60%); background: var(--brand-soft, #edf4ff); }
.fradmin-drag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; order: 1; }
.fradmin-drag-actions > .fradmin-drag-handle { width: auto; min-height: 32px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--brand), #fff 65%); background: var(--brand-soft, #edf4ff); color: var(--brand); font: 650 12px/1.5 Pretendard, sans-serif; white-space: nowrap; }
.fradmin-drag-hint { flex-basis: 100%; order: 2; margin: 0; color: #5f6b80; font-size: 12px; line-height: 1.6; }
.fradmin-is-dragging { opacity: .45; }
[data-content-drop="before"] { box-shadow: 0 -3px 0 var(--brand, #1561ff) !important; }
[data-content-drop="after"] { box-shadow: 0 3px 0 var(--brand, #1561ff) !important; }
.fradmin-muted { margin: 0; color: #667085; font-size: 11px; line-height: 1.7; }
.fradmin-card-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.fradmin-card-controls > button { min-height: 34px; padding: 7px 8px; font-size: 11px; }
.fradmin-group-context { min-width: 0; margin-top: 20px; }
/* 표시 설정과 안 내용이 모두 숨겨지면 묶음 이름 상자도 숨긴다. */
.fradmin-group-context:not(:has(> section:not([hidden]))) { display: none; }
/* 공개 화면의 section { padding: 96px 0 }(SJ, 반응형 72·56px)이 들어오지 않도록 0을 기준으로 둔다. */
.fradmin-group-context > section { padding: 0; }
.fradmin-composition { min-width: 0; }
.fradmin-block-order { min-width: 0; padding: 0; }
.fradmin-block-list { display: flex; flex-direction: column; gap: 5px; }
.fradmin-block-row { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 0; border: 1px solid #e1e7f0; border-radius: 7px; background: #fff; }
.fradmin-block-row[aria-current="true"] { border-color: #9ab8f2; background: #edf4ff; box-shadow: inset 3px 0 0 var(--brand); }
.fradmin-block-select { flex: 1; min-width: 0; min-height: 30px; padding: 5px 4px 5px 11px; border: 0; color: #4a5872; background: transparent; font-size: 12px; font-weight: 650; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.fradmin-block-row[aria-current="true"] .fradmin-block-select { color: var(--brand); font-weight: 750; }
.fradmin-block-select:hover:not(:disabled) { color: var(--brand); }
.fradmin-block-select:disabled { cursor: default; color: #9aa5b8; }
.fradmin-block-actions { display: flex; flex: none; gap: 3px; }
.fradmin-block-actions > button { width: 26px; height: 26px; padding: 0; border: 1px solid #e1e7f0; border-radius: 5px; color: #66748c; background: #fff; font-size: 13px; line-height: 1; }
.fradmin-block-actions > button:hover:not(:disabled) { color: var(--brand); border-color: #a7c3fa; background: #f5f9ff; }
.fradmin-block-actions > [data-block-action="remove"]:hover:not(:disabled) { color: #b04a4a; border-color: #dda3a3; background: #fff4f4; }
.fradmin-block-actions > button:disabled { cursor: default; color: #c3cad6; background: #f6f8fb; }
.fradmin-block-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.fradmin-block-types > button { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 72px; padding: 10px 4px 8px; border: 1px solid #dce4f0; border-radius: 8px; color: #53627a; background: #fff; font-size: 11px; font-weight: 650; line-height: 1.35; transition: border-color .15s, background .15s, color .15s; }
.fradmin-block-types > button:hover:not(:disabled) { border-color: #9bbcff; color: var(--brand); background: #f1f6ff; }
.fradmin-block-types > button:disabled { cursor: default; opacity: .45; }
.fradmin-block-type-label { overflow-wrap: anywhere; text-align: center; }
/* 미니 도형: 공개 화면 블록 모양을 줄여서 보여 준다. */
.fradmin-block-icon { position: relative; display: block; flex: none; width: 44px; height: 30px; border: 1px solid #d5deec; border-radius: 5px; background-color: #fff; background-repeat: no-repeat; }
.fradmin-block-icon[data-icon="text"] { background-image: linear-gradient(#a4b5d1, #a4b5d1), linear-gradient(#a4b5d1, #a4b5d1), linear-gradient(#a4b5d1, #a4b5d1); background-size: 31px 2px, 31px 2px, 18px 2px; background-position: 6px 8px, 6px 14px, 6px 20px; }
.fradmin-block-icon[data-icon="hero"] { background-color: #202632; background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(#fff, #fff), linear-gradient(#a4b5d1, #a4b5d1), linear-gradient(var(--brand), var(--brand)); background-size: 2px 20px, 24px 3px, 20px 2px, 13px 5px; background-position: 5px 5px, 11px 6px, 11px 13px, 11px 19px; }
.fradmin-block-icon[data-icon="button"] { display: grid; place-items: center; background-image: linear-gradient(var(--brand), var(--brand)); background-size: 34px 16px; background-position: center; }
.fradmin-block-icon[data-icon="button"]::before { content: "→"; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.fradmin-block-icon[data-icon="cards"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cg fill='none' stroke='%23a4b5d1'%3E%3Crect x='4' y='4' width='16' height='22' rx='3'/%3E%3Crect x='24' y='4' width='16' height='22' rx='3'/%3E%3Cpath d='M7 10h10M7 15h10M7 20h7M27 10h10M27 15h10M27 20h7'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; }
.fradmin-block-icon[data-icon="steps"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cg fill='none' stroke='%23a4b5d1'%3E%3Crect x='3' y='5' width='10' height='20' rx='2'/%3E%3Crect x='17' y='5' width='10' height='20' rx='2'/%3E%3Crect x='31' y='5' width='10' height='20' rx='2'/%3E%3Cpath d='M6 17h4M20 17h4M34 17h4M13 15h4M27 15h4'/%3E%3C/g%3E%3Cg fill='%236f8ebf'%3E%3Ccircle cx='8' cy='10' r='2'/%3E%3Ccircle cx='22' cy='10' r='2'/%3E%3Ccircle cx='36' cy='10' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; }
.fradmin-block-icon[data-icon="divider"] { background-image: linear-gradient(#6f8ebf, #6f8ebf); background-size: 32px 2px; background-position: center; }
.fradmin-block-icon[data-icon="list"] { background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(#a4b5d1, #a4b5d1), linear-gradient(#a4b5d1, #a4b5d1), linear-gradient(#a4b5d1, #a4b5d1); background-size: 3px 3px, 3px 3px, 3px 3px, 23px 2px, 23px 2px, 17px 2px; background-position: 6px 6px, 6px 13px, 6px 20px, 13px 7px, 13px 14px, 13px 21px; }
.fradmin-block-icon[data-icon="rows"] { background-image: linear-gradient(#6f8ebf, #6f8ebf), linear-gradient(#6f8ebf, #6f8ebf), linear-gradient(#a4b5d1, #a4b5d1), linear-gradient(#a4b5d1, #a4b5d1), linear-gradient(#e2e8f2, #e2e8f2); background-size: 9px 2px, 9px 2px, 20px 2px, 20px 2px, 34px 1px; background-position: 5px 8px, 5px 20px, 18px 8px, 18px 20px, 5px 14px; }
.fradmin-block-icon[data-icon="table"] { background-image: linear-gradient(#dfe9fb, #dfe9fb), linear-gradient(#c6d3e8, #c6d3e8), linear-gradient(#c6d3e8, #c6d3e8), linear-gradient(#c6d3e8, #c6d3e8); background-size: 100% 9px, 1px 100%, 100% 1px, 100% 1px; background-position: 0 0, 50% 0, 0 9px, 0 19px; }
.fradmin-block-icon[data-icon="faq"] { background-image: linear-gradient(#6f8ebf, #6f8ebf), linear-gradient(#e2e8f2, #e2e8f2), linear-gradient(#a4b5d1, #a4b5d1); background-size: 20px 2px, 34px 1px, 24px 2px; background-position: 13px 8px, 5px 14px, 13px 21px; }
.fradmin-block-icon[data-icon="faq"]::before { content: "Q"; position: absolute; top: 3px; left: 5px; color: var(--brand); font-size: 8px; font-weight: 800; line-height: 1; }
.fradmin-block-icon[data-icon="faq"]::after { content: "+"; position: absolute; top: 2px; right: 4px; color: #8a96ab; font-size: 9px; line-height: 1; }
.fradmin-block-icon[data-icon="notice"] { border-left: 3px solid #e2a23b; background-color: #fff9ef; background-image: linear-gradient(#c9a46a, #c9a46a), linear-gradient(#d8c09b, #d8c09b); background-size: 22px 2px, 17px 2px; background-position: 13px 11px, 13px 18px; }
.fradmin-block-icon[data-icon="notice"]::before { content: "!"; position: absolute; top: 7px; left: 4px; color: #c47d12; font-size: 11px; font-weight: 800; line-height: 1; }
/* 사진 자리: 산과 해 모양으로 다른 글 구성 아이콘과 구분한다. */
.fradmin-block-icon[data-icon="image"] { background-color: #f3f7ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Ccircle cx='31' cy='9' r='3' fill='%23e2a23b'/%3E%3Cpath d='M5 25l10-11 7 7 5-5 12 9z' fill='%236f8ebf'/%3E%3Cpath d='M22 21l5-5 12 9H18z' fill='%23a4b5d1'/%3E%3C/svg%3E"); background-size: 100% 100%; }
.fradmin-block-types > button[aria-busy="true"] { cursor: progress; border-color: #9bbcff; color: var(--brand); background: #f1f6ff; }
.fradmin-block-types > button[aria-busy="true"] .fradmin-block-icon { opacity: .55; }
.fradmin-image-fields { margin-top: 18px; }
/* 선택한 이미지: 설명 입력 아래에 교체·삭제를 항목 도구와 같은 2열로 둔다. 파일 입력(#adminImageFile)은 hidden 공용. */
.fradmin-image-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.fradmin-image-fields :is(#adminReplaceImage, #adminDeleteImage) { min-height: 35px; padding: 7px 8px; font-size: 11px; }
.fradmin-image-fields :is(#adminReplaceImage, #adminDeleteImage)[aria-busy="true"] { cursor: progress; }
/* 선택한 이미지: 이 이미지 뒤에 추가(항상) + 2장 이상일 때만 위치·앞/뒤 순서. 교체·삭제는 아래 기존 버튼. */
.fradmin-carousel-fields { display: grid; gap: 7px; margin-top: 12px; }
.fradmin-carousel-order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
.fradmin-carousel-position { min-width: 0; color: #5f6b80; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fradmin-carousel-order > .fradmin-button { min-height: 35px; padding: 6px 10px; gap: 4px; font-size: 11px; }
.fradmin-carousel-add { width: 100%; min-height: 38px; font-size: 12px; }
.fradmin-label { display: block; margin: 16px 0 7px; color: #4b5770; font-size: 12px; font-weight: 700; }
.fradmin-input { display: block; width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d9e1ed; border-radius: 8px; color: #27364f; background: #fff; font-size: 14px; }
.fradmin-input::placeholder { color: #a2aaba; font-size: 12px; }
.fradmin-input:focus { outline: 2px solid #d6e5ff; outline-offset: 0; border-color: #80a8f5; }
.fradmin-file { display: block; width: 100%; color: #7c879c; font-size: 12px; }
.fradmin-file::file-selector-button { margin-right: 8px; padding: 8px 10px; border: 1px solid #dfe4ed; border-radius: 6px; color: #52627c; background: #f8faff; font: inherit; cursor: pointer; }
.fradmin-save-note { margin: 0; color: #5f6b80; font-size: 12px; line-height: 1.7; }
.route-admin .fradmin-saved-dialog { box-sizing: border-box; width: min(384px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-1); box-shadow: 0 12px 36px -12px #191c2233; }
.route-admin .fradmin-saved-dialog::backdrop { background: rgba(25, 28, 34, .45); }
.fradmin-saved-heading { padding: 16px 20px; border-bottom: 1px solid #eef0f4; }
.fradmin-saved-heading h2 { margin: 0; font-size: 18.5px; font-weight: 800; line-height: 1.4; }
.fradmin-saved-dialog > p { margin: 0; padding: 18px 20px; font-size: 15px; line-height: 1.7; }
.fradmin-saved-actions { display: flex; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid #eef0f4; }
.fradmin-saved-actions > button { min-width: 82px; }
.fradmin-insurance-grades > button:focus-visible, .fradmin-format-tools:focus-visible, .fradmin-save-area > button:focus-visible, .fradmin-saved-actions > button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* 편집 도구 쪽 버튼·링크도 키보드로 이동할 때 같은 굵기로 보인다. 캔버스 안 원본 요소는 위 편집 표시 규칙만 따른다. */
.route-admin :is(.fradmin-sidebar, .fradmin-header-actions, .fradmin-status-row, .fradmin-template-panel, .fradmin-document-toolbar, .fradmin-field-panel, .fradmin-field-toolbar, .fradmin-login-card) :is(a, button, select):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.route-admin[data-admin-mode="preview"] .fradmin-field-panel, .fradmin-shell.is-preview .fradmin-field-panel { display: none; }
.route-admin[data-admin-mode="preview"] .fradmin-workbench, .fradmin-shell.is-preview .fradmin-workbench { grid-template-columns: minmax(0, 1fr); }
/* 선택 배경은 편집 모드에서만 적용하므로 미리보기에서는 원문 배경색을 덮지 않는다. */
.route-admin[data-admin-mode="preview"] .fradmin-canvas [data-content-field], .fradmin-shell.is-preview .fradmin-canvas [data-content-field] { cursor: default; outline: none; }
.route-admin[data-admin-mode="preview"] .fradmin-canvas [data-card-selected="true"], .fradmin-shell.is-preview .fradmin-canvas [data-card-selected="true"] { outline: none; box-shadow: none; }
.fradmin-boot { display: grid; place-content: center; justify-items: center; gap: 15px; min-height: 100dvh; color: #7c879c; font-size: 13px; }
.fradmin-boot p { margin: 0; }
.fradmin-spinner { width: 25px; height: 25px; border: 2px solid #dce5f4; border-top-color: var(--brand); border-radius: 50%; animation: fradmin-spin .8s linear infinite; }
@keyframes fradmin-spin { to { transform: rotate(360deg); } }
.fradmin-login { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 30px 20px; overflow-y: auto; background: #f3f6fb; }
.fradmin-login-card { width: 100%; max-width: 410px; padding: 34px; border: 1px solid #e0e7f1; border-radius: 16px; background: #fff; box-shadow: 0 18px 60px -30px #193f791f; }
.fradmin-login-brand { display: inline-block; margin-bottom: 30px; }
.fradmin-login-card h1 { margin: 0; color: #25324a; font-size: 25px; line-height: 1.3; font-weight: 800; letter-spacing: -.04em; }
.fradmin-login-description { margin: 10px 0 23px; color: #8c97aa; font-size: 13px; line-height: 1.75; }
.fradmin-error { margin: 12px 0 0; color: #b44949; font-size: 12px; line-height: 1.65; }
.fradmin-error:empty { margin-top: 0; }
.fradmin-login-submit { width: 100%; margin-top: 22px; min-height: 44px; }
.fradmin-login-back { display: block; margin-top: 22px; color: #97a1b3; font-size: 12px; text-align: center; }
.fradmin-noscript { margin: 0; padding: 24px; color: #495b77; background: #fff; font-size: 14px; text-align: center; }
.fradmin-noscript a { color: var(--brand); text-decoration: underline; }
@media (min-width: 1600px) {
  .fradmin-canvas .guide-steps, .fradmin-canvas .guide-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .fradmin-shell { grid-template-columns: 206px minmax(0, 1fr); }
  .fradmin-sidebar { padding: 26px 14px 0; }
  .fradmin-sidebar-footer { margin-inline: -14px; padding-inline: 16px; }
  .fradmin-brand img { max-width: min(100%, 158px); }
  .fradmin-main { padding: 30px 24px 26px; }
  .fradmin-workbench { grid-template-columns: minmax(0, 1fr) 284px; gap: 15px; }
  .fradmin-canvas-surround { padding: 18px; }
  .fradmin-field-body { padding: 17px; }
  .fradmin-field-toolbar { padding: 14px 12px; }
  .fradmin-page-header { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .fradmin-canvas .guide-card { padding: 22px; }
  .fradmin-canvas .guide-row { grid-template-columns: 100px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .fradmin-workbench { grid-template-columns: minmax(0, 1fr); }
  .fradmin-field-panel { position: static; height: auto; max-height: none; overflow: visible; }
  .fradmin-field-toolbar { position: sticky; top: 20px; z-index: 11; border-radius: 12px 12px 0 0; }
  .fradmin-workbench > .fradmin-field-toolbar { border: 1px solid var(--line); border-radius: 12px; }
  .fradmin-document-toolbar { top: calc(20px + var(--fradmin-field-toolbar-height)); }
  .fradmin-field-body { padding: 22px; overflow: visible; scrollbar-gutter: auto; }
  .fradmin-field-controls { display: flex; flex-wrap: wrap; }
  .fradmin-field-controls > button { flex: 1 1 110px; }
}
@media (max-width: 640px) {
  .fradmin-field-actions > .fradmin-button { min-height: 44px; }
  .fradmin-shell { display: block; }
  .fradmin-sidebar { position: static; width: 100%; height: auto; padding: 20px 16px 0; border-right: 0; border-bottom: 1px solid #e1e6ef; }
  .fradmin-brand { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 20px; }
  .fradmin-brand { min-width: 0; }
  .fradmin-brand img { min-width: 0; max-width: min(60%, 153px); max-height: 34px; }
  .fradmin-brand > span { flex: none; }
  .fradmin-brand > span { font-size: 10px; }
  .fradmin-navigation { overflow: visible; }
  .fradmin-nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 7px; }
  .fradmin-nav-group + .fradmin-nav-group { margin-top: 14px; }
  .fradmin-nav-title { grid-column: 1 / -1; padding: 0 8px; font-size: 10px; }
  .fradmin-nav-group > a { margin: 0; padding: 10px 9px; font-size: 12px; }
  .fradmin-sidebar-footer { margin: 15px -16px 0; padding: 10px 16px 12px; }
  .fradmin-session { margin: 0; font-size: 11px; }
  .fradmin-sidebar-actions { font-size: 13px; }
  .fradmin-main { padding: 25px 14px 24px; }
  .fradmin-page-header { gap: 17px; }
  .fradmin-heading h1 { font-size: 25px; }
  .fradmin-heading > p:last-child { font-size: 12px; }
  .fradmin-header-actions { width: 100%; }
  .fradmin-header-actions > a { flex: 1; }
  .fradmin-template-dialog-heading { padding: 14px 15px; }
  .fradmin-template-content { padding: 14px 15px 16px; }
  .fradmin-insurance-grades { gap: 6px; margin-bottom: 16px; }
  .fradmin-insurance-grades > button { flex-basis: 76px; min-width: 0; padding: 9px 7px; font-size: 12px; }
  .fradmin-templates { gap: 7px; }
  .fradmin-templates > button { padding: 7px 9px; font-size: 11px; }
  .fradmin-template-preset-options { gap: 7px; }
  .fradmin-template-preset-options > button { padding: 7px 9px; font-size: 11px; }
  .fradmin-document-toolbar { padding: 11px 12px; gap: 8px; }
  .fradmin-modes > button { padding: 6px 10px; font-size: 11px; }
  .fradmin-viewport-label { gap: 5px; font-size: 10px; }
  .fradmin-viewport-label > select { padding-left: 7px; font-size: 11px; }
  .fradmin-canvas-surround { padding: 15px 12px; }
  .fradmin-canvas { min-height: 280px; font-size: 13px; }
  .fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) { padding: 12px; }
  .fradmin-canvas .guide-card, .fradmin-canvas .guide-article { padding: 18px; }
  .fradmin-canvas :is(.guide-steps, .guide-tiers) { grid-template-columns: 1fr !important; }
  .fradmin-canvas .guide-row { grid-template-columns: 73px minmax(0, 1fr); }
  .fradmin-canvas :is(.gins-thead, .gins-trow) { grid-template-columns: 80px minmax(0, 1fr); }
  .fradmin-canvas :is(.gins-name, .gins-info, .gins-thead > div) { padding: 10px; font-size: 12px; }
  .fradmin-canvas :where(th, td) { padding: 9px 8px; }
  .fradmin-field-body { padding: 18px; }
  .fradmin-block-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fradmin-image-fields :is(#adminReplaceImage, #adminDeleteImage) { min-height: 44px; }
  .fradmin-carousel-order > .fradmin-button, .fradmin-carousel-add { min-height: 44px; }
  .fradmin-login-card { padding: 29px 25px; }
}
/* 손가락으로 누르는 화면에서는 접기 버튼을 44px로 키우고, 행 높이는 그대로 둔다. */
@media (max-width: 640px), (pointer: coarse) {
  .route-admin .fradmin-canvas .fradmin-details-toggle { width: 44px; height: 44px; margin: -12px -10px -12px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fradmin-spinner { animation-duration: 2s; }
  .route-admin .fradmin-canvas [data-content-field] { transition: none; }
}

/* 두 업체의 공통 관리 본문. 고객 안내의 원래 스타일은 각 업체 output.css가 담당한다. */
.route-admin[data-admin-tenant="sjrent"] { --ink-1: var(--ink); --line-strong: var(--line); --bg-alt: var(--bg-2); }
.route-admin .sjadmin-edit-toggle { display: none !important; }
#adminLegacyTemplates { display: none; }
.fradmin-management { min-width: 0; max-width: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow-wrap: break-word; }
/* 관리 본문이 아직 비어 있을 때(불러오는 중) 빈 흰 상자로 보이지 않게 한다. */
.fradmin-management:empty { display: grid; place-items: center; min-height: 180px; color: #7c879c; font-size: 13px; }
.fradmin-management:empty::before { content: "관리 내용을 불러오고 있습니다…"; }
.fradmin-management[hidden] { display: none; }
/* 관리 본문 안의 버튼·입력도 키보드로 이동하면 사이드바와 같은 굵기로 보인다. */
.route-admin .fradmin-management :is(a, button, select, summary, [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fradmin-management .container { width: 100%; max-width: none; padding: 0; }
#adminNewsPanel .page-hero, #adminNewsPanel .news-hero :is(.news-back, .news-hero-head) { display: none; }
#adminNewsPanel .news-hero { padding: 0 0 16px; border: 0; background: transparent; }
#adminNewsPanel .news-tabs-wrap { margin-top: 0; }
#adminNewsPanel :is(.news-main, .page-section) { padding: 0; }
.route-admin .fradmin-inline-management { position: static !important; display: block !important; width: 100%; min-width: 0; max-width: 100%; height: auto !important; padding: 0 !important; overflow-x: auto; background: transparent !important; }
.route-admin .fradmin-inline-management > :first-child { width: 100% !important; max-width: none !important; max-height: none !important; border: 0; box-shadow: none; margin: 0; }
.route-admin .fradmin-inline-management .btn-close-modal { display: none; }
.route-admin .fradmin-inline-management .sjadmin-fee-modal-body { max-height: none; }
/* 모달 머리·본문 여백이 본문 카드 여백(24px)과 겹치지 않게 정리한다. 내부 목록 스크롤에 필요한 높이는 원래 값을 유지한다. */
.route-admin .fradmin-inline-management .sjadmin-fee-modal-header { padding: 0 0 14px; background: transparent; }
.route-admin .fradmin-inline-management :is(.sjadmin-fee-modal-body, .sjadmin-display-body) { padding: 16px 0 0; }
.route-admin .fradmin-inline-management .sjadmin-display-content { height: min(80dvh, 760px) !important; }
.route-admin.on-manage .edit-mode-field { display: inline-flex; }
.sjcopy-editor { display: grid; gap: 24px; max-width: 880px; }
.sjcopy-editor:empty { display: block; padding: 32px 0; color: #7c879c; font-size: 13px; text-align: center; }
.sjcopy-editor:empty::before { content: "이 화면에서 관리할 문구가 없습니다."; }
.sjcopy-group { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; }
.sjcopy-group-title { padding: 0 8px; color: var(--ink-1); font-size: 16px; font-weight: 750; }
.sjcopy-field + .sjcopy-field { margin-top: 20px; }
.sjcopy-label { display: block; margin-bottom: 8px; color: var(--ink-2); font-size: 14px; font-weight: 650; }
.sjcopy-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid #d3dce9; border-radius: 7px; color: var(--ink-1); background: #fff; font: inherit; line-height: 1.6; resize: vertical; }
.sjcopy-input:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.sjcopy-default { margin: 6px 0 0; color: #667085; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.fradmin-panel-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.fradmin-panel-table-wrap { overflow-x: auto; }
.fradmin-panel-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fradmin-panel-table th, .fradmin-panel-table td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fradmin-panel-table th { color: #53627a; background: #f7f9fc; font-weight: 650; }
.fradmin-panel-form { display: grid; gap: 20px; }
.fradmin-panel-form label { display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 650; }
.fradmin-panel-form .fradmin-input { width: 100%; }
.fradmin-panel-preview { display: block; max-width: 100%; max-height: 240px; object-fit: contain; border-radius: 8px; }
.fradmin-canvas.guide-v2 { padding: 0; background: transparent; }
/* SJ 원본 안내는 body 기본 글자 크기·줄 간격·keep-all 과 .guide-sect gap(10px)+.g-block 하단 4px 로 배치된다.
   관리 캔버스의 14px/1.75/anywhere 를 물려받으면 표 열 폭과 줄바꿈이 원본과 달라지므로 원래 값으로 되돌린다. */
.fradmin-canvas.guide-v2 { font-size: inherit; line-height: inherit; overflow-wrap: normal; }
@media (max-width: 640px) {
  .fradmin-management { padding: 16px 12px; }
  .sjcopy-editor { gap: 18px; }
  .sjcopy-group { padding: 16px 12px; }
  .sjcopy-group-title { font-size: 15px; }
  /* iOS 는 16px 미만 입력란에 초점이 가면 화면을 확대한다. */
  .sjcopy-input, .fradmin-management .fradmin-input { font-size: 16px; }
  .fradmin-panel-table th, .fradmin-panel-table td { padding: 10px; }
  .route-admin .fradmin-inline-management .sjadmin-display-content { height: min(78dvh, 680px) !important; }
}
@media (max-width: 360px) {
  .fradmin-main { padding: 20px 10px 22px; }
  .fradmin-management { padding: 14px 10px; border-radius: 10px; }
  .fradmin-nav-group > a { padding: 9px 7px; font-size: 11.5px; }
  .fradmin-heading h1 { font-size: 22px; }
}

/* 배너도 같은 관리자 본문에서 목록과 편집 화면을 사용한다. */
.sjbanner-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.sjbanner-heading-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.sjbanner-heading h2 { font-size:20px; font-weight:700; }
.sjbanner-table-wrap { overflow-x:auto; margin-top:20px; }
.sjbanner-table { width:100%; min-width:600px; border-collapse:collapse; font-size:14px; }
.sjbanner-table th,.sjbanner-table td { padding:14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.sjbanner-table th { background:#f7f9fc; color:#53627a; font-weight:650; }
.sjbanner-thumb { width:120px; height:72px; object-fit:cover; border-radius:8px; }
.sjbanner-actions { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.sjbanner-table .sjbanner-drag-cell { width:48px; padding-inline:8px; }
.sjbanner-drag { cursor:grab; font-size:24px; touch-action:none; }
.sjbanner-drag:active { cursor:grabbing; }
.sjbanner-table tr.is-dragging { opacity:.45; }
.sjbanner-table tr.is-drop-target { outline:2px solid var(--brand,#315de5); outline-offset:-2px; }
/* 배너 버튼 설정(관리자 목록 밝은 fieldset). hero-editor.css 히어로 도구막대와 같은 구조·규칙이며 --bb-* 색 토큰만 다르다. */
.sjbanner-button-fields { min-width:0; margin-top:20px; padding:12px 16px 16px; border:1px solid var(--line); border-radius:12px; }
.sjbanner-button-fields legend { padding-inline:6px; color:#172033; font-size:14px; font-weight:700; }
.sjbanner-button-grid { --bb-ink:#3d4a60; --bb-muted:var(--muted,#64748b); --bb-field-bg:#fff; --bb-field-ink:#27364f; --bb-field-line:#d9e1ed; --bb-surface:#f7f9fc; --bb-surface-line:#e2e8f0; --bb-list-line:#e2e8f0; --bb-focus:var(--brand,#315de5); --bb-accent:var(--brand,#315de5); --bb-error:#b42318; max-width:720px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; width:100%; min-width:0; box-sizing:border-box; scroll-margin-block:100px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls)[hidden],:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) [hidden] { display:none !important; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) > .sjhero-button-hint { flex:1 1 100%; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) > .sjbanner-button-controls { flex:1 1 100%; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-field { display:flex; flex-direction:column; gap:4px; flex:1 1 100%; min-width:0; margin:0; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=type],.sjbanner-field:has(> [data-banner-button-field=type])) { flex:0 0 118px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=label],.sjbanner-field:has(> [data-banner-button-field=label])) { flex:1 1 130px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=href],.sjbanner-field:has(> [data-banner-button-field=href])) { flex:1 1 200px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=newTab],.sjbanner-field:has(> [data-banner-button-field=newTab])) { flex:0 0 auto; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:6px; min-height:36px; }
@media(min-width:641px) { :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=newTab],.sjbanner-field:has(> [data-banner-button-field=newTab])) { margin-top:21px; } }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-field > label,:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-color-pair > label,:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-field > .fradmin-label { display:block; margin:0; color:var(--bb-ink); font:600 12px/1.4 Pretendard,system-ui,sans-serif; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=newTab],.sjbanner-field:has(> [data-banner-button-field=newTab])) > label { font-weight:500; font-size:13px; cursor:pointer; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) small,:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjhero-button-hint { display:block; margin:0; color:var(--bb-muted); font-size:11.5px; line-height:1.45; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(input:not([type=checkbox]):not([type=color]),select) { display:block; width:100%; min-width:0; height:36px; min-height:36px; margin:0; padding:0 10px; border:1px solid var(--bb-field-line); border-radius:6px; color:var(--bb-field-ink); background-color:var(--bb-field-bg); font:500 13px/1.3 Pretendard,system-ui,sans-serif; box-sizing:border-box; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) select { padding-right:6px; cursor:pointer; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(input:not([type=checkbox]):not([type=color]),select):focus { border-color:var(--bb-accent); outline:2px solid var(--bb-focus); outline-offset:1px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=checkbox] { flex:none; width:18px; height:18px; min-height:0; margin:0; accent-color:var(--bb-accent); cursor:pointer; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=checkbox]:focus-visible { outline:2px solid var(--bb-focus); outline-offset:2px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(input,select,button):disabled { opacity:.5; cursor:not-allowed; }
/* 게시글 연결: 선택된 제목 + 찾기 버튼 한 줄, 검색은 그 아래 접이식 영역. */
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 8px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-picker > * { grid-column:1/-1; min-width:0; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-picker > .sjbanner-post-selected:not(:has(button)) { grid-column:1; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-picker > button { grid-column:2; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected { display:flex; align-items:center; gap:8px; min-width:0; min-height:36px; padding:0 4px 0 10px; border:1px dashed var(--bb-field-line); border-radius:6px; color:var(--bb-ink); background:var(--bb-surface); font:600 13px/1.35 Pretendard,system-ui,sans-serif; box-sizing:border-box; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected:not(:has(button)) { padding-right:10px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected > :not(button),:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected:not(:has(*)) { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected:is(.is-empty,[data-empty=true]) { color:var(--bb-muted); font-weight:500; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected:not(.is-empty):not([data-empty=true]) { border-style:solid; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(.sjbanner-post-picker,.sjbanner-post-search) button { display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:none; min-height:36px; margin:0; padding:0 12px; border:1px solid transparent; border-radius:6px; color:#fff; background:var(--bb-accent); font:600 13px/1.2 Pretendard,system-ui,sans-serif; white-space:nowrap; cursor:pointer; box-sizing:border-box; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected button { min-height:30px; padding:0 10px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(.sjbanner-post-picker,.sjbanner-post-search) button:hover:not(:disabled) { filter:brightness(1.08); }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(.sjbanner-post-picker,.sjbanner-post-search,.sjbanner-button-colors,.sjbanner-post-manual) :is(button,summary):focus-visible { outline:2px solid var(--bb-focus); outline-offset:2px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search { display:grid; gap:8px; min-width:0; padding:10px; border:1px solid var(--bb-surface-line); border-radius:8px; background:var(--bb-surface); box-sizing:border-box; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search form { display:grid; grid-template-columns:minmax(96px,max-content) minmax(0,1fr) auto; gap:6px; min-width:0; margin:0; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-results { display:grid; gap:0; max-height:220px; margin:0; padding:2px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--bb-list-line); border-radius:6px; background:#fff; list-style:none; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-results:empty { display:none; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-results li { margin:0; padding:0; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search .sjbanner-post-results button { display:grid; justify-content:stretch; gap:1px; width:100%; min-height:40px; padding:7px 10px; border:0; border-radius:4px; color:#172033; background:transparent; font-weight:500; line-height:1.4; text-align:left; white-space:normal; overflow-wrap:anywhere; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search .sjbanner-post-results button:hover:not(:disabled) { filter:none; background:#f1f5fb; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search .sjbanner-post-results button :is(small,span + span) { color:#64748b; font-size:11.5px; font-weight:500; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search .sjbanner-post-results button:is([aria-pressed=true],[aria-selected=true],[aria-current=true],.is-selected) { color:var(--brand,#315de5); background:color-mix(in srgb,var(--brand,#315de5) 10%,#fff); box-shadow:inset 3px 0 0 var(--brand,#315de5); font-weight:700; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search .sjbanner-post-results button:focus-visible { outline:2px solid var(--brand,#315de5); outline-offset:-2px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-pages { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; color:var(--bb-ink); font-size:12px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-pages:empty { display:none; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search .sjbanner-post-pages button { min-width:36px; padding:0 8px; border-color:var(--bb-surface-line); color:var(--bb-ink); background:transparent; font-weight:600; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search .sjbanner-post-pages button:is([aria-current],[aria-pressed=true],.is-current) { border-color:var(--bb-accent); color:#fff; background:var(--bb-accent); }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) [role=status] { margin:0; color:var(--bb-muted); font-size:12px; line-height:1.45; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) [role=status]:empty { display:none; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) [role=status]:is(.is-error,[data-tone=error]) { color:var(--bb-error); }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-manual { min-width:0; color:var(--bb-muted); font-size:12px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-manual > summary { display:inline-flex; align-items:center; gap:4px; min-height:32px; color:var(--bb-muted); font-weight:600; list-style:none; cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent); text-underline-offset:3px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-manual > summary::-webkit-details-marker { display:none; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-manual > summary::before { content:""; width:0; height:0; border-block:4px solid transparent; border-left:5px solid currentColor; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-manual[open] > summary::before { transform:rotate(90deg); }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-manual > :not(summary) { margin-top:4px; }
/* 색상 2개: 작은 스와치를 한 줄에. */
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-button-colors { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; flex:1 1 100%; min-width:0; margin:0; padding:0; border:0; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(.sjbanner-color-pair,.sjbanner-field:has(> input[type=color])) { display:inline-flex; flex-direction:row; align-items:center; gap:8px; flex:0 0 auto; width:auto; min-width:0; margin:0; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=color] { flex:none; width:36px; height:36px; min-height:0; margin:0; padding:3px; border:1px solid var(--bb-field-line); border-radius:8px; background:var(--bb-field-bg); cursor:pointer; box-sizing:border-box; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=color]::-webkit-color-swatch { border:1px solid #0000001f; border-radius:5px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=color]::-moz-color-swatch { border:1px solid #0000001f; border-radius:5px; }
:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=color]:focus-visible { outline:2px solid var(--bb-focus); outline-offset:2px; }
@media(max-width:640px) {
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(input:not([type=checkbox]):not([type=color]),select) { font-size:16px; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=type],.sjbanner-field:has(> [data-banner-button-field=type])) { flex-basis:112px; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is([data-banner-button-row=label],.sjbanner-field:has(> [data-banner-button-field=label])) { flex-basis:80px; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search form { grid-template-columns:minmax(0,1fr) auto; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-search form > select { grid-column:1/-1; }
}
@media(pointer:coarse) {
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(input:not([type=checkbox]):not([type=color]),select),:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(.sjbanner-post-picker,.sjbanner-post-search) button,:is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=color] { min-height:40px; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) :is(input:not([type=checkbox]):not([type=color]),select) { height:40px; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) input[type=color] { width:40px; height:40px; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-selected button { min-height:34px; }
  :is(.sjbanner-button-grid,.sjbanner-button-fields .sjbanner-button-controls) .sjbanner-post-manual > summary { min-height:40px; }
}
.sjbanner-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:start; gap:28px; margin-top:24px; }
.sjbanner-fields,.sjbanner-photo,.sjbanner-field { display:grid; gap:12px; min-width:0; }
.sjbanner-fields { gap:22px; }
.sjbanner-field .fradmin-input { width:100%; }
.sjbanner-preview { width:100%; max-height:320px; object-fit:contain; border:1px solid var(--line); border-radius:12px; background:#f7f9fc; }
.sjbanner-period { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sjbanner-confirm { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:16px; margin:16px 0; background:#fff6f4; border:1px solid #f7b4a8; border-radius:10px; }
.sjbanner-confirm p { flex-basis:100%; }
.sjbanner-notice { margin:12px 0; }
.sjbanner-notice.is-error { color:#b42318; }
@media(max-width:760px) { .sjbanner-form { grid-template-columns:minmax(0,1fr); gap:24px; } }
@media(max-width:640px) { .sjbanner-field .fradmin-input { font-size:16px; } .sjbanner-table th,.sjbanner-table td { padding:10px; } }
@media(max-width:360px) { .sjbanner-period { grid-template-columns:minmax(0,1fr); } }

/* 공개 화면의 section 여백이 관리자 도구까지 적용되지 않도록 한다. */
.fradmin-document,.sjbanner-panel { padding:0; }
/* 관리 도구 안의 section은 공개 section 여백을 받지 않는다. :where()로 명시도를 0으로 두어 각 도구의 클래스 여백(카드 목록 17px 등)은 그대로 이긴다. */
:where(.route-admin) :where(.fradmin-field-panel, .fradmin-template-panel, .fradmin-saved-dialog) section { padding: 0; }
.fradmin-card-management { padding:0; }
.fradmin-nav-toggle { display:none; }
@media(max-width:640px) {
  .fradmin-nav-toggle { display:flex; justify-content:space-between; align-items:center; width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; font-size:13px; font-weight:650; text-align:left; }
  .fradmin-nav-toggle::after { content:'⌄'; }
  .fradmin-shell:not(.is-nav-open) .fradmin-navigation { display:none; }
  .fradmin-shell.is-nav-open .fradmin-navigation { margin-top:16px; }
  .fradmin-shell.is-nav-open .fradmin-nav-toggle::after { content:'⌃'; }
}

/* 선택한 묶음의 자세한 관리는 접힌 한 줄(details)로 둔다. 기본 화면에는 선택한 항목과 그 도구만 펼쳐 보인다.
   + 내용 추가 / 내용 순서 / 모양·간격 / 묶음 순서·복제·삭제. 요약 줄 안에는 버튼을 두지 않는다. */
.fradmin-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fradmin-fold { border-top: 1px solid #edf0f5; }
.fradmin-card-management .fradmin-fold { border-bottom: 1px solid #edf0f5; }
.fradmin-group-context:has(> section:not([hidden])) + .fradmin-card-management { margin-top: 0; }
.fradmin-fold > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 2px; color: #3f4c64; font-size: 13px; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; }
.fradmin-fold > summary::-webkit-details-marker { display: none; }
.fradmin-fold > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 0; border-right: 1.6px solid #8a96ab; border-bottom: 1.6px solid #8a96ab; transform: rotate(45deg); transition: transform .15s; }
.fradmin-fold[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
.fradmin-fold > summary:hover { color: var(--brand); }
.fradmin-fold-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fradmin-fold-value { flex: none; max-width: 52%; color: #7a869a; font-size: 12px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fradmin-fold-value:empty { display: none; }
.fradmin-fold-add > summary { color: var(--brand); }
.fradmin-fold-body { padding: 2px 0 16px; }
/* 내용이 없으면 workspace가 #adminBlockListTitle을 숨긴다. 그때는 순서 행 전체를 숨긴다. */
.fradmin-fold:has(> summary [hidden]#adminBlockListTitle) { display: none; }
.fradmin-card-management .fradmin-fold-body > p { margin: 0 0 10px; color: #667085; font-size: 12px; line-height: 1.6; }
/* 두 가지 중 하나를 고르는 짧은 버튼 묶음: 묶음 모양(aria-pressed 버튼)과 새 묶음 모양(radio) */
.fradmin-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; }
.fradmin-segment > button, .fradmin-segment > label > span { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 7px; color: #53627a; background: transparent; font-size: 13px; font-weight: 650; line-height: 1.3; text-align: center; cursor: pointer; transition: background .15s, color .15s; }
.fradmin-segment > button:hover:not(:disabled), .fradmin-segment > label:hover > span { color: var(--brand); }
.fradmin-segment > button[aria-pressed="true"], .fradmin-segment > label > input:checked + span { color: var(--brand); background: #fff; box-shadow: 0 1px 3px #1720331f, inset 0 0 0 1px color-mix(in srgb, var(--brand), #fff 55%); font-weight: 750; }
.fradmin-segment > button:disabled, .fradmin-segment > label > input:disabled + span { cursor: not-allowed; color: #a3adbd; }
.fradmin-segment > label { position: relative; display: block; min-width: 0; margin: 0; }
.fradmin-segment > label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fradmin-segment > label > input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.fradmin-group-settings { min-width: 0; }
.fradmin-group-hint { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; color: #7a5a1e; background: #fff7e8; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
/* 내용 아래 간격: 묶음 설정과 같은 접힌 행·입력 모양을 쓴다. 안내는 마지막 내용(info)·잠김(warn)일 때만 보인다. */
.fradmin-block-spacing { min-width: 0; }
.fradmin-group-hint[data-tone="info"] { color: #5f6b80; background: #f4f6fa; }
.fradmin-block-spacing .fradmin-gap-custom { margin-left: 0; }
.fradmin-group-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.fradmin-group-row + .fradmin-group-row { margin-top: 10px; }
.fradmin-group-divider-row { margin-top: 10px; }
.fradmin-divider-controls { min-width: 0; padding: 0; margin: 0 0 14px; }
.fradmin-divider-title { margin: 0 0 12px; color: #3f4c64; font-size: 13px; font-weight: 700; }
.fradmin-divider-gaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.fradmin-divider-gap-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #4b5770; font-size: 12px; font-weight: 700; }
.fradmin-divider-hint { margin: 8px 0 12px; color: #7a869a; font-size: 11px; line-height: 1.5; }
.fradmin-divider-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fradmin-group-label { margin: 0; color: #4b5770; font-size: 12px; font-weight: 700; }
.fradmin-group-select { min-height: 44px; padding-right: 32px; font-size: 13px; }
.fradmin-group-select:disabled, .fradmin-gap-custom .fradmin-input:disabled { cursor: not-allowed; color: #9aa5b8; background-color: #f3f5f9; }
.fradmin-gap-custom { margin: 10px 0 0 74px; }
.fradmin-gap-custom-label { display: block; margin: 0 0 6px; color: #5d6a80; font-size: 12px; font-weight: 650; line-height: 1.5; }
.fradmin-gap-custom-row { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.fradmin-gap-input { position: relative; flex: 1 1 auto; min-width: 0; }
.fradmin-gap-input > .fradmin-input { min-height: 44px; padding-right: 36px; font-size: 13px; }
.fradmin-gap-input > span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #7a869a; font-size: 12px; font-weight: 650; pointer-events: none; }
.fradmin-gap-custom-row > .fradmin-button { flex: none; min-height: 44px; padding: 8px 14px; font-size: 12px; }
.fradmin-group-reset { display: flex; min-height: 36px; margin: 12px 0 0 auto; padding: 7px 12px; font-size: 12px; }
/* 새 묶음 대화상자: 모양 → 넣을 내용 */
.fradmin-template-step { margin: 18px 0 8px; padding: 0; color: #354057; font-size: 13px; font-weight: 750; }
.fradmin-new-style { min-width: 0; margin: 0; padding: 0; border: 0; }
.fradmin-new-style > .fradmin-template-step { margin-top: 0; }
.fradmin-template-content > .fradmin-templates { margin-top: 0; }
/* 새 묶음 추가: 위 '넣을 내용'은 오른쪽 '이 묶음에 내용 추가'와 같은 기본 요소, 아래 접힌 '안내 양식으로 시작'은 기존 복합 양식(제목+구성이 갖춰진 묶음). 기본 요소보다 한 단계 낮은 점선 버튼으로 구분한다. */
.fradmin-template-presets { margin-top: 16px; border-top: 1px solid #edf0f5; }
.fradmin-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; list-style: none; cursor: pointer; }
.fradmin-template-presets > summary::-webkit-details-marker { display: none; }
.fradmin-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); transition: transform .15s; }
.fradmin-template-presets[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
.fradmin-template-presets > summary:hover { color: var(--brand); }
.fradmin-template-presets > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.fradmin-template-presets > p { margin: 0 0 10px; color: #7a869a; font-size: 12px; font-weight: 500; line-height: 1.5; }
.fradmin-template-preset-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; padding: 2px 0 4px; }
.fradmin-template-preset-options > button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px; border: 1px dashed #c9d5e7; border-radius: 7px; color: #53627a; background: #fff; font-size: 12px; font-weight: 650; line-height: 1.45; cursor: pointer; }
.fradmin-template-preset-options > button::before { content: "+"; font-size: 15px; font-weight: 500; color: var(--brand); }
.fradmin-template-preset-options > button:hover:not(:disabled) { border-color: #9bbcff; border-style: solid; color: var(--brand); background: #f1f6ff; }
.fradmin-template-preset-options > button:disabled { cursor: not-allowed; opacity: .45; }
.fradmin-template-preset-options > button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.route-admin :is(.fradmin-field-panel, .fradmin-template-panel) :is(input, summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.route-admin .fradmin-field-panel .fradmin-segment > label > input:focus-visible { outline: none; }
@media (max-width: 360px) {
  .fradmin-group-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fradmin-gap-custom { margin-left: 0; }
}
@media (max-width: 640px), (pointer: coarse) {
  .fradmin-fold > summary, .fradmin-segment > button, .fradmin-segment > label > span, .fradmin-group-reset, .fradmin-templates > button, .fradmin-card-controls > button, .fradmin-card-entry > button { min-height: 44px; }
  .fradmin-template-presets > summary, .fradmin-template-preset-options > button { min-height: 44px; }
  .fradmin-group-select, .fradmin-gap-input > .fradmin-input { font-size: 16px; }
  .fradmin-status-row > .fradmin-button { min-height: 44px; }
  .fradmin-block-select { min-height: 44px; }
  .fradmin-block-actions > button { width: 44px; height: 44px; }
  .fradmin-carousel-order > .fradmin-button, .fradmin-carousel-add, .fradmin-image-fields :is(#adminReplaceImage, #adminDeleteImage) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .fradmin-segment > button, .fradmin-segment > label > span, .fradmin-fold > summary::after { transition: none; }
}

/* 관리자 '예약 표시정보'(legacy #sjadminDisplayParentModal, Friends·SJ): 중첩 정리.
   관리 패널 카드 → 옮겨 온 모달 카드(공개 CSS의 !important padding·흰 바탕·반경) → 중복 머리글 → 두 패널 → 큰 빈 안내판이 겹치던 구성을
   [카테고리 탭 목록 | 상세 내용 편집] 두 흰 카드만 남기고, 높이는 화면 기준으로 제한한다. 편집기·저장·끌어 정렬·삭제·상태 안내 동작은 그대로. */
.route-admin #adminManagementPanel:has(> #sjadminDisplayParentModal.fradmin-inline-management) { padding: 0; border: 0; border-radius: 0; background: transparent; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management > :first-child { height: auto !important; max-height: none !important; overflow: visible; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
/* 머리글 '표시정보관리 …'는 페이지 머리('예약 표시정보')와 같은 내용이고 닫기는 이미 숨김 → 숨긴다. */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sjadmin-fee-modal-header { display: none !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management :is(.sjadmin-fee-modal-body, .sjadmin-display-body) { height: auto; padding: 0 !important; overflow: visible; background: transparent !important; }
/* 상태: 탭 미선택(안내판 표시)이면 자연 높이, 탭을 골라 조회·편집할 때만 화면에 남은 높이(root가 --fradmin-display-height로 계산, 없으면 100dvh - 160px).
   상태는 JS가 안내판(#displayMainPlaceholder)에 주는 inline display(none/flex)로 판별하고, display 자체는 건드리지 않는다. */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-manage-layout { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important; gap: 16px; height: auto !important; min-height: 0; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-manage-layout { height: var(--fradmin-display-height, calc(100dvh - 160px)) !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel { border-radius: 12px; border-color: var(--line, #e1e6ef); }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel-head { padding: 14px 16px 12px; }
/* 카테고리 탭 목록 머리: [제목 / 설명] 아래에 [업데이트][+ 추가] 버튼 줄을 따로 둬서, '업데이트'가 나타나도 설명이 좁아져 꺾이지 않는다. */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel:first-child > .friends-admin-panel-head > div { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel:first-child > .friends-admin-panel-head > div > div:last-child { flex-wrap: wrap; justify-content: flex-start; gap: 6px !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel:first-child > .friends-admin-panel-head p { white-space: normal; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management :is(#btnDisplayAddTag, #btnDisplayUpdateOrder) { height: 32px !important; padding: 0 12px !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sidebar-header { flex-wrap: wrap; gap: 8px; }
/* 카테고리 행: 핸들·이름은 왼쪽, 삭제는 오른쪽 끝. 긴 이름은 말줄임, 삭제 칸은 줄어들지 않는다. */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #displayTagList > li { justify-content: space-between; min-width: 0; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #displayTagList > li > .tag-name-wrap { flex: 1 1 auto; min-width: 0; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #displayTagList > li .tag-name { min-width: 0; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #displayTagList > li > .tag-actions { flex-shrink: 0; margin-left: auto; }
/* 오른쪽 편집 영역: 미선택일 때는 내용 높이(inline height:100% 해제) */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel:last-child > .friends-admin-list-wrap { height: auto !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-panel:last-child > .friends-admin-list-wrap { height: 100% !important; }
/* 카테고리가 많으면: 미선택 상태에서는 목록이 늘어나다 최대 높이에서 안쪽 스크롤(선택 상태는 패널 높이 안에서 스크롤). */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel:first-child > .friends-admin-list-wrap { max-height: min(60vh, 560px); }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-panel:first-child > .friends-admin-list-wrap { max-height: none; }
/* 빈 안내: 회색 판·점선 없이 흰 패널 안의 짧은 안내(최소 180px). */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #displayMainPlaceholder { flex: none !important; height: auto !important; min-height: 180px; padding: 24px 16px; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
/* SJ: 위 탭 줄 + 아래 편집(기존 세로 구성). 미선택은 자연 높이, 선택 시만 높이 제한. */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sjadmin-display-body { flex: none; height: auto; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sjadmin-display-main { height: auto; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .sjadmin-display-body { height: var(--fradmin-display-height, calc(100dvh - 160px)); }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .sjadmin-display-main { height: 100%; }
/* 선택 상태 편집기: 머리(제목·저장)와 CK 도구줄은 고정, CK 본문만 남은 높이를 채우고 안쪽 스크롤(Friends 목록 wrap 전체 스크롤·SJ 380px 고정 대체). */
/* 높이가 충분하면 CK 본문만 스크롤하고, 아주 짧은 창(h300~460)에서 머리·도구줄·본문 최소 높이가 안 들어가면 오른쪽 편집 영역이 스크롤된다(잘림 없음). */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-panel:last-child > .friends-admin-list-wrap { overflow-x: hidden !important; overflow-y: auto !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .sjadmin-display-main { overflow-x: hidden; overflow-y: auto; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) :is(#displayMainEditorForm, #displayMainViewForm) .editor-body,
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) :is(#displayMainEditorForm, #displayMainViewForm) .editor-field { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) #displayMainEditorForm .ck.ck-editor { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) #displayMainEditorForm .ck.ck-editor__main { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) #displayMainEditorForm .ck.ck-editor__main > .ck-editor__editable { flex: 1 1 auto !important; height: auto !important; min-height: 120px !important; max-height: none !important; overflow-y: auto !important; }
/* 조회 본문·편집기 자리(편집기 불러오기 실패 미리보기 포함)의 inline 최소 높이(Friends 300px, SJ 250/200px)를 줄여 짧은 창에서도 넘치지 않게 한다. 더 모자라면 오른쪽 영역 스크롤. */
@media (min-width: 961px) {
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) :is(#displayBoardContentsView, #displayBoardContentsEditor) { min-height: 120px !important; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) #displayBoardContentsEditor { overflow-y: auto; }
}
@media (max-width: 960px) {
  /* 좁은 화면: 목록 → 편집 세로. 미선택은 자연 높이, 선택해 편집할 때만 편집 영역 최소 420px. */
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-manage-layout,
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-manage-layout { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .friends-admin-panel:first-child > .friends-admin-list-wrap { max-height: 240px; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-panel:first-child > .friends-admin-list-wrap { max-height: 240px; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-panel:last-child { min-height: 420px; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .sjadmin-display-body { height: auto; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .sjadmin-display-main { min-height: 420px; height: auto; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) .friends-admin-panel:last-child > .friends-admin-list-wrap { overflow: visible !important; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management:has(#displayMainPlaceholder[style*="display: none"]) #displayMainEditorForm .ck.ck-editor__main > .ck-editor__editable { min-height: 360px !important; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #displayMainPlaceholder { min-height: 160px; }
}
@media (max-width: 640px), (pointer: coarse) {
  /* 카테고리 추가·순서 업데이트·삭제 버튼 44px */
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management :is(#btnDisplayAddTag, #btnDisplayUpdateOrder) { height: 44px !important; padding: 0 14px !important; }
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .btn-tag-action { min-height: 44px; min-width: 44px; }
  /* 44px 삭제 버튼이 행 밖으로 나오지 않게 카테고리 행 높이(Friends 40px !important / SJ 38px)를 풀고 위아래 5px 여백 → 약 56px. 데스크톱은 그대로. */
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #displayTagList > li { height: auto !important; min-height: 54px; padding-top: 5px !important; padding-bottom: 5px !important; }
}
/* 표시정보 편집 버튼: 저장 = 테마색 주 버튼, 이미지 추가·편집기 다시 불러오기 = 흰 바탕 보조 버튼(기존 검정·초록 inline/legacy 색 대체). 비활성은 회색으로 분명히. */
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #btnDisplaySaveBoard { min-height: 36px; height: auto !important; padding: 0 16px !important; border: 1px solid var(--brand) !important; border-radius: 8px !important; background: var(--brand) !important; color: #fff !important; box-shadow: none !important; font-size: 13px; font-weight: 750 !important; cursor: pointer; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management #btnDisplaySaveBoard:hover:not(:disabled) { background: color-mix(in srgb, var(--brand), #000 12%) !important; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sjadmin-display-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sjadmin-display-tools > button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; height: auto; padding: 0 14px; border: 1px solid var(--line, #dfe4ec); border-radius: 8px; background: #fff; color: var(--ink-1, var(--ink, #273248)); box-shadow: none; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transform: none; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sjadmin-display-tools > .sjadmin-btn-update { border-color: color-mix(in srgb, var(--brand), #fff 55%); color: var(--brand); }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management .sjadmin-display-tools > button:hover:not(:disabled) { border-color: var(--brand); background: color-mix(in srgb, var(--brand), #fff 92%); }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management :is(#btnDisplaySaveBoard, .sjadmin-display-tools > button):disabled { border-color: #e2e8f0 !important; background: #eef1f6 !important; color: #94a3b8 !important; cursor: not-allowed; opacity: 1; }
.route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management :is(#btnDisplaySaveBoard, .sjadmin-display-tools > button):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px), (pointer: coarse) {
  .route-admin #adminManagementPanel #sjadminDisplayParentModal.fradmin-inline-management :is(#btnDisplaySaveBoard, .sjadmin-display-tools > button) { min-height: 44px; }
}

/* ── 오른쪽 내용 패널 정리(v44): 높이 자동 축소(compact)는 쓰지 않고, 낮은 창에서는 '설정 넓게 보기'(큰 창)로 펼친다 ──
   패널 높이·sticky·안쪽 스크롤(max-height) 규칙은 그대로다. */
/* 패널 머리: 제목 '내용 묶음'은 읽기용으로만 두고, [+ 새 묶음] [저장]을 한 줄에 같은 폭으로. */
#adminFieldPanelTitle { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fradmin-field-toolbar { padding: 12px; }
.fradmin-field-actions { flex: 1 1 auto; flex-wrap: nowrap; justify-content: stretch; margin-left: 0; }
.fradmin-field-actions > .fradmin-button { flex: 1 1 0; min-width: 0; }
/* 선택한 항목 머리·빈 안내 */
.fradmin-field-body { padding: 16px 18px; }
.fradmin-field-badge { margin-bottom: 2px; }
.fradmin-field-heading h3 { font-size: 16px; }
.fradmin-field-empty { gap: 10px; margin-top: 10px; padding: 10px 12px; }
.fradmin-field-empty svg { width: 22px; height: 22px; }
/* 접힌 줄 */
.fradmin-fold > summary { min-height: 42px; padding: 6px 2px; }
.fradmin-fold-body { padding-bottom: 12px; }
/* 내용 추가 타일: 2열 · 높이 72px · 아이콘 원래 크기. 라벨은 단어 중간에서 꺾이지 않게 한 줄(284px 패널에서 칸 약 120px). */
.fradmin-block-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fradmin-block-types > button { gap: 7px; min-height: 72px; padding: 10px 6px 8px; font-size: 12px; line-height: 1.3; }
.fradmin-block-type-label { white-space: nowrap; word-break: keep-all; }
#adminButtonInsertion { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #e6ebf2); }
#adminButtonInsertion[hidden] { display: none; }
#adminButtonInsertion > .fradmin-button { width: 100%; }
#adminButtonInsertion > :is(.fradmin-label, .fradmin-composition-hint) { margin: 0; }
#adminHeroAppearance .fradmin-gap-custom-row { align-items: center; }
#adminHeroAppearance input[type="color"] { flex: none; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--line, #e6ebf2); border-radius: 8px; background: #fff; cursor: pointer; }

/* 위 기본 규칙(접힌 줄 42px)이 앞쪽 모바일·터치 44px 규칙보다 뒤에 있으므로 다시 지정한다. */
@media (max-width: 640px), (pointer: coarse) {
  .fradmin-fold > summary { min-height: 44px; }
}
/* 새 묶음 버튼 안 짧은 이름(.fradmin-label-short)은 쓰지 않는다(전체 이름만 표시). */
.fradmin-label-short { display: none; }

/* 패널 머리 버튼: [+ 새 묶음] [미저장 저장] [⤢ 설정 넓게 보기]. 넓게 보기는 아이콘 버튼(38px), 나머지는 남은 폭을 나눈다(284px 패널에서 각 약 104px). */
.fradmin-field-actions > #adminExpandPanel { flex: none; width: 38px; min-width: 38px; padding: 0; }
.fradmin-field-actions > #adminExpandPanel svg { width: 18px; height: 18px; }
.fradmin-field-panel[data-expanded="true"] #adminExpandPanel { display: none !important; }
@media (max-width: 640px), (pointer: coarse) {
  .fradmin-field-actions > .fradmin-button { min-height: 44px; }
  .fradmin-field-actions > #adminExpandPanel { width: 44px; min-width: 44px; }
}

/* 설정 넓게 보기: 기존 #adminFieldPanel을 그대로 옮겨 담는 큰 창(dialog#adminPanelViewDialog.fradmin-panel-dialog). 바닥 버튼 없음. */
.fradmin-panel-dialog { box-sizing: border-box; width: min(600px, 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: var(--ink-1, #273248); box-shadow: 0 20px 60px rgba(23, 32, 51, .19); }
.fradmin-panel-dialog[open] { display: flex; flex-direction: column; }
.fradmin-panel-dialog::backdrop { background: rgba(23, 32, 51, .38); }
.fradmin-panel-dialog-heading { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line, #e6ebf2); }
.fradmin-panel-dialog-heading h2 { margin: 0; color: var(--ink-1, #273248); font-size: 16px; font-weight: 750; line-height: 1.35; }
.fradmin-panel-dialog-close { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; color: #495367; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fradmin-panel-dialog-close:hover { border-color: #b6c9ed; color: #20324f; background: #f8faff; }
.fradmin-panel-dialog-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fradmin-panel-dialog-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
/* 옮겨 온 패널: 고정·테두리·높이 제한 해제, 머리(새 묶음·저장)는 고정이고 본문만 큰 창 높이 안에서 스크롤 */
.fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] { position: static; top: auto; display: flex; flex: 1 1 auto; flex-direction: column; width: auto; min-height: 0; height: auto; max-height: none; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
.fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] .fradmin-field-toolbar { position: static; top: auto; flex: none; border-radius: 0; }
.fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] .fradmin-field-body { flex: 1 1 auto; min-height: 0; padding: 16px 20px 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* 큰 창에서는 내용 추가 타일을 3열로(라벨·아이콘 그대로) */
.fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] .fradmin-block-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px), (pointer: coarse) {
  .fradmin-panel-dialog-close { min-height: 44px; }
}
@media (max-width: 480px) {
  .fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] .fradmin-block-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] .fradmin-field-body { padding: 14px 16px 16px; }
}
/* 아주 낮은 창(높이 300px 등): 머리·도구줄 여백만 줄여 본문 스크롤 공간을 넓힌다. */
@media (max-height: 420px) {
  .fradmin-panel-dialog-heading { padding: 8px 12px; }
  .fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] .fradmin-field-toolbar { padding: 8px 12px; }
  .fradmin-panel-dialog .fradmin-field-panel[data-expanded="true"] .fradmin-field-body { padding-top: 10px; }
}

/* 저장 위치 이동: 관리 머리(#adminHeaderActions: 게시된 화면 보기 + 저장), 게시글 iframe 문서 도구줄(#adminDocumentActions: 화면 크기 + 저장) */
.fradmin-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.fradmin-document-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
.fradmin-document-actions > .fradmin-field-commit, .fradmin-header-actions > .fradmin-field-commit { min-height: 38px; padding: 8px 16px; font-size: 13px; white-space: nowrap; }
@media (max-width: 640px), (pointer: coarse) {
  .fradmin-document-actions > .fradmin-field-commit, .fradmin-header-actions > .fradmin-field-commit { min-height: 44px; }
}