/* 편집기 공용 부품 모양(2026-10-20 공용 부품 1a, 설계 EDITOR_SHARED_PARTS_PLAN). 대화창·확인 창(HiveAsk)·도움말·알림 띠.
   popup_create.css 의 같은 규칙을 그대로 옮겨 왔다(디자인 판은 두 파일을 다 싣고 내용이 같다. 캔버스는 이 파일만 싣는다) */
.puc-dlg{--puc-fg:#1d1d1f;--puc-sub:#6e6e73;--puc-line:#e3e3e8;--puc-soft:#f5f5f7;--puc-acc:var(--hx-accent,#0066cc);width:min(1000px,calc(100vw - 24px));max-width:none;max-height:min(92dvh,920px);padding:0;border:0;border-radius:20px;background:#fff;color:var(--puc-fg);box-shadow:0 30px 90px rgba(0,0,0,.28);font:15px/1.55 'Pretendard',system-ui,-apple-system,sans-serif;word-break:keep-all;overflow:hidden}
.puc-dlg[open]{display:flex;flex-direction:column}
/* 화면 낭독기 전용 글(도움말 표 제목 등). 팝업 CSS 에만 있던 규칙이라 캔버스 화면에서는 보였다(재점검 9 R9-12). 부품 대화창 안에만 건다 */
.puc-dlg .pu-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.puc-dlg::backdrop{background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.puc-dlg *{box-sizing:border-box}
.puc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--puc-line)}
.puc-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.puc-x{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--puc-soft);color:inherit;cursor:pointer}
.puc-x:hover{background:#e8e8ed}
.puc-body{flex:1;min-height:0;overflow:auto;padding:20px 22px;overscroll-behavior:contain}
.puc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 22px;border-top:1px solid var(--puc-line);background:#fbfbfd}
.puc-say{flex:1 1 240px;margin:0;font-size:13.5px;color:var(--puc-sub);min-height:1.5em}
.puc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.puc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--puc-line);border-radius:12px;background:#fff;color:inherit;font:600 14.5px/1.2 inherit;cursor:pointer}
.puc-btn:hover{background:var(--puc-soft)}
.puc-btn-main{background:var(--puc-acc);border-color:var(--puc-acc);color:#fff}
.puc-btn-main:hover{background:color-mix(in srgb,var(--puc-acc) 88%,#000)}
.puc-btn-ghost{background:transparent}
.puc-btn:disabled{opacity:.5;cursor:default}
.puc-dlg button:focus-visible,.puc-dlg input:focus-visible,.puc-dlg select:focus-visible,.puc-dlg textarea:focus-visible,.puc-dlg [tabindex]:focus-visible{outline:2px solid var(--puc-acc);outline-offset:2px}
.puc-dlg input[type=text],.puc-dlg input[type=date],.puc-dlg select,.puc-dlg textarea{width:100%;min-height:44px;padding:9px 12px;border:1px solid #d2d2d7;border-radius:10px;background:#fff;color:inherit;font:inherit}
.puc-dlg textarea{min-height:64px;resize:vertical}
.pde-note{margin:8px 0 0;font-size:11.5px;color:var(--puc-sub);line-height:1.5}
.pde-note.is-warn{color:#b42318}
.puc-dlg.pde-help{width:min(560px,calc(100vw - 16px))}
.pde-keys{width:100%;border-collapse:collapse;font-size:13px}
.pde-keys th,.pde-keys td{padding:6px 8px;border-bottom:1px solid var(--puc-line);text-align:left;vertical-align:top}
.pde-keys thead th{font-size:12px;color:var(--puc-sub)}
.pde-keys kbd{display:inline-block;padding:1px 6px;border-radius:5px;background:#eef0f4;font:600 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:keep-all}
.pde-draft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#fff7e6;color:#5c3b00;border:1px solid #f3d7a2;font-size:13px;line-height:1.45;word-break:keep-all}
.pde-draft span{flex:1 1 260px}
.pde-draft.is-warn{background:#fff6f5;color:#7a1a12;border-color:#f3c3be}
.pde-draft .puc-btn{min-height:32px;padding:0 12px;font-size:13px}
.puc-dlg.pde-ask{width:min(420px,calc(100vw - 32px))}
.pde-ask-msg{margin:0;font-size:15px;line-height:1.6;word-break:keep-all}
.puc-btn-danger{background:#c62828;border-color:#c62828;color:#fff}
.puc-btn-danger:hover{background:#a51f1f;border-color:#a51f1f}
@media (max-width:560px){.puc-dlg{width:100vw;max-height:100dvh;border-radius:0}.puc-head,.puc-body,.puc-foot{padding-left:16px;padding-right:16px}.puc-acts{width:100%}.puc-acts .puc-btn{flex:1 1 auto}}
@supports not (background:color-mix(in srgb,red 50%,white)){.puc-btn-main:hover{filter:brightness(.92)}}
/* 단축키 방식 고르기(도움말 안)·처음 열 때 알림 띠 */
.hek-km{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font-size:13.5px}
.hek-km select{width:auto;min-height:36px;padding:4px 10px}
.hek-km small{flex:1 1 100%;color:var(--puc-sub);font-size:12px}
.pde-keys .is-other{color:var(--puc-sub);font-weight:400}
.pde-keys h3{margin:14px 0 4px;font-size:13px}