/* 簡易 Markdown エディタ（mdedit.js）の見た目。クラスはすべて mdx- で始める */
.mdx { box-sizing: border-box; min-height: 100%; padding: 0 0 12px; background: #fff; font-size: 13px; color: #222;
       font-family: inherit; }
.mdx * { box-sizing: border-box; }
.mdx-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
           background: #f5f8f6; border-bottom: 1px solid #dfe6e1; }
.mdx-tab { padding: 4px 12px; border: 1px solid #c8d6cd; border-radius: 4px; background: #fff; color: #2f6b4f; cursor: pointer; font-size: 12px; }
.mdx-tab.sel { background: #2f6b4f; border-color: #2f6b4f; color: #fff; }
.mdx-hint { margin-left: 6px; color: #7f8c8d; font-size: 11px; }
.mdx-warn { margin: 8px; padding: 6px 10px; border-radius: 4px; background: #fff6dc; color: #7a5a00; font-size: 12px; }
.mdx-raw { display: block; width: calc(100% - 16px); height: 360px; margin: 8px; padding: 8px; border: 1px solid #c8d6cd; border-radius: 4px;
           font-family: Consolas, "MS Gothic", monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
.mdx-list { padding: 8px; }

.mdx-blk { margin: 0 0 8px; padding: 6px 6px 4px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fbfcfb; }
.mdx-blk.lv1 { border-left: 4px solid #2f6b4f; }
.mdx-blk.lv2 { border-left: 4px solid #6aa384; margin-left: 10px; }
.mdx-blk.lv3, .mdx-blk.lv4, .mdx-blk.lv5, .mdx-blk.lv6 { border-left: 4px solid #a9cdb8; margin-left: 20px; }
.mdx-blk.lv0 { border-style: dashed; }
.mdx-head { display: flex; align-items: center; gap: 4px; }
.mdx-items { margin: 4px 0 0 18px; }
.mdx-item { display: flex; align-items: flex-start; gap: 4px; margin: 0 0 3px; padding: 1px 0; border-radius: 4px; }
.mdx-item.ind { margin-left: 26px; }
.mdx-item:hover, .mdx-head:hover { background: #f0f5f2; }

.mdx-grip { flex: none; width: 16px; padding-top: 4px; color: #a3b3a9; cursor: grab; user-select: none; text-align: center; letter-spacing: -2px; }
.mdx-grip:hover { color: #2f6b4f; }
.mdx-lv, .mdx-kind { flex: none; height: 26px; border: 1px solid #c8d6cd; border-radius: 4px; background: #fff; font-size: 12px; }
.mdx-lv { width: 104px; }
.mdx-kind { width: 92px; }
.mdx-title { flex: 1; min-width: 80px; height: 26px; padding: 2px 6px; border: 1px solid #c8d6cd; border-radius: 4px; font-weight: bold; font-size: 13px; }
.mdx-title:disabled { background: transparent; border-color: transparent; font-weight: normal; color: #9aa7a0; }
.mdx-text { flex: 1; min-width: 80px; min-height: 26px; padding: 3px 6px; border: 1px solid #d6dfd9; border-radius: 4px; resize: none; overflow: hidden;
            font-family: inherit; font-size: 13px; line-height: 1.45; }
.mdx-title:focus, .mdx-text:focus { outline: none; border-color: #2f6b4f; box-shadow: 0 0 0 2px rgba(47, 107, 79, 0.15); }

.mdx-btn { flex: none; height: 26px; min-width: 26px; padding: 0 6px; border: 1px solid #c8d6cd; border-radius: 4px; background: #fff;
           color: #2f6b4f; cursor: pointer; font-size: 13px; line-height: 24px; }
.mdx-btn:hover { background: #eef5f0; }
.mdx-btn.mdx-del { color: #c0392b; }
.mdx-btn.mdx-del:hover { background: #fdecea; }
.mdx-btn.mdx-ind { min-width: 24px; color: #7f8c8d; }
.mdx-additem { margin: 2px 0 2px 20px; font-size: 12px; border-style: dashed; }
.mdx-addblk { margin: 4px 0; font-size: 12px; border-style: dashed; }

/* ドラッグ中 */
.mdx-dragging { opacity: 0.4; }
.mdx-before { box-shadow: inset 0 3px 0 #2f6b4f; }
.mdx-after { box-shadow: inset 0 -3px 0 #2f6b4f; }
.mdx-into { outline: 2px dashed #2f6b4f; }