/*
 * Nuri Editor - Common View CSS
 * ---------------------------------------------------------
 * Editor.js로 작성된 본문이 실제 페이지에 출력될 때 사용하는
 * 공통 콘텐츠 스타일만 모아둔 파일입니다.
 *
 * 페이지 고유 UI(스토어 상품 영역, Support 검색/FAQ, Event 상단,
 * Summary 차트/통계, Resources 목록 등)는 이 파일에 포함하지 않습니다.
 *
 * 로드 순서:
 *   1. common_view_css.css
 *   2. 각 서비스의 기존 view CSS
 *
 * 서비스별 예외 스타일은 기존 CSS가 뒤에서 덮어쓰도록 유지합니다.
 * ---------------------------------------------------------
 */


/* =========================================================
   본문 제목 / 문단 / 목록
========================================================= */

.content_all_item > .plays {
width: 100%;
  height: 100%;
}

.content_all_item > .plays > iframe {
width: 100%;
}

.content_all_item > h1 {
font-size: 30px;
  line-height: 43px;
  font-weight: 900;
  color: #434343;
  display: block;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.content_all_item > h2 {
font-size: 24px;
  font-weight: 700;
  color: #434343;
  display: block;
  flex-direction: row;
  align-items: center;
  line-height: 35px;
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  word-break: break-all;
  padding-left: 18px;
}

.content_all_item > h2::before {
content: "";
  display: block;
  width: 5px;
  height: 100%;
  background: #434343;

  flex-shrink: 0;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.content_all_item > h3 {
font-size: 20px;
  font-weight: 700;
  color: #434343;
  display: block;
  flex-direction: row;
  align-items: center;
  line-height: 35px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.content_all_item > h4 {
font-size: 18px;
  font-weight: 700;
  color: #434343;
  display: block;
  flex-direction: row;
  align-items: center;
  line-height: 35px;
  margin-top: 30px;
  margin-bottom: 15px;
}

.content_all_item > h5 {
font-size: 15px;
  font-weight: 700;
  color: #434343;
  display: block;
  line-height: 27px;
  margin-top: 15px;
  margin-bottom: 15px;
  word-break: break-all;
}

.content_all_item > h6 {
width: 100%;
  border-top: 1px solid #eaeaea;
  padding-top: 15px;
  font-size: 14px;
  font-weight: 700;
  color: #434343;
  display: block;
  line-height: 26px;
  word-break: break-all;
}


/* =========================================================
   Ordered List - nested numbering (1 / 1.1 / 1.1.1)
   공개/미리보기 화면에서 Editor.js 중첩 ordered list 번호를
   계층형으로 표시하기 위한 공통 규칙입니다.
========================================================= */
.content_all_item ol {
  counter-reset: item;
  margin: 0 0 10px 0;
  padding-left: 0;
}

.content_all_item ol li {
  position: relative;
  margin-left: 40px;
  margin-bottom: 5px;
  color: #434343;
  word-break: break-all;
  font-size: 15px;
  font-weight: normal;
  line-height: 26px;
  list-style: none !important;
  counter-increment: item;
}

.content_all_item ol li::marker {
  content: "";
}

.content_all_item ol li::before {
  content: counters(item, ".") ". ";
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 8px;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.content_all_item ol li > ol {
  margin-top: 5px;
}

.content_all_item > ol > li {
margin-left: 40px;
  margin-bottom: 5px;
  color: #434343;
  word-break: break-all;
  font-size: 15px;
  font-weight: normal;
  line-height: 26px;
  list-style: none !important;
}

.content_all_item > p {
font-size: 15px;
  font-weight: normal;
  color: #434343;
  line-height: 28px;
  display: block;
  margin-bottom: 10px;
  word-break: break-all;
}

/* =========================================================
   Unordered List - nested bullet styles
   공개/미리보기 화면에서 Editor.js 중첩 unordered list 글머리를
   단계별(disc / circle / square)로 표시하기 위한 공통 규칙입니다.
========================================================= */
.content_all_item > ul > li {
margin-left: 40px;
  list-style: disc !important;
  margin-bottom: 5px;
  color: #434343;
  word-break: break-all;
  font-size: 15px;
  font-weight: normal;
  line-height: 26px;
}

.content_all_item ul ul > li,
.content_all_item ul ul ul > li,
.content_all_item ul ul ul ul > li,
.content_all_item ul ul ul ul ul > li {
  margin-left: 20px;
}

.content_all_item > ul > li {
  list-style: disc !important;
}

.content_all_item ul ul > li {
  list-style: circle !important;
}

.content_all_item ul ul ul > li {
  list-style: square !important;
}

.content_all_item ul ul ul ul > li {
  list-style: disc !important;
}

.content_all_item ul ul ul ul ul > li {
  list-style: circle !important;
}

.content_all_item > ul > li > h3 {
font-size: 20px;
  font-weight: 500;
  color: #434343;
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 35px;
  color: #434343;
}

.content_all_item > ul > li > p {
font-size: 15px;
  font-weight: normal;
  color: #434343;
  line-height: 28px;
  display: block;
  margin-bottom: 10px;
}

.content_all_item > ul > li > p > a:hover {
text-decoration: underline;
}

.content_all_item ul li.check-item {
list-style: none !important;
}

.content_all_item > ul > li:last-child {
margin-bottom: 15px;
}

/* =========================================================
   인라인 텍스트 스타일
========================================================= */

.content_all_item s {
  text-decoration: line-through;
}

/* =========================================================
   구분선
========================================================= */

.content_line_break {
margin: 0 auto;
  max-width: 400px;
  border: 1px solid #eaeaea;
  margin-top: 50px;
  margin-bottom: 50px;
}

.content_line_full_break {
margin: 0 auto;
  max-width: 100%;
  border: 1px solid #eaeaea;
  margin-top: 70px;
  margin-bottom: 70px;
}


/* =========================================================
   본문 이미지 옵션
   ---------------------------------------------------------
   공개 렌더러에서 이미지 블록에 아래 modifier 클래스를 붙이면
   Editor.js Image Tool 설정을 그대로 재현합니다.

   .nuri_image--with-border
   .nuri_image--with-background
   .nuri_image--stretched
========================================================= */
.nuri_image {
  width: 100%;
  margin: 0 0 30px;
}

.nuri_image__box {
  width: 100%;
  box-sizing: border-box;
}

.nuri_image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 800px;
  margin: 0 auto;
  object-fit: contain;
}

.nuri_image--with-border .nuri_image__box {
  border: 1px solid #e5e7eb;
}

.nuri_image--with-background .nuri_image__box {
  padding: 15px;
  background: #f5f5f5;
}

.nuri_image--with-background img {
  max-width: 60%;
}

.nuri_image--stretched img {
  width: 100%;
  max-width: 100%;
}

/* 배경 포함 + 가로로 채우기를 동시에 켠 경우 stretched를 우선 */
.nuri_image--with-background.nuri_image--stretched img {
  max-width: 100%;
}

/* =========================================================
   이미지 캡션
========================================================= */

.img_figure {
margin-top: -20px;
  text-align: center;
  margin-bottom: 30px;
  padding: 5px 10px 5px 10px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.img_figure_text {
font-size: 14px;
  font-weight: normal;
  color: #707070;
  background: #f3f3f3;
  padding: 10px 25px 10px 25px;
  border-radius: 10px;
  line-height: 24px;
  word-break: break-all;
}

/* =========================================================
   코드 블록
========================================================= */

.content_raw_box {
width: 100%;
  height: auto;
  overflow: auto;
  background: #f0f0f0;
  padding: 8px 10px 8px 10px;
  border: 1px solid #dedede;
  margin-bottom: 30px;
  word-break: break-all;
  font-size: 15px;
  font-weight: normal;
  color: #434343;
  line-height: 28px;
}

.content_raw_box > code {
font-size: 15px;
    font-weight: normal;
    color: #434343;
    line-height: 28px;
    display: block;
    word-break: break-all;
    font-family: "Pretendard", "맑은 고딕", "Malgun Gothic", 돋움, Dotum, Arial, "Apple Gothic", sans-serif;
}

/* =========================================================
   인용문
========================================================= */

.cdx-quote {
border-left: 4px solid #e5e7eb;
  background: #fafafa;
  border-radius: 8px;
  padding: 12px 16px;
}

.cdx-quote__caption {
margin-top: 6px;
  font-size: 15px;
  color: #6b7280;
}

.cdx-quote__text {
font-size: 15px;
  font-weight: normal;
  color: #434343;
  line-height: 28px;
  display: block;
  margin-bottom: 10px;
  word-break: break-all;
}

.cdx-quote__text:last-child {
margin-bottom: 0px;
}

/* =========================================================
   링크 카드
========================================================= */

.linktool {
display: flex;
  flex-direction: row-reverse;
  width: 100%;

  background: #fff;
  border: 1px solid rgba(201, 201, 204, .48);
  box-shadow: 0 1px 3px #0000001a;
  border-radius: 6px;

  text-decoration: none;
}

.linktool__body {
display: flex;
  flex-direction: column;
  padding: 25px;
  margin-right: auto;
}

.linktool__desc {
margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #434343;
}

.linktool__site {
display: block;
  font-size: 15px;
  line-height: 1em;
  color: #888 !important;
  border: 0 !important;
  padding: 0 !important;
}

.linktool__thumb {
margin-left: 30px;
  padding: 25px 25px 25px 0px;
}

.linktool__thumb img {
width: 80px !important;
  height: 80px !important;
  border-radius: 3px !important;
  border: none !important;
  flex-shrink: 0;
  object-fit: cover !important;
  display: flex;
  margin: 0 !important;
}

.linktool__title {
font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #434343;
}

/* =========================================================
   본문 정렬
========================================================= */

.resource_alignment_left {
text-align: left;
}

.resource_alignment_center {
text-align: center;
}

.resource_alignment_right {
text-align: right;
}

.resource_alignment_justify {
text-align: justify;
}

/* =========================================================
   테이블 보조 스타일
========================================================= */

.table_color_blue > tbody > tr > td {
background: #eef7ff !important;
}

.table_color_blue > thead > tr > th {
background: #d1e9ff !important;
}

.table_color_green > tbody > tr > td {
background: #f5fff6 !important;
}

.table_color_green > thead > tr > th {
background: #d5f1d5 !important;
}

.table_color_purple > tbody > tr > td {
background: #f6eeff !important;
}

.table_color_purple > thead > tr > th {
background: #e5d1ff !important;
}

.table_color_red > tbody > tr > td {
background: #ffeef0 !important;
}

.table_color_red > thead > tr > th {
background: #ffd1da !important;
}

.text_align_left > tbody > tr > td:nth-child(2) {
text-align: left;
}

/* =========================================================
   Warning 블록
========================================================= */

.content_warning {
margin: 30px 0;
    padding: 8px 0 8px 18px;
    border-left: 3px solid #d49a32;
}

.content_warning_title {
display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;

    color: #9b690f;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.content_warning_icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 0;
    line-height: 0;
    background: url("/img/resources_img/editor_warning_icon.svg") no-repeat center center;
    background-size: 18px 18px;
}

.content_warning_message {
color: #555;
    font-size: 15px;
    line-height: 1.8;
}