.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-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{margin:0;font-size:.82rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.counter strong{color:var(--text)}
.editor-panel textarea{display:block;width:100%;min-height:420px;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:1rem/1.7 "Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;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}
.save-state{margin:0;font-size:.85rem;color:var(--muted);overflow-wrap:anywhere}
.save-state time{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.action-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px 16px}
.action-row .button{font-size:.85rem;min-height:44px;cursor:pointer}
.file-button{position:relative}
.file-button:focus-within{outline:3px solid #e9aa23;outline-offset:2px}
.action-row .button:focus-visible{outline:3px solid #e9aa23;outline-offset:2px}
.status{margin:14px 0 0;min-height:1.5em;overflow-wrap:anywhere}
.error-box{margin:12px 0 0;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)}
.error-box .button{margin-top:6px;min-height:44px}
.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}
button,input,summary,a,label{touch-action:manipulation}
@media(max-width:760px){
  .editor-panel textarea{min-height:300px;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}
}
