/*
 * suneditor-viewer.css — 공지/팝업/이벤트 본문 "읽기 전용" 콘텐츠 스타일
 * --------------------------------------------------------------------------
 * 출처: suneditor v3.1.2 의 src/assets/suneditor-contents.css 를 User 표시용으로 적응.
 * 목적: BackOffice SunEditor 로 작성한 본문(단락스타일/리스트/구분선/표/인용/이미지정렬
 *       /figure 등 "클래스 기반" 요소)을 User 에서 에디터와 동일하게 보이도록.
 *
 * 적응 내역:
 *   ① @import 'design/index.css' 제거 (에디터 크롬 변수 묶음 불필요)
 *   ② 스코프 클래스 .sun-editor-editable → .se-viewer (읽기전용 의도, SunEditor JS 후킹 차단)
 *   ③ 기본 글자색/배경/폰트 = 스킨·다크모드 상속 (흰 배경/검은 글자 강제 안 함)
 *   ④ 사용되는 --se-* 변수는 아래에 "테마 중립값"으로 정의
 *   ⑤ 에디터 상호작용/편집 규칙 전부 제거 (user-modify/user-select/.on/.se-disabled/
 *      figcaption read-write/embed 로딩 스피너/에디터 앵커 아이콘/a4 문서모드/math)
 *   ⑥ 하단 STX 오버라이드 (글머리표 복원 · ST02 강제정렬/리스트 보정)
 *
 * 주의: 이 파일은 표시 전용이다. contenteditable·SunEditor JS 는 도입하지 않는다.
 *       컨테이너에 .se-viewer 클래스가 붙은 경우(=JS 가 블록 HTML 본문일 때 부여)에만 적용된다.
 */

/* ---- base : 색/배경/폰트는 스킨·다크모드 상속, 에디터 padding 없음 ---- */
.se-viewer {
	/* 테마 중립 변수 (.se-viewer 스코프 한정 — 전역 :root 오염 방지) */
	--se-edit-font-color: currentColor;
	--se-edit-background-color: transparent;
	--se-edit-font-pre: inherit;
	--se-edit-background-pre: rgba(127, 127, 127, 0.08);
	--se-edit-border-light: rgba(127, 127, 127, 0.25);
	--se-edit-font-quote: inherit;
	--se-edit-border-dark: rgba(127, 127, 127, 0.4);
	--se-edit-border-dark-n1: rgba(127, 127, 127, 0.3);
	--se-edit-border-dark-n2: rgba(127, 127, 127, 0.2);
	--se-edit-hr-color: rgba(127, 127, 127, 0.4);
	--se-edit-border-table: rgba(127, 127, 127, 0.4);

	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background-color: transparent;
	word-break: normal;
	word-wrap: break-word;
	margin: 0;
	line-height: 1.6;
}

.se-viewer * {
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}

/* component - figure */
.se-viewer .se-component > figure {
	direction: initial;
}
.se-viewer .se-component > figure > * {
	margin: 0;
}

/* position 기준 (동영상 비율박스 등이 의존) */
.se-viewer td,
.se-viewer th,
.se-viewer figure,
.se-viewer figcaption,
.se-viewer img,
.se-viewer iframe,
.se-viewer video,
.se-viewer audio {
	position: relative;
}

/* span */
.se-viewer span {
	display: inline;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}

/* a — 색은 본문색 상속 + 밑줄(테마 적응, 기존 동작 유지) */
.se-viewer a {
	color: inherit;
	text-decoration: underline;
	white-space: nowrap;
}
.se-viewer span[style~='color:'] a {
	color: inherit;
}

/* pre */
.se-viewer pre {
	display: block;
	padding: 8px;
	margin: 0 0 10px;
	font-family: monospace;
	color: var(--se-edit-font-pre);
	line-height: 1.45;
	background-color: var(--se-edit-background-pre);
	border: 1px solid var(--se-edit-border-light);
	border-radius: 2px;
	white-space: pre-wrap !important;
	word-wrap: break-word;
	overflow: visible;
}

/* ol, ul */
.se-viewer ol {
	list-style-position: outside;
	display: block;
	list-style-type: decimal;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}
.se-viewer ul {
	list-style-position: outside;
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}
.se-viewer li {
	display: list-item;
	text-align: -webkit-match-parent;
	margin-bottom: 5px;
}

/* nested list */
.se-viewer ol ol,
.se-viewer ol ul,
.se-viewer ul ol,
.se-viewer ul ul {
	margin: 0;
}
.se-viewer ol ol,
.se-viewer ul ol {
	list-style-type: lower-alpha;
}
.se-viewer ol ol ol,
.se-viewer ul ol ol,
.se-viewer ul ul ol {
	list-style-type: upper-roman;
}
.se-viewer ul ul,
.se-viewer ol ul {
	list-style-type: circle;
}
.se-viewer ul ul ul,
.se-viewer ol ul ul,
.se-viewer ol ol ul {
	list-style-type: square;
}

/* sub, sup */
.se-viewer sub,
.se-viewer sup {
	font-size: 75%;
	line-height: 0;
}
.se-viewer sub {
	vertical-align: sub;
}
.se-viewer sup {
	vertical-align: super;
}

/* p, div */
.se-viewer p {
	display: block;
	margin: 0 0 10px;
}
.se-viewer div {
	display: block;
	margin: 0;
	padding: 0;
}

/* blockquote */
.se-viewer blockquote {
	display: block;
	font-family: inherit;
	font-size: inherit;
	color: var(--se-edit-font-quote);
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	border-style: solid;
	border-width: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-color: var(--se-edit-border-dark);
	padding-left: 20px;
	padding-right: 5px;
	border-left-width: 5px;
	border-right-width: 0px;
}
.se-viewer blockquote blockquote {
	border-color: var(--se-edit-border-dark-n1);
}
.se-viewer blockquote blockquote blockquote {
	border-color: var(--se-edit-border-dark-n2);
}
.se-viewer blockquote blockquote blockquote blockquote {
	border-color: var(--se-edit-border-light);
}

/* h1 ~ h6 (에디터 em 크기 그대로) */
.se-viewer h1 {
	display: block;
	font-size: 2em;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-weight: bold;
}
.se-viewer h2 {
	display: block;
	font-size: 1.5em;
	margin-block-start: 0.83em;
	margin-block-end: 0.83em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-weight: bold;
}
.se-viewer h3 {
	display: block;
	font-size: 1.17em;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-weight: bold;
}
.se-viewer h4 {
	display: block;
	font-size: 1em;
	margin-block-start: 1.33em;
	margin-block-end: 1.33em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-weight: bold;
}
.se-viewer h5 {
	display: block;
	font-size: 0.83em;
	margin-block-start: 1.67em;
	margin-block-end: 1.67em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-weight: bold;
}
.se-viewer h6 {
	display: block;
	font-size: 0.67em;
	margin-block-start: 2.33em;
	margin-block-end: 2.33em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-weight: bold;
}

/* hr + 종류 */
.se-viewer hr {
	display: flex;
	border-width: 1px 0 0;
	border-color: var(--se-edit-hr-color);
	border-image: initial;
	height: 20px;
	margin-top: 20px;
	margin-bottom: 0;
}
.se-viewer hr.__se__solid {
	border-style: solid none none;
}
.se-viewer hr.__se__dotted {
	border-style: dotted none none;
}
.se-viewer hr.__se__dashed {
	border-style: dashed none none;
}

/* table (툴바엔 없지만 붙여넣기 대비) */
.se-viewer table {
	display: table;
	table-layout: auto !important;
	border-width: 1px;
	border-style: solid;
	border-color: var(--se-edit-border-table);
	width: 100%;
	max-width: 100%;
	margin: 0;
	background-color: var(--se-edit-background-color);
	border-spacing: 0;
	border-collapse: collapse;
}
.se-viewer table caption {
	caption-side: initial;
	text-align: unset;
	padding: 0.5em;
	margin: 0;
	background-color: var(--se-edit-background-pre);
	border: 1px solid var(--se-edit-border-table);
	outline: none;
}
.se-viewer table caption.se-table-caption-top {
	caption-side: top;
	border-bottom: 0;
}
.se-viewer table caption.se-table-caption-bottom {
	caption-side: bottom;
	border-top: 0;
}
.se-viewer table thead {
	border-bottom: 2px solid var(--se-edit-font-color);
}
.se-viewer table tr {
	position: relative;
	box-sizing: border-box;
}
/* 헤더 배경: 에디터 #f3f3f3 대신 중립 회색(다크에서 상속 글자색과 대비 확보) */
.se-viewer table th {
	background-color: rgba(127, 127, 127, 0.15);
}
.se-viewer table th,
.se-viewer table td {
	border-width: 1px;
	border-style: solid;
	border-color: var(--se-edit-border-table);
	padding: 0.4em;
	background-clip: padding-box;
	background-color: inherit;
	vertical-align: middle;
	min-width: 2em;
}
.se-viewer table.se-table-layout-fixed {
	table-layout: fixed !important;
}

/* component 래퍼 */
.se-viewer .se-component {
	display: flex;
	padding: 1px;
	margin: 0 0 10px;
	background-color: inherit;
}

/* float (이미지 정렬) */
.se-viewer .__se__float-left {
	float: left;
	margin-right: 4px;
}
.se-viewer .__se__float-right {
	float: right;
	margin-left: 4px;
}
.se-viewer .__se__float-center {
	float: center;
}
.se-viewer .__se__float-none {
	float: none;
}

/* image / video / iframe */
.se-viewer img,
.se-viewer iframe,
.se-viewer video,
.se-viewer audio {
	display: block;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	max-width: 100%;
	cursor: default;
}
.se-viewer .se-image-container,
.se-viewer .se-video-container {
	width: auto;
	height: auto;
	max-width: 100%;
}
.se-viewer figure {
	display: block;
	outline: none;
	min-width: 20px;
	padding: 0;
	margin: 0;
}
.se-viewer .se-component figure {
	padding: 0;
}
.se-viewer .se-flex-component {
	width: 100%;
	min-width: auto;
	max-width: 100%;
	margin: 0 0 10px;
}
.se-viewer figure.se-flex-component {
	width: max-content;
}
.se-viewer .se-inline-component {
	display: inline-block;
	width: auto;
	min-width: min-content;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.se-viewer figure.se-scroll-figure-x {
	overflow-x: auto;
	padding: 0 1px;
}
.se-viewer figure.se-scroll-figure-y {
	overflow-y: auto;
	padding: 1px 0;
}
.se-viewer figure.se-scroll-figure-xy {
	overflow-x: auto;
	overflow-y: auto;
	padding: 1px;
}
.se-viewer .__se__float-left figure,
.se-viewer .__se__float-right figure,
.se-viewer .__se__float-center figure {
	margin: auto !important;
}
.se-viewer figure figcaption {
	padding: 1em 0.5em;
	margin: 0;
	background-color: var(--se-edit-background-pre);
	outline: none;
}
.se-viewer figure figcaption p {
	line-height: 2;
	margin: 0;
}

/* video 비율박스 (figure 의 인라인 padding-bottom 으로 16:9 — sanitizer 가 보존) */
.se-viewer .se-video-container iframe,
.se-viewer .se-video-container video {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 100%;
	height: 100%;
}
.se-viewer .se-video-container figure {
	left: 0px;
	width: 100%;
	max-width: 100%;
}

/* audio */
.se-viewer audio {
	width: 300px;
	height: 54px;
}

/* ---------- Paragraph styles (단락 스타일) ---------- */
.se-viewer .__se__p-bordered {
	border-top: solid 1px #b1b1b1;
	border-bottom: solid 1px #b1b1b1;
	padding: 4px 0;
}
.se-viewer .__se__p-spaced {
	letter-spacing: 1px;
}
.se-viewer .__se__p-neon {
	font-weight: 200;
	font-style: italic;
	background: #000;
	color: #fff;
	padding: 6px 4px;
	border: 2px solid #fff;
	border-radius: 6px;
	text-transform: uppercase;
	animation: neonFlicker 1.5s infinite alternate;
}
@keyframes neonFlicker {
	0%,
	19%,
	21%,
	23%,
	25%,
	54%,
	56%,
	100% {
		text-shadow:
			-0.2rem -0.2rem 1rem #fff,
			0.2rem 0.2rem 1rem #fff,
			0 0 2px #f40,
			0 0 4px #f40,
			0 0 6px #f40,
			0 0 8px #f40,
			0 0 10px #f40;
		box-shadow:
			0 0 0.5px #fff,
			inset 0 0 0.5px #fff,
			0 0 2px #08f,
			inset 0 0 2px #08f,
			0 0 4px #08f,
			inset 0 0 4px #08f;
	}
	20%,
	24%,
	55% {
		text-shadow: none;
		box-shadow: none;
	}
}

/* ---------- Text styles (글자 스타일) ---------- */
.se-viewer .__se__t-shadow {
	text-shadow:
		-0.2rem -0.2rem 1rem #fff,
		0.2rem 0.2rem 1rem #fff,
		0 0 0.2rem #999,
		0 0 0.4rem #888,
		0 0 0.6rem #777,
		0 0 0.8rem #666,
		0 0 1rem #555;
}
.se-viewer .__se__t-code {
	font-family: monospace;
	color: #666;
	background-color: rgba(27, 31, 35, 0.05);
	border-radius: 6px;
	padding: 0.2em 0.4em;
}

/* ============================================================
   STX 뷰어 오버라이드 (스킨 reset/강제정렬 보정)
   ============================================================ */

/* 글머리표 복원: 전 스킨 basic.css 의 `ol,ul,li{list-style:none}` reset 이 li 에 직접
   적용돼, 업스트림(ul/ol 에만 타입 지정)만으론 마커가 죽는다. li 가 부모 ul/ol 의
   타입(중첩 포함)을 상속하도록 복원 — (0,1,1) 로 reset(0,0,1) 을 이김. */
.se-viewer li {
	list-style: inherit;
}

/* 강제/상속 가운데정렬을 좌측 기본으로 (에디터 기본 = 좌측).
   관리자 정렬 버튼 결과(인라인 style="text-align:...") 는 인라인이라 자연 우선.
   view-content 변형은 (0,3,1) 로 ST02 의 강제 center(최대 0,2,2) 를 이긴다. */
.view-table td.view-content.se-viewer,
.view-table td.view-content.se-viewer *,
.notice-popup-content.se-viewer,
.notice-popup-content.se-viewer *,
.row-popup-card-content.se-viewer,
.row-popup-card-content.se-viewer * {
	text-align: left;
}

/* ST02: 본문 td 의 리스트 inside/패딩0(board.css) 을 에디터와 동일하게 복원.
   물리 속성(padding-left)으로 명시해 ST02 의 padding-left:0 과 충돌 없이 이긴다. */
.view-table td.view-content.se-viewer ul,
.view-table td.view-content.se-viewer ol {
	list-style-position: outside;
	padding-left: 40px;
}

/* 공지/이벤트 상세 모바일 잘림 방지: 색 본문의 긴 unbreakable 토큰(=====·긴 URL 등)이
   table-layout:auto 인 .view-table 컬럼을 화면폭 밖으로 밀어 제목·내용이 잘리던 문제.
   overflow-wrap:anywhere 만 표 컬럼 min-content 를 줄여 auto 표를 화면폭에 맞춘다
   (word-break:break-word 는 컬럼 min-content 를 못 줄여 무력). suneditor-viewer.css 는
   스킨 board.css 뒤에 로드 → 공지·이벤트 상세 전 스킨 공통 적용(평문/데스크톱 무영향). */
.view-table td.view-content {
	overflow-wrap: anywhere;
}

/* 컨테이너 없이 들어온 embed(iframe) 16:9 폴백 (기존 동작 유지) */
.se-viewer > iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}