/*
Theme Name: Diamat
Theme URI: https://diamat.kr
Author: Diamat 편집국
Description: 변증법적 유물론 이론지 Diamat 의 워드프레스 테마. 종이(라이트)·화면(다크 PC통신) 두 모드, 번역 논문 표제판, 목차·편집자 안내 2단 사이드바, 후주 팝오버를 지원합니다.
Version: 8.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: diamat
*/

/* 워드프레스닷컴은 wp_enqueue_style 로 넣은 fonts.googleapis 링크를 제거한다.
   @import 는 우리 스타일시트 내부라 걸러지지 않으므로 이 경로로 불러온다.
   (@import 는 반드시 다른 규칙보다 앞에 와야 한다) */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@500;700;800;900&family=Nanum+Gothic:wght@400;700;800&family=Do+Hyeon&family=Jua&family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=Gowun+Batang:wght@400;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Noto+Sans+KR:wght@400;500;600;700;800&family=Noto+Serif+KR:wght@400;500;600;700&family=Nanum+Myeongjo:wght@400;700;800&family=Song+Myung&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&family=Baloo+2:wght@700;800&family=Jua&family=Gamja+Flower&display=swap');


/* ══════════════════════════════════════════════════════════════
   1. 색 토큰 — 이 6개만 사용한다. 새 색을 임의로 만들지 말 것.
   종이 = 잉크색 강조(옥스블러드) / 화면 = 인광 강조(앰버)
   ══════════════════════════════════════════════════════════════ */
:root,
[data-theme="paper"] {
  --bg:        #f4f0e6;
  --surface:   #e8e2d2;
  --ink:       #241d10;
  --muted-ink: #6d6350;
  --border:    rgba(60,48,26,0.34);
  --accent:    #8a1f1f;
}
[data-theme="screen"] {
  --bg:        #0b1533;
  --surface:   #122048;
  --ink:       #e9eeff;
  --muted-ink: #93a6d4;
  --border:    rgba(150,180,255,0.28);
  --accent:    #ffc23d;
}

/* 서체 토큰 */
:root {
  --font-ui:    'DungGeunMo', 'Galmuri9', 'Nanum Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-read:  'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Nanum Gothic', sans-serif;
  --font-body:  var(--font-read);
  --font-serif: 'Newsreader', 'Gowun Batang', 'Noto Serif KR', serif;
  --font-mono:  'Space Mono', monospace;
  --font-grotesk: 'Space Grotesk', monospace;
  /* 제목 서체 — 커스터마이저에서 덮어씀 (기본 Galmuri) */
  --font-headline: 'DungGeunMo', 'Galmuri11', 'Nanum Gothic', sans-serif;
  --body-fs: 16.5px;
  --body-lh: 1.85;
  --read-width: 46rem;
}

/* 로컬 픽셀 폰트 — 반드시 자체 호스팅 */
@font-face {
  font-family: 'DungGeunMo';
  src: url('fonts/DungGeunMo.woff2') format('woff2'),
       url('fonts/DungGeunMo.woff') format('woff'),
       url('fonts/DungGeunMo.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════
   2. 리셋 · 기본
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-read, var(--font-body));
  line-height: 1.6;
  transition: background .25s ease, color .25s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
button { font-family: inherit; }
::selection { background: var(--accent); color: var(--bg); }

.dm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--surface); color: var(--ink);
}
.dm-skip:focus { left: 8px; top: 8px; }

.dm-shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════════════════════════════
   3. CRT 스캔라인 오버레이 (화면 모드 장식)
   ⚠ position:fixed 와 pointer-events:none 을 반드시 유지할 것.
      absolute 로 바뀌면 문서 전체를 덮어 랙·클릭불가 버그가 난다.
   ══════════════════════════════════════════════════════════════ */
#dm-crt {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.16) 2px, rgba(0,0,0,0.16) 3px);
  display: none;
}
[data-theme="screen"] #dm-crt { display: block; }
[data-theme="screen"] #dm-crt::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%);
}

/* 읽기 진행바 */
#dm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
#dm-progress.on { opacity: 1; }
#dm-progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   4. 헤더 · 내비게이션
   ══════════════════════════════════════════════════════════════ */
.dm-head {
  border-bottom: 1px solid var(--border);
  padding: 18px 0 14px;
  position: relative;
  z-index: 50;
}
.dm-head-row { display: flex; align-items: center; gap: 20px; }
.dm-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.dm-brand:hover { text-decoration: none; }
.dm-brand img { height: 34px; width: auto; }
.dm-brand-text {
  font-family: var(--font-headline);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.dm-brand-sub {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-ink); margin-top: 3px;
}
.dm-head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.dm-icon-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); padding: 0;
}
.dm-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.dm-icon-btn svg { width: 17px; height: 17px; }
[data-theme="paper"] .dm-ico-screen { display: none; }
[data-theme="screen"] .dm-ico-paper { display: none; }

.dm-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
.dm-nav a {
  font-family: var(--font-body);
  font-size: 13px; color: var(--muted-ink); text-decoration: none; padding: 3px 0;
}
.dm-nav a:hover, .dm-nav .current-menu-item > a { color: var(--accent); text-decoration: none; }

/* 검색 */
.dm-search { display: flex; gap: 0; border: 1px solid var(--border); }
.dm-search input {
  background: transparent; border: none; color: var(--ink);
  font-family: var(--font-body); font-size: 13px; padding: 7px 10px; width: 150px;
}
.dm-search input:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.dm-search button {
  background: none; border: none; border-left: 1px solid var(--border);
  color: var(--muted-ink); cursor: pointer; padding: 0 10px;
}
.dm-search button:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   5. 본문 레이아웃
   ══════════════════════════════════════════════════════════════ */
.dm-main { padding: 34px 0 80px; position: relative; z-index: 1; }
.dm-layout { display: grid; grid-template-columns: minmax(0,1fr) 232px; gap: 46px; align-items: start; }
.dm-layout--wide { grid-template-columns: minmax(0,1fr); }

.dm-band-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); display: inline-block; margin-bottom: 14px;
}
.dm-band { margin-bottom: 52px; }

/* ══════════════════════════════════════════════════════════════
   6. 글 목록 (최근 글 · 분류 목록)
   ══════════════════════════════════════════════════════════════ */
.dm-list { list-style: none; margin: 0; padding: 0; }
.dm-list > li { border-top: 1px solid var(--border); }
.dm-list > li:last-child { border-bottom: 1px solid var(--border); }
.dm-item { display: block; padding: 18px 0 22px; text-decoration: none; }
.dm-item:hover { text-decoration: none; }
.dm-item:hover .dm-item-title { color: var(--accent); }
.dm-item-series {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 7px;
}
.dm-item-title {
  font-family: var(--font-body);
  font-size: 17.5px; font-weight: 700; line-height: 1.45; letter-spacing: -.015em;
  color: var(--ink); margin: 0 0 8px; text-wrap: pretty;
}
.dm-item-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted-ink);
}
.dm-dot { opacity: .45; }
.dm-item-excerpt {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.75;
  color: var(--muted-ink); margin: 9px 0 0; text-align: justify;
}

/* 태그 칩 */
.dm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dm-chip {
  font-family: var(--font-body); font-size: 10.5px; color: var(--muted-ink);
  border: 1px solid var(--border); padding: 2px 8px; text-decoration: none;
}
.dm-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* 페이지네이션 */
.dm-pager { display: flex; gap: 6px; margin-top: 34px; flex-wrap: wrap; }
.dm-pager .page-numbers {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--border); padding: 6px 11px; color: var(--muted-ink); text-decoration: none;
}
.dm-pager .page-numbers.current,
.dm-pager .page-numbers:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════
   7. 인기글 — 화면 모드: 터미널 스코어보드 / 종이 모드: 인쇄된 순위표
   ══════════════════════════════════════════════════════════════ */
.dm-term {
  border: 2px solid var(--border);
  padding: 18px 26px 28px; margin-bottom: 48px; position: relative; overflow: hidden;
}
.dm-term-bar {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--border);
  padding-bottom: 10px; margin-bottom: 16px;
}
.dm-term-rows { list-style: none; margin: 0; padding: 0; }
.dm-term-row {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; padding: 7px 0;
  color: var(--ink);
}
.dm-term-rank { flex-shrink: 0; color: var(--accent); font-weight: 700; min-width: 26px; }
.dm-term-title {
  font-family: var(--font-body); flex: 1; color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-term-title:hover { color: var(--accent); text-decoration: none; }
.dm-term-lead { flex: 1; border-bottom: 1px dotted var(--border); margin: 0 6px 4px; }
.dm-term-hits { flex-shrink: 0; color: var(--muted-ink); font-size: 11.5px; }

/* 화면 모드에서만 CRT 터미널 장식 */
[data-theme="screen"] .dm-term {
  background: radial-gradient(ellipse at 50% 0%, #17235f 0%, #0a1130 100%);
  border-color: #2b3f78; border-radius: 7px;
  box-shadow: inset 0 0 34px rgba(0,0,0,.6);
}
[data-theme="screen"] .dm-term::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.22) 2px, rgba(0,0,0,0.22) 3px);
}
[data-theme="screen"] .dm-term-rank,
[data-theme="screen"] .dm-term-bar { text-shadow: 0 0 7px rgba(255,194,61,.55); }
[data-theme="screen"] .dm-term-title { color: #dbe6ff; }

/* ══════════════════════════════════════════════════════════════
   8. 사이드바 (분류 · 아카이브 · 태그)
   ══════════════════════════════════════════════════════════════ */
.dm-side { position: sticky; top: 26px; }
.dm-side-block { margin-bottom: 34px; }
.dm-side-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-ink); border-bottom: 1px solid var(--border);
  padding-bottom: 7px; margin: 0 0 12px;
}
.dm-side-list { list-style: none; margin: 0; padding: 0; }
.dm-side-list li { margin-bottom: 2px; }
.dm-side-list a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted-ink);
  text-decoration: none; padding: 4px 0; line-height: 1.4;
}
.dm-side-list a:hover { color: var(--accent); text-decoration: none; }
.dm-side-list .dm-count {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); flex-shrink: 0; opacity: .85;
}
.dm-side-list .children { list-style: none; margin: 2px 0 6px 12px; padding-left: 10px; border-left: 1px solid var(--border); }
.dm-side-list .children a { font-size: 11.5px; }

/* ══════════════════════════════════════════════════════════════
   9. 글 본문 — 여기부터가 핵심. §3~§7 편집 규칙과 1:1 대응.
   ══════════════════════════════════════════════════════════════ */
.dm-post { display: flex; justify-content: space-between; gap: 56px; align-items: flex-start; max-width: 1880px; margin: 0 auto; }
.dm-post > div:first-child { flex: 1; min-width: 0; max-width: 1180px; }
.dm-post--nosides { display: block; }
.dm-post-cols {
  display: flex; flex-direction: column; gap: 26px;
  width: 180px; flex-shrink: 0;
  position: sticky; top: 100px; align-self: flex-start; margin-left: 40px;
  max-height: calc(100vh - 130px); overflow-y: auto; overflow-x: hidden; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

.dm-back {
  background: none; border: none; cursor: pointer; padding: 0 0 24px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none;
}
.dm-back:hover { text-decoration: none; opacity: .75; }

.dm-series {
  font-family: 'DungGeunMo', 'Galmuri11', 'Nanum Gothic', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  color: var(--accent); margin: 0 0 10px; text-transform: uppercase;
}
.dm-title {
  font-family: var(--font-body); text-align: center;
  font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
  margin: 0 auto 18px; color: var(--ink); text-wrap: pretty; max-width: 32ch;
  word-break: keep-all;
}
.dm-series { text-align: center; }
.dm-meta { display: flex; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--muted-ink); margin-bottom: 16px; }

/* 히어로 도판 */
.dm-hero {
  position: relative; width: 100%;
  overflow: hidden; background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 16px 16px 0 var(--accent);
  margin: 6px 0 60px;
}
.dm-hero img { width: 100%; height: auto; display: block; }

/* 사진이 아직 없는 글 — 자리표시자 (원본 image-slot placeholder) */
.dm-hero-empty {
  position: relative; aspect-ratio: 16/9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--muted-ink); text-decoration: none;
  background: none;
  pointer-events: none;      /* 아래에 있는 링크의 클릭을 가로채지 않는다 */
}
a.dm-hero-empty { pointer-events: auto; }   /* 편집 링크로 쓰일 때만 클릭 허용 */
.dm-hero-empty span {
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: .04em;
}
.dm-hero-empty:hover { color: var(--accent); text-decoration: none; }

@media (max-width: 720px) {
  .dm-hero { aspect-ratio: 4/3; margin: 6px 0 46px; box-shadow: 0 0 0 1px var(--surface) inset, 10px 10px 0 var(--accent); }
}
.dm-figcap {
  font-family: var(--font-body); font-size: 11px; font-style: italic; line-height: 1.55;
  color: var(--muted-ink); margin: 8px 0 28px; text-align: left; padding-left: 2px;
  max-width: 912px; text-wrap: pretty;
}

/* 표제판 — 번역 논문 4행 */
/*
 * 옛 표제판 CSS(.dm-masthead / .dm-mast-kr / .dm-mast-orig / .dm-mast-src /
 * .dm-mast-author / .dm-emast-*)는 제거했다. 통일 표제판이 같은 dm-mast-*
 * 이름 공간을 쓰기 때문에, 남겨 두면 낡은 규칙이 새 규칙에 섞여 먹는다.
 * 실제로 .dm-mast-orig 만 옛 규칙에 걸려 혼자 가운데 세리프로 뜨고 나머지는
 * 정렬이 풀린 채로 보였다. 현재 규칙은 아래 22절에 한 벌로 모여 있다.
 */

/* (옛 dm-emast-* 규칙 제거 — 통일 표제판 dm-mast-* 로 대체됨) */

/* 본문 컨테이너 */
.dm-body {
  border-top: 3px double var(--border);
  padding-top: 10px;
  max-width: var(--read-width);
  margin-left: auto; margin-right: auto;
}
.dm-body > section { margin-top: 36px; scroll-margin-top: 88px; }

/* 문단 — margin-bottom 24px 하나의 규칙. 예외 없음. */
.dm-body p {
  font-family: var(--font-body);
  font-size: var(--body-fs); line-height: var(--body-lh); color: var(--ink);
  margin: 0 0 24px; letter-spacing: -.003em; text-align: justify;
}
.dm-body p:last-child { margin-bottom: 0; }

/*
 * 원본 데이터 실사(96개 클래스 없는 h2 전수조사) 결과: 클래스가 안 붙은 <h2>는
 * 예외 없이 전부 "1. ○○" 식 편집자 소제목이었지, 원문 절 제목이 아니었다.
 * 그래서 클래스 없는 기본값은 "소제목(작게)"으로 두고, dm-h-sec 를 명시적으로
 * 붙인 경우에만 "절 제목(크게)"으로 승격한다 — 기존과 정반대 기본값.
 */

/* 편집자가 붙인 소제목 — 액센트 좌측 바 (클래스 없는 h2/h3의 기본값) */
.dm-body h2, .dm-body h3, .dm-h-sub {
  font-family: var(--font-body);
  font-size: 14.5px; font-weight: 700; color: var(--accent);
  letter-spacing: .01em; line-height: 1.45;
  margin: 0 0 14px; padding-left: 11px; border-left: 3px solid var(--accent);
  scroll-margin-top: 88px;
}
/* 절 제목 (원문 최상위 절) — dm-h-sec 클래스가 명시된 경우만 */
.dm-h-sec {
  font-family: var(--font-body);
  font-size: 31px; font-weight: 700; color: var(--ink);
  letter-spacing: -.015em; line-height: 1.25;
  margin: 0 0 26px; padding-bottom: 16px; border-bottom: 3px double var(--border);
}
/* 작은 라벨형 소제목 */
.dm-h-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; font-style: italic; color: var(--muted-ink);
  letter-spacing: .02em; margin: 0 0 10px;
  padding-left: 10px; border-left: 2px solid var(--border); scroll-margin-top: 88px;
}

/* 인용 */
.dm-body blockquote {
  font-family: var(--font-body);
  margin: 24px 0; padding: 20px 0 20px 24px;
  border-left: 2px solid var(--accent);
  font-size: 15.5px; line-height: 1.8; font-style: italic; color: var(--ink); text-align: justify;
}
.dm-body blockquote p { margin: 0; font-size: inherit; line-height: inherit; font-style: inherit; }

/* 목록 */
.dm-body ul, .dm-body ol {
  font-family: var(--font-body); font-size: var(--body-fs); line-height: var(--body-lh);
  color: var(--ink); margin: 0 0 24px; padding-left: 22px;
}
.dm-body li { margin-bottom: 8px; }

/* 표 */
.dm-body table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
  font-family: var(--font-body); font-size: 13px;
}
.dm-body th, .dm-body td {
  border: 1px solid var(--border); padding: 10px 12px;
  text-align: left; vertical-align: top; line-height: 1.7; color: var(--ink);
}
.dm-body th {
  font-weight: 700; font-size: 11.5px; letter-spacing: .04em;
  color: var(--muted-ink); text-transform: uppercase; background: var(--surface);
}

/* 수식 상자 */
.dm-formula {
  margin: 24px 0; padding: 20px 18px;
  border: 1px solid var(--border); background: var(--surface);
  text-align: center; font-family: 'Old Standard TT', Georgia, serif;
  font-size: 19px; letter-spacing: .04em; color: var(--ink);
}

/* 구분선 */
.dm-divider { display: flex; justify-content: center; margin: 64px 0; color: var(--muted-ink); }
.dm-divider span { font-family: var(--font-body); font-size: 15px; letter-spacing: .15em; opacity: .6; }

/* 각주 위첨자 */
.dm-body sup, sup.dm-sup {
  font-size: .7em; vertical-align: super; color: var(--accent);
  font-weight: 700; line-height: 0;
}
sup[data-note] { cursor: pointer; }
sup[data-note][data-note-type="src"] { border-bottom: 1px dotted var(--accent); }
sup[data-note][data-note-type="explan"] {
  font-size: 9.5px; vertical-align: baseline; font-weight: 700;
  letter-spacing: .04em; padding: 1px 5px; border-radius: 3px;
  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
  margin-left: 2px;
}
sup[data-note]:hover { opacity: .7; }

/* 구 방식 각주(문단 아래 aside) — 남아 있는 글 대비 */
.dm-notecol { margin-bottom: 24px; }
.dm-notebox {
  font-family: var(--font-body); font-style: italic;
  display: flex; gap: 6px; font-size: 12px; line-height: 1.6; color: var(--muted-ink);
  padding: 12px 0 12px 14px; border-left: 1px solid var(--border); margin-top: 14px;
}
.dm-notenum { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--accent); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   10. 후주 (표준 디자인)
   ══════════════════════════════════════════════════════════════ */
.dm-endnotes { margin-top: 64px; padding-top: 26px; border-top: 3px double var(--border); }
.dm-endnotes-head {
  font-family: var(--font-headline);
  font-size: 26px; font-weight: 400; color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em;
}
.dm-endnotes-hint {
  font-family: var(--font-ui); font-size: 12px; color: var(--muted-ink);
  margin: 0 0 22px; line-height: 1.65;
}
.dm-endnote {
  display: flex; gap: 12px; padding: 16px 2px;
  border-bottom: 1px dotted var(--border); scroll-margin-top: 96px;
}
.dm-endnote-num {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--accent); min-width: 24px; text-align: right;
}
.dm-endnote-text {
  font-family: var(--font-body); font-size: 13px; line-height: 1.8;
  color: var(--muted-ink); flex: 1; text-align: justify; margin: 0;
}
.dm-endnote-tag {
  display: inline-block; margin-right: 8px;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  padding: 1px 5px; border-radius: 3px; vertical-align: 1px; border: 1px solid var(--accent);
}
.dm-endnote-tag--src { color: var(--muted-ink); background: transparent; }
.dm-endnote-tag--explan { color: var(--bg); background: var(--accent); }

/* 각주 팝오버 — 베이지 베젤 + 인광 스크린 */
#dm-fnpop {
  position: absolute; z-index: 9999; max-width: 420px; min-width: 260px;
  padding: 9px; border-radius: 9px;
  background: #cfc4a8; border: 1px solid #8d8264;
  box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  font-family: var(--font-body);
  opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .14s;
}
#dm-fnpop.on { opacity: 1; transform: translateY(0); }
#dm-fnpop .dm-pop-screen {
  background: #0d1a12; border: 1px solid #2b4033; border-radius: 4px;
  padding: 13px 15px; box-shadow: inset 0 0 20px rgba(0,0,0,.8);
  max-height: 44vh; overflow-y: auto;
}
#dm-fnpop .dm-pop-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 7px; color: #6fdc95;
}
#dm-fnpop .dm-pop-body {
  font-size: 12.5px; line-height: 1.75; margin: 0; color: #d6f5df; text-align: justify;
}
/* 옛 컴퓨터 화면처럼 — 각주 본문 맨 끝에서 깜빡이는 커서 */
#dm-fnpop .dm-pop-cursor {
  display: inline-block; width: .5em; height: 1em; margin-left: 2px;
  background: currentColor; vertical-align: text-bottom;
  animation: dm-pop-blink 1.05s linear infinite;
}
@keyframes dm-pop-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
#dm-fnpop[data-kind="explan"] .dm-pop-label { color: #ffc23d; }
#dm-fnpop[data-kind="explan"] .dm-pop-body { color: #ffeec4; }
#dm-fnpop .dm-pop-close {
  position: absolute; top: 2px; right: 6px; background: none; border: none;
  color: #5d5340; font-size: 15px; cursor: pointer; line-height: 1; padding: 4px;
}
#dm-fnpop .dm-pop-close:hover { color: #241d10; }

/* ══════════════════════════════════════════════════════════════
   11. 목차 / 편집자 안내 — 같은 폭·같은 border. 절대 키우지 않는다.
   ══════════════════════════════════════════════════════════════ */
.dm-toc { padding-left: 18px; border-left: 1px solid var(--border); flex: 1; min-width: 0; }
.dm-toc-head {
  font-family: var(--font-body); font-size: 10px; font-style: italic;
  color: var(--muted-ink); margin: 0 0 10px; opacity: .6;
}
.dm-toc a {
  font-family: var(--font-body); display: block; font-size: 11.5px; font-style: italic;
  color: var(--muted-ink); text-decoration: none; padding: 5px 0; line-height: 1.4; opacity: .75;
}
.dm-toc a:hover { color: var(--accent); opacity: 1; text-decoration: none; }
.dm-toc-all {
  display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--accent);
  text-decoration: none; opacity: .85;
}
.dm-toc-all:hover { opacity: 1; text-decoration: none; }
/* 편집자 안내 소절(하위 항목) — 상위 절 아래 들여써서 위계를 드러낸다 */
.dm-toc a.dm-guide-sub {
  padding-left: 14px; font-size: 10.5px; opacity: .6;
  border-left: 1px solid var(--border);
}
.dm-toc a.dm-guide-sub:hover { opacity: .95; }
.dm-toc a.is-active {
  font-size: 12px; font-weight: 700; font-style: normal;
  color: var(--accent); opacity: 1; text-decoration: none;
  padding: 6px 0 6px 10px; margin: 2px 0;
  border-left: 2px solid var(--accent);
  background: rgba(138,31,31,.07);
}
[data-theme="screen"] .dm-toc a.is-active { background: rgba(213,73,58,.10); }
.dm-toc .dm-toc-group {
  font-family: var(--font-body); display: block; font-size: 11px; font-weight: 700;
  font-style: normal; color: var(--ink); padding: 13px 0 4px; line-height: 1.35; letter-spacing: -.01em;
}
.dm-toc-note {
  font-family: var(--font-ui); font-size: 9.5px; font-style: italic;
  color: var(--muted-ink); margin: 12px 0 0; opacity: .7; line-height: 1.5;
}

/* 글 하단 푸터(역자·일시) */
.dm-post-foot {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px;
}
.dm-post-foot p {
  text-align: right; color: var(--muted-ink); margin: 0; line-height: 1.9;
  font-family: var(--font-body);
}

/* 이전·다음 글 */
.dm-adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.dm-adjacent a {
  border: 1px solid var(--border); padding: 14px 16px; text-decoration: none;
  font-family: var(--font-body); font-size: 13px; color: var(--ink); line-height: 1.5;
}
.dm-adjacent a:hover { border-color: var(--accent); text-decoration: none; }
.dm-adjacent .dm-adj-label {
  display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════
   12. 댓글
   ══════════════════════════════════════════════════════════════ */
.dm-comments { margin-top: 64px; padding-top: 26px; border-top: 3px double var(--border); }
.dm-comments h2 {
  font-family: var(--font-headline); font-size: 20px; font-weight: 400;
  color: var(--ink); margin: 0 0 20px; border: none; padding: 0;
}
.dm-comments .comment-list { list-style: none; margin: 0 0 30px; padding: 0; }
.dm-comments .comment-list li { border-top: 1px solid var(--border); padding: 16px 0; }
.dm-comments .comment-list .children { list-style: none; margin: 12px 0 0 20px; padding-left: 14px; border-left: 1px solid var(--border); }
.dm-comments .comment-author {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.dm-comments .comment-meta {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-ink); margin: 3px 0 8px;
}
.dm-comments .comment-content p {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.8;
  color: var(--ink); margin: 0 0 10px; text-align: justify;
}
.dm-comments .comment-reply-link {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.dm-comments input[type="text"],
.dm-comments input[type="email"],
.dm-comments input[type="url"],
.dm-comments textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); font-family: var(--font-body); font-size: 13.5px;
  padding: 9px 11px; margin-bottom: 12px;
}
.dm-comments textarea { min-height: 130px; line-height: 1.7; resize: vertical; }
.dm-comments label {
  display: block; font-family: var(--font-body); font-size: 12px;
  color: var(--muted-ink); margin-bottom: 5px;
}
.dm-comments .submit,
.dm-btn {
  font-family: var(--font-ui); background: var(--accent); color: var(--bg);
  border: 1px solid var(--accent); cursor: pointer;
  font-size: 13px; font-weight: 700; padding: 10px 24px; letter-spacing: .02em;
}
.dm-comments .submit:hover, .dm-btn:hover { background: transparent; color: var(--accent); }
.dm-comments .comment-notes,
.dm-comments .logged-in-as {
  font-family: var(--font-body); font-size: 11.5px; color: var(--muted-ink); margin-bottom: 14px;
}

/* ══════════════════════════════════════════════════════════════
   13. 푸터
   ══════════════════════════════════════════════════════════════ */
.dm-foot {
  border-top: 3px double var(--border); padding: 30px 0 60px;
  position: relative; z-index: 1;
}
.dm-foot-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.dm-foot-brand {
  font-family: var(--font-headline); font-size: 15px; color: var(--ink); margin: 0 0 6px;
}
.dm-foot-note {
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.75;
  color: var(--muted-ink); margin: 0; max-width: 38ch;
}
.dm-foot-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.dm-foot-links a { font-family: var(--font-body); font-size: 12px; color: var(--muted-ink); }
.dm-foot-links a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   14. 반응형
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .dm-post { grid-template-columns: minmax(0,1fr); }
  .dm-post-cols { position: static; margin-top: 40px; }
}
@media (max-width: 900px) {
  .dm-layout { grid-template-columns: minmax(0,1fr); }
  .dm-side { position: static; margin-top: 46px; }
}
@media (max-width: 680px) {
  :root { --body-fs: 15.5px; --body-lh: 1.85; }
  .dm-shell { padding: 0 16px; }
  .dm-title { font-size: 26px; }
  .dm-body h2, .dm-h-sec { font-size: 25px; }
  .dm-body h2, .dm-body h3, .dm-h-sub { font-size: 13.5px; }
  .dm-endnotes-head { font-size: 21px; }
  .dm-term { padding: 14px 14px 20px; margin-bottom: 32px; }
  .dm-post-cols { flex-direction: column; gap: 30px; }
  .dm-adjacent { grid-template-columns: 1fr; }
  .dm-head-tools .dm-search input { width: 108px; }
  .dm-term-title { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════
   15. 인쇄 (후주까지 포함, 장식 제거)
   ══════════════════════════════════════════════════════════════ */
@media print {
  #dm-crt, #dm-progress, #dm-fnpop, .dm-head-tools, .dm-nav,
  .dm-post-cols, .dm-adjacent, .dm-comments, .dm-foot-links { display: none !important; }
  body { background: #fff; color: #000; }
  .dm-post { grid-template-columns: 1fr; }
  .dm-body p, .dm-body li { font-size: 11pt; line-height: 1.7; }
  .dm-endnote-text { font-size: 9.5pt; }
  a { color: #000; text-decoration: none; }
}

/* 워드프레스 기본 클래스 */
.alignleft { float: left; margin: 0 20px 14px 0; }
.alignright { float: right; margin: 0 0 14px 20px; }
.aligncenter { margin: 0 auto 14px; }
.wp-caption-text, .dm-body figcaption {
  font-family: var(--font-body); font-size: 11px; font-style: italic;
  color: var(--muted-ink); margin-top: 8px; line-height: 1.55;
}
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   11. 홈 히어로 — 마퀴 배너 · 분류 개관 · DIA-TV
   (원본 프로토타입 이식분: 2026-08 추가)
   ────────────────────────────────────────────────────────────── */
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes crtBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.dm-hero-panel {
  border: 2px solid var(--border);
  padding: 18px 26px 28px;
  margin-bottom: 48px;
  background: rgba(60,48,26,0.03);
}
[data-theme="screen"] .dm-hero-panel { background: rgba(150,180,255,0.03); }

.dm-hero-bar {
  display: flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px dotted var(--border);
  padding-bottom: 12px; margin-bottom: 22px;
}
[data-theme="screen"] .dm-hero-bar { text-shadow: 0 0 6px rgba(150,180,255,.45); }

.dm-hero-cursor {
  display: inline-block; width: 8px; height: 13px; margin-left: 8px;
  background: var(--accent);
  animation: crtBlink 1.05s step-end infinite;
}
[data-theme="screen"] .dm-hero-cursor { box-shadow: 0 0 6px rgba(150,180,255,.6); }

.dm-hero-row { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; animation: fadeUp .5s ease; }

.dm-hero-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; text-decoration: none; }
.dm-hero-crown {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 40px; height: 40px; overflow: hidden;
}
.dm-hero-crown img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dm-hero-neon {
  font-family: var(--font-headline);
  font-size: 20px; font-weight: 400; letter-spacing: .01em;
  color: #e30613;
  text-shadow: 0 0 4px rgba(255,90,80,.9), 0 0 11px rgba(227,6,19,.75), 0 0 22px rgba(227,6,19,.55);
}
[data-theme="paper"] .dm-hero-neon { text-shadow: none; color: var(--accent); }

.dm-hero-kicker {
  font-family: var(--font-headline);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0; flex: 0 0 auto; white-space: nowrap;
}
.dm-hero-term-col { flex: 1; min-width: 0; display: flex; align-items: center; }

/* 전광판 대신 단말기 한 줄 — 흐르지 않아 항상 전체가 읽힌다 */
.dm-hero-term {
  width: 100%; box-sizing: border-box; padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.dm-hero-term-path {
  display: block; margin: 0 0 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--muted-ink);
}
.dm-hero-term-line {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.dm-hero-term-caret {
  flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700;
  color: var(--accent);
}
.dm-hero-term-text {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--ink); letter-spacing: .01em;
}
.dm-hero-term-cursor {
  flex: 0 0 auto; width: 8px; height: 15px; margin-left: 1px;
  background: var(--accent);
  animation: dm-term-blink 1.05s steps(1) infinite;
}
@keyframes dm-term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dm-hero-term-cursor { animation: none; }
}
@media (max-width: 640px) {
  .dm-hero-term-text { font-size: 13.5px; }
}

.dm-hero-rule { height: 0; border: 0; border-top: 2px dotted var(--border); margin: 32px 0; }

.dm-cat-overview-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 16px; margin-bottom: 48px; }
.dm-cat-overview {
  display: flex; flex-direction: column; flex: 1 1 560px; min-width: 0;
  padding-right: 32px; border-right: 1px solid var(--border);
}
.dm-cat-group { display: flex; align-items: baseline; gap: 14px; padding: 10px 2px; border-bottom: 1px dotted var(--border); }
.dm-cat-idx { font-family: var(--font-mono); font-size: 11px; color: var(--accent); flex-shrink: 0; letter-spacing: .02em; }
.dm-cat-name {
  font-family: 'Space Mono', var(--font-headline);
  font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: color .2s;
}
.dm-cat-name:hover { color: var(--accent); }
.dm-cat-count { font-family: var(--font-headline); font-size: 11.5px; color: var(--muted-ink); margin-left: 8px; }
.dm-cat-children {
  overflow: hidden; max-height: 0; opacity: 0;
  transform: translateY(-6px); margin-top: 0;
  transition: max-height .55s cubic-bezier(.22,1,.36,1),
              opacity .45s ease,
              transform .5s cubic-bezier(.22,1,.36,1),
              margin-top .45s cubic-bezier(.22,1,.36,1);
}
.dm-cat-group.is-open .dm-cat-children {
  max-height: 600px; opacity: 1; transform: translateY(0); margin-top: 8px;
}
.dm-cat-group.is-open .dm-cat-children { transition-delay: 0s, .08s, 0s, 0s; }
.dm-cat-group.is-open > div > .dm-cat-name { color: var(--accent); }
[data-theme="screen"] .dm-cat-group.is-open > div > .dm-cat-name { text-shadow: 0 0 6px rgba(150,180,255,.4); }
button.dm-cat-name {
  cursor: pointer; background: none; border: none; padding: 0;
  text-align: left; transition: color .3s cubic-bezier(.4,0,.2,1);
}
.dm-cat-child--all { font-weight: 700; color: var(--accent); }
.dm-cat-child {
  display: inline-block; font-size: 13px; color: var(--muted-ink);
  text-decoration: none; margin-right: 14px; margin-bottom: 6px; transition: color .2s;
}
.dm-cat-child:hover { color: var(--accent); }

.dm-tv-outer {
  flex: 1 1 260px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.dm-tv-frame {
  position: relative; display: block; width: 100%; max-width: 420px;
  aspect-ratio: 1200 / 1261;
  background: url('https://dia-mat.com/wp-content/uploads/2026/08/crt-computer-final.png') no-repeat center / contain;
  padding: 0; border-radius: 0; box-shadow: none;
}
.dm-tv-inner {
  position: absolute; inset: 0; padding: 0; margin: 0; border-radius: 0; background: none; box-shadow: none;
}
.dm-tv-screen {
  position: absolute;
  left: 12.83%; top: 5.00%; width: 72.67%; height: 44.81%;
  aspect-ratio: auto;
  border-radius: 2%;
  overflow: hidden;
  background: #05070c;
  box-shadow: inset 0 0 14px rgba(0,0,0,.65);
}
.dm-tv-screen-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-tv-overlay {
  position: absolute; inset: 0; pointer-events: none; border-radius: 18px / 13px;
  background:
    linear-gradient(122deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 24%),
    repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.13) 2px 3px),
    radial-gradient(125% 92% at 50% 42%, rgba(0,0,0,0) 54%, rgba(0,0,0,.52) 100%);
}
.dm-tv-side { flex: 0 0 54px; display: flex; flex-direction: column; align-items: center; gap: 11px; padding-top: 4px; }
.dm-tv-label { font-family: 'DungGeunMo','Galmuri9',sans-serif; font-size: 9px; letter-spacing: .12em; color: #3c2c18; opacity: .8; }
.dm-tv-knob {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f0e7d3, #8a7350 68%, #573f25);
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.35);
}
.dm-tv-speaker {
  width: 100%; height: 52px; margin-top: 2px; border-radius: 5px;
  background: repeating-linear-gradient(#4a3820, #4a3820 2px, #2c2013 2px, #2c2013 5px);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.65);
}
.dm-tv-foot {
  position: absolute; bottom: -9px; width: 26px; height: 12px;
  background: #5a4228; border-radius: 0 0 5px 5px; box-shadow: 0 3px 4px rgba(0,0,0,.4);
}
.dm-tv-foot--l { left: 34px; }
.dm-tv-foot--r { right: 34px; }
.dm-tv-caption {
  width: 100%; margin: 22px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--muted-ink);
}

@media (max-width: 720px) {
  .dm-hero-row { flex-wrap: wrap; }
  .dm-hero-marquee-col { flex: 1 1 100%; margin-top: 4px; }
  .dm-cat-overview-row { flex-wrap: wrap; }
  .dm-cat-overview { flex: 1 1 100%; padding-right: 0; border-right: none; margin-bottom: 20px; }
  .dm-tv-outer { flex: 1 1 100%; }
}

/* ──────────────────────────────────────────────────────────────
   12. 섹션 밴드 · 인기글 하이스코어 보드 (원본 이식분)
   ────────────────────────────────────────────────────────────── */
.dm-sband { display: flex; align-items: center; gap: 18px; margin: 74px 0 32px; }
.dm-sband-label {
  font-family: var(--font-headline); font-size: 24px; font-weight: 700;
  letter-spacing: -.012em; color: var(--ink); white-space: nowrap;
}
.dm-sband-rule { flex: 1; height: 0; border-top: 2px dotted var(--border); }
.dm-sband-tag {
  font: 700 11px var(--font-mono); color: var(--accent);
  letter-spacing: .14em; white-space: nowrap;
}

/* 종이 모드: 인쇄된 순위표 */
.dm-score {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-width: 2px 0 1px;
  background: none; padding: 4px 0 10px; margin: 0 0 10px;
}
/* 화면 모드: 오락실 하이스코어 보드 */
[data-theme="screen"] .dm-score {
  border: 3px solid #2b3f78; border-radius: 7px;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.17) 2px 4px),
    radial-gradient(130% 105% at 50% 0%, #14255c 0%, #070f28 100%);
  padding: 20px 26px 16px;
  box-shadow: inset 0 0 36px rgba(150,180,255,.10), 0 0 0 3px #0a1330, 13px 13px 0 var(--accent);
}

.dm-score-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-headline); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
[data-theme="screen"] .dm-score-head {
  color: #fff; border-bottom: 2px dashed rgba(150,180,255,.45);
  text-shadow: 0 0 8px rgba(150,180,255,.7);
}

.dm-score-rows { list-style: none; margin: 0; padding: 0; }
.dm-score-row { border-bottom: 1px solid var(--border); transition: background .12s; }
[data-theme="screen"] .dm-score-row { border-bottom: 1px solid rgba(150,180,255,.08); }
.dm-score-row:hover { background: rgba(60,48,26,.06); }
[data-theme="screen"] .dm-score-row:hover { background: rgba(150,180,255,.13); }

.dm-score-link {
  display: flex; align-items: baseline; gap: 14px; width: 100%;
  padding: 10px 6px; text-decoration: none;
  font-family: var(--font-headline);
}
.dm-score-link:hover { text-decoration: none; }

.dm-score-rank { flex-shrink: 0; font-size: 14px; letter-spacing: .02em; color: var(--muted-ink); opacity: .82; }
.dm-score-title {
  flex-shrink: 1; min-width: 40px; font-size: 14.5px; font-weight: 700;
  letter-spacing: -.01em; color: var(--muted-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-score-lead { flex: 1; min-width: 10px; align-self: flex-end; margin-bottom: 4px; border-bottom: 2px dotted var(--border); }
[data-theme="screen"] .dm-score-lead { border-bottom-color: rgba(150,180,255,.32); }
.dm-score-hits {
  flex-shrink: 0; font-size: 13px; color: var(--muted-ink); opacity: .8;
  font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: pre;
}

/* 상위 3위 강조 */
.dm-score-row.is-top .dm-score-rank { font-size: 15px; opacity: 1; color: var(--ink); }
.dm-score-row.is-top .dm-score-title,
.dm-score-row.is-top .dm-score-hits { color: var(--ink); opacity: 1; }
[data-theme="screen"] .dm-score-row.is-top .dm-score-rank {
  color: #fff; text-shadow: 0 0 9px rgba(150,180,255,.95), 0 0 2px #fff;
}
[data-theme="screen"] .dm-score-row.is-top .dm-score-title {
  color: #fff; text-shadow: 0 0 7px rgba(150,180,255,.6);
}
[data-theme="screen"] .dm-score-row.is-top .dm-score-hits {
  color: #fff; text-shadow: 0 0 7px rgba(150,180,255,.8);
}
[data-theme="screen"] .dm-score-rank,
[data-theme="screen"] .dm-score-title,
[data-theme="screen"] .dm-score-hits { color: #a8bce8; }

@media (max-width: 720px) {
  .dm-sband { margin: 56px 0 28px; gap: 12px; }
  .dm-sband-label { font-size: 21px; }
  [data-theme="screen"] .dm-score { padding: 16px 14px 12px; box-shadow: inset 0 0 36px rgba(150,180,255,.10), 0 0 0 3px #0a1330, 8px 8px 0 var(--accent); }
  .dm-score-link { gap: 10px; padding: 9px 4px; }
  .dm-score-title { font-size: 13.5px; }
}

/* ──────────────────────────────────────────────────────────────
   13. 본문 안 각주 상자 숨김 · 기타 보정
   각주 텍스트는 글 끝 「후주」 블록과 팝오버로 렌더링되므로,
   본문 중간에 심어진 원본 각주 상자는 화면에서 숨긴다.
   (인쇄 시에는 다시 보이게 해 종이에서도 주석을 읽을 수 있게 함)
   ────────────────────────────────────────────────────────────── */
.dm-body .dm-notecol { display: none; }

/* 본문 삽입 SVG 도표가 넘치지 않도록 */
.dm-body svg { max-width: 100%; height: auto; }

/* 본문 표가 좁은 화면에서 넘칠 때 가로 스크롤 */
.dm-body table { display: block; overflow-x: auto; max-width: 100%; }

@media print {
  .dm-body .dm-notecol { display: block; }
}

/* ──────────────────────────────────────────────────────────────
   14. 최근 글 — 대표글(좌) + 목록(우) 2단 (원본 이식분)
   ────────────────────────────────────────────────────────────── */
.dm-recent { display: grid; grid-template-columns: 1.22fr 0.78fr; gap: 0; }

.dm-rec-lead {
  display: block; text-decoration: none;
  padding: 26px 46px 20px 0; border-right: 1px solid var(--border);
  transition: opacity .25s ease; animation: fadeUp .4s ease both;
}
.dm-rec-lead:hover { opacity: .6; text-decoration: none; }
.dm-rec-num {
  display: block; font: 700 12px var(--font-mono);
  color: var(--accent); letter-spacing: .16em; margin: 0 0 16px;
}
.dm-rec-kicker {
  font-family: var(--font-headline); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.dm-rec-lead-img {
  position: relative; display: block; width: 100%; aspect-ratio: 16/10;
  overflow: hidden; background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 16px 16px 0 var(--accent);
  margin: 2px 0 40px;
}
.dm-rec-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-rec-lead-title {
  font-family: var(--font-headline); font-size: 40px; font-weight: 400;
  line-height: 1.14; letter-spacing: -.025em; color: var(--ink);
  margin: 0 0 16px; text-wrap: pretty;
}
.dm-rec-date {
  display: block; font-family: var(--font-headline); font-size: 12px;
  color: var(--muted-ink); letter-spacing: .03em;
}

.dm-rec-list { display: flex; flex-direction: column; padding-left: 38px; }
.dm-rec-row {
  display: grid; grid-template-columns: 104px 1fr; align-items: baseline;
  column-gap: 32px; row-gap: 6px; padding: 28px 6px;
  border-top: 1px solid var(--border); text-decoration: none;
  transition: opacity .22s ease;
}
.dm-rec-row:first-child { border-top: none; }
.dm-rec-row:hover { opacity: .6; text-decoration: none; }
.dm-rec-row-num {
  font: 700 12px var(--font-mono); color: var(--muted-ink);
  letter-spacing: .08em; padding-top: 4px;
}
.dm-rec-row-body { display: block; min-width: 0; }
.dm-rec-row-kicker {
  display: block; font-family: var(--font-headline); font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin: 0 0 7px;
}
.dm-rec-row-title {
  display: block; font-family: var(--font-headline); font-size: 18px; font-weight: 400;
  line-height: 1.3; letter-spacing: -.015em; color: var(--ink); margin: 0 0 8px; text-wrap: pretty;
}

@media (max-width: 900px) {
  .dm-recent { grid-template-columns: 1fr; }
  .dm-rec-lead { padding: 20px 0 6px; border-right: none; }
  .dm-rec-lead-title { font-size: 29px; }
  .dm-rec-lead-img { box-shadow: 0 0 0 1px var(--surface) inset, 10px 10px 0 var(--accent); margin: 2px 0 34px; }
  .dm-rec-list { padding-left: 0; margin-top: 6px; }
  .dm-rec-row { grid-template-columns: 46px 1fr; align-items: start; column-gap: 18px; padding: 20px 0; }
  .dm-rec-row-title { font-size: 16.5px; }
}

/* ──────────────────────────────────────────────────────────────
   15. 카테고리 쇼케이스 — 연재 타임라인(경제학 교정) · 포스터 그리드(이론)
   ────────────────────────────────────────────────────────────── */

/* ── 연재 타임라인 ── */
.dm-spine {
  display: flex; flex-direction: column;
  max-height: 460px; overflow-y: auto; padding: 6px 6px 6px 1px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.dm-spine-item {
  position: relative; display: block; text-decoration: none;
  padding: 15px 12px 15px 32px; border-left: 2px solid var(--border);
  transition: border-color .2s ease, background .2s ease;
}
.dm-spine-item:hover { border-left-color: var(--accent); background: var(--surface); text-decoration: none; }
.dm-spine-dot {
  position: absolute; left: -6px; top: 19px; width: 10px; height: 10px;
  background: var(--bg); border: 2px solid var(--accent); box-shadow: 2px 2px 0 var(--accent);
}
.dm-spine-ord {
  display: inline-block; font-family: var(--font-headline);
  font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: .12em;
  margin: 0 0 7px; padding: 2px 6px; border: 1px solid var(--accent);
}
.dm-spine-title {
  font-family: var(--font-headline); font-size: 16.5px; font-weight: 400;
  color: var(--ink); line-height: 1.36; letter-spacing: -.012em; margin: 0 0 5px; text-wrap: pretty;
}
.dm-spine-date {
  display: block; font-family: var(--font-headline); font-size: 10.5px;
  color: var(--muted-ink); letter-spacing: .04em;
}

/* ── 포스터 그리드 ── */
.dm-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dm-poster {
  position: relative; display: block; aspect-ratio: 3/4; overflow: hidden;
  border: 2px solid var(--ink); background: var(--surface); text-decoration: none;
  box-shadow: 7px 7px 0 var(--accent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dm-poster:hover {
  transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--accent); text-decoration: none;
}
.dm-poster-img { position: absolute; inset: 0; display: block; }
.dm-poster-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-poster-scan {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.13) 2px 3px);
}
.dm-poster-num {
  position: absolute; top: 9px; left: 11px; z-index: 2;
  font-family: var(--font-headline); font-size: 24px; font-weight: 700;
  color: var(--accent); text-shadow: 2px 2px 0 rgba(0,0,0,.55); letter-spacing: .03em;
}
.dm-poster-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block;
  padding: 24px 20px; pointer-events: none;
  background: linear-gradient(to top, rgba(9,11,16,.94) 0%, rgba(9,11,16,.6) 50%, rgba(9,11,16,0) 100%);
}
.dm-poster-kicker {
  display: block; font-family: var(--font-headline); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; color: #ffb0a6; margin: 0 0 8px;
}
.dm-poster-title {
  display: block; font-family: var(--font-headline); font-size: 21px; font-weight: 400;
  color: #fff; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 9px; text-wrap: pretty;
}
.dm-poster-date {
  display: block; font-family: var(--font-headline); font-size: 10.5px;
  color: rgba(255,255,255,.72); letter-spacing: .05em;
}

@media (max-width: 1000px) { .dm-posters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .dm-spine { max-height: 380px; }
  .dm-posters { grid-template-columns: 1fr; gap: 16px; }
  .dm-poster { aspect-ratio: 4/3; box-shadow: 5px 5px 0 var(--accent); }
  .dm-poster-num { font-size: 20px; }
  .dm-poster-title { font-size: 19px; }
  .dm-poster-overlay { padding: 20px 18px; }
}

/* ──────────────────────────────────────────────────────────────
   16. 홈 — 사이드바 없이 전체 폭 (원본 홈 레이아웃)
   ────────────────────────────────────────────────────────────── */
.dm-home { display: block; width: 100%; }

/* 최근 글 오른쪽 목록이 좁아지지 않도록 번호 열 축소 */
.dm-rec-row { grid-template-columns: 56px 1fr; column-gap: 20px; }
.dm-rec-list { padding-left: 30px; }

/* 화면이 좁으면 최근 글은 1단으로 */
@media (max-width: 1100px) {
  .dm-recent { grid-template-columns: 1fr; }
  .dm-rec-lead { padding: 20px 0 6px; border-right: none; }
  .dm-rec-list { padding-left: 0; margin-top: 6px; }
}

/* ──────────────────────────────────────────────────────────────
   17. 헤더 — 햄버거 · 후원 · 로그인 (원본 이식분)
   ────────────────────────────────────────────────────────────── */
.dm-burger {
  background: none; border: none; cursor: pointer; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 8px; color: var(--ink);
  transition: background .18s ease;
}
.dm-burger:hover { background: var(--surface); }
.dm-burger-box {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4.5px; width: 20px; height: 20px;
}
.dm-burger-bar {
  display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.dm-drawer-open .dm-burger-bar:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.dm-drawer-open .dm-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.dm-drawer-open .dm-burger-bar:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

.dm-donate {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px;
  border: 1px solid var(--accent); background: transparent; border-radius: 8px;
  color: var(--accent); font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  white-space: nowrap; text-decoration: none; flex-shrink: 0;
}
.dm-donate:hover { background: var(--accent); color: var(--bg); text-decoration: none; }

.dm-member {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px;
  border-radius: 8px; color: var(--muted-ink);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; text-decoration: none; flex-shrink: 0;
}
.dm-member:hover { color: var(--accent); text-decoration: none; }

@media (max-width: 640px) { .dm-hide-sm { display: none; } }

/* ── 왼쪽 서랍 메뉴 — 본문을 밀어내는 인라인 방식 (원본과 동일) ── */
.dm-shellwrap { display: flex; align-items: flex-start; width: 100%; }

.dm-drawer {
  flex-shrink: 0; align-self: flex-start;
  width: 0; height: 0; overflow: hidden;
  padding: 40px 0 60px 0;
  border-right: 1px solid transparent;
  opacity: 0;
  transition: width .42s cubic-bezier(.22,1,.36,1),
              padding .42s cubic-bezier(.22,1,.36,1),
              opacity .28s ease, border-color .3s ease;
}
.dm-drawer-open .dm-drawer {
  width: 280px; height: auto; max-height: calc(100vh - 40px);
  padding: 40px 20px 60px 32px;
  border-right-color: var(--border);
  opacity: 1;
  overflow-y: auto;
}
.dm-shellwrap > .dm-main { flex: 1; min-width: 0; }

.dm-drawer-head { display: none; }
.dm-drawer-intro {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.75;
  color: var(--muted-ink); margin: 0;
}

.dm-drawer-sec { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dotted var(--border); }
.dm-drawer-sec--last { border-bottom: none; margin-bottom: 0; }
.dm-drawer-label {
  font-family: var(--font-headline); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-ink); margin: 0 0 10px;
}
.dm-drawer-row {
  display: flex; width: 100%; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 5px 0; font-size: 13.5px; font-weight: 600; color: var(--muted-ink);
  text-decoration: none; white-space: nowrap;
  transition: color .22s ease, transform .22s cubic-bezier(.4,0,.2,1);
}
.dm-drawer-row:hover { color: var(--accent); transform: translateX(2px); text-decoration: none; }
.dm-drawer-row--child { padding-left: 14px; font-size: 12.5px; font-weight: 400; }
.dm-drawer .dm-count { font-family: var(--font-headline); font-size: 11px; color: var(--muted-ink); flex-shrink: 0; }

/* 좁은 화면에서는 오버레이로 동작 */
@media (max-width: 900px) {
  .dm-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.35); }
  .dm-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
    width: 300px; max-width: 84vw; padding: 20px 24px 40px;
    background: var(--bg); border-right: 1px solid var(--border);
    opacity: 1; transform: translateX(-100%);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
  }
  .dm-drawer-open .dm-drawer {
    width: 300px; padding: 20px 24px 40px;
    transform: translateX(0); box-shadow: 24px 0 48px rgba(0,0,0,.25);
  }
  .dm-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
  .dm-drawer-logo { font-family: var(--font-headline); font-size: 17px; color: var(--ink); }
  .dm-drawer-close { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--ink); display: flex; }
}
@media (min-width: 901px) { .dm-scrim { display: none !important; } }

/* 서랍 3단계 분류 */
.dm-drawer-row--gchild { padding-left: 28px; font-size: 12px; font-weight: 400; opacity: .85; }

/* ── 연재·서적 목차 (형제 글 이동) — 원본 postToc ── */
.dm-toc--series { max-height: 46vh; overflow-y: auto; }
.dm-toc--series a,
.dm-toc--series span {
  font-family: var(--font-body); display: block;
  font-size: 11.5px; font-style: italic; color: var(--muted-ink);
  text-decoration: none; padding: 5px 0; line-height: 1.4; opacity: .75;
}
.dm-toc--series a:hover { color: var(--accent); opacity: 1; }
.dm-toc--series .is-muted { opacity: .4; cursor: default; }
.dm-toc--series .is-current {
  font-size: 12px; font-weight: 700; font-style: normal;
  color: var(--accent); opacity: 1;
  padding: 6px 0 6px 10px; margin: 2px 0;
  border-left: 2px solid var(--accent); background: rgba(138,31,31,.07);
}
[data-theme="screen"] .dm-toc--series .is-current { background: rgba(213,73,58,.10); }

/* ──────────────────────────────────────────────────────────────
   18. 서적 표제판 (원본 ily/ingan/econ 마스트헤드) · 읽기 시간
   ────────────────────────────────────────────────────────────── */
.dm-readtime {
  font-family: var(--font-body); font-size: 11px; letter-spacing: .06em;
  color: var(--muted-ink); margin: 0 0 14px; opacity: .8;
}


/* 서적 목차 열 — 장 제목은 굵은 그룹 헤딩 (원본 tocHeadStyle) */
.dm-toc--series .dm-toc-group-head {
  font-family: var(--font-body); display: block; font-size: 11px; font-weight: 700;
  font-style: normal; color: var(--ink); padding: 13px 0 4px;
  line-height: 1.35; letter-spacing: -.01em; opacity: 1;
}
/* 경제학 교정처럼 편(篇) 아래 장(章)이 오는 3단 위계의 중간 층 (원본 tocChapStyle) */
.dm-toc--series .dm-toc-group-subhead {
  font-family: var(--font-body); display: block; font-size: 11px; font-weight: 700;
  font-style: normal; color: var(--ink); padding: 11px 0 3px;
  line-height: 1.35; opacity: 1; cursor: default;
}
.dm-toc--series .dm-toc-group-subhead.is-muted {
  color: var(--muted-ink); opacity: .45; font-weight: 700; font-style: normal;
}
/* 3단 위계에서 절(節) 항목은 장(章) 헤딩보다 한 단 더 들여쓴다 */
.dm-toc--series a.is-econ-item,
.dm-toc--series span.is-econ-item { padding-left: 13px; }
.dm-toc--series .is-current.is-econ-item { padding-left: 23px; }

/* ──────────────────────────────────────────────────────────────
   19. 제목 클래스 우선순위 교정
   본문은 <h2 class="dm-h-sub"> 처럼 태그와 클래스가 어긋나게 쓰인다.
   원본 편집 규칙은 **클래스**가 기준이므로, 클래스 규칙이 반드시 이기도록
   선택자 특정성을 올리고 상속된 태그 속성을 명시적으로 되돌린다.
   ────────────────────────────────────────────────────────────── */

/* 편집자 소제목 — 원본 unityH2Style */
.dm-body .dm-h-sub,
.dm-body h2.dm-h-sub,
.dm-body h3.dm-h-sub {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .01em;
  line-height: 1.45;
  margin: 0 0 14px;
  padding: 0 0 0 11px;
  border-left: 3px solid var(--accent);
  border-bottom: none;
  border-top: none;
  scroll-margin-top: 88px;
}

/* 원문 절 제목 — 원본 gcHeadingStyle */
.dm-body .dm-h-sec,
.dm-body h2.dm-h-sec,
.dm-body h3.dm-h-sec {
  font-family: var(--font-body);
  font-size: 31px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0 0 26px;
  padding: 0 0 16px;
  border-left: none;
  border-bottom: 3px double var(--border);
  scroll-margin-top: 88px;
}

@media (max-width: 720px) {
  .dm-body .dm-h-sub, .dm-body h2.dm-h-sub, .dm-body h3.dm-h-sub { font-size: 13.5px; }
  .dm-body .dm-h-sec, .dm-body h2.dm-h-sec, .dm-body h3.dm-h-sec { font-size: 25px; }
}

/* ──────────────────────────────────────────────────────────────
   20. 사이드 목차 배치 교정
   원본은 열이 하나면 세로(180px), 둘이면 가로 나란히(간격 26px, 최대 400px).
   ────────────────────────────────────────────────────────────── */
.dm-post-cols {
  flex-direction: row;
  gap: 26px;
  width: auto;
  max-width: 400px;
  align-items: flex-start;
}
/* 열이 하나뿐일 때는 원본 tocWrapColStyle (180px) */
.dm-post-cols:has(> nav:only-child) { width: 180px; max-width: 180px; }

.dm-post-cols > nav { flex: 1 1 0; min-width: 0; width: 168px; }
.dm-post-cols > nav + nav { flex-shrink: 0; }

/* 연재 목차는 자체 스크롤 유지 */
.dm-toc--series { max-height: calc(100vh - 190px); }

@media (max-width: 1100px) {
  .dm-post-cols { flex-direction: column; max-width: 180px; }
  .dm-post-cols > nav { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────
   21. 서적 표제판 우선순위 교정
   .dm-body p (justify · 산세리프) 가 표제판 클래스를 눌러버리므로
   .dm-body 를 앞에 붙여 특정성을 올린다. 한글은 어절 단위로 끊는다.
   ────────────────────────────────────────────────────────────── */
/* (옛 dm-bookmast / dm-bm-* 규칙 제거 — 서적도 통일 표제판 dm-mast-* 를 쓴다) */

/* ──────────────────────────────────────────────────────────────
   22. 통일 표제판 — 서적 / 논문 번역 / 집필 세 갈래가 같은 뼈대를 쓴다.
   권위는 ①위아래 이중선의 액자 ②명조 대제목 ③철저한 중앙 정렬
   ④넉넉한 여백 ⑤자간 넓힌 작은 눈썹글자, 이 다섯으로 만든다.
   갈래별로 다른 건 '무엇을 채우느냐'뿐이고 생김새의 격은 같다.
   ────────────────────────────────────────────────────────────── */
.dm-body .dm-mast {
  margin: 0 0 52px; padding: 34px 0 0; text-align: center;
}
.dm-body .dm-mast p,
.dm-body .dm-mast h1 {
  text-align: center; margin-left: auto; margin-right: auto;
  word-break: keep-all; overflow-wrap: normal;
}
/* 이중선 — 두꺼운 선 + 가는 선. 표제를 액자처럼 가둔다 */
.dm-body .dm-mast-rule {
  border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink);
  height: 5px; max-width: 100%;
}
.dm-body .dm-mast-rule--top { margin: 0 0 30px; }
.dm-body .dm-mast-rule--bottom { margin: 30px 0 0; }

.dm-body .dm-mast-eyebrow {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; color: var(--accent);
  margin: 0 auto 14px; padding-left: .18em; line-height: 1.6;
}
.dm-body .dm-mast-cite {
  font-family: var(--font-body); font-size: 11px; letter-spacing: .03em;
  color: var(--muted-ink); margin: 0 auto 22px; line-height: 1.6; max-width: 52ch;
}
/* 서적 앞머리 — 권 / 장 번호 / 장 제목 */
.dm-body .dm-mast-roman {
  font-family: 'Old Standard TT', Georgia, serif; font-size: 13px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--muted-ink);
  margin: 0 auto 12px; padding-left: .34em;
}
.dm-body .dm-mast-chapno {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 800;
  letter-spacing: .22em; color: var(--accent); margin: 0 auto 10px; padding-left: .22em;
}
.dm-body .dm-mast-chapko {
  font-family: 'Noto Serif KR', serif;
  font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--muted-ink);
  margin: 0 auto 18px; max-width: 32ch;
}
/* 원어 제목 — 대제목 위에 조용히 얹힌다 */
.dm-body .dm-mast-orig {
  font-family: 'Old Standard TT', Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 3.4vw, 19px); font-style: italic; font-weight: 400;
  line-height: 1.45; color: var(--muted-ink);
  margin: 0 auto 12px; max-width: 40ch;
}
/*
 * 대제목 — 표제판의 중심.
 * 서체·굵기·자간은 경제학 교정 표제판(.dm-em-sec-ko)을 기준으로 맞췄다.
 * 서적끼리 다른 명조를 쓰면 같은 총서인데도 낱권마다 격이 달라 보인다.
 */
.dm-body .dm-mast-title {
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(22px, 7vw, 33px); font-weight: 700;
  line-height: 1.32; letter-spacing: -.01em; color: var(--ink);
  margin: 0 auto; max-width: 88%; text-wrap: balance;
}
/* 서지 / 부제 */
.dm-body .dm-mast-src {
  font-family: 'Space Grotesk', var(--font-body), sans-serif;
  font-size: 12.5px; line-height: 1.6; color: var(--accent);
  margin: 16px auto 0; max-width: 56ch;
}
/* 지은이 — 가운데. 예전엔 갈래마다 왼쪽·오른쪽으로 제각각이었다 */
.dm-body .dm-mast-by {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .04em;
  color: var(--muted-ink); margin: 16px auto 0; line-height: 1.6;
}

@media (max-width: 640px) {
  .dm-body .dm-mast { margin-bottom: 38px; padding-top: 24px; }
  .dm-body .dm-mast-rule--top { margin-bottom: 22px; }
  .dm-body .dm-mast-rule--bottom { margin-top: 22px; }
  .dm-body .dm-mast-title { max-width: 100%; }
}

/* 사진 위 메타 띠 — 표제판과 다투지 않도록 한 줄로 조용히 */
.dm-leadmeta {
  display: flex; justify-content: center; align-items: baseline;
  flex-wrap: wrap; gap: 8px;
  font-family: var(--font-body); font-size: 12px; color: var(--muted-ink);
  margin: 0 0 22px; line-height: 1.6;
}
.dm-leadmeta .dm-dot { opacity: .45; }

/* (제거됨 — 아래 dm-mast-*/dm-bookmast 각 규칙이 이미 정렬을 명시하므로 이 포괄 규칙이 오히려 덮어쓰고 있었다) */

/* ──────────────────────────────────────────────────────────────
   23. 스크롤바 — 얇고 눈에 띄지 않게 (원본 scrollbar-width:thin 대응)
   ────────────────────────────────────────────────────────────── */
.dm-post-cols,
.dm-toc--series,
.dm-drawer,
.dm-spine,
.dm-body table {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.dm-post-cols::-webkit-scrollbar,
.dm-toc--series::-webkit-scrollbar,
.dm-drawer::-webkit-scrollbar,
.dm-spine::-webkit-scrollbar,
.dm-body table::-webkit-scrollbar { width: 5px; height: 5px; }

.dm-post-cols::-webkit-scrollbar-track,
.dm-toc--series::-webkit-scrollbar-track,
.dm-drawer::-webkit-scrollbar-track,
.dm-spine::-webkit-scrollbar-track,
.dm-body table::-webkit-scrollbar-track { background: transparent; }

.dm-post-cols::-webkit-scrollbar-thumb,
.dm-toc--series::-webkit-scrollbar-thumb,
.dm-drawer::-webkit-scrollbar-thumb,
.dm-spine::-webkit-scrollbar-thumb,
.dm-body table::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.dm-post-cols::-webkit-scrollbar-thumb:hover,
.dm-toc--series::-webkit-scrollbar-thumb:hover,
.dm-drawer::-webkit-scrollbar-thumb:hover,
.dm-spine::-webkit-scrollbar-thumb:hover { background: var(--muted-ink); }

/* 스크롤바가 자리를 차지해 칸이 밀리지 않도록 */
.dm-toc--series, .dm-post-cols { scrollbar-gutter: stable; }

/* ──────────────────────────────────────────────────────────────
   24. 원문 제목 병기 · 히어로 상단 영역 정렬
   ────────────────────────────────────────────────────────────── */
.dm-title-orig {
  text-align: center; font-family: 'Old Standard TT', Georgia, serif;
  font-style: italic; font-size: clamp(15px, 3.2vw, 19px); line-height: 1.4;
  color: var(--muted-ink); margin: 0 auto 10px; max-width: 44ch;
  word-break: keep-all;
}
.dm-readtime { text-align: center; margin: 0 0 18px; }

/* ── 총 발행 수 안내 · 후원/가입 CTA (원본 값) ── */
.dm-morenote { max-width: 640px; margin: 0 auto; }
.dm-morenote p { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--muted-ink); margin: 0; }
.dm-morenote strong { color: var(--ink); }

.dm-cta { text-align: center; padding: 64px 0; }
.dm-cta-title {
  font-family: var(--font-headline); font-weight: 800; font-size: 28px;
  color: var(--ink); margin: 0 0 14px;
}
.dm-cta-text {
  font-family: var(--font-body); font-size: 14px; color: var(--muted-ink);
  margin: 0 auto 28px; max-width: 480px;
}
.dm-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.dm-cta-btn {
  font-family: var(--font-body); padding: 12px 26px;
  border: 1px solid var(--ink); background: none; color: var(--ink);
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.dm-cta-btn:hover { background: var(--ink); color: var(--bg); text-decoration: none; }
.dm-cta-btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.dm-cta-btn--primary:hover { background: var(--accent); color: #fff; opacity: .88; }

@media (max-width: 720px) {
  .dm-cta { padding: 48px 0; }
  .dm-cta-title { font-size: 22px; }
}

/* ──────────────────────────────────────────────────────────────
   25. 『경제학 교정: 사회주의 생산양식』 전용 표제판 — 원본 값 그대로
   ────────────────────────────────────────────────────────────── */
.dm-body .dm-econmast { margin: 2px 0 44px; padding: 26px 0 0; text-align: center; }
.dm-body .dm-econmast p, .dm-body .dm-econmast h1 { text-align: center; margin-left: auto; margin-right: auto; word-break: keep-all; }

.dm-body .dm-em-label {
  font-family: 'Old Standard TT', Georgia, serif; font-size: 12px;
  letter-spacing: .42em; text-transform: uppercase; color: var(--muted-ink);
  margin: 0 0 6px; padding-left: .42em;
}
.dm-body .dm-em-book {
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em;
  color: var(--muted-ink); margin: 0 0 20px;
}
.dm-body .dm-em-rule { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 5px; }
.dm-body .dm-em-rule--top { margin: 0 0 22px; }
.dm-body .dm-em-rule--bottom { border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink); margin: 0 0 15px; }

.dm-body .dm-em-part-ru {
  font-family: 'Old Standard TT', Georgia, serif; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted-ink); margin: 0 0 3px; padding-left: .22em;
}
.dm-body .dm-em-part-ko {
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .24em;
  color: var(--muted-ink); margin: 0 0 16px; padding-left: .24em;
}
.dm-body .dm-em-chapno {
  font-family: 'Old Standard TT', Georgia, serif; font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-ink); margin: 0 0 3px; padding-left: .16em;
}
.dm-body .dm-em-chap-ru {
  font-family: 'Old Standard TT', Georgia, serif; font-style: italic; font-size: 13.5px;
  line-height: 1.4; color: var(--muted-ink); margin: 0 auto 2px; max-width: 76%;
}
.dm-body .dm-em-chap-ko {
  font-family: 'Noto Serif KR', serif; font-size: 13.5px; line-height: 1.4;
  color: var(--muted-ink); margin: 0 auto 22px; max-width: 80%;
}
.dm-body .dm-em-sec-mark {
  font-family: 'Old Standard TT', Georgia, serif; font-weight: 700; font-size: 22px;
  letter-spacing: .3em; color: var(--accent); margin: 0 0 14px; padding-left: .3em;
}
.dm-body .dm-em-sec-ko {
  font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: clamp(22px, 7vw, 33px);
  line-height: 1.32; color: var(--ink); margin: 0 auto 22px; max-width: 88%;
}
.dm-body .dm-em-heroNum {
  font-family: 'Old Standard TT', Georgia, serif; font-weight: 700;
  font-size: clamp(23px, 7.5vw, 34px); letter-spacing: .2em; color: var(--ink);
  margin: 0 0 4px; padding-left: .2em;
}
.dm-body .dm-em-heroNumKo {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .34em;
  color: var(--accent); margin: 0 0 18px; padding-left: .34em;
}
.dm-body .dm-em-heroKo {
  font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: clamp(20px, 6vw, 26px);
  line-height: 1.42; color: var(--ink); margin: 0 auto 22px; max-width: 82%;
}
.dm-body .dm-em-pub {
  font-family: 'Old Standard TT', Georgia, serif; font-size: 11.5px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--muted-ink); margin: 0; padding-left: .28em;
}

/* ──────────────────────────────────────────────────────────────
   26. 접근성·마감 보완
   ────────────────────────────────────────────────────────────── */

/* 움직임 최소화를 선호하는 사용자 — 마퀴·서랍·아코디언 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .dm-hero-marquee-track { animation: none !important; transform: none !important; }
  .dm-hero-cursor { animation: none !important; }
}

/* 키보드 포커스 표시 — 마우스 클릭 시에는 안 보이고 키보드 이동 시에만 */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 본문으로 건너뛰기 — 포커스 시에만 나타나게 */
.dm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px;
  font-family: var(--font-body); font-size: 13px; text-decoration: none;
}
.dm-skip:focus { left: 8px; top: 8px; }

/* 사진 없는 글의 빈 자리 (방문자용) — 안내 문구 없이 조용한 자리표시 */
.dm-hero-empty--plain { background: none; }

/* 인쇄 — 장식 제거, 링크 주소 표기 */
@media print {
  .dm-drawer, .dm-scrim, .dm-burger, .dm-head-tools,
  .dm-hero-panel, .dm-score, .dm-sband-tag, .dm-cta, .dm-morenote { display: none !important; }
  .dm-hero-empty { display: none !important; }
  .dm-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
  .dm-post { display: block; }
}

/* 긴 URL·외국어 단어가 레이아웃을 밀어내지 않도록 */
.dm-body a, .dm-body p { overflow-wrap: break-word; }

/* ──────────────────────────────────────────────────────────────
   27. 분류 화면 — 원본 CATEGORY VIEW 값 그대로
   ────────────────────────────────────────────────────────────── */
.dm-catview { max-width: 1180px; }

.dm-cat-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 10px;
}
.dm-cat-title {
  font-family: var(--font-headline);
  font-size: 38px; font-weight: 400; letter-spacing: -.015em; line-height: 1.2;
  margin: 0 0 8px; color: var(--ink); text-wrap: balance; word-break: keep-all;
}
.dm-cat-meta {
  font-family: var(--font-body); font-size: 13px; color: var(--muted-ink);
  margin: 0 0 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border);
}
.dm-cat-desc {
  font-family: var(--font-body); font-size: 14px; line-height: 1.8;
  color: var(--muted-ink); margin: -20px 0 34px;
}
.dm-cat-empty {
  font-family: var(--font-body); font-size: 15px; color: var(--muted-ink);
  line-height: 1.7; padding: 40px 0;
}

.dm-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.dm-cat-card {
  display: flex; flex-direction: column; text-align: left; text-decoration: none;
  transition: transform .34s cubic-bezier(.34,1.56,.64,1);
}
.dm-cat-card:hover { transform: translateY(-10px) scale(1.025); z-index: 2; text-decoration: none; }
.dm-cat-card-img {
  display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden;
  background: var(--surface); margin-bottom: 14px; transition: box-shadow .34s ease;
}
.dm-cat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-cat-card:hover .dm-cat-card-img { box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); }

/* 연재(시리즈) 카드 — 하위 분류 하나를 한 장으로 묶어 보여준다 */
.dm-cat-card--series .dm-cat-card-img {
  box-shadow: 0 0 0 1px var(--surface) inset, 8px 8px 0 var(--accent);
}
.dm-cat-card-kicker {
  display: inline-block; margin: 10px 0 2px;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase;
}
.dm-cat-card--series .dm-cat-card-title { font-weight: 700; }
.dm-cat-card-kicker.is-live {
  color: var(--ink);
  background: var(--accent);
  padding: 1px 7px 2px;
  letter-spacing: .12em;
  align-self: flex-start;
  width: fit-content;
  max-width: max-content;
}
.dm-cat-card-title {
  font-family: var(--font-headline); font-size: 15px; font-weight: 400;
  color: var(--ink); line-height: 1.55; margin: 0 0 6px;
  text-wrap: pretty; word-break: keep-all;
}
.dm-cat-card-date { font-family: var(--font-headline); font-size: 11.5px; color: var(--muted-ink); }

@media (max-width: 1080px) { .dm-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .dm-cat-grid { grid-template-columns: 1fr; gap: 28px; }
  .dm-cat-title { font-size: 26px; }
  .dm-cat-card-title { font-size: 14.5px; }
}

/* 연재·서적 분류 전용 타임라인 목록 — 세로선 + 「연재 NN」 배지 */
.dm-cat-timeline { position: relative; padding-left: 30px; max-width: 640px; }
.dm-cat-timeline::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border);
}
.dm-cat-tl-item { position: relative; display: block; padding-bottom: 32px; }
.dm-cat-tl-item::before {
  content: ''; position: absolute; left: -30px; top: 4px;
  width: 9px; height: 9px; border: 1px solid var(--accent); background: var(--bg, var(--surface));
}
.dm-cat-tl-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--accent); letter-spacing: .04em;
  padding: 2px 7px; margin-bottom: 8px;
}
.dm-cat-tl-title {
  display: block; font-family: var(--font-headline); font-size: 16.5px; font-weight: 400;
  color: var(--ink); line-height: 1.5; margin-bottom: 5px; text-decoration: none;
  word-break: keep-all; text-wrap: pretty;
}
.dm-cat-tl-title:hover { color: var(--accent); }
.dm-cat-tl-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-ink); }

/* ──────────────────────────────────────────────────────────────
   28. 본문 서식 — 원본 값 정밀 대조 반영
   ────────────────────────────────────────────────────────────── */

/* 모바일에서는 원본이 본문을 키우고 행간도 넓힌다 (17.5px / 1.9) */
@media (max-width: 720px) {
  :root { --body-fs: 17.5px; --body-lh: 1.9; }
}

/* 표 — 원본 unityTable 계열. 격자 테두리가 아니라 위아래 굵은 선만 쓴다 */
.dm-body table {
  width: 100%; border-collapse: collapse; margin: 6px 0 30px;
  font-family: var(--font-body); font-size: 13px;
  display: table;                 /* 가로 스크롤용 block 지정을 되돌림 */
}
.dm-body th, .dm-body td {
  border: 0; text-align: left; vertical-align: top;
  line-height: 1.7; color: var(--ink);
}
.dm-body th {
  padding: 9px 10px; font-size: 12px; font-weight: 700;
  color: var(--ink); letter-spacing: .02em; text-transform: none;
  background: none;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.dm-body td {
  padding: 9px 10px; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.dm-body table caption {
  caption-side: top; text-align: left;
  font-family: var(--font-body); font-size: 12px; font-style: italic;
  color: var(--muted-ink); margin: 0 0 10px; letter-spacing: .01em;
}
/* 좁은 화면에서만 가로 스크롤 허용 */
@media (max-width: 720px) {
  .dm-body table { display: block; overflow-x: auto; max-width: 100%; }
}

/* 원본 subsec / gcSub — 본문 중간 굵은 소제목 (강조색 좌측 바, 본문색 글자) */
.dm-body .dm-h-subsec {
  font-family: var(--font-body); font-size: 17.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em; line-height: 1.4;
  margin: 34px 0 12px; padding-left: 12px; border-left: 3px solid var(--accent);
  scroll-margin-top: 88px;
}
@media (max-width: 720px) { .dm-body .dm-h-subsec { font-size: 16px; } }

/* 원본 h2Style — 아주 작은 이탤릭 라벨형 제목 (연한 좌측 바) */
.dm-body .dm-h-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; font-style: italic;
  color: var(--muted-ink); letter-spacing: .02em;
  margin: 0 0 10px; padding-left: 10px; border-left: 2px solid var(--border);
  scroll-margin-top: 88px;
}

/* ──────────────────────────────────────────────────────────────
   29. 조직 소개 페이지(PURPOSE VIEW) — 원본 값 그대로
   ────────────────────────────────────────────────────────────── */
@keyframes dashFlow { to { stroke-dashoffset: -72; } }
@keyframes diagFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes diagPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 14px 2px var(--diag-glow, rgba(91,156,232,.35)); } }

/* 이 페이지는 자체 제목·눈썹·날짜 줄을 쓰므로, 워드프레스 기본 제목 영역은 숨긴다 */
.dm-post:has(.dm-purpose) > div > .dm-title,
.dm-post:has(.dm-purpose) > div > .dm-title-orig,
.dm-post:has(.dm-purpose) > div > .dm-readtime,
.dm-post:has(.dm-purpose) > div > .dm-leadmeta,
.dm-post:has(.dm-purpose) > div > .dm-series,
.dm-post:has(.dm-purpose) > div > .dm-meta { display: none; }

.dm-purpose { max-width: 840px; margin: 0 auto; padding: 72px 48px 150px; }
.dm-purpose-eyebrow {
  text-align: center;
  font-family: var(--font-headline); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
}
[data-theme="screen"] .dm-purpose-eyebrow { text-shadow: 0 0 7px rgba(150,180,255,.4); }
.dm-purpose-title {
  text-align: center;
  font-family: var(--font-headline); font-size: 46px; font-weight: 400;
  line-height: 1.28; letter-spacing: -.01em; color: var(--ink); margin: 0 auto 22px;
  text-wrap: balance; word-break: keep-all; max-width: 760px;
}
.dm-purpose-lead {
  font-family: var(--font-body); font-size: 18.5px; font-weight: 400; line-height: 1.75;
  color: var(--muted-ink); margin: 0 0 28px; padding-left: 14px; border-left: 2px solid var(--accent);
  word-break: keep-all;
}
.dm-purpose-date {
  font-family: var(--font-body); font-size: 12px; color: var(--muted-ink);
  margin: 0 0 60px; padding-bottom: 32px; border-bottom: 3px double var(--border); letter-spacing: .04em;
}
.dm-purpose p {
  font-family: var(--font-body); font-size: 17.5px; line-height: 1.95; color: var(--ink);
  margin: 0 auto 26px; letter-spacing: -.003em; max-width: 700px; text-align: justify;
}
.dm-purpose h2 {
  font-family: var(--font-headline); font-size: 22px; font-weight: 400; line-height: 1.4; color: var(--ink);
  margin: 68px auto 24px; max-width: 700px; padding-bottom: 12px; border-bottom: 1px dotted var(--border);
}
.dm-purpose blockquote {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif; font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.7; color: var(--ink); margin: 52px auto; max-width: 700px;
  padding: 6px 0 6px 24px; border-left: 3px solid var(--accent); text-wrap: pretty; word-break: keep-all;
}

/* 도식 */
.dm-purpose figure { margin: 64px -40px; }
.dm-purpose-diagwrap {
  --dm-s: 1.4;
  display: flex; justify-content: center; align-items: flex-start;
  width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 0;
}
.dm-purpose figcaption {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif; font-style: italic; font-size: 13.5px;
  color: var(--muted-ink); margin-top: 14px; line-height: 1.6; text-align: center;
}
/* 데스크톱에서는 원본처럼 1.4배 확대(diagScale), 모바일은 원본 크기 그대로 */
.dm-diag-outer { flex-shrink: 0; position: relative; margin: 0 auto; }
.dm-diag-inner { position: absolute; top: 0; left: 0; transform-origin: top left; transform: scale(var(--dm-s, 1.4)); }

/* 겉틀 크기는 늘 확대율을 따라간다 — 좁은 화면에서 도식이 넘치지 않게. */
.dm-diag-outer--fig1 { width: calc(460px * var(--dm-s, 1.4)); height: calc(380px * var(--dm-s, 1.4)); }
.dm-diag-inner--fig1 { width: 460px; height: 380px; }
.dm-diag-outer--fig2 { width: calc(520px * var(--dm-s, 1.4)); height: calc(270px * var(--dm-s, 1.4)); }
.dm-diag-inner--fig2 { width: 520px; height: 270px; }
.dm-diag-outer--fig3 { width: calc(480px * var(--dm-s, 1.4)); height: calc(600px * var(--dm-s, 1.4)); }
.dm-diag-inner--fig3 { width: 480px; height: 600px; }


.dm-diag-tag {
  position: absolute; top: 2px; left: 2px; font: 700 9px var(--font-mono);
  letter-spacing: .04em; text-transform: uppercase; opacity: .8;
  color: #2a5c9c;
}
[data-theme="screen"] .dm-diag-tag { color: #5b9ce8; }
.dm-diag-node, .dm-diag-root, .dm-diag-leaf, .dm-diag-ghost {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; border-radius: 6px;
}
.dm-diag-node {
  background: #f2f5fa; border: 1.5px dashed #8fa9cc; color: #2a3c55; font-weight: 500;
  animation: diagFloat 4.5s ease-in-out infinite;
}
.dm-diag-root {
  background: #e7eefc; border: 1.5px solid #2a5c9c; color: #16294a; font-weight: 500;
  --diag-glow: rgba(42,92,156,.28); animation: diagPulse 3.6s ease-in-out infinite;
}
.dm-diag-leaf { background: #f2f5fa; border: 1.5px dotted #8fa9cc; color: #5b7699; font-weight: 400; }
.dm-diag-ghost { background: #f2f5fa; border: 1.5px dotted #8fa9cc; color: #93a3ba; opacity: .7; font-weight: 400; }
[data-theme="screen"] .dm-diag-node { background: #141c2e; border-color: #3d6fb0; color: #cfe0f7; }
[data-theme="screen"] .dm-diag-root { background: #182543; border-color: #5b9ce8; color: #eaf2ff; --diag-glow: rgba(91,156,232,.4); }
[data-theme="screen"] .dm-diag-leaf { background: #141c2e; border-color: #3d6fb0; color: #8fb3de; }
[data-theme="screen"] .dm-diag-ghost { background: #141c2e; border-color: #3d6fb0; color: #5a6d8c; }
.dm-diag-flowA { stroke: #2a5c9c; }
.dm-diag-flowB { stroke: #8fa9cc; }
[data-theme="screen"] .dm-diag-flowA { stroke: #5b9ce8; }
[data-theme="screen"] .dm-diag-flowB { stroke: #3d6fb0; }
.dm-diag-flowA, .dm-diag-flowB { animation: dashFlow 3s linear infinite; }

@media (max-width: 720px) {
  .dm-purpose { padding: 40px 20px 90px; }
  .dm-purpose-title { font-size: 30px; }
  .dm-purpose-lead { font-size: 16px; }
  .dm-purpose-date { margin-bottom: 44px; padding-bottom: 26px; }
  .dm-purpose p { font-size: 16.5px; }
  .dm-purpose h2 { font-size: 18px; margin: 48px auto 20px; }
  .dm-purpose blockquote { font-size: 18px; margin: 40px auto; }
  .dm-purpose figure { margin: 40px 0; }
}

/* ──────────────────────────────────────────────────────────────
   30. 댓글 영역 — 사이트 색 토큰에 맞춤
   워드프레스닷컴/Jetpack 이 주입하는 기본 회색 상자가 어두운 배경에서
   그대로 튀어나오므로, 원본이 쓰던 색 토큰(ink·muted·accent·surface)에 맞춘다.
   ────────────────────────────────────────────────────────────── */
.dm-comments {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border);
}
.dm-comments h2, .dm-comments h3,
.dm-comments .comment-reply-title {
  font-family: var(--font-headline); font-size: 20px; font-weight: 400;
  color: var(--ink); margin: 0 0 20px; letter-spacing: -.01em;
}
.dm-comments .comment-notes,
.dm-comments .logged-in-as,
.dm-comments .comment-form-cookies-consent label {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.7;
  color: var(--muted-ink); margin: 0 0 18px;
}
.dm-comments label {
  display: block; font-family: var(--font-body); font-size: 12px;
  font-weight: 700; letter-spacing: .04em; color: var(--muted-ink); margin: 0 0 6px;
}
.dm-comments input[type="text"],
.dm-comments input[type="email"],
.dm-comments input[type="url"],
.dm-comments textarea {
  width: 100%; box-sizing: border-box;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.7;
  padding: 12px 14px; margin: 0 0 18px;
  transition: border-color .18s ease;
}
.dm-comments textarea { min-height: 130px; resize: vertical; }
.dm-comments input:focus, .dm-comments textarea:focus {
  outline: none; border-color: var(--accent);
}
.dm-comments input::placeholder, .dm-comments textarea::placeholder { color: var(--muted-ink); opacity: .65; }

.dm-comments .submit,
.dm-comments input[type="submit"] {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
  padding: 11px 26px; cursor: pointer;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 4px;
  transition: opacity .18s ease;
}
.dm-comments .submit:hover, .dm-comments input[type="submit"]:hover { opacity: .86; }

.dm-comments .comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.dm-comments .comment-list li { border-bottom: 1px dotted var(--border); padding: 18px 0; }
.dm-comments .comment-author, .dm-comments .fn {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
  color: var(--ink); font-style: normal;
}
.dm-comments .comment-meta, .dm-comments .comment-metadata a {
  font-family: var(--font-body); font-size: 11.5px; color: var(--muted-ink); text-decoration: none;
}
.dm-comments .comment-content p {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.85;
  color: var(--ink); margin: 8px 0 0; text-align: left;
}
.dm-comments .avatar { border-radius: 50%; margin-right: 10px; vertical-align: middle; }

/* Jetpack 이 iframe 으로 넣는 댓글창 — 배경이 튀지 않도록 */
.dm-comments iframe { max-width: 100%; background: transparent; }


/* ──────────────────────────────────────────────────────────────
   31. 사진 없는 글 — 원본(image-slot)처럼 빈 자리 상자를 그대로 유지한다.
   테두리·앰버 오프셋 그림자는 살리고, 사선 무늬만 쓰지 않는다.
   ────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────
   32. 후주 크기 축소
   ────────────────────────────────────────────────────────────── */
.dm-body .dm-endnotes-head { font-size: 20px; margin: 0 0 4px; }
.dm-body .dm-endnotes-hint { font-size: 11px; line-height: 1.6; }
.dm-body .dm-endnote { gap: 10px; padding: 10px 2px; }
.dm-body .dm-endnote-num { font-size: 11.5px; min-width: 20px; }
.dm-body .dm-endnote-text { font-size: 11.5px; line-height: 1.7; }
.dm-body .dm-endnote-tag { font-size: 8.5px; padding: 1px 4px; margin-right: 6px; }

@media (max-width: 720px) {
  .dm-body .dm-endnotes-head { font-size: 18px; }
  .dm-body .dm-endnote-text { font-size: 11px; }
}

/* ──────────────────────────────────────────────────────────────
   33. <a> 안의 블록요소를 span 으로 바꾼 데 따른 표시 보정
   (p/h2/h3/div 는 <a> 안에 올 수 없어 브라우저가 태그를 강제로 닫아버렸고,
    그 결과 자리표시자가 컨테이너 밖으로 튀어나와 화면 전체를 덮어
    모든 링크 클릭을 가로막고 있었다.)
   ────────────────────────────────────────────────────────────── */
.dm-rec-kicker, .dm-rec-lead-title,
.dm-spine-title, .dm-cat-card-title,
.dm-item-series, .dm-item-title, .dm-item-excerpt { display: block; }
.dm-item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ──────────────────────────────────────────────────────────────
   34. 원본 레이아웃 프레임 — 좌우 세로 디자인 선
   원본 bodyRowStyle: max-width 1340px, 좌우 1px 테두리.
   화면 전체를 감싸 격자 느낌을 주는 핵심 요소였는데 빠져 있었다.
   ────────────────────────────────────────────────────────────── */
.dm-shellwrap {
  max-width: 1600px; margin: 0 auto; position: relative;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
@media (max-width: 900px) {
  .dm-shellwrap { border-left: none; border-right: none; }
}

/* ── 더 보기 / 접기 버튼 (원본 moreRow) ── */
.dm-more-row { display: flex; align-items: center; gap: 20px; margin: 30px 0 0; }
.dm-more-rule { flex: 1; height: 1px; background: var(--border); }
.dm-more-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--border); color: var(--muted-ink);
  font: 600 12px var(--font-headline); letter-spacing: .04em;
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  transition: color .22s, border-color .22s, transform .22s, background .22s;
}
.dm-more-btn:hover {
  color: var(--ink); border-color: var(--accent);
  background: var(--surface); transform: translateY(-1px);
}
.dm-more-sub { color: var(--accent); font-weight: 700; }
.dm-more-chev {
  display: inline-block; font-size: 10px; line-height: 1;
  transition: transform .3s ease;
}
.dm-more-btn[aria-expanded="true"] .dm-more-chev { transform: rotate(180deg); }
@media (max-width: 720px) {
  .dm-more-row { gap: 14px; margin: 24px 0 0; }
}

/* 더 보기 접힘 상태 — 대표글 제외 4편만 노출 */
.dm-rec-list .dm-rec-row:nth-child(n+5) { display: none; }
.dm-rec-list.is-expanded .dm-rec-row:nth-child(n+5) { display: grid; }

/* ──────────────────────────────────────────────────────────────
   35. 댓글 영역 마감 — 원본 색 토큰에 맞춘 최종 보정
   ────────────────────────────────────────────────────────────── */
.dm-comments { max-width: 46rem; margin-left: auto; margin-right: auto; }
.dm-comments > h2 {
  font-family: var(--font-headline); font-size: 20px; font-weight: 400;
  color: var(--ink); margin: 0 0 20px; letter-spacing: -.01em;
  padding-bottom: 12px; border-bottom: 1px dotted var(--border);
}
.dm-comments .comment-list > li { list-style: none; }
.dm-comments .comment-list .children { list-style: none; padding-left: 22px; }
.dm-comments .comment-respond { margin-top: 28px; }
.dm-comments .comment-form-comment { margin: 0; }
.dm-comments p.form-submit { margin: 4px 0 0; }
.dm-comments .comment-form-author,
.dm-comments .comment-form-email,
.dm-comments .comment-form-url { margin-bottom: 0; }
.dm-comments .required { color: var(--accent); }
.dm-comments .reply a {
  font-family: var(--font-body); font-size: 11.5px; color: var(--accent);
  text-decoration: none; letter-spacing: .03em;
}
.dm-comments .reply a:hover { text-decoration: underline; }
.dm-comments .no-comments,
.dm-comments .nocomments {
  font-family: var(--font-body); font-size: 13.5px; color: var(--muted-ink);
  padding: 18px 0;
}

/* 워드프레스닷컴이 iframe 으로 끼워넣는 기본 댓글창이 어두운 배경에서 튀는 것을 막는다 */
.dm-comments #respond iframe,
.dm-comments iframe.jetpack_remote_comment { background: transparent; max-width: 100%; }

/* 이론 포스터 접힘 — 원본 기준 3편만 노출 */
.dm-posters .dm-poster:nth-child(n+4) { display: none; }
.dm-posters.is-expanded .dm-poster:nth-child(n+4) { display: block; }

/* 망치 박살 — TV 화면 안에 꽉 채운다 */
smash-toy.dm-tv-screen-img {
  display: block; width: 100%; height: 100%;
  cursor: pointer; touch-action: manipulation;
}

/* ──────────────────────────────────────────────────────────────
   36. 회전 정육면체 (서랍 상단) — 이미지는 테마 경로로
   ────────────────────────────────────────────────────────────── */
.dm-cube-box {
  --dm-cube: 132px; --dm-half: 66px; --dm-spin: 9.5s;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; margin: 4px auto 18px;
}
.dm-cube-word {
  width: 172px; max-width: 80%; aspect-ratio: 1983/280;
  background: url("images/cube-1.png") center/contain no-repeat;
}
.dm-cube-stage {
  position: relative; perspective: 1400px;
  width: calc(var(--dm-cube) + 24px); height: calc(var(--dm-cube) + 24px);
}
.dm-cube {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: var(--dm-cube); height: var(--dm-cube);
  transform-style: preserve-3d;
  animation: dm-spin360 var(--dm-spin) linear infinite;
}
.dm-cube-face {
  position: absolute; left: 0; top: 0;
  width: var(--dm-cube); height: var(--dm-cube);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  backface-visibility: hidden;
}
.dm-f1 { transform: translateZ(var(--dm-half)); background-image: url("images/cube-2.png"); }
.dm-f2 { transform: rotateY(90deg) translateZ(var(--dm-half)); background-color: #e30613; }
.dm-f3 { transform: rotateY(180deg) translateZ(var(--dm-half)); background-image: url("images/cube-2.png"); }
.dm-f4 { transform: rotateY(-90deg) translateZ(var(--dm-half)); background-color: #b1050f; }
@keyframes dm-spin360 { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .dm-cube { animation: none; } }
@media (max-width: 680px) { .dm-cube-box { --dm-cube: 108px; --dm-half: 54px; } }

/* 액체 로고 — 머릿글 브랜드 자리 */
diamat-morph-logo.dm-brand-text {
  position: relative; display: inline-flex; align-items: center;
  height: 1.35em; min-width: 7.2em;
  cursor: pointer; user-select: none; vertical-align: middle;
}
diamat-morph-logo:not(:defined) { visibility: hidden; }
diamat-morph-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ──────────────────────────────────────────────────────────────
   37. 히어로 크라운 스핀 — 원본 Diamat Crown Spin
   DiAMAT 글자가 '위'에 오고, 그 아래 정육면체가 입체로 회전한다.
   원본은 94x96px 틀 안에 300x308 을 0.3117 배로 축소해 넣었다.
   ────────────────────────────────────────────────────────────── */
.dm-crown-spin {
  --dm-crown: 62px; --dm-crown-half: 31px; --dm-crown-spin: 9.5s;
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  width: 94px; min-height: 96px;
  pointer-events: none; user-select: none;
}
.dm-crown-word {
  width: 76px; aspect-ratio: 1983/280; margin-bottom: 4px;
  background: url("images/cube-1.png") center/contain no-repeat;
}
.dm-crown-stage {
  position: relative; perspective: 700px;
  width: var(--dm-crown); height: var(--dm-crown);
}
.dm-crown-cube {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: var(--dm-crown); height: var(--dm-crown);
  transform-style: preserve-3d;
  animation: dm-crown-spin var(--dm-crown-spin) linear infinite;
}
.dm-crown-face {
  position: absolute; left: 0; top: 0;
  width: var(--dm-crown); height: var(--dm-crown);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  backface-visibility: hidden;
}
.dm-cf1 { transform: translateZ(var(--dm-crown-half)); background-image: url("images/cube-2.png"); }
.dm-cf2 { transform: rotateY(90deg)  translateZ(var(--dm-crown-half)); background-color: #e30613; }
.dm-cf3 { transform: rotateY(180deg) translateZ(var(--dm-crown-half)); background-image: url("images/cube-2.png"); }
.dm-cf4 { transform: rotateY(-90deg) translateZ(var(--dm-crown-half)); background-color: #b1050f; }
@keyframes dm-crown-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .dm-crown-cube { animation: none; } }

/* ──────────────────────────────────────────────────────────────
   38. 서랍 분류 줄바꿈 — 긴 서명이 밖으로 삐져나가지 않게
   ────────────────────────────────────────────────────────────── */
.dm-drawer-row {
  white-space: normal;          /* nowrap 해제 */
  align-items: flex-start;
  word-break: keep-all;         /* 한글은 어절 단위로 */
  overflow-wrap: anywhere;      /* 그래도 넘치면 강제 줄바꿈 */
  line-height: 1.45;
}
.dm-drawer-row > span:first-child { flex: 1 1 auto; min-width: 0; }
.dm-drawer-row .dm-count {
  flex: 0 0 auto; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dm-drawer { overflow-x: hidden; }

/* ──────────────────────────────────────────────────────────────
   39. 댓글 — 원본(Diamat Comments) 양식
   ────────────────────────────────────────────────────────────── */
.dm-comments .dm-cmt-head {
  font-family: var(--font-headline); font-size: 21px; font-weight: 400;
  color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em;
  padding: 0; border: none; display: flex; align-items: baseline; gap: 10px;
}
.dm-comments .dm-cmt-count { color: var(--accent); font-size: 16px; font-weight: 700; }
.dm-comments .dm-cmt-note {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.75;
  color: var(--muted-ink); margin: 0 0 20px;
}
.dm-comments .dm-cmt-form {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 16px 18px; background: none;
}
.dm-comments .dm-cmt-field { margin: 0 0 12px; }
.dm-comments .dm-cmt-field textarea {
  width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical;
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.75;
  padding: 12px 14px;
}
.dm-comments .dm-cmt-field textarea::placeholder { color: var(--muted-ink); opacity: .7; }
.dm-comments .dm-cmt-author,
.dm-comments .dm-cmt-email {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 14px 0 0;
}
.dm-comments .dm-cmt-author label,
.dm-comments .dm-cmt-email label {
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted-ink);
  font-weight: 400; margin: 0; letter-spacing: .02em;
}
.dm-comments .dm-cmt-author input,
.dm-comments .dm-cmt-email input {
  width: 150px; background: none; border: none;
  border-bottom: 1px solid var(--border); border-radius: 0;
  color: var(--ink); font-family: var(--font-body); font-size: 13px;
  padding: 4px 2px; margin: 0;
}
.dm-comments .dm-cmt-author input:focus,
.dm-comments .dm-cmt-email input:focus { outline: none; border-bottom-color: var(--accent); }
.dm-comments .form-submit { float: right; margin: 0; }
.dm-comments .form-submit input[type="submit"] {
  background: var(--accent); color: #10131f; border: none; border-radius: 3px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
  padding: 9px 30px; cursor: pointer; transition: opacity .18s ease;
}
.dm-comments .form-submit input[type="submit"]:hover { opacity: .86; }
.dm-comments .dm-cmt-form::after { content: ""; display: block; clear: both; }

.dm-cmt-join {
  margin: 16px 0 0; padding: 22px 18px; text-align: center;
  border: 1px dashed var(--border); border-radius: 4px;
}
.dm-cmt-join p {
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink); margin: 0 0 14px;
}
.dm-cmt-join-btn {
  display: inline-block; background: var(--accent); color: #10131f;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  padding: 10px 24px; border-radius: 3px; text-decoration: none;
  transition: opacity .18s ease;
}
.dm-cmt-join-btn:hover { opacity: .86; text-decoration: none; }

/* 댓글 — 빈 상태·부가 안내 */
.dm-cmt-empty {
  font-family: var(--font-body); font-size: 13.5px; color: var(--muted-ink);
  margin: 0 0 22px; padding: 18px 0; border-top: 1px dotted var(--border);
  border-bottom: 1px dotted var(--border); text-align: center;
}
.dm-cmt-closed {
  font-family: var(--font-body); font-size: 13px; color: var(--muted-ink);
  margin: 0; padding: 16px 0; text-align: center;
}
.dm-comments .dm-cmt-cookies {
  margin: 2px 0 12px; display: flex; align-items: flex-start; gap: 7px; clear: both;
}
.dm-comments .dm-cmt-cookies input { margin: 2px 0 0; flex: 0 0 auto; }
.dm-comments .dm-cmt-cookies label {
  font-family: var(--font-body); font-size: 11.5px; color: var(--muted-ink); line-height: 1.5;
}
.dm-cmt-privacy {
  font-family: var(--font-body); font-size: 11px; color: var(--muted-ink);
  opacity: .8; margin: 10px 0 0; line-height: 1.6;
}
.dm-cmt-await {
  font-family: var(--font-body); font-size: 11.5px; color: var(--accent); margin: 0 0 8px;
}
.dm-cmt-replywrap { margin-top: 8px; }

@media (max-width: 600px) {
  .dm-comments .dm-cmt-author,
  .dm-comments .dm-cmt-email { display: flex; margin: 0 0 10px; }
  .dm-comments .dm-cmt-author input,
  .dm-comments .dm-cmt-email input { flex: 1 1 auto; width: auto; }
  .dm-comments .form-submit { float: none; }
  .dm-comments .form-submit input[type="submit"] { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────
   40. 글 끝 역자·일자 — 원본은 font-family 를 지정하지 않고 상속받는다.
   상위가 갈무리 계열이므로 본문 세리프가 아니라 갈무리로 나와야 한다.
   ────────────────────────────────────────────────────────────── */
.dm-post-foot p { font-family: var(--font-headline); }

/* ──────────────────────────────────────────────────────────────
   41. 본문 통계표 (dm-table)
   ────────────────────────────────────────────────────────────── */
.dm-body .dm-table {
  width: 100%; border-collapse: collapse; margin: 26px 0;
  font-family: var(--font-body); font-size: 13px; line-height: 1.6;
}
.dm-body .dm-table th,
.dm-body .dm-table td {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 9px 12px; text-align: left; vertical-align: top;
}
.dm-body .dm-table thead th {
  font-family: var(--font-headline); font-weight: 400; font-size: 12.5px;
  color: var(--muted-ink); border-bottom: 1px solid var(--ink);
  letter-spacing: .01em;
}
.dm-body .dm-table tbody td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.dm-body .dm-table tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
@media (max-width: 600px) {
  .dm-body .dm-table { font-size: 12px; display: block; overflow-x: auto; }
  .dm-body .dm-table th, .dm-body .dm-table td { padding: 7px 9px; white-space: nowrap; }
}


/* CRT 컴퓨터 이미지로 교체하면서 기존 나무 TV 장식 요소 숨김 */
.dm-tv-side, .dm-tv-speaker, .dm-tv-knob,
.dm-tv-foot, .dm-tv-foot--l, .dm-tv-foot--r {
  display: none !important;
}

/* 컴퓨터가 메뉴 목록의 구분선들 위로 자연스럽게 겹치도록 */
.dm-cat-overview { border-right: none !important; }
.dm-tv-outer {
  position: relative;
  z-index: 5;
  margin-left: -130px;
  margin-top: -10px;
  margin-bottom: -120px;
  filter: drop-shadow(-18px 10px 18px rgba(0,0,0,.55)) drop-shadow(-4px 3px 4px rgba(0,0,0,.35));
}
.dm-tv-frame { max-width: 386px; }

/* 세로로 길어진 레이아웃의 상단 정렬 및 여백 정리 */
.dm-cat-overview-row { align-items: flex-start !important; }



/* 브라운관 색감·볼록 유리 효과 */
.dm-tv-screen {
  background: #00150a;
  filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(2.2) brightness(.92) contrast(1.02);
}
.dm-tv-screen::before,
.dm-tv-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
}
/* 볼록 유리 하이라이트 (좌상단 반사광) + 가장자리 비네트(초록빛 인광 톤) */
.dm-tv-screen::before {
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(210,255,225,.10), rgba(210,255,225,0) 42%),
    radial-gradient(140% 120% at 50% 55%, rgba(0,20,10,0) 50%, rgba(0,10,6,.30) 100%);
  mix-blend-mode: screen;
}
/* 스캔라인 (더 또렷하게) */
.dm-tv-screen::after {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.28) 0px,
    rgba(0,0,0,.28) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );
  opacity: .35;
}

.dm-tv-caption { display: none !important; }


/* 화면 안쪽 "클릭해서 내려치기" 안내문구는 항상 표시 */
.dm-tv-screen div[style*="border-radius: 999px"] {
  opacity: 1 !important;
}

.dm-tv-outer { margin-right: -22px; }




/* ── 분류 페이지: 정렬 · 목록 (터미널 박스 컨셉) ────────────── */
.dm-cat-sortbar {
  display: flex; gap: 0; align-items: stretch;
  margin: 4px 0 24px;
  border: 1.5px solid var(--ink);
  width: fit-content;
  font-family: var(--font-mono);
}
.dm-sort-btn {
  display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; font-weight: 700;
  color: var(--ink); padding: 10px 20px;
  border-right: 1.5px solid var(--ink);
  transition: background .12s, color .12s;
}
.dm-cat-sortbar .dm-sort-btn:last-child { border-right: none; }
.dm-sort-btn:hover { background: rgba(255,194,61,.18); }
.dm-sort-btn.is-on {
  background: #ffc23d; color: #171205;
}

.dm-cat-list { list-style: none; margin: 0; padding: 0; }
.dm-cat-li { margin-bottom: 10px; }
.dm-cat-li-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 15px 18px; text-decoration: none;
  border: 1.5px solid var(--border);
  transition: border-color .15s, background .15s, transform .1s;
}
.dm-cat-li-link:hover {
  border-color: #ffc23d; background: rgba(255,194,61,.06);
  transform: translateX(3px);
}
.dm-cat-li-title {
  font-family: var(--font-headline); font-size: 16px; line-height: 1.5; color: var(--ink);
}
.dm-cat-li-link:hover .dm-cat-li-title { color: #ffc23d; }
.dm-cat-li-date {
  flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--muted-ink);
  letter-spacing: .04em;
}
@media (max-width: 560px) {
  .dm-cat-sortbar { width: 100%; }
  .dm-sort-btn { flex: 1; justify-content: center; }
  .dm-cat-li-link { flex-direction: column; gap: 4px; }
}

/* ── 이전/다음 글 네비게이션: 터미널 박스 컨셉 ──────────────── */
.dm-adjacent {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  border: none; padding: 0;
  margin: 40px 0;
}
.dm-adjacent > a {
  display: block; padding: 16px 18px;
  border: 1.5px solid var(--ink);
  text-decoration: none;
  font-family: var(--font-headline); font-size: 15.5px; color: var(--ink); line-height: 1.4;
  transition: background .12s, color .12s, transform .1s;
  position: relative;
}
.dm-adjacent > a:last-child { text-align: right; }
.dm-adj-label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  color: #ffc23d;
}
.dm-adjacent > a:hover {
  background: #ffc23d; color: #171205;
  transform: translateY(-2px);
}
.dm-adjacent > a:hover .dm-adj-label { color: #171205; }
@media (max-width: 640px) {
  .dm-adjacent { grid-template-columns: 1fr; }
  .dm-adjacent > a:last-child { text-align: left; }
}


/* ══ 메인 분류 메뉴 ════════════════════════════════════════════
   여섯 개의 분류는 사이트로 들어가는 문이다. 크게 세우고,
   글 수는 이름에 붙는 각주로 처리한다. 여백을 장식으로 메우지 않는다. */

.dm-cat-overview { padding: 0 !important; }

.dm-cat-overview .dm-cat-group {
  padding: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  align-items: stretch;
}
.dm-cat-overview .dm-cat-group:last-of-type { border-bottom: none !important; }

/* 지어낸 번호는 쓰지 않는다 */
.dm-cat-overview .dm-cat-idx { display: none !important; }

.dm-cat-overview .dm-cat-group > div { flex: 1; min-width: 0; }

.dm-cat-overview .dm-cat-name {
  display: flex !important; align-items: baseline; gap: 10px;
  width: auto;
  padding: 12px 0 !important;
  font-family: var(--font-headline);
  font-size: 27px; line-height: 1.1;
  color: var(--ink);
  text-align: left;
  transition: color .14s, transform .14s;
}
/* 글 수 = 이름에 붙는 각주 */
.dm-cat-overview .dm-cat-count {
  flex: none; margin: 0 !important;
  font-family: var(--font-mono);
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted-ink);
  align-self: flex-start; margin-top: 4px !important;
}

.dm-cat-overview .dm-cat-name:hover {
  color: #ffc23d;
  transform: translateX(6px);
}
.dm-cat-overview .dm-cat-name:hover .dm-cat-count { color: #ffc23d; }
.dm-cat-overview .dm-cat-group.is-open > div > .dm-cat-name { color: #ffc23d; }

.dm-cat-overview .dm-cat-children { padding: 0 0 16px 4px; }

@media (max-width: 900px) {
  .dm-cat-overview .dm-cat-name { font-size: 24px; padding: 16px 0 !important; }
}

/* 메뉴 아래 여백 압축 */
.dm-cat-overview-row { margin-bottom: 8px !important; }
.dm-hero-panel { padding-bottom: 14px !important; }


/* ── 메인 메뉴: 하위 목록은 세로로(컴퓨터와 겹치지 않게) + 항목 앞 ◆ 표시 ── */
.dm-cat-overview .dm-cat-children {
  display: flex; flex-direction: column; gap: 2px;
}
.dm-cat-overview .dm-cat-child {
  display: block !important;
  width: fit-content;
  padding: 5px 0 !important;
}
.dm-cat-overview .dm-cat-name::before {
  content: '◆';
  font-size: 14px;
  color: #ffc23d;
  margin-right: 4px;
  flex: none;
}


/* ══ 모바일 대응 — 데스크톱 전용 겹침/음수여백 무력화 ═══════════
   720px 이하에서 테마는 좌우 2단을 세로로 쌓는다. 그러나 데스크톱에서
   컴퓨터를 메뉴 위로 겹치기 위해 준 음수 마진이 그대로 남으면 화면
   밖으로 밀려나고 아래 내용과 겹친다. 모바일에서는 전부 해제한다. */
@media (max-width: 720px) {
  .dm-tv-outer {
    margin: 0 auto 20px !important;
    z-index: auto !important;
    width: 100%;
    max-width: 340px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)) !important;
  }
  .dm-tv-frame { max-width: 100% !important; }

  .dm-cat-overview-row { margin-bottom: 20px !important; }
  .dm-hero-panel { padding-bottom: 20px !important; }

  /* 메뉴: 좁은 폭에 맞춰 크기·여백 조정 */
  .dm-cat-overview .dm-cat-name {
    font-size: 21px !important;
    padding: 13px 0 !important;
    gap: 8px;
  }
  .dm-cat-overview .dm-cat-name::before { font-size: 11px; }
  .dm-cat-overview .dm-cat-count { font-size: 10px; }
  .dm-cat-overview .dm-cat-children { padding: 0 0 12px 2px; }
  .dm-cat-overview .dm-cat-child { font-size: 13px; }
}

/* 가로 스크롤 방지 — 넓은 요소가 뷰포트를 넘지 않도록 */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  img, table, pre, iframe { max-width: 100%; }
  .dm-table { display: block; overflow-x: auto; }
}


/* ══ 본문 레이아웃 모바일 수정 (핵심) ═══════════════════════════
   .dm-post 는 flex(nowrap) 인데 기존 모바일 규칙은 grid-template-columns
   를 바꾸고 있어 아무 효과가 없었다. 사이드바(.dm-post-cols)가
   flex:0 0 auto 로 축소되지 않아 좁은 화면에서 본문 폭이 음수가 되고
   레이아웃 전체가 무너졌다. 좁은 화면에서는 세로로 쌓는다. */
@media (max-width: 1080px) {
  .dm-post {
    display: block !important;
    gap: 0 !important;
  }
  .dm-post-cols {
    position: static !important;
    max-width: none !important;
    width: 100% !important;
    flex: none !important;
    margin-top: 36px;
  }
  .dm-post-cols > nav { width: 100% !important; }
}

@media (max-width: 680px) {
  .dm-post-cols { flex-direction: column; gap: 24px; margin-top: 28px; }
}


/* 고정폭 도표·요소가 좁은 화면을 넘지 않도록 */
@media (max-width: 900px) {
  /* 도식은 제 크기를 지켜야 한다 — 폭을 줄이면 박스만 줄고
     SVG 연결선 좌표는 그대로라 선이 어긋난다. 밀어서 본다. */
  .dm-cat-overview { flex-basis: auto !important; }
}


/* ══ 브라우저 자동 다크 모드 차단 ═══════════════════════════════
   크롬 안드로이드의 Auto Dark Theme 는 사이트 색을 임의로 반전시킨다.
   color-scheme 을 명시하면 "이 사이트가 색을 직접 관리한다"고 알려
   자동 반전을 건너뛴다. 종이 모드는 light, 화면 모드는 dark. */
html { color-scheme: only light; }
body[data-theme="paper"] { color-scheme: only light; }
body[data-theme="screen"] { color-scheme: only dark; }


/* 기기가 다크 모드일 때: 사이트가 스스로 어두운 배색(화면 모드)을
   제공한다고 선언한다. 브라우저는 사이트가 다크를 지원하면 강제
   반전(Auto Dark)을 적용하지 않는다. 사용자가 직접 고른 모드
   (body[data-theme]) 는 그대로 존중된다. */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  html { color-scheme: light; }
}


/* ══ 서랍 도구 — 좁은 화면에서 머릿글 기능을 대체 ═══════════════
   머릿글에는 검색·후원·회원·색상전환이 나란히 놓여 좁은 화면에서
   화면 밖으로 밀려난다. 촘촘히 우겨넣는 대신 서랍(레이어)에서
   같은 기능을 온전한 크기로 제공한다. */
.dm-drawer-tools { display: none; }

@media (max-width: 900px) {
  /* 머릿글에는 최소한만 남긴다 — 나머지는 서랍에서 */
  .dm-head-tools .dm-search,
  .dm-head-tools .dm-donate,
  .dm-head-tools .dm-member { display: none !important; }

  .dm-drawer-tools { display: block; }
}

.dm-drawer-tools .dm-drawer-label { margin-bottom: 12px; }

.dm-drawer-search {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: 4px; overflow: hidden;
  margin-bottom: 12px;
}
.dm-drawer-search input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 15px;
  color: inherit;
}
.dm-drawer-search input:focus { outline: none; }
.dm-drawer-search button {
  flex: none; border: none; background: transparent;
  padding: 0 14px; color: inherit; cursor: pointer;
  display: flex; align-items: center;
}
.dm-drawer-search button:hover { color: #ffc23d; }

.dm-drawer-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-body); font-size: 15px;
  color: inherit; text-decoration: none;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.dm-drawer-btn:hover {
  border-color: #ffc23d;
  background: rgba(255,194,61,.08);
  color: #ffc23d;
}
.dm-drawer-btn-ico {
  flex: none; width: 20px; text-align: center;
  font-size: 15px; color: #ffc23d;
}
.dm-drawer-btn--accent { border-color: rgba(255,194,61,.45); }


/* ═══════════════════════════════════════════════════════════
   논장(論場) 게시판
   짜임은 국내 게시판 관례를 따르되 표 격자·회색 머리줄을 쓰지 않는다.
   최근성은 뱃지가 아니라 잉크 농도로 나타낸다 (인광 잔상).
   색은 기존 토큰만 쓴다.
   ═══════════════════════════════════════════════════════════ */

.dm-njview-lead { font: 400 13px/1.7 var(--font-body); color: var(--muted-ink); margin: 6px 0 0; }

/* ── 갈래 판 ───────────────────────────────────────────── */
.dm-nj-kinds { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 26px 0 24px; }
.dm-nj-kindcard {
  display: block; padding: 15px 15px 13px; text-decoration: none; color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 6px 6px 0 var(--accent);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dm-nj-kindcard:hover { transform: translate(-2px,-2px); box-shadow: 0 0 0 1px var(--surface) inset, 8px 8px 0 var(--accent); }
.dm-nj-kindcard.is-on { transform: translate(3px,3px); box-shadow: 0 0 0 1px var(--surface) inset, 2px 2px 0 var(--accent); }
.dm-nj-kindcard-sign { display: block; font: 700 19px/1 var(--font-mono); opacity: .75; margin-bottom: 8px; }
.dm-nj-kindcard-name { display: block; font: 700 15px/1.3 var(--font-body); margin-bottom: 5px; }
.dm-nj-kindcard-desc { display: block; font: 400 11.5px/1.55 var(--font-body); color: var(--muted-ink); }
.dm-nj-kindcard-n { display: block; margin-top: 9px; font: 400 10.5px/1 var(--font-mono); color: var(--muted-ink); letter-spacing: .06em; }

/* ── 거르개 + 찾기 ─────────────────────────────────────── */
.dm-nj-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; }
.dm-nj-tabs { display: flex; gap: 16px; }
.dm-nj-tab {
  font: 400 12px/1 var(--font-body); color: var(--muted-ink);
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent;
}
.dm-nj-tab:hover { color: var(--ink); }
.dm-nj-tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.dm-nj-search { display: flex; }
.dm-nj-search input[type=search] {
  font: 400 12px/1 var(--font-body); padding: 7px 10px; min-width: 11rem;
  background: transparent; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--muted-ink) 55%, transparent); border-right: 0;
}
.dm-nj-search button {
  font: 400 11.5px/1 var(--font-body); padding: 7px 13px; cursor: pointer;
  background: var(--ink); color: var(--surface); border: 1px solid var(--ink);
}
.dm-nj-search ::placeholder { color: var(--muted-ink); }

/* ── 목록 ──────────────────────────────────────────────── */
.dm-nj-table {
  --njc: 1.2rem 3.4rem minmax(0,1fr) 5.4rem 3rem 2.9rem;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  margin: 14px 0 0;
}
.dm-nj-thead, .dm-nj-tr {
  display: grid; grid-template-columns: var(--njc); align-items: center; gap: 0 10px;
}
.dm-nj-thead {
  padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--muted-ink) 40%, transparent);
  font: 400 10px/1 var(--font-mono); letter-spacing: .16em; color: var(--muted-ink);
}
.dm-nj-thead span:nth-child(4), .dm-nj-thead span:nth-child(5) { text-align: center; }
.dm-nj-thead span:nth-child(6) { text-align: right; }

.dm-nj-tr {
  position: relative; padding: 10px 10px; text-decoration: none; color: var(--ink);
  transition: background .1s ease;
}
.dm-nj-tr + .dm-nj-tr { border-top: 1px solid color-mix(in srgb, var(--muted-ink) 18%, transparent); }
.dm-nj-tr:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dm-nj-tr .c-ar { font: 400 10px/1 var(--font-mono); color: var(--accent); opacity: 0; }
.dm-nj-tr:hover .c-ar { opacity: 1; }

.dm-nj-tr .c-no { font: 400 11px/1 var(--font-mono); color: var(--muted-ink); font-variant-numeric: tabular-nums; }
.dm-nj-tr .c-title { display: flex; align-items: baseline; gap: 7px; min-width: 0; font: 400 14px/1.45 var(--font-body); }
.dm-nj-tr .c-sign { flex: 0 0 auto; font: 400 12px/1 var(--font-mono); opacity: .6; }
.dm-nj-tr .c-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-nj-tr:hover .c-t { text-decoration: underline; text-underline-offset: 3px; }
.dm-nj-tr .c-n { flex: 0 0 auto; font: 700 10.5px/1 var(--font-mono); font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.dm-nj-tr .c-st {
  flex: 0 0 auto; font: 400 9.5px/1 var(--font-mono); font-style: normal; color: var(--muted-ink);
  border: 1px dashed color-mix(in srgb, var(--muted-ink) 55%, transparent); padding: 2px 5px 3px;
}
.dm-nj-tr .c-seen {
  flex: 0 0 auto; font: 700 9px/1 var(--font-mono); font-style: normal; letter-spacing: .1em;
  color: var(--ink); background: var(--accent); padding: 2px 5px 3px;
}
.dm-nj-tr .c-by, .dm-nj-tr .c-date, .dm-nj-tr .c-hit {
  font: 400 11px/1 var(--font-mono); color: var(--muted-ink);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-nj-tr .c-by { font-family: var(--font-body); font-size: 11.5px; text-align: center; }
.dm-nj-tr .c-date { text-align: center; }
.dm-nj-tr .c-hit { text-align: right; }

/* 인광 잔상 — 새 글일수록 진하다 */
.dm-nj-tr[data-age="0"] .c-t { color: var(--accent); }
.dm-nj-tr[data-age="1"] .c-t { opacity: .92; }
.dm-nj-tr[data-age="2"] .c-t { opacity: .74; }
.dm-nj-tr[data-age="3"] .c-t { opacity: .58; }
.dm-nj-tr[data-age="4"] .c-t { opacity: .45; }
.dm-nj-tr[data-age="3"] .c-no, .dm-nj-tr[data-age="4"] .c-no,
.dm-nj-tr[data-age="3"] .c-by, .dm-nj-tr[data-age="4"] .c-by,
.dm-nj-tr[data-age="3"] .c-date, .dm-nj-tr[data-age="4"] .c-date,
.dm-nj-tr[data-age="3"] .c-hit, .dm-nj-tr[data-age="4"] .c-hit { opacity: .6; }

/* ── 쪽 번호 ───────────────────────────────────────────── */
.dm-nj-pager { margin: 20px 0 0; text-align: center; }
.dm-nj-pager .page-numbers {
  display: inline-block; min-width: 25px; padding: 5px 6px;
  font: 400 12px/1 var(--font-mono); color: var(--muted-ink);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.dm-nj-pager .page-numbers:hover { color: var(--ink); }
.dm-nj-pager .page-numbers.current { color: var(--ink); border-bottom: 2px solid var(--accent); }

/* ── 사진첩 ────────────────────────────────────────────── */
.dm-nj-album { margin: 42px 0 0; }
.dm-nj-album-head { font: 400 10.5px/1 var(--font-mono); letter-spacing: .2em; color: var(--muted-ink); margin: 0 0 12px; }
.dm-nj-album-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.dm-nj-album-cell { display: block; text-decoration: none; color: var(--ink); }
.dm-nj-album-cell img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--surface) inset, 5px 5px 0 var(--accent);
  filter: contrast(1.05) saturate(.92);
}
.dm-nj-album-cell span {
  display: block; margin-top: 9px; font: 400 11px/1.4 var(--font-body); color: var(--muted-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 첫 화면 띠 ────────────────────────────────────────── */
.dm-nj-strip { margin: 44px 0; }
.dm-nj-strip-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; }
.dm-nj-strip-title { font: 700 13px/1 var(--font-body); letter-spacing: .06em; }
.dm-nj-strip-rule { flex: 1 1 auto; height: 0; border-top: 1px solid color-mix(in srgb, var(--muted-ink) 40%, transparent); }
.dm-nj-strip-stat { font: 400 10.5px/1 var(--font-mono); color: var(--muted-ink); font-variant-numeric: tabular-nums; }
.dm-nj-strip-more { font: 400 10.5px/1 var(--font-body); color: var(--muted-ink); text-decoration: none; }
.dm-nj-strip-more:hover { color: var(--ink); }
.dm-nj-table--strip { border-top-width: 1px; border-bottom-width: 1px; }
.dm-nj-strip-write {
  display: inline-block; margin-top: 12px;
  font: 700 11.5px/1 var(--font-mono); color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 3px;
}

/* ── 글 하단 통합 ──────────────────────────────────────── */
.dm-nj-attach { margin: 56px 0 0; padding-top: 26px; border-top: 2px solid var(--ink); }
.dm-nj-attach-label { font: 400 10.5px/1 var(--font-mono); letter-spacing: .2em; color: var(--muted-ink); margin: 0 0 6px; }
.dm-nj-attach-lead { font: 400 12.5px/1.6 var(--font-body); color: var(--muted-ink); margin: 0; }
.dm-nj-empty { font: 400 12.5px/1.6 var(--font-body); color: var(--muted-ink); padding: 22px 0; margin: 0; }
.dm-nj-open { margin-top: 18px; }
.dm-nj-open > summary {
  cursor: pointer; list-style: none; font: 700 12px/1 var(--font-body); color: var(--ink);
  padding: 11px 0; border-bottom: 1px solid var(--ink);
}
.dm-nj-open > summary::-webkit-details-marker { display: none; }
.dm-nj-open > summary::before { content: "＋ "; color: var(--accent); }
.dm-nj-open[open] > summary::before { content: "－ "; }

/* ── 단일 발제 ─────────────────────────────────────────── */
.dm-njsingle-slug { display: flex; align-items: center; gap: 9px; margin: 18px 0 10px; flex-wrap: wrap; }
.dm-njsingle-slug .dm-nj-sign { font: 400 15px/1 var(--font-mono); opacity: .7; }
.dm-njsingle-slug .dm-nj-no { font: 400 12px/1 var(--font-mono); color: var(--muted-ink); font-variant-numeric: tabular-nums; }
.dm-njsingle-slug .dm-nj-kindname { font: 400 11.5px/1 var(--font-body); color: var(--muted-ink); }
.dm-njsingle-slug .c-chip, .dm-njsingle-slug .c-st {
  font: 400 10px/1 var(--font-mono); color: var(--muted-ink);
  border: 1px solid color-mix(in srgb, var(--muted-ink) 55%, transparent); padding: 3px 6px;
}
.dm-nj-stamp {
  font: 700 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--ink);
  border: 2px solid var(--accent); padding: 4px 8px; display: inline-block; transform: rotate(-3deg);
}
.dm-njsingle-title { font: 700 25px/1.45 var(--font-body); margin: 0 0 10px; }
.dm-njsingle-meta {
  font: 400 11.5px/1.6 var(--font-mono); color: var(--muted-ink);
  padding-bottom: 15px; border-bottom: 2px solid var(--ink); margin: 0 0 24px;
}
.dm-njsingle-meta span { opacity: .45; margin: 0 6px; }
.dm-njsingle-meta a { color: var(--muted-ink); }
.dm-njsingle-body { font-size: 15px; line-height: 1.85; }
.dm-njsingle-body blockquote {
  margin: 18px 0; padding: 2px 0 2px 16px; border-left: 2px solid color-mix(in srgb, var(--muted-ink) 45%, transparent);
  color: var(--muted-ink);
}
.dm-nj-quote {
  margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--muted-ink) 8%, transparent);
  font: italic 400 13.5px/1.75 'Nanum Myeongjo', 'Noto Serif KR', serif;
}
.dm-nj-editnote { margin: 0 0 22px; padding: 14px 18px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--accent); }
.dm-nj-editnote > span { display: block; margin-bottom: 6px; font: 400 10px/1 var(--font-mono); letter-spacing: .18em; color: var(--muted-ink); }
.dm-nj-editnote p { margin: 0; font: 400 13px/1.75 var(--font-body); }
.dm-nj-photo { margin: 0 0 24px; }
.dm-nj-photo img {
  width: 100%; height: auto; display: block; border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 10px 10px 0 var(--accent);
  filter: contrast(1.05) saturate(.92);
}
.dm-nj-photo-wait {
  font: 400 11.5px/1.6 var(--font-body); color: var(--muted-ink); text-align: center;
  border: 1px dashed color-mix(in srgb, var(--muted-ink) 55%, transparent); padding: 22px; margin: 0 0 24px;
}
.dm-nj-foot {
  margin: 34px 0 0; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--muted-ink) 30%, transparent);
  font: 400 10.5px/1.7 var(--font-body); color: var(--muted-ink);
}
.dm-nj-backlist {
  display: inline-block; margin: 26px 0 0; font: 700 12px/1 var(--font-body); color: var(--ink);
  text-decoration: none; border: 2px solid var(--ink); padding: 9px 22px; box-shadow: 4px 4px 0 var(--accent);
}

/* ── 글쓰기 ────────────────────────────────────────────── */
.dm-nj-writehead {
  margin: 48px 0 14px; font: 400 12px/1 var(--font-mono); letter-spacing: .18em; color: var(--muted-ink);
  padding-bottom: 9px; border-bottom: 2px solid var(--ink);
}
.dm-nj-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.dm-nj-err {
  font: 400 12px/1.55 var(--font-body); color: var(--ink);
  border-left: 3px solid var(--accent); padding: 9px 13px; margin: 0 0 14px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.dm-nj-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0 0 14px; }
.dm-nj-pick input { position: absolute; opacity: 0; pointer-events: none; }
.dm-nj-pick-in {
  display: block; padding: 12px 13px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--muted-ink) 50%, transparent);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.dm-nj-pick input:checked + .dm-nj-pick-in { border: 2px solid var(--ink); padding: 11px 12px; box-shadow: 4px 4px 0 var(--accent); }
.dm-nj-pick input:focus-visible + .dm-nj-pick-in { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-nj-pick-sign { display: block; font: 400 15px/1 var(--font-mono); opacity: .7; margin-bottom: 6px; }
.dm-nj-pick-name { display: block; font: 700 13px/1.3 var(--font-body); margin-bottom: 4px; }
.dm-nj-pick-desc { display: block; font: 400 10.5px/1.5 var(--font-body); color: var(--muted-ink); }

.dm-nj-who { display: grid; grid-template-columns: 12rem 1fr; gap: 10px; margin: 0 0 10px; }
.dm-nj-form input[type=text], .dm-nj-form select, .dm-nj-form textarea {
  width: 100%; font: 400 13px/1.6 var(--font-body); padding: 9px 11px;
  background: transparent; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--muted-ink) 55%, transparent);
}
.dm-nj-form input:focus, .dm-nj-form select:focus { outline: 0; border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent); }
.dm-nj-form ::placeholder { color: var(--muted-ink); }
.dm-nj-tin { font-weight: 700 !important; }
.dm-nj-only { display: none; }
.dm-nj-form[data-kind="ask"] .dm-nj-only--ask { display: block; margin: 0 0 10px; max-width: 12rem; }
.dm-nj-form[data-kind="free"] .dm-nj-only--free { display: block; margin: 12px 0 0; }
.dm-nj-file {
  display: block; padding: 13px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--muted-ink) 55%, transparent);
  font: 400 12px/1.5 var(--font-body); color: var(--muted-ink);
}
.dm-nj-file input { display: block; margin-bottom: 7px; font-size: 12px; }

/* 편집기 */
.dm-nj-ed { border: 1px solid color-mix(in srgb, var(--muted-ink) 55%, transparent); }
.dm-nj-tools {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 5px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-ink) 40%, transparent);
}
.dm-nj-tool {
  min-width: 27px; height: 26px; padding: 0 6px; cursor: pointer;
  font: 400 12px/1 var(--font-mono); color: var(--muted-ink);
  background: transparent; border: 1px solid transparent;
}
.dm-nj-tool:hover { color: var(--ink); border-color: color-mix(in srgb, var(--muted-ink) 45%, transparent); }
.dm-nj-tool.is-on { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.dm-nj-tsep { width: 1px; height: 15px; margin: 0 5px; background: color-mix(in srgb, var(--muted-ink) 40%, transparent); }
.dm-nj-tcount { margin-left: auto; font: 400 10.5px/1 var(--font-mono); color: var(--muted-ink); font-variant-numeric: tabular-nums; }
.dm-nj-canvas {
  min-height: 190px; padding: 13px 14px; font: 400 14px/1.8 var(--font-body); color: var(--ink);
  outline: 0; overflow-wrap: break-word;
}
.dm-nj-canvas:focus { box-shadow: inset 3px 0 0 var(--accent); }
.dm-nj-canvas:empty::before { content: attr(data-ph); color: var(--muted-ink); }
.dm-nj-canvas blockquote {
  margin: 12px 0; padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--muted-ink) 45%, transparent); color: var(--muted-ink);
}
.dm-nj-canvas hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--muted-ink) 45%, transparent); margin: 16px 0; }
.dm-nj-canvas ul, .dm-nj-canvas ol { padding-left: 1.4em; }

.dm-nj-formfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.dm-nj-notice { flex: 1 1 20rem; margin: 0; font: 400 10.5px/1.7 var(--font-body); color: var(--muted-ink); }
.dm-nj-submit {
  flex: 0 0 auto; cursor: pointer; font: 700 13px/1 var(--font-body); letter-spacing: .04em;
  padding: 12px 28px; color: var(--ink); background: var(--accent);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.dm-nj-submit:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.dm-nj-submit:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }

/* ── 본문 인용 표시 ────────────────────────────────────── */
.dm-nj-mark {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.dm-nj-hasmark { position: relative; }
.dm-nj-tab-mark {
  margin-left: 6px; cursor: pointer; vertical-align: 2px;
  font: 700 9.5px/1 var(--font-mono); color: var(--ink);
  background: var(--accent); border: 0; padding: 3px 6px;
}
.dm-nj-chip-btn {
  position: absolute; z-index: 90; cursor: pointer;
  font: 700 11.5px/1 var(--font-body); color: var(--ink); background: var(--accent);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 8px 13px;
}
.dm-nj-pop {
  position: absolute; z-index: 95; min-width: 17rem; max-width: 24rem;
  background: var(--surface); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--accent);
}
.dm-nj-pop-row {
  display: grid; grid-template-columns: 3.2rem minmax(0,1fr); gap: 2px 9px;
  padding: 10px 12px; text-decoration: none; color: var(--ink);
}
.dm-nj-pop-row + .dm-nj-pop-row { border-top: 1px solid color-mix(in srgb, var(--muted-ink) 25%, transparent); }
.dm-nj-pop-row:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dm-nj-pop-no { font: 400 10.5px/1.4 var(--font-mono); color: var(--muted-ink); }
.dm-nj-pop-t { font: 400 12.5px/1.45 var(--font-body); }
.dm-nj-pop-m { grid-column: 2; font: 400 10.5px/1 var(--font-mono); color: var(--muted-ink); }

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .dm-nj-kinds, .dm-nj-picker { grid-template-columns: 1fr; }
  .dm-nj-who { grid-template-columns: 1fr; }
  .dm-nj-album-grid { grid-template-columns: repeat(2,1fr); }
  .dm-nj-bar { flex-direction: column; align-items: stretch; }
  .dm-nj-search input[type=search] { flex: 1 1 auto; min-width: 0; }
  .dm-nj-table { --njc: 1rem minmax(0,1fr); }
  .dm-nj-thead { display: none; }
  .dm-nj-tr { padding: 11px 6px; row-gap: 5px; }
  .dm-nj-tr .c-ar { grid-row: 1; align-self: start; }
  .dm-nj-tr .c-title { grid-column: 2; grid-row: 1; }
  .dm-nj-tr .c-t { white-space: normal; }
  .dm-nj-tr .c-no { grid-column: 2; grid-row: 2; justify-self: start; }
  .dm-nj-tr .c-by { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 4rem; text-align: left; }
  .dm-nj-tr .c-date { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 10rem; }
  .dm-nj-tr .c-hit { display: none; }
  .dm-njsingle-title { font-size: 21px; }
}


/* ── 첫 화면 논장 패널 ─────────────────────────────────── */
.dm-nj-panel {
  margin: 34px 0 46px;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 14px 14px 0 var(--accent);
}
.dm-nj-panel-bar {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; background: var(--ink); color: var(--surface);
}
.dm-nj-panel-name { font: 700 15px/1 var(--font-body); letter-spacing: .04em; }
.dm-nj-panel-name span { font: 400 11px/1 var(--font-mono); opacity: .65; margin-left: 4px; }
.dm-nj-panel-desc { font: 400 11.5px/1 var(--font-body); opacity: .68; }
.dm-nj-panel-stat {
  margin-left: auto; font: 400 11px/1 var(--font-mono);
  opacity: .78; font-variant-numeric: tabular-nums;
}
.dm-nj-panel-body { padding: 18px 18px 16px; }

.dm-nj-panel-kinds { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0 0 6px; }
.dm-nj-pk {
  display: block; padding: 11px 13px 10px; text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--muted-ink) 45%, transparent);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.dm-nj-pk:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--accent); transform: translate(-1px,-1px); }
.dm-nj-pk-sign { display: block; font: 400 14px/1 var(--font-mono); opacity: .7; margin-bottom: 6px; }
.dm-nj-pk-name { display: block; font: 700 12.5px/1.3 var(--font-body); margin-bottom: 3px; }
.dm-nj-pk-desc { display: block; font: 400 10.5px/1.5 var(--font-body); color: var(--muted-ink); }

.dm-nj-table--panel { border-top-width: 1px; border-bottom-width: 1px; margin-top: 14px; }
.dm-nj-table--panel .dm-nj-tr { padding: 11px 4px; }
.dm-nj-table--panel .dm-nj-tr .c-title { font-size: 14.5px; }

.dm-nj-panel-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 15px;
}
.dm-nj-panel-write {
  font: 700 12.5px/1 var(--font-mono); color: var(--ink); text-decoration: none;
  background: var(--accent); border: 2px solid var(--ink); padding: 10px 20px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.dm-nj-panel-write:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.dm-nj-panel-write:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
.dm-nj-panel-more { font: 400 11.5px/1 var(--font-body); color: var(--muted-ink); text-decoration: none; }
.dm-nj-panel-more:hover { color: var(--ink); }

@media (max-width: 720px) {
  .dm-nj-panel { box-shadow: 0 0 0 1px var(--surface) inset, 8px 8px 0 var(--accent); }
  .dm-nj-panel-kinds { grid-template-columns: 1fr; }
  .dm-nj-panel-body { padding: 14px 12px 13px; }
  .dm-nj-panel-stat { margin-left: 0; width: 100%; }
}


/* ── 논장 목록 화면 머리 ───────────────────────────────── */
.dm-njhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.dm-njhead-title { margin: 0; }
.dm-njhead-title span { font: 400 .5em/1 var(--font-mono); color: var(--muted-ink); margin-left: 6px; letter-spacing: .06em; }
.dm-njhead-nums { display: flex; gap: 18px; padding-bottom: 4px; }
.dm-njhead-nums span { font: 400 11px/1 var(--font-body); color: var(--muted-ink); }
.dm-njhead-nums b {
  font: 700 15px/1 var(--font-mono); color: var(--ink);
  font-variant-numeric: tabular-nums; margin-right: 3px;
}
.dm-njview-lead { font: 400 12.5px/1.7 var(--font-body); color: var(--muted-ink); margin: 12px 0 0; max-width: 40rem; }
.dm-njview-kindnote {
  display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0;
  padding: 9px 13px; font: 400 12px/1.6 var(--font-body); color: var(--muted-ink);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.dm-njview-kindnote span { font: 400 13px/1 var(--font-mono); color: var(--ink); opacity: .7; }

/* 거르개 줄 — 판을 접고 한 줄로 */
.dm-nj-bar { margin: 22px 0 0; padding-bottom: 2px; }
.dm-nj-tabs { gap: 20px; }
.dm-nj-tab { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; }
.dm-nj-tab em {
  font: 400 10px/1 var(--font-mono); font-style: normal;
  color: var(--muted-ink); font-variant-numeric: tabular-nums; opacity: .8;
}
.dm-nj-tab.is-on em { color: var(--ink); }

/* 목록을 위로 끌어올린다 */
.dm-njview .dm-nj-table { margin-top: 10px; }
.dm-njview .dm-nj-tr { padding: 12px 10px; }
.dm-njview .dm-nj-tr .c-title { font-size: 14.5px; }

@media (max-width: 720px) {
  .dm-njhead { align-items: flex-start; }
  .dm-njhead-nums { gap: 14px; padding-bottom: 0; }
  .dm-nj-tabs { gap: 14px; flex-wrap: wrap; }
}


/* ── 갈래 블록 축소 ────────────────────────────────────── */
/* 첫 화면 패널 안 */
.dm-nj-panel-kinds { gap: 8px; }
.dm-nj-pk { padding: 8px 10px 7px; }
.dm-nj-pk-sign { font-size: 11px; margin-bottom: 3px; }
.dm-nj-pk-name { font-size: 11.5px; margin-bottom: 2px; }
.dm-nj-pk-desc {
  font-size: 9.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 글쓰기 상자의 갈래 고르기 */
.dm-nj-picker { gap: 8px; }
.dm-nj-pick-in { padding: 9px 11px 8px; }
.dm-nj-pick input:checked + .dm-nj-pick-in { padding: 8px 10px 7px; }
.dm-nj-pick-sign { font-size: 12px; margin-bottom: 3px; }
.dm-nj-pick-name { font-size: 12px; margin-bottom: 2px; }
.dm-nj-pick-desc {
  font-size: 9.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ── 댓글창 축소 ───────────────────────────────────────── */
.dm-nj-replies { margin-top: 34px; }
.dm-nj-replies .comment-reply-title,
.dm-nj-replies #reply-title {
  font: 400 11px/1 var(--font-mono) !important;
  letter-spacing: .18em; color: var(--muted-ink);
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-ink) 35%, transparent);
}
.dm-nj-replies #reply-title small { font: 400 10.5px/1 var(--font-body); margin-left: 8px; }

.dm-cform { margin: 0; }
.dm-cform p { margin: 0 0 8px; }
.dm-cform-body { margin-bottom: 8px !important; }
.dm-cform textarea,
.dm-cform input[type=text],
.dm-cform input[type=email] {
  width: 100%; background: transparent; color: var(--ink);
  font: 400 13px/1.65 var(--font-body); padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--muted-ink) 50%, transparent);
  border-radius: 0; box-shadow: none;
}
.dm-cform textarea { resize: vertical; min-height: 84px; }
.dm-cform ::placeholder { color: var(--muted-ink); }
.dm-cform textarea:focus,
.dm-cform input:focus { outline: 0; border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent); }

/* 이름·전자우편을 한 줄로 */
.dm-cform .dm-cform-f { display: inline-block; width: calc(50% - 5px); margin: 0 0 8px; vertical-align: top; }
.dm-cform .dm-cform-f + .dm-cform-f { margin-left: 8px; }

.dm-cform .form-submit { margin: 2px 0 0; text-align: right; }
.dm-cform #submit {
  cursor: pointer; font: 700 12px/1 var(--font-body);
  padding: 9px 22px; color: var(--ink); background: var(--accent);
  border: 2px solid var(--ink); border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.dm-cform #submit:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.dm-cform #submit:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.dm-cform .comment-form-cookies-consent { display: none; }

/* 목록 */
.dm-nj-replies .comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.dm-nj-replies .comment-list li { margin: 0; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--muted-ink) 22%, transparent); }
.dm-nj-replies .comment-list .children { list-style: none; margin: 8px 0 0 18px; padding: 0; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.dm-nj-replies .comment-list .children li { padding-left: 12px; }
.dm-nj-replies .comment-author img,
.dm-nj-replies .avatar { display: none; }
.dm-nj-replies .comment-author { font: 700 12px/1.4 var(--font-body); }
.dm-nj-replies .comment-metadata,
.dm-nj-replies .comment-meta { font: 400 10.5px/1.4 var(--font-mono); color: var(--muted-ink); }
.dm-nj-replies .comment-metadata a { color: var(--muted-ink); text-decoration: none; }
.dm-nj-replies .comment-content { font: 400 13px/1.75 var(--font-body); margin: 5px 0 4px; }
.dm-nj-replies .comment-content p { margin: 0 0 6px; }
.dm-nj-replies .reply a { font: 400 10.5px/1 var(--font-mono); color: var(--muted-ink); text-decoration: none; }
.dm-nj-replies .reply a:hover { color: var(--ink); }
.dm-nj-replies .no-comments,
.dm-nj-replies .comments-title { font: 400 12px/1.6 var(--font-body); color: var(--muted-ink); }

@media (max-width: 560px) {
  .dm-cform .dm-cform-f { display: block; width: 100%; }
  .dm-cform .dm-cform-f + .dm-cform-f { margin-left: 0; }
}


/* ── 논장 댓글창 압축 ──────────────────────────────────── */
.dm-njsingle .dm-cmt-intro,
.dm-njsingle .dm-cmt-lead,
.dm-njsingle .comment-notes,
.dm-njsingle .logged-in-as,
.dm-njsingle .comment-form-cookies-consent { display: none !important; }

.dm-njsingle .dm-cmt-head,
.dm-njsingle .dm-cmt-title {
  font: 400 11px/1 var(--font-mono) !important;
  letter-spacing: .18em !important; color: var(--muted-ink) !important;
  margin: 0 0 10px !important; padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-ink) 32%, transparent);
}
.dm-njsingle #reply-title {
  font: 400 11px/1 var(--font-mono) !important;
  letter-spacing: .18em; color: var(--muted-ink); margin: 18px 0 9px !important;
}

.dm-njsingle .dm-cmt-form textarea,
.dm-njsingle .dm-cmt-form input[type=text],
.dm-njsingle .dm-cmt-form input[type=email] {
  width: 100% !important; max-width: none !important;
  min-height: 76px; height: auto; resize: vertical;
  font: 400 13px/1.65 var(--font-body) !important;
  padding: 9px 11px !important; background: transparent; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--muted-ink) 50%, transparent) !important;
  border-radius: 0 !important; box-shadow: none;
}
.dm-njsingle .dm-cmt-form input[type=text],
.dm-njsingle .dm-cmt-form input[type=email] { min-height: 0; }
.dm-njsingle .dm-cmt-form textarea:focus,
.dm-njsingle .dm-cmt-form input:focus {
  outline: 0; border-color: var(--ink) !important; box-shadow: 3px 3px 0 var(--accent);
}
.dm-njsingle .dm-cmt-form ::placeholder { color: var(--muted-ink); }
.dm-njsingle .dm-cmt-form p { margin: 0 0 8px; }
.dm-njsingle .dm-cmt-form .form-submit { margin: 2px 0 0; text-align: right; }
.dm-njsingle .dm-cmt-form #submit,
.dm-njsingle .dm-cmt-form input[type=submit] {
  cursor: pointer; font: 700 12px/1 var(--font-body) !important;
  padding: 9px 24px !important; color: var(--ink) !important; background: var(--accent) !important;
  border: 2px solid var(--ink) !important; border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.dm-njsingle .dm-cmt-form #submit:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.dm-njsingle .dm-cmt-form #submit:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }

.dm-njsingle .dm-cmt-empty,
.dm-njsingle .no-comments {
  font: 400 12px/1.6 var(--font-body) !important; color: var(--muted-ink);
  padding: 16px 0 !important; text-align: left !important;
}


/* 논장 안내문 숨김 — 본문 글용 문구라 게시판에는 맞지 않는다 */
.dm-njsingle .dm-cmt-note,
.dm-njsingle .dm-cmt-lead,
.dm-njsingle .dm-cmt-intro { display: none !important; }
.dm-njsingle .dm-cmt-head { margin-bottom: 8px !important; }


/* ── 세로선만 바깥으로, 내용 폭은 그대로 ────────────────
   .dm-shellwrap 을 넓혀 좌우 괘선을 벌리되,
   그 안의 구역들은 예전 폭(1338px)에 다시 묶어 둔다. */
.dm-main > .dm-nj-panel,
.dm-main > .dm-sband,
.dm-main > .dm-score,
.dm-main > .dm-home,
.dm-main > .dm-more-row,
.dm-main > .dm-catview,
.dm-main > .dm-njview,
.dm-main > .dm-njsingle {
  max-width: 1338px;
  margin-left: auto;
  margin-right: auto;
}


/* 본문 중간의 * * * 구분 표시 */
.dm-asterisk {
  text-align: center !important;
  letter-spacing: .7em;
  text-indent: .7em;
  color: var(--muted-ink);
  margin: 30px 0 !important;
  user-select: none;
}


@media (prefers-reduced-motion: reduce) {
  .dm-pop-cursor { animation: none; opacity: 1; }
}


/* ═══ 휴대폰 폭 보정 ═══════════════════════════════════
   좁은 화면에서 요소가 화면 밖으로 나가지 않게 한다. */

/* 주석 팝업 — 고정 420px 탓에 좁은 화면에서 밖으로 밀렸다 */
#dm-fnpop {
  max-width: min(420px, calc(100vw - 24px));
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  #dm-fnpop { width: calc(100vw - 24px); }

  /* 가로 넘침 차단 */
  html, body { overflow-x: hidden; }

  /* 긴 낱말·주소가 줄을 밀어내지 않게 */
  .dm-post, .dm-post p, .dm-njsingle-body, .dm-endnote-text,
  .dm-nj-tr .c-t, .dm-cmt-form, .dm-njview {
    overflow-wrap: anywhere; word-break: break-word;
  }

  /* 표·인용·코드가 넘칠 때는 그 안에서만 밀린다 */
  .dm-post table, .dm-njsingle-body table { display: block; overflow-x: auto; max-width: 100%; }
  .dm-post pre, .dm-njsingle-body pre { overflow-x: auto; }
  .dm-post img, .dm-njsingle-body img, .dm-nj-photo img { max-width: 100%; height: auto; }

  /* 후주 번호 상자가 본문을 밀지 않게 */
  .dm-notecol { max-width: 100%; }
  .dm-endnote { display: flex; gap: 8px; }
  .dm-endnote-text { min-width: 0; }
}


/* ── 히어로 줄 세로 정렬 (좁은 화면) ────────────────────
   flex-wrap 만으로는 단말기 칸이 눌려 한 글자씩 떨어진다.
   세로로 쌓고 각 칸을 전체 폭으로 편다. */
@media (max-width: 760px) {
  .dm-hero-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    flex-wrap: nowrap;
  }
  .dm-hero-term-col { width: 100%; flex: 0 0 auto; }
  .dm-hero-term { width: 100%; }
  .dm-hero-term-text { font-size: 14px; line-height: 1.55; }
  .dm-hero-term-line { flex-wrap: nowrap; align-items: flex-start; }
  .dm-hero-kicker { text-align: left; }
  .dm-crown-spin { align-self: flex-start; }
  .dm-hero-bar { display: block; white-space: normal; }
  .dm-hero-cursor { display: inline-block; }
}
@media (max-width: 420px) {
  .dm-hero-term { padding: 10px 12px; }
  .dm-hero-term-text { font-size: 13px; }
  .dm-hero-term-path { font-size: 9.5px; letter-spacing: .12em; }
}


/* ── 주석 팝업 — 좁은 화면에서는 화면 아래 고정 ──────────
   좌표 계산에 기대지 않는다. 어느 위치에서 눌러도 항상 보인다. */
@media (max-width: 640px) {
  #dm-fnpop {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 14px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
}

/* ── 도식: 좁은 화면에서도 크게, 밀어서 본다 ─────────────
   줄여서 뭉개지 않는다. 원래 크기로 두고 가로로 밀어 본다.
   justify-content:center 는 넘친 왼쪽을 스크롤로 닿을 수 없게
   잘라내므로, 넘칠 때는 flex-start 로 둔다. */
@media (max-width: 900px) {
  .dm-purpose-diagwrap {
    --dm-s: 1;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
    margin-inline: 0;
  }
  .dm-purpose-diagwrap > * { scroll-snap-align: center; flex: 0 0 auto; }

  /* 밀 수 있다는 신호 */
  .dm-purpose figure { position: relative; }
  .dm-purpose-diagwrap::-webkit-scrollbar { height: 6px; }
  .dm-purpose-diagwrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 70%, transparent);
    border-radius: 3px;
  }
  .dm-purpose-diagwrap::-webkit-scrollbar-track { background: transparent; }
}

/* 밀어서 보라는 안내 — 실제로 넘칠 때만 나타난다 */
.dm-diag-hint {
  display: none;
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted-ink);
  margin: 6px 0 0;
}
.dm-diag-hint::before { content: "↔ "; color: var(--accent); }
@media (max-width: 900px) {
  .dm-purpose figure.is-pannable .dm-diag-hint { display: block; }
}


/* ── 히어로: 모바일에서만 가운데 정렬 ────────────────────
   PC 는 지금의 왼쪽 정렬을 그대로 둔다. */
@media (max-width: 760px) {
  .dm-hero-row { align-items: center; }

  /* 위에서 돌아가는 큐브 */
  .dm-crown-spin { align-self: center; margin: 0 auto; }

  /* 진보적 방법론 연구 단위 */
  .dm-hero-kicker { text-align: center; width: 100%; }

  /* 단말기 줄은 상자만 가운데, 문장은 왼쪽 그대로 */
  .dm-hero-term-col { justify-content: center; }
}




/* ── 회전 큐브 — CRT 화면 질감 (첫 화면 + 사이드 메뉴) ──
   주의 1) stage 에 filter 를 걸면 preserve-3d 가 평면화된다.
   주의 2) 유리 반사는 큐브가 실제로 놓인 stage 에 얹어야 한다.
           spin/box 는 글자까지 품은 세로 상자라 중심이 어긋난다. */

.dm-crown-face, .dm-cube-face { image-rendering: pixelated; }

/* 주사선 — 작은 큐브는 2px 주기로 촘촘하게 */
.dm-crown-face::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 2px);
}
.dm-cube-face::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,.26) 0 1px, rgba(0,0,0,0) 1px 3px);
}

/* 붉은 면 — 인광 */
.dm-cf2, .dm-cf4 { box-shadow: inset 0 0 12px rgba(255,120,110,.4); }
.dm-f2,  .dm-f4  { box-shadow: inset 0 0 24px rgba(255,120,110,.42); }

/* 글자 인광 */
.dm-crown-word { filter: drop-shadow(0 0 2px rgba(227,6,19,.6)); }
.dm-cube-word  { filter: drop-shadow(0 0 4px rgba(227,6,19,.6)); }


/* ── 띠 제목 잘림 방지 ───────────────────────────────────
   .dm-sband-label 이 nowrap 이라 긴 책 이름이 잘렸다. */
.dm-sband { flex-wrap: wrap; }
.dm-sband-label { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 760px) {
  .dm-sband { gap: 8px 12px; align-items: baseline; }
  .dm-sband-label { font-size: 17px; line-height: 1.35; flex: 1 1 100%; }
  .dm-sband-rule { display: none; }
  .dm-sband-tag { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .dm-sband-label { font-size: 15.5px; }
}

}

/* ── 서적 서가 — 제목 띠가 곧 전환기 ─────────────────── */
.dm-shelf { position: relative; }
.dm-sband--shelf { position: relative; }

.dm-shelf-pick {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: left;
  color: inherit; font: inherit;
  font-family: var(--font-headline); /* 컨셉(도트) 폰트 — 읽기 폰트 전환에 안 흔들리게 */
  border-bottom: 2px dotted color-mix(in srgb, var(--accent) 65%, transparent);
}
.dm-shelf-pick:hover { border-bottom-color: var(--accent); }
.dm-shelf-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dm-shelf-caret {
  font: 400 .5em/1 var(--font-mono); color: var(--accent);
  transition: transform .14s ease;
}
.dm-shelf-pick[aria-expanded="true"] .dm-shelf-caret { transform: rotate(180deg); }

.dm-shelf-menu {
  position: absolute; z-index: 60;
  left: 0; top: calc(100% + 8px);
  margin: 0; padding: 0; list-style: none;
  min-width: min(26rem, calc(100vw - 32px));
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--accent);
}
.dm-shelf-menu li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  font: 400 12.5px/1.45 var(--font-body); color: var(--ink);
}
.dm-shelf-menu li + li { border-top: 1px solid color-mix(in srgb, var(--muted-ink) 25%, transparent); }
.dm-shelf-menu li:hover,
.dm-shelf-menu li:focus-visible {
  background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 0;
}
.dm-shelf-menu-n {
  flex: 0 0 auto;
  font: 400 10px/1 var(--font-mono); color: var(--muted-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .dm-shelf-menu { left: 0; right: 0; min-width: 0; box-shadow: 5px 5px 0 var(--accent); }
  .dm-shelf-menu li { padding: 12px 13px; }
}


/* ═══════════════════════════════════════════════════════════
   입회 안내 — 화려하게
   ═══════════════════════════════════════════════════════════ */

.dm-join { --jz: 1; }

/* ── 상단 무대 ─────────────────────────────────────────── */
.dm-join-stage {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  padding: 46px 20px 38px;
  margin: 0 0 40px;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 14px 14px 0 var(--accent);
  background: var(--surface);
}

/* 격자 — 안쪽으로 흐른다 */
.dm-join-grid {
  position: absolute; inset: -40%;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--muted-ink) 26%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--muted-ink) 26%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(420px) rotateX(62deg);
  animation: dm-join-scroll 5.2s linear infinite;
  opacity: .5;
}
@keyframes dm-join-scroll { to { background-position: 0 34px; } }

/* 인광 후광 */
.dm-join-glow {
  position: absolute; left: 50%; top: 44%;
  width: 300px; height: 300px; translate: -50% -50%;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 45%, transparent) 0%,
    transparent 62%);
  animation: dm-join-breathe 3.4s ease-in-out infinite;
}
@keyframes dm-join-breathe {
  0%,100% { opacity: .45; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: .8;  transform: translate(-50%,-50%) scale(1.14); }
}

.dm-join-cube { position: relative; z-index: 2; margin: 0; }

/* 부팅 줄 */
.dm-join-boot {
  position: relative; z-index: 2; margin: 0;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .18em; color: var(--muted-ink);
}
.dm-join-caret {
  display: inline-block; width: 7px; height: 12px;
  margin-left: 5px; vertical-align: -1px;
  background: var(--accent);
  animation: dm-join-blink 1.05s linear infinite;
}
@keyframes dm-join-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ── 머리글 ────────────────────────────────────────────── */
.dm-join-lead { font-size: 15.5px !important; line-height: 1.9 !important; }

/* ── 절차 네 칸 ────────────────────────────────────────── */
.dm-join-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 34px 0;
}
.dm-join-step {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--muted-ink) 45%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dm-join-step::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%,
    color-mix(in srgb, var(--accent) 40%, transparent) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: dm-join-sheen 4.6s ease-in-out infinite;
}
.dm-join-step:nth-child(2)::after { animation-delay: .35s; }
.dm-join-step:nth-child(3)::after { animation-delay: .7s; }
.dm-join-step:nth-child(4)::after { animation-delay: 1.05s; }
@keyframes dm-join-sheen {
  0%, 62% { transform: translateX(-120%); }
  78%,100% { transform: translateX(120%); }
}
.dm-join-step:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--accent);
}
.dm-join-step-no {
  font: 700 18px/1 var(--font-mono); color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dm-join-step-name { font: 700 13px/1.35 var(--font-body); }
.dm-join-step-desc { font: 400 11px/1.6 var(--font-body); color: var(--muted-ink); }

/* ── 신청 단추 ─────────────────────────────────────────── */
.dm-join-cta {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 44px 0 10px; padding: 32px 20px;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 12px 12px 0 var(--accent);
}
.dm-join-cta-label {
  font: 400 10.5px/1 var(--font-mono); letter-spacing: .22em; color: var(--muted-ink);
}
.dm-join-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 34px;
  text-decoration: none; color: var(--ink);
  background: var(--accent);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  font: 700 16px/1 var(--font-body); letter-spacing: .02em;
  animation: dm-join-pulse 2.2s ease-in-out infinite;
  transition: transform .12s ease, box-shadow .12s ease;
}
@keyframes dm-join-pulse {
  0%,100% { box-shadow: 6px 6px 0 var(--ink); }
  50%     { box-shadow: 6px 6px 0 var(--ink), 0 0 24px color-mix(in srgb, var(--accent) 80%, transparent); }
}
.dm-join-btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%,
    rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: dm-join-shine 2.8s ease-in-out infinite;
}
@keyframes dm-join-shine {
  0%, 55% { transform: translateX(-130%); }
  85%,100% { transform: translateX(130%); }
}
.dm-join-btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.dm-join-btn:active { transform: translate(6px,6px); box-shadow: 0 0 0 var(--ink); }
.dm-join-btn-arrow { font-family: var(--font-mono); transition: transform .16s ease; }
.dm-join-btn:hover .dm-join-btn-arrow { transform: translateX(5px); }
.dm-join-cta-url {
  font: 400 10.5px/1 var(--font-mono); color: var(--muted-ink); letter-spacing: .04em;
}

@media (max-width: 760px) {
  .dm-join-steps { grid-template-columns: 1fr 1fr; }
  .dm-join-stage { padding: 34px 14px 28px; box-shadow: 0 0 0 1px var(--surface) inset, 8px 8px 0 var(--accent); }
  .dm-join-cta { padding: 26px 14px; box-shadow: 0 0 0 1px var(--surface) inset, 8px 8px 0 var(--accent); }
  .dm-join-btn { font-size: 14.5px; padding: 14px 26px; }
}
@media (max-width: 430px) {
  .dm-join-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-join-grid, .dm-join-glow, .dm-join-caret,
  .dm-join-step::after, .dm-join-btn, .dm-join-btn::before { animation: none; }
}




/* ── 사진 자리를 대신하는 큐브 무대 ─────────────────────
   원안 그대로. 눈이 아프지 않게 효과는 격자와 후광만. */
.dm-cube-hero {
  margin: 6px 0 60px;
  padding: 52px 20px 44px;
}
.dm-cube-hero .dm-cube-box { --dm-cube: 148px; --dm-half: 74px; }
.dm-cube-hero .dm-cube-word { width: 186px; }
.dm-cube-hero .dm-join-glow { width: 340px; height: 340px; }

@media (max-width: 760px) {
  .dm-cube-hero { padding: 38px 14px 32px; margin-bottom: 40px;
    box-shadow: 0 0 0 1px var(--surface) inset, 8px 8px 0 var(--accent); }
  .dm-cube-hero .dm-cube-box { --dm-cube: 116px; --dm-half: 58px; }
  .dm-cube-hero .dm-cube-word { width: 146px; }
  .dm-cube-hero .dm-join-glow { width: 240px; height: 240px; }
}

/* ── 사진 자리를 대신하는 큐브 무대 ─────────────────────
   원안 그대로. 효과는 격자와 후광만. */
.dm-cube-hero { margin: 6px 0 60px; padding: 52px 20px 44px; }
.dm-cube-hero .dm-cube-box { --dm-cube: 148px; --dm-half: 74px; }
.dm-cube-hero .dm-cube-word { width: 186px; }
.dm-cube-hero .dm-join-glow { width: 340px; height: 340px; }

@media (max-width: 760px) {
  .dm-cube-hero { padding: 38px 14px 32px; margin-bottom: 40px;
    box-shadow: 0 0 0 1px var(--surface) inset, 8px 8px 0 var(--accent); }
  .dm-cube-hero .dm-cube-box { --dm-cube: 116px; --dm-half: 58px; }
  .dm-cube-hero .dm-cube-word { width: 146px; }
  .dm-cube-hero .dm-join-glow { width: 240px; height: 240px; }
}


/* ── 밀어보기 안내 — 우선순위를 올려 작게 유지한다 ───────
   .dm-purpose p 가 더 강해서 글씨가 커지던 것을 바로잡는다. */
.dm-purpose figure .dm-diag-hint,
.dm-purpose .dm-diag-hint,
p.dm-diag-hint {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  letter-spacing: .06em !important;
  color: var(--muted-ink) !important;
  text-align: left !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

/* 스크롤 막대를 더 가늘고 조용하게 */
@media (max-width: 900px) {
  .dm-purpose-diagwrap { padding-bottom: 6px; }
  .dm-purpose-diagwrap::-webkit-scrollbar { height: 3px; }
  .dm-purpose-diagwrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted-ink) 55%, transparent);
    border-radius: 2px;
  }
}


/* ═══ 발제 화면 정돈 ═════════════════════════════════════
   가로선이 다섯 겹으로 겹쳐 어수선했다.
   구역을 셋으로 나누고 경계선은 구역 사이에만 둔다.
   ① 발제 ② 댓글 ③ 쓰기
   ══════════════════════════════════════════════════════ */

/* 본문 아래 여백 확보 */
.dm-njsingle-body { padding-bottom: 4px; }

/* 운영 안내 — 선 없이 조용한 각주로 */
.dm-njsingle .dm-nj-foot {
  margin: 28px 0 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-left: 2px solid color-mix(in srgb, var(--muted-ink) 40%, transparent) !important;
  background: color-mix(in srgb, var(--muted-ink) 6%, transparent);
  font-size: 10.5px !important;
  line-height: 1.75 !important;
}

/* ── 댓글 구역 ─────────────────────────────────────────── */
.dm-njsingle .dm-nj-replies {
  margin-top: 44px !important;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}

/* 머리 — 아래 선을 없애고 라벨답게 */
.dm-njsingle .dm-cmt-head {
  border: 0 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font: 400 11px/1 var(--font-mono) !important;
  letter-spacing: .2em !important;
  color: var(--muted-ink) !important;
}

/* 빈 상태 — 위아래 선 제거 */
.dm-njsingle .dm-cmt-empty {
  border: 0 !important;
  margin: 0 0 22px !important;
  padding: 14px 0 !important;
  text-align: left !important;
  font-size: 12.5px !important;
  color: var(--muted-ink);
}

/* 댓글 목록과 쓰기 사이 경계 */
.dm-njsingle .comment-respond {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--muted-ink) 28%, transparent);
}

/* 쓰기 상자 — 입력칸과 단추를 한 덩어리로 */
.dm-njsingle .dm-cmt-form textarea {
  min-height: 96px !important;
  margin-bottom: 10px !important;
}
.dm-njsingle .dm-cmt-form .form-submit {
  display: flex; align-items: center; justify-content: flex-end;
  margin: 0 !important;
}
.dm-njsingle .dm-cmt-form #submit,
.dm-njsingle .dm-cmt-form input[type=submit] {
  padding: 10px 26px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}

/* 개인정보 안내 — 쓰기 상자에 붙인다 */
.dm-njsingle .dm-cmt-privacy {
  margin: 12px 0 0 !important;
  font-size: 10px !important;
  color: var(--muted-ink);
}

/* ── 목록 단추 — 왼쪽 정렬, 구역 밖으로 ────────────────── */
.dm-njsingle .dm-nj-backlist {
  margin-top: 40px !important;
  padding: 10px 26px !important;
}

@media (max-width: 640px) {
  .dm-njsingle .dm-nj-replies { margin-top: 34px !important; padding-top: 20px; }
  .dm-njsingle .dm-cmt-form .form-submit { justify-content: stretch; }
  .dm-njsingle .dm-cmt-form #submit { width: 100%; }
  .dm-njsingle .dm-nj-backlist { display: block; text-align: center; }
}


/* ═══ 발제 화면 — 정돈된 구역 ═══════════════════════════
   본문은 세로선 없이 평범하게 읽히도록 하고,
   수정·삭제는 본문과 겹치지 않게 오른쪽 끝 작은 글자로 둔다. */

.dm-njsingle-body { padding-bottom: 4px; }

/* ── 본인 글 관리 줄 — 오른쪽 끝, 작은 글자 ────────────── */
.dm-nj-own {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 14px;
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--muted-ink) 22%, transparent);
}
/* 수정 상자가 펼쳐지면 자기 줄을 통째로 쓰고, 삭제는 그동안 숨긴다 */
.dm-nj-own:has(.dm-nj-own-edit[open]) .dm-nj-own-del { display: none; }
.dm-nj-own-hint {
  flex: 1 1 auto; margin: 0;
  font: 400 10.5px/1.6 var(--font-body); color: var(--muted-ink);
}

.dm-nj-own-edit { flex: 0 0 auto; position: relative; }
.dm-nj-own-edit > summary {
  cursor: pointer; list-style: none;
  font: 400 11.5px/1 var(--font-body); color: var(--muted-ink);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.dm-nj-own-edit > summary::-webkit-details-marker { display: none; }
.dm-nj-own-edit > summary:hover,
.dm-nj-own-edit[open] > summary { color: var(--ink); text-decoration-style: solid; }

.dm-nj-own-del { flex: 0 0 auto; margin: 0; }
.dm-nj-own-delbtn {
  cursor: pointer; background: none; border: 0; padding: 0;
  font: 400 11.5px/1 var(--font-body); color: var(--muted-ink);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.dm-nj-own-delbtn:hover { color: #c0392b; text-decoration-style: solid; }

/* 펼쳐진 수정 상자 — 본문과 분리된 별도 패널로 아래에 뜬다 */
.dm-nj-own-edit[open] {
  display: block; width: 100%; margin-top: 10px;
}
.dm-nj-own-edit .dm-nj-form--edit {
  margin-top: 10px; padding: 18px;
  border: 1px solid color-mix(in srgb, var(--muted-ink) 40%, transparent);
  background: color-mix(in srgb, var(--muted-ink) 5%, transparent);
  text-align: left;
}
.dm-nj-own-edit .dm-nj-tin { margin-bottom: 10px; }
.dm-nj-own-foot {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; margin-top: 12px;
}

/* ── 댓글 구역 ─────────────────────────────────────────── */
.dm-njsingle .dm-nj-replies {
  margin-top: 30px !important;
  padding-top: 22px !important;
  border-top: 2px solid var(--ink);
}
.dm-njsingle .dm-cmt-head {
  border: 0 !important; margin: 0 0 4px !important; padding: 0 !important;
  font: 400 11px/1 var(--font-mono) !important; letter-spacing: .2em !important;
  color: var(--muted-ink) !important;
}
.dm-njsingle .dm-cmt-empty {
  border: 0 !important; margin: 0 0 14px !important; padding: 8px 0 !important;
  text-align: left !important; font-size: 12.5px !important; color: var(--muted-ink);
}
.dm-njsingle .comment-respond { padding-top: 16px; }

.dm-njsingle .dm-nj-foot {
  margin: 20px 0 0 !important; padding: 10px 0 !important;
  border: 0 !important; border-top: 1px dotted color-mix(in srgb, var(--muted-ink) 34%, transparent) !important;
  background: none !important;
  font-size: 10.5px !important; line-height: 1.75 !important;
}
.dm-njsingle .dm-nj-backlist { margin-top: 30px !important; }

@media (max-width: 640px) {
  .dm-nj-own { flex-wrap: wrap; justify-content: flex-end; }
  .dm-nj-own-hint { flex: 1 1 100%; text-align: right; margin-bottom: 4px; }
}

/* ── 논장 비밀번호 칸 ──────────────────────────────────── */
.dm-nj-form input[type=password] {
  width: 100%; font: 400 13px/1.6 var(--font-body); padding: 9px 11px;
  background: transparent; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--muted-ink) 55%, transparent);
}
.dm-nj-form input[type=password]:focus {
  outline: 0; border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent);
}
.dm-nj-pwrow {
  display: inline-flex; align-items: center; gap: 6px;
}
.dm-nj-pwrow span {
  font: 400 10.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--muted-ink);
  white-space: nowrap;
}
.dm-nj-pwrow input[type=password] {
  width: 8.5rem !important; padding: 5px 8px !important; font-size: 11px !important;
}
.dm-nj-own-del { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 640px) {
  .dm-nj-pwrow { width: 100%; margin: 0 0 8px; }
  .dm-nj-pwrow input[type=password] { width: 100% !important; }
  .dm-nj-own-del { width: 100%; }
}


/* ═══ 읽기 폰트 선택 ═══════════════════════════════════════
   가독성 높은 네 가지 중 고른다. 픽셀 폰트(--font-ui)는
   장식용 UI 글자에만 남고, 본문은 여기서 정한다. */

html[data-dm-font="pretendard"] { --font-read: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Nanum Gothic', sans-serif; }
html[data-dm-font="noto"]       { --font-read: 'Noto Sans KR', 'Pretendard', -apple-system, sans-serif; }
html[data-dm-font="gothic"]     { --font-read: 'Nanum Gothic', 'Noto Sans KR', sans-serif; }
html[data-dm-font="serif"]      { --font-read: 'Noto Serif KR', 'Nanum Myeongjo', 'Gowun Batang', serif; }
html[data-dm-font="plex"]       { --font-read: 'IBM Plex Sans KR', 'Pretendard Variable', 'Pretendard', sans-serif; }
html[data-dm-font="myeongjo"]   { --font-read: 'Nanum Myeongjo', 'Noto Serif KR', serif; }
html[data-dm-font="concept"]    { --font-read: var(--font-ui); }

/* 본문류 요소들이 --font-body 를 직접 쓰던 곳도 읽기 변수로 통일 */
.dm-njsingle-body, .dm-post-body, .dm-purpose p, .dm-nj-canvas,
.dm-cmt-form textarea, .dm-njsingle .comment-content,
article p, .entry-content p {
  font-family: var(--font-read, var(--font-body));
}

/* ── 선택 막대 ─────────────────────────────────────────── */
.dm-font-pick {
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.dm-font-pick-label {
  font: 400 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--muted-ink);
}
.dm-font-pick-btn {
  cursor: pointer; background: none; border: 1px solid color-mix(in srgb, var(--muted-ink) 50%, transparent);
  color: var(--ink); font: 400 11.5px/1 var(--font-body);
  padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px;
}
.dm-font-pick-btn:hover { border-color: var(--ink); }
.dm-font-pick-menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); right: 0;
  min-width: 11rem; margin: 0; padding: 0; list-style: none;
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--accent);
}
.dm-font-pick-menu li + li { border-top: 1px solid color-mix(in srgb, var(--muted-ink) 25%, transparent); }
.dm-font-pick-menu button {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 9px 12px;
  font-size: 13px; color: var(--ink);
}
.dm-font-pick-menu button:hover,
.dm-font-pick-menu button[aria-checked="true"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.dm-font-pick-menu button[aria-checked="true"]::before { content: "✓ "; color: var(--accent); }

@media (max-width: 640px) {
  .dm-font-pick-menu { right: 0; left: auto; }
}


/* 정렬 버튼 — 한글 글자로 바뀐 만큼 여백만 살짝 조정 */
.dm-nj-tool[data-cmd^="justify"] {
  font-family: var(--font-body);
  font-size: 11px;
  padding: 0 8px;
}


/* ── 도구줄 안의 폰트 선택 ─────────────────────────────── */
.dm-nj-tools .dm-font-pick { margin-left: auto; }
.dm-nj-tools .dm-font-pick-btn {
  height: 26px; padding: 0 9px;
  border: 1px solid transparent;
  font-size: 10.5px;
}
.dm-nj-tools .dm-font-pick-btn:hover { border-color: color-mix(in srgb, var(--muted-ink) 45%, transparent); }
.dm-nj-tools .dm-font-pick-label { display: none; }
.dm-nj-tools .dm-font-pick-menu { right: 0; left: auto; }

/* 글자 수와 겹치지 않도록 순서 재배치 */
.dm-nj-tools { flex-wrap: wrap; row-gap: 6px; }
.dm-nj-tools .dm-nj-tcount { margin-left: auto; order: 8; }
.dm-nj-tools .dm-font-pick { order: 9; margin-left: 8px; }

@media (max-width: 480px) {
  .dm-nj-tools .dm-font-pick { margin-left: 0; flex: 1 1 100%; order: 9; }
  .dm-nj-tools .dm-font-pick-btn { width: 100%; justify-content: center; border-color: color-mix(in srgb, var(--muted-ink) 40%, transparent); }
}


/* ═══ 후원·가입 안내 — 터미널 패널로 ═════════════════════
   사이트의 단말기·인쇄물 어법에 맞춘다. */

.dm-cta {
  position: relative;
  text-align: left;
  max-width: 620px;
  margin: 34px auto 0;
  padding: 30px 32px 32px !important;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surface) inset, 10px 10px 0 var(--accent);
  background: var(--surface);
}

/* 상단 경로 줄 */
.dm-cta::before {
  content: "DIAMAT://JOIN · SUPPORT";
  display: block;
  font: 400 10px/1 var(--font-mono);
  letter-spacing: .2em;
  color: var(--muted-ink);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted-ink) 45%, transparent);
}

.dm-cta-title {
  font-family: var(--font-headline) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 10px !important;
}
/* 제목 앞 표식 */
.dm-cta-title::before {
  content: "> ";
  color: var(--accent);
}

.dm-cta-text {
  font-family: var(--font-headline) !important;
  font-size: 11.5px !important;
  line-height: 1.9 !important;
  color: var(--muted-ink);
  margin: 0 0 24px !important;
  max-width: none !important;
}

.dm-cta-row { justify-content: flex-start !important; gap: 10px !important; }

.dm-cta-btn {
  font-family: var(--font-headline) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
  padding: 11px 22px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0;
  transition: transform .12s ease, box-shadow .12s ease, background .18s ease, color .18s ease;
}
.dm-cta-btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.dm-cta-btn:active { transform: translate(0,0); box-shadow: none; }

.dm-cta-btn--primary {
  border-color: var(--ink) !important;
  background: var(--accent) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.dm-cta-btn--primary:hover {
  background: var(--accent) !important;
  color: var(--ink) !important;
  opacity: 1;
  box-shadow: 4px 4px 0 var(--ink);
}

@media (max-width: 640px) {
  .dm-cta {
    padding: 24px 20px 26px !important;
    box-shadow: 0 0 0 1px var(--surface) inset, 6px 6px 0 var(--accent);
  }
  .dm-cta-title { font-size: 18px !important; }
  .dm-cta-row { flex-direction: column; }
  .dm-cta-btn { width: 100%; text-align: center; }
}


/* ── 후원 카드 아래 — 화면 끝까지 닿는 마감선 ────────────
   .dm-shell 안에 있어도 화면 양끝까지 뻗도록 뷰포트 폭을 쓴다. */
.dm-home > div > section > .dm-cta { margin-bottom: 0; }

@media (max-width: 640px) {
  .dm-cta { margin-top: 26px !important; }
}


/* ── 모핑 로고 — 컨셉 폰트로 강제 고정 ─────────────────────
   diamat-morph-logo 커스텀 엘리먼트가 외부 번들 스크립트에서
   Cafe24Ssurround/Jua/Baloo 2 같은 엉뚱한 폰트를 자체 지정하므로
   !important로 사이트 컨셉 폰트를 되찾는다. */
.dm-brand-text, .dm-brand-text * {
  font-family: DungGeunMo, Galmuri11, "Nanum Gothic", sans-serif !important;
}