/* ── landing 빌더 CSS (builder.php에서 분리 — 브라우저 캐시용) ──
   수정 시 이 파일만 고치면 됨. 캐시버스터 = filemtime 자동. */
/* ── 빌더 페이지 오버라이드 (사이트 body 스타일 무력화) ── */
#hd_login_msg{display:none !important}
html,body{margin:0 !important;padding:0 !important}
body{background:#e2e8f0 !important;font-size:14px}
*{box-sizing:border-box}
body{font-family:var(--ff-ko1,'Pretendard','Malgun Gothic',sans-serif);background:#e2e8f0;margin:0;font-size:14px;color:#1e293b}
button{font-family:inherit}

/* 상단바 */
/* ★ fixed 고정 — sticky는 테마 전역 body overflow에 무력화되어 스크롤 시 올라가버림 */
.bld-top{position:fixed;left:0;right:0;top:0;z-index:1000;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0 14px;height:52px !important;overflow:hidden}
.bld-top > *{flex:0 0 auto !important} /* px 고정 폭 기준 — 테마 전역 폼 스타일 간섭 차단 */
@media (max-width:1200px){ .bld-hint{display:none} }
.bld-top a{color:#94a3b8;text-decoration:none;font-size:13px;white-space:nowrap}
/* ★ 테마 전역 input/select 스타일(width:100% 등)이 먹지 않게 전부 px 고정 + !important */
.bld-top .ttl{background:#1e293b !important;border:1px solid #334155 !important;color:#fff !important;border-radius:6px !important;padding:0 10px !important;font-size:13px !important;width:170px !important;height:34px !important;line-height:34px}
.bld-top select{background:#1e293b !important;border:1px solid #334155 !important;color:#fff !important;border-radius:6px !important;padding:0 6px !important;font-size:13px !important;height:34px !important;width:auto !important;max-width:160px !important;min-width:0 !important}
#widthPreset{width:150px !important}
#jpgFormat{width:80px !important}
#jpgScale{width:60px !important}
.bld-top input.wpx{background:#1e293b !important;border:1px solid #334155 !important;color:#fff !important;border-radius:6px !important;font-size:13px !important;width:64px !important;height:34px !important;text-align:center;padding:0 4px !important}
.bld-top .bld-btn{height:34px !important;line-height:1 !important;width:auto !important}

/* ── ★ 모바일 헤드 토글 (2026-07-26) — PC 에선 완전 숨김, 모바일에서만 상단바를 우측 슬라이드 패널로 ── */
#bldTopToggle{display:none}
#bldTopDim{display:none}
@media (max-width:820px){
  /* ⚙ 토글 버튼 — 우측 상단 고정, 상단바보다 위 */
  #bldTopToggle{
    display:flex;align-items:center;justify-content:center;position:fixed;top:8px;right:10px;z-index:1102;
    width:44px;height:44px;border:0;border-radius:12px;background:#4f46e5;color:#fff;font-size:22px;cursor:pointer;
    box-shadow:0 4px 14px rgba(79,70,229,.4)
  }
  #bldTopToggle:active{transform:scale(.95)}
  /* 딤 배경 — 패널 열렸을 때만 */
  #bldTopDim{
    position:fixed;inset:0;z-index:1099;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .2s
  }
  body.bldtop-open #bldTopDim{opacity:1;pointer-events:auto}
  /* 상단바 = 우측 세로 슬라이드 패널로 전환 (기본 화면 밖 숨김) */
  .bld-top{
    left:auto !important;right:0;top:0;bottom:0;width:min(86vw,340px) !important;height:100vh !important;
    flex-direction:column;align-items:stretch !important;justify-content:flex-start !important;
    gap:10px !important;padding:64px 16px 24px !important;overflow-y:auto !important;
    transform:translateX(105%);transition:transform .25s ease;z-index:1101
  }
  body.bldtop-open .bld-top{transform:translateX(0)}
  /* 패널 안에서는 버튼/입력이 세로로 꽉 차게 */
  .bld-top > *{flex:0 0 auto !important;width:100% !important}
  .bld-top .ttl,.bld-top select,.bld-top input.wpx{width:100% !important;max-width:100% !important;box-sizing:border-box}
  #widthPreset{width:100% !important}
  .bld-top .bld-btn{width:100% !important;justify-content:center;display:flex;align-items:center}
  /* 사이즈탭·줌·단축키 그룹은 가로 유지 */
  .bld-top > span{display:flex !important;flex-wrap:wrap;gap:6px}
  .bld-top .bld-export{margin-left:0 !important;border-left:0 !important;padding-left:0 !important;
    flex-direction:column;width:100%;border-top:1px solid #334155;padding-top:10px !important;margin-top:4px}
}
/* head.sub가 body에 출력하는 기타 요소(로그인 메시지 등)로 상단이 밀리지 않게
   ★ 우리 오버레이(보관함/이미지메뉴/틀 가이드/크롭 고스트)는 반드시 화이트리스트에 — 빠지면 강제 숨김됨 */
body > div:not(.bld-top):not(.bld-stage):not(.bld-side):not(.shp-ov):not(#busy):not(.shp-dock):not(#cropBar):not(.CodeMirror-hints):not(.wjlib):not(#imgCtx):not(#mszGuide):not(#cropGhost):not(#aiPanel):not(#twPanel):not(#bldTopDim):not(#mobileViewNotice):not(#devpNotice):not(#lndPageDock):not(#lndAiChat):not(#lndPageStack):not(.lnd-hf-ov):not(.lnd-paste-ov):not(#ibFloat):not(#blkSelRail):not(#lndEnvOv):not(#lndOwnerOv):not(#g2MdOv):not(#bldFloatTools){display:none !important}
.bld-btn{border:0;border-radius:6px;padding:9px 14px;font-size:13px;cursor:pointer;line-height:1;white-space:nowrap}
.bld-btn.save{background:#2563eb;color:#fff}
.bld-btn.save:hover{background:#1d4ed8}
.bld-btn:disabled{opacity:.35;cursor:not-allowed} /* 비활성 = 흐리게 — 완료 전 저장버튼 오해 방지 */
.mini-busy{display:none;align-items:center;gap:5px;font-size:12px;color:#fbbf24;font-weight:700;white-space:nowrap;margin-right:6px}
.mini-busy .mb-spin{display:inline-block;animation:mbspin 0.9s linear infinite;font-size:14px}
@keyframes mbspin{to{transform:rotate(360deg)}}
.bld-btn.jpg{background:#16a34a;color:#fff}
.bld-btn.jpg:hover{background:#15803d}
.bld-hint{font-size:12px;color:#64748b;margin-left:12px;white-space:nowrap}
/* ★ 단축키 안내 — 인포 아이콘 + 호버/클릭 패널 (눈에 잘 띄게) */
.bld-infowrap{position:relative;margin-left:10px;flex:0 0 auto}
/* ★ (2026-08-21) 단축키 안내 = 캔버스 영역 상단 독립 플로팅(흰순이 방식). 패널 왼쪽(right:320px) 상단 공중 */
#infoWrap{position:fixed;top:62px;right:322px;z-index:960;margin-left:0}
#infoWrap .bld-info{box-shadow:0 6px 18px rgba(15,23,42,.3)}
@media screen and (max-width:900px){ #infoWrap{top:auto;bottom:14px;right:14px} }
.bld-info{display:inline-flex;align-items:center;gap:5px;background:#164e63 !important;border:1px solid #0e7490 !important;color:#67e8f9 !important;border-radius:20px !important;height:32px !important;padding:0 13px !important;font-size:12px !important;font-weight:700;cursor:pointer;white-space:nowrap}
.bld-info i{font-size:15px;line-height:1}
.bld-info:hover{background:#0e7490 !important;color:#fff !important}
/* 상단바 overflow:hidden에 안 잘리게 fixed — left는 JS가 버튼 위치로 맞춤 */
.bld-infopanel{display:none;position:fixed;top:58px;left:16px;z-index:3000;background:#0f172a;border:1px solid #334155;border-radius:12px;padding:12px 14px;min-width:330px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.bld-infowrap:hover .bld-infopanel,.bld-infowrap.open .bld-infopanel{display:block}
.bld-infopanel .ttl2{display:flex;align-items:center;gap:6px;color:#67e8f9;font-size:13px;font-weight:800;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid #1e293b}
.bld-infopanel .row{display:flex;align-items:center;gap:6px;font-size:12px;color:#cbd5e1;padding:4px 0;white-space:nowrap}
.bld-infopanel .row span{color:#94a3b8;margin-left:auto;padding-left:14px}
.bld-infopanel kbd{background:#1e293b;border:1px solid #334155;border-bottom-width:2px;border-radius:5px;padding:2px 7px;font-size:11px;color:#fbbf24;font-family:inherit;font-weight:700}
body.shp-frame .bld-infowrap{display:none !important}
/* 이미지 산출 그룹 — 맨 우측 고정 (저장과 시각적 분리) */
.bld-export{margin-left:auto !important;display:flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid #334155}

/* 캔버스 */
.bld-stage{padding:78px 320px 120px 20px;display:flex;justify-content:center} /* 상단 78 = 고정 헤드 52 + 여백 26 */
/* 기본 배경 흰색 (테마 body #e6e6e6 회색 차단) — 실제 값은 공통 설정 S.bg 인라인이 우선 */
/* isolation:isolate = 캔버스 자체 스태킹 컨텍스트 → 음수 z 스티커가 배경 위·섹션 아래에 끼워짐 */
/* display:flow-root = 가상요소 없이 float 포함(캡처 복제 문서에서도 높이 보장) */
#canvas{background:#ffffff;box-shadow:0 4px 20px rgba(15,23,42,.15);min-height:300px;position:relative;isolation:isolate;display:flow-root}
/* ★ 편집 미리보기 — 캔버스 안 요소(스와이퍼 slide 트랙 등)가 폭을 넘어도 가로 스크롤 안 생기게 (2026-07-30) */
body:not(.lnd-view) #canvas{ overflow-x:hidden }

/* ★ 스티커 (캔바식 자유 배치 — z 음수면 섹션 뒤) */
.shp-sticker{position:absolute;cursor:move;user-select:none;line-height:0}
.shp-sticker .stk-mask,.blk-layer .stk-mask{overflow:hidden;line-height:0;width:100%;height:100%} /* 크롭 시 틀 밖 잘림 · 크기 100% = 그룹 스티커를 설계 크기보다 키워도 마스크가 따라와 안 잘림 (2026-07-19) */
.shp-sticker .stk-txt{white-space:pre-wrap;word-break:break-word;pointer-events:none;line-height:1.3}

/* ★ (2026-08-02) 섹션 선택 레일 — 캔버스 "오른쪽 바깥" body 레벨 fixed ⚙ 버튼 (overflow 마스크 밖).
   인라인 편집 때문에 섹션 클릭이 어려운 문제 해결. 캡쳐(html2canvas)는 캔버스만 찍으므로 안 찍힘 */
#blkSelRail button{position:fixed;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:rgba(15,23,42,.45);color:#fff;cursor:pointer;z-index:890;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0;opacity:.7;transition:background .15s,opacity .15s}
#blkSelRail button:hover{opacity:1;background:#2563eb}
#blkSelRail button.on{opacity:1;background:#2563eb}
/* ★ 선택 섹션 빠른 액션 (복사/붙여넣기/섹션모음 저장) — ⚙ 아래 세로 (2026-08-22) */
#blkSelRail button.qa{width:26px;height:26px;font-size:13px;background:#475569;opacity:.92}
#blkSelRail button.qa:hover{background:#0e7490;opacity:1}
#blkSelRail button.qa.qa-lib{background:#7c3aed}
#blkSelRail button.qa.qa-lib:hover{background:#6d28d9}
body.shp-printing #blkSelRail,body.shp-mobile-view #blkSelRail,body.shp-scanning #blkSelRail{display:none !important}

/* ★ 섹션 레이어 — 섹션에 소속(앵커 기준), 섹션과 함께 이동 */
.blk-layer{position:absolute;cursor:move;user-select:none;line-height:0}
/* ★ (2026-08-02) 토탈 inner 적용 레이어 앵커 래퍼 — 섹션 안 inner(S.container) 폭 중앙 영역이 레이어 좌표 기준.
   contents-container 폭 클래스와 함께 쓰이며, 가로전체(body.lnd-wide)에서만 max-width가 살아남(그 외 모드=100%=기존과 동일).
   z-index 없음(스태킹 컨텍스트 미생성) → 레이어 자체 z(90+)가 섹션 기준 그대로 작동 */
.blk-lay-inner{position:absolute !important;left:0;right:0;top:0;height:100% !important;margin:0 auto !important;padding:0 !important;float:none !important;width:100%;pointer-events:none}
.blk-lay-inner>.blk-layer{pointer-events:auto}
.blk-layer img{width:100%;height:auto;display:block;pointer-events:none;max-width:none}
.blk-layer .ly-txt{white-space:pre-wrap;word-break:break-word;pointer-events:none;line-height:1.4;font-size:16px}
.blk-layer:hover{outline:1px dashed #06b6d4;outline-offset:0}
.blk-layer.on{outline:2px solid #0891b2}
.shp-sticker img{width:100%;height:auto;display:block;pointer-events:none;max-width:none}
/* ★ 그룹 스티커 (제작소 세트) — 내부 아이템은 설계 px 그대로 두고 래퍼를 scale */
.stkg{position:relative;line-height:1.25}
.stkg .stkg-t{white-space:pre-wrap;word-break:break-word;cursor:pointer}
.stkg img{pointer-events:none}
.shp-sticker.on{outline:2px solid #2563eb;outline-offset:0}
.shp-sticker .hd-size,.blk-layer .hd-size{position:absolute;right:-8px;bottom:-8px;width:15px;height:15px;background:#2563eb;border:2px solid #fff;border-radius:50%;cursor:nwse-resize;z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.shp-sticker .hd-rot,.blk-layer .hd-rot{position:absolute;left:50%;top:-26px;margin-left:-8px;width:15px;height:15px;background:#f59e0b;border:2px solid #fff;border-radius:50%;cursor:grab;z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.shp-sticker .hd-rot::after,.blk-layer .hd-rot::after{content:'';position:absolute;left:50%;top:13px;width:2px;height:11px;background:#f59e0b;margin-left:-1px}

/* 스티커 목록 (공통 설정 하단) */
.stklist{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto;margin-top:6px}
.stklist .it{display:flex;align-items:center;gap:6px;font-size:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:5px;padding:3px 6px;cursor:pointer}
.stklist .it:hover{border-color:#93c5fd}
.stklist .it.on{border-color:#2563eb;background:#eff6ff}
.stklist .it img{width:26px;height:26px;object-fit:contain;flex-shrink:0;background:#fff;border-radius:3px}
.stklist .it .tag{width:34px;height:22px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#64748b;background:#e2e8f0;border-radius:4px;white-space:nowrap}
.stklist .it .nm{flex:1;color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stklist .it button{border:1px solid #cbd5e1;background:#fff;border-radius:4px;font-size:11px;padding:2px 7px;cursor:pointer;flex-shrink:0}
.stklist .it button.del{color:#dc2626}
/* 캔버스 안에서는 컨테이너 폭 = 캔버스 폭 (테마 max-width 무시)
   ★ 단, 가로전체(반응형) 모드(body.lnd-wide)에서는 이 강제를 풀어 전역 inner(container-lg 등 max-width)가 살아나야 함.
      → 위젯 콘텐츠가 화면 100% 안에서 inner(1560 등) 폭으로 중앙정렬 (본체 서브페이지와 동일). */
body:not(.lnd-wide) #canvas .contents-container{width:100% !important;max-width:100% !important;margin:0 !important;padding-left:0 !important;padding-right:0 !important}
body.lnd-wide #canvas .contents-container{width:100%;margin-left:auto;margin-right:auto}
/* ★ (2026-08-17) 랜딩 자체 inner 폭 정의 — 테마 CSS(.container-lg calc(1440+16rem) 등)에 의존하지 않고 랜딩 값으로 확정.
   가로전체(.lnd-wide=반응형 PC)에서만 적용. 모바일/태블릿/목업(=lnd-wide 없음)은 위 규칙으로 100% (inner 무시). */
/* ★ (2026-08-17) inner 폭은 넓은 화면(≥1025px)에서만 — 발행 실기기 모바일/태블릿(좁은 뷰포트)은 자동 100%(양옆 여백 방지).
   편집 미리보기는 lnd-wide 클래스가 PC탭일 때만 붙어 이중 안전. */
@media (min-width:1025px){
  body.lnd-wide #canvas .contents-container.container-lg{max-width:1600px;padding-left:20px;padding-right:20px}
  body.lnd-wide #canvas .contents-container.container-md{max-width:1560px;padding-left:20px;padding-right:20px}
  body.lnd-wide #canvas .contents-container.container-sm{max-width:1440px;padding-left:20px;padding-right:20px}
  body.lnd-wide #canvas .contents-container.container-full{max-width:100%}
  /* ★ (2026-08-18) 섹션 자체를 inner 안으로 (b.selfinner) — .blk 는 100% 유지, 안에 .selfinner-wrap 하나 더 씌워
     그 래퍼에 배경·그림자·라운드·패딩 적용 + inner 폭 + 중앙. (JS applyBlockSectionStyle 가 자식을 래퍼로 감쌈)
     캔버스 data-container 값으로 폭 결정. 가로전체(≥1025px·lnd-wide)에서만 폭 제한, 그 외=100%. */
  /* selfinner 섹션의 .blk 를 flex 중앙정렬 컨테이너로 → float 무력화 + 래퍼가 확실히 가운데.
     ★ .blk 는 반드시 100% 폭 유지(width:100% !important) — float 해제 후 폭이 콘텐츠로 줄면 wrap 이 왼쪽에 붙는다. */
  body.lnd-wide #canvas .blk[data-selfinner="1"]{display:flex !important;float:none !important;flex-direction:column;align-items:center;width:100% !important;max-width:100% !important}
  body.lnd-wide #canvas[data-container="container-lg"] .blk[data-selfinner="1"] .selfinner-wrap{max-width:1600px}
  body.lnd-wide #canvas[data-container="container-md"] .blk[data-selfinner="1"] .selfinner-wrap{max-width:1560px}
  body.lnd-wide #canvas[data-container="container-sm"] .blk[data-selfinner="1"] .selfinner-wrap{max-width:1440px}
  body.lnd-wide #canvas[data-container="container-full"] .blk[data-selfinner="1"] .selfinner-wrap{max-width:100%}
  body.lnd-wide #canvas[data-container="custom"] .blk[data-selfinner="1"] .selfinner-wrap{max-width:var(--lnd-inner-custom,1200px)}
}
/* 래퍼 기본 — 폭 100%(위 미디어쿼리에서만 좁아짐) + 중앙. 좁은 화면/모바일/태블릿은 항상 100%. */
#canvas .blk .selfinner-wrap{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;position:relative}
/* custom(직접px)은 container-lg 클래스 + 인라인 max-width 로 렌더됨 → 인라인이 위 1600 을 이기게(!important 안 씀) */
#canvas .wg_side{width:100%;position:relative}
#canvas .wg_box{width:100%}
#canvas img{max-width:100%}

/* 블록 — ★ float:left + clear:both 로 각 섹션이 자기 영역 확정
   (위젯 디자인 내부의 float가 밖으로 새어 다음 섹션이 위로 겹치는 것 차단.
    float 요소는 BFC를 만들어 내부 float도 스스로 감쌈) */
.blk{position:relative;min-height:8px;width:100%;float:left;clear:both}
.blk::after{content:'';display:block;clear:both;height:0}
.blk-ins{clear:both}
#canvas::after{content:'';display:block;clear:both;height:0}
#canvas .wg_side{width:100%;float:left}
#canvas .wg_box{width:100%;float:left}
.blk.sel{outline:2px solid #2563eb;outline-offset:-2px}
.blk:hover{outline:1px dashed #93c5fd;outline-offset:-1px}
.blk .simg{display:block;max-width:100%;height:auto;margin:0 auto}
.blk .txtc{outline:none;word-break:break-word;white-space:pre-wrap}
.blk.space-blk{background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(148,163,184,.08) 8px,rgba(148,163,184,.08) 16px)}
.blk .tools{position:absolute;top:2px;right:2px;display:none;gap:2px;z-index:60}
.blk:hover .tools,.blk.sel .tools{display:flex}
.blk .tools button{border:0;background:#0f172a;color:#fff;font-size:12px;width:26px;height:26px;border-radius:4px;cursor:pointer;opacity:.88}
.blk .tools button:hover{opacity:1;background:#2563eb}
.blk .tools button.del:hover{background:#dc2626}
.blk .tools button.widbadge{width:auto;padding:0 9px;background:#6d28d9;font-size:11px;font-weight:700;letter-spacing:0}
.blk .tools button.widbadge:hover{background:#5b21b6}
/* ★ 그리드 섹션 — 빈 칸 안내 + 중첩 위젯은 반복(+/−) 편집 숨김 (JSON 교체로 수정) */
.gr-cell{min-width:0}
.gr-cell .wg_item_ctrl{display:none !important}
.gr-empty{border:1.5px dashed #cbd5e1;background:#f8fafc;border-radius:8px;min-height:120px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;box-sizing:border-box}
.gr-empty button{border:1px solid #93c5fd;background:#eff6ff;color:#1d4ed8;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;font-weight:700}
.grmd-row{display:flex;gap:5px;align-items:center;border:1px solid #e2e8f0;border-top:2px solid transparent;border-radius:8px;padding:7px 8px;margin-bottom:5px;background:#fff}
.grmd-row.on{background:#eef2ff;border-color:#4f46e5}
.grmd-row button{border:1px solid #93c5fd;background:#eff6ff;color:#1d4ed8;border-radius:6px;padding:6px 0;font-size:11px;cursor:pointer;font-weight:700;flex:1}
.grmd-row button.d{flex:0 0 auto;padding:6px 9px;border-color:#fca5a5;background:#fef2f2;color:#dc2626}
/* ★ 빈 섹션 높이 드래그 핸들 — 스캔 중에는 숨김 */
/* ★ (2026-08-02) 핸들 z 58→870 — 삽입바 호버 띠(.blk-ins z800)가 핸들 클릭을 가로채던 문제 fix (핸들 위에선 핸들이 우선) */
.blank-hz{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:46px;height:14px;background:#2563eb;border:2px solid #fff;border-radius:8px;cursor:ns-resize;z-index:870;box-shadow:0 1px 4px rgba(0,0,0,.25);display:none}
/* ★ X 키 억제 중 = 삽입바 호버 감지 띠 완전 비활성 (투명 띠가 클릭 막던 문제) */
body.lnd-ib-off .blk-ins{pointer-events:none}
.blk:hover .blank-hz,.blk.sel .blank-hz{display:block}
body.shp-scanning .blank-hz{display:none !important}
/* ★ 대지 고정 높이 — 끝 경계선 (편집 화면 전용) */
body:not(.shp-scanning) #canvas.fixed-h::after{content:'대지 끝 — 고정 높이';position:absolute;left:0;right:0;bottom:0;border-bottom:2px dashed #f59e0b;color:#f59e0b;font-size:10px;text-align:right;padding:0 6px 2px;pointer-events:none}
/* ★ (2026-08-02) 삽입바 — hover 시 body 레벨 플로팅(#ibFloat, position:fixed)으로 표시.
   캔버스 overflow(마스크)·헤더 미리보기·레이어에 갇히거나 가려지지 않음. 좁으면 자동 줄바꿈.
   .blk-ins 스트립 = hover 판정 영역만 (맨 아래 .last 만 인라인 상주바) */
.blk-ins{position:relative;height:0;z-index:800}
/* 호버 판정용 투명 레이어 — 섹션 경계 위아래 띠 */
.blk-ins::after{content:'';position:absolute;left:0;right:0;top:-8px;height:16px;z-index:1}
/* ★ (2026-08-18) 삽입 지점 호버 = 그 사이에 가로 점선(여기에 삽입됨). 툴바 ▶화살표와 짝. */
.blk-ins::before{content:'';position:absolute;left:0;right:0;top:0;height:0;border-top:2px dashed #2563eb;opacity:0;transition:opacity .12s;pointer-events:none;z-index:41}
.blk-ins:hover::before{opacity:.92}
/* 공용 버튼 박스 (인라인 .ib + 플로팅 #ibFloat) — 정사각 아이콘 버튼 */
.blk-ins .ib,#ibFloat{display:flex;gap:3px;background:#0f172a;border-radius:14px;padding:5px 7px;flex-wrap:nowrap;justify-content:center;box-shadow:0 8px 22px rgba(15,23,42,.35)}
#ibFloat{display:none;position:fixed;transform:translateY(-50%);z-index:960;max-width:96vw;flex-wrap:wrap;justify-content:flex-start} /* ★ (2026-08-18) 왼쪽 정렬 — 좁으면 5칸씩 말풍선 배열, JS가 left/maxWidth 인라인 지정 */
/* ★ (2026-08-18) 캔버스 왼쪽 바깥 배치 시 — 툴바 오른쪽에서 삽입지점(캔버스)을 가리키는 ▶ 화살표 */
#ibFloat.ib-arrow{overflow:visible}
#ibFloat.ib-arrow::after{content:'';position:absolute;right:-11px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-left-color:#0f172a;filter:drop-shadow(2px 2px 3px rgba(15,23,42,.25))}
.blk-ins .ib .ibt,#ibFloat .ibt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:46px;height:46px;flex:none;border:0;border-radius:10px;background:transparent;color:#dbe4f0;cursor:pointer;padding:0}
.blk-ins .ib .ibt i,#ibFloat .ibt i{font-size:17px;line-height:1}
.blk-ins .ib .ibt b,#ibFloat .ibt b{font-size:15px;line-height:1;font-weight:800}
.blk-ins .ib .ibt span,#ibFloat .ibt span{font-size:9.5px;line-height:1;letter-spacing:-.3px;white-space:nowrap}
.blk-ins .ib .ibt:hover,#ibFloat .ibt:hover{background:#2563eb;color:#fff}
/* JSON(J) — 제작자 전용, 보라 강조 */
.blk-ins .ib .ib-j,#ibFloat .ib-j{background:#7c3aed;color:#fff}
.blk-ins .ib .ib-j:hover,#ibFloat .ib-j:hover{background:#6d28d9}
/* ★ (2026-08-13) 맨 아래 추가바도 호버 시에만 표시 (상주 빗금 제거). 호버 판정용 높이만 남김. */
.blk-ins .ib-wrap{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);display:none;z-index:3;width:max-content;max-width:100%}
.blk-ins.last{height:40px} /* 호버 판정 영역만 — 인라인 상주바 없음(ibFloat가 호버 시 뜸) */
/* ★ (2026-08-02) 편집화면 헤더 미리보기(.lndh z100)가 캔버스(z auto)보다 위라 맨 위 삽입바를 가림 →
   편집 모드에선 z 해제 (드로어/딤은 어차피 편집에서 display:none, 발행뷰는 그대로 z100) */
body:not(.lnd-view) #lndHdPrev .lndh{z-index:auto}

/* ★ INFO 정보 섹션 (사이즈표/제품정보/상품고시/자유테이블) */
.if-sec{width:100%;padding:10px 24px;box-sizing:border-box;--iffs:1;--ifpd:1} /* 글자/칸패딩 배율 (정보 편집 모달 조절바) */
.if-tit{text-align:center;font-size:26px;font-weight:700;color:#222;padding:16px 0 6px;line-height:1.4}
.if-desc{text-align:center;font-size:15px;color:#555;line-height:1.6;padding-bottom:14px}
.if-unit{text-align:right;font-size:12px;color:#888;padding:4px 2px}
.if-diagram{text-align:center;padding:6px 0 16px;overflow:hidden}
.if-diagram svg,.if-diagram img{max-width:72%;height:auto;vertical-align:top}
table.if-tbl{width:100%;border-collapse:collapse;border-top:2px solid #222}
table.if-tbl th,table.if-tbl td{border-bottom:1px solid #e5e5e5;padding:calc(15px*var(--ifpd)) calc(10px*var(--ifpd));font-size:calc(15px*var(--iffs));text-align:center;color:#333;vertical-align:middle;line-height:1.5}
table.if-tbl thead th{background:#f8f8f8;font-weight:700}
table.if-tbl .if-lb{background:#f8f8f8;font-weight:700;width:112px}
table.if-tbl.if-list td{text-align:left;padding-left:calc(18px*var(--ifpd))}
table.if-tbl.if-list td.if-lb{padding-left:calc(15px*var(--ifpd))}
.if-opts{text-align:center}
/* ★ 값 칸 왼쪽 정렬 옵션 — table.if-tbl td의 center를 이김 (2026-07-22) */
table.if-tbl.opt-left td.if-opts{text-align:left;padding-left:calc(14px*var(--ifpd))}
.if-opt{display:inline-block;color:#c9c9c9;font-weight:400;padding:2px 10px;border-radius:4px;cursor:pointer;border:1.5px dashed transparent;margin:0 4px}
/* ★ 켜진(체크된) 항목 — 회색 점선 라운드 네모 강조 · 상하 패딩+3 · 양옆 여백(margin) (2026-07-22) */
.if-opt.on{color:#111;font-weight:700;border:1.5px dashed #9ca3af;border-radius:14px;padding:5px 12px;margin:0 6px}
body:not(.shp-scanning) .if-opt:hover{outline:1px dashed #f59e0b;outline-offset:-1px}
.if-notes{padding:16px 4px 8px;font-size:calc(12.5px*var(--iffs));color:#888;line-height:1.9;text-align:left}
.if-notes>div{padding-left:10px;text-indent:-10px}
/* 편집 가능 표시 (위젯 인라인수정과 동일 컨셉 — 캡처엔 안 찍히는 hover만) */
body:not(.shp-scanning) .if-ed{cursor:pointer;position:relative}
body:not(.shp-scanning) .if-ed:hover{background:rgba(245,158,11,.07);box-shadow:inset 0 0 0 1px #f59e0b}
/* ★ 정보 섹션도 JSON 위젯처럼 "Shift+클릭" 힌트 라벨 표시 (2026-07-22) */
body:not(.shp-scanning) .if-ed::before{
  content:'Shift+클릭';
  position:absolute;top:-18px;left:0;
  font-size:9px;line-height:16px;height:16px;
  color:#9ca3af;background:rgba(255,255,255,.92);
  padding:0 6px;border-radius:3px;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:5;
  white-space:nowrap;width:auto;max-width:none;word-break:keep-all;box-sizing:border-box;
  font-weight:400;
}
body:not(.shp-scanning) .if-ed:hover::before{opacity:1}
/* ★ 제목(heading) 텍스트도 동일한 편집 힌트 — 오버 시 연한 주황 + 테두리 + "Shift+클릭" (2026-07-22) */
body:not(.shp-scanning) #canvas .blk .hd-txt{position:relative;cursor:pointer;border-radius:3px;transition:background .15s,box-shadow .15s}
body:not(.shp-scanning) #canvas .blk .hd-txt:hover{background:rgba(245,158,11,.07);box-shadow:inset 0 0 0 1px #f59e0b}
body:not(.shp-scanning) #canvas .blk .hd-txt::before{
  content:'Shift+클릭';
  position:absolute;top:-18px;left:0;
  font-size:9px;line-height:16px;height:16px;
  color:#9ca3af;background:rgba(255,255,255,.92);
  padding:0 6px;border-radius:3px;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:5;
  white-space:nowrap;width:auto;word-break:keep-all;box-sizing:border-box;font-weight:400;
}
body:not(.shp-scanning) #canvas .blk .hd-txt:hover::before{opacity:1}
/* 정보 종류 선택 카드 */
.ifk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 16px 6px}
.ifk-card{border:1px solid #e2e8f0;border-radius:10px;background:#fff;padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s}
.ifk-card:hover{border-color:#2563eb;box-shadow:0 4px 14px rgba(37,99,235,.12);transform:translateY(-1px)}
.ifk-card b{display:block;font-size:13px;color:#1e293b;margin-top:8px}
.ifk-card span{display:block;font-size:11px;color:#94a3b8;margin-top:3px;line-height:1.5}
.ifk-card .ic{font-size:26px;color:#2563eb;line-height:1}
/* 정보 편집 모달 내부 */
#ifBody{max-height:62vh;overflow:auto;padding:14px 18px 18px} /* 모달 본문 패딩 (.shp-md는 자체 패딩 없음) */
#ifBody .ifr{display:flex;gap:5px;align-items:center;margin-bottom:5px}
#ifBody input[type="text"]{border:1px solid #cbd5e1;border-radius:6px;padding:7px 9px;font-size:13px;min-width:0}
#ifBody .if-grid-tb{width:100%;border-collapse:collapse}
#ifBody .if-grid-tb td{padding:2px}
#ifBody .if-grid-tb input{width:100%}
#ifBody .ifxbtn{border:1px solid #fca5a5;background:#fef2f2;color:#dc2626;border-radius:6px;padding:6px 9px;font-size:12px;cursor:pointer;flex-shrink:0}
#ifBody .ifaddbtn{border:1px solid #93c5fd;background:#eff6ff;color:#1d4ed8;border-radius:6px;padding:7px 12px;font-size:12px;cursor:pointer;font-weight:700}
#ifBody h4{font-size:13px;color:#334155;margin:14px 0 6px;padding-top:10px;border-top:1px dashed #e2e8f0}
#ifBody h4:first-child{border-top:0;margin-top:0;padding-top:0}
#ifBody .ifopt-chip{display:inline-block;border:1px solid #cbd5e1;background:#f8fafc;color:#94a3b8;border-radius:14px;padding:4px 12px;font-size:12px;cursor:pointer;margin:2px 3px 2px 0;user-select:none}
#ifBody .ifopt-chip.on{background:#1e293b;border-color:#1e293b;color:#fff;font-weight:700}
#ifBody .ifhint{font-size:11px;color:#94a3b8;line-height:1.6;margin:4px 0 8px}
#emptyGuide{padding:60px 20px;text-align:center;color:#94a3b8;font-size:14px;line-height:2}

/* ★ 인라인수정 표시 — 그누보드 위젯 인라인수정(widget_inline_edit.php)과 동일한 CSS */
/* display:block = 자기 영역 확보 (플랫폼 원본과 동일) + 빈 텍스트도 클릭되게 최소 높이 */
#canvas .wg_edit_txt,
#canvas .wg_edit_title{position:relative;cursor:pointer;display:block;min-height:1em;pointer-events:auto!important}
#canvas .wg_edit_img{cursor:pointer;pointer-events:auto!important}
#canvas .wg_edit_txt:hover,
#canvas .wg_edit_img:hover,
#canvas .wg_edit_title:hover{
  background-color:rgba(245,158,11,0.05)!important;
  box-shadow:inset 0 0 0 1px #f59e0b!important;
  z-index:10;
}
#canvas .wg_edit_txt::before,
#canvas .wg_edit_title::before{
  content:'Shift+클릭';
  position:absolute;top:-20px;left:0;
  font-size:9px;line-height:16px;height:16px;
  color:#9ca3af;background:rgba(255,255,255,0.9);
  padding:0 6px;border-radius:3px;
  opacity:0;transition:opacity 0.2s;pointer-events:none;z-index:5;
  white-space:nowrap;width:auto;max-width:none;word-break:keep-all;box-sizing:border-box;
}
#canvas .wg_edit_txt:hover::before,
#canvas .wg_edit_title:hover::before{opacity:1}
/* 편집 중 표시 (contenteditable 활성) — 주황 테두리 */
#canvas [contenteditable="true"]{
  outline:none!important;
  box-shadow:inset 0 0 0 2px #f59e0b!important;
  background:rgba(245,158,11,0.08)!important;
  min-height:1em;
}
#canvas .wg_img_empty{min-height:80px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px}
/* ★ 엑셀 키 뱃지 — 항상 표시 (호버 불필요, 캡처에는 미포함 data-html2canvas-ignore) */
#canvas .xk-badge{position:absolute;top:-7px;left:0;background:#4338ca;color:#fff;font-size:9px;line-height:14px;height:14px;padding:0 7px;border-radius:8px;z-index:6;pointer-events:none;white-space:nowrap;font-weight:700;opacity:.88}

/* ★ 반복구간(항목) 추가/삭제 — 고객도 사용 가능 (새 디자인은 불가, 반복만) */
#canvas .wg_box_in{position:relative}
/* ★ (2026-08-18) 반복항목 도구 = 크기 절반 + 항목 '아래'로(위 이미지/텍스트 Shift+클릭 안 가리게) */
#canvas .wg_item_ctrl{position:absolute;bottom:2px;left:2px;top:auto;z-index:50;display:none;gap:2px}
#canvas .wg_box_in:hover > .wg_item_ctrl{display:flex}
#canvas .wg_item_ctrl button{border:0;width:12px;height:12px;border-radius:3px;background:#6d28d9;color:#fff;font-size:9px;line-height:1;cursor:pointer;opacity:.85;display:flex;align-items:center;justify-content:center;padding:0}
#canvas .wg_item_ctrl button:hover{opacity:1}
#canvas .wg_item_ctrl button.d{background:#dc2626}
#canvas .wg_item_ctrl button i{font-size:9px;line-height:1}
/* ★ (2026-08-18) 도구 감추기 토글 ON — 캔버스 편집 오버레이 일괄 숨김(항목도구·삽입바·섹션툴바 등) */
body.lnd-tools-hidden #canvas .wg_item_ctrl,
body.lnd-tools-hidden #canvas .blk-ins,
body.lnd-tools-hidden #canvas .tools,
body.lnd-tools-hidden #canvas .blank-hz{display:none !important}

/* 우측 설정 패널 */
.bld-side{position:fixed;top:52px;right:0;bottom:0;width:300px;background:#fff;border-left:1px solid #cbd5e1;padding:16px;overflow-y:auto;z-index:900;font-family:'Malgun Gothic',sans-serif}
/* ★ (2026-08-21) 우측 패널 위 공중 플로팅 도구 — 상단바에서 이동(발행/실기기 미리보기·단축키). 패널(300px) 상단에 떠 있음 */
#bldFloatTools{position:fixed;top:60px;right:12px;z-index:950;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;width:280px;pointer-events:none}
#bldFloatTools > *{pointer-events:auto}
#bldFloatTools .bft-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border:0;border-radius:8px;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px rgba(15,23,42,.28)}
#bldFloatTools .bft-btn:hover{filter:brightness(1.1)}
#bldFloatTools .bld-info{box-shadow:0 6px 18px rgba(15,23,42,.28)}
/* 플로팅 바가 [섹션 추가] 제목을 가리지 않게 패널 위쪽 여백 확보 */
.bld-side{padding-top:56px}
@media screen and (max-width:900px){ #bldFloatTools{position:static;width:auto;padding:8px 10px 0;justify-content:flex-start} .bld-side{padding-top:16px} }
/* ★ AI 흰순이 캐릭터 — 사이드 패널(300px) 앞(왼쪽)에 고정, 겹침 방지 (2026-07-31) */
#lndAiFab{position:fixed;right:316px;bottom:22px;z-index:99998;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(145deg,#8b5cf6,#7c3aed);box-shadow:0 10px 28px rgba(124,58,237,.45);display:flex;align-items:center;justify-content:center;padding:0;transition:transform .18s}
#lndAiFab:hover{transform:scale(1.07)}
#lndAiFab .lndai-badge{position:absolute;top:-4px;right:-4px;background:#fff;color:#7c3aed;font-size:9px;font-weight:800;padding:2px 6px;border-radius:100px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
#lndAiChat{right:316px !important}
@media (max-width:900px){
  /* 모바일: 사이드 패널이 하단(높이 210px)으로 이동 → 캐릭터/대화창을 그 위로 */
  #lndAiFab{right:16px;bottom:224px}
  #lndAiChat{right:12px !important;bottom:296px !important;height:min(440px,52vh) !important}
}
.bld-side h3{font-size:14px;margin:0 0 12px;color:#0f172a}
.bld-side .fld{margin-bottom:13px}
.bld-side .fld label{display:block;font-size:12px;color:#64748b;font-weight:700;margin-bottom:5px}
.bld-side .fld input[type=text],.bld-side .fld input[type=number],.bld-side .fld select{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:7px 8px;font-size:13px}
.bld-side .fld input[type=range]{width:100%}
.bld-side .fld .rv{font-size:12px;color:#2563eb;font-weight:700}
.bld-side .nosel{color:#94a3b8;font-size:13px;line-height:1.9}
.bld-side .btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.bld-side .btnrow button{flex:1 1 40%;border:1px solid #cbd5e1;background:#f8fafc;border-radius:6px;padding:9px 4px;font-size:13px;cursor:pointer}
.bld-side .btnrow button:hover{background:#eff6ff;border-color:#93c5fd}
.bld-side .btnrow button.wjson{background:#f5f3ff;border-color:#c4b5fd;color:#6d28d9;font-weight:700}

/* 공통 모달 */
.shp-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:2000;display:none;align-items:center;justify-content:center}
/* ★ 다른 모달(정보 편집/제목 편집) 위에서 열리는 선택용 모달 — 항상 앞에 (이미지 선택이 뒤로 숨는 문제) */
#imgPickOv,#txtOv,#hdOv{z-index:2300}
.shp-md{background:#fff;border-radius:12px;width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;font-family:'Malgun Gothic',sans-serif}
.shp-md .hd{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#0f172a;color:#fff}
.shp-md .hd b{font-size:14px}
.shp-md .hd .x{margin-left:auto;background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer}
.shp-md .tabs{display:flex;border-bottom:1px solid #e2e8f0}
.shp-md .tabs button{flex:1;border:0;background:#f8fafc;padding:12px;font-size:14px;cursor:pointer;color:#64748b;border-bottom:2px solid transparent}
.shp-md .tabs button.on{background:#fff;color:#6d28d9;font-weight:700;border-bottom-color:#6d28d9}
.shp-md .foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e2e8f0}
.shp-md .foot button{border:0;border-radius:6px;padding:10px 20px;font-size:14px;cursor:pointer}
.shp-md .foot .cancel{background:#e2e8f0;color:#334155}
.shp-md .foot .apply{background:#6d28d9;color:#fff}

/* 이미지 모달 */
.imgpick .pathrow{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid #e2e8f0;flex-direction:column;align-items:stretch}
.imgpick .pathrow input{flex:1;min-width:160px;border:1px solid #cbd5e1;border-radius:6px;padding:8px;font-size:13px}
.imgpick .pathrow button{border:1px solid #cbd5e1;background:#f8fafc;border-radius:6px;padding:8px 12px;font-size:13px;cursor:pointer}
.imgpick .pathrow button.pri{background:#2563eb;border-color:#2563eb;color:#fff}
/* ★ 함 탭 — 지금 보고 있는 함 명확히 (탭=검정, 버튼과 구분) */
.imgpick .boxtabs button{border:0;background:transparent;border-radius:6px;padding:8px 14px;font-size:13px;cursor:pointer;color:#64748b;font-weight:700}
.imgpick .boxtabs button.on{background:#0f172a;color:#fff}
.imgpick .it .fmeta{font-size:11px;color:#94a3b8;text-align:center;padding:0 4px 6px;min-height:14px;line-height:1.3}
/* ★ 상한을 200px로 둬 칸이 1열로 무한정 늘어나 이미지/이름이 잘리는 현상 방지 (1fr → 상한 고정) (2026-07-22) */
/* ★ 이미지 변경 모달만 화면 높이를 꽉 쓰게 (다른 모달 영향 없음) — 목록 스크롤 영역 확대 (2026-07-22) */
.shp-md.imgpick{max-height:94vh;height:94vh}
/* ★ 가로만 N분할, 세로는 내용대로 쌓임 (2026-07-22)
   - grid-auto-rows:min-content = 각 행 높이 = 카드 내용만큼 (부모 높이에 맞춰 세로 분할/겹침 방지)
   - align-content:start = 카드를 위에서부터 쌓음 (남는 세로 공간에 벌리지 않음)
   - flex:1 제거 = 그리드가 부모 높이에 갇히지 않고 내용만큼 늘어나며 스크롤 */
.imgpick .grid{padding:14px 16px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,200px));grid-auto-rows:min-content;gap:12px;min-height:120px;align-items:start;align-content:start;justify-content:start;position:relative} /* 카드 높이 = 내용만큼 (늘려 맞추지 않음) · position:relative = 드롭 힌트 오버레이 기준 */
/* ★ 탐색기 파일 끌어다 놓기 힌트 오버레이 (2026-07-22) — 드래그 중에만 표시 */
.imgpick .imgDropHint{display:none;position:absolute;inset:8px;z-index:20;border:3px dashed #4f46e5;border-radius:12px;background:rgba(238,242,255,.94);align-items:center;justify-content:center;text-align:center;color:#4f46e5;font-size:15px;font-weight:700;line-height:1.7;pointer-events:none}
.imgpick .imgDropHint i{font-size:40px;color:#6366f1}
.imgpick .grid.dragover .imgDropHint{display:flex}
/* ★ 카드 = flex 컬럼 — 자식(이미지+이름+메타)이 세로로 쌓여 카드 높이가 내용 합만큼 확정 = 겹침 원천 차단 (2026-07-22) */
.imgpick .grid .it{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;cursor:pointer;background:#f8fafc;position:relative;display:flex;flex-direction:column;align-self:start}
.imgpick .grid .it:hover{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.25)}
/* 현재 적용 중인 이미지 — 초록 라인 강조 */
.imgpick .grid .it.cur{border-color:#16a34a;box-shadow:0 0 0 2px rgba(22,163,74,.5)}
.imgpick .grid .it .curtag{position:absolute;left:4px;top:4px;background:#16a34a;color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;z-index:2;line-height:1.3}
/* ★ 샘플 상품함 이미지 배지 — 왼쪽 하단 주황 (사용 중 태그와 안 겹치게) (2026-07-22) */
.imgpick .grid .it .smptag{position:absolute;left:4px;bottom:26px;background:#b45309;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;z-index:2;line-height:1.3}
/* 업로드함 파일 삭제 X */
.imgpick .grid .it .zoomx{position:absolute;right:46px;top:6px;width:36px;height:36px;background:#0f766e;color:#fff;border-radius:50%;font-size:19px;line-height:36px;text-align:center;z-index:2;display:none;cursor:pointer}
.imgpick .grid .it:hover .zoomx{display:block}
.imgpick .grid .it .zoomx:hover{background:#115e59}
.imgpick .grid .it .delx{position:absolute;right:6px;top:6px;width:36px;height:36px;background:#dc2626;color:#fff;border-radius:50%;font-size:22px;line-height:36px;text-align:center;z-index:2;display:none;cursor:pointer}
.imgpick .grid .it:hover .delx{display:block}
.imgpick .grid .it .delx:hover{background:#b91c1c}
/* 함 간 이동 버튼 */
.imgpick .grid .it .mvx{position:absolute;left:6px;bottom:34px;background:#0f172a;color:#fff;font-size:11px;padding:4px 8px;border-radius:4px;z-index:2;display:none;line-height:1.4;cursor:pointer} /* ★ 이동 라벨 = 왼쪽 하단 */
.imgpick .grid .it:hover .mvx{display:block}
.imgpick .grid .it .mvx:hover{background:#6d28d9}
/* ★ 이미지 영역을 고정 비율(3:4) 박스로 — 로딩 타이밍/원본 세로와 무관하게 카드 높이가 즉시 확정 = 겹침 원천 차단 (2026-07-22)
   object-fit:contain = 세로 긴 옷 이미지도 잘리지 않고 박스 안에 통째로 들어감 */
.imgpick .grid .it img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;margin:0;background:repeating-conic-gradient(#eef2f7 0% 25%, #fff 0% 50%) 0 0/16px 16px}
.imgpick .grid .it{min-height:44px}
.imgpick .grid .it .fn{font-size:11px;color:#64748b;padding:4px 6px;word-break:break-all;line-height:1.3}
.imgpick .grid .dir{display:flex;align-items:center;justify-content:center;height:90px;font-size:13px;color:#2563eb;font-weight:700}
.imgpick .empty{padding:30px;text-align:center;color:#94a3b8;font-size:13px;grid-column:1/-1;word-break:keep-all}
.imgpick .imgcur{padding:12px 16px;border-bottom:1px solid #e2e8f0;background:#f8fafc;text-align:center}
.imgpick .imgcur .lb{font-size:12px;color:#64748b;margin-bottom:6px;font-weight:700}
.imgpick .imgcur .pv img{max-height:120px;max-width:100%;border-radius:6px;border:1px solid #e2e8f0}
/* ★ 캡처/HTML 탭 컨테이너 — 내용이 길면 pane 안에서 스크롤(저장 버튼 잘림 방지) (2026-07-22) */
.imgpick .htmlpane{padding:16px;display:none;flex-direction:column;gap:10px;overflow-y:auto;min-height:0;flex:1 1 auto}
/* ★ 캡쳐 탭 컨트롤 — 테마 전역 input/select width:100% 무력화 + 가로 한 줄 배열 */
/* ★ 저장 버튼 행 — pane 하단에 고정(sticky)해 미리보기가 길어도 항상 보이게 (2026-07-22) */
.imgpick .caprow{display:flex !important;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;position:sticky;bottom:0;background:#fff;padding:10px 0 2px;z-index:3}
.imgpick .caprow input[type=text]{flex:1 1 auto;width:auto !important;min-width:130px !important;border:1px solid #cbd5e1;border-radius:6px;padding:8px 10px;font-size:13px}
.imgpick .caprow select{width:auto !important;min-width:0 !important;flex:0 0 auto;border:1px solid #cbd5e1;border-radius:6px;padding:8px 6px;font-size:13px;background:#fff;height:auto !important}
.imgpick .caprow .capsave{flex:0 0 auto;border:0 !important;background:#2563eb !important;color:#fff !important;border-radius:6px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;width:auto !important}
.imgpick .htmlpane .lbl{font-size:13px;color:#64748b}
.imgpick .htmlpane textarea{width:100%;height:150px;border:1px solid #cbd5e1;border-radius:8px;padding:10px;font-size:13px;font-family:Consolas,monospace;resize:vertical}

/* 위젯 JSON 모달 */
.wjmd textarea{width:100%;height:320px;border:0;padding:14px 16px;font-size:12px;font-family:Consolas,monospace;outline:none}
/* ★ 모든 모달 입력창: 기본 300px 이상 + 세로 크기조절 가능 */
.shp-md textarea{resize:vertical !important;min-height:300px}
.wjmd .lbl{padding:10px 16px 0;font-size:13px;color:#64748b;line-height:1.6}

/* ★ 씨스루 모달 — 어두운 배경 없이 실제 페이지를 보며 수정 (텍스트 변경) */
.shp-ov.seethrough{background:transparent;pointer-events:none;justify-content:flex-end;align-items:flex-start;padding:70px 320px 0 0}
.shp-ov.seethrough .shp-md{pointer-events:auto;box-shadow:0 12px 40px rgba(15,23,42,.35);border:1px solid #cbd5e1;width:min(480px,90vw)}
@media (max-width:900px){ .shp-ov.seethrough{padding:60px 10px 0 0;justify-content:center} }
/* ★ 정보 편집 모달 = 배경 어둡게 안 함(컬러/폰트 바로 보면서 수정) + 바깥 클릭 통과, 모달은 우측에 띄움 (2026-07-22) */
.shp-ov.infosee{background:transparent;pointer-events:none;justify-content:flex-end;align-items:flex-start;padding:60px 24px 0 0}
.shp-ov.infosee .shp-md{pointer-events:auto;box-shadow:0 16px 48px rgba(15,23,42,.4);border:1px solid #cbd5e1}
@media (max-width:900px){ .shp-ov.infosee{padding:40px 8px 0 0;justify-content:center} }

/* 텍스트 변경 모달 (샵헬퍼 전용) */
.txtmd .bd{padding:16px 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.txtmd .lbl2{font-size:13px;color:#64748b;line-height:1.6}
.txtmd textarea{width:100%;height:300px;border:1px solid #cbd5e1;border-radius:8px;padding:12px 14px;font-size:14px;font-family:inherit;resize:vertical;outline:none}
.txtmd textarea:focus{border-color:#6d28d9}
.txtmd .adv-tit{font-size:13px;font-weight:700;color:#334155;border-top:1px dashed #d1d5db;padding-top:12px}
.txtmd .adv-tit small{font-weight:400;color:#94a3b8}
/* 모드 탭 (admin 고급 / 고객 버전) — admin에게만 표시 */
.txtmd .mode-tabs{display:flex;gap:6px}
.txtmd .mode-tabs button{flex:1;border:1px solid #cbd5e1;background:#f8fafc;border-radius:8px;padding:9px;font-size:13px;cursor:pointer;color:#64748b;font-weight:700}
.txtmd .mode-tabs button.on{background:#6d28d9;border-color:#6d28d9;color:#fff}
/* 고객 버전 간단 설정 */
/* ★ (2026-08-13) 텍스트 설정 세로 리스트 — 라벨(왼쪽 고정폭) + 입력(flex) 한 줄씩. 2열 그리드 정렬 깨짐 해결. */
.txtmd .crows{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.txtmd .crow{display:flex;align-items:center;gap:8px}
.txtmd .crow > label{flex:0 0 66px;font-size:12px;color:#64748b;font-weight:700;text-align:right;line-height:1.25}
.txtmd .crow .c{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.txtmd .crow .c span{font-size:11px;color:#94a3b8;flex:0 0 auto}
.txtmd .crow .c input[type=number],.txtmd .crow .c input[type=text],.txtmd .crow .c select{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:7px 9px;font-size:13px;min-width:0}
.txtmd .crow .c input[type=color]{width:34px;height:32px;border:1px solid #cbd5e1;border-radius:6px;padding:1px;cursor:pointer;flex:0 0 auto}
.txtmd .crow .c input.scrub{cursor:ew-resize}
.txtmd .crow .c input.scrub:focus{cursor:text}
.txtmd .cust-grid{display:grid;grid-template-columns:44px 1fr 44px 1fr;gap:8px 6px;align-items:center;margin-top:8px}
.txtmd .cust-grid label{font-size:12px;color:#64748b;font-weight:700;text-align:right;padding-right:2px}
.txtmd .cust-grid .c{display:flex;align-items:center;gap:4px}
.txtmd .cust-grid .c span{font-size:11px;color:#94a3b8}
.txtmd .cust-grid input[type=number],.txtmd .cust-grid input[type=text],.txtmd .cust-grid select{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:6px 8px;font-size:13px;min-width:0}
.txtmd .cust-grid input[type=color]{width:32px;height:30px;border:1px solid #cbd5e1;border-radius:6px;padding:1px;cursor:pointer;flex-shrink:0}
.txtmd .cust-grid input.scrub{cursor:ew-resize}
.txtmd .cust-grid input.scrub:focus{cursor:text}
.txtmd .cust-grid .c.wide{grid-column:span 3}
.txtmd .cust-grid .c.wide input[type=range]{flex:1;min-width:60px}
.txtmd .cust-grid .c.wide input[type=number]{width:64px;flex:0 0 auto}
.txtmd .mode-tabs .mode-default{display:flex;align-items:center;gap:5px;font-size:12px;color:#475569;white-space:nowrap;cursor:pointer;padding:0 4px}
.txtmd .mode-tabs .mode-default input{accent-color:#6d28d9}
/* 그누 인라인수정과 동일한 칩 버튼 */
.txtmd .tool-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:7px}
/* ★ 라벨 좁으면 자동 줄바꿈 (예: em컬러 → em/컬러) — 잘림 방지 (2026-07-22) */
.txtmd .tool-label{font-size:12px;color:#64748b;font-weight:700;width:42px;flex-shrink:0;text-align:right;padding-right:4px;word-break:break-all;line-height:1.25}
.txtmd .tool-btn{border:1px solid #d1d5db;background:#fff;border-radius:6px;padding:5px 9px;font-size:12px;cursor:pointer;color:#475569;line-height:1.2}
.txtmd .tool-btn:hover{border-color:#a5b4fc;background:#f5f3ff}
.txtmd .tool-btn.active{background:#6d28d9;border-color:#6d28d9;color:#fff;font-weight:700}
.txtmd .tool-btn.ins{color:#be185d;border-color:#fbcfe8;background:#fdf2f8}
.txtmd .tool-btn.ins:hover{background:#fce7f3}
.txtmd .tool-btn.em{color:#c2410c;border-color:#fed7aa;background:#fff7ed}
.txtmd .tool-sep{width:1px;height:16px;background:#e2e8f0;margin:0 3px}
/* 메모 (사이트 공통) */
.txtmd #txtMemoRow{display:flex;align-items:center;gap:6px}
.txtmd .tmemo-btn{border:1px solid #86efac;background:#f0fdf4;color:#15803d;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer;font-weight:700}
.txtmd .tmemo-btn.save{border-color:#4ade80}
.txtmd .tmemo-btn:hover{background:#dcfce7}
.txtmd #txtMemoList{border:1px solid #e2e8f0;border-radius:8px;padding:8px;max-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.txtmd .tmemo-item{display:flex;align-items:center;gap:6px;font-size:12px;background:#f8fafc;border-radius:5px;padding:4px 8px}
.txtmd .tmemo-item .nm{flex:1;font-weight:600;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txtmd .tmemo-item button{border:1px solid #d1d5db;background:#fff;border-radius:4px;font-size:11px;padding:3px 8px;cursor:pointer;color:#6d28d9}
.txtmd .tmemo-item button.del{color:#dc2626}
.txtmd .tmemo-empty{font-size:12px;color:#94a3b8;padding:6px}

#busy{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:3000;display:none;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-direction:column;gap:10px}
/* ★ 예쁜 도트 로딩 (tools.php와 동일 무드) — busy 오버레이 공통 (2026-07-19) */
.bld-dots{display:flex;gap:9px;justify-content:center;padding:4px 0 10px}
.bld-dots i{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#4f46e5);animation:blddot 1.05s ease-in-out infinite;box-shadow:0 0 12px rgba(124,58,237,.65)}
.bld-dots i:nth-child(2){animation-delay:.15s;background:linear-gradient(135deg,#7dd3fc,#0284c7)}
.bld-dots i:nth-child(3){animation-delay:.3s;background:linear-gradient(135deg,#6ee7b7,#059669)}
@keyframes blddot{0%,100%{transform:translateY(0) scale(.85);opacity:.45}40%{transform:translateY(-11px) scale(1);opacity:1}}

/* ★ 이미지 크롭 모드 (Ctrl+클릭) */
#canvas img.shp-cropping{outline:3px dashed #f59e0b;outline-offset:-3px;cursor:move;z-index:80;position:relative}
#cropBar{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:2500;
  background:#0f172a;color:#fff;font-size:13px;padding:10px 14px;border-radius:10px;
  display:flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(15,23,42,.4);white-space:nowrap;
}
#cropBar b{color:#fbbf24}
/* 크롭 중 원본 이미지 실제 경계 표시 (마스크 밖 포함) — 파란 점선 */
#cropGhost{position:fixed;border:2px dashed #3b82f6;pointer-events:none;z-index:2400;box-shadow:0 0 0 1px rgba(59,130,246,.15);border-radius:2px}
#cropGhost::after{content:'원본 크기';position:absolute;left:0;top:-20px;font-size:11px;color:#3b82f6;background:rgba(255,255,255,.9);padding:1px 6px;border-radius:3px;line-height:1.4}
/* 잘려나간 부분 반투명 고스트 이미지 */
#cropGhostImg{position:fixed;pointer-events:none;z-index:2390;opacity:.3}
/* 회전 모드(T): 점선 모서리 ○ 회전 핸들 */
#cropGhost.rot{border-color:#f59e0b}
#cropGhost .ch{position:absolute;width:14px;height:14px;border:3px solid #f59e0b;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
#cropGhost .ch.tl{left:-8px;top:-8px}
#cropGhost .ch.tr{right:-8px;top:-8px}
#cropGhost .ch.bl{left:-8px;bottom:-8px}
#cropGhost .ch.br{right:-8px;bottom:-8px}
#cropBar button{border:0;border-radius:6px;padding:7px 12px;font-size:12px;cursor:pointer;background:#334155;color:#fff}
#cropBar button.ok{background:#16a34a}
#cropBar button:hover{opacity:.85}

/* 이미지 필터 모달 */
.flt-row{display:flex;align-items:center;gap:8px}
.flt-row label{width:52px;font-size:12px;color:#64748b;font-weight:700;text-align:right;flex-shrink:0}
.flt-row input[type=range]{flex:1;min-width:0}
.flt-row span{width:34px;font-size:11px;color:#6d28d9;font-weight:700;text-align:right;flex-shrink:0}
/* ★ 틀 가로/세로 — 직접 입력창 + 단위 (px가 4자리에서 아래로 내려가던 문제 해결, 2026-07-22) */
.flt-row span.flt-num{width:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.flt-row span.flt-num input[type=number]{width:52px;border:1px solid #cbd5e1;border-radius:6px;padding:5px 6px;font-size:12px;color:#6d28d9;font-weight:700;text-align:right;-moz-appearance:textfield}
.flt-row span.flt-num input[type=number]::-webkit-outer-spin-button,
.flt-row span.flt-num input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.flt-row span.flt-num b{font-size:11px;color:#94a3b8;font-weight:700}
.flt-nukki{border:1px solid #86efac;background:#f0fdf4;color:#15803d;border-radius:8px;padding:10px;font-size:13px;font-weight:700;cursor:pointer;margin-top:4px}
.flt-nukki:hover{background:#dcfce7}
#canvas img.shp-filtering{outline:3px dashed #16a34a;outline-offset:-3px}

/* 배경 컬러 팔레트 (동그라미 스와치) */
.bgpal{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.bgpal .sw{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid #e2e8f0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(15,23,42,.15);transition:transform .1s}
.bgpal .sw:hover{transform:scale(1.15)}
.bgpal .sw.on{border-color:#6d28d9;box-shadow:0 0 0 2px rgba(109,40,217,.3)}
.bgpal .sw.none{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cline x1='4' y1='20' x2='20' y2='4' stroke='%23dc2626' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat}
.bgpal .sw.add{background:#f8fafc;border-style:dashed;color:#6d28d9;font-weight:700;font-size:15px}
.bgpal .sw i{display:none;position:absolute;top:-7px;right:-7px;width:15px;height:15px;background:#dc2626;color:#fff;border-radius:50%;font-size:10px;font-style:normal;line-height:15px;text-align:center;cursor:pointer}
.bgpal .sw:hover i{display:block}

/* ★ 인라인 전용 모드 (2026-07-31) — 인라인 회원: 저작 컨테이너 숨김. (블록 삽입바·핸들은 IS_LOCKED→shp-locked 로 이미 차단됨)
   숨김: 사이드패널·도구독·페이지독·라이브러리·상단 저작컨트롤. 유지: 흰순이·인라인 편집(.wg_edit_txt/.if-ed)·상단 저장/미리보기. */
/* ★ 인라인 회원은 사이드패널이 없으니 흰순이를 화면 우측 끝으로 (사이드패널 앞자리 316px → 22px). (2026-08-01) */
body.lnd-inline-only #lndAiFab{right:22px !important}
body.lnd-inline-only #lndAiChat{right:22px !important}

/* 페이지독(레이어 날개)은 통째 숨김 — 어차피 수정할 게 없음. 서브 이동은 상단바 탭(#lndTopTabs)으로. (2026-08-01) */
body.lnd-inline-only .bld-side,
body.lnd-inline-only #sidePanel,
body.lnd-inline-only .shp-dock,
body.lnd-inline-only .wjlib,
body.lnd-inline-only #lndPageDock,
body.lnd-inline-only #lndPageToggle,
body.lnd-inline-only .bld-hint{display:none !important}
/* ★ 인라인 전용 좌측상단 페이지 전환 레이어 (2026-08-01) — 만든 페이지 개수만큼 세로로 쌓임. 항상 표시. 클릭=이동. */
#lndPageStack{position:fixed;left:10px;top:62px;z-index:1500;display:flex;flex-direction:column;gap:5px;max-width:190px}
#lndPageStack .pstk{display:flex;align-items:center;gap:7px;background:#0f172a;color:#cbd5e1;border:1px solid #334155;border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;box-shadow:2px 3px 10px rgba(0,0,0,.2);font-family:'Malgun Gothic',sans-serif}
#lndPageStack .pstk i{font-size:14px;flex:0 0 auto;color:#94a3b8}
#lndPageStack .pstk span{overflow:hidden;text-overflow:ellipsis}
#lndPageStack .pstk:hover{background:#1e293b;color:#fff}
#lndPageStack .pstk.on{background:#2563eb;color:#fff;border-color:#2563eb}
#lndPageStack .pstk.on i{color:#fff}
/* 캔버스가 사이드패널 자리까지 넓게 */
body.lnd-inline-only .bld-stage{margin-right:0 !important}
/* 상단바 저작 컨트롤 숨김 — 출력모드/PC폭/inner/디바이스탭/미리보기기기/배율/제목입력 + 이미지산출묶음(JPG·2배·스캔·새로고침).
   유지: 저장, 발행 미리보기, 실기기 미리보기, 목록, 줌(−/%/＋), 단축키 안내. */
body.lnd-inline-only .bld-top #outMode,
body.lnd-inline-only .bld-top #pcwWrap,
body.lnd-inline-only .bld-top #innerWrap,
body.lnd-inline-only .bld-top #devModel,
body.lnd-inline-only .bld-top #devScaleWrap,
body.lnd-inline-only .bld-top .dev-tabs,
body.lnd-inline-only .bld-top .ttl,
body.lnd-inline-only .bld-export #jpgFormat,
body.lnd-inline-only .bld-export #scanScale,
body.lnd-inline-only .bld-export button[onclick^="exportScan"],
body.lnd-inline-only .bld-export button[onclick^="exportPageJson"],
body.lnd-inline-only .bld-export button[onclick^="openPageImport"]{display:none !important}
/* ★ 새로고침(.bld-refresh)은 인라인 회원에게도 남김 — .bld-export 안이지만 이것만 유지 (2026-08-01) */

/* ★ 나란히 보기 프레임 모드 — 사이드패널/독 숨김, 캔버스만 */
body.shp-frame .bld-side,body.shp-frame .shp-dock,body.shp-frame .bld-hint{display:none !important}
body.shp-frame .bld-stage{margin-right:0 !important;padding:66px 8px 60px !important} /* 고정 헤드 52 + 14 */
body.shp-frame .bld-top .ttl{width:110px !important}

/* ★ 잠금(복사본) 모드 — 스티커는 내용 수정만(Shift/Ctrl/Alt), 이동·크기·회전 차단. 삽입바 숨김 */
body.shp-locked .shp-sticker{cursor:default !important}
body.shp-locked .blk-ins{display:none !important}
body.shp-locked .blk-layer{cursor:default}

/* ★ 스캔 저장 중 — 화면 전용 표시물 숨김 (실제 픽셀 캡처라 화면에 보이면 찍힌다) */
body.shp-scanning .xk-badge,body.shp-scanning .blk-ins,body.shp-scanning .tools,body.shp-scanning .wg_item_ctrl{display:none !important}
body.shp-scanning #canvas .wg_edit_txt:hover,body.shp-scanning #canvas .wg_edit_img:hover,body.shp-scanning #canvas .wg_edit_title:hover{background:none !important;box-shadow:none !important}
body.shp-scanning .blk.space-blk{background:none !important} /* 여백 블록 빗금(편집 표시)도 산출에서 제외 */
/* ★ 스캔 중 블록/레이어 hover 점선 아웃라인 제거 — 스캔 이미지에 파란 점선 찍힘 방지 (2026-07-23) */
/*   ★ (2026-08-13) hover는 outline만 제거 — background:inherit 빼서 섹션 배경이미지 유지(스캔 중 마우스 위치 배경 사라짐 방지) */
body.shp-scanning .blk:hover,body.shp-scanning .blk-layer:hover{outline:none !important}
body.shp-scanning .blk.blank-blk.dropready{outline:none !important;background:inherit !important}
/* ★ 스캔 중 모든 블록의 편집용 outline 강제 제거 (hover/sel 포함) — space 블록 경계 점선 방지 (2026-07-23) */
body.shp-scanning .blk,body.shp-scanning .blk:hover,body.shp-scanning .blk.sel{outline:none !important}
body.shp-scanning .blk-layer,body.shp-scanning .blk-layer:hover{outline:none !important}
/* ★ 스캔 중 빈 여백(space) 블록의 배경·테두리·점선 전부 제거 — 빈 영역은 완전 투명 (2026-07-23) */
body.shp-scanning .blk.space-blk{background:none !important;background-image:none !important;border:none !important;outline:none !important;box-shadow:none !important}
body.shp-scanning{scroll-behavior:auto !important} /* 부드러운 스크롤 금지 — 이음새 어긋남 방지 */

/* ★ 이미지 우클릭 메뉴 (크롭 벗기기 / 원본 전체 보이기) */
#imgCtx{display:none;position:fixed;z-index:6000;background:#0f172a;border-radius:10px;padding:5px;box-shadow:0 8px 24px rgba(0,0,0,.35);min-width:220px}
#imgCtx button{display:block;width:100%;border:0;background:transparent;color:#fff;text-align:left;font-size:13px;padding:9px 12px;border-radius:6px;cursor:pointer}
#imgCtx button:hover{background:#2563eb}
#imgCtx button:disabled{color:#475569;cursor:default}
#imgCtx button:disabled:hover{background:transparent}
#imgCtx .szrow{display:flex;align-items:center;gap:4px;padding:8px 10px;border-top:1px solid #1e293b;margin-top:4px}
#imgCtx .szrow label{color:#94a3b8;font-size:11px;flex-shrink:0}
#imgCtx .szrow input{width:62px;border:1px solid #334155;background:#1e293b;color:#fff;border-radius:5px;padding:5px 6px;font-size:12px;min-width:0}
#imgCtx .szrow button{display:inline-block;width:auto;padding:6px 10px;font-size:12px;background:#0f766e;text-align:center}
#imgCtx .szrow button.clr{background:#334155}
#imgCtx .szhint{color:#64748b;font-size:10px;padding:0 12px 6px;line-height:1.5}
/* ★ 빈 섹션 (여백 패턴 없음 — JSON 보관함 드롭 대상) */
.blk.blank-blk{background:transparent;position:relative}
.blank-hint{position:absolute;inset:4px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#b6c2d4;border:1px dashed #dbe3ee;border-radius:6px;pointer-events:none}
.blk.blank-blk.dropready{outline:2px dashed #2563eb;outline-offset:-2px;background:rgba(37,99,235,.05)}
body.shp-scanning .blank-hint{display:none !important}

/* ★ 좌측 JSON 보관함 날개 (몽구식) */
.wjlib{position:fixed;left:0;top:60px;bottom:210px;width:184px;z-index:1400;background:#fff;border:1px solid #cbd5e1;border-left:0;border-radius:0 10px 10px 0;display:flex;flex-direction:column;box-shadow:2px 4px 14px rgba(15,23,42,.12)} /* bottom 210 = 좌하단 도구 독(이미지/JSON/타이틀)과 안 겹치게 */
.wjlib .hd{background:#0f172a;color:#fff;font-size:12px;font-weight:700;padding:9px 10px;border-radius:0 9px 0 0;cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.wjlib .hd .fold{margin-left:auto;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:700;font-size:13px}
.wjlib .hd .fold::before{content:'<'}
.wjlib .hd:hover .fold{color:#fff}
.wjlib .list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.wjlib .list .empty{font-size:11px;color:#94a3b8;text-align:center;padding:16px 4px;line-height:1.7}
/* ★ 카테고리 첫 화면 (캔바식 아이콘 카드) */
.wjlib .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wjlib .catcard{border:1px solid #e2e8f0;border-radius:10px;background:#fff;padding:13px 4px 10px;text-align:center;cursor:pointer;position:relative}
.wjlib .catcard:hover{border-color:#4f46e5;background:#eef2ff}
.wjlib .catcard i{font-size:22px;color:#4f46e5;display:block;margin-bottom:5px}
.wjlib .catcard b{font-size:12px;color:#334155;display:block;line-height:1.3}
.wjlib .catcard .cnt{font-size:10px;color:#94a3b8}
.wjlib .catback{font-size:12px;color:#334155;font-weight:700;padding:8px 9px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;cursor:pointer;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.wjlib .catback:hover{border-color:#4f46e5;background:#eef2ff}
.wjlib .it{position:relative;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background:#f8fafc;cursor:grab}
.wjlib .it:hover{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.2)}
.wjlib .it img{width:100%;height:74px;object-fit:cover;object-position:top;display:block;background:#fff;pointer-events:none}
.wjlib .it .noimg{width:100%;height:74px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#94a3b8;background:#eef2f7}
.wjlib .it .nm{font-size:11px;color:#475569;padding:4px 6px;word-break:break-all;line-height:1.3}
.wjlib .it .del{position:absolute;right:3px;top:3px;width:17px;height:17px;border:0;background:#dc2626;color:#fff;border-radius:50%;font-size:11px;line-height:17px;text-align:center;cursor:pointer;display:none;padding:0}
.wjlib .it:hover .del{display:block}
.wjlib .ft{display:flex;gap:6px;padding:8px;border-top:1px solid #e2e8f0}
.wjlib .ft button{flex:1;border:1px solid #cbd5e1;background:#f8fafc;color:#334155;border-radius:6px;padding:8px 4px;font-size:12px;font-weight:700;cursor:pointer}
.wjlib .ft button.add{background:#2563eb;border-color:#2563eb;color:#fff}
.wjlib .ft button.delmode.on{background:#dc2626;border-color:#dc2626;color:#fff}
.wjlib.delmode .it .del{display:block}
/* 접힘 = 아이콘( > ) 탭만 */
/* ★ 접힘 = 좌측 고정 아이콘 버튼. 페이지(레이어) 토글과 동일 규격(34×56)으로 위아래 정렬 (2026-07-31) */
.wjlib.min{width:34px;top:60px !important;bottom:auto;border:0;background:transparent;box-shadow:none}
.wjlib.min .hd{width:34px;height:56px;padding:0;border-radius:0 10px 10px 0;justify-content:center;align-items:center;box-shadow:2px 2px 8px rgba(0,0,0,.25)}
.wjlib.min .hd .tt,.wjlib.min .list,.wjlib.min .ft,.wjlib.min .wjdb{display:none} /* ★ 접힘 시 위젯DB 샘플 영역도 숨김 (2026-08-02) */
.wjlib.min .hd .fold{margin:0;color:#fff;width:auto;height:auto}
.wjlib.min .hd .fold::before{content:'\eabf';font-family:'unicons-line';font-size:18px} /* uil-apps (디자인 라이브러리) */
body.shp-frame .wjlib,body.shp-locked .wjlib,body.shp-scanning .wjlib{display:none !important}

/* ★ INFO 미디어 박스 (유튜브/비메오/mp4/gif — 1~3개) */
.if-media{width:100%}
.if-m-item{min-width:0}
.if-m-ratio{position:relative;width:100%;padding-top:56.25%;background:#000}
.if-m-ratio iframe,.if-m-ratio video{position:absolute;left:0;top:0;width:100%;height:100%;border:0}
.if-m-gif{display:block;width:100%;height:auto}
.if-m-empty{display:flex;align-items:center;justify-content:center;text-align:center;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:8px;color:#94a3b8;font-size:12px;line-height:1.8;min-height:180px}
.if-media .if-m-tit{font-size:18px;font-weight:700;color:#222;margin-top:12px;line-height:1.5}
.if-media .if-m-desc{font-size:14px;color:#555;line-height:1.7;margin-top:6px}
/* 1개 — 왼쪽 영상 + 오른쪽 글 (기본 세로 가운데 · if-m-vtop = 위로 정렬) */
.if-m-left .if-m-item{display:flex;gap:24px;align-items:center}
.if-m-left.if-m-vtop .if-m-item{align-items:flex-start}
.if-m-left .if-m-embed{flex:0 0 55%;min-width:0}
.if-m-left .if-m-txt{flex:1;min-width:0}
.if-m-left .if-m-tit{margin-top:0}
/* 2~3개 그리드 (각 영상 아래 제목/내용) */
.if-media.if-mc2,.if-media.if-mc3{display:grid;grid-gap:20px}
.if-media.if-mc2{grid-template-columns:1fr 1fr}
.if-media.if-mc3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:640px){
  .if-media.if-mc2,.if-media.if-mc3{grid-template-columns:1fr}
  .if-m-left .if-m-item{flex-direction:column;align-items:stretch}
  .if-m-left .if-m-embed{flex:none}
}

/* 필터 모달 — 이미지 정렬 버튼 */
.flt-albtn{flex:1;border:1px solid #cbd5e1;background:#f8fafc;color:#475569;border-radius:6px;padding:6px 4px;font-size:12px;cursor:pointer}
.flt-albtn.on{background:#0f766e;border-color:#0f766e;color:#fff;font-weight:700}
/* 필터 모달 — 9방향 기준점 그리드 */
.flt-posbtn{width:26px;height:22px;border:1px solid #cbd5e1;background:#f8fafc;border-radius:4px;cursor:pointer;padding:0;position:relative}
.flt-posbtn::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:#94a3b8}
.flt-posbtn:hover{border-color:#0f766e}
.flt-posbtn.on{background:#0f766e;border-color:#0f766e}
.flt-posbtn.on::after{background:#fff}

/* ★ admin 도구 독 — 왼쪽 하단 고정 (하얀그누 날개식) */
.shp-dock{position:fixed;left:14px;bottom:14px;z-index:1500;display:flex;flex-direction:row;flex-wrap:wrap-reverse;gap:6px;max-width:calc(100vw - 360px)} /* ★ 가로 정렬 — 도구가 늘어도 옆으로 쌓여 디자인 라이브러리와 안 겹침 */
.shp-dock button{
  width:52px;height:52px;border:0;border-radius:10px;cursor:pointer;
  background:#0f172a;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 4px 12px rgba(15,23,42,.3);transition:background .15s, transform .1s;
}
.shp-dock button:hover{background:#6d28d9;transform:translateY(-2px)}
.shp-dock button i{font-size:19px;line-height:1}
.shp-dock button span{font-size:10px;line-height:1;letter-spacing:-0.5px}
/* ★ admin 전용 도구 = 보라 계열로 구분 (공용 도구는 검정) */
.shp-dock button.adm{background:#4f46e5;box-shadow:0 4px 12px rgba(79,70,229,.35)}
.shp-dock button.adm:hover{background:#3730a3}
/* ★ 컬러 버튼 (2026-08-13 상단→하단 이동) — AI편집 우측, 같은 작은 아이콘. 팔레트 그라데이션 */
.shp-dock button.dock-color{background:linear-gradient(135deg,#f0473e,#7c3aed)}
.shp-dock button.dock-color:hover{background:linear-gradient(135deg,#d93b32,#6d28d9)}
/* ★ 이미지함 줄 (2026-08-13 상단→하단 이동) — 도구 독 바로 위, 가로 긴 버튼 */
.shp-dock-img{bottom:74px} /* 도구 독(bottom14 + 높이52 + gap8) 위 */
.shp-dock-img button.wide{width:auto;min-width:112px;flex-direction:row;gap:6px;padding:0 14px;background:#334155}
.shp-dock-img button.wide:hover{background:#6d28d9}
.shp-dock-img button.wide span{font-size:12px;letter-spacing:-0.3px}
@media (max-width:900px){ .shp-dock{bottom:225px} .shp-dock-img{bottom:285px} }

@media (max-width:900px){
  .bld-stage{padding:72px 10px 240px}
  .bld-side{top:auto;bottom:0;left:0;right:0;width:100%;height:210px;border-left:0;border-top:1px solid #cbd5e1}
}

/* ── ★ 이미지함 드래그 다중선택 (2026-07-19) ── */
.imgpick .grid{user-select:none}
.imgpick .grid .it.msel{outline:3px solid #4f46e5;outline-offset:-2px;box-shadow:0 0 0 2px rgba(79,70,229,.35)}
.imgpick .grid .it.msel::after{content:'\2713';position:absolute;left:6px;top:6px;width:22px;height:22px;background:#4f46e5;color:#fff;border-radius:50%;font-size:13px;line-height:22px;text-align:center;z-index:3}
#mselRect{position:fixed;border:1.5px dashed #4f46e5;background:rgba(79,70,229,.12);z-index:2400;display:none;pointer-events:none}
/* ★ 좌상단 선택 체크박스 (상시 표시 — 클릭 토글, Shift+클릭 범위선택) */
.imgpick .grid .it .mselchk{position:absolute;left:6px;top:6px;width:24px;height:24px;background:rgba(255,255,255,.92);border:2px solid #94a3b8;border-radius:6px;z-index:4;cursor:pointer;text-align:center;line-height:20px;font-size:14px;color:#fff}
.imgpick .grid .it .mselchk:hover{border-color:#4f46e5;box-shadow:0 0 0 2px rgba(79,70,229,.25)}
.imgpick .grid .it.msel .mselchk{background:#4f46e5;border-color:#4f46e5}
.imgpick .grid .it.msel .mselchk::before{content:'\2713';font-weight:700}
.imgpick .grid .it .mselchk~.curtag{left:36px} /* 체크박스 있으면 '사용 중' 태그 옆으로 */

/* ══════════════════════════════════════════════════════════════════
   ★ 인쇄 저장 (2026-07-26) — [인쇄 저장] 버튼 → window.print() → "PDF로 저장".
   브라우저가 직접 렌더하므로 CSS 재해석이 전혀 없다 = 화면 레이아웃(위젯 2단) 그대로 출력.
   모바일 크롬도 "인쇄 → PDF로 저장"이 되고, snapDOM 처럼 위젯이 1단으로 찌그러지지 않는다.
   ══════════════════════════════════════════════════════════════════ */
@media print {
  /* 인쇄 영역 = 캔버스만. 나머지(툴바/좌우패널/독/오버레이/편집표시)는 전부 숨김 */
  body.shp-printing .bld-top,
  body.shp-printing .bld-side,
  body.shp-printing .shp-dock,
  body.shp-printing #bldTopToggle,
  body.shp-printing #bldTopDim,
  body.shp-printing .shp-ov,
  body.shp-printing #busy,
  body.shp-printing #cropBar,
  body.shp-printing .wjlib,
  body.shp-printing .xk-badge,
  body.shp-printing .blk-ins,
  body.shp-printing .tools,
  body.shp-printing .wg_item_ctrl,
  body.shp-printing .blank-hint,
  body.shp-printing .blank-hz,
  body.shp-printing .hd-rot,
  body.shp-printing .hd-size,
  body.shp-printing #emptyGuide { display:none !important; }

  /* 여백 빗금·호버 테두리 제거 (산출물에서 편집 흔적 제거) */
  body.shp-printing .blk.space-blk { background:none !important; background-image:none !important; border:none !important; }
  body.shp-printing .blk, body.shp-printing .blk-layer { outline:none !important; }

  /* 스테이지 = 여백 0, 스크롤/그림자 제거 */
  body.shp-printing .bld-stage { padding:0 !important; margin:0 !important; background:#fff !important; overflow:visible !important; }

  /* ★ 캔버스 = 설계 폭(예 860px) 그대로 고정 = 위젯 2단 유지. zoom 은 100% 강제(축소본 인쇄 방지). */
  body.shp-printing #canvas {
    zoom:1 !important;
    transform:none !important;
    box-shadow:none !important;
    margin:0 auto !important;
    /* width 는 JS(exportPrint)가 인라인으로 설계폭 px 를 박아 확실히 고정 */
  }

  /* 인쇄 페이지 여백 최소화 */
  @page { margin:6mm; }
  body.shp-printing { background:#fff !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ★ 모바일(820px 미만) 열람 전용 (2026-07-26) — 편집·저장·전송 전부 차단, 미리보기(확인)만.
   태블릿(≥820px)부터 도구 사용 가능. body.shp-mobile-view 는 JS(applyMobileViewGate)가 폭 감지로 토글.
   ══════════════════════════════════════════════════════════════════ */
#mobileViewNotice{display:none} /* 기본 숨김 — 모바일에서만 JS+아래 규칙으로 표시 */
body.shp-mobile-view #mobileViewNotice{
  display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;top:0;z-index:1200;
  background:#0f172a;color:#fff;padding:12px 16px;box-shadow:0 2px 10px rgba(0,0,0,.25);
}
body.shp-mobile-view #mobileViewNotice i{font-size:26px;color:#60a5fa;flex-shrink:0}
body.shp-mobile-view #mobileViewNotice .mvn-txt{font-size:12.5px;line-height:1.5}
body.shp-mobile-view #mobileViewNotice .mvn-txt b{font-size:14px}

body.shp-mobile-view{
  /* 편집/저장 도구 전부 숨김 — 상단바(전체)·⚙토글·딤·좌측독·우측설정패널·보관함 */
}
body.shp-mobile-view .bld-top,
body.shp-mobile-view #bldTopToggle,
body.shp-mobile-view #bldTopDim,
body.shp-mobile-view .bld-side,
body.shp-mobile-view .shp-dock,
body.shp-mobile-view #vmodBar,
body.shp-mobile-view .wjlib{ display:none !important; }

/* 편집 표시(엑셀뱃지·여백빗금·반복버튼·핸들·호버테두리)도 숨겨 깔끔한 미리보기로 */
body.shp-mobile-view .xk-badge,
body.shp-mobile-view .blk-ins,
body.shp-mobile-view .tools,
body.shp-mobile-view .wg_item_ctrl,
body.shp-mobile-view .blank-hint,
body.shp-mobile-view .blank-hz,
body.shp-mobile-view .hd-rot,
body.shp-mobile-view .hd-size,
body.shp-mobile-view #emptyGuide{ display:none !important; }
body.shp-mobile-view .blk.space-blk{ background:none !important; }
body.shp-mobile-view .blk:hover,body.shp-mobile-view .blk-layer:hover{ outline:none !important; }
/* 인라인 편집 클릭 비활성 (실수로 수정 안 되게) */
body.shp-mobile-view #canvas .wg_edit_txt,
body.shp-mobile-view #canvas .wg_edit_img,
body.shp-mobile-view #canvas .wg_edit_title{ pointer-events:none !important; cursor:default !important; }

/* 스테이지 = 상단 배너 높이만큼 여백 + 하단 목록버튼 높이만큼 여백, 캔버스는 그대로 열람 */
body.shp-mobile-view .bld-stage{ padding:76px 8px 82px !important; }

/* ★ 모바일 열람 전용 하단 [목록 보기] 버튼 — 기본 숨김, 모바일에서만 하단 고정 표시 */
#mobileListBtn{ display:none; }
body.shp-mobile-view #mobileListBtn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;
  height:52px;border-radius:12px;background:#2563eb;color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;box-shadow:0 4px 16px rgba(37,99,235,.4);
}
body.shp-mobile-view #mobileListBtn:active{ background:#1d4ed8; }
body.shp-mobile-view #mobileListBtn i{ font-size:20px; }

/* ★ 랜딩: 출력모드 select + 디바이스 미리보기 탭 (2026-07-29) */
#outMode{padding:5px 8px;border-radius:6px;border:1px solid #334155;background:#1e293b;color:#e2e8f0;font-size:12px}
.dev-tabs .dev-tab{width:30px;height:28px;border-radius:6px;border:0;background:#1e293b;color:#94a3b8;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.dev-tabs .dev-tab.on{background:#4f46e5;color:#fff}
.dev-tabs .dev-tab i{font-size:15px}
/* 미리보기 프레임 — 헤더+캔버스+푸터 래퍼(.lndv-content-edit)에 프레임 적용 → 헤더/푸터도 폰 안에 (2026-07-29) */
.bld-stage.devp-tablet{background:#eef2f7}
.bld-stage.devp-tablet .lndv-content-edit{outline:12px solid #cbd5e1;outline-offset:0;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.12);overflow:hidden}
.bld-stage.devp-pc{background:#e2e8f0}
.bld-stage.devp-pc .lndv-content-edit{outline:10px solid #1f2937;outline-offset:0;border-radius:22px;box-shadow:0 12px 50px rgba(0,0,0,.25);overflow:hidden}

/* ★ PC 미리보기 = 모바일 전용 출력 안내 (2026-07-29)
   실제 UNON QR 목업(좌 QR카드+우 폰)은 발행 view.php 단계에서 완성.
   빌더에선 편집 UI와 충돌하지 않게 폰 프레임 + 안내 배지만. */
.bld-stage.devp-qrwrap{background:#eef1f6}
.bld-stage.devp-qrwrap .lndv-content-edit{
  outline:11px solid #111827;border-radius:34px;box-shadow:0 16px 60px rgba(0,0,0,.28);overflow:hidden;
}
/* 상단 안내 배지 — 무대 상단에 고정, 캔버스와 겹치지 않게 흐름 밖 */
#devpNotice{
  display:none;position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:30;
  font-size:12px;color:#475569;background:#fff;padding:5px 14px;border-radius:20px;
  border:1px solid #dde3ec;box-shadow:0 2px 10px rgba(0,0,0,.06);white-space:nowrap;
}
body.lnd-qrwrap #devpNotice{display:block}

/* ★★ 공개 발행 뷰(view.php) 레이아웃 — 편집 UI 전부 숨김, 실제 랜딩 출력 (2026-07-29) */
body.lnd-view{background:#fff}
/* ★ (2026-08-13) 발행 = 설계폭 그리고 화면폭 scale 방식 → scale이 레이아웃폭을 안 바꿔 가로 넘침(스크롤바/빨간선) 생김. 가로 스크롤 차단. */
html:has(body.lnd-view), body.lnd-view{ overflow-x:hidden !important; max-width:100%; }
body.lnd-view #canvas{ overflow-x:hidden }
/* ★ (2026-08-18) 발행 세로 스크롤바.
   기본(모바일·터치) = 폭 0 완전 숨김 (모바일은 원래 오버레이라 무영향, 폰틀 우측 흰여백 방지).
   스크롤은 휠/드래그/터치로 정상. 스크롤러가 html/body 어느쪽이든 커버. */
html:has(body.lnd-view), body.lnd-view{ scrollbar-width:none; -ms-overflow-style:none }
html:has(body.lnd-view)::-webkit-scrollbar,
body.lnd-view::-webkit-scrollbar{ width:0 !important; height:0 !important; background:transparent }
/* ★ PC(마우스 환경) + 진짜 반응형 넓은 화면(shp-mobile-view 아님) = 얇은 커스텀 스크롤바 1개.
   ★ 스크롤바 2중 원인: 문서(html/body) + .bld-stage(overflow-y:auto, 1054줄) 둘 다 스크롤 → 바 2개.
     → 진짜 PC 반응형에선 .bld-stage 스크롤 해제(overflow:visible) → 문서 하나만 스크롤. 그 문서에만 커스텀 바.
   폰틀 목업(shp-mobile-view)은 위 기본 숨김 유지(우측 흰여백 방지). */
/* ★★ (2026-08-18) 스크롤바 2중 진짜 원인 = html 과 body 가 둘 다 스크롤러 (그누보드 basics.css 가 html,body{height:100%}
   → body 가 별도 스크롤 컨텍스트). .bld-stage 해제해도 html+body 2개 남음.
   → 발행에선 body 스크롤 죽이고(overflow:hidden + height:auto) html 만 유일 스크롤러로. 마우스/터치 무관 공통. */
html:has(body.lnd-view){ height:auto !important; min-height:100%; overflow-y:auto }
body.lnd-view{ height:auto !important; min-height:0 !important; overflow-y:visible !important }
@media (hover:hover) and (pointer:fine){
  /* 진짜 PC 반응형 = 무대 스크롤 해제 → 문서(스크롤러) 하나로 통일 (바 2개 방지) */
  body.lnd-view:not(.shp-mobile-view) .bld-stage{ overflow:visible !important; min-height:0 !important; height:auto !important }
  /* 문서 스크롤바만 얇은 커스텀 (body/html 중 실제 스크롤러) */
  html:has(body.lnd-view:not(.shp-mobile-view)){ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.28) transparent }
  body.lnd-view:not(.shp-mobile-view){ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.28) transparent }
  html:has(body.lnd-view:not(.shp-mobile-view))::-webkit-scrollbar,
  body.lnd-view:not(.shp-mobile-view)::-webkit-scrollbar{ width:8px !important; height:8px !important; background:transparent }
  html:has(body.lnd-view:not(.shp-mobile-view))::-webkit-scrollbar-thumb,
  body.lnd-view:not(.shp-mobile-view)::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.22); border-radius:8px; border:2px solid transparent; background-clip:padding-box }
  html:has(body.lnd-view:not(.shp-mobile-view))::-webkit-scrollbar-thumb:hover,
  body.lnd-view:not(.shp-mobile-view)::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.4); background-clip:padding-box }
  html:has(body.lnd-view:not(.shp-mobile-view))::-webkit-scrollbar-track,
  body.lnd-view:not(.shp-mobile-view)::-webkit-scrollbar-track{ background:transparent }
}
/* 편집 요소 전부 숨김 */
body.lnd-view .bld-top,
body.lnd-view #bldTop,
body.lnd-view #bldTopToggle,
body.lnd-view #bldTopDim,
body.lnd-view .bld-side,
body.lnd-view .shp-dock,
body.lnd-view .wjlib,
body.lnd-view #mobileViewNotice,
body.lnd-view #devpNotice,
body.lnd-view .blk-ins,
body.lnd-view .blk-tools,
body.lnd-view .blank-hz,
body.lnd-view .admin_div{ display:none !important }

/* ★ 편집 잔재 완전 제거 — 인라인 힌트/hover 오버레이/빗금/커서 (2026-07-29) */
body.lnd-view #canvas .wg_edit_txt::before,
body.lnd-view #canvas .wg_edit_title::before,
body.lnd-view #canvas [class*="edit"]::before,
body.lnd-view .blk[data-i]::before,
body.lnd-view .hd-desc::before,
body.lnd-view .if-tbl::before{ content:none !important; display:none !important }
body.lnd-view #canvas .wg_edit_txt:hover,
body.lnd-view #canvas .wg_edit_title:hover,
body.lnd-view #canvas .wg_edit_img:hover,
body.lnd-view #canvas [class*="edit"]:hover{ background:none !important; box-shadow:none !important; outline:none !important; cursor:default !important }
body.lnd-view #canvas .wg_edit_txt,
body.lnd-view #canvas .wg_edit_title,
body.lnd-view #canvas [class*="edit"]{ cursor:default !important }
body.lnd-view .blk:hover,
body.lnd-view .blk.sel,
body.lnd-view .blk-layer:hover{ outline:none !important }
/* ★ background:inherit 제거 (2026-08-13) — 축약이라 섹션 배경이미지(background-image)까지 날려서
   발행/실기기에서 마우스 오버 시 배경 사라지던 버그. 편집 hover는 outline만 쓰므로 배경 건드릴 필요 없음. */
/* 여백/빈 섹션 빗금 제거 (편집 표시라 발행엔 투명) */
body.lnd-view .blk.space-blk,
body.lnd-view .blk.blank-blk{ background:none !important; background-image:none !important; border:none !important; outline:none !important; box-shadow:none !important }
/* ★ 발행뷰 = 미디어/이미지 빈 힌트 완전 숨김 → 빈 영역은 여백만 (2026-07-31) */
body.lnd-view .if-m-empty,
body.lnd-view .wg_img_empty,
body.lnd-view .lnd-vsw-empty,
body.lnd-view .board-area-ph{ display:none !important }
/* 편집용 점선/툴팁 테두리 제거 (if-ed = Shift+클릭 대상) */
body.lnd-view .if-ed,
body.lnd-view .if-m-embed{ outline:none !important; border:none !important; cursor:default !important }
body.lnd-view .if-ed[title],
body.lnd-view [title*="Shift+클릭"]{ pointer-events:auto }
/* ★ 발행 화면 인라인 편집 표시 완전 제거 (2026-08-02) — hover 주황 박스 + "Shift+클릭" 말풍선(::before)까지.
   (기존엔 outline/border만 지워서 hover 배경·inset 쉐도·툴팁이 발행에서도 보이던 실버그) */
body.lnd-view .if-ed{ cursor:inherit !important }
body.lnd-view .if-ed:hover{ background:transparent !important; box-shadow:none !important }
body.lnd-view .if-ed::before{ display:none !important; content:none !important }

/* ★ 게시판 영역 블록 (board_area) (2026-07-31) */
.board-area-blk{ width:100%; }
/* 편집 = 플레이스홀더 박스 */
.board-area-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:220px; margin:10px 0; padding:30px 20px;
  border:2px dashed #c7d2fe; border-radius:14px; background:#f5f8ff; color:#64748b; text-align:center;
}
.board-area-ph i{ font-size:34px; color:#6366f1 }
.board-area-ph b{ font-size:16px; color:#334155 }
.board-area-ph span{ font-size:13px; color:#94a3b8 }
/* 발행 = 실제 게시판 iframe */
.board-area-frame{ display:block; width:100%; border:0; min-height:300px; background:#fff; }

/* 무대 = 편집 여백 제거, 발행 배경 */
body.lnd-view .bld-stage{ padding:0 !important; margin:0 !important; display:block !important; background:transparent !important; min-height:100vh }
/* ★ 콘텐츠 래퍼(.lndv-content) = 헤더+캔버스+푸터 한 덩어리. 목업/정렬은 이 래퍼 기준. (2026-07-29) */
body.lnd-view .lndv-content{ margin:0 auto !important; width:100%; box-sizing:border-box }
body.lnd-view #canvas{ margin:0 auto !important; outline:none !important; border-radius:0 !important; box-shadow:none !important }
/* 헤더/푸터는 캔버스와 같은 폭 흐름 안(래퍼)에서 100% */
body.lnd-view .lndv-hf{ width:100%; margin:0 auto }
/* 반응형(PC 포함) 모드 — 본문이 화면 폭까지 확장 */
body.lnd-view.lndv-expand .lndv-content{ max-width:1200px }

/* ★ PC + 모바일전용 출력 = QR 목업 (좌 QR 카드 + 우 폰 목업, 폰 세로 100%) */
body.lnd-view.lndv-qrwrap{ background:#e9edf3 }
body.lnd-view.lndv-qrwrap .bld-stage{
  display:flex !important; align-items:center; justify-content:center; gap:70px;
  padding:40px 24px !important; min-height:100vh; box-sizing:border-box;
}
/* 폰 목업 = 래퍼(헤더+본문+푸터)를 세로 화면 꽉(min-height 90vh) 카드로. 스크롤은 폰 내부. */
body.lnd-view.lndv-qrwrap .lndv-content{
  outline:none !important; border:1px solid #e2e8f0 !important; border-radius:28px !important;
  box-shadow:0 20px 70px rgba(0,0,0,.14) !important; margin:0 !important;
  align-self:center; max-height:92vh; overflow-y:auto; overflow-x:hidden;
  background:#fff; width:auto;
  /* ★ (2026-08-18) 내부 스크롤바가 둥근 모서리 밖으로 삐져나와 빨간선/우측공백처럼 보이던 문제 —
     스크롤바를 오버레이(콘텐츠 폭 차지 안 함)로 얇게. 라운드 클리핑 위해 overflow-x 도 hidden. */
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.25) transparent;
}
body.lnd-view.lndv-qrwrap .lndv-content::-webkit-scrollbar{ width:6px }
body.lnd-view.lndv-qrwrap .lndv-content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.22); border-radius:6px }
body.lnd-view.lndv-qrwrap .lndv-content::-webkit-scrollbar-track{ background:transparent }
body.lnd-view.lndv-qrwrap .lndv-content #canvas{
  border:0 !important; border-radius:28px 28px 0 0 !important; box-shadow:none !important;
}
/* 좌측 QR 카드 */
#lndQrWrap{ order:-1; align-self:center; flex:0 0 auto }
#lndQrWrap .lqw-card{
  width:260px;background:#fff;border:1px solid #e6e9f0;border-radius:22px;
  padding:34px 26px;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.08);
}
#lndQrWrap .lqw-lead{font-size:16px;font-weight:700;color:#1f2937;margin-bottom:22px;line-height:1.55}
#lndQrWrap .lqw-qr img{width:190px;height:190px;display:block;margin:0 auto;border-radius:10px}
#lndQrWrap .lqw-sub{font-size:13px;color:#94a3b8;margin-top:20px;line-height:1.6}
/* 모바일/태블릿 실접속 = 목업 없이 본문만 */
body.lnd-view.lndv-mobile #lndQrWrap,
body.lnd-view.lndv-tablet #lndQrWrap{ display:none }

/* ★ 비율 확대(scale) 시 가로 스크롤 방지 + 무대 정렬 (2026-07-29) */
.bld-stage{ overflow-x:hidden }
body.lnd-view .bld-stage{ overflow-x:hidden; overflow-y:auto }
/* ★ (2026-08-18) 껍데기 iframe(shp-frame / shp-mobile-view) 발행 = 폰틀(mockup_frame .mf-phone) 안 iframe.
   .bld-stage 가 overflow-y:auto + 좌우 padding(8px) 이라 [무대 스크롤 + iframe문서 스크롤]로 회색 바 2개가 겹치고
   우측에 흰 패딩이 보였다. 껍데기 발행에선 무대 스크롤 해제(iframe 문서=body 만 스크롤) + 좌우 패딩 0.
   ※ 상단 패딩(고정 헤드 자리)은 유지. shp-mobile-view 규칙(875줄)까지 이기도록 함께 지정. */
body.lnd-view.shp-frame .bld-stage,
body.lnd-view.shp-mobile-view .bld-stage{
  overflow:visible !important; min-height:0 !important; height:auto !important;
  padding-left:0 !important; padding-right:0 !important;
}
/* scale은 top center 기준이라 래퍼가 무대 중앙에 오도록 */
body.lnd-view.lndv-expand .bld-stage{ display:block !important; text-align:center; padding:0 !important }
/* ★ text-align:center 는 inline-block 중앙 배치용 — 안의 콘텐츠로 상속되면 발행 화면 전체가 중앙정렬돼 보임(실버그) → 내부에서 리셋 (2026-08-02) */
body.lnd-view.lndv-expand .lndv-content{ display:inline-block; transform-origin:top center; text-align:left }
/* 반응형/모바일 실접속 — 래퍼/캔버스가 scale로 커지므로 max-width 제한 해제 */
body.lnd-view.lndv-expand .lndv-content,
body.lnd-view.lndv-mobile .lndv-content{ max-width:none !important }
/* ★ 가로전체 100% 반응형 = 래퍼·캔버스·헤더·푸터 전부 화면폭 100% (max-width·inline-block 해제) (2026-07-29) */
body.lnd-view.lndv-full100 .lndv-content{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; transform:none !important }
/* ★ 100% 반응형(full100) = 내부 스크롤 박스 해제 — .bld-stage 가 overflow-y:auto + min-height:100vh 로
   "테두리 안 스크롤"이 되던 것 제거. 콘텐츠는 자연히 늘어나고 페이지(body)가 스크롤. (2026-07-29) */
body.lnd-view.lndv-full100 .bld-stage{ overflow:visible !important; min-height:0 !important; height:auto !important; display:block !important }
body.lnd-view.lndv-full100 .lndv-content{ min-height:0 !important; max-height:none !important; overflow:visible !important; height:auto !important }
body.lnd-view.lndv-full100 #canvas{ min-height:0 !important; max-height:none !important; overflow:visible !important }
body.lnd-view.lndv-full100 #canvas{ width:100% !important; max-width:100% !important }
body.lnd-view.lndv-full100 .lndv-hf{ width:100% !important; max-width:100% !important }
body.lnd-view.lndv-expand #canvas,
body.lnd-view.lndv-mobile #canvas{ max-width:none !important }

/* ★ 편집 화면 헤더/푸터 미리보기 래퍼 (2026-07-29) — 캔버스 폭에 맞춰 세로 정렬 (헤더 위 / 캔버스 / 푸터 아래) */
.lndv-content-edit{ display:flex; flex-direction:column; align-items:stretch; max-width:100%; }
/* ★ 편집 미리보기 프레임 — 내부 콘텐츠가 폭을 넘겨도 우측 가로 스크롤/빈공간 안 생기게 잘라냄 (2026-07-30) */
body:not(.lnd-view) .lndv-content-edit{ overflow-x:hidden; }
.lndv-content-edit > #canvas{ width:100%; max-width:100%; }
.lndv-content-edit .lndv-hf{ width:100%; box-sizing:border-box; }
.lndv-content-edit .lndv-hf:empty{ display:none; }
/* 편집 미리보기 헤더/푸터는 편집 클릭 대상 아님 (오해 방지) */
.lndv-content-edit .lndv-hf *{ cursor:default; }
/* 편집 미리보기에선 드로어/딤(fixed)이 화면을 덮지 않게 숨김 — 실제 열림은 발행 화면에서만 */
body:not(.lnd-view) #lndHdPrev .lndh-dim,
body:not(.lnd-view) #lndHdPrev .lndh-drawer{ display:none !important; }
body:not(.lnd-view) #lndHdPrev .lndh-burger{ cursor:default; }

/* ★★ 발행 화면 가로 스크롤 절대 금지 — 세로는 자유, 가로만 히든 (2026-07-29) */
html, body{ max-width:100%; }
body.lnd-view{ overflow-x:hidden; }
body.lnd-view .bld-stage,
body.lnd-view .lndv-content,
body.lnd-view #canvas{ max-width:100vw; overflow-x:hidden; }
/* 발행 뷰 안 위젯이 넘쳐도 화면 밖으로 못 나가게 */
body.lnd-view #canvas img,
body.lnd-view #canvas video{ max-width:100%; }

/* ★ view 이중방어 — 편집용 UI 전부 숨김 (엑셀키 뱃지·회전핸들·삽입바·툴바·순서버튼 등) (2026-07-29) */
body.lnd-view .wg_item_ctrl,
body.lnd-view .tools,
body.lnd-view .widbadge,
body.lnd-view .wg_wid_badge,
body.lnd-view .xk-badge,
body.lnd-view .hd-rot,
body.lnd-view .blk-ins,
body.lnd-view .blk-layer .hd-rot,
body.lnd-view .shp-sticker .hd-rot,
body.lnd-view .hd-size,
body.lnd-view .blank-hint,
body.lnd-view .wg_img_empty,
body.lnd-view .wg_detail_btn{ display:none !important }

/* ★ 미리보기 기기 select + 배율 입력 (2026-07-29) */
#devModel{max-width:150px;padding:4px 6px;border-radius:6px;border:1px solid #334155;background:#1e293b;color:#e2e8f0}
#devScalePx{border:1px solid #334155;background:#1e293b;color:#e2e8f0;border-radius:6px;padding:4px 6px}

/* ★ inner 폭 select/입력 (2026-07-29) */
#innerSel{max-width:120px;padding:4px 6px;border-radius:6px;border:1px solid #334155;background:#1e293b;color:#e2e8f0}
#innerPx{border:1px solid #334155;background:#1e293b;color:#e2e8f0;border-radius:6px;padding:4px 6px}

/* ★★ 왼쪽 서브페이지 패널 (2026-07-29) — 메인/서브 전환·추가·복사·이름수정·JSON·드래그 순서.
   ★ 디자인 라이브러리(.wjlib z1400)보다 z 높게, 토글버튼은 겹치지 않게 아래로. 폭 넓게(300). */
#lndPageDock{position:fixed;left:0;top:52px;bottom:0;width:300px;background:#0f172a;color:#e2e8f0;z-index:1600;
  border-right:1px solid #1e293b;transition:transform .18s;font-family:'Malgun Gothic',sans-serif;box-shadow:2px 0 12px rgba(0,0,0,.15)}
#lndPageDock.collapsed{transform:translateX(-300px)}
/* ★ 페이지(레이어) 토글 — 라이브러리 버튼(top:60,높이56) 바로 아래로 위아래 정렬. 동일 규격 34×56 (2026-07-31) */
#lndPageToggle{position:absolute;right:-34px;top:70px;width:34px;height:56px;border:0;border-radius:0 10px 10px 0;
  background:#2563eb;color:#fff;cursor:pointer;font-size:18px;font-weight:700;box-shadow:2px 2px 8px rgba(0,0,0,.25);z-index:1;
  display:flex;align-items:center;justify-content:center}
#lndPageToggle:hover{background:#1d4ed8}
#lndPageDock .lpd-inner{padding:14px 12px;height:100%;overflow-y:auto;box-sizing:border-box}
#lndPageDock .lpd-head{font-size:13px;font-weight:700;color:#cbd5e1;margin-bottom:12px;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
#lndPageDock .lpd-head small{font-size:10.5px;color:#64748b;font-weight:400}
#lndPageDock .lpd-item{position:relative;border-radius:9px;margin-bottom:6px;background:#1e293b;border:1px solid #263244}
#lndPageDock .lpd-item.on{background:#1d3a6e;border-color:#3b82f6}
#lndPageDock .lpd-item.dragging{opacity:.5}
#lndPageDock .lpd-row{display:flex;align-items:center;gap:2px}
#lndPageDock .lpd-grip{width:22px;display:flex;align-items:center;justify-content:center;color:#64748b;cursor:grab;flex-shrink:0}
#lndPageDock .lpd-grip.static{cursor:default}
#lndPageDock .lpd-grip:active{cursor:grabbing}
#lndPageDock .lpd-link{flex:1;display:flex;align-items:center;gap:7px;padding:9px 8px 9px 2px;color:#e2e8f0;
  text-decoration:none;font-size:13px;min-width:0;cursor:pointer}
#lndPageDock .lpd-item.on .lpd-link{color:#fff;font-weight:700}
#lndPageDock .lpd-link>i{font-size:15px;flex-shrink:0;opacity:.85}
#lndPageDock .lpd-t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lndPageDock .lpd-badge{font-size:10px;background:#334155;color:#cbd5e1;border-radius:4px;padding:1px 5px;font-style:normal;flex-shrink:0}
#lndPageDock .lpd-badge.bo{background:#0e7490;color:#fff}
#lndPageDock .lpd-item.on .lpd-badge{background:rgba(255,255,255,.25);color:#fff}
/* 아이템 액션 줄 (이름수정·JSON복사·복사·삭제) */
/* 왼쪽 아이콘 액션 (이름·복사·삭제) */
#lndPageDock .lpd-acts{display:flex;gap:4px;padding:0 8px 8px 24px}
#lndPageDock .lpd-acts button{width:26px;height:24px;border:0;border-radius:5px;background:#0f172a;color:#94a3b8;
  cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
#lndPageDock .lpd-acts button:hover{background:#334155;color:#fff}
#lndPageDock .lpd-acts button.del:hover{background:#dc2626;color:#fff}
/* 우측 absolute: JSON 복사/붙여넣기 (j-c / j-v) */
#lndPageDock .lpd-json{position:absolute;right:7px;bottom:8px;display:flex;gap:3px}
#lndPageDock .lpd-json button{height:22px;padding:0 8px;border:0;border-radius:5px;background:#0e7490;color:#fff;
  cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.3px}
#lndPageDock .lpd-json button:hover{background:#0891b2}
#lndPageDock .lpd-add{margin-top:14px;display:flex;flex-direction:column;gap:6px}
#lndPageDock .lpd-add button{border:1px dashed #475569;background:#1e293b;color:#cbd5e1;border-radius:8px;
  padding:9px 10px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px;justify-content:center}
#lndPageDock .lpd-add button:hover{border-color:#60a5fa;color:#fff;background:#233045}
#lndPageDock .lpd-add button.paste{border-style:solid;border-color:#334155;color:#94a3b8}
/* 발행 뷰에서는 숨김 */
body.lnd-view #lndPageDock{display:none !important}

/* ★ 공용 헤더/푸터 버튼 (서브 패널 하단) */
#lndPageDock .lpd-hf{margin-top:16px;padding-top:14px;border-top:1px solid #263244;display:flex;flex-direction:column;gap:6px}
#lndPageDock .lpd-hf-title{font-size:12px;font-weight:700;color:#cbd5e1;margin-bottom:4px}
#lndPageDock .lpd-hf-title small{font-size:10px;color:#64748b;font-weight:400}
#lndPageDock .lpd-hf-btn{border:1px solid #334155;background:#1e293b;color:#e2e8f0;border-radius:8px;
  padding:10px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:7px;justify-content:center}
#lndPageDock .lpd-hf-btn:hover{border-color:#60a5fa;background:#233045;color:#fff}
/* ★ 헤더/푸터 스킨 선택 모달 */
.lnd-hf-ov{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:3200;align-items:center;justify-content:center}
.lnd-hf-modal{width:min(94vw,560px);max-height:88vh;background:#fff;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.lnd-hf-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#0f172a;color:#fff}
.lnd-hf-head b{font-size:15px;flex:1}
.lnd-hf-headbtns{display:flex;gap:6px;align-items:center}
.lnd-hf-headbtns button{border:0;background:#1e293b;color:#cbd5e1;border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.lnd-hf-headbtns button:hover{background:#334155;color:#fff}
.lnd-hf-headbtns button.x{background:transparent;font-size:20px;padding:0 6px;color:#94a3b8}
.lnd-hf-body{padding:16px;overflow-y:auto}
.lnd-hf-sub{font-size:13px;color:#64748b;margin-bottom:12px;line-height:1.6}
.lnd-hf-skins{display:flex;flex-direction:column;gap:8px}
.lnd-hf-skin{border:1.5px solid #e2e8f0;border-radius:10px;padding:13px 14px;cursor:pointer;background:#fff}
.lnd-hf-skin:hover{border-color:#93c5fd;background:#f8fafc}
.lnd-hf-skin.on{border-color:#2563eb;background:#eff6ff}
.lnd-hf-skin b{display:block;font-size:14px;color:#1e293b;margin-bottom:3px}
.lnd-hf-skin span{font-size:12px;color:#64748b}
/* ★ 베이직 스킨1 세부 설정 폼 (2026-07-29) */
.lnd-hf-form{margin-top:14px}
.lnd-hf-noform{font-size:12.5px;color:#94a3b8;background:#f8fafc;border-radius:8px;padding:12px;text-align:center}
.hf-sec{border-top:1px solid #eef2f7;padding:12px 0}
.hf-sec:first-child{border-top:0;padding-top:2px}
.hf-lb{font-size:12.5px;font-weight:700;color:#475569;margin-bottom:8px}
.hf-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:6px}
.hf-row input[type=text],.hf-row textarea,.lnd-hf-form textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit}
.hf-inl{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#475569}
.hf-inl input[type=number]{border:1px solid #cbd5e1;border-radius:7px;padding:6px 7px;font-size:13px;width:60px}
.hf-inl input[type=color]{width:34px;height:30px;border:1px solid #cbd5e1;border-radius:7px;padding:2px;background:#fff;cursor:pointer}
.hf-inl select{border:1px solid #cbd5e1;border-radius:7px;padding:6px 8px;font-size:13px}
.hf-radios{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.hf-radio{font-size:13px;color:#334155;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.hf-seg{display:inline-flex;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden}
.hf-seg button{border:0;background:#fff;color:#64748b;padding:6px 12px;font-size:13px;cursor:pointer;border-left:1px solid #e2e8f0}
.hf-seg button:first-child{border-left:0}
.hf-seg button.on{background:#2563eb;color:#fff;font-weight:700}
.hf-note{font-size:11.5px;color:#94a3b8;margin-top:7px;line-height:1.5}
.hf-chk{font-size:13px;color:#334155;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hf-sns{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.hf-snsrow{display:flex;align-items:center;gap:8px}
.hf-snsrow span{flex:0 0 74px;font-size:12px;color:#64748b}
.hf-snsrow input{flex:1;border:1px solid #cbd5e1;border-radius:7px;padding:6px 9px;font-size:12.5px}
.hf-drop{border:2px dashed #cbd5e1;border-radius:10px;padding:16px;text-align:center;font-size:12.5px;color:#64748b;background:#f8fafc;line-height:1.6;outline:none}
.hf-drop.over{border-color:#2563eb;background:#eff6ff;color:#2563eb}
.hf-fbtn{color:#2563eb;text-decoration:underline;cursor:pointer}
/* ★ (2026-08-18) 로고 썸네일 — 태그형(img/svg/lottie) 안쪽 요소도 44px 높이·가로자동으로 강제(찌그러짐 방지) */
.hf-logothumb>img,.hf-logothumb>svg,.hf-logothumb>lottie-player,.hf-logothumb>picture>img,.hf-logothumb>video{height:44px !important;width:auto !important;max-width:180px !important;object-fit:contain !important;display:block}
.hf-logoprev{margin-top:10px;display:flex;align-items:center;gap:10px}
.hf-logoprev img{max-height:56px;max-width:200px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:5px}
.hf-logoprev button{border:1px solid #fca5a5;background:#fff;color:#dc2626;border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer}
.hf-uping{font-size:12px;color:#2563eb}
.hf-pad .hf-inl input{width:56px}
/* ★ (2026-08-18) 패딩·위치 offset = clamp() 등 자유 입력 → 넓게 + 안 잘리게 (text 입력 허용) */
.hf-pad .hf-inl input[type=text]{width:clamp(64px,22vw,120px) !important;box-sizing:border-box;font-family:'Consolas',monospace;font-size:12px}
.hf-pad{gap:6px 8px}
.hf-pad .hf-inl{flex:1 1 auto;min-width:0;gap:3px}
/* ★ (2026-08-18) 패밀리 링크행 = 제목 | 링크 | x 한 줄 고정. .hf-row 의 input width:100% 강제를 이 스코프에서 무력화 */
.hf-lkrow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.hf-lkrow input[type=text]{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:6px;padding:6px 8px;font-size:12px;min-width:0}
.hf-lkrow .lk-label{flex:0 0 30%;width:auto !important}
.hf-lkrow .lk-url{flex:1 1 auto;width:auto !important}
.hf-lkrow .lk-del{flex:0 0 auto;border:1px solid #fca5a5;background:#fef2f2;color:#dc2626;border-radius:6px;padding:6px 9px;font-size:13px;line-height:1;cursor:pointer}
/* ★ 헤더 메뉴 관리 폼 (2026-07-29) */
.hf-menutitle{font-size:12px;font-weight:700;color:#475569;margin:12px 0 6px}
.hf-menutitle small{font-weight:400;color:#94a3b8}
.hf-menuempty{font-size:12px;color:#94a3b8;padding:8px 0}
.hf-menurow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.hf-menurow .mtitle{flex:0 0 84px;border:1px solid #cbd5e1;border-radius:7px;padding:6px 8px;font-size:12.5px}
.hf-menurow .murl{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:7px;padding:6px 8px;font-size:12.5px}
.hf-menurow .hf-blank{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#64748b;white-space:nowrap}
.hf-menurow .hf-mdel{border:1px solid #fca5a5;background:#fff;color:#dc2626;border-radius:6px;width:26px;height:28px;font-size:16px;cursor:pointer;flex-shrink:0}
.hf-addmenu{margin-top:6px;border:1px dashed #93c5fd;background:#f0f7ff;color:#2563eb;border-radius:8px;padding:8px;font-size:12.5px;cursor:pointer;width:100%}
.hf-addmenu:hover{background:#e0efff}

/* ★ 섹션 감기(숨김) (2026-07-29) — 편집 화면: 반투명 + "감김" 안내 / 발행: JS가 아예 미출력 */
body:not(.lnd-view) .blk.blk-hidden{ opacity:.4; position:relative; }
body:not(.lnd-view) .blk.blk-hidden::after{
  content:'감김 — 발행 화면엔 안 나옴'; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  background:#334155; color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px;
  z-index:5; pointer-events:none; white-space:nowrap;
}
.blk .tools .hide.on{ background:#7c3aed !important; color:#fff !important; }
/* ★ 기기별 감기 (2026-07-30) — 발행 뷰: 실제 뷰포트 폭 기준(lndViewApplyOutmode가 body에 lndv-mobile/tablet/pc 부여)으로 해당 기기에서만 숨김.
   body 기기 클래스를 1순위로, 미디어쿼리를 폴백(클래스 미부여 시)으로 병행. */
body.lnd-view.lndv-mobile .blk.blk-hide-mo,
body.lnd-view.lndv-tablet .blk.blk-hide-tab,
body.lnd-view.lndv-pc     .blk.blk-hide-pc{ display:none !important; }
@media (max-width:699px){ body.lnd-view:not(.lndv-tablet):not(.lndv-pc) .blk.blk-hide-mo{ display:none !important; } }
@media (min-width:700px) and (max-width:1023px){ body.lnd-view:not(.lndv-mobile):not(.lndv-pc) .blk.blk-hide-tab{ display:none !important; } }
@media (min-width:1024px){ body.lnd-view:not(.lndv-mobile):not(.lndv-tablet) .blk.blk-hide-pc{ display:none !important; } }
/* 편집 미리보기: 현재 선택 기기에서 감긴 섹션 → 반투명 + 안내 배지 */
body:not(.lnd-view) .blk.blk-dev-dim{ opacity:.4; position:relative; }
body:not(.lnd-view) .blk.blk-dev-dim::after{
  content:'이 기기에서 감김'; position:absolute; top:8px; right:8px;
  background:#7c3aed; color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px;
  z-index:5; pointer-events:none; white-space:nowrap;
}
/* ★ 편집 미리보기 헤더 — 캔버스 위에 자연스럽게(고정 아님, 미리보기 목적).
   실제 상단 고정은 발행 화면(sticky)에서 확인. 편집에서 fixed 를 걸면 목업/스크롤과 충돌하므로 하지 않는다. */
body:not(.lnd-view) #lndHdPrev{ position:static; }
/* 편집 미리보기 헤더/푸터 = 캔버스 폭에 맞춤 */
body:not(.lnd-view) #lndHdPrev:empty,
body:not(.lnd-view) #lndFtPrev:empty{display:none}
/* ★ 도메인/발행 설정 모달 (2026-07-29) */
.dom-slugrow{display:flex;align-items:center;gap:6px}
.dom-slugrow input{flex:1;border:1px solid #cbd5e1;border-radius:8px;padding:9px 11px;font-size:14px}
.dom-base{font-size:14px;color:#64748b;white-space:nowrap}
.dom-preview{margin-top:8px;font-size:12.5px;color:#334155;background:#f1f5f9;border-radius:8px;padding:8px 11px;word-break:break-all}
.dom-preview:empty{display:none}
.hf-note.ok{color:#059669}
.hf-note.err{color:#dc2626;font-weight:600}
.dom-dns{margin-top:12px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 14px}
.dom-dns b{font-size:12.5px;color:#92400e;display:block;margin-bottom:6px}
.dom-dns ol{margin:0;padding-left:18px;font-size:12px;color:#78350f;line-height:1.8}
.dom-dns code{background:#fef3c7;border-radius:4px;padding:1px 5px;font-size:11.5px;color:#92400e}
.dom-current{margin-top:14px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:11px 14px;font-size:12.5px;color:#065f46;line-height:1.8}
.dom-current a{color:#047857;word-break:break-all}
.lnd-hf-foot{display:flex;gap:8px;padding:14px 16px;border-top:1px solid #e2e8f0}
.lnd-hf-foot .off{border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:8px;padding:10px 16px;font-size:13px;cursor:pointer}
.lnd-hf-foot .apply{flex:1;border:0;background:#2563eb;color:#fff;border-radius:8px;padding:10px;font-size:14px;font-weight:700;cursor:pointer}
.lnd-hf-foot .apply:hover{background:#1d4ed8}

/* ★ 발행 헤더/푸터 스킨 (view.php) — 샘플: 로고+햄버거(우측 드로어), 회사정보 푸터 (2026-07-29) */
.lndh{position:relative;z-index:100}
.lndh-logoburger .lndh-in{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#fff;border-bottom:1px solid #eee}
.lndh-logo img{height:32px;display:block}
.lndh-logotxt{font-size:18px;font-weight:800;color:#222}
.lndh-burger{border:0;background:transparent;width:38px;height:38px;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:0 7px}
.lndh-burger span{display:block;height:2.5px;background:#222;border-radius:2px}
.lndh-dim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.25s;z-index:1200}
.lndh-drawer{position:fixed;top:0;right:0;bottom:0;width:min(78vw,300px);background:#fff;z-index:1300;
  transform:translateX(100%);transition:transform .25s;box-shadow:-4px 0 24px rgba(0,0,0,.18);padding:56px 0 20px;overflow-y:auto}
body.lndh-open .lndh-dim{opacity:1;visibility:visible}
body.lndh-open .lndh-drawer{transform:translateX(0)}
.lndh-close{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:28px;color:#333;cursor:pointer;line-height:1}
.lndh-drawer .lndh-mi{display:block;padding:15px 24px;color:#222;text-decoration:none;font-size:15px;border-bottom:1px solid #f1f1f1}
.lndh-drawer .lndh-mi:hover{background:#f8fafc;color:#2563eb}
.lndf-company{background:#2b2b2b;color:#cfcfcf}
.lndf-company .lndf-in{max-width:min(1560px,100%);margin:0 auto;padding:30px 20px;line-height:1.9;font-size:13px;box-sizing:border-box;overflow-wrap:break-word;word-break:break-word}
.lndf-company .lndf-co{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}

/* ★ 베이직 스킨1 — 헤더 (2026-07-29) */
.lndh-basic1 .lndh-in{display:flex;align-items:center;gap:12px;height:100%;padding:0 18px;box-sizing:border-box;border-bottom:1px solid rgba(0,0,0,.06)}
/* ★ 발행뷰 상단 고정 — 실제 모바일/태블릿(비목업)은 position:fixed 로 뷰포트에 박음 (2026-07-29 사용자 지시).
   sticky 는 테마 전역 body overflow 로 무력화되어 스크롤 시 헤더가 딸려 올라감 → fixed 로 강제 고정.
   fixed 는 흐름에서 빠지므로 캔버스 상단에 헤더 높이만큼 padding(--lnd-hd-h, JS가 세팅)을 준다. */
body.lnd-view:not(.lndv-qrwrap) .lndv-hf-header{
  position:fixed !important; top:0; left:0; right:0; z-index:1000; margin:0 auto; width:100%;
}
/* ★ fixed 헤더 높이만큼 여백 = margin-top 으로 (padding 은 사용자 '화면 전체 패딩' 전용, 덮어쓰지 않게) (2026-07-29)
   ★ (2026-08-02) 고정 헤더(lndh-fixed)면 JS(lndViewApplyOutmode)가 --lnd-hd-h 를 0 으로 → 본문 top0, 헤더가 첫 이미지 위에 겹침 */
body.lnd-view:not(.lndv-qrwrap) #canvas{ margin-top:var(--lnd-hd-h, 0px); }
/* ★ (2026-08-02) 편집화면(제작소)도 발행처럼 — 고정 헤더 미리보기는 캔버스 위에 겹침(본문 top0 시작).
   pointer-events:none = 헤더에 가린 첫 섹션도 Shift+클릭 편집 가능 (헤더 설정은 왼쪽 독 버튼으로) */
body:not(.lnd-view) .lndv-content-edit{position:relative}
body:not(.lnd-view) #lndHdPrev.lndh-fixed{position:absolute !important;top:0;left:0;right:0;z-index:120;pointer-events:none}
/* 목업(PC)에선 폰 안 상단 고정 (폰 프레임 기준) */
body.lnd-view.lndv-qrwrap .lndv-hf-header{position:sticky;top:0;z-index:100}
/* 외부 링크 메뉴 표식 */
.lndh-drawer .lndh-mi-ext::after{content:'↗';font-size:11px;color:#94a3b8;margin-left:5px}
/* 로고 정렬 = 로고를 밀어 배치 (햄버거는 반대쪽에 고정) */
.lndh-basic1.lndh-align-left  .lndh-logo{margin-right:auto}
.lndh-basic1.lndh-align-right .lndh-logo{margin-left:auto}
.lndh-basic1.lndh-align-center .lndh-logo{margin:0 auto}
/* 햄버거가 왼쪽이면 순서가 [햄버거 로고] — 정렬 보정 */
.lndh-basic1.lndh-burger-left.lndh-align-left  .lndh-logo{margin-right:auto;margin-left:0}
.lndh-basic1.lndh-burger-left.lndh-align-right .lndh-logo{margin-left:auto}
.lndh-basic1 .lndh-logotxt{font-size:18px;font-weight:800;color:#222}
.lndh-basic1 .lndh-logo img{display:block}
/* 드로어 좌/우 방향 */
.lndh-drawer-right{right:0;left:auto;transform:translateX(100%)}
.lndh-drawer-left {left:0;right:auto;transform:translateX(-100%)}
body.lndh-open .lndh-drawer-right,
body.lndh-open .lndh-drawer-left{transform:translateX(0)}
.lndh-drawer-left{box-shadow:4px 0 24px rgba(0,0,0,.18)}
.lndh-drawer .lndh-menu{display:block}
/* ★ PC 목업 = 드로어/딤을 폰 목업(.lndv-content) 안에 가둠 (2026-07-29) — body 뷰포트가 아니라 폰 기준 */
/*   overflow-x 만 히든(드로어 좌우 넘침 방지), overflow-y 는 auto 유지(폰 안 세로 스크롤 살림) */
body.lnd-view.lndv-qrwrap .lndv-content{position:relative;overflow-x:hidden;overflow-y:auto}
/* ★ 목업 = 드로어/딤을 고정 헤더(.lndv-hf-header, sticky) 안에 넣어 헤더처럼 고정 (스크롤 따라감 방지) (2026-07-29) */
body.lnd-view.lndv-qrwrap .lndv-hf-header{overflow:visible !important}
body.lnd-view.lndv-qrwrap .lndv-hf-header > .lndh-dim{position:absolute;top:100%;left:0;right:0;height:200vh;z-index:20}
body.lnd-view.lndv-qrwrap .lndv-hf-header > .lndh-drawer{position:absolute;top:100%;right:0;left:auto;height:200vh;z-index:21;width:min(80%,260px);transform:translateX(100%)}
body.lnd-view.lndv-qrwrap.lndh-open .lndv-hf-header > .lndh-drawer{transform:translateX(0)}
body.lnd-view.lndv-qrwrap .lndv-content > .lndh-dim{position:absolute;inset:0;z-index:20}
body.lnd-view.lndv-qrwrap .lndv-content > .lndh-drawer{position:absolute;top:0;bottom:0;height:100%;z-index:21;width:min(80%,260px)}
.lndh-drawer .lndh-menu .lndh-mi{display:block;padding:15px 24px;color:#222;text-decoration:none;font-size:15px;border-bottom:1px solid #f1f1f1}
.lndh-drawer .lndh-menu .lndh-mi:hover{background:#f8fafc;color:#2563eb}
/* SNS (드로어 하단) */
.lndh-sns{display:flex;gap:14px;padding:20px 24px;flex-wrap:wrap}
.lndh-sns-i{width:38px;height:38px;border-radius:50%;background:#f1f5f9;color:#334155;display:inline-flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none}
.lndh-sns-i:hover{background:#2563eb;color:#fff}

/* ★ PC 중앙 펼침 메뉴 (2026-08-01) — 1024px↑ 발행뷰(비목업)에서 헤더 중앙. 호버=지정컬러(--lndh-hv), 하위=심플 드롭다운 */
.lndh-basic1 .lndh-in{position:relative}
.lndh-pcnav{display:none;position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);align-items:center;z-index:6}
body.lnd-view.lndv-qrwrap .lndh-pcnav{display:none !important}   /* PC 목업(폰 프레임)에선 숨김 */
@media (min-width:1024px){
  body.lnd-view:not(.lndv-qrwrap) .lndh-pcnav{display:flex}
  #lndHdPrev .lndh-pcnav{display:flex}                            /* 헤더설정 모달 미리보기 */
}
.lndh-pcit{position:relative;height:100%;display:flex;align-items:center}
.lndh-pcit > a{display:flex;align-items:center;height:100%;padding:0 18px;font-size:15px;font-weight:700;color:#222;text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.lndh-pcit:hover > a{color:var(--lndh-hv,#f0473e)}
/* ★ (2026-08-02) 모두 펼침(lndh-pcall) — 모바일/태블릿·PC 목업(폰 프레임)에서도 펼침 메뉴 표시 */
.lndh-pcall .lndh-pcnav{display:flex}
body.lnd-view.lndv-qrwrap .lndh-pcall .lndh-pcnav{display:flex !important}
/* ★ (2026-08-02) 투명 헤더(bg_mode=trans) — 스크롤 전 투명 + 흰색 요소, 스크롤(.lndh-scrolled) 후 설정 배경색 복귀 */
.lndh-trans{transition:background .25s}
.lndh-trans:not(.lndh-scrolled){background:transparent !important}
.lndh-trans:not(.lndh-scrolled) .lndh-in{border-bottom-color:transparent}
.lndh-trans:not(.lndh-scrolled) .lndh-logotxt{color:#fff}
.lndh-trans:not(.lndh-scrolled) .lndh-burger span{background:#fff}
.lndh-trans:not(.lndh-scrolled) .lndh-pcit > a{color:#fff}
/* 투명 상태 펼침메뉴 hover = 배경 흰색 + 글씨 검정 (사용자 확정) */
.lndh-trans:not(.lndh-scrolled) .lndh-pcit:hover > a{background:#fff;color:#111 !important;border-radius:9px;height:auto;padding-top:9px;padding-bottom:9px}
/* 흰 로고 스위칭 — 투명 상태에선 흰 버전(logo_img_w), 스크롤 후 기본 로고 */
.lndh .lndh-li-w{display:none}
.lndh-trans:not(.lndh-scrolled) .lndh-li-w{display:block}
.lndh-trans:not(.lndh-scrolled) .lndh-li-n.lndh-has-w{display:none}

/* ★ (2026-08-02) 최근게시물 섹션 (type recent) — 고정 시안 스킨. --rcs = 글자 비율 (설정 슬라이더) */
.lnd-rcnt{--rcs:1;padding-left:20px;padding-right:20px;box-sizing:border-box}
.lnd-rcnt .rc-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:calc(16px*var(--rcs))}
.lnd-rcnt .rc-tit{font-size:calc(var(--rcfht,26px)*var(--rcs));font-weight:800;color:#111;line-height:1.3}
.lnd-rcnt .rc-sub{font-size:calc(var(--rcfhs,13.5px)*var(--rcs));color:#8a94a3;margin-top:4px}
.lnd-rcnt .rc-more{margin-left:auto;font-size:calc(12.5px*var(--rcs));color:#64748b;text-decoration:none;border:1px solid #e2e8f0;border-radius:100px;padding:7px 15px;white-space:nowrap;background:#fff;flex:none}
.lnd-rcnt .rc-more:hover{border-color:#94a3b8;color:#111}
.lnd-rcnt .rc-row{display:flex;align-items:center;gap:16px;padding:calc(15px*var(--rcs)) 2px;border-bottom:1px solid #eef1f5;text-decoration:none}
.lnd-rcnt .rc-txts{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lnd-rcnt .rc-rt{font-size:calc(var(--rcft,15.5px)*var(--rcs));font-weight:700;color:#1f2937;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnd-rcnt .rc-rc{font-size:calc(var(--rcfd,13px)*var(--rcs));color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnd-rcnt .rc-row:hover .rc-rt{color:#2563eb}
/* 리스트형1 — 상단 진한 라인 + 오른쪽 날짜 강조 */
.lnd-rcnt.rc-list1 .rc-list{border-top:2px solid #1f2937}
.lnd-rcnt .rc-date{flex:none;font-size:calc(var(--rcfdt,13.5px)*var(--rcs));font-weight:800;color:#f0473e;white-space:nowrap;letter-spacing:.3px}
/* 리스트형2 — 왼쪽 큰 날짜 블록 (연도 작게 위 · 일자 크게) */
.lnd-rcnt.rc-list2 .rc-list{border-top:1px solid #e5e9f0}
.lnd-rcnt .rc-d2{flex:none;width:calc(66px*var(--rcs));display:flex;flex-direction:column;align-items:center;gap:1px}
.lnd-rcnt .rc-d2 em{font-style:normal;font-size:calc(var(--rcfdt,22px)*var(--rcs)*0.5);color:#94a3b8;font-weight:600;letter-spacing:.5px}
.lnd-rcnt .rc-d2 b{font-size:calc(var(--rcfdt,22px)*var(--rcs));font-weight:800;color:#1e2a44;line-height:1.1}
.lnd-rcnt .rc-sample-note{padding:10px 2px;font-size:11.5px;color:#b6bfca;text-align:center}
/* ★ (2026-08-02) 기본 갤러리형 (rc-gallery1) — 라운드 썸네일 카드 + hover 확대. --rcgc=열수 --rcgr=비율 --rcgl=내용 줄수 */
.lnd-rcnt .rc-gwrap{display:grid;grid-template-columns:repeat(var(--rcgc,2),1fr);gap:calc(20px*var(--rcs)) var(--rcgap,calc(16px*var(--rcs)))} /* 가로 칸 여백 = --rcgap (설정: 숫자 px 또는 clamp) */
.lnd-rcnt .rc-gcard{display:flex;flex-direction:column;gap:5px;text-decoration:none;min-width:0}
.lnd-rcnt .rc-gthumb{display:block;width:100%;aspect-ratio:var(--rcgr,4/3);border-radius:14px;overflow:hidden;background:#eef1f5;position:relative}
.lnd-rcnt .rc-gthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lnd-rcnt .rc-gcard:hover .rc-gthumb img{transform:scale(1.06)}
.lnd-rcnt .rc-gph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(30px*var(--rcs));color:#c3ccd8;background:linear-gradient(135deg,#f1f5f9,#e2e8f0)}
.lnd-rcnt .rc-gt{margin-top:calc(11px*var(--rcs));font-size:calc(var(--rcft,15.5px)*var(--rcs));font-weight:700;color:#1f2937;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* ★ 썸네일↔제목 간격 살짝 (2026-08-02) */
.lnd-rcnt .rc-gcard:hover .rc-gt{color:#2563eb}
.lnd-rcnt .rc-gd{font-size:calc(var(--rcfd,13px)*var(--rcs));color:#8a94a3;line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--rcgl,2);-webkit-box-orient:vertical}
.lnd-rcnt .rc-gdate{font-size:calc(var(--rcfdt,12px)*var(--rcs));color:#b0b9c6;margin-top:1px}
.lndh-pcdrop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s,visibility .18s;background:#fff;border:1px solid #f0f0f0;border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.13);min-width:160px;padding:7px 0;z-index:1100}
.lndh-pcit:hover .lndh-pcdrop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.lndh-pcdrop a{display:block;padding:10px 20px;font-size:13.5px;color:#444;text-decoration:none;white-space:nowrap;text-align:center}
.lndh-pcdrop a:hover{color:var(--lndh-hv,#f0473e);background:#fafafa}
/* ★ 드로어(모바일) 아코디언 (2026-08-01) — 하위 있는 1뎁스: 라벨=이동, 우측 화살표=펼침/접힘 */
.lndh-acc-h{display:flex;align-items:stretch;border-bottom:1px solid #f1f1f1}
.lndh-acc-h .lndh-mi{flex:1;border-bottom:0 !important}
.lndh-acc-t{width:50px;border:0;background:transparent;cursor:pointer;position:relative;flex:none}
.lndh-acc-t::before{content:'';position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-right:2px solid #999;border-bottom:2px solid #999;
  transform:translate(-50%,-70%) rotate(45deg);transition:transform .22s}
.lndh-acc.open .lndh-acc-t::before{transform:translate(-50%,-30%) rotate(225deg)}
.lndh-acc-b{max-height:0;overflow:hidden;transition:max-height .28s ease}
.lndh-acc.open .lndh-acc-b{max-height:600px}
/* 드로어에서 하위 메뉴 = 들여쓰기 */
.lndh-drawer .lndh-mi-sub{padding-left:42px;font-size:13.5px;color:#666;background:#fafafa}
/* 페이지 독 — 하위메뉴 페이지 들여쓰기 + 토글 버튼 활성 표시 */
#lndPageDock .lpd-item.is-msub{margin-left:16px}
#lndPageDock .lpd-acts .msub.on{background:#4338ca;color:#fff;border-color:#4338ca}
/* 헤더설정 모달 — 추가 링크의 하위 행 들여쓰기 */
.hf-menurow.is-sub{margin-left:18px}

/* ★ 베이직 스킨1 — 푸터 (스타일은 인라인으로, in만 정렬) */
/* ★ (2026-08-17) 폰틀(목업)·좁은 폭에서 푸터 내용이 넘쳐 잘리던 문제 — 부모 폭을 넘지 않게 보강.
   max-width 1560 은 유지하되 100% 이하로 제한 + box-sizing + 긴 줄 자동 줄바꿈. */
.lndf-basic1 .lndf-in{margin:0 auto;line-height:1.9;box-sizing:border-box;overflow-wrap:break-word;word-break:break-word;max-width:100%}
.lndf-basic1 .lndf-line{min-height:1em;overflow-wrap:break-word;word-break:break-word}
/* ★ (2026-08-18) 푸터 로고 + 패밀리사이트 배치 — 모바일=세로(링크 위→로고→텍스트), PC(가로전체)=링크 우측 */
.lndf-basic1 .lndf-logo{margin-bottom:10px;line-height:0}
/* 로고 래퍼에 height 지정 → 안쪽 img/svg/lottie(태그·URL 공통)를 그 높이에 맞춤 */
.lndf-basic1 .lndf-logo>img,.lndf-basic1 .lndf-logo>svg,.lndf-basic1 .lndf-logo>lottie-player,.lndf-basic1 .lndf-logo>picture,.lndf-basic1 .lndf-logo>video{height:100%;width:auto;max-width:100%;object-fit:contain;display:inline-block}
.lndf-basic1 .lndf-logo>picture>img{height:100%;width:auto}
.lndf-basic1 .lndf-links{margin-bottom:14px}
/* 패밀리사이트 = 셀렉트박스(하단 글로벌 메뉴) */
.lndf-basic1 .lndf-family{max-width:100%;min-width:160px;background:rgba(255,255,255,.08);color:inherit;border:1px solid rgba(255,255,255,.28);border-radius:7px;padding:8px 12px;font-size:.92em;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.lndf-basic1 .lndf-family option{color:#222}
/* ★ (2026-08-18) 블랙 세트 = 진한 배경(#111) + 흰 글씨/화살표 + 테두리 없음. 닫힌 상태(버튼)부터 블랙.
   .lndf-family 가 background(단축) 로 색+화살표를 함께 지정 → 블랙도 background(단축)+테두리 제거로 확실히 덮어씀. */
.lndf-basic1 .lndf-family.lndf-family-black{
  background-color:#111 !important;
  color:#fff !important;
  border:0 !important;
}
.lndf-basic1 .lndf-family.lndf-family-black option{color:#fff;background:#111}
/* ★ (2026-08-18) 너비 100% — .lndf-links 를 꽉 채우고 셀렉트도 100% */
.lndf-basic1 .lndf-links.lndf-links-full{width:100%}
.lndf-basic1 .lndf-links.lndf-links-full .lndf-family{width:100%;max-width:none}
/* ★ (2026-08-18) 모바일 하단 탭바 편집 미리보기(.lndmb-prev) — 발행은 lnd_render_mobilebar 가 CSS 주입. 편집만 여기서 최소 스타일 */
.lndmb-prev .lndmb-in{display:flex;width:100%;align-items:stretch}
.lndmb-prev .lndmb-i{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;text-decoration:none;font-weight:600}
.lndmb-prev .lndmb-i i{font-size:21px;line-height:1}
.lndmb-prev .lndmb-img{display:inline-flex;align-items:center;justify-content:center;height:22px;line-height:0}
.lndmb-prev .lndmb-img img,.lndmb-prev .lndmb-img svg{height:22px;width:auto;max-width:28px;object-fit:contain;display:block}
.lndmb-prev .lndmb-t{font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ★ (2026-08-18) 절대위치 배치(레이어) — .lndf-in 기준. top/right/bottom 은 인라인 변수로 */
.lndf-basic1 .lndf-in{position:relative}
.lndf-basic1 .lndf-links.lndf-links-abs{position:absolute;top:var(--lndf-links-top,auto);right:var(--lndf-links-right,auto);bottom:var(--lndf-links-bottom,auto);left:var(--lndf-links-left,auto);margin:0;z-index:2}
/* 절대위치일 땐 wrapper 가 100% 로 늘어나면 안 됨 (right 만 잡고 왼쪽까지 늘어나 왼쪽에 붙어보이는 문제 차단).
   너비 100% 는 안쪽 셀렉트에만 남기고 wrapper 는 콘텐츠 폭. custom 폭도 셀렉트 인라인 style 이 결정. */
.lndf-basic1 .lndf-links.lndf-links-abs.lndf-links-full{width:auto}
/* PC(가로전체) = 링크를 우측 열에. .lndf-in 을 좌(메인)·우(링크) 2열 flex 로. */
@media (min-width:1025px){
  body.lnd-wide .lndf-basic1.lndf-haslinks .lndf-in{display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:space-between;gap:40px}
  body.lnd-wide .lndf-basic1.lndf-haslinks .lndf-links{flex-direction:column;gap:8px;margin-bottom:0;flex:0 0 auto;text-align:right}
  body.lnd-wide .lndf-basic1.lndf-haslinks .lndf-main{flex:1 1 auto;min-width:0}
  /* 절대위치일 땐 flex 열 배치에서 빠져 레이어로 뜬다 → 메인이 전체폭 */
  body.lnd-wide .lndf-basic1.lndf-haslinks .lndf-links.lndf-links-abs{position:absolute}
  body.lnd-wide .lndf-basic1.lndf-haslinks:has(.lndf-links-abs) .lndf-in{display:block}
}
/* ★ (2026-08-17) 헤더/푸터 inner 폭 — 가로전체(.lnd-wide)에서만 container 폭. inner OFF(lndhf-noinner) 또는 모바일/태블릿/목업 = 100%.
   (.lndh-in/.lndf-in 에 contents-container container-* 클래스가 붙어옴 — #canvas 밖이라 별도 규칙 필요) */
@media (min-width:1025px){
  body.lnd-wide .lndh-in.container-lg,  body.lnd-wide .lndf-in.container-lg{max-width:1600px;margin-left:auto;margin-right:auto}
  body.lnd-wide .lndh-in.container-md,  body.lnd-wide .lndf-in.container-md{max-width:1560px;margin-left:auto;margin-right:auto}
  body.lnd-wide .lndh-in.container-sm,  body.lnd-wide .lndf-in.container-sm{max-width:1440px;margin-left:auto;margin-right:auto}
  body.lnd-wide .lndh-in.container-full,body.lnd-wide .lndf-in.container-full{max-width:100%}
}
.lndh-in.lndhf-noinner,.lndf-in.lndhf-noinner{max-width:100% !important}
/* ★ (2026-08-18) 목업/모바일/태블릿(=lnd-wide 없음)에서 헤더·푸터 inner 이중패딩 차단.
   .lndh-in/.lndf-in 에 붙은 container-* 클래스의 테마 좌우 패딩을 리셋 → 스킨 자체 패딩만 남김(inner 2번 먹힘 방지). */
body:not(.lnd-wide) .lndh-in.contents-container,
body:not(.lnd-wide) .lndf-in.contents-container{max-width:100% !important;padding-left:0 !important;padding-right:0 !important;margin-left:0 !important;margin-right:0 !important}
/* ★ (2026-08-17) footer 자체가 콘텐츠보다 넓어져 폰틀 밖으로 넘치는 것 차단 — 어떤 모드에서도 부모 폭 안. */
.lndf{max-width:100%;box-sizing:border-box;overflow:hidden}

/* ★ 공용 JSON 붙여넣기 모달 (2026-07-29) — textarea로 긴 JSON 붙여넣기 */
.lnd-paste-ov{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:3300;align-items:center;justify-content:center}
.lnd-paste-modal{width:min(94vw,620px);max-height:86vh;background:#fff;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.lnd-paste-head{display:flex;align-items:center;padding:14px 16px;background:#0f172a;color:#fff;cursor:move}
.lnd-paste-head b{flex:1;font-size:15px}
.lnd-paste-head .x{border:0;background:transparent;color:#94a3b8;font-size:22px;cursor:pointer;line-height:1}
.lnd-paste-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.lnd-paste-sub{font-size:13px;color:#64748b;line-height:1.6}
.lnd-paste-body textarea{width:100%;min-height:280px;border:1px solid #cbd5e1;border-radius:10px;padding:12px;
  font-family:'Cascadia Code','Consolas',monospace;font-size:12.5px;line-height:1.6;resize:vertical;box-sizing:border-box}
.lnd-paste-body textarea:focus{outline:none;border-color:#2563eb}
.lnd-paste-foot{display:flex;gap:8px;padding:14px 16px;border-top:1px solid #e2e8f0;justify-content:flex-end}
.lnd-paste-foot .cancel{border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:8px;padding:10px 18px;font-size:13px;cursor:pointer}
.lnd-paste-foot .ok{border:0;background:#2563eb;color:#fff;border-radius:8px;padding:10px 28px;font-size:14px;font-weight:700;cursor:pointer}
.lnd-paste-foot .ok:hover{background:#1d4ed8}

/* ★ 비주얼 스와이퍼 (규격 디자인, 2026-07-30) — 외부 라이브러리 없이 순수 CSS. 편집·발행 공통 */
.lnd-vsw{position:relative;width:100%;overflow:hidden;background:#111;touch-action:pan-y;user-select:none;cursor:grab}
.lnd-vsw:active{cursor:grabbing}
/* fade 효과 — 슬라이드를 겹쳐 두고 opacity 전환 */
.lnd-vsw-fade .lnd-vsw-track{position:relative;width:100%;height:100%}
.lnd-vsw-fade .lnd-vsw-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.lnd-vsw-fade .lnd-vsw-slide.on{opacity:1;pointer-events:auto;z-index:1}
/* slide 효과 — 트랙을 가로로 늘어놓고 translateX 로 밀기 */
.lnd-vsw-slide-eff{}
.lnd-vsw-slide-eff .lnd-vsw-track{display:flex;width:100%;height:100%;will-change:transform}
.lnd-vsw-slide-eff .lnd-vsw-slide{position:relative;flex:0 0 100%;width:100%;height:100%;opacity:1}
.lnd-vsw-img{width:100%;height:100%;object-fit:cover;display:block}
.lnd-vsw-img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.lnd-vsw-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1e293b;color:#64748b;font-size:14px}
/* 문구 오버레이 — 이미지 위. flex 로 가로/세로 정렬 */
.lnd-vsw-cap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;pointer-events:none}
/* ★ 문구 정렬 (2026-07-30) */
.lnd-vsw-cap-in{width:100%;pointer-events:none}
/* inner_* / center = 중앙 컨테이너 폭 제한 (contents-container 가 max-width 담당) */
.lnd-vsw-cap-inner{margin:0 auto}
/* full_* = 폭 제한 없이 화면 기준 (좌/우 패딩은 cap 에서) */
.lnd-vsw-cap-full{margin:0}
.lnd-vsw-txt{font-weight:800;line-height:1.25;word-break:keep-all;pointer-events:auto;display:inline-block;max-width:100%}
/* 점 페이지네이션 */
.lnd-vsw-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;gap:8px;justify-content:center}
.lnd-vsw-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.lnd-vsw-dot.on{background:#fff;width:22px;border-radius:5px}
.lnd-vsw-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1e293b;color:#94a3b8;font-size:13px;text-align:center;padding:0 20px}
/* 양옆 화살표 (편집·발행 공통) — 화면 양끝 */
.lnd-vsw-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(0,0,0,.38);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;pointer-events:auto}
.lnd-vsw-arw:hover{background:rgba(0,0,0,.62)}
.lnd-vsw-prev{left:16px}
.lnd-vsw-next{right:16px}
@media (max-width:700px){ .lnd-vsw-arw{width:34px;height:34px;font-size:20px} .lnd-vsw-prev{left:8px} .lnd-vsw-next{right:8px} }
/* ★ 스와이퍼 설정 모달 — 항목 간격 (다닥다닥 방지) (2026-07-30) */
#vswBody .fld{margin-bottom:18px}
#vswBody .fld:last-child{margin-bottom:0}
#vswBody .fld>label{display:block;font-size:12.5px;color:#334155;font-weight:700;margin-bottom:6px}
#vswBody .fld select,#vswBody .fld input[type="text"],#vswBody .fld input[type="number"]{box-sizing:border-box}
#vswBody .fld select{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:8px 10px;font-size:13px;background:#fff}

/* ★ 게시판 유형 선택 모달 (2026-07-30) */
.lnd-bk-ov{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.lnd-bk-box{background:#fff;border-radius:16px;width:min(440px,94vw);max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.lnd-bk-h{font-size:17px;font-weight:800;color:#0f172a;padding:20px 22px 12px}
.lnd-bk-list{display:flex;flex-direction:column;gap:10px;padding:0 18px 6px}
.lnd-bk-item{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 12px;align-items:center;text-align:left;
  background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s}
.lnd-bk-item:hover{background:#eff6ff;border-color:#3b82f6}
.lnd-bk-item i{grid-row:1/3;font-size:24px;color:#3b82f6;text-align:center}
.lnd-bk-t{font-size:15px;font-weight:700;color:#0f172a}
.lnd-bk-d{font-size:12px;color:#64748b;line-height:1.4}
.lnd-bk-f{padding:12px 18px 18px;text-align:right}
.lnd-bk-cancel{background:#f1f5f9;border:0;border-radius:8px;padding:9px 18px;font-size:14px;color:#475569;cursor:pointer}
.lnd-bk-cancel:hover{background:#e2e8f0}

/* ★ board 서브 = 폰 목업 안 게시판 iframe (2026-07-30) — 진짜 모바일 뷰포트로 렌더.
   폰 목업 자체는 스크롤 없이 92vh 고정, 그 안에서 헤더 고정 + iframe 이 남는 높이 채워 iframe 내부에서만 스크롤(이중 스크롤 방지). */
body.lnd-view.lndv-qrwrap .lndv-content.lndv-content-board{
  height:92vh !important; max-height:92vh !important;
  overflow:hidden !important;          /* ★ 폰 목업 자체 스크롤 제거 (바깥 스크롤 없앰) */
  display:flex !important; flex-direction:column !important;
}
.lndv-content-board .lndv-hf-header{ flex:0 0 auto; }   /* 헤더 = 폰 목업 맨 위 고정 */
.lndv-content-board .lndv-hf-footer{ flex:0 0 auto; }   /* 푸터 = 폰 목업 맨 아래 고정 (그 사이 iframe 이 남는 높이 채움) */
#canvas.lndv-board-canvas{
  padding:0 !important; background:#fff;
  flex:1 1 auto !important; min-height:0 !important;
  display:flex !important;
}
.lndv-board-frame{
  display:block; width:100%; height:100%; border:0; margin:0; background:#fff;
}

/* ★ 위치콜/전화 버튼 애니메이션 스타일 (2026-08-04) — style=anim
   pill 버튼 + 좌측 문구 + 점3개 로딩(띵띵띵) + 우측 검정원 안 전화아이콘 흔들림.
   레이어 버튼(.ly-btn.dcbtn-anim)·규격디자인(.dc-btn.dcbtn-anim) 공통. */
.dcbtn-anim{
  position:relative; display:inline-flex !important; align-items:center; justify-content:space-between;
  gap:10px; border-radius:999px !important; overflow:hidden;
}
.dcbtn-anim .dcb-label{ flex:1; text-align:left; padding-left:6px; }
.dcbtn-anim .dcb-right{ display:inline-flex; align-items:center; gap:8px; flex:none; }
/* 점 3개 로딩 (띵띵띠) */
.dcbtn-anim .dcb-dots{ display:inline-flex; gap:4px; align-items:center; }
.dcbtn-anim .dcb-dots i{
  width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35;
  animation:dcbDot 1.2s infinite ease-in-out;
}
.dcbtn-anim .dcb-dots i:nth-child(2){ animation-delay:.2s; }
.dcbtn-anim .dcb-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dcbDot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
/* 검정 동그라미 안 전화 아이콘 + 흔들림 */
.dcbtn-anim .dcb-phone{
  width:34px; height:34px; border-radius:50%; background:#111827; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex:none;
  animation:dcbShake 1.6s infinite; transform-origin:center;
}
@keyframes dcbShake{
  0%,72%,100%{ transform:rotate(0deg); }
  76%{ transform:rotate(-12deg); } 80%{ transform:rotate(10deg); }
  84%{ transform:rotate(-8deg); } 88%{ transform:rotate(6deg); } 92%{ transform:rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce){
  .dcbtn-anim .dcb-dots i, .dcbtn-anim .dcb-phone{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ★ 버튼 표준 엔진 스타일 (2026-08-17) — .stdbtn + style별 클래스.
   basic=아이콘+글씨(한 줄), anim1=좌 텍스트·우 아이콘, anim2=중앙+물결.
   새 스타일 추가 = 여기 .stdbtn-animN + BTN_STYLES 항목. */
.stdbtn{ position:relative; }
.stdbtn .stdbtn-label{ line-height:1.2; }
.stdbtn .stdbtn-ic{ line-height:0; }
/* ★ card1 — 좌 이미지 + 우 2줄 텍스트(제목/설명) (2026-08-17) */
/* ★ (2026-08-17) 카드형은 좌측 정렬 — 버튼 인라인 justify-content:center 를 이겨 이미지+텍스트가 왼쪽에 붙음 */
.stdbtn-card1{ display:inline-flex !important; align-items:center; justify-content:flex-start !important; gap:0; text-align:left; }
.stdbtn-card1 .stdbtn-card1-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.stdbtn-card1 .stdbtn-card1-tx{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.stdbtn-card1 .stdbtn-t1{ line-height:1.25; }
.stdbtn-card1 .stdbtn-t2{ line-height:1.3; }
/* anim1 — pill, 좌 라벨 / 우 아이콘 양끝 */
.stdbtn-anim1{
  display:inline-flex !important; align-items:center; justify-content:space-between;
  gap:10px; border-radius:999px !important;
}
.stdbtn-anim1 .stdbtn-label{ flex:1; text-align:left; padding-left:6px; }
.stdbtn-anim1 .stdbtn-right{ display:inline-flex; align-items:center; flex:none; }
/* anim2 — 중앙 아이콘 + 클릭/상시 물결(ripple) */
.stdbtn-anim2{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  overflow:hidden;
}
.stdbtn-anim2 .stdbtn-ripple{
  position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
  background:currentColor; opacity:.35; transform:translate(-50%,-50%);
  animation:stdbtnRipple 1.8s infinite ease-out; pointer-events:none;
}
@keyframes stdbtnRipple{
  0%{ opacity:.35; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(9); }
}
@media (prefers-reduced-motion: reduce){
  .stdbtn-anim2 .stdbtn-ripple{ animation:none; opacity:0; }
}