/* 공통형 화면 직접 조작(layout_handles.js): 편집 화면 전용 */
.hlh-selected{outline:2px solid var(--hx-accent-line,#0066cc);outline-offset:-2px}
.hlh-layer{position:absolute;inset:0;z-index:60;pointer-events:none}
.hlh-h{position:absolute;pointer-events:auto;touch-action:none;outline:none}
.hlh-h::before{content:'';position:absolute;background:var(--hx-accent-line,#0066cc);opacity:.55;transition:opacity .15s}
.hlh-h:hover::before,.hlh-h:focus-visible::before,.hlh-dragging .hlh-h::before{opacity:1}
.hlh-h:focus-visible{box-shadow:0 0 0 3px rgba(0,102,204,.35)}
/* 위·아래 여백: 가로 띠 */
.hlh-h--pad-top,.hlh-h--pad-bottom{left:0;right:0;height:12px;cursor:ns-resize}
.hlh-h--pad-top::before,.hlh-h--pad-bottom::before{left:0;right:0;top:5px;height:2px;background:repeating-linear-gradient(90deg,var(--hx-accent-line,#0066cc) 0 8px,transparent 8px 14px)}
/* 분할선·카드 열 경계: 세로 막대 */
.hlh-h--split,.hlh-h--col{width:14px;cursor:ew-resize}
.hlh-h--split::before,.hlh-h--col::before{top:0;bottom:0;left:6px;width:2px}
.hlh-h--split::after,.hlh-h--col::after{content:'';position:absolute;left:2px;top:50%;width:10px;height:36px;margin-top:-18px;border-radius:5px;background:#fff;border:2px solid var(--hx-accent-line,#0066cc);box-sizing:border-box}
.hlh-tip{position:absolute;left:50%;top:-26px;transform:translateX(-50%);white-space:nowrap;padding:3px 8px;border-radius:6px;background:var(--hx-tx,#1d1d1f);color:#fff;font:600 12px/1.4 var(--hx-font,system-ui,sans-serif);opacity:0;pointer-events:none;transition:opacity .15s}
.hlh-h--pad-top .hlh-tip,.hlh-h--pad-bottom .hlh-tip{left:12px;transform:none;top:-24px}
.hlh-h:hover .hlh-tip,.hlh-h:focus-visible .hlh-tip,.hlh-dragging .hlh-tip{opacity:1}
.hlh-dragging,.hlh-dragging *{user-select:none!important;cursor:inherit}
.hlh-upload-proxy{display:none!important}

/* 오른쪽 레이아웃 막대 */
.hlh-panel{position:fixed;right:16px;top:96px;z-index:100050;width:288px;max-height:calc(100vh - 200px);overflow:auto;background:#1c1c1f;color:#f2f2f4;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:14px 14px 12px;font:14px/1.45 var(--hx-font,system-ui,sans-serif)}
.hlh-panel[hidden]{display:none}
.hlh-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.hlh-title{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hlh-dev{margin:0 0 6px;font-size:12px;color:#a7a7b0}
.hlh-check{display:flex;align-items:center;gap:6px;font-size:12px;color:#cfcfd6;margin-bottom:10px}
.hlh-row{padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.hlh-row-t{font-size:12px;font-weight:700;color:#9ec1ff;margin-bottom:8px}
.hlh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.hlh-chips--mo{align-items:center}
.hlh-mini{font-size:12px;color:#a7a7b0;margin-right:2px}
.hlh-btn{min-height:32px;padding:5px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#2a2a2f;color:#f2f2f4;font:600 12px/1.2 inherit;cursor:pointer}
.hlh-btn:hover{border-color:var(--hx-accent-line,#0066cc)}
.hlh-btn[aria-pressed="true"]{background:var(--hx-accent-line,#0066cc);border-color:var(--hx-accent-line,#0066cc);color:#fff}
.hlh-btn:focus-visible{outline:2px solid #9ec1ff;outline-offset:2px}
.hlh-btn--ghost{background:transparent}
.hlh-head .hlh-btn{min-width:32px;padding:4px 8px;font-size:16px}
.hlh-slider{display:grid;grid-template-columns:38px 1fr 64px;align-items:center;gap:8px;margin:6px 0;font-size:12px;color:#cfcfd6}
.hlh-slider input{width:100%;accent-color:var(--hx-accent-line,#0066cc)}
.hlh-slider input:disabled{opacity:.35}
.hlh-out{text-align:right;font-variant-numeric:tabular-nums;color:#fff}
.hlh-foot{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.hlh-note{font-size:11px;color:#8e8e98}
@media(max-width:700px){.hlh-panel{left:8px;right:8px;top:auto;bottom:84px;width:auto;max-height:46vh}}
.hlh-head-btns{display:flex;gap:6px;flex:none}
.hlh-head .hlh-btn--txt{font-size:12px;min-width:0;padding:4px 10px}
.hlh-chips[hidden]{display:none}
.hlh-pill{position:fixed;left:16px;bottom:88px;z-index:100040;min-height:36px;padding:8px 14px;border-radius:999px;border:1px solid #c7d2fe;background:#fff;color:var(--hx-accent-hover,#0058b0);font:600 13px/1.2 var(--hx-font,system-ui,sans-serif);box-shadow:0 6px 20px rgba(15,23,42,.15);cursor:pointer}
.hlh-pill[hidden]{display:none}
.hlh-pill:focus-visible{outline:2px solid var(--hx-accent-line,#0066cc);outline-offset:2px}

/* 디자인 묶음: 접었다 펴는 그룹 */
.hlh-row--design{padding-bottom:4px}
.hlh-group{border-top:1px solid rgba(127,127,127,.18);padding:2px 0}
.hlh-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:36px;font-size:13px;font-weight:700}
.hlh-group>summary::-webkit-details-marker{display:none}
.hlh-group>summary::after{content:'+';font-size:16px;font-weight:400;opacity:.6}
.hlh-group[open]>summary::after{content:'−'}
.hlh-group>summary:focus-visible{outline:2px solid var(--hx-accent-line,#0066cc);outline-offset:2px;border-radius:6px}
.hlh-group[open]{padding-bottom:10px}
.hlh-field{margin:6px 0 8px}
.hlh-field>.hlh-mini{display:block;margin:0 0 5px}
/* 숫자 모양 미리보기 칩 */
.hlh-numchip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:74px;min-height:62px;padding:6px 4px}
.hlh-numlbl{font-size:11px;font-weight:500;line-height:1.2;word-break:keep-all}
.hlh-num{display:inline-flex;align-items:center;justify-content:center;font:300 18px/1 Georgia,'Times New Roman',serif;letter-spacing:.02em;min-height:24px}
.hlh-num--medium{font-size:15px}
.hlh-num--small_center{font:600 11px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-num--mini_circle{width:20px;height:20px;min-height:0;border-radius:50%;background:currentColor;font:600 9px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-num--mini_circle{color:inherit}
.hlh-num--mini_circle{background:transparent;color:var(--hx-accent,#0066cc);border:1px solid currentColor}
.hlh-num--soft_badge{padding:3px 9px;border-radius:999px;background:var(--hx-accent,#0066cc);color:#fff;font:600 11px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-num--side_line{font:600 11px/1 var(--hx-font,system-ui,sans-serif);gap:4px}
.hlh-num--side_line::before,.hlh-num--side_line::after{content:'';width:10px;height:1px;background:currentColor}
.hlh-num--bracket{font:600 12px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-num--bracket::before{content:'['}.hlh-num--bracket::after{content:']'}
.hlh-num--circle{width:24px;height:24px;min-height:0;border:1px solid currentColor;border-radius:50%;font:600 10px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-num--square{width:24px;height:24px;min-height:0;border:1px solid #1d1d1f;border-radius:5px;background:#1d1d1f;color:#fff;font:600 10px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-num--outline{padding:3px 8px;border:1px solid currentColor;border-radius:999px;font:600 10px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-num--underline{font:600 12px/1 var(--hx-font,system-ui,sans-serif);padding-bottom:3px;border-bottom:2px solid currentColor;min-height:0}
.hlh-num--background{font-size:26px;opacity:.25}
.hlh-num--step{font:700 9px/1 var(--hx-font,system-ui,sans-serif);letter-spacing:.08em}
/* 색 고르기 */
.hlh-swatches{align-items:center}
.hlh-swatch{width:28px;min-width:28px;height:28px;min-height:28px;padding:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.hlh-swatch[aria-pressed="true"]{outline:2px solid var(--hx-accent,#0066cc);outline-offset:2px}
.hlh-sw-none{min-height:28px;padding:3px 9px}
.hlh-pick{width:32px;height:30px;padding:0;border:1px solid rgba(127,127,127,.35);border-radius:8px;background:none;cursor:pointer}

/* 화면 위 직접 조작: 핀(누르면 그 자리에서 작은 창) + 끌기 손잡이 */
.hlh-pin{position:absolute;z-index:3;pointer-events:auto;display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border:1px solid var(--hx-accent,#0066cc);border-radius:999px;background:#fff;color:var(--hx-accent-hover,#0058b0);font:700 11px/1.2 var(--hx-font,system-ui,sans-serif);box-shadow:0 4px 12px rgba(15,23,42,.18);cursor:pointer;white-space:nowrap}
.hlh-pin:hover,.hlh-pin[aria-expanded="true"]{background:var(--hx-accent,#0066cc);color:#fff}
.hlh-pin:focus-visible{outline:3px solid rgba(0,102,204,.45);outline-offset:2px}
.hlh-h--radius,.hlh-h--tsize,.hlh-h--cgap,.hlh-h--ratio{z-index:2}
.hlh-h--radius{width:18px;height:18px;cursor:nwse-resize}
.hlh-h--radius::before{inset:0;border-radius:50% 4px 4px 4px;background:#fff;border:2px solid var(--hx-accent,#0066cc);opacity:1;box-sizing:border-box}
.hlh-h--tsize{width:24px;height:22px;cursor:ew-resize}
.hlh-h--tsize::before{inset:0;border-radius:6px;background:var(--hx-accent,#0066cc);opacity:1}
.hlh-h--tsize::after{content:'Aa';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:700 10px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-h--cgap{width:22px;height:22px;cursor:ew-resize}
.hlh-h--cgap::before{inset:3px;transform:rotate(45deg);border-radius:3px;background:#fff;border:2px solid var(--hx-accent,#0066cc);opacity:1;box-sizing:border-box}
.hlh-h--ratio{width:40px;height:14px;cursor:ns-resize}
.hlh-h--ratio::before{left:0;right:0;top:4px;height:6px;border-radius:999px;background:var(--hx-accent,#0066cc);opacity:1;box-shadow:0 0 0 2px #fff}
.hlh-h--radius .hlh-tip,.hlh-h--tsize .hlh-tip,.hlh-h--cgap .hlh-tip,.hlh-h--ratio .hlh-tip{top:-28px}
body.sp-edit .hlh-selected .sp-ext-crd-num{cursor:pointer}
body.sp-edit .hlh-selected .sp-ext-crd-num:hover{outline:2px dashed var(--hx-accent,#0066cc);outline-offset:4px;border-radius:4px}
/* 작은 창 */
.hlh-pop{position:fixed;z-index:100060;width:300px;max-height:min(70vh,560px);overflow:auto;padding:12px 14px;border:1px solid rgba(127,127,127,.25);border-radius:14px;background:#fff;color:#1d2027;box-shadow:0 18px 48px rgba(15,23,42,.22);font:13px/1.45 var(--hx-font,system-ui,sans-serif)}
.hlh-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.hlh-pop-head strong{font-size:14px}
.hlh-pop .hlh-numchip{width:78px}
@media(max-width:700px){.hlh-pop{left:8px!important;right:8px;width:auto;top:auto!important;bottom:84px}}

/* 편집 방식 전환(글자 편집 / 디자인 편집) */
.hlh-modebar{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:100045;display:flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid rgba(127,127,127,.25);box-shadow:0 8px 24px rgba(15,23,42,.16)}
.hlh-modebar[hidden]{display:none}
.hlh-modebar .hlh-btn{min-height:34px;padding:6px 16px;border-radius:999px;font-size:13px}
/* 글자 편집: 편집 전용 버튼·도구·빈 칸 안내를 숨겨 방문자 화면 그대로 둔다(저장 데이터에는 영향 없음) */
/* 섹션 버튼 다섯 개(공통영역·가져오기·복사·복제·삭제)는 글자 편집 중에도 보인다. 미리보기에서만 숨긴다(2026-10-06). */
body.hlh-preview #sp-sections :is(.sab-ext-copy,.sab-ext-del,.sab-ext-dup,.sab-ext-import,.sab-ext-shared){display:none!important}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections :is(.sp-ext-crd-card-config,.sp-ext-crd-item-del,.sp-ext-crd-item-move,.sp-imgf-del,.sp-sty-chip,.sp-crd-part-tools,.sp-diagram-layout-tools,.sp-ext-crd-bg-editbar,.sp-ext-crd-thumb-ph,.sp-hero-bg-tools,.sp-hero-quick,.sp-online-url-row,.sp-precision-actions,.sp-precision-open,.hwb-launch,.sp-crd-global-tools,.sp-crd-tools-accordion,.sp-crd-bottom-tools,.sp-crd-item-flip,.sp-ext-edit-btn,.sp-ext-crd-html-btn,.sp-bg-media-note,.sp-flip-btn,.sp-ext-edit-btn,.ab-add-btn){display:none!important}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) .sp-anc-edit-spacer{display:none!important}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections [data-ph]:empty::before{content:none!important}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections [data-ext-field]:empty:not(:focus),:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections [data-f]:empty:not(:focus){display:none!important}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections :is(.sp-ext-crd-custom-html,.sp-ext-crd-after-html):empty{display:none!important}
/* 추가 버튼(카드·세부 항목·도식 항목)은 편집 방식·섹션 선택과 상관없이 편집 화면에 늘 보인다. 미리보기에서만 숨긴다 */
body.hlh-preview #sp-sections :is(.sp-ext-additem,.sp-ext-crd-point-add,.sp-ext-crd-diagram-add-row){display:none!important}
/* 아직 항목이 없는 도식 칸: 미리보기에서만 숨긴다. 편집 화면에서는 늘 보여 '도식 항목 추가'를 화면에서 바로 누른다 */
body.hlh-preview #sp-sections .sp-ext-crd-diagram:not(:has(li:not(.sp-ext-crd-diagram-add-row))){display:none!important}
/* 사진 없는 카드의 빈 사진 자리(방문자 화면에는 없음). 사진 넣기는 디자인 편집에서 */
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections .sp-ext-crd-item .sp-ext-crd-thumb:not(:has(img,video,picture)){display:none!important}
/* 슬라이드 섹션: 편집 중에도 방문자처럼 한 줄로(가로 스크롤) */
@media(min-width:901px){
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections .sp-ext-crd--pcslide .sp-ext-crd-grid{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:var(--sty-card-gap,24px);scroll-snap-type:x mandatory}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections .sp-ext-crd--pcslide .sp-ext-crd-grid>.sp-ext-crd-item{flex:0 0 calc((100% - (var(--sp-cols,3) - 1) * var(--sty-card-gap,24px)) / var(--sp-cols,3));scroll-snap-align:start}
}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections .sp-ext-crd-bottom-cta:not([data-crd-admin-href]){display:none!important}
/* 글자 편집에서도 고칠 수 있는 곳은 마우스를 올리면 보인다 */
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections [contenteditable="true"]:hover{outline:1px dashed rgba(0,102,204,.55);outline-offset:3px}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections [contenteditable="true"]:focus{outline:2px solid var(--hx-accent,#0066cc);outline-offset:3px}
:is(body.sp-edit.hlh-textmode,body.hlh-preview) #sp-sections .sp-ext-crd-bottom:not(:has(.sp-ext-crd-bottom-title:not(:empty),.sp-ext-crd-bottom-subtitle:not(:empty),.sp-ext-crd-bottom-text:not(:empty),.sp-ext-crd-bottom-cta[data-crd-admin-href])){display:none!important}
.hlh-modebar-sep{width:1px;align-self:stretch;margin:4px 2px;background:rgba(127,127,127,.3)}
.hlh-modebar .hlh-btn:disabled{opacity:.4;cursor:default}

/* 모바일·태블릿 미리보기 */
body.hlh-preview :is(#hive-dock,#hui-mac-edge,#sp-admin-bar,#mt-admin-bar,#sp-anchor-toggle,.hlh-pill,.hlh-modebar,.hlh-panel,.hlh-layer,#hfb-toggle,.hfb-float,.hfb-layer,.hfb-bar,#hac-dock,.hac-float,#hgd-dock,.hgd-panel,.sp-rt-bar,.hqa-launch,.sp-sty-chip,.sp-hero-quick,.sp-online-url-row){display:none!important}
.hlh-pv{position:fixed;inset:0;z-index:100080;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;background:rgba(15,23,42,.62)}
.hlh-pv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#fff;color:#1d2027;font:600 13px/1.3 var(--hx-font,system-ui,sans-serif)}
.hlh-pv-bar .hlh-btn{min-height:34px}
.hlh-pv-note{font-weight:400;font-size:12px;opacity:.75}
.hlh-pv-frame{flex:1;min-height:0;border:0;border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.4)}
/* 디자인 편집 정리: 기존 편집 버튼은 선택한 섹션에만, 카드 버튼은 그 카드에 마우스를 올리거나 초점이 있을 때만 */
body.sp-edit.hlh-design #sp-sections > :not(.hlh-selected) :is(.sp-ext-crd-card-config,.sp-ext-crd-item-del,.sp-ext-crd-item-move,.sp-crd-part-tools,.sp-diagram-layout-tools,.sp-ext-crd-bg-editbar,.sp-precision-open,.hwb-launch,.sp-ext-edit-btn,.sp-ext-crd-html-btn,.sp-bg-media-note){display:none!important}
/* 섹션 옵션(옵션 칩)은 디자인 편집에서 모든 섹션에 늘 보인다. 같은 줄의 다른 도구(뒤집기 등)는 선택한 섹션에만 */
body.sp-edit.hlh-design #sp-sections > :not(.hlh-selected) .sp-precision-actions > :not(.sp-sty-chip){display:none!important}
body.sp-edit.hlh-design #sp-sections > .hlh-selected .sp-ext-crd-item:not(:hover):not(:focus-within) :is(.sp-ext-crd-card-config,.sp-ext-crd-item-del,.sp-ext-crd-item-move,.sp-crd-part-tools){opacity:0;pointer-events:none}
/* 마우스가 없는 휴대폰·태블릿: 선택한 섹션의 카드 버튼을 늘 보인다(마우스 올리기가 없다) */
@media (hover:none){body.sp-edit.hlh-design #sp-sections > .hlh-selected .sp-ext-crd-item :is(.sp-ext-crd-card-config,.sp-ext-crd-item-del,.sp-ext-crd-item-move,.sp-ext-crd-point-add,.sp-crd-part-tools){opacity:1;pointer-events:auto}}
body.hlh-preview :is(.pu-host,.pu-win,.pu-dim,.hd_pops,.layer_popup){display:none!important}
/* 카드 끌어서 순서 바꾸기 */
.hlh-grip{position:absolute;z-index:3;pointer-events:auto;width:28px;height:28px;padding:0;border:1px solid var(--hx-accent,#0066cc);border-radius:8px;background:#fff;color:var(--hx-accent-hover,#0058b0);font:700 16px/1 var(--hx-font,system-ui,sans-serif);cursor:grab;box-shadow:0 3px 10px rgba(15,23,42,.18);touch-action:none}
.hlh-grip:hover{background:var(--hx-accent,#0066cc);color:#fff}
.hlh-grip:focus-visible{outline:3px solid rgba(0,102,204,.45);outline-offset:2px}
.hlh-dragging .hlh-grip{cursor:grabbing}
.hlh-card-dragging{opacity:.45}
.hlh-dropline{position:absolute;z-index:100060;background:var(--hx-accent,#0066cc);border-radius:2px;pointer-events:none;box-shadow:0 0 0 2px rgba(255,255,255,.8)}
/* 섹션 디자인 창 탭(레이아웃·숫자·카드·이미지·글자·배경 움직임·슬라이드) */
.hlh-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 10px}
.hlh-panel .hlh-tabs .hlh-btn{min-height:30px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600}
.hlh-panel .hlh-tabs .hlh-btn[aria-selected="true"]{background:var(--hx-accent-soft,rgba(0,102,204,.1))!important;border-color:var(--hx-accent-line,#0066cc)!important;color:var(--hx-link,#0058b0)!important}
.hlh-tabpane[hidden]{display:none!important}
.hlh-tabpane.hlh-group{border-top:0;padding:0}
/* 원래대로 버튼(값을 바꾼 손잡이에만), 끄는 동안 기준선 */
.hlh-reset{position:absolute;z-index:3;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--hx-accent,#0066cc);box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);display:grid;place-items:center;cursor:pointer;pointer-events:auto}
.hlh-reset::after{content:'';position:absolute;inset:-6px}
.hlh-reset:hover{background:var(--hx-accent,#0066cc);color:#fff}
.hlh-reset:focus-visible{outline:2px solid var(--hx-accent,#0066cc);outline-offset:2px}
.hlh-h--pad-top .hlh-reset,.hlh-h--pad-bottom .hlh-reset{left:12px;top:12px}
.hlh-h--split .hlh-reset,.hlh-h--col .hlh-reset{left:-5px;top:-30px}
.hlh-h--radius .hlh-reset{left:24px;top:-3px}
.hlh-h--tsize .hlh-reset,.hlh-h--cgap .hlh-reset{left:-1px;top:28px}
.hlh-h--ratio .hlh-reset{left:48px;top:-5px}
.hlh-dragging .hlh-reset{opacity:0;pointer-events:none}
.hlh-guide{position:absolute;z-index:1;pointer-events:none}
.hlh-guide--v{width:0;border-left:1px dashed rgba(0,102,204,.55)}
.hlh-guide--h{left:0;right:0;height:0;border-top:1px dashed rgba(0,102,204,.45)}
.hlh-guide.is-hit{border-left:2px solid var(--hx-accent,#0066cc)}
.hlh-guide-t{position:absolute;top:-22px;left:4px;padding:1px 6px;border-radius:5px;background:#fff;color:var(--hx-accent,#0066cc);font:600 11.5px/1.4 var(--hx-font,system-ui,sans-serif);white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hlh-guide--h .hlh-guide-t{left:50%;transform:translateX(-50%);top:-20px}
.hlh-row-t.has-fig{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hlh-fig{flex:none;display:inline-flex;color:var(--hx-tx-3,#8e8e93);line-height:0}
.hlh-fig .hlh-fig-on{fill:var(--hx-accent,#0066cc);fill-opacity:.28;stroke:var(--hx-accent,#0066cc)}

/* 카드 줄 붙이기 표시(세로 보라 선) · 카드 안 글 폭·위치 손잡이 */
.hlh-dropline.is-join{background:var(--hx-accent,#0066cc);box-shadow:0 0 0 3px rgba(0,102,204,.25)}
.hlh-tx{position:absolute;z-index:6;border:0;padding:0;cursor:grab;touch-action:none;background:var(--hx-accent,#0066cc);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hlh-tx--w{width:8px;height:36px;border-radius:6px;cursor:ew-resize}
.hlh-tx--m{width:26px;height:26px;border-radius:50%;font:700 14px/26px sans-serif;text-align:center;cursor:move}
.hlh-tx:focus-visible{outline:3px solid #fff;outline-offset:1px;box-shadow:0 0 0 5px var(--hx-accent,#0066cc)}
.hlh-sz{position:absolute;z-index:6;width:22px;height:22px;border:0;border-radius:50%;padding:0;font:700 12px/22px sans-serif;text-align:center;color:#fff;background:var(--hx-accent,#0066cc);box-shadow:0 2px 8px rgba(0,0,0,.25);touch-action:none}
.hlh-sz--cw{cursor:ew-resize}.hlh-sz--ch{cursor:ns-resize}.hlh-sz--iw{cursor:nwse-resize}
.hlh-sz:focus-visible{outline:3px solid #fff;outline-offset:1px;box-shadow:0 0 0 5px var(--hx-accent,#0066cc)}
/* 글 위치 손잡이: 기호 대신 이름표(무엇을 하는지 바로 보이게) */
.hlh-tx--m.hlh-tx--named{width:auto;height:22px;padding:0 9px;border-radius:999px;font:700 11px/22px var(--hx-font,system-ui,sans-serif);white-space:nowrap}
/* 카드 폭·높이 손잡이: 기호만으로는 용도를 알 수 없어 이름표로 */
.hlh-sz--cw,.hlh-sz--ch{width:auto;height:22px;padding:0 9px;border-radius:999px;font:700 11px/22px var(--hx-font,system-ui,sans-serif);white-space:nowrap}
/* 창 맨 위 PC | 모바일 전환: 항상 보인다 */
.hlh-panel .hlh-devseg{display:flex;gap:4px;padding:3px;margin:2px 0 10px;border-radius:12px;background:var(--hx-fill,#ececf0)}
html .hlh-panel .hlh-devseg button:not(#hx-n):not(#hx-n){flex:1 1 0;min-width:0;height:34px;border:0!important;border-radius:9px!important;background:transparent!important;color:#515154!important;font:600 13px/1 var(--hx-font,system-ui,sans-serif)!important;box-shadow:none!important;cursor:pointer}
html .hlh-panel .hlh-devseg button[aria-selected="true"]:not(#hx-n):not(#hx-n){background:#1d1d1f!important;color:#fff!important}
.hlh-panel .hlh-devseg button:focus-visible{outline:2px solid var(--hx-accent,#0066cc);outline-offset:1px}
/* 모바일을 고르면 PC 쪽 묶음 탭과 화면 안내는 접는다 */
.hlh-panel[data-hlh-devmode="mo"] .hlh-tabs,.hlh-panel[data-hlh-devmode="mo"] .hlh-dev{display:none!important}
/* 글 폭·글 위치·카드 크기 손잡이: 층(.hlh-layer)이 클릭을 통과시키므로 손잡이는 직접 받도록 켠다(빠져 있어 누르면 아래 사진이 눌렸다) */
.hlh-layer .hlh-tx,.hlh-layer .hlh-sz{pointer-events:auto}
/* 섹션 전체 가로 폭 손잡이(내용 상자 오른쪽 가장자리) */
.hlh-h--secw{z-index:3;width:22px;height:64px;cursor:ew-resize}
.hlh-h--secw::before{inset:0;border-radius:11px;background:var(--hx-accent,#0066cc);opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.hlh-h--secw::after{content:'↔';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:700 13px/1 var(--hx-font,system-ui,sans-serif)}
.hlh-h--secw .hlh-tip{top:-28px;opacity:1}
.hlh-h--secw .hlh-reset{left:1px;top:70px}
.hlh-sz[hidden]{display:none!important}
/* ── 히어로 화면 직접 조작(hero_handles.js) ── */
.hhh-layer{position:absolute;inset:0;z-index:120;pointer-events:none}
/* 히어로 손잡이는 일반 섹션 손잡이(.hlh-pin / .hlh-grip)와 같은 모양·색을 쓴다: 흰 바탕에 강조색 테두리, 누르거나 켜진 것은 강조색 채움 */
.hhh-layer .hhh-h{position:absolute;pointer-events:auto;touch-action:none;border:0;margin:0;font:700 11px/1.2 var(--hx-font,system-ui,sans-serif);white-space:nowrap;box-shadow:0 4px 12px rgba(15,23,42,.16)}
.hhh-layer .hhh-move{height:26px;padding:0 10px;border-radius:999px;background:var(--hx-accent,#0066cc);color:#fff;cursor:move}
.hhh-layer .hhh-move--img{background:var(--hx-accent,#0066cc)}
.hhh-layer .hhh-bar{width:10px;height:36px;padding:0;border-radius:5px;background:#fff;border:2px solid var(--hx-accent,#0066cc);box-sizing:border-box;cursor:ew-resize}
.hhh-layer .hhh-corner{width:26px;height:26px;padding:0;border-radius:50%;background:var(--hx-accent,#0066cc);color:#fff;font-size:13px;cursor:nwse-resize}
.hhh-layer .hhh-preset{height:26px;padding:0 10px;border-radius:999px;background:#fff;color:var(--hx-accent-hover,#0058b0);border:1px solid var(--hx-accent,#0066cc);cursor:pointer}
.hhh-layer .hhh-al{height:26px;min-width:48px;padding:0 10px;border-radius:999px;background:#fff;color:var(--hx-accent-hover,#0058b0);border:1px solid var(--hx-accent,#0066cc);cursor:pointer}
.hhh-layer .hhh-al.is-on,.hhh-layer .hhh-al:hover,.hhh-layer .hhh-preset:hover{background:var(--hx-accent,#0066cc);color:#fff}
.hhh-layer .hhh-dy{width:22px;height:22px;padding:0;border-radius:50%;background:#fff;color:var(--hx-accent-hover,#0058b0);border:1px solid var(--hx-accent,#0066cc);font-size:9px;cursor:pointer;opacity:.92}
.hhh-layer .hhh-dy--grip{width:28px;border-radius:999px;font-size:11px;cursor:ns-resize}
.hhh-layer .hhh-dy.is-on,.hhh-layer .hhh-dy:hover{background:var(--hx-accent,#0066cc);color:#fff}
.hhh-layer .hhh-dy:hover,.hhh-layer .hhh-al:hover{opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.hhh-layer .hhh-h:focus-visible{outline:3px solid rgba(0,102,204,.45);outline-offset:2px}
.hhh-dragging,.hhh-dragging *{user-select:none!important}
.hhh-pop{position:fixed;z-index:100050;width:280px;padding:12px;border-radius:14px;background:#fff;color:#1d1d1f;box-shadow:0 12px 40px rgba(0,0,0,.2);font:500 12px/1.4 var(--hx-font,system-ui,sans-serif)}
.hhh-pop-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.hhh-pop-h strong{font-size:14px}
.hhh-pop-g{display:flex;flex-wrap:wrap;gap:6px}.hhh-pop-g--sub{margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}
html .hhh-pop button:not(#hx-n){min-height:32px;padding:0 12px;border:0!important;border-radius:999px!important;background:#f0f0f3!important;color:#1d1d1f!important;font:600 12px/1 var(--hx-font,system-ui,sans-serif)!important;cursor:pointer;box-shadow:none!important}
html .hhh-pop button:not(#hx-n):hover{background:#1d1d1f!important;color:#fff!important}
.hhh-pop-n{margin:10px 0 0;color:#6e6e73;font-size:11px;word-break:keep-all}
/* 미디어 맞춤 도구(사진·영상 위): 끌기 · 작게/크게 · 채움/전체 · 원래대로 */
.hlh-md{position:absolute;z-index:7;display:flex;align-items:center;gap:2px;height:30px;padding:3px;border-radius:999px;background:rgba(29,29,31,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:auto;touch-action:none;font:600 11px/1 var(--hx-font,system-ui,sans-serif);color:#fff}
.hlh-md-b{min-width:24px;height:24px;margin:0;padding:0 7px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:12px;line-height:24px;cursor:pointer}
.hlh-md-b:hover{background:rgba(255,255,255,.18)}
.hlh-md-b:focus-visible{outline:2px solid #fff;outline-offset:1px}
.hlh-md-pan{background:var(--hx-accent,#0066cc);cursor:move;font-size:13px}
.hlh-md-pan:hover{background:var(--hx-accent-hover,#0058b0)}
.hlh-md-fit{padding:0 9px;background:rgba(255,255,255,.14)}
.hlh-md-z{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;opacity:.86}
.hlh-md-dev{margin:0 4px 0 2px;padding:0 6px;height:18px;line-height:18px;border-radius:999px;background:#f59e0b;color:#1d1d1f;font-size:10px}
/* 무대형(뷰어·아코디언·스위처)은 편집 중에 원래 카드 목록으로 풀린다. 한 줄 3장으로 모아 글자·순서·사진을 고치기 쉽게 보여 준다(방문자 화면에는 영향 없음) */
body.sp-edit #sp-sections .sp-ext-crd-common:is([data-hc-card-look="viewer"],[data-hc-card-look="accordion"],[data-hc-card-look="switcher"]) .sp-ext-crd-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;margin-top:16px!important}
body.sp-edit #sp-sections .sp-ext-crd-common:is([data-hc-card-look="viewer"],[data-hc-card-look="accordion"],[data-hc-card-look="switcher"]) .sp-ext-crd-item{width:auto!important;max-width:none!important;min-width:0!important;flex:none!important}
body.sp-edit #sp-sections .sp-ext-crd-common:is([data-hc-card-look="viewer"],[data-hc-card-look="accordion"],[data-hc-card-look="switcher"]) .sp-ext-crd-thumb{aspect-ratio:4/3!important;height:auto!important;min-height:0!important}
body.sp-edit #sp-sections .sp-ext-crd-common:is([data-hc-card-look="viewer"],[data-hc-card-look="accordion"],[data-hc-card-look="switcher"]) .sp-ext-crd-grid::before{content:'편집 중에는 카드 목록으로 보입니다. 방문자 화면에서는 선택한 형태(뷰어·아코디언·스위처)로 표시됩니다.';grid-column:1/-1;padding:10px 14px;border-radius:12px;background:rgba(15,118,110,.1);color:#0f766e;font:600 13px/1.4 var(--hx-font,system-ui,sans-serif);text-align:left}
@media (max-width:900px){body.sp-edit #sp-sections .sp-ext-crd-common:is([data-hc-card-look="viewer"],[data-hc-card-look="accordion"],[data-hc-card-look="switcher"]) .sp-ext-crd-grid{grid-template-columns:minmax(0,1fr)!important}}
/* 디자인 편집에서 섹션을 선택해도 화면이 밀리지 않게: 선택한 섹션의 본문 사이에 끼어들던 도구 막대를 본문 밖으로 뺀다.
   도식 설정 막대는 오른쪽 패널의 '도식' 탭과 같은 값이라 숨기고, 배경 등록 막대는 섹션 왼쪽 위에 접힌 채 떠 있다가 올리면 펼쳐진다(히어로는 기존 그대로) */
body.sp-edit.hlh-design #sp-sections > .hlh-selected .sp-diagram-layout-tools{display:none!important}
body.sp-edit.hlh-design #sp-sections > .hlh-selected:not(.sp-ext-crd--role-hero) > .sp-ext-crd-bg-editbar{position:absolute!important;top:56px;left:12px;right:auto;bottom:auto;z-index:6;width:auto;max-width:calc(100% - 24px);max-height:60px;margin:0!important;padding:8px!important;overflow:hidden;border-radius:12px;background:rgba(29,29,31,.86);box-shadow:0 4px 14px rgba(0,0,0,.2);opacity:.92}
body.sp-edit.hlh-design #sp-sections > .hlh-selected:not(.sp-ext-crd--role-hero) > .sp-ext-crd-bg-editbar:is(:hover,:focus-within){max-height:none;overflow:visible;opacity:1}
/* 레이아웃 창 접기·옮기기(2026-10-06): 작은 화면에서 창이 편집 내용을 가려서 추가. 접으면 제목 줄만 남고, 제목 줄을 끌면 옮겨진다. */
.hlh-panel .hlh-head{cursor:grab;touch-action:none;user-select:none}
.hlh-panel.hlh-panel--drag .hlh-head{cursor:grabbing}
.hlh-panel.hlh-panel--drag{transition:none!important;box-shadow:0 22px 60px rgba(0,0,0,.42)}
.hlh-panel.hlh-panel--min{max-height:none!important;overflow:hidden;padding-bottom:14px}
.hlh-panel.hlh-panel--min>:not(.hlh-head){display:none!important}
.hlh-panel.hlh-panel--min .hlh-head{margin-bottom:0}
@media(max-width:700px){.hlh-panel .hlh-head{cursor:default}.hlh-panel.hlh-panel--min{max-height:none}}
/* 카드 삭제(2026-10-06): '카드 추가'가 보이는 곳에서는 삭제도 할 수 있어야 한다.
   글자 편집에서는 카드 삭제 단추를 통째로 숨겼고, 디자인 편집에서는 선택한 섹션에만 보여서, 카드를 추가하고 나면 지울 방법이 없었다.
   카드에 마우스를 올리면(터치 기기는 항상) 삭제 단추가 보인다. 미리보기에서는 그대로 숨긴다. */
body.sp-edit.hlh-textmode:not(.hlh-preview) #sp-sections .sp-ext-crd-item .sp-ext-crd-item-del,body.sp-edit.hlh-design:not(.hlh-preview) #sp-sections > :not(.hlh-selected) .sp-ext-crd-item .sp-ext-crd-item-del{display:flex!important}
body.sp-edit.hlh-textmode:not(.hlh-preview) #sp-sections .sp-ext-crd-item:not(:hover):not(:focus-within) .sp-ext-crd-item-del,body.sp-edit.hlh-design:not(.hlh-preview) #sp-sections > :not(.hlh-selected) .sp-ext-crd-item:not(:hover):not(:focus-within) .sp-ext-crd-item-del{opacity:0;pointer-events:none}
@media (hover:none){body.sp-edit.hlh-textmode:not(.hlh-preview) #sp-sections .sp-ext-crd-item .sp-ext-crd-item-del,body.sp-edit.hlh-design:not(.hlh-preview) #sp-sections > :not(.hlh-selected) .sp-ext-crd-item .sp-ext-crd-item-del{opacity:1!important;pointer-events:auto!important}}
/* 표의 이름 칸·열 경계(2026-10-06): 카드 섹션의 열 경계(.hlh-h--col)와 같은 파란 선 + 흰 막대. 끌기 동작은 기존 크기 손잡이(.hlh-sz) 그대로 */
.hlh-sz.hlh-sz--line{width:14px;min-width:0;padding:0;border-radius:0;background:transparent;box-shadow:none;color:transparent;font-size:0;line-height:0;cursor:ew-resize;z-index:6}
.hlh-sz.hlh-sz--line::before{content:'';position:absolute;top:0;bottom:0;left:6px;width:2px;background:var(--hx-accent-line,#0066cc);opacity:.55;transition:opacity .15s}
.hlh-sz.hlh-sz--line:hover::before,.hlh-sz.hlh-sz--line:focus-visible::before,.hlh-dragging .hlh-sz.hlh-sz--line::before{opacity:1}
.hlh-sz.hlh-sz--line::after{content:'';position:absolute;left:2px;top:50%;width:10px;height:36px;margin-top:-18px;border-radius:5px;background:#fff;border:2px solid var(--hx-accent-line,#0066cc);box-sizing:border-box}
.hlh-sz.hlh-sz--line:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,102,204,.35)}