/*
 * page-ai-editor 본문 보기 CSS (게시글 보기·상품 설명·내용 관리 등 html_purifier 를 거친 본문)
 *
 * extend/page_ai_editor.extend.php 가 본문에 에디터 마크업(data-align, 할 일 목록, mark, YouTube, colgroup 표)이
 * 있을 때만 붙입니다. 에디터만 만드는 속성으로 고르므로 사이트의 다른 요소에는 걸리지 않고,
 * :not(.page-editor *) 로 에디터 화면 안(편집·미리 보기)은 건드리지 않습니다.
 * 문단 간격·목록 기호·제목 크기 같은 일반 본문 타이포는 테마의 본문 영역 스타일이 맡습니다(README 참고).
 */

/* 이미지 정렬: <img data-align="left|center|right" width height> — 에디터와 같은 블록 + auto 마진 */
img[data-align]:not(.page-editor *) {
  display: block;
  max-width: 100%;
  height: auto;
}
img[data-align="left"]:not(.page-editor *) { margin-left: 0; margin-right: auto; }
img[data-align="center"]:not(.page-editor *) { margin-left: auto; margin-right: auto; }
img[data-align="right"]:not(.page-editor *) { margin-left: auto; margin-right: 0; }
/* get_view_thumbnail() 이 원본보기 링크로 감싼 경우 */
a.view_image:has(> img[data-align]) { display: block; }

/* 할 일 목록: <ul data-type="taskList"><li data-checked="true|false"><div>…</div></li></ul>
   체크박스(label·input)는 html_purifier 가 지우므로 data-checked 로 상자를 그립니다. */
ul[data-type="taskList"]:not(.page-editor *) {
  list-style: none;
  padding-left: .25em;
}
ul[data-type="taskList"]:not(.page-editor *) > li {
  position: relative;
  list-style: none;
  padding-left: 1.75em;
}
ul[data-type="taskList"]:not(.page-editor *) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 1em;
  height: 1em;
  border: 1px solid rgba(37, 39, 45, .2);
  border-radius: .25rem;
  background: rgba(37, 39, 45, .06) no-repeat center / .75em .75em;
}
ul[data-type="taskList"]:not(.page-editor *) > li[data-checked="true"]::before {
  border-color: #25272d;
  background-color: #25272d;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
}
ul[data-type="taskList"]:not(.page-editor *) > li > label,
ul[data-type="taskList"]:not(.page-editor *) > li > span:empty { display: none; }
ul[data-type="taskList"]:not(.page-editor *) > li > div { min-width: 0; }
ul[data-type="taskList"]:not(.page-editor *) > li[data-checked="true"] > div > p {
  opacity: .5;
  text-decoration: line-through;
}

/* 형광펜: <mark data-color="var(--tt-color-highlight-…)"> — 에디터 라이트 테마 색 */
mark[data-color]:not(.page-editor *) { color: inherit; background-color: #fef9c3; }
mark[data-color="var(--tt-color-highlight-yellow)"]:not(.page-editor *) { background-color: #fef9c3; }
mark[data-color="var(--tt-color-highlight-green)"]:not(.page-editor *) { background-color: #dcfce7; }
mark[data-color="var(--tt-color-highlight-blue)"]:not(.page-editor *) { background-color: #e0f2fe; }
mark[data-color="var(--tt-color-highlight-purple)"]:not(.page-editor *) { background-color: #f3e8ff; }
mark[data-color="var(--tt-color-highlight-red)"]:not(.page-editor *) { background-color: #ffe4e6; }
mark[data-color="var(--tt-color-highlight-gray)"]:not(.page-editor *) { background-color: rgb(248, 248, 247); }
mark[data-color="var(--tt-color-highlight-brown)"]:not(.page-editor *) { background-color: rgb(244, 238, 238); }
mark[data-color="var(--tt-color-highlight-orange)"]:not(.page-editor *) { background-color: rgb(251, 236, 221); }
mark[data-color="var(--tt-color-highlight-pink)"]:not(.page-editor *) { background-color: rgb(252, 241, 246); }

/* YouTube: <div data-youtube-video><iframe …></iframe></div> — 폭에 맞춘 16:9 */
div[data-youtube-video]:not(.page-editor *) { margin: 1rem 0; }
div[data-youtube-video]:not(.page-editor *) iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
}

/* 표: 에디터 표는 늘 <colgroup> 을 붙여 냅니다 */
table:has(> colgroup):not(.page-editor *) {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: .5rem 0;
}
table:has(> colgroup):not(.page-editor *) td,
table:has(> colgroup):not(.page-editor *) th {
  border: 1px solid rgba(55, 53, 47, .16);
  padding: .25rem .375rem;
  vertical-align: top;
}
table:has(> colgroup):not(.page-editor *) th {
  background: rgba(55, 53, 47, .04);
  font-weight: 600;
  text-align: left;
}
table:has(> colgroup):not(.page-editor *) td > p,
table:has(> colgroup):not(.page-editor *) th > p { margin: 0; }