/* ROOT prose — styling for markdown authored in Toast UI Editor.
 *
 * Ported from the ROOT design system project
 * d7baae82-a86e-4cd6-895b-d4e8542157e3, file prose.css. Every ROOT token is
 * renamed to --mg-* on the way in for the reason static/core/tokens.css gives:
 * unprefixed names collide with CSS admins paste into `html` blocks.
 *
 * WHY THIS FILE IS CORE-OWNED, NOT SKIN-OWNED
 * The editor (templates/boards/post_form.html, core DTL) and the viewer (skin
 * Jinja2) must render a post identically — a writer has to see the result
 * while writing. A skin-owned copy would only reach one of the two.
 *
 * USAGE — the content wrapper carries BOTH classes:
 *   <div class="toastui-editor-contents root-prose"> … </div>
 * and this file must load AFTER vendor/toastui/toastui-editor.css: same
 * specificity, later in the cascade wins.
 *
 * The hook keeps ROOT's own name rather than an mg- one. It is not a skin hook:
 * apps/core/tests.py's class-name guard tracks mg- names against the default
 * skin's stylesheet, and this rule set does not live there.
 *
 * The heading ladder is deliberately six DIFFERENT objects, not six sizes of
 * one: a writer picks a level and gets a recognisable piece of furniture.
 */

.root-prose {
  font: 400 var(--mg-font-size-md) / 1.95 var(--mg-font-body);
  color: var(--mg-text);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.root-prose > :first-child { margin-top: 0; }
.root-prose > :last-child { margin-bottom: 0; }

.root-prose p {
  color: var(--mg-text);
  margin: 0 0 var(--mg-space-5);
}

/* H1 · 표제 슬래브 — 반전 판. 문서에 하나만. */
.root-prose h1 {
  font: 800 var(--mg-font-size-xl) / 1.22 var(--mg-font-heading);
  letter-spacing: var(--mg-track-tight);
  color: var(--mg-bg);
  background: var(--mg-text-strong);
  box-sizing: border-box;
  margin: var(--mg-space-7) 0 var(--mg-space-5);
  padding: var(--mg-space-3) var(--mg-space-5);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  position: relative;
}

/* The notch clip also clips the element's own box-shadow, so the gold slab is
   drawn INSIDE the box as a bottom bar instead of an offset shadow. */
.root-prose h1::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--mg-bar-h);
  background: var(--mg-bar-gold);
}

.root-prose h1 > a { color: var(--mg-accent-line); }

/* H2 · 장 표제 — 금색 블록 바 + 바닥 규격선. */
.root-prose h2 {
  font: 800 var(--mg-font-size-lg) / 1.28 var(--mg-font-heading);
  letter-spacing: var(--mg-track-tight);
  color: var(--mg-text);
  margin: var(--mg-space-6) 0 var(--mg-space-5);
  padding: 0 0 var(--mg-space-2) var(--mg-space-4);
  border-left: var(--mg-stroke-3) solid var(--mg-accent);
  border-bottom: var(--mg-stroke-1) solid var(--mg-border-strong);
  position: relative;
}

.root-prose h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--mg-stroke-1));
  width: 64px;
  height: var(--mg-stroke-1);
  background: var(--mg-bar-gold);
}

/* H3 · 절 표제 — 계측 마름모 마크. */
.root-prose h3 {
  font: 700 var(--mg-font-size-md) / 1.38 var(--mg-font-heading);
  color: var(--mg-text);
  margin: var(--mg-space-5) 0 var(--mg-space-4);
  padding-left: var(--mg-space-5);
  position: relative;
}

.root-prose h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 9px;
  background: var(--mg-accent);
  border: var(--mg-stroke-1) solid var(--mg-border-strong);
  transform: rotate(45deg);
}

/* H4 · 소표제 — 짧은 상단 규격선. */
.root-prose h4 {
  font: 600 var(--mg-font-size-base) / 1.44 var(--mg-font-body);
  letter-spacing: var(--mg-track-wide);
  color: var(--mg-text);
  margin: var(--mg-space-5) 0 var(--mg-space-3);
  padding-top: var(--mg-space-2);
  border-top: var(--mg-stroke-1) solid var(--mg-border-strong);
  display: table;
  min-width: 120px;
}

/* H5 · 시스템 라벨 — 모노 대문자, 트래킹. */
.root-prose h5 {
  font: 700 var(--mg-font-size-xs) / 1.5 var(--mg-font-mono);
  letter-spacing: var(--mg-track-wider);
  text-transform: uppercase;
  color: var(--mg-link);
  margin: var(--mg-space-5) 0 var(--mg-space-2);
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
}

.root-prose h5::after {
  content: "";
  flex: 1;
  height: var(--mg-stroke-1);
  background: var(--mg-border);
}

/* H6 · 각주 표제 — 가장 조용한 단계. */
.root-prose h6 {
  font: 700 var(--mg-font-size-xs) / 1.4 var(--mg-font-mono);
  letter-spacing: var(--mg-track-widest);
  text-transform: uppercase;
  color: var(--mg-text-faint);
  margin: var(--mg-space-5) 0 var(--mg-space-2);
  padding-bottom: var(--mg-space-1);
  border-bottom: var(--mg-stroke-1) dashed var(--mg-text-faint);
}

/* 인라인. 이탤릭은 서체를 눕히지 않고 금색 강조로 대체한다 — 국문에서
   이탤릭은 읽히지 않는다. */
.root-prose strong,
.root-prose b {
  font-weight: 700;
  color: var(--mg-text-strong);
}

.root-prose em,
.root-prose i {
  font-style: normal;
  color: var(--mg-link);
  font-weight: 600;
  letter-spacing: var(--mg-track-wide);
}

.root-prose del,
.root-prose s {
  color: var(--mg-text-faint);
  text-decoration-color: var(--mg-danger);
  text-decoration-thickness: var(--mg-stroke-1);
}

.root-prose a {
  color: var(--mg-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: var(--mg-stroke-1);
  text-underline-offset: 3px;
  text-decoration-color: var(--mg-accent-line);
  transition: color var(--mg-transition-fast), text-decoration-color var(--mg-transition-fast);
}

.root-prose a:hover {
  color: var(--mg-link-hover);
  text-decoration-color: var(--mg-border-strong);
}

.root-prose code {
  font: 500 var(--mg-font-size-xs) / 1.5 var(--mg-font-mono);
  color: var(--mg-text-strong);
  background: var(--mg-surface-sunken);
  border: var(--mg-stroke-1) solid var(--mg-border);
  border-radius: 0;
  padding: 1px 6px;
}

/* 코드 블록 — 로그 단자. */
.root-prose pre {
  font: 500 var(--mg-font-size-xs) / 1.5 var(--mg-font-mono);
  background: var(--mg-text-strong);
  color: var(--mg-bg);
  box-sizing: border-box;
  margin: var(--mg-space-5) 0;
  padding: var(--mg-space-4) var(--mg-space-5);
  border-left: var(--mg-stroke-3) solid var(--mg-accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  overflow-x: auto;
}

.root-prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  white-space: pre-wrap;
}

/* 인용 — 판 위에 얹힌 발췌. */
.root-prose blockquote {
  background: var(--mg-surface-tint);
  color: var(--mg-text-muted);
  box-sizing: border-box;
  margin: var(--mg-space-5) 0;
  padding: var(--mg-space-4) var(--mg-space-5);
  border: 0;
  border-left: var(--mg-stroke-3) solid var(--mg-border-strong);
  box-shadow: var(--mg-shadow-slab-soft);
  position: relative;
}

.root-prose blockquote::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--mg-stroke-3));
  top: 0;
  width: var(--mg-stroke-3);
  height: 26px;
  background: var(--mg-accent);
}

.root-prose blockquote p,
.root-prose blockquote ul,
.root-prose blockquote ol {
  color: var(--mg-text-muted);
}

.root-prose blockquote > :first-child { margin-top: 0; }
.root-prose blockquote > :last-child { margin-bottom: 0; }

/* 목록 — 금색 사각 마커(원형 금지), 모노 번호. */
.root-prose ul,
.root-prose ol {
  margin: var(--mg-space-4) 0 var(--mg-space-5);
  padding-left: var(--mg-space-5);
  color: var(--mg-text);
  list-style: none;
  counter-reset: rp;
}

.root-prose li {
  position: relative;
  margin: 0 0 var(--mg-space-1);
}

.root-prose ul > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--mg-space-4));
  top: 0.72em;
  width: 7px;
  height: 7px;
  background: var(--mg-accent);
  border-radius: 0;
}

.root-prose ol > li { counter-increment: rp; }

.root-prose ol > li::before {
  content: counter(rp, decimal-leading-zero);
  position: absolute;
  left: calc(-1 * var(--mg-space-6));
  top: 0.16em;
  width: var(--mg-space-5);
  text-align: right;
  font: 700 var(--mg-font-size-xs) / 1.4 var(--mg-font-mono);
  letter-spacing: var(--mg-track-wide);
  color: var(--mg-link);
}

.root-prose ul ul > li::before {
  background: none;
  box-shadow: inset 0 0 0 var(--mg-stroke-1) var(--mg-border-strong);
}

.root-prose li > ul,
.root-prose li > ol { margin: var(--mg-space-1) 0; }

.root-prose ul p,
.root-prose ol p { margin: 0; }

/* 체크리스트 — 2px 잉크 사각, 완료 시 금색 채움. */
.root-prose .task-list-item {
  list-style: none;
  padding-left: var(--mg-space-6);
  margin-left: calc(-1 * var(--mg-space-6));
}

.root-prose .task-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 15px;
  height: 15px;
  background: var(--mg-surface);
  border: var(--mg-stroke-1) solid var(--mg-border-strong);
  border-radius: 0;
  box-shadow: none;
}

.root-prose .task-list-item.checked::before {
  background: var(--mg-accent);
  border-color: var(--mg-border-strong);
}

.root-prose .task-list-item.checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 4px;
  border-left: var(--mg-stroke-1) solid var(--mg-text-strong);
  border-bottom: var(--mg-stroke-1) solid var(--mg-text-strong);
  transform: rotate(-45deg);
}

.root-prose .task-list-item.checked { color: var(--mg-text-faint); }

/* 표 — 잉크 머리, 규격 격자. */
.root-prose table {
  border: var(--mg-stroke-1) solid var(--mg-border-strong);
  border-collapse: collapse;
  box-sizing: border-box;
  margin: var(--mg-space-5) 0;
  width: 100%;
  color: var(--mg-text);
  box-shadow: var(--mg-shadow-slab-soft);
}

.root-prose table th,
.root-prose table td {
  border: var(--mg-stroke-hair) solid var(--mg-border);
  padding: var(--mg-space-2) var(--mg-space-3);
  text-align: left;
  vertical-align: top;
}

.root-prose table th {
  background: var(--mg-text);
  color: var(--mg-bg);
  font: 700 var(--mg-font-size-xs) / 1.5 var(--mg-font-mono);
  letter-spacing: var(--mg-track-wider);
  text-transform: uppercase;
  border-color: var(--mg-text-strong);
}

.root-prose table th p { color: var(--mg-bg); margin: 0; }
.root-prose table td p { margin: 0; padding: 0; }
.root-prose table tbody tr:nth-child(even) { background: var(--mg-bg); }

/* 구분선 — ROOT의 규칙선은 선이 아니라 바다. */
.root-prose hr {
  border: 0;
  height: var(--mg-bar-h);
  background: var(--mg-bar-ink);
  margin: var(--mg-space-6) 0;
  position: relative;
}

.root-prose hr::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 22%;
  height: 100%;
  background: var(--mg-bar-gold);
}

.root-prose img {
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: top;
  margin: var(--mg-space-4) 0 var(--mg-space-5);
  border: var(--mg-stroke-1) solid var(--mg-border-strong);
  box-shadow: var(--mg-shadow-slab-soft);
}

/* ═══ 텍꾸 프리셋 — 에디터의 HTML 블록에 그대로 붙여 쓰는 조각들. ═══
   버튼 하나로 삽입할 스니펫이므로 마크업이 짧고 중첩이 없다.
   ⚠ .rp-blur(스포일러)는 아직 넣지 않았다 — 판단 보류. */

/* 리드문 — 문서 첫 단락. */
.root-prose .rp-lead {
  font-size: var(--mg-font-size-md);
  line-height: 1.8;
  color: var(--mg-text);
  font-weight: 600;
  border-left: var(--mg-stroke-2) solid var(--mg-accent);
  padding-left: var(--mg-space-4);
  margin: 0 0 var(--mg-space-5);
}

/* 콜아웃 3종 — 안내 / 주의 / 경고. */
.root-prose .rp-note,
.root-prose .rp-warn,
.root-prose .rp-danger {
  box-sizing: border-box;
  margin: var(--mg-space-5) 0;
  padding: var(--mg-space-3) var(--mg-space-4);
  border: var(--mg-stroke-1) solid var(--mg-border-strong);
  background: var(--mg-surface);
  line-height: 1.7;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.root-prose .rp-note { background: var(--mg-info-soft); border-color: var(--mg-info); }
.root-prose .rp-warn { background: var(--mg-warn-soft); border-color: var(--mg-warn); }
.root-prose .rp-danger { background: var(--mg-danger-soft); border-color: var(--mg-danger); }

.root-prose .rp-note > b,
.root-prose .rp-warn > b,
.root-prose .rp-danger > b {
  display: block;
  font: 700 var(--mg-font-size-xs) / 1.4 var(--mg-font-mono);
  letter-spacing: var(--mg-track-widest);
  text-transform: uppercase;
  margin-bottom: var(--mg-space-1);
}

.root-prose .rp-note > b { color: var(--mg-info); }
.root-prose .rp-warn > b { color: var(--mg-warn); }
.root-prose .rp-danger > b { color: var(--mg-danger); }

/* 형광 — 강조 대신 쓰는 금색 밑칠. */
.root-prose .rp-mark {
  background: linear-gradient(to top, var(--mg-accent-mark) 42%, transparent 42%);
  font-weight: 700;
  color: var(--mg-text-strong);
  padding: 0 2px;
}

/* 키캡 · 시스템 태그. */
.root-prose .rp-kbd {
  font: 700 var(--mg-font-size-xs) / 1.4 var(--mg-font-mono);
  letter-spacing: var(--mg-track-wide);
  background: var(--mg-surface-tint);
  border: var(--mg-stroke-1) solid var(--mg-border);
  box-shadow: 0 var(--mg-stroke-1) 0 var(--mg-border);
  padding: 2px 7px;
  color: var(--mg-text-strong);
}

.root-prose .rp-tag {
  font: 700 var(--mg-font-size-xs) / 1.4 var(--mg-font-mono);
  letter-spacing: var(--mg-track-wider);
  text-transform: uppercase;
  background: var(--mg-text-strong);
  color: var(--mg-accent-line);
  padding: 3px 8px;
}

/* 서명 — 문서 끝 발신자 줄. */
.root-prose .rp-sign {
  font: 500 var(--mg-font-size-xs) / 1.5 var(--mg-font-mono);
  letter-spacing: var(--mg-track-wider);
  text-transform: uppercase;
  color: var(--mg-text-faint);
  text-align: right;
  border-top: var(--mg-stroke-1) solid var(--mg-border-strong);
  padding-top: var(--mg-space-2);
  margin-top: var(--mg-space-6);
}