@charset "UTF-8";

/*
    시스템 관리 > 서비스 안내 (bit/system/svcnotice)
    - BIT 작성 / BMS 열람. 모달 프레임(mskin) 은 modal_skin.css 공통.
    - 목록/상세/등록 구성은 릴리즈 노트(system_releasenote.css)와 동일 톤으로 맞춘다.
*/

/* ── 목록 ─────────────────────────────────────── */
#system_svcnotice .sn-td-title {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
#system_svcnotice .sn-file-icon { width: 16px; height: 16px; vertical-align: middle; }
#system_svcnotice tbody tr { cursor: pointer; }

/* 중요 공지: 상단 고정 + 좌측 빨간 띠 (BMS 와 동일).
   공통(bit.css)의 행 앞머리 바(td:first-child::before, 기본 회색)를 빨강으로 덮어쓴다.
   공통 규칙(#content .form-tbl …)을 이기려 id 2개로 특이도를 높인다. */
#content #system_svcnotice .form-tbl tbody tr.sn-tr-important > td:first-child::before {
    background: #e24b4a;
}

/* ── 칩(노출대상 / 중요 / 사용) ───────────────── */
#system_svcnotice .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #495057;
    background: #f1f3f5;
    white-space: nowrap;
}
#system_svcnotice .chip i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #adb5bd; flex: none;
}
#system_svcnotice .chip.target_all    { background: #e7f1ff; color: #0a58ca; }
#system_svcnotice .chip.target_all i  { background: #007bff; }
#system_svcnotice .chip.target_site   { background: #e6f4ea; color: #1b7a37; }
#system_svcnotice .chip.target_site i { background: #28a745; }
#system_svcnotice .chip.important     { background: #fff1f0; color: #c2410c; }
#system_svcnotice .chip.important i   { background: #ea580c; }
#system_svcnotice .chip.use_on        { background: #e6f4ea; color: #1b7a37; }
#system_svcnotice .chip.use_on i      { background: #28a745; }
#system_svcnotice .chip.use_off       { background: #f1f3f5; color: #868e96; }
#system_svcnotice .chip.use_off i     { background: #adb5bd; }
#system_svcnotice .chip.popup         { background: #fff7e6; color: #b45309; }
#system_svcnotice .chip.popup i       { background: #f59e0b; }

/* ── 고객사 필터 커스텀 드롭다운 (목록 길어도 높이 제한 + SimpleBar 스크롤) ── */
#system_svcnotice .sn-dd { position: relative; display: inline-block; vertical-align: middle; }
/* 버튼은 옆 native select 와 동일 크기/글꼴(.form--tbl__header select = 40px·16.5px) */
#system_svcnotice .sn-dd__btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 40px; box-sizing: border-box; min-width: 150px;
    font-size: 16.5px; text-align: left; background: #fff; cursor: pointer;
}
#system_svcnotice .sn-dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#system_svcnotice .sn-dd__caret {
    flex: none; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #8a94a1;
}
/* 팝업/목록/항목은 native 셀렉트 드롭다운과 동일하게(흰 목록·파란 선택줄·각진 테두리). 스크롤바만 얇게 커스텀 */
#system_svcnotice .sn-dd__pop {
    position: absolute; z-index: 60; top: 100%; left: 0; min-width: 100%;
    background: #fff; border: 1px solid #a0a0a0; border-radius: 0;
    box-shadow: none; padding: 0;
}
/* 높이: 화면(뷰포트) 비례, 최소 200px 보장. 스크롤은 공통 SimpleBar 가 담당(열 때 초기화) */
#system_svcnotice .sn-dd__list { max-height: max(200px, 45vh); padding: 4px 0; }
#system_svcnotice .sn-dd__item {
    display: block; width: 100%; text-align: left; padding: 7px 12px;
    border: 0; background: none; border-radius: 0;
    font-size: 15px; color: #202124; cursor: pointer; white-space: nowrap;
}
#system_svcnotice .sn-dd__item:hover { background: #f1f3f4; }
#system_svcnotice .sn-dd__item.is-active { background: #1a73e8; color: #fff; }

/* ── 상세 모달 (Q&A/릴리즈노트와 같은 스크롤 체인) ── */
#system_svcnotice_detailModal .modal-dialog {
    width: 760px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
}
/* 본문 스크롤은 SimpleBar 가 담당 → .modal-content 자체 네이티브 스크롤 제거(이중 스크롤바 방지).
   overflow:hidden 은 SimpleBar 가 자기 막대도 숨기므로 visible 로 둬야 커스텀 막대가 보인다. */
#system_svcnotice_detailModal .modal-content { padding: 0; overflow: visible; }
/* 항목 : 값 폼뷰 (apk/adm 상세와 동일). 박스(흰 카드)는 공통 mskin 이 처리 */
#system_svcnotice_detailModal .form.view-mode { display: flex; flex-direction: column; }
#system_svcnotice_detailModal .form-group-view {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
#system_svcnotice_detailModal .form-group-view:last-child { margin-bottom: 0; }

/* 메타 2열 그리드 : 대상 고객사(한 줄) → 작성자·등록일 → 사용여부·조회수.
   .form.view-mode(display:flex) 보다 특정도를 높여 그리드로 덮는다 */
#system_svcnotice_detailModal .form.view-mode.sn-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
}
#system_svcnotice_detailModal .sn-meta-grid .form-group-view { margin-bottom: 0; }
#system_svcnotice_detailModal .sn-meta-grid .sn-row-full { grid-column: 1 / -1; }

/* 제목 행 : '제목' 라벨 + 값(제목 + 중요 배지) */
#system_svcnotice_detailModal .sn-title-row .form-value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#system_svcnotice_detailModal .sn-title { font-size: 16px; font-weight: 700; color: #1f2937; word-break: break-word; }

/* 내용 행 : '내용' 라벨 상단정렬 + 값 영역에서만 SimpleBar 스크롤(고정 높이) */
#system_svcnotice_detailModal .sn-content-row { align-items: flex-start; }
#system_svcnotice_detailModal .sn-content-value { min-width: 0; }
#system_svcnotice_detailModal .sn-content {
    font-size: 16px;
    line-height: 1.8;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 수정/등록 모달 내용 textarea : 네이티브 스크롤바를 SimpleBar 톤(얇은 바)으로.
   (textarea 는 폼 요소라 SimpleBar 를 안에 넣을 수 없어 스크롤바만 맞춘다) */
#system_svcnotice_editModal #sn_editContent { scrollbar-width: thin; scrollbar-color: #c6d0dc transparent; }
#system_svcnotice_editModal #sn_editContent::-webkit-scrollbar { width: 10px; }
#system_svcnotice_editModal #sn_editContent::-webkit-scrollbar-thumb { background: #c6d0dc; border-radius: 10px; border: 2px solid #fff; }
#system_svcnotice_editModal #sn_editContent::-webkit-scrollbar-track { background: transparent; }

/* 중요 배지 (제목 뒤, sn-head gap 으로 간격) */
#system_svcnotice_detailModal .sn-badge {
    flex: none;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}
#system_svcnotice_detailModal .sn-badge--important { background: #fff1f0; color: #c2410c; }

/* 대상 고객사 칩 */
#system_svcnotice_detailModal .sn-sites-list { display: flex; flex-wrap: wrap; gap: 6px; }
#system_svcnotice_detailModal .sn-site-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13.5px;
    color: #0a58ca;
    background: #e7f1ff;
    border: 1px solid #d3e3fb;
}
#system_svcnotice_detailModal .sn-site-tag--all { color: #334155; background: #eef2f7; border-color: #dbe2ea; }
/* 첨부파일 목록 (첨부파일 카드 안) */
#system_svcnotice_detailModal .file-list { display: flex; flex-direction: column; gap: 6px; }
#system_svcnotice_detailModal .file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 6px;
}
#system_svcnotice_detailModal .file-name { flex: 1; font-size: 14px; color: #111827; }
#system_svcnotice_detailModal .file-size { font-size: 13px; color: #9ca3af; }
/* 다운로드 버튼도 낮춰 행 높이 축소 */
#system_svcnotice_detailModal .file-item .btn-download { padding: 3px 12px; font-size: 13px; }
/* .btn-download 모양은 bit.css 의 다운로드 버튼 공통 규칙에서 처리 */

/* ── 푸터 : 버튼 네모(사각) + 우측 정렬 (두 모달 공용) ── */
#system_svcnotice_detailModal .modal-footer,
#system_svcnotice_editModal .modal-footer {
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}
#system_svcnotice_detailModal .modal-footer__actions,
#system_svcnotice_editModal .modal-footer__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}
#system_svcnotice_detailModal .modal-footer .btn,
#system_svcnotice_editModal .modal-footer .btn {
    border-radius: 4px;
}

/* ── 등록/수정 모달 ──────────────────────────────── */
#system_svcnotice_editModal .modal-dialog {
    width: 90%;
    max-width: 760px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
#system_svcnotice_editModal .modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: clip;
    min-height: 0;
    padding: 0;
}
#system_svcnotice_editModal .modal-section {
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    margin: 14px;
    border: 1px solid #e5e7eb;
}
#system_svcnotice_editModal .modal-section + .modal-section { margin-top: 0; }
#system_svcnotice_editModal .section-title {
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
#system_svcnotice_editModal .section-content {
    display: flex;
    flex-direction: column;
}
#system_svcnotice_editModal .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 8px;
    min-width: 0;
}
#system_svcnotice_editModal .form-group.ti-top    { align-items: flex-start; }
#system_svcnotice_editModal .form-group:last-child { margin-bottom: 0; }
#system_svcnotice_editModal .form-ti { flex-shrink: 0; }
#system_svcnotice_editModal .form-ti.w120 { width: 100px; }
#system_svcnotice_editModal .form-ti.required::after {
    content: '*';
    color: #e54e57;
    margin-left: 3px;
}
#system_svcnotice_editModal .form-control {
    flex: 1;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 17px;
    color: #1d1d1d;
    background-color: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
#system_svcnotice_editModal .form-control:focus { border-color: #047bb6; }
#system_svcnotice_editModal textarea.form-control {
    flex: 1 1 auto;
    height: clamp(120px, 30vh, 320px);
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* 노출대상 라디오 · 옵션 체크 */
#system_svcnotice_editModal .sn-radio,
#system_svcnotice_editModal .sn-opt {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 34px;
}
#system_svcnotice_editModal .sn-radio label,
#system_svcnotice_editModal .sn-opt label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    cursor: pointer;
}

/* 특정 고객사 선택기 */
#system_svcnotice_editModal .sn-site-row { align-items: flex-start; }
#system_svcnotice_editModal .sn-site-picker {
    flex: 1;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fafbfc;
    padding: 10px;
}
#system_svcnotice_editModal .sn-site-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
#system_svcnotice_editModal .sn-site-search {
    flex: 1;
    height: 32px;
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 15px;
    outline: none;
    background: #fff;
}
#system_svcnotice_editModal .sn-site-search:focus { border-color: #047bb6; }
#system_svcnotice_editModal .sn-site-all {
    display: inline-flex; align-items: center; gap: 6px;
    flex: none; font-size: 15px; color: #374151; cursor: pointer; white-space: nowrap;
}
#system_svcnotice_editModal .sn-site-list {
    max-height: 200px;
    overflow: auto;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 4px;
    padding: 6px;
}
#system_svcnotice_editModal .sn-site-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 15px;
    color: #374151;
    cursor: pointer;
}
#system_svcnotice_editModal .sn-site-item:hover { background: #f1f7fd; }
#system_svcnotice_editModal .sn-site-empty {
    margin: 0; padding: 16px 8px; text-align: center; color: #9aa5b2; font-size: 14px;
}
#system_svcnotice_editModal .sn-site-count {
    margin: 8px 0 0 0; font-size: 14px; color: #6b7280; text-align: right;
}
#system_svcnotice_editModal .sn-site-count strong { color: #047bb6; }

/* 첨부 : 기존 파일 */
#system_svcnotice_editModal .existing-files { margin-bottom: 10px; }
#system_svcnotice_editModal .existing-file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #f9fafb;
    border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 6px;
}
#system_svcnotice_editModal .existing-file-item:last-child { margin-bottom: 0; }
#system_svcnotice_editModal .existing-file-item .file-name { flex: 1; font-size: 15px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#system_svcnotice_editModal .existing-file-item .file-size { font-size: 14px; color: #9ca3af; }

/* 첨부 : 업로드 영역 */
#system_svcnotice_editModal .file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    padding: 22px 15px;
    text-align: center;
    cursor: pointer;
    background: #fafbfc;
    transition: all .2s;
}
#system_svcnotice_editModal .file-upload-area:hover,
#system_svcnotice_editModal .file-upload-area.dragover { border-color: #047bb6; background: #f0f7ff; }
#system_svcnotice_editModal .file-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#system_svcnotice_editModal .upload-text { margin: 0; font-size: 16px; font-weight: 500; color: #374151; }
#system_svcnotice_editModal .upload-hint { margin: 0; font-size: 14px; color: #9ca3af; }

/* 첨부 : 새 파일 */
#system_svcnotice_editModal .new-files { margin-top: 10px; }
#system_svcnotice_editModal .new-file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #ecfdf5;
    border: 1px solid #a7f3d0; border-radius: 6px; margin-bottom: 6px;
}
#system_svcnotice_editModal .new-file-item:last-child { margin-bottom: 0; }
#system_svcnotice_editModal .new-file-item .file-name { flex: 1; font-size: 15px; color: #065f46; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#system_svcnotice_editModal .new-file-item .file-size { font-size: 14px; color: #059669; }

#system_svcnotice_editModal .btn-remove {
    width: 22px; height: 22px; border: none;
    background: #ef4444; color: #fff; border-radius: 50%;
    cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center; flex: none;
}
#system_svcnotice_editModal .btn-remove:hover { background: #dc2626; }

/* ── 적용 정보 박스 (상세, 내용 안에 렌더) ── */
/* 공통 : 내용 흐름 안에서 위아래 여백 */
#system_svcnotice_detailModal .sn-content .sn-apply-box { margin: 12px 0; }

/* 테마 1 : 하늘색 박스 (라벨-값 행) */
#system_svcnotice_detailModal .sn-apply-box--sky {
    background: #eaf4ff; border: 1px solid #cfe4fb; border-radius: 8px; padding: 2px 18px;
}
#system_svcnotice_detailModal .sn-apply-box--sky .sn-apply-box__item {
    display: flex; align-items: flex-start; gap: 22px; padding: 12px 2px;
}
#system_svcnotice_detailModal .sn-apply-box--sky .sn-apply-box__item + .sn-apply-box__item {
    border-top: 1px solid #d4e7fa;
}
#system_svcnotice_detailModal .sn-apply-box--sky .sn-apply-box__label {
    flex: none; min-width: 84px; color: #2b6cb0; font-weight: 600; font-size: 14.5px; line-height: 1.5;
}
#system_svcnotice_detailModal .sn-apply-box--sky .sn-apply-box__value {
    color: #1f2937; font-size: 15px; line-height: 1.5; word-break: break-word;
}

/* 테마 2 : 격자 테이블 — 평범한 사각 테두리(회색), 둥근 래퍼 없음 */
#system_svcnotice_detailModal .sn-gridwrap { overflow-x: auto; }
#system_svcnotice_detailModal .sn-apply-box--grid {
    width: 100%; border-collapse: collapse; border: 1px solid #d7dde5; font-size: 15px;
}
#system_svcnotice_detailModal .sn-apply-box--grid th,
#system_svcnotice_detailModal .sn-apply-box--grid td {
    border: 1px solid #e2e8f0; padding: 10px 14px; line-height: 1.5;
    text-align: left; vertical-align: top; word-break: break-word;
}
#system_svcnotice_detailModal .sn-apply-box--grid thead th {
    background: #f1f3f5; color: #495057; font-weight: 600; white-space: nowrap;
}
#system_svcnotice_detailModal .sn-apply-box--grid tbody td { color: #1f2937; }
#system_svcnotice_detailModal .sn-apply-box--grid tbody tr:nth-child(even) td { background: #fafbfc; }

/* 상세 : 내용 요약 — 박스 없이 평문, 요약↔내용 사이 밑줄 하나 */
#system_svcnotice_detailModal .sn-summary-row {
    align-items: flex-start;
    border-bottom: 1px solid #e5e7eb; padding-bottom: 14px;
}
#system_svcnotice_detailModal .sn-summary {
    color: #1f2937; font-size: 16px; line-height: 1.8; word-break: break-word;
}

/* 상세 : 텍스트 블록(줄바꿈 유지) */
#system_svcnotice_detailModal .sn-content .sn-blk-text { white-space: pre-wrap; word-break: break-word; }
#system_svcnotice_detailModal .sn-content .sn-blk-text + .sn-apply-box,
#system_svcnotice_detailModal .sn-content .sn-apply-box + .sn-blk-text { margin-top: 12px; }

/* ── 내용 블록 에디터 (등록/수정) ── */
#system_svcnotice_editModal .sn-editor {
    flex: 1 1 auto; min-width: 0; border: 1px solid #d7dde5; border-radius: 8px; background: #fff;
}
/* 스크롤해도 툴바는 항상 상단에 고정 (모달 스크롤 기준). sticky 가 먹도록 .sn-editor 에 overflow 를 두지 않는다 */
#system_svcnotice_editModal .sn-editor__toolbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 8px 10px; border-bottom: 1px solid #e8edf2; background: #f7f9fc;
    border-radius: 8px 8px 0 0;
}
#system_svcnotice_editModal .sn-size-sel {
    height: 28px; padding: 0 6px; border: 1px solid #cbd5e1; border-radius: 5px;
    background: #fff; color: #475569; font-size: 12.5px; cursor: pointer; min-width: 58px;
}
#system_svcnotice_editModal .sn-editor__tool {
    padding: 6px 12px; border: 1px solid #b7c0cc; border-radius: 6px;
    background: #fff; color: #334155; cursor: pointer; font-size: 13.5px;
}
#system_svcnotice_editModal .sn-editor__tool:hover { background: #eef3fb; border-color: #2b6cb0; color: #2b6cb0; }
#system_svcnotice_editModal .sn-editor__hint { margin-left: auto; font-size: 12.5px; color: #9aa5b2; }
#system_svcnotice_editModal .sn-editor__blocks { padding: 10px; display: flex; flex-direction: column; gap: 10px; }

#system_svcnotice_editModal .sn-blk { position: relative; }
#system_svcnotice_editModal .sn-blk--text { cursor: text; }
#system_svcnotice_editModal .sn-blk__rt {
    min-height: 36px; padding: 6px 2px; outline: none;
    font-size: 16px; line-height: 1.7; color: #1f2937; word-break: break-word;
}
#system_svcnotice_editModal .sn-blk__rt:empty:before {
    content: attr(data-ph); color: #b0b8c4;
}
#system_svcnotice_editModal .sn-blk__rt:focus { background: #fcfdff; }
/* 선택(드래그) 하이라이트가 글자색/굵기를 가리지 않게 — 선택 중에도 서식이 보이도록 */
#system_svcnotice_editModal .sn-blk__rt::selection,
#system_svcnotice_editModal .sn-blk__rt ::selection { background: rgba(43, 108, 176, 0.22); color: inherit; }
#system_svcnotice_editModal .sn-blk__rt::-moz-selection,
#system_svcnotice_editModal .sn-blk__rt ::-moz-selection { background: rgba(43, 108, 176, 0.22); color: inherit; }

/* 서식 툴바 버튼 */
#system_svcnotice_editModal .sn-rt {
    padding: 4px 9px; border: 1px solid #cbd5e1; border-radius: 5px;
    background: #fff; color: #475569; cursor: pointer; font-size: 12.5px; line-height: 1.4;
}
#system_svcnotice_editModal .sn-rt:hover { background: #eef3fb; border-color: #2b6cb0; color: #2b6cb0; }
#system_svcnotice_editModal .sn-rt[data-cmd="bold"] b { font-weight: 700; }
#system_svcnotice_editModal .sn-rt--color {
    width: 22px; height: 22px; padding: 0; border-radius: 50%;
    background: var(--c, #000); border: 1px solid rgba(0,0,0,.15);
}
#system_svcnotice_editModal .sn-rt--color:hover { outline: 2px solid #cbd5e1; outline-offset: 1px; }
#system_svcnotice_editModal .sn-rt-sep {
    width: 1px; height: 18px; background: #dbe2ea; margin: 0 3px; display: inline-block;
}
#system_svcnotice_editModal .sn-blk--box,
#system_svcnotice_editModal .sn-blk--table {
    border: 1px solid #cfe0f0; border-radius: 8px; background: #f6fafe; padding: 8px 10px 10px;
}
#system_svcnotice_editModal .sn-blk--table { border-color: #d7dde5; background: #f8fafc; }
#system_svcnotice_editModal .sn-blk__bar {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
#system_svcnotice_editModal .sn-blk__kind { font-size: 12.5px; font-weight: 600; color: #2b6cb0; }
#system_svcnotice_editModal .sn-blk--table .sn-blk__kind { color: #475569; }
#system_svcnotice_editModal .sn-blk__del {
    width: 22px; height: 22px; border: none; border-radius: 50%;
    background: #e2e8f0; color: #475569; cursor: pointer; font-size: 14px; line-height: 1;
}
#system_svcnotice_editModal .sn-blk__del:hover { background: #ef4444; color: #fff; }
#system_svcnotice_editModal .sn-blk__row {
    display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
}
#system_svcnotice_editModal .sn-blk__label { flex: 0 0 170px; }
#system_svcnotice_editModal .sn-blk__value { flex: 1 1 auto; min-width: 0; }
#system_svcnotice_editModal .sn-blk__rowdel {
    flex: none; width: 24px; height: 24px; border: none; border-radius: 50%;
    background: #ef4444; color: #fff; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
#system_svcnotice_editModal .sn-blk__rowdel:hover { background: #dc2626; }
#system_svcnotice_editModal .sn-blk__addrow {
    margin-top: 2px; padding: 5px 12px; border: 1px dashed #b7c0cc; border-radius: 6px;
    background: #fff; color: #4b5563; cursor: pointer; font-size: 13px;
}
#system_svcnotice_editModal .sn-blk__addrow:hover { background: #eef3fb; border-color: #8a94a3; }

/* 테이블(격자) 에디터 */
#system_svcnotice_editModal .sn-blk__barbtns { display: flex; align-items: center; gap: 6px; }
#system_svcnotice_editModal .sn-grid__addcol,
#system_svcnotice_editModal .sn-grid__addrow {
    padding: 3px 9px; border: 1px solid #b7c0cc; border-radius: 5px; background: #fff;
    color: #475569; cursor: pointer; font-size: 12px;
}
#system_svcnotice_editModal .sn-grid__addcol:hover,
#system_svcnotice_editModal .sn-grid__addrow:hover { background: #eef3fb; border-color: #2b6cb0; color: #2b6cb0; }
#system_svcnotice_editModal .sn-grid { overflow-x: auto; }
#system_svcnotice_editModal .sn-grid__tbl { border-collapse: collapse; width: 100%; }
#system_svcnotice_editModal .sn-grid__tbl th,
#system_svcnotice_editModal .sn-grid__tbl td { border: 1px solid #dbe2ea; padding: 0; position: relative; }
#system_svcnotice_editModal .sn-grid__thead th { background: #eef2f7; }
#system_svcnotice_editModal .sn-grid__h,
#system_svcnotice_editModal .sn-grid__c {
    border: none; border-radius: 0; box-shadow: none; background: transparent;
    width: 100%; min-width: 120px; height: 38px; padding: 4px 24px 4px 8px; font-size: 14px;
}
#system_svcnotice_editModal .sn-grid__h { font-weight: 600; color: #334155; }
#system_svcnotice_editModal .sn-grid__coldel {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 16px; height: 16px; border: none; border-radius: 50%;
    background: #cbd5e1; color: #fff; font-size: 11px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
#system_svcnotice_editModal .sn-grid__coldel:hover { background: #ef4444; }
#system_svcnotice_editModal .sn-grid__corner { width: 30px; background: #eef2f7; }
#system_svcnotice_editModal .sn-grid__rd { width: 30px; text-align: center; background: #f8fafc; }
#system_svcnotice_editModal .sn-grid__rowdel {
    width: 20px; height: 20px; border: none; border-radius: 50%;
    background: #ef4444; color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
}
#system_svcnotice_editModal .sn-grid__rowdel:hover { background: #dc2626; }

/* ── 이미지 첨부 뷰어 (상세) : 한 장씩 고정 높이 캐러셀, ‹ › 로 넘김 ── */
#system_svcnotice_detailModal .sn-img-viewer { margin-bottom: 12px; }
#system_svcnotice_detailModal .sn-carousel {
    position: relative; width: 100%; height: 320px;
    background: #f4f5f7; border: 1px solid #e4e7ec; border-radius: 8px; overflow: hidden;
}
#system_svcnotice_detailModal .sn-carousel__stage {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; cursor: zoom-in;
}
#system_svcnotice_detailModal .sn-carousel__stage img {
    max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
#system_svcnotice_detailModal .sn-carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.45); color: #fff; font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#system_svcnotice_detailModal .sn-carousel__nav:hover { background: rgba(0,0,0,0.65); }
#system_svcnotice_detailModal .sn-carousel__nav--prev { left: 12px; }
#system_svcnotice_detailModal .sn-carousel__nav--next { right: 12px; }
#system_svcnotice_detailModal .sn-carousel__counter {
    position: absolute; bottom: 10px; right: 12px; z-index: 2;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 13px;
    padding: 3px 10px; border-radius: 999px;
}

/* 원본 라이트박스 (body 에 append — #system_svcnotice 로 스코프하지 않음) */
.sn-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.8); display: none;
    align-items: center; justify-content: center; padding: 40px;
}
.sn-lightbox.active { display: flex; }
.sn-lightbox img {
    max-width: 92vw; max-height: 88vh; object-fit: contain;
    border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.sn-lightbox__close {
    position: absolute; top: 20px; right: 28px; width: 40px; height: 40px;
    border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff;
    font-size: 24px; line-height: 1; cursor: pointer;
}
.sn-lightbox__close:hover { background: rgba(255,255,255,0.3); }