/* 글 편집기 — 커뮤니티 글쓰기·수정 대화상자. 마크업은 community-ui.js renderWriteForm, 동작은 community-editor.js. 상점·메인과 같은 공통 UI 색상 토큰을 사용한다. */
#modal:has(.post-editor){max-width:780px;width:calc(100% - 32px);padding:0;border-radius:14px;background:#fff;overflow:auto;max-height:92vh;max-height:92dvh}
#modal:has(.post-editor) .dialog-head{margin:0;padding:18px 28px 16px;border-bottom:1px solid var(--ui-line);position:sticky;top:0;background:#fff;z-index:2}
#modal:has(.post-editor) .dialog-head h2{font-size:18px;font-weight:700;letter-spacing:-.03em}
.post-editor{gap:18px;padding:22px 28px 0}
.post-editor .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.editor-notice{font-size:12px;line-height:1.7;color:#5a4a1e;background:#fbf4e2;border:1px solid #ebd9a8;border-radius:8px;padding:10px 14px;margin:0}
.editor-notice .text-button{display:inline;margin:0 0 0 6px;padding:0;min-height:0;font-size:12px;color:#5a4a1e;text-decoration:underline;text-underline-offset:3px}

/* 분류와 닉네임 */
.editor-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;min-width:0;max-width:100%}
.editor-categories{min-width:0;flex:1 1 auto}
.editor-chip-row{display:flex;flex-wrap:wrap;gap:6px;min-width:0;max-width:100%}
.editor-label{display:block;font-size:12px;font-weight:500;color:var(--ui-ink-3);margin-bottom:8px}
.editor-chip{position:relative;display:inline-flex}
.post-editor .editor-chip input{position:absolute;inset:0;width:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.editor-chip span{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:100px;border:1px solid var(--ui-line);background:#fff;font-size:12px;font-weight:500;color:var(--ui-ink-3);transition:background .15s,border-color .15s,color .15s}
.editor-chip:hover span{background:var(--ui-surface);border-color:var(--ui-line-strong)}
.editor-chip:has(input:checked) span{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff}
.editor-chip:has(input:focus-visible) span{outline:2px solid var(--ui-focus);outline-offset:2px}
.editor-nickname{flex:0 1 220px;min-width:160px;gap:6px}
.editor-nickname span{font-size:12px;font-weight:500;color:var(--ui-ink-3)}
.post-editor .editor-nickname input{min-height:38px;padding:8px 12px;font-size:13px;border-color:var(--ui-line)}

/* 제목 — 밑줄 한 줄짜리 큰 입력 */
.editor-title{position:relative;display:block;gap:0}
.post-editor .editor-title input{border:0;border-bottom:1px solid var(--ui-line);border-radius:0;padding:10px 84px 10px 0;min-height:52px;font-size:22px;font-weight:650;letter-spacing:-.03em;line-height:1.35;color:var(--ui-ink);background:transparent}
.post-editor .editor-title input::placeholder{color:var(--ui-ink-3);font-weight:550}
.post-editor .editor-title input:hover{border-color:var(--ui-line-strong)}
.post-editor .editor-title input:focus-visible{outline:0;box-shadow:none;border-color:var(--ui-accent)}
.editor-title .editor-count{position:absolute;right:0;bottom:16px}
.editor-count{font-size:11px;color:var(--ui-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.editor-count.is-near{color:#b0522f}
.editor-count:empty{display:none}

/* 본문 — 도구 줄 · 쓰기/미리보기 · 글자 수 */
.editor-body{border:1px solid var(--ui-line);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.editor-body:focus-within{border-color:var(--ui-line-strong);box-shadow:0 0 0 3px rgba(36,52,64,.08)}
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;background:var(--paper);border-bottom:1px solid var(--ui-line)}
.editor-tabs{display:inline-flex;padding:2px;border-radius:8px;background:var(--ui-surface-2)}
.editor-tabs button{min-height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:500;color:var(--ui-ink-3)}
.editor-tabs button[aria-pressed="true"]{background:#fff;color:var(--ui-ink);font-weight:600;box-shadow:0 1px 2px rgba(20,32,42,.08)}
.editor-tools{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.editor-tools button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:6px;font-size:12px;color:var(--ui-ink-3)}
.editor-tools button:hover{background:var(--ui-accent-soft);color:var(--ui-ink)}
.editor-tools button>[aria-hidden]{font-weight:700;font-size:12px;color:var(--ui-ink-3);font-family:Inter,Pretendard,sans-serif}
.editor-tools [data-photo-count],.photo-details-meta{font-size:10px;font-weight:600;background:var(--ui-accent);color:#fff;border-radius:100px;padding:1px 7px;line-height:1.6}
.post-editor .editor-textarea{display:block;gap:0}
.post-editor .editor-textarea textarea[hidden]{display:none}
.post-editor .editor-surface{min-height:260px;padding:16px 18px;margin:0;font-size:14px;line-height:1.8;color:var(--ui-accent);overflow-wrap:anywhere;white-space:pre-wrap;outline:0}
.editor-surface p{min-height:1.8em;margin:8px 0 14px}
.editor-surface h2{font-size:20px;line-height:1.5;margin:18px 0 10px}
.editor-surface ul{padding-left:24px;margin:10px 0}
.editor-surface a{color:var(--ui-accent);text-decoration:underline;text-underline-offset:3px}
.editor-surface .editor-photo,.editor-surface .editor-embed{margin:16px 0;white-space:normal}
.editor-surface{position:relative;word-wrap:break-word;font-variant-ligatures:none}
.editor-surface .ProseMirror-selectednode{outline:2px solid var(--ui-focus);outline-offset:3px}
.editor-surface .ProseMirror-hideselection *::selection{background:transparent}
.editor-surface .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute;margin:0}
.editor-surface .ProseMirror-gapcursor:after{content:'';display:block;position:absolute;top:-2px;width:20px;border-top:1px solid var(--ui-accent)}
.editor-surface.ProseMirror-focused .ProseMirror-gapcursor{display:block}
.editor-surface li>p{margin:0}
.editor-media-tools{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:6px}
.editor-media-tools button{font-size:11px;min-height:32px;padding:4px 8px;border-radius:5px;color:var(--ui-ink-3);background:var(--paper)}
.editor-media-tools button:hover{background:var(--line)}
.editor-tools button[aria-pressed="true"]{background:var(--line);font-weight:700}
.editor-tools button:disabled{opacity:.35;cursor:default}
.editor-photo img{display:block;max-width:100%;max-height:65vh;width:auto;height:auto;object-fit:contain;margin:auto;border-radius:8px}
.editor-photo figcaption{font-size:12px;text-align:center;color:var(--ui-ink-3);margin-top:8px}
.editor-photo:focus{outline:2px solid var(--ui-focus);outline-offset:4px}
.editor-photo-pending{display:grid;place-items:center;min-height:160px;border-radius:8px;background:var(--paper);color:var(--ui-ink-3)}
.editor-surface[aria-disabled="true"]{opacity:.7}
.post-editor.is-previewing .editor-textarea{display:none}
.post-editor .community-preview{padding:18px 18px 22px;min-height:240px;background:#fff}
.post-editor .community-preview[hidden]{display:none}
.post-editor .community-preview h3{font-size:20px;font-weight:650;letter-spacing:-.03em;line-height:1.45;color:var(--ui-ink);margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--ui-line);overflow-wrap:anywhere}
.post-editor .community-preview .community-prose{font-size:14px;line-height:1.8;margin:0}
.post-editor .community-preview .community-prose h2{font-size:16px;margin:20px 0 6px}
.post-editor .community-preview .community-prose p{margin:8px 0 14px}
.post-editor .community-preview .post-embed{max-width:440px;margin:8px 0 14px}
.editor-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-top:1px solid var(--ui-line);background:var(--ui-surface)}
.editor-hint{font-size:11px;color:var(--ui-ink-3);line-height:1.6}
.post-editor .photo-insert{width:100%;min-height:36px;margin-top:8px;border:1px solid var(--line);border-radius:6px;color:var(--ui-accent);font-size:11px}
.post-editor .photo-insert:disabled{opacity:.4}

/* 사진 첨부 — 접히는 카드. 끌어다 놓기 영역은 community-photos.js가 .post-photo-editor에 붙인다. */
.post-editor .photo-details{border:1px solid var(--ui-line);border-radius:10px;background:#fff}
.post-editor .photo-details>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:12px 16px;min-height:44px;font-size:12px;color:var(--ui-ink-3)}
.post-editor .photo-details>summary::-webkit-details-marker{display:none}
.post-editor .photo-details>summary::before{content:'';flex-shrink:0;width:7px;height:7px;border-right:1.5px solid var(--ui-ink-3);border-bottom:1.5px solid var(--ui-ink-3);transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s}
.post-editor .photo-details[open]>summary::before{transform:rotate(45deg);margin-top:-3px}
.photo-details-title{font-weight:600;color:var(--ui-ink)}
.photo-details-hint{margin-left:auto;color:var(--ui-ink-3);font-size:11px}
.post-editor .post-photo-editor{border:0;border-top:1px solid var(--ui-line);border-radius:0 0 10px 10px;padding:14px 16px 16px;background:#fff;margin:0}
.post-editor .post-photo-editor legend{display:none}
.photo-drop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px dashed var(--ui-line);border-radius:8px;padding:12px 14px;background:var(--paper);transition:background .15s,border-color .15s}
.post-editor .post-photo-editor.is-dragover{background:#fff}
.post-editor .post-photo-editor.is-dragover .photo-drop{background:var(--ui-accent-soft);border-color:var(--ui-focus)}
.post-editor .photo-picker{min-height:36px;padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;background:var(--ui-accent);color:#fff}
.post-editor .photo-picker:hover{background:var(--ui-accent-hover)}
.post-editor .photo-upload-status{margin:0;flex:1;min-width:160px;font-size:11px}
.post-editor .photo-draft-grid{margin-top:12px}
.post-editor .post-photo-editor>small{font-size:11px;margin-top:10px}

/* 마무리 줄 — 아래에 고정 */
.post-editor .writer-end{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;bottom:0;margin:4px -28px 0;padding:14px 28px 18px;background:#fff;border-top:1px solid var(--ui-line);z-index:2}
.editor-status p{font-size:11px;color:var(--ui-ink-3);line-height:1.7;margin:0}
.editor-status p:first-child{color:var(--ui-ink-3)}
.post-editor .writer-end .actions{margin:0;display:flex;align-items:center;gap:8px}
.post-editor .writer-end .text-button{min-height:38px;padding:8px 14px;font-size:13px;color:var(--ui-ink-3);margin:0}
.post-editor .writer-end .button.dark{min-height:40px;padding:8px 22px;border-radius:8px;font-size:13px;font-weight:650;background:var(--ui-accent);border-color:var(--ui-accent);gap:0;margin:0}
.post-editor .writer-end .button.dark:hover{background:var(--ui-accent-hover)}
.post-editor .error{margin:0;font-size:12px}

@media(max-width:760px){
 #modal:has(.post-editor){width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}
 #modal:has(.post-editor) .dialog-head{padding:14px 16px 12px}
 .post-editor{padding:16px 16px 0;gap:14px}
 .editor-meta{flex-direction:column;align-items:stretch;gap:12px}
 .editor-categories{flex:none;width:100%}
 .editor-chip-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
 .editor-chip-row::-webkit-scrollbar{display:none}
 .editor-chip span{white-space:nowrap}
 .editor-nickname{flex:none;min-width:0}
 .post-editor .editor-title input{font-size:19px;min-height:48px;padding-right:72px}
 .editor-toolbar{padding:6px 8px}
 .editor-tools button{padding:0 8px}
 .post-editor .editor-surface{min-height:220px;padding:14px}
 .post-editor .community-preview{padding:14px 14px 18px;min-height:200px}
 .editor-foot{padding:6px 12px}
 .photo-details-hint{display:none}
 .post-editor .writer-end{margin:4px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px}
 .editor-status{flex:1 1 100%}
 .post-editor .writer-end .actions{margin-left:auto}
 .post-editor .writer-end .button.dark{padding:8px 18px}
}
@media(max-width:500px){.editor-foot{flex-wrap:wrap;gap:4px}.editor-foot>.editor-hint{flex-basis:100%}.editor-foot>.editor-count{margin-left:auto}.editor-tools button>[aria-hidden]{display:none}.editor-tools button{padding:0 7px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.editor-chip span,.editor-body,.photo-drop,.post-editor .photo-details>summary::before{transition:none}}
@media(forced-colors:active){.editor-chip:has(input:checked) span{outline:2px solid Highlight}.editor-tabs button[aria-pressed="true"]{outline:1px solid ButtonText}}