@charset "utf-8";

/* ============================================================================
 * 에디터 본문(CKEditor)에서 사용하는 공통 클래스
 *
 * - 팝업 · 공지사항 · 승인사례 · 홍보자료 · 언론보도 · 자료실 · FAQ 등
 *   에디터로 작성하는 모든 본문에서 동일하게 사용한다.
 * - 사용자화면(RegulationSandbox)과 관리자(RegulationSandbox_manage)에 같은 파일을
 *   두고 함께 관리한다. 한쪽만 고치면 관리자 미리보기와 사용자화면이 달라진다.
 *   · 사용자화면 : RegulationSandbox/src/main/webapp/resources/css/editor-content.css
 *   · 관리자     : RegulationSandbox_manage/src/main/webapp/resources/css/editor-content.css
 *
 * [ 사용법 ]
 *   에디터에서 이미지·표를 더블클릭 → [자세히] 탭 → '스타일 시트 클래스' 칸에
 *   아래 클래스명을 입력한다. 여러 개를 쓸 때는 공백으로 구분한다.
 *   예) nipa-max-width-100percent nipa-radius-10
 *
 * [ 주의 ]
 *   1. 사용자화면은 보안설정(CSP)으로 본문의 인라인 style 속성이 적용되지 않는다.
 *      이미지 속성의 '스타일'(width/height 등) 대신 반드시 아래 클래스를 사용한다.
 *   2. 화면마다 `.어떤영역 img { width: … }` 같은 규칙이 있어 클래스가 밀리는 일이
 *      없도록 !important 를 붙였다. 본문 어디에 붙여도 같게 동작하게 하기 위한 것이므로
 *      이 파일에 규칙을 추가할 때도 같은 방식을 유지한다.
 * ========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. 가로 크기
 *    max-width 계열은 원본보다 크게 늘리지 않고, 영역을 넘칠 때만 줄인다.
 *    width 계열은 작은 이미지도 영역 폭에 맞춰 늘린다.
 *    세로는 항상 비율을 유지한다.
 * ------------------------------------------------------------------------ */
.nipa-max-width-100percent { max-width: 100% !important; width: auto !important; height: auto !important; }
.nipa-max-width-75percent  { max-width: 75%  !important; width: auto !important; height: auto !important; }
.nipa-max-width-50percent  { max-width: 50%  !important; width: auto !important; height: auto !important; }
.nipa-max-width-25percent  { max-width: 25%  !important; width: auto !important; height: auto !important; }

.nipa-width-100percent     { width: 100% !important; max-width: 100% !important; height: auto !important; }


/* ---------------------------------------------------------------------------
 * 2. 배치 (이미지 · 표 등)
 * ------------------------------------------------------------------------ */
.nipa-align-center { display: block !important; margin-left: auto !important; margin-right: auto !important; }
.nipa-align-left   { float: left  !important; margin: 0 15px 10px 0 !important; }
.nipa-align-right  { float: right !important; margin: 0 0 10px 15px !important; }
.nipa-clear        { clear: both !important; }


/* ---------------------------------------------------------------------------
 * 3. 글 정렬
 * ------------------------------------------------------------------------ */
.nipa-text-left   { text-align: left !important; }
.nipa-text-center { text-align: center !important; }
.nipa-text-right  { text-align: right !important; }


/* ---------------------------------------------------------------------------
 * 4. 여백
 * ------------------------------------------------------------------------ */
.nipa-margin-top-10    { margin-top: 10px !important; }
.nipa-margin-top-20    { margin-top: 20px !important; }
.nipa-margin-top-30    { margin-top: 30px !important; }
.nipa-margin-bottom-10 { margin-bottom: 10px !important; }
.nipa-margin-bottom-20 { margin-bottom: 20px !important; }
.nipa-margin-bottom-30 { margin-bottom: 30px !important; }
.nipa-no-margin        { margin: 0 !important; }


/* ---------------------------------------------------------------------------
 * 5. 테두리 · 모양
 * ------------------------------------------------------------------------ */
.nipa-border    { border: 1px solid #ddd !important; }
.nipa-radius-5  { border-radius: 5px !important; }
.nipa-radius-10 { border-radius: 10px !important; }
.nipa-shadow    { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; }