/* deaeditor-front.css — 앞화면 '페이지'(서브페이지)용. 페이지는 shadow 가 아니라 사이트에 바로 출력되므로
   .se-content 래퍼가 없다. 그래서 뷰어 CSS 의 .se-content 접두사를 떼어 se- 요소에 바로 먹게 한 판. (2026-11-07 사장)
   게시판·상품 글은 그대로 shadow + deaeditor-view.css 를 쓴다. */
/* deaeditor-view.css — DeaEditor 로 쓴 글을 보여 주는 쪽 스타일 (앞화면 쉐도우 돔 안 + 관리자 편집 캔버스 공용).
   2026-11-07 20002 의 board.css 뷰어 구획에서 떼어 옴. 링크 카드·첨부·수식은 뺐다. 색은 CSS 변수 대신 값으로. */

.se-component { margin: 0 0 20px; }
.se-component:last-child { margin-bottom: 0; }

.se-text-paragraph { margin: 0 0 4px; min-height: 1.8em; }
.se-list { margin: 4px 0 4px 1.2em; padding-left: 1em; }
ul.se-list, ul { list-style: disc; }
ol.se-list, ol { list-style: decimal; }
ul.se-list > li, ul > li { list-style: disc; }
ol.se-list > li, ol > li { list-style: decimal; }   /* 테마(skin.css) 가 li 에 직접 none 을 줘서 li 에도 명시 (2026-11-08 사장) */   /* 관리자·테마의 CSS 리셋이 점·번호를 지우는 것 방지 (2026-11-08 사장) */
.se-list .se-text-paragraph { margin: 0; }
.se-link, .se-text-paragraph a[href] { color: #0068c3; text-decoration: underline; }   /* 걸자마자 표시 (2026-11-08) */
.se-image-link { display: inline-block; line-height: 0; }

/* 인용 — layout 별 분기 */
.se-quote { margin: 0; padding: 0; }
.se-quotation .se-cite {
  display: block; margin-top: 10px;
  font-size: 14px; color: #9ca3af; font-style: normal;
}
/* 1. 따옴표 — 가운데, 위아래 큰 따옴표 */
.se-quotation .se-quote { position: relative; }
.se-quotation .se-quote p { overflow-wrap: anywhere; }
.se-l-default .se-quote { padding: 46px 0 46px; }
.se-l-default .se-quote::before,
.se-l-default .se-quote::after {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 700 40px/1 Georgia, "Times New Roman", serif; color: #c4c4c4;
}
.se-l-default .se-quote::before { content: "\201C"; top: 4px; }
.se-l-default .se-quote::after { content: "\201D"; bottom: -10px; }
.se-l-default .se-quote p {
  text-align: center !important;
  font-family: "Nanum Myeongjo", "나눔명조", "Noto Serif KR", serif; font-style: italic; font-size: 17px;
}

/* 2. 버티컬 라인 — 왼쪽 굵은 선 */
.se-l-quotation_line .se-quote { border-left: 5px solid #4b4b4b; padding: 2px 0 2px 16px; }

/* 3. 말풍선 — 가운데 상자 + 아래 꼬리 */
.se-l-quotation_bubble .se-quote,
.se-l-quotation_postit .se-quote,
.se-l-quotation_corner .se-quote {
  max-width: 460px; margin: 0 auto; padding: 34px 32px; box-sizing: border-box; background: #fff;
}
.se-l-quotation_bubble .se-quote p,
.se-l-quotation_postit .se-quote p,
.se-l-quotation_corner .se-quote p { text-align: center !important; }
.se-l-quotation_bubble .se-quote { border: 3px solid #e3e3e3; margin-bottom: 28px; }
.se-l-quotation_bubble .se-quote p { font-weight: 600; }
.se-l-quotation_bubble .se-quote::before,
.se-l-quotation_bubble .se-quote::after {
  content: ""; position: absolute; left: 128px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.se-l-quotation_bubble .se-quote::before { bottom: -29px; width: 38px; height: 29px; background: #e3e3e3; }
.se-l-quotation_bubble .se-quote::after { left: 131px; bottom: -23px; width: 30px; height: 26px; background: #fff; }

/* 4. 라인&따옴표 — 왼쪽 따옴표 + 아래 가는 선 */
.se-l-quotation_underline .se-quote { padding: 40px 0 28px; border-bottom: 1px solid #a5a5a5; }
.se-l-quotation_underline .se-quote::before {
  content: "\201C"; position: absolute; left: 0; top: 0;
  font: 700 40px/1 Georgia, "Times New Roman", serif; color: #9a9a9a;
}

/* 5. 포스트잇 — 상자 + 오른쪽 아래 접힌 귀 */
.se-l-quotation_postit .se-quote { border: 3px solid #d5d5d5; }
.se-l-quotation_postit .se-quote::before,
.se-l-quotation_postit .se-quote::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 38px; height: 38px;
}
.se-l-quotation_postit .se-quote::before { right: -4px; bottom: -4px; width: 40px; height: 40px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.se-l-quotation_postit .se-quote::after { background: #c4c4c4; clip-path: polygon(0 0, 100% 0, 0 100%); }

/* 6. 프레임 — 왼쪽 위·오른쪽 아래 꺾쇠 */
.se-l-quotation_corner .se-quote::before,
.se-l-quotation_corner .se-quote::after {
  content: ""; position: absolute; width: 28px; height: 28px; border: 0 solid #4b4b4b;
}
.se-l-quotation_corner .se-quote::before { left: 0; top: 0; border-top-width: 5px; border-left-width: 5px; }
.se-l-quotation_corner .se-quote::after { right: 0; bottom: 0; border-bottom-width: 5px; border-right-width: 5px; }

/* 구분선 — line1~line7 */
.se-horizontalLine { text-align: center; }
.se-horizontalLine hr { border: 0; margin: 12px auto; }
.se-horizontalLine.se-a-left { text-align: left; }
.se-horizontalLine.se-a-left hr { margin-left: 0; }
.se-horizontalLine.se-a-right { text-align: right; }
.se-horizontalLine.se-a-right hr { margin-right: 0; }   /* 구분선 정렬 (2026-11-08 사장) */
.se-l-line1 hr { border-top: 1px solid #c8c8c8; }
.se-l-line2 hr { border-top: 1px dashed #c8c8c8; }
.se-l-line3 hr { border-top: 1px dotted #c8c8c8; }
.se-l-line4 hr { border-top: 2px solid #333; width: 60px; }
.se-l-line5 hr { border-top: 1px solid #c8c8c8; width: 30%; }
.se-l-line6 hr { border-top: 4px double #c8c8c8; }
.se-l-line7 { color: #c8c8c8; font-size: 20px; letter-spacing: 8px; }
.se-l-line7 hr { display: none; }
.se-l-line7::after { content: "• • •"; }

/* 코드 */
.se-code pre {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  background: #f7f8f9; border: 1px solid #e5e7eb; border-radius: 8px;
}
.se-code code {
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #24292f; white-space: pre;
}
/* 소스코드 모양 — code1 밝은 테두리(기본) / code2 회색 / code3 어두운 */
.se-code.se-l-code2 pre { background: #eceef1; border-color: transparent; }
.se-code.se-l-code3 pre { background: #26282c; border-color: #26282c; }
.se-code.se-l-code3 pre, .se-code.se-l-code3 code { color: #e8e9eb; }   /* 어두운 바탕은 글자 흰색이 기본 — <code> 밖 글자까지 (2026-11-08 사장) */

/* 이미지 */
.se-image { text-align: center; }
/* 사진 정렬 — 컴포넌트 공통 속성 align (없으면 가운데) */
.se-image.se-a-left { text-align: left; }
.se-image.se-a-center { text-align: center; }
.se-image.se-a-right { text-align: right; }
.se-figure { margin: 0; }
/* 사진의 설명 칸은 사진 폭을 따라간다 — figure 를 사진 크기만큼만(inline-block). 네이버와 같게 (2026-11-08 사장) */
.se-image .se-figure { display: inline-table; max-width: 100%; vertical-align: top; }
.se-image .se-figure img { display: block; }
.se-image .se-figure .se-caption { display: table-caption; caption-side: bottom; }   /* 폭은 사진이 정하고 긴 설명은 그 안에서 줄바꿈 */
.se-image[class*="se-wrap-"] .se-figure { display: block; }
.se-image[class*="se-wrap-"] .se-figure .se-caption { display: block; width: auto; }   /* 글 감싸기에서는 설명 칸도 블록 — table-caption 이면 폭 0 으로 세로로 깨졌다 (2026-11-08 사장) */
.se-image .se-caption, .se-image .se-caption .se-text-paragraph { text-align: center; }   /* 설명은 사진 폭 안에서 가운데 (네이버와 같게) */
.se-image img {
  max-width: 100%; height: auto; border-radius: 6px; display: inline-block;
}
.se-f-small img { max-width: 50%; }
.se-caption {
  margin-top: 8px; font-size: 13px; color: #9ca3af;
}
.se-caption .se-text-paragraph { margin: 0; }

/* 사진 옆으로 글 흐르기 — wrappingParagraph (작은 사진 ⅓, 큰 사진 45%) */
.se-wrappingParagraph { display: flow-root; }
.se-wrappingParagraph > .se-component { margin-bottom: 0; }
/* 편집기에서는 컴포넌트가 position:relative 라 뒤 글 상자가 사진 위에 그려진다 —
   사진을 한 층 올려야 눌러서 선택할 수 있다 */
.se-image[class*="se-wrap-"] { text-align: left; position: relative; z-index: 1; }
.se-wrap-inner-left,
.se-wrap-inner-big-left { float: left; margin: 4px 32px 12px 0; }
.se-wrap-inner-right,
.se-wrap-inner-big-right { float: right; margin: 4px 0 12px 32px; }
.se-wrap-inner-left,
.se-wrap-inner-right { width: 33%; }
.se-wrap-inner-big-left,
.se-wrap-inner-big-right { width: 45%; }
.se-image[class*="se-wrap-"] img { display: block; width: 100%; height: auto; }
.se-image[class*="se-wrap-"] .se-caption { text-align: center; }
@media (max-width: 520px) {
  /* 좁은 화면에서는 글이 한두 글자씩 끊기므로 사진을 위에 둔다 */
  .se-image[class*="se-wrap-"] { float: none; width: auto; margin: 0 0 16px; }
}

/* 캡션·출처는 컴포넌트 레이아웃이 정렬을 정한다 */
.se-caption .se-text-paragraph,
.se-cite .se-text-paragraph { text-align: inherit; }

/* ---------- 표 (table / tableRow / tableCell) ---------- */

.se-table { margin-left: auto; margin-right: auto; }
.se-table-container { overflow-x: auto; }
.se-table-content {
  border-collapse: collapse;
  table-layout: fixed;   /* 열 폭은 colgroup 이 정한다 */
  font-size: 15px;
}

/* 표 정렬 — 원본의 tableAlign. width 가 100% 미만일 때만 눈에 띈다 */
.se-table.se-a-left .se-table-content { margin-left: 0; margin-right: auto; }
.se-table.se-a-center .se-table-content { margin-left: auto; margin-right: auto; }
.se-table.se-a-right .se-table-content { margin-left: auto; margin-right: 0; }
.se-cell {
  border: 1px solid #d8dbe0;
  padding: 8px 10px;
  vertical-align: top;
  word-break: break-word;
}
/* tr/td 의 인라인 height 는 최소 높이로 동작한다 — 내용이 많으면 그만큼 늘어난다 */
.se-cell .se-text-paragraph { margin: 0; min-height: 1.6em; line-height: 1.6; }
.se-cell .se-list { margin: 0 0 0 1.1em; padding-left: 0.8em; }
.se-cell img { max-width: 100%; height: auto; }

/* ---------- 표 스타일 프리셋 (table.layout) ----------
   이름(default, layout1~layout7 = 표1~표8)은 원본 i18n 의 tableStyle 에서
   가져왔습니다. 원본 스타일시트는 복원 번들에 없어서 생김새는 자체 구현입니다.
   셀에 직접 준 배경색·테두리는 인라인이라 여기보다 우선합니다. */

/* 표1 — 모든 칸에 선 (기본) */
.se-table.se-l-default .se-cell { border: 1px solid #d8dbe0; }

/* 표2 — 가로선만 */
.se-table.se-l-layout1 .se-cell {
  border: 0; border-bottom: 1px solid #e1e4e8;
}
.se-table.se-l-layout1 .se-tr:first-child .se-cell { border-top: 2px solid #33363b; }
.se-table.se-l-layout1 .se-tr:last-child .se-cell { border-bottom: 2px solid #33363b; }

/* 표3 — 머리글 진하게 */
.se-table.se-l-layout2 .se-cell { border: 1px solid #d8dbe0; }
.se-table.se-l-layout2 .se-tr:first-child .se-cell {
  background: #3c4149; border-color: #3c4149; color: #fff; font-weight: 600;
}

/* 표4 — 줄무늬 */
.se-table.se-l-layout3 .se-cell { border: 1px solid #e1e4e8; }
.se-table.se-l-layout3 .se-tr:nth-child(even) .se-cell { background: #f7f8f9; }
.se-table.se-l-layout3 .se-tr:first-child .se-cell {
  background: #eceef1; font-weight: 600;
}

/* 표5 — 머리글 아래만 */
.se-table.se-l-layout4 .se-cell { border: 0; }
.se-table.se-l-layout4 .se-tr:first-child .se-cell {
  border-bottom: 2px solid #33363b; font-weight: 600;
}

/* 표6 — 바깥쪽 강조 */
.se-table.se-l-layout5 .se-table-content { border: 2px solid #33363b; }
.se-table.se-l-layout5 .se-cell { border: 1px solid #e8eaed; }

/* 표7 — 머리글 연한 배경, 세로선 없음 */
.se-table.se-l-layout6 .se-cell {
  border: 0; border-bottom: 1px solid #e1e4e8;
}
.se-table.se-l-layout6 .se-tr:first-child .se-cell {
  background: #f1f3f5; border-bottom: 1px solid #ccd0d5; font-weight: 600;
}

/* 표8 — 굵은 격자 */
.se-table.se-l-layout7 .se-cell { border: 2px solid #33363b; }

/* ---------- 동영상 (oembed) ---------- */

.se-oembed { text-align: center; }
.se-oembed-frame {
  position: relative; width: 100%; padding-top: 56.25%;   /* 16:9 */
  background: #000; border-radius: 8px; overflow: hidden;
}
.se-oembed-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* 위·아래 첨자 — 에디터(.se-canvas)와 글 보기가 같은 모양이 되도록 */
sup,
sub { font-size: .7em; line-height: 0; }
sup { vertical-align: super; }
sub { vertical-align: sub; }

/* 사진 형식 — 옆트임: 본문 좌우 여백까지 꽉 차게 */
.se-image.se-f-wide { margin-left: -28px; margin-right: -28px; }
.se-image.se-f-wide img { display: block; width: 100%; height: auto; border-radius: 0; }
@media (max-width: 720px) {
  .se-image.se-f-wide { margin-left: -16px; margin-right: -16px; }
}

/* 가운데·오른쪽 정렬한 목록은 번호·글머리 기호가 글을 따라가게 (밖에 두면 왼쪽에 홀로 남는다) */
li[style*="text-align: right"], li[style*="text-align:right"],
li[style*="text-align: center"], li[style*="text-align:center"] {
  list-style-position: inside;
}

/* 감싸기 사진의 설명은 늘 사진 아래 가운데 (본문 글과 헷갈리지 않게) */
.se-image[class*="se-wrap-"] .se-caption p { text-align: center !important; }
{ display: flow-root; }

/* 동영상 크기 — 작게(가운데 절반쯤) / 문서 너비 / 옆트임(본문 여백까지) */
.se-oembed.se-f-small .se-figure { max-width: 56%; margin: 0 auto; }
.se-oembed .se-figure[style*="width"] { max-width: 100%; margin: 0 auto; }   /* 모서리를 끌어 바꾼 폭 (2026-11-09) */
.se-oembed.se-a-left .se-figure[style*="width"] { margin-left: 0; }
.se-oembed.se-a-right .se-figure[style*="width"] { margin-right: 0; }
.se-oembed.se-f-small.se-a-left .se-figure { margin-left: 0; }
.se-oembed.se-f-small.se-a-right .se-figure { margin-right: 0; }   /* 동영상 정렬 (2026-11-08 사장) */
.se-oembed.se-f-wide { margin-left: -28px; margin-right: -28px; }
.se-oembed.se-f-wide .se-oembed-frame { border-radius: 0; }
@media (max-width: 720px) {
  .se-oembed.se-f-wide { margin-left: -16px; margin-right: -16px; }
}

/* 원시 HTML 블록 — 서브페이지 레이아웃 등 에디터가 모르는 HTML 을 그대로 담는다 */
.se-raw { text-align: initial; }