.page-heading{margin-bottom:20px}
.page-heading h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 8px;word-break:keep-all;text-wrap:balance}
.page-heading>p{font-size:.9rem}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.editor-panel{padding:0;overflow:hidden}
.panel-top{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel-top h2{font-size:1.05rem;margin:0}
.counter{font-size:.78rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.editor-panel textarea{display:block;width:100%;min-height:460px;resize:vertical;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;padding:16px 20px;color:var(--text);font:.92rem/1.7 ui-monospace,SFMono-Regular,Consolas,"Malgun Gothic",monospace;tab-size:2;overflow-wrap:anywhere}
.editor-panel textarea::placeholder{color:#718198}
.editor-panel textarea:focus-visible{outline:3px solid #e9aa23;outline-offset:-3px}
.editor-footer{padding:10px 20px 0;display:flex;flex-direction:column;gap:2px}
.privacy-note{color:var(--muted);font-size:.76rem;line-height:1.5;margin:0;overflow-wrap:anywhere}
.action-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px 16px}
.action-row .button{font-size:.85rem;min-height:44px}
.action-row .button:focus-visible{outline:3px solid #e9aa23;outline-offset:2px}
.status{margin:14px 0 0;min-height:1.5em;overflow-wrap:anywhere}
.status.error{color:var(--danger)}
.error-box{margin:0 16px 12px;border:1px solid #efd3d7;background:#fff7f8;border-radius:8px;padding:14px 16px;font-size:.88rem}
.error-box p{margin:0 0 6px;overflow-wrap:anywhere}
.error-box .error-title{color:var(--danger)}
.notes{margin:0 16px 12px;border:1px solid #cddcf7;background:var(--accent-soft);border-radius:8px;padding:10px 14px;font-size:.82rem;color:#31517d}
.notes p{margin:0;overflow-wrap:anywhere}
.notes p+p{margin-top:6px}

/* 미리보기 본문 */
.preview{border-top:1px solid var(--border);padding:16px 20px;min-height:460px;max-height:min(75vh,1000px);overflow:auto;background:#fff;font-size:.95rem;line-height:1.75;overflow-wrap:anywhere}
.preview:focus-visible{outline:3px solid #e9aa23;outline-offset:-3px}
.preview>:first-child{margin-top:0}
.preview>:last-child{margin-bottom:0}
.preview h1,.preview h2,.preview h3,.preview h4,.preview h5,.preview h6{line-height:1.35;margin:1.4em 0 .6em;word-break:keep-all;overflow-wrap:anywhere}
.preview h1{font-size:1.6rem;border-bottom:1px solid var(--border);padding-bottom:.3em}
.preview h2{font-size:1.35rem;border-bottom:1px solid var(--border);padding-bottom:.25em}
.preview h3{font-size:1.15rem}
.preview h4{font-size:1rem}
.preview h5{font-size:.9rem}
.preview h6{font-size:.85rem;color:var(--muted)}
.preview p{margin:0 0 1em;max-width:none}
.preview ul,.preview ol{margin:0 0 1em;padding-inline-start:1.6em}
.preview li{margin:.2em 0}
.preview li>ul,.preview li>ol{margin:.2em 0 0}
.preview blockquote{margin:0 0 1em;padding:.2em 1em;border-inline-start:4px solid #bac8db;background:var(--bg);color:#33465f}
.preview blockquote>:last-child{margin-bottom:0}
.preview hr{border:0;border-top:1px solid var(--border);margin:1.5em 0}
.preview pre{margin:0 0 1em;padding:12px 14px;background:#f3f6fb;border:1px solid var(--border);border-radius:8px;overflow:auto;direction:ltr;text-align:left;unicode-bidi:isolate}
.preview pre code{display:block;font:.86rem/1.6 ui-monospace,SFMono-Regular,Consolas,"Malgun Gothic",monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:none;border:0;padding:0}
.preview .md-inline-code{background:var(--surface);border:1px solid var(--border);padding:1px 5px;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Consolas,"Malgun Gothic",monospace;direction:ltr;unicode-bidi:isolate}
.preview a{overflow-wrap:anywhere}
.preview .md-blocked-link{text-decoration:underline dotted;text-underline-offset:3px;color:var(--muted)}
.preview .md-image-blocked{display:inline-block;max-width:100%;border:1px dashed #bac8db;border-radius:6px;padding:4px 8px;background:var(--bg);font-size:.85rem;line-height:1.6}
.preview .md-image-note{color:var(--muted)}
.preview .md-image-url{direction:ltr;unicode-bidi:isolate;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.preview .md-empty{color:var(--muted)}
.preview .md-table-wrap{margin:0 0 1em;overflow-x:auto;max-width:100%}
.preview .md-table-wrap:focus-visible{outline:3px solid #e9aa23;outline-offset:2px}
.preview table{width:auto;min-width:50%}
.preview th,.preview td{border:1px solid var(--border);padding:6px 10px;vertical-align:top;overflow-wrap:anywhere}
.preview th{background:var(--bg)}
.preview .md-align-center{text-align:center}
.preview .md-align-right{text-align:right}
.preview .md-align-left{text-align:left}

.guide{margin:32px 0 40px;padding-top:22px;border-top:1px solid var(--border);color:var(--muted);font-size:.86rem;line-height:1.8}
.guide h2{color:var(--text);font-size:1.1rem}
.guide h3{color:var(--text);margin:20px 0 6px}
.guide summary{cursor:pointer;color:var(--text);font-weight:650;padding:10px 0;min-height:44px}
.guide summary:focus-visible{outline:3px solid #e9aa23;outline-offset:2px;border-radius:4px}
.guide code{background:var(--surface);border:1px solid var(--border);padding:2px 6px;border-radius:5px;white-space:pre-wrap;overflow-wrap:anywhere}
button,input,select,summary,a{touch-action:manipulation}
@media(max-width:760px){
  .editor-layout{grid-template-columns:1fr;gap:18px}
  .editor-panel textarea{min-height:240px;padding:14px 16px}
  .preview{min-height:240px;max-height:none;padding:14px 16px}
  .panel-top{padding:12px 16px}
  .editor-footer{padding:10px 16px 0}
  .action-row{padding:12px 12px 14px}
}
@media(max-width:480px){
  .action-row .button{flex:1 1 100%;width:100%;text-align:center}
}