/*
 * 글 모양 — 편집기 본문과 사이트 글 화면이 같이 쓴다.
 * 사이트 글 화면: 본문을 감싸는 요소에 class="me-content" 를 붙이고 이 파일(+ fonts.css)을 읽는다.
 * 색·글꼴·폭은 아래 변수로 사이트마다 맞춘다.
 */
@import url('./font-sizes.css?v=1.2.5');
@import url('./collage.css?v=1.2.5');

:root {
  --me-font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', sans-serif;
  --me-font-size: 15px;
  --me-line-height: 1.8;
  --me-color-text: #222;
  --me-color-muted: #6b7280;
  --me-color-border: #e5e7eb;
  --me-color-accent: #0071b9;
  --me-color-link: #2563eb;
  --me-content-width: 720px;
}

.me-content {
  font-family: var(--me-font-family);
  font-size: var(--me-font-size);
  line-height: var(--me-line-height);
  color: var(--me-color-text);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.me-content > * + * {
  margin-top: 0.9em;
}
.me-content p {
  margin: 0;
  min-height: 1em;
}
.me-content > p + p {
  margin-top: 0;
}
/* 빈 줄(<p></p>) — 편집 화면처럼 한 줄 높이로 (스마트에디터 방식: 문단 간격 대신 빈 줄로 띄움).
   편집 화면의 빈 줄은 커서용 줄바꿈이 들어 있어 :empty 가 아니므로 겹치지 않는다 */
.me-content p:empty::before {
  content: '\200b';
}
.me-content h2,
.me-content h3,
.me-content h4 {
  line-height: 1.45;
  margin: 1.6em 0 0.6em;
  font-weight: 700;
}
.me-content h2 {
  font-size: 1.6em;
}
.me-content h3 {
  font-size: 1.3em;
}
.me-content h4 {
  font-size: 1.1em;
}
.me-content a {
  color: var(--me-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.me-content ul,
.me-content ol {
  padding-left: 1.6em;
  margin: 0.6em 0;
}
/* 사이트 CSS 초기화(Tailwind preflight 등)가 글머리표를 지워도 보이게 */
.me-content ul {
  list-style: disc;
}
.me-content ol {
  list-style: decimal;
}
.me-content ul ul {
  list-style: circle;
}
.me-content li > p {
  margin: 0;
}

/* 정렬 */
.me-content .me-align-center {
  text-align: center;
}
.me-content .me-align-right {
  text-align: right;
}
.me-content .me-align-justify {
  text-align: justify;
}

/* ── 인용구 6가지 ─────────────────────────────── */
.me-quote {
  /* 인용구 색(me-quote-c-*)이 없으면 아래 var() 의 기본값 — 바깥 인용구의 색이 안쪽으로 물려지지 않게 비운다 */
  --me-q-line: initial;
  --me-q-bg: initial;
  /* 말풍선·포스트잇·프레임 폭 — PC 는 본문의 2/3 (네이버처럼), 좁은 화면은 320px 또는 꽉 차게 */
  --me-q-box: max(66.667%, min(100%, 320px));
  margin: 1.8em auto;
  padding: 0;
  font-size: 1.07em;
}
.me-quote > p {
  margin: 0;
}
/* 인용구·표 칸 안의 첫·끝 소제목 — 소제목 위아래 간격이 상자 안에 빈 공간으로 남지 않게 */
.me-quote > :first-child,
.me-table td > :first-child,
.me-table th > :first-child {
  margin-top: 0;
}
.me-quote > :last-child,
.me-table td > :last-child,
.me-table th > :last-child {
  margin-bottom: 0;
}
.me-quote--quote {
  position: relative;
  max-width: 85%;
  padding: 2.4em 1em;
  text-align: center;
}
.me-quote--quote::before,
.me-quote--quote::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 2.6em;
  line-height: 1;
  color: var(--me-q-line, #333);
}
.me-quote--quote::before {
  content: '\201C';
  top: 0;
}
.me-quote--quote::after {
  content: '\201D';
  bottom: -0.25em;
}
.me-quote--line {
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--me-q-line, #333);
}
.me-quote--bubble {
  position: relative;
  max-width: var(--me-q-box);
  padding: 1.2em 1.4em;
  border: 2px solid var(--me-q-line, #8a8a8a);
  background: var(--me-q-bg, transparent);
  text-align: center;
}
.me-quote--bubble::after {
  content: '';
  position: absolute;
  left: 2.2em;
  bottom: -11px;
  width: 18px;
  height: 18px;
  background: var(--me-q-bg, #fff);
  border-right: 2px solid var(--me-q-line, #8a8a8a);
  border-bottom: 2px solid var(--me-q-line, #8a8a8a);
  transform: rotate(45deg);
}
.me-quote--linequote {
  /* 네이버처럼 왼쪽에 붙고 밑줄은 본문 폭 전체 */
  position: relative;
  padding: 2.2em 0 0.9em;
  border-bottom: 2px solid var(--me-q-line, #333);
  text-align: left;
}
.me-quote--linequote::before {
  content: '\201C';
  position: absolute;
  top: 0;
  left: 0;
  font-family: Georgia, serif;
  font-size: 2.4em;
  line-height: 1;
  color: var(--me-q-line, inherit);
}
.me-quote--postit {
  position: relative;
  max-width: var(--me-q-box);
  padding: 1.2em 1.4em;
  border: 2px solid var(--me-q-line, #8a8a8a);
  background: var(--me-q-bg, #fff);
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.me-quote--postit::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--me-q-line, #bdbdbd) 50%, transparent 50%);
}
.me-quote--frame {
  position: relative;
  max-width: var(--me-q-box);
  padding: 1.4em 1.6em;
  background: var(--me-q-bg, transparent);
  text-align: center;
}
.me-quote--frame::before,
.me-quote--frame::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--me-q-line, #333);
  border-style: solid;
}
.me-quote--frame::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}
.me-quote--frame::after {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

/* 인용구 색 (rules.ts QUOTE_COLORS 와 같은 값) */
.me-quote.me-quote-c-pink {
  --me-q-line: #e64980;
  --me-q-bg: #fff0f6;
}
.me-quote.me-quote-c-red {
  --me-q-line: #e03131;
  --me-q-bg: #fff5f5;
}
.me-quote.me-quote-c-orange {
  --me-q-line: #f76707;
  --me-q-bg: #fff4e6;
}
.me-quote.me-quote-c-yellow {
  --me-q-line: #f0b400;
  --me-q-bg: #fff9db;
}
.me-quote.me-quote-c-green {
  --me-q-line: #2f9e44;
  --me-q-bg: #ebfbee;
}
.me-quote.me-quote-c-blue {
  --me-q-line: #1c7ed6;
  --me-q-bg: #e7f5ff;
}
.me-quote.me-quote-c-navy {
  --me-q-line: #1e3a8a;
  --me-q-bg: #edf2ff;
}
.me-quote.me-quote-c-purple {
  --me-q-line: #7048e8;
  --me-q-bg: #f3f0ff;
}
.me-quote.me-quote-c-gray {
  --me-q-line: #868e96;
  --me-q-bg: #f1f3f5;
}

/* ── 사진 콜라주 (2차 요청 6) — 숫자 클래스는 collage.css ── */
.me-collage {
  display: flex;
  flex-wrap: wrap;
  margin: 1.6em 0;
}
.me-collage-item {
  position: relative;
  display: block;
  height: 0;
  overflow: hidden;
}
.me-collage-item img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  right: 2px;
  width: calc(100% - 4px);
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  /* 보이는 위치 기본은 가운데(브라우저 기본값) — me-op-x-y 가 바꾼다 (collage.css) */
}
.me-collage-item:first-of-type img {
  left: 0;
  width: calc(100% - 2px);
}
.me-collage-item:last-of-type img {
  right: 0;
  left: auto;
  width: calc(100% - 2px);
}
.me-collage > figcaption {
  flex: 0 0 100%;
  margin-top: 0.6em;
  color: #777;
  font-size: 0.9em;
  text-align: center;
}

/* ── 구분선 ─────────────────────────────────── */
.me-hr {
  margin: 2.2em auto;
  border: 0;
  height: 0;
  border-top: 1px solid #c8c8c8;
}
.me-hr--bold {
  border-top: 3px solid #333;
}
.me-hr--dashed {
  border-top: 1px dashed #999;
}
.me-hr--short {
  width: 60px;
  border-top: 2px solid #333;
}
.me-hr--dots {
  border: 0;
  height: auto;
  text-align: center;
  line-height: 1;
}
.me-hr--dots::before {
  content: '·  ·  ·';
  white-space: pre;
  font-size: 1.6em;
  letter-spacing: 0.2em;
  color: #555;
}
/* 꺾인 선 · 마름모 선 — 가운데를 비운 선 두 토막 + 가운데 모양 (바탕색과 상관없이) */
.me-hr--notch,
.me-hr--diamond {
  position: relative;
  height: 1px;
  border: 0;
  overflow: visible;
  background:
    linear-gradient(#c8c8c8, #c8c8c8) left center / calc(50% - 8px) 1px no-repeat,
    linear-gradient(#c8c8c8, #c8c8c8) right center / calc(50% - 8px) 1px no-repeat;
}
.me-hr--notch::after,
.me-hr--diamond::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  transform: translateX(-50%) rotate(45deg);
}
.me-hr--notch::after {
  /* 선이 가운데에서 아래로 꺾여 내려갔다 올라온다 */
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}
.me-hr--diamond::after {
  border: 1px solid #999;
}
.me-hr--dotline {
  width: 34px;
  border-top: 3px dotted #555;
}
.me-hr--slash {
  width: 22px;
  height: 22px;
  border: 0;
  /* 「/」 방향 (왼쪽 아래 → 오른쪽 위) */
  background: linear-gradient(to bottom right, transparent calc(50% - 0.6px), #555 50%, transparent calc(50% + 0.6px));
}
.me-hr--vertical {
  width: 1px;
  height: 26px;
  border: 0;
  background: #555;
}

/* ── 사진·동영상 ───────────────────────────────── */
.me-figure {
  margin: 1.6em auto;
  text-align: center;
}
.me-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.me-figure--wide img {
  width: 100%;
}
.me-figure--small {
  max-width: 50%;
}
.me-figure figcaption {
  margin-top: 0.5em;
  font-size: 0.87em;
  color: var(--me-color-muted);
}

/* ── 사진 슬라이드 (2026-10-08 추가 요청 1) ───────────────
   스크립트 없이도 옆으로 밀어(스크롤) 넘긴다. muse-content.js 가 좌우 화살표 · 「3 / 12」 를 붙이면 is-enhanced */
.me-slide {
  position: relative;
  margin: 1.6em auto;
}
.me-slide-track {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  background: var(--me-slide-bg, #f3f3f3);
  border-radius: 4px;
}
.me-slide-track img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  scroll-snap-align: center;
}
.me-slide.is-enhanced .me-slide-track {
  scrollbar-width: none;
}
.me-slide.is-enhanced .me-slide-track::-webkit-scrollbar {
  display: none;
}
.me-slide-nav {
  position: absolute;
  top: calc(50% - 22px);
  width: 36px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 26px;
  line-height: 44px;
  cursor: pointer;
}
.me-slide-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.me-slide-prev {
  left: 8px;
}
.me-slide-next {
  right: 8px;
}
.me-slide-count {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}
.me-slide figcaption {
  margin-top: 0.5em;
  font-size: 0.87em;
  text-align: center;
  color: var(--me-color-muted);
}

/* 사진 폭 · 정렬 (rules.ts figureClasses) — 폭은 본문 폭의 %, 사진은 그 폭을 꽉 채운다 */
.me-figure.me-figw-10 {
  width: 10%;
}
.me-figure.me-figw-15 {
  width: 15%;
}
.me-figure.me-figw-20 {
  width: 20%;
}
.me-figure.me-figw-25 {
  width: 25%;
}
.me-figure.me-figw-30 {
  width: 30%;
}
.me-figure.me-figw-35 {
  width: 35%;
}
.me-figure.me-figw-40 {
  width: 40%;
}
.me-figure.me-figw-45 {
  width: 45%;
}
.me-figure.me-figw-50 {
  width: 50%;
}
.me-figure.me-figw-55 {
  width: 55%;
}
.me-figure.me-figw-60 {
  width: 60%;
}
.me-figure.me-figw-65 {
  width: 65%;
}
.me-figure.me-figw-70 {
  width: 70%;
}
.me-figure.me-figw-75 {
  width: 75%;
}
.me-figure.me-figw-80 {
  width: 80%;
}
.me-figure.me-figw-85 {
  width: 85%;
}
.me-figure.me-figw-90 {
  width: 90%;
}
.me-figure.me-figw-95 {
  width: 95%;
}
.me-figure[class*='me-figw-'] {
  max-width: none;
}
.me-figure[class*='me-figw-'] img {
  width: 100%;
}
/* 왼쪽·오른쪽 — 반대쪽으로 글이 흐른다. 폭을 정하지 않았으면 사진 크기대로, 본문의 절반까지 (작은 사진을 늘리지 않는다) */
.me-figure--al-left,
.me-figure--al-right {
  max-width: 50%;
}
.me-figure--al-left {
  float: left;
  margin: 0.3em 1.6em 1em 0;
}
.me-figure--al-right {
  float: right;
  margin: 0.3em 0 1em 1.6em;
}
/* 글이 흐르지 않을 블록은 사진 아래로 — 상자 모양이 사진 옆에 끼어 어긋나지 않게 */
.me-figure:not(.me-figure--al-left):not(.me-figure--al-right),
.me-collage,
.me-slide,
.me-video,
.me-table,
.me-hr,
.me-quote,
.me-html,
.me-summary,
.me-faq,
.me-sources,
.me-related,
.me-cta {
  clear: both;
}
/* 글 끝에서 흐름을 닫는다 — 떠 있는 사진이 글 밖으로 삐져나가지 않게 */
.me-content::after {
  content: '';
  display: block;
  clear: both;
}
/* 좁은 화면 — 사진이 위, 글이 아래 (옆에 두기엔 좁다) */
@media (max-width: 600px) {
  .me-figure--al-left,
  .me-figure--al-right {
    float: none;
    width: auto;
    max-width: none;
    margin: 1.6em auto;
  }
  /* 띄운 사진은 사진 크기대로(화면 폭까지). 가운데 정렬 사진의 폭(%)은 그대로 */
  .me-figure--al-left img,
  .me-figure--al-right img {
    width: auto;
  }
}
.me-video {
  position: relative;
  margin: 1.6em 0;
  aspect-ratio: 16 / 9;
}
.me-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── 표 ─────────────────────────────────────── */
.me-table {
  border-collapse: collapse;
  margin: 1.6em 0;
  table-layout: fixed;
}
.me-table--full {
  width: 100%;
}
.me-table--center {
  margin-left: auto;
  margin-right: auto;
}
.me-table--right {
  margin-left: auto;
}
.me-table td,
.me-table th {
  min-width: 3em;
  padding: 0.6em 0.8em;
  border: 1px solid #c8c8c8;
  vertical-align: top;
}
.me-table th {
  background: #f5f5f5;
  font-weight: 700;
}
.me-table td > p,
.me-table th > p {
  margin: 0;
}

/* ── 검색 노출 블록 (사이트 글 화면) ─────────────────
 * 참사랑처럼 렌더러가 이 블록을 본문에서 빼고 따로 그리는 사이트는 쓰지 않는다.
 * HTML 만 저장하는 사이트(venom 등)는 이 모양으로 본문 안에 보인다.
 */
.me-summary {
  display: block;
  margin: 1.6em 0;
  padding: 1em 1.2em;
  border-left: 4px solid var(--me-color-accent);
  background: #f0f6fb;
  font-weight: 500;
}
.me-faq {
  margin: 2em 0;
}
.me-faq dt {
  margin-top: 1em;
  font-weight: 700;
}
.me-faq dt::before {
  content: 'Q. ';
  color: var(--me-color-accent);
}
.me-faq dd {
  margin: 0.3em 0 0;
  padding-left: 1.4em;
  color: var(--me-color-text);
}
.me-sources,
.me-related {
  margin: 1.6em 0;
  padding-left: 1.4em;
  font-size: 0.93em;
  color: var(--me-color-muted);
}
.me-sources li + li,
.me-related li + li {
  margin-top: 0.3em;
}
.me-src-pub::before,
.me-src-date::before {
  content: ' · ';
}
.me-cta {
  display: block;
  margin: 2em 0;
  padding: 1.2em 1.4em;
  border: 1px solid var(--me-color-border);
  border-radius: 8px;
  text-align: center;
}
.me-cta-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.1em;
}
.me-cta-desc {
  margin: 0.3em 0 0;
  color: var(--me-color-muted);
}

/* ── 소스코드 ─────────────────────────────────── */
.me-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: #f3f4f6;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.me-content pre {
  margin: 1em 0;
  padding: 14px 16px;
  background: #1f2430;
  color: #e8ecea;
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.6;
  font-size: 0.9em;
}
.me-content pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

/* ── 파일 첨부 ─────────────────────────────────── */
.me-file {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 1em 0;
  padding: 12px 16px;
  border: 1px solid var(--me-color-border);
  border-radius: 6px;
  background: #fff;
}
.me-file::before {
  content: '';
  flex: none;
  width: 16px;
  height: 20px;
  border: 2px solid var(--me-color-muted);
  border-radius: 2px 6px 2px 2px;
  box-sizing: border-box;
}
.me-content .me-file a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--me-color-text);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-content .me-file a:hover {
  text-decoration: underline;
}
.me-file-size {
  flex: none;
  color: var(--me-color-muted);
  font-size: 0.85em;
}