/* Markdown Viewer 固有の版面。
   2026-08-27に site.css（全ツール共通）から移設した。#preview / #src のような
   一般的なセレクタを共通CSSに置くと、同じ名前を使う別ツールへ黙って漏れるため。
   共通の枠（ヘッダー・.tool-head・.bar・.seg・共有導線・印刷の枠消し）は site.css が正。 */

/* ---------- 2ペイン（編集 / プレビュー） ---------- */
.viewer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane-label { font-size: 10px; letter-spacing: 0.14em; color: var(--body); margin-bottom: 8px; }
.pane-label .dot { color: var(--accent); }
#src {
  width: 100%; flex: 1; min-height: 460px; resize: vertical;
  font-family: 'Space Mono', ui-monospace, Consolas, monospace; font-size: var(--font-input); line-height: 1.8;
  color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; padding: 16px;
}
#src:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 0; }
#preview { flex: 1; min-height: 460px; padding: 22px 26px; overflow-x: auto; overflow-wrap: break-word; max-width: var(--measure); }
#preview.empty { display: grid; place-items: center; }
.empty-hint { text-align: center; color: var(--faint); font-size: 12px; line-height: 2.1; }
.empty-hint .big { display: block; font-family: 'Space Mono', ui-monospace, monospace; font-size: 22px; letter-spacing: 0.1em; color: var(--line-strong); margin-bottom: 6px; }

/* view modes */
.view-edit .pane-preview, .view-preview .pane-edit { display: none; }
.view-edit .viewer, .view-preview .viewer { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .viewer { grid-template-columns: 1fr; }
  .view-split .pane-preview { display: none; } /* モバイルの分割は成立しないため編集を優先表示 */
  #src, #preview { min-height: 55vh; }
}

/* preview typography */
#preview :is(h1, h2, h3, h4) { font-feature-settings: 'palt'; line-height: 1.5; }
#preview > :first-child { margin-top: 0; }
#preview h1 { font-size: 24px; font-weight: 900; }
#preview h2 { font-size: 19px; margin-top: 30px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
#preview h3 { font-size: 16px; margin-top: 24px; }
#preview p, #preview li { font-size: var(--font-body); }
#preview a { color: var(--accent-strong); font-weight: 700; }
#preview a:hover { text-decoration: underline; }
#preview code { font-family: 'Space Mono', ui-monospace, monospace; font-size: 12px; background: var(--band); border-radius: 4px; padding: 1px 6px; }
#preview pre { background: var(--band); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; line-height: 1.7; }
#preview pre code { background: none; padding: 0; }
#preview blockquote { margin: 1em 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); color: var(--body); }
#preview hr { border: none; border-top: 1px solid var(--line-strong); margin: 28px 0; }
#preview table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
#preview th, #preview td { border: 1px solid var(--line-strong); padding: 6px 14px; font-size: 13px; }
#preview th { background: var(--band); }
#preview img { max-width: 100%; border-radius: 8px; }
#preview input[type="checkbox"] { accent-color: var(--accent-strong); }

/* drag & drop overlay */
#dropzone { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(3px); }
body.drop #dropzone { display: grid; }
#dropzone .box { border: 2px dashed var(--accent); border-radius: 18px; background: var(--card); padding: 44px 64px; text-align: center; pointer-events: none; }
#dropzone .box .l1 { font-size: 17px; font-weight: 900; font-feature-settings: 'palt'; }
#dropzone .box .l2 { font-family: 'Space Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--faint); margin-top: 6px; }
/* ---------- 印刷 = PDF出力: プレビューだけを紙に出す（枠消しは site.css 側） ---------- */
@media print {
  .pane-edit, .pane-label, #dropzone { display: none !important; }
  .viewer { display: block; margin: 0; }
  .pane-preview { display: block !important; }
  #preview { border: none; min-height: 0; padding: 0; background: #fff; overflow: visible; max-width: none; }
  #preview pre { white-space: pre-wrap; }
}