/**
 * Lexical Content Styles
 *
 * 에디터에서 작성한 콘텐츠를 렌더링할 때 사용하는 스타일입니다.
 * .lexical-content 클래스를 콘텐츠 영역에 추가하면 에디터와 동일한 스타일이 적용됩니다.
 *
 * 사용법:
 * <div class="lexical-content">
 *   <?php echo $content; ?>
 * </div>
 *
 * 주의: WordPress에서 사용할 때는 fonts/fonts.css를 별도로 로드해야 합니다.
 * @import url('fonts/fonts.css'); 를 이 파일 최상단에 추가하세요.
 */

/* ==========================================================================
   Base Content Styles
   ========================================================================== */

.lexical-content {
  font-family: var(--theme-font-normal, 'S-CoreDream-3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--theme-font-size-body, 0.9375rem);
  color: var(--theme-color-text, #2D2D2D);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Paragraph
   ========================================================================== */

.lexical-content p,
.lexical-content .PlaygroundEditorTheme__paragraph {
  margin: 0;
  position: relative;
  font-size: var(--theme-font-size-body, 0.9375rem);
  font-family: var(--theme-font-normal, 'S-CoreDream-3', sans-serif);
  text-indent: 0.5em;
}

/* 표 셀 내부의 paragraph는 text-indent 제외 */
.lexical-content td p,
.lexical-content th p,
.lexical-content .PlaygroundEditorTheme__tableCell p,
.lexical-content .PlaygroundEditorTheme__tableCell .PlaygroundEditorTheme__paragraph {
  text-indent: 0;
}

.lexical-content p + p,
.lexical-content .PlaygroundEditorTheme__paragraph + .PlaygroundEditorTheme__paragraph {
  margin-top: 15px;
}

/* ==========================================================================
   Headings
   PlaygroundEditorTheme.css의 스타일 사용
   ========================================================================== */

.lexical-content h1:first-child,
.lexical-content h2:first-child,
.lexical-content h3:first-child,
.lexical-content h4:first-child,
.lexical-content h5:first-child,
.lexical-content h6:first-child {
  margin-top: 0;
}

/* ==========================================================================
   Text Formatting
   ========================================================================== */

.lexical-content strong,
.lexical-content b,
.lexical-content .PlaygroundEditorTheme__textBold {
  font-weight: bold;
}

.lexical-content em,
.lexical-content i:not([class]),
.lexical-content .PlaygroundEditorTheme__textItalic {
  font-style: italic;
}

.lexical-content u,
.lexical-content .PlaygroundEditorTheme__textUnderline {
  text-decoration: underline;
}

.lexical-content s,
.lexical-content del,
.lexical-content .PlaygroundEditorTheme__textStrikethrough {
  text-decoration: line-through;
}

.lexical-content .PlaygroundEditorTheme__textUnderlineStrikethrough {
  text-decoration: underline line-through;
}

.lexical-content sub,
.lexical-content .PlaygroundEditorTheme__textSubscript {
  font-size: 0.8em;
  vertical-align: sub !important;
}

.lexical-content sup,
.lexical-content .PlaygroundEditorTheme__textSuperscript {
  font-size: 0.8em;
  vertical-align: super;
}

.lexical-content .PlaygroundEditorTheme__textLowercase {
  text-transform: lowercase;
}

.lexical-content .PlaygroundEditorTheme__textUppercase {
  text-transform: uppercase;
}

.lexical-content .PlaygroundEditorTheme__textCapitalize {
  text-transform: capitalize;
}

/* ==========================================================================
   Highlight & Mark
   ========================================================================== */

.lexical-content mark,
.lexical-content .PlaygroundEditorTheme__textHighlight {
  background: #40809011;
  border-bottom: 2px solid #40809055;
}

.lexical-content .PlaygroundEditorTheme__mark {
  background: rgba(255, 212, 0, 0.14);
  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
  padding-bottom: 2px;
}

/* ==========================================================================
   Links
   ========================================================================== */

.lexical-content a,
.lexical-content .PlaygroundEditorTheme__link {
  color: var(--theme-color-primary, rgb(33, 111, 219));
  text-decoration: none;
}

.lexical-content a:hover,
.lexical-content .PlaygroundEditorTheme__link:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Blockquote
   ========================================================================== */

.lexical-content blockquote,
.lexical-content .PlaygroundEditorTheme__quote {
  margin: 1.25em 0 1.25em 20px;
  font-size: var(--theme-font-size-body, 0.9375rem);
  color: rgb(101, 103, 107);
  border-left-color: var(--theme-card-border, rgb(206, 208, 212));
  border-left-width: 4px;
  border-left-style: solid;
  padding-left: 16px;
}

/* ==========================================================================
   Inline Code
   ========================================================================== */

.lexical-content code:not(pre code),
.lexical-content .PlaygroundEditorTheme__textCode {
  background-color: rgb(240, 242, 245);
  padding: 1px 0.25rem;
  font-family: Menlo, Consolas, Monaco, monospace;
  font-size: 94%;
}

/* ==========================================================================
   Code Block
   ========================================================================== */

.lexical-content pre,
.lexical-content .PlaygroundEditorTheme__code {
  background-color: rgb(240, 242, 245);
  font-family: Menlo, Consolas, Monaco, monospace;
  display: block;
  padding: 8px 8px 8px 52px;
  line-height: 1.53;
  font-size: 13px;
  margin: 1.25em 0;
  overflow-x: auto;
  position: relative;
  tab-size: 2;
}

.lexical-content pre[data-gutter]::before,
.lexical-content .PlaygroundEditorTheme__code::before {
  content: attr(data-gutter);
  position: absolute;
  background-color: #eee;
  left: 0;
  top: 0;
  border-right: 1px solid #ccc;
  padding: 8px;
  color: #777;
  white-space: pre-wrap;
  text-align: right;
  min-width: 25px;
}

/* Code Syntax Highlighting */
.lexical-content .PlaygroundEditorTheme__tokenComment { color: slategray; }
.lexical-content .PlaygroundEditorTheme__tokenPunctuation { color: #999; }
.lexical-content .PlaygroundEditorTheme__tokenProperty { color: #905; }
.lexical-content .PlaygroundEditorTheme__tokenSelector { color: #690; }
.lexical-content .PlaygroundEditorTheme__tokenOperator { color: #9a6e3a; }
.lexical-content .PlaygroundEditorTheme__tokenAttr { color: #07a; }
.lexical-content .PlaygroundEditorTheme__tokenVariable { color: #e90; }
.lexical-content .PlaygroundEditorTheme__tokenFunction { color: #dd4a68; }

/* ==========================================================================
   Lists
   ========================================================================== */

.lexical-content ul,
.lexical-content .PlaygroundEditorTheme__ul {
  padding: 0;
  margin: 1em 0;
  list-style-position: outside;
  font-size: var(--theme-font-size-body, 0.9375rem);
  font-family: var(--theme-font-normal, 'S-CoreDream-3', sans-serif);
}

.lexical-content ol {
  padding: 0;
  margin: 1em 0;
  list-style-position: outside;
}

.lexical-content .PlaygroundEditorTheme__ol1 {
  padding: 0;
  margin: 1em 0;
  list-style-position: outside;
}

.lexical-content .PlaygroundEditorTheme__ol2 {
  padding: 0;
  margin: 0;
  list-style-type: upper-alpha;
  list-style-position: outside;
}

.lexical-content .PlaygroundEditorTheme__ol3 {
  padding: 0;
  margin: 0;
  list-style-type: lower-alpha;
  list-style-position: outside;
}

.lexical-content .PlaygroundEditorTheme__ol4 {
  padding: 0;
  margin: 0;
  list-style-type: upper-roman;
  list-style-position: outside;
}

.lexical-content .PlaygroundEditorTheme__ol5 {
  padding: 0;
  margin: 0;
  list-style-type: lower-roman;
  list-style-position: outside;
}

.lexical-content li,
.lexical-content .PlaygroundEditorTheme__listItem {
  margin: 0 32px;
  font-family: var(--listitem-marker-font-family, var(--theme-font-normal, 'S-CoreDream-3', sans-serif));
  font-size: var(--listitem-marker-font-size, var(--theme-font-size-body, 0.9375rem));
}

.lexical-content li + li,
.lexical-content .PlaygroundEditorTheme__listItem + .PlaygroundEditorTheme__listItem {
  margin-top: 8px;
}

.lexical-content .PlaygroundEditorTheme__nestedListItem {
  list-style-type: none;
}

/* Checkbox List */
.lexical-content .PlaygroundEditorTheme__listItemChecked,
.lexical-content .PlaygroundEditorTheme__listItemUnchecked {
  position: relative;
  margin-left: 0.5em;
  margin-right: 0.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  list-style-type: none;
  outline: none;
  display: block;
  min-height: 1.5em;
}

.lexical-content .PlaygroundEditorTheme__listItemUnchecked::before,
.lexical-content .PlaygroundEditorTheme__listItemChecked::before {
  content: '\200B';
  width: 0.9em;
  height: 0.9em;
  top: 50%;
  left: 0;
  display: block;
  background-size: cover;
  position: absolute;
  transform: translateY(-50%);
}

.lexical-content .PlaygroundEditorTheme__listItemChecked {
  text-decoration: line-through;
}

.lexical-content .PlaygroundEditorTheme__listItemUnchecked::before {
  border: 1px solid #999;
  border-radius: 2px;
}

.lexical-content .PlaygroundEditorTheme__listItemChecked::before {
  border: 1px solid rgb(61, 135, 245);
  border-radius: 2px;
  background-color: #3d87f5;
}

.lexical-content .PlaygroundEditorTheme__listItemChecked::after {
  content: '';
  border-color: #fff;
  border-style: solid;
  position: absolute;
  display: block;
  top: 45%;
  width: 0.2em;
  left: 0.35em;
  height: 0.4em;
  transform: translateY(-50%) rotate(45deg);
  border-width: 0 0.1em 0.1em 0;
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

.lexical-content hr,
.lexical-content .PlaygroundEditorTheme__hr {
  padding: 2px 2px;
  border: none;
  margin: 1em 0;
}

.lexical-content hr::after,
.lexical-content .PlaygroundEditorTheme__hr::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #ccc;
  line-height: 1px;
}

/* ==========================================================================
   Table
   ========================================================================== */

/* 표 가로 스크롤을 위한 wrapper */
.lexical-content .PlaygroundEditorTheme__tableScrollableWrapper,
.lexical-content .table-wrapper {
  overflow-x: auto;
  margin: 1.25em 0;
}

.lexical-content .PlaygroundEditorTheme__tableScrollableWrapper > table,
.lexical-content .table-wrapper > table {
  margin: 0;
}

.lexical-content table,
.lexical-content .PlaygroundEditorTheme__table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: fit-content;
  max-width: 100%;
  margin: 1.25em 0;
  display: block;
  overflow-x: auto;
}

.lexical-content .PlaygroundEditorTheme__tableAlignmentCenter {
  margin-left: auto;
  margin-right: auto;
}

.lexical-content .PlaygroundEditorTheme__tableAlignmentRight {
  margin-left: auto;
}

.lexical-content th,
.lexical-content td,
.lexical-content .PlaygroundEditorTheme__tableCell {
  border: 1px solid var(--theme-card-border, #bbb) !important;
  width: 75px;
  vertical-align: top;
  text-align: start;
  padding: 6px 8px;
  position: relative;
  outline: none;
  background-color: #fff;
}

.lexical-content th,
.lexical-content .PlaygroundEditorTheme__tableCellHeader {
  background-color: var(--theme-post-hover-bg, #f2f3f5);
  text-align: start;
}

.lexical-content .PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
  background-color: #f2f5fb;
}

/* ==========================================================================
   Images
   ========================================================================== */

.lexical-content span.editor-image {
  display: inline-block;
  position: relative;
  user-select: none;
}

.lexical-content .editor-image img {
  max-width: 100%;
  cursor: default;
}

/* ==========================================================================
   Callout Block (Notion-style)
   에디터: .Callout__container 클래스 사용
   읽기 모드: aside[data-emoji] HTML 태그로 렌더링됨
   ========================================================================== */

.lexical-content .Callout__container,
.lexical-content aside[data-emoji] {
  padding: 1rem 1rem 1rem 2.75rem;
  margin: 1.25em 0;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--theme-card-border);
  border-radius: 0.375rem;
  position: relative;
}

/* 에디터용 이모지 버튼 */
.lexical-content .Callout__emoji-button {
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  font-size: 1.25em;
  line-height: 1.5;
  padding: 0.125rem 0.25rem;
  border: none;
  background: transparent;
  border-radius: 0.25rem;
  user-select: none;
}

/* 읽기 모드용 이모지 (data-emoji 속성에서 ::before로 표시) */
/* .callout-icon이 있으면 아이콘을 사용하므로 ::before는 숨김 */
.lexical-content aside[data-emoji]:has(.callout-icon)::before {
  display: none;
}
.lexical-content aside[data-emoji]:not(:has(.callout-icon))::before {
  content: attr(data-emoji);
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  font-size: 1.25em;
  line-height: 1.5;
}

/* 읽기 모드용 콜아웃 아이콘 (Font Awesome) */
.lexical-content aside[data-emoji] .callout-icon {
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  font-size: 1.25em;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lexical-content aside[data-emoji] .callout-icon i.fa-solid {
  color: var(--theme-main-color, #5b5a99);
  font-size: 1.1em;
}

/* 읽기 모드: 이모지 없을 때 패딩 조정 */
.lexical-content aside[data-emoji=""] {
  padding: 1rem;
}
.lexical-content aside[data-emoji=""]::before {
  display: none;
}

.lexical-content .Callout__container > *:not(.Callout__emoji-button):first-of-type,
.lexical-content aside[data-emoji] > *:first-child {
  margin-top: 0;
}

.lexical-content .Callout__container > *:not(.Callout__emoji-button):last-child,
.lexical-content aside[data-emoji] > *:last-child {
  margin-bottom: 0;
}

.lexical-content .Callout__container p,
.lexical-content aside[data-emoji] p {
  margin: 0;
}

/* 콜아웃 내부 리스트 마진 조정 */
.lexical-content .Callout__container ul,
.lexical-content .Callout__container ol,
.lexical-content aside[data-emoji] ul,
.lexical-content aside[data-emoji] ol {
  margin: 0.5em 0;
}

.lexical-content .Callout__container > ul:first-child,
.lexical-content .Callout__container > ol:first-child,
.lexical-content aside[data-emoji] > ul:first-child,
.lexical-content aside[data-emoji] > ol:first-child {
  margin-top: 0;
}

.lexical-content .Callout__container > ul:last-child,
.lexical-content .Callout__container > ol:last-child,
.lexical-content aside[data-emoji] > ul:last-child,
.lexical-content aside[data-emoji] > ol:last-child {
  margin-bottom: 0;
}

/* Callout 내 표 상단 마진 */
.lexical-content .Callout__container table,
.lexical-content .Callout__container .PlaygroundEditorTheme__table,
.lexical-content .Callout__container .PlaygroundEditorTheme__tableScrollableWrapper,
.lexical-content aside[data-emoji] table,
.lexical-content aside[data-emoji] .PlaygroundEditorTheme__table,
.lexical-content aside[data-emoji] .PlaygroundEditorTheme__tableScrollableWrapper {
  margin-top: 15px;
}

/* ==========================================================================
   Collapsible Block
   ========================================================================== */

.lexical-content .Collapsible__container,
.lexical-content details {
  background: #fcfcfc;
  border: 1px solid var(--theme-card-border, #eee);
  border-radius: 10px;
  margin: 1.25em 0;
}

.lexical-content .Collapsible__title,
.lexical-content summary {
  cursor: pointer;
  padding: 5px 5px 5px 20px;
  position: relative;
  font-weight: bold;
  list-style: none;
  outline: none;
}

.lexical-content .Collapsible__title::marker,
.lexical-content .Collapsible__title::-webkit-details-marker,
.lexical-content summary::marker,
.lexical-content summary::-webkit-details-marker {
  display: none;
}

.lexical-content .Collapsible__title::before,
.lexical-content summary::before {
  border-style: solid;
  border-color: transparent;
  border-width: 4px 6px 4px 6px;
  border-left-color: #000;
  display: block;
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
}

.lexical-content .Collapsible__container[open] > .Collapsible__title::before,
.lexical-content details[open] > summary::before {
  border-color: transparent;
  border-width: 6px 4px 0 4px;
  border-top-color: #000;
}

.lexical-content .Collapsible__content {
  padding: 0 5px 5px 20px;
}

/* ==========================================================================
   Layout (Columns)
   ========================================================================== */

.lexical-content .PlaygroundEditorTheme__layoutContainer {
  display: grid;
  gap: 10px;
  margin: 1.25em 0;
}

.lexical-content .PlaygroundEditorTheme__layoutItem {
  border: 1px dashed #ddd;
  padding: 8px 16px;
  min-width: 0;
  max-width: 100%;
}

/* ==========================================================================
   Indent
   ========================================================================== */

.lexical-content .PlaygroundEditorTheme__indent {
  --lexical-indent-base-value: 10px;
}

/* ==========================================================================
   Embeds (YouTube, etc.)
   ========================================================================== */

.lexical-content .PlaygroundEditorTheme__embedBlock {
  user-select: none;
}

/* ==========================================================================
   Equation (KaTeX)
   ========================================================================== */

.lexical-content .editor-equation {
  cursor: default;
  user-select: none;
}

/* ==========================================================================
   Page Break
   ========================================================================== */

.lexical-content .page-break {
  page-break-after: always;
}

@media print {
  .lexical-content .page-break {
    break-after: page;
  }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .lexical-content .Callout__container,
  .lexical-content aside[data-emoji] {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .lexical-content .Collapsible__container,
  .lexical-content details {
    background: #2a2a2a;
    border-color: #444;
  }

  .lexical-content .Collapsible__title::before,
  .lexical-content summary::before {
    border-left-color: #fff;
  }

  .lexical-content .Collapsible__container[open] > .Collapsible__title::before,
  .lexical-content details[open] > summary::before {
    border-top-color: #fff;
  }
}

/* ==========================================================================
   Page Break
   ========================================================================== */

.lexical-content figure[type='page-break'] {
  position: relative;
  display: block;
  width: 100%;
  overflow: unset;
  margin: 2em 0;
  padding: 0;
  text-indent: 0;

  border: none;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  background-color: #f5f5f5;
}

.lexical-content figure[type='page-break']::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: block;
  padding: 2px 10px;
  border: 1px solid #ccc;
  background-color: #fff;

  content: '페이지 구분';
  font-size: 12px;
  color: #666;
  font-weight: 500;
}