/* ============================================================
   마크다운 미리보기 전용 스타일
   - 왼쪽 편집기 / 오른쪽 "조판된 문서" 미리보기의 2단 작업대
   - 미리보기는 종이 위 인쇄물처럼: 명조 제목, 붉은 인용 레일
   - 글꼴 선택용 자가 호스팅 웹폰트 @font-face (외부 요청 없음)
   ============================================================ */

/* ---- 미리보기 글꼴 (선택했을 때만 내려받아짐) ---- */
@font-face {
  font-family: "NanumMyeongjoWeb";
  src: url("/assets/fonts/NanumMyeongjo.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NanumMyeongjoWeb";
  src: url("/assets/fonts/NanumMyeongjoBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HakgyoansimBadasseugi";  /* 학교안심 받아쓰기 */
  src: url("/assets/fonts/hakgyoansim-badasseugi.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SangjuDajungdagam";      /* 상주 다정다감 */
  src: url("/assets/fonts/sangju-dajungdagam.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TvnJeulgeoun";           /* tvN 즐거운이야기 */
  src: url("/assets/fonts/tvn-jeulgeoun.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NanumBrushWeb";          /* 나눔손글씨 붓 */
  src: url("/assets/fonts/nanum-brush.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inklipquid";             /* 잉크립퀴드 */
  src: url("/assets/fonts/inklipquid.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ---- 도입부: 원고 교정지 모티프(가로 괘선 + 왼쪽 여백선) ---- */
.tool-intro {
  position: relative;
  padding: clamp(36px, 6vw, 72px) 0 clamp(24px, 3.5vw, 40px);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.tool-intro > * { position: relative; }
.md-motif::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    transparent 0, transparent 25px,
    var(--color-grid) 25px, var(--color-grid) 26px);
  opacity: .5;
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
          mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
  pointer-events: none;
}
.md-motif::after {                 /* 교정지의 왼쪽 붉은 여백선 */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 84px;
  width: 1px;
  background: var(--color-grid-strong);
  opacity: .45;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,.7), transparent 80%);
          mask-image: linear-gradient(rgba(0,0,0,.7), transparent 80%);
  pointer-events: none;
}
.tool-intro h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  word-break: keep-all;
}
.tool-intro .lead {
  max-width: 56ch;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  word-break: keep-all;
}
.tool-intro .lead-note {
  margin: var(--space-3) 0 0;
  font-size: .85rem;
  color: var(--color-text-sub);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- 설명/FAQ 본문 (다른 도구와 동일 톤) ---- */
.prose { margin-top: var(--space-6); }
.prose h2 { margin-bottom: var(--space-3); }
.prose h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.05rem; }
.prose p, .prose li { color: var(--color-text); }
.prose em { color: var(--color-primary); font-style: normal; font-weight: 600; }
.prose code {
  font-family: ui-monospace, "SF Mono", Consolas, "D2Coding", monospace;
  font-size: .86em;
  background: var(--color-primary-weak);
  border-radius: 4px;
  padding: 1px 5px;
}
.prose ol, .prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}
.prose summary { cursor: pointer; font-weight: 600; }
.prose details[open] summary { margin-bottom: var(--space-2); }
.prose details p { margin: 0; color: var(--color-text-sub); }

/* ---- 도구줄 ---- */
.md-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.md-actions .grp { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 6px; }

/* 보기 전환 세그먼트 */
.view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
}
.view-opt {
  font: inherit; font-size: .8rem; line-height: 1;
  cursor: pointer; white-space: nowrap;
  border: 0; border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  color: var(--color-text-sub);
}
.view-opt:not(.is-active):hover { color: var(--color-text); }
.view-opt.is-active { background: var(--color-primary); color: #fff; font-weight: 700; }

/* ---- 작업대: 편집기 + 미리보기 ---- */
.md-bench {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  min-height: 480px;
}
body[data-view="edit"]    .md-pane-preview { display: none; }
body[data-view="edit"]    .md-bench { grid-template-columns: 1fr; }
body[data-view="preview"] .md-pane-edit { display: none; }
body[data-view="preview"] .md-bench { grid-template-columns: 1fr; }

.md-pane {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: .82rem;
  color: var(--color-text-sub);
}
.pane-title { font-weight: 700; letter-spacing: .08em; }
.pane-tools { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.pane-tools select {
  font: inherit; font-size: .82rem;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  max-width: 160px;
}
.pane-tools label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* 편집기 */
#mdIn {
  flex: 1;
  width: 100%;
  min-height: 440px;
  padding: var(--space-4);
  border: 0;
  resize: none;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
               "Nanum Gothic Coding", "D2Coding", monospace;
  font-size: .9rem;
  line-height: 1.7;
  tab-size: 2;
}
#mdIn:focus { outline: none; }
.md-pane-edit:focus-within { border-color: var(--color-primary); }

/* ---- 미리보기: 종이 위에 조판된 문서 ---- */
.md-scroller {
  flex: 1;
  overflow-y: auto;
  min-height: 440px;
  max-height: 72vh;
}
body[data-view="preview"] .md-scroller { max-height: none; }
#mdIn { max-height: 72vh; }
body[data-view="edit"] #mdIn { max-height: none; }

.md-doc {
  padding: clamp(20px, 4vw, 40px) clamp(20px, 4.5vw, 44px);
  font-size: 1rem;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.md-empty-note { color: var(--color-text-sub); }

.md-doc h1, .md-doc h2, .md-doc h3,
.md-doc h4, .md-doc h5, .md-doc h6 {
  font-family: inherit;             /* 선택한 글꼴을 제목에도 */
  line-height: 1.35;
  margin: 1.6em 0 .55em;
  letter-spacing: -.01em;
}
.md-doc > :first-child { margin-top: 0; }
.md-doc h1 {
  font-size: 1.75em;
  padding-bottom: .32em;
  border-bottom: 2px solid var(--color-text);
}
.md-doc h2 {
  font-size: 1.4em;
  padding-bottom: .26em;
  border-bottom: 1px solid var(--color-border);
}
.md-doc h3 { font-size: 1.18em; }
.md-doc h4 { font-size: 1.05em; }
.md-doc h5, .md-doc h6 { font-size: 1em; color: var(--color-text-sub); }

.md-doc p { margin: 0 0 1em; }
.md-doc a { text-decoration: underline; text-underline-offset: 3px; }

.md-doc ul, .md-doc ol { margin: 0 0 1em; padding-left: 1.6em; }
.md-doc li { margin: .25em 0; }
.md-doc li > ul, .md-doc li > ol { margin-bottom: 0; }
.md-doc li.md-task { list-style: none; margin-left: -1.35em; }
.md-doc li.md-task input {
  accent-color: var(--color-primary);
  margin-right: .45em;
  vertical-align: -1px;
}

.md-doc blockquote {
  margin: 0 0 1em;
  padding: .55em 1.1em;
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-weak);
  border-radius: 0 6px 6px 0;
  color: var(--color-text);
}
.md-doc blockquote > :last-child { margin-bottom: 0; }
.md-doc blockquote blockquote { margin-top: .6em; background: var(--color-surface); }

.md-doc hr {
  border: 0;
  height: 1px;
  margin: 2em auto;
  max-width: 240px;
  background: linear-gradient(90deg, transparent, var(--color-grid-strong), transparent);
}

.md-doc code {
  font-family: ui-monospace, "SF Mono", Consolas, "D2Coding", monospace;
  font-size: .88em;
  background: var(--color-primary-weak);
  border-radius: 4px;
  padding: .12em .38em;
}

/* 코드 블록: 언어 라벨 + 복사 버튼이 달린 먹색 판 */
.md-code {
  margin: 0 0 1.1em;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.md-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  background: #26221c;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.md-code-lang {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #a89d8b;
}
.md-code-copy {
  font: inherit; font-size: .72rem;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px;
  padding: 2px 9px;
  background: transparent;
  color: #d8d0c2;
}
.md-code-copy:hover { border-color: #d8d0c2; }
.md-code pre {
  margin: 0;
  padding: 13px 15px;
  overflow-x: auto;
  background: #1d1a15;
}
.md-code pre code {
  background: none; padding: 0; border-radius: 0;
  color: #ece6da;
  font-size: .86rem;
  line-height: 1.65;
}

.md-table-wrap { overflow-x: auto; margin: 0 0 1.1em; }
.md-doc table {
  border-collapse: collapse;
  font-size: .95em;
  min-width: 50%;
}
.md-doc th, .md-doc td {
  border: 1px solid var(--color-border);
  padding: 7px 13px;
  text-align: left;
}
.md-doc th {
  background: var(--color-bg);
  font-weight: 700;
  border-bottom: 2px solid var(--color-grid-strong);
}
.md-doc tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-bg) 55%, transparent); }

.md-doc img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

/* 다크에서 코드판은 이미 어두우므로 경계만 살짝 */
:root[data-theme="dark"] .md-code-head,
:root[data-theme="dark"] .md-code pre { background: #12100c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .md-code-head,
  :root:not([data-theme="light"]) .md-code pre { background: #12100c; }
}

/* ---- 반응형 ---- */
@media (max-width: 860px) {
  .md-bench { grid-template-columns: 1fr; }
  #mdIn, .md-scroller { min-height: 300px; max-height: 52vh; }
}

/* ---- 인쇄: 미리보기 문서만 종이에 ---- */
@media print {
  .site-header, .site-footer, .tool-intro, .md-actions,
  .md-pane-edit, .pane-head, .ad-slot, .prose, .md-code-copy { display: none !important; }
  .container { max-width: none; padding: 0; }
  .md-pane, .card { border: 0; box-shadow: none; padding: 0; }
  .md-scroller { max-height: none; overflow: visible; }
  .md-doc { padding: 0; }
  body { background: #fff; }
  .md-code pre, .md-code-head { background: #f4f4f4 !important; }
  .md-code pre code { color: #222; }
}