/* 섹션 위 작은 도구 묶음(관리자·편집 중).
   2026-10-06: 섹션 오른쪽 위의 동그란 버튼 다섯 개(공통영역·가져오기·복사·복제·삭제)는 다시 항상 보이게 둔다.
   이 묶음이 생기며 숨겼더니 쓰던 사람들이 못 찾았다. 묶음은 그 버튼 바로 아래 줄에 뜬다. */

.hxs-bar{position:absolute;top:12px;right:12px;z-index:330;display:flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:var(--hx-bg,#fff);border:1px solid var(--hx-line-soft,#e5e5ea);box-shadow:var(--hx-shadow-2,0 10px 30px rgba(0,0,0,.12));color:var(--hx-tx,#1d1d1f);font:500 13px/1 var(--hx-font,system-ui,sans-serif);opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s;pointer-events:none}
/* 서브 섹션: 다시 보이게 한 동그란 버튼 줄(위 12px, 높이 28px) 바로 아래에 둔다. 메인 편집의 묶음 위치는 그대로다. */
section[id^="sp-sec-"]>.hxs-bar{top:48px}
/* 히어로 계열 섹션은 화면 맨 위에 붙어 있어, 위쪽 버튼 자리가 고정 헤더와 목차 막대 밑에 깔린다. 버튼 줄과 묶음을 섹션 오른쪽 아래로 내린다. */
body.sp-edit :is(#sp-sec-hero,section.sp-hero,section.sp-ext-crd--role-hero,section[id^="sp-sec-"]:has(>section.hero),section[id^="sp-sec-"]:has(>div>section.hero))>:is(.sab-ext-del,.sab-ext-dup,.sab-ext-copy,.sab-ext-import,.sab-ext-shared){top:auto;bottom:12px;z-index:331}
body.sp-edit :is(#sp-sec-hero,section.sp-hero,section.sp-ext-crd--role-hero,section[id^="sp-sec-"]:has(>section.hero),section[id^="sp-sec-"]:has(>div>section.hero))>.hxs-bar{top:auto;bottom:48px}
section[id^="sp-sec-"]:hover>.hxs-bar,.hxs-bar:focus-within,.hxs-bar.is-open,section.hlh-selected>.hxs-bar{opacity:1;transform:none;pointer-events:auto}
body:not(.sp-edit) :is(.hxs-bar,.hxs-add,.hxs-picker),body.hlh-textmode :is(.hxs-bar,.hxs-add,.hxs-picker),body.hlh-preview :is(.hxs-bar,.hxs-add,.hxs-picker){display:none!important}
/* 섹션 아래 + 섹션 추가 */
.hxs-add{position:absolute;left:50%;bottom:12px;z-index:331;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--hx-line-soft,#e5e5ea);background:var(--hx-bg,#fff);color:var(--hx-tx,#1d1d1f);box-shadow:var(--hx-shadow-2,0 10px 30px rgba(0,0,0,.12));font:600 12.5px/1 var(--hx-font,system-ui,sans-serif);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
section[id^="sp-sec-"]:hover>.hxs-add,.hxs-add:focus-visible,.hxs-add[aria-expanded="true"],section.hxs-adding>.hxs-add{opacity:1;pointer-events:auto}
.hxs-add:focus-visible{outline:2px solid var(--hx-accent-line,#0066cc);outline-offset:2px}
.hxs-picker{position:absolute;left:50%;bottom:52px;z-index:332;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));box-sizing:border-box;padding:12px;border-radius:14px;background:var(--hx-bg,#fff);border:1px solid var(--hx-line-soft,#e5e5ea);box-shadow:var(--hx-shadow-2,0 10px 30px rgba(0,0,0,.12));color:var(--hx-tx,#1d1d1f);font-family:var(--hx-font,system-ui,sans-serif)}
.hxs-picker[hidden]{display:none}
.hxs-picker-t{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--hx-tx-2,#636366)}
.hxs-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (max-width:600px){.hxs-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hxs-picker button{min-height:38px;padding:0 10px;border:1px solid var(--hx-line,#d2d2d7);border-radius:9px;background:var(--hx-bg,#fff);color:var(--hx-tx,#1d1d1f);font:500 13px/1.2 var(--hx-font,system-ui,sans-serif);text-align:left;cursor:pointer}
.hxs-picker button:hover{border-color:var(--hx-accent-line,#0066cc);background:var(--hx-accent-soft,rgba(0,102,204,.1))}
.hxs-picker button:focus-visible{outline:2px solid var(--hx-accent-line,#0066cc);outline-offset:1px}
.hxs-picker-paste{width:100%;margin-top:8px;text-align:center!important}
.hxs-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.hxs-b:hover{background:var(--hx-surface,#f5f5f7)}
.hxs-b:focus-visible,.hxs-menu button:focus-visible{outline:2px solid var(--hx-accent-line,#0066cc);outline-offset:1px}
.hxs-b--danger{color:var(--hx-danger,#d70015)}
.hxs-b--text{padding:0 10px;font-weight:600;background:var(--hx-accent-soft,rgba(0,102,204,.1));color:var(--hx-link,#0058b0)}
.hxs-b--text:hover{background:var(--hx-accent-soft,rgba(0,102,204,.1));filter:brightness(.97)}
.hxs-sep{width:1px;height:18px;margin:0 3px;background:var(--hx-line,#d2d2d7)}
.hxs-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-right:2px;border-radius:999px;background:var(--hx-surface-2,#ececf0);color:var(--hx-tx-2,#6e6e73);font-size:11.5px;font-weight:600}
.hxs-badge[hidden]{display:none}
.hxs-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:236px;display:flex;flex-direction:column;padding:6px;border-radius:12px;background:var(--hx-bg,#fff);border:1px solid var(--hx-line-soft,#e5e5ea);box-shadow:var(--hx-shadow-2,0 10px 30px rgba(0,0,0,.12))}
.hxs-menu[hidden]{display:none}
.hxs-menu button{display:flex;align-items:center;min-height:36px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--hx-tx,#1d1d1f);font:500 13px/1.3 var(--hx-font,system-ui,sans-serif);text-align:left;cursor:pointer}
.hxs-menu button[hidden]{display:none}
.hxs-menu button:hover{background:var(--hx-surface,#f5f5f7)}
.hxs-toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:100060;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 12px 10px 16px;border-radius:12px;background:#1d1d1f;color:#fff;font:500 13px/1.4 var(--hx-font,system-ui,sans-serif);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hxs-toast[hidden]{display:none}
.hxs-toast button{min-height:30px;padding:0 10px;border:0;border-radius:7px;background:rgba(255,255,255,.16);color:#fff;font:600 12.5px/1 inherit;cursor:pointer}
@media (prefers-reduced-motion:reduce){.hxs-bar{transition:none}}
/* 섹션 끌어서 옮기기(section_drag.js). 손잡이는 섹션 도구 묶음 맨 앞 */
.hxs-b--grip{cursor:grab;touch-action:none;color:var(--hx-tx-3,#86868b)}
.hxs-b--grip:hover{color:var(--hx-tx,#1d1d1f)}
html.hxd-dragging,html.hxd-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
html.hxd-dragging :is(.hxs-bar,.hxs-add,.hxs-picker,.mxs-bar,.mxs-add){opacity:0!important;pointer-events:none!important}
.hxd-src{opacity:.42;filter:saturate(.6);transition:opacity .2s var(--hx-ease-out,ease),filter .2s}
.hxd-ghost{position:fixed;left:0;top:0;z-index:100070;display:flex;align-items:center;gap:8px;max-width:260px;height:44px;padding:0 16px 0 12px;border-radius:12px;background:var(--hx-bg,#fff);border:1px solid var(--hx-line-soft,#e5e5ea);box-shadow:0 18px 40px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);color:var(--hx-tx,#1d1d1f);font:600 13px/1.2 var(--hx-font,system-ui,sans-serif);pointer-events:none;will-change:transform;animation:hx-pop .18s var(--hx-ease-out,ease) both;rotate:-1.5deg}
.hxd-ghost span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hxd-ghost .hx-i{color:var(--hx-accent,#0066cc)}
.hxd-line{position:fixed;left:0;top:0;z-index:100069;height:4px;border-radius:4px;background:var(--hx-accent,#0066cc);box-shadow:0 0 0 3px rgba(0,102,204,.18);pointer-events:none;will-change:transform;transition:transform .12s var(--hx-ease-out,ease),width .12s var(--hx-ease-out,ease)}
.hxd-line::before,.hxd-line::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--hx-accent,#0066cc)}
.hxd-line::before{left:-5px}.hxd-line::after{right:-5px}
.hxd-line[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.hxd-ghost{animation:none;rotate:none}.hxd-line{transition:none}}
#sp-sec-hero>.hxs-bar [data-hxs="grip"]{display:none}
/* 휴대폰: 도구 묶음이 화면 왼쪽 밖으로 나가지 않게 왼쪽 기준 한 줄, 넘치면 옆으로 밀어 보기 */
@media (max-width:600px){section[id^="sp-sec-"]>.hxs-bar{left:8px;right:auto;top:8px;max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none}section[id^="sp-sec-"]>.hxs-bar::-webkit-scrollbar{display:none}.hxs-bar .hxs-sep{display:none}.hxs-bar .hxs-b{flex:0 0 auto;min-width:32px;height:32px}.hxs-bar .hxs-menu{position:fixed;left:8px;right:8px;top:auto;bottom:96px;min-width:0}}