/* ── 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}
/* ★ (2026-09-06) 랜딩 이름 = 글씨 출력(수정 불가). 이름 변경은 목록 화면에서만 */
.bld-top .ttl-txt{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;font-size:13px;color:#cbd5e1;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;cursor:default}
.bld-top .ttl-txt i{color:#60a5fa;font-size:15px}
.bld-top .ttl-txt b{color:#fff;font-weight:700}
.bld-top .ttl-txt .ttl-sub{color:#94a3b8}
.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-09-06) 설계폭 설정 = 아이콘 버튼 + 작은 레이어 (식스샵식 상단바 정리) ──
   #lndDimBtn: Phosphor duotone arrows-horizontal 아이콘 버튼 / #lndDimPop: 버튼 아래 fixed 레이어
   (.bld-top overflow:hidden 회피). 항목 id 는 기존 그대로(pcwWrap·mockwWrap·tabwWrap·innerWrap·lndUnifyBtn). */
.bld-top .dim-btn{width:34px !important;height:34px !important;border-radius:6px;border:1px solid #334155;background:#1e293b;color:#cbd5e1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 !important;font-size:19px;line-height:1}
.bld-top .dim-btn:hover{background:#334155;color:#fff}
.bld-top .dim-btn.on{background:#4f46e5;border-color:#4f46e5;color:#fff}
.bld-top .dim-pop{position:fixed;top:58px;left:200px;width:300px;background:#1e293b;border:1px solid #334155;border-radius:12px;box-shadow:0 14px 40px rgba(2,6,23,.55);padding:10px 12px 12px;z-index:1200;text-align:left;color:#e2e8f0;display:flex;flex-direction:column;gap:6px}
.bld-top .dim-pop[style*="display: none"],.bld-top .dim-pop[style*="display:none"]{display:none !important}
.bld-top .dim-hd{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#fff;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid #334155}
.bld-top .dim-hd i{font-size:17px;color:#a5b4fc}
.bld-top .dim-x{margin-left:auto;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.bld-top .dim-x:hover{background:#334155;color:#fff}
.bld-top .dim-unify{background:#0e7490 !important;color:#fff !important;width:100% !important;justify-content:center;display:flex;align-items:center;gap:6px;font-size:12.5px;margin:2px 0 4px}
.bld-top .dim-unify i{font-size:16px}
.bld-top .dim-row{display:flex;align-items:center;gap:6px;width:100%;font-size:12px;color:#cbd5e1;padding:3px 0;cursor:default}
.bld-top .dim-row > span{flex:1 1 auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.bld-top .dim-row > span i{font-size:16px;color:#a5b4fc}
.bld-top .dim-row input[type=number]{background:#0f172a !important;border:1px solid #334155 !important;color:#fff !important;border-radius:6px !important;height:30px !important;width:72px !important;min-width:0 !important;max-width:72px !important;padding:0 6px !important;font-size:13px !important;text-align:center;flex:0 0 auto}
.bld-top .dim-row select{height:30px !important;font-size:12px !important;max-width:120px !important;flex:0 0 auto}
.bld-top .dim-row em{font-style:normal;font-size:11px;color:#64748b;width:16px;flex:0 0 auto}
.bld-top .dim-hint{font-size:11px;color:#64748b;line-height:1.5;margin-top:4px;padding-top:8px;border-top:1px solid #334155}

/* ── ★ 모바일 헤드 토글 (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}
  /* ★ (2026-09-06) 설계폭 레이어 — 세로 패널 안에서는 fixed 대신 제자리 펼침 (패널 transform 이 fixed 기준을 깨므로) */
  .bld-top #lndDimWrap{flex-direction:column}
  .bld-top .dim-btn{width:100% !important}
  .bld-top .dim-pop{position:static !important;width:100% !important;margin-top:6px;left:auto !important;top:auto !important}
  /* 사이즈탭·줌·단축키 그룹은 가로 유지 */
  .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(#bldTip):not(#cselPop):not(#lndLeftRail):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):not(#bldZoomFloat):not(#aiSecOv):not(#mbtClampCalc):not(#lndGuestAuthOv):not(#lndRvSheetOv):not(#lndPostOv):not(#lndInqOv):not(#lndInqFbOv):not(#lndVarsMd):not(.hyim-pop){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} }
/* ★ (2026-09-01) 도구 감추기 · 화면 줌 = [단축키] 바로 앞(왼쪽)에 딱 붙인 공중 플로팅.
   단축키(#infoWrap right:322px + 버튼폭 약 88px = 왼쪽 끝 ~410px)에 최소 간격(6px)으로 밀착 → right:416px */
#bldZoomFloat{position:fixed;top:62px;right:416px;z-index:960;display:inline-flex;align-items:center;gap:6px;pointer-events:none}
#bldZoomFloat > *{pointer-events:auto}
#bldZoomFloat .bzf-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border:1px solid #334155;background:#1e293b;color:#cbd5e1;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px rgba(15,23,42,.28)}
#bldZoomFloat .bzf-btn:hover{background:#334155;color:#fff}
#bldZoomFloat .bzf-zoom{display:inline-flex;align-items:center;gap:2px;background:#1e293b;border:1px solid #334155;border-radius:20px;padding:2px;box-shadow:0 6px 18px rgba(15,23,42,.28)}
#bldZoomFloat .bzf-z{background:transparent;border:0;color:#fff;width:28px;height:26px;border-radius:14px;font-size:16px;cursor:pointer;line-height:1}
#bldZoomFloat .bzf-z:hover{background:#334155}
#bldZoomFloat .bzf-lbl{background:transparent;border:0;color:#94a3b8;height:26px;padding:0 8px;font-size:12px;cursor:pointer;white-space:nowrap;min-width:46px}
#bldZoomFloat .bzf-lbl:hover{color:#fff}
@media screen and (max-width:900px){ #bldZoomFloat{top:auto;bottom:56px;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}
/* ★ (2026-08-23) AI 문구 다듬기 버튼 — 보라, 눈에 띄게 크게 (인라인 고객은 이것만 표시) */
#blkSelRail button.qa.qa-ai{background:#7c3aed;width:30px;height:30px;font-size:16px;opacity:1;box-shadow:0 2px 8px rgba(124,58,237,.4)}
#blkSelRail button.qa.qa-ai:hover{background:#6d28d9}
/* ★ (2026-08-31) 섹션 통째 모션 M 버튼 — 미설정=회색 / 설정됨(.on)=보라 */
#blkSelRail button.qa.qa-mo{background:#9ca3af;font-weight:800;font-size:14px}
#blkSelRail button.qa.qa-mo:hover{background:#6b7280}
#blkSelRail button.qa.qa-mo.on{background:#7c3aed;box-shadow:0 2px 8px rgba(124,58,237,.4)}
#blkSelRail button.qa.qa-mo.on: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}
/* ★ (2026-10-16) 글씨 영역 바 — 오른쪽(.hd-w) = 폭만(넘치면 자동 줄바꿈) · 아래(.hd-h) = 영역 높이. 모서리 점(.hd-size) = 글씨 크기 */
.shp-sticker .hd-w,.blk-layer .hd-w,.shp-sticker .hd-h,.blk-layer .hd-h{position:absolute;background:#fff;border:2px solid #2563eb;border-radius:4px;z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.25);box-sizing:border-box}
.shp-sticker .hd-w,.blk-layer .hd-w{right:-5px;top:50%;width:9px;height:26px;margin-top:-13px;cursor:ew-resize}
.shp-sticker .hd-h,.blk-layer .hd-h{bottom:-5px;left:50%;width:26px;height:9px;margin-left:-13px;cursor:ns-resize}
.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-27) 발행 깜빡임 제거: body.lnd-wide 를 서버(PHP)가 초기 렌더부터 붙임(JS 토글 시차 제거).
   단 lnd-wide 여도 좁은 뷰포트(<1025px)=모바일/태블릿은 inner 무시하고 100% 리셋(테마 container 패딩 새는 것 방지).
   = 위 not(.lnd-wide) 100% 리셋과 동일 효과를 lnd-wide 에도 좁은폭에서 적용. */
@media (max-width:1024px){
  body.lnd-wide #canvas .contents-container{width:100% !important;max-width:100% !important;margin:0 !important;padding-left:0 !important;padding-right:0 !important}
}
/* ★ (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-09-17) inner 한쪽 확장 래퍼(lndAutoInnerTarget b.extdir) — 고급 그리드 등.
     ext-right: 왼쪽은 inner 왼쪽 선(=(캔버스-inner)/2+20px, 최소 20px), 오른쪽 0 → 화면 끝까지. ext-left 는 반대.
     % 는 부모(.blk=캔버스 폭) 기준. --lnd-ext-inner 는 JS 가 심음. ext-none(inner=전체) 이면 양쪽 20px. */
  body.lnd-wide #canvas .lnd-ext-wrap{width:100%;box-sizing:border-box}
  body.lnd-wide #canvas .lnd-ext-wrap.ext-right{padding-left:max(20px, calc((100% - var(--lnd-ext-inner,1600px)) / 2 + 20px));padding-right:0}
  body.lnd-wide #canvas .lnd-ext-wrap.ext-left{padding-right:max(20px, calc((100% - var(--lnd-ext-inner,1600px)) / 2 + 20px));padding-left:0}
  body.lnd-wide #canvas .lnd-ext-wrap.ext-none{padding-left:20px;padding-right:20px}
  /* ★ (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:9px;padding:8px 9px;margin-bottom:5px;background:#f8fafc}
.grmd-row.on{background:#f5f3ff;border-color:#c7d2fe}
/* ★ (2026-09-06) 칸 타입/액션 아이콘 버튼 공통 hover — 그리드·고급그리드 모달·우측 패널·캔버스 빈칸 */
.gr-ico-btn:hover,.gr-act-btn:hover{border-color:#c7d2fe !important;color:#6d5cff !important;background:#f5f3ff !important}
.gr-act-btn.del:hover{border-color:#fecaca !important;color:#dc2626 !important;background:#fef2f2 !important}
/* ★ 빈 섹션 높이 드래그 핸들 — 스캔 중에는 숨김 */
/* ★ (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:0;margin:6px 0 24px;overflow:hidden;box-sizing:border-box} /* ★ (2026-10-11) 영역 안 패딩 없음(배경색 = 이미지 틀만), 아래 표/단위와 24px 간격 */
.if-diagram.if-dh{display:flex;align-items:center;justify-content:center}.if-diagram.if-dh img,.if-diagram.if-dh svg{max-height:100%;width:auto} /* ★ (2026-10-11) 도식 영역 높이 고정(d.imgH) — 이미지 세로 맞춤 */
.if-diagram svg{max-width:var(--ifdw,72%);height:auto;vertical-align:top}.if-diagram img{max-width:var(--ifdw,100%);height:auto;vertical-align:top} /* ★ (2026-10-11) 도식 이미지 폭 = d.imgW(%) → --ifdw. 직접 이미지 기본 100%(양옆 패딩 없음), 기본 제공 SVG 는 72% */
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+클릭 안 가리게) */
/* ★ (2026-08-31) 항목 조작 툴바 — 크기 키움(12→22px), M(모션) 버튼 추가.
   ★ 스코프 = body:not(.lnd-view) — 메인/서브 어느 컨테이너든 편집상태 공통 적용(발행뷰만 제외) */
/* ★ (2026-09-01) 항목 도구 툴바(↑↓+−🔗M) — 항목 박스 "내부 상단"에 고정 (사용자 확정).
   내부라 hover 판정이 항상 박스 안 → 절대 안 꺼짐 + 섹션 하단 항목이어도 캔버스 밖으로 안 잘림.
   글씨/이미지 상단 일부를 hover 중에만 살짝 덮음(허용). 아이콘 gap 0 · 정사각형 딱붙음 · 3개씩 2줄(width:72px). */
body:not(.lnd-view) .wg_item_ctrl{position:absolute;top:3px;left:3px;bottom:auto;z-index:60;display:none;gap:0;flex-wrap:wrap;width:72px;border-radius:5px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3)}
body:not(.lnd-view) .wg_box_in:hover > .wg_item_ctrl{display:flex}
/* ★ 정사각형 · 여백 0 으로 딱 붙임 (hover 틈 제거). 묶음 바깥 모서리만 컨트롤 border-radius+overflow 로 둥글게 */
body:not(.lnd-view) .wg_item_ctrl button{border:0;width:24px;height:24px;border-radius:0;background:#4b5563;color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:1;display:flex;align-items:center;justify-content:center;padding:0}
body:not(.lnd-view) .wg_item_ctrl button:hover{opacity:1;background:#374151}
body:not(.lnd-view) .wg_item_ctrl button.d{background:#dc2626}
body:not(.lnd-view) .wg_item_ctrl button.d:hover{background:#b91c1c}
body:not(.lnd-view) .wg_item_ctrl button.lnk.on{background:#2563eb}
body:not(.lnd-view) .wg_item_ctrl button.mo{background:#9ca3af} /* 미설정 = 회색 */
body:not(.lnd-view) .wg_item_ctrl button.mo:hover{background:#6b7280}
body:not(.lnd-view) .wg_item_ctrl button.mo.on{background:#7c3aed} /* 설정됨 = 보라 */
body:not(.lnd-view) .wg_item_ctrl button.mo.on:hover{background:#6d28d9}
body:not(.lnd-view) .wg_item_ctrl button i{font-size:13px;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-09-06) 우측 날개 .bld-side-viewtools 폐지 — 미리보기 3종은 상단바 .bld-vt 로 이동 (파일 끝 '상단바 흰색 테마' 블록 참조) */
.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}
/* ★ (2026-09-01) 스티커 추가 도구 — 심플 연회색/회색, 아이콘+글씨 세로 */
.bld-side .stk-btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.bld-side .stk-shapes{flex-wrap:nowrap} /* 도형 6개 가로 한 줄 */
.bld-side .stk-btn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:8px;padding:9px 3px;font-size:11px;color:#475569;cursor:pointer;line-height:1.2}
.bld-side .stk-btn:hover{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.bld-side .stk-btn > i{font-size:17px;line-height:1;color:#64748b;display:flex;align-items:center;justify-content:center;height:18px}
/* ★ 스티커/글씨 2개 버튼 = 아이콘+글씨 가로 배열 (도형 6개는 세로 유지) */
.bld-side .stk-main .stk-btn{flex-direction:row;gap:7px;font-size:12.5px;padding:10px 6px}
.bld-side .stk-btn > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 도형 아이콘 = CSS로 그린 회색 도형 (18px 박스) */
.bld-side .stk-btn i[class^="stk-ic-"]{width:18px;height:18px;position:relative}
.bld-side .stk-ic-rect{border:2px solid #64748b}
.bld-side .stk-ic-round{border:2px solid #64748b;border-radius:5px}
.bld-side .stk-ic-pill{border:2px solid #64748b;border-radius:9px;height:11px !important;margin:3px 0}
.bld-side .stk-ic-circle{border:2px solid #64748b;border-radius:50%}
.bld-side .stk-ic-tri{width:0 !important;height:0 !important;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid #64748b}
.bld-side .stk-ic-line{height:0 !important;border-top:2px solid #64748b;width:18px;margin:8px 0}

/* 공통 모달 */
.shp-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:2000;display:none;align-items:center;justify-content:center}
#vmOv{z-index:2300} /* ★ (2026-10-14) 영상 고르기 창은 정보 편집 모달·배너 스와이퍼 설정 패널 위에 */
/* ★ 다른 모달(정보 편집/제목 편집) 위에서 열리는 선택용 모달 — 항상 앞에 (이미지 선택이 뒤로 숨는 문제) */
#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}
/* ★ (2026-10-14) 모달 헤더 위 미세한 밝은 선 — 둥근 모서리+overflow:hidden 틀의 흰 배경이 가장자리 안티앨리어싱으로 1px 비치던 것 (샵헬퍼와 동일 처치) */
.shp-md .hd{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-top:-1px;padding-top:13px;box-shadow:0 -1px 0 0 #0f172a}
.shp-md{background-clip:padding-box}
.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}
/* ★ (2026-09-01) 이미지 변경 모달 상단 탭 — 보라(#6d28d9) → 파랑(#2563eb)으로 통일 */
.imgpick.shp-md .tabs button.on{color:#2563eb;border-bottom-color:#2563eb}
.imgpick .it .fmeta{font-size:11px;color:#94a3b8;text-align:center;padding:0 4px 6px;min-height:14px;line-height:1.3}
/* ★ (2026-10-08) 1MB 초과 용량 경고 — 용량 빨강 + 경고 아이콘 */
.imgpick .it .fmeta .fsz.big{color:#dc2626;font-weight:700}
.imgpick .it .fmeta .fbig{color:#dc2626;font-size:14px;vertical-align:-3px;margin-left:2px;cursor:help}
/* ★ 상한을 200px로 둬 칸이 1열로 무한정 늘어나 이미지/이름이 잘리는 현상 방지 (1fr → 상한 고정) (2026-07-22) */
/* ★ 이미지 변경 모달만 화면 높이를 꽉 쓰게 (다른 모달 영향 없음) — 목록 스크롤 영역 확대 (2026-07-22) */
/* ★ (2026-09-16) 모달 전체 스크롤 — 예전엔 .grid(이미지 목록)만 자체 스크롤이라
   위쪽 영역(이미지 추가·HTML/SVG 소스 칸)이 길어지면 목록 몫이 사라져 이미지를 고를 수 없었다.
   → 헤더(.hd)만 상단 고정하고, 그 아래 내용 전체를 한 덩어리로 스크롤한다.
   (HTML 구조는 그대로. flex 컬럼은 유지하고 모달 자신에게 스크롤을 준다 —
    display:block 으로 바꾸면 내부 자식들의 기존 flex 배치가 깨진다.) */
.shp-md.imgpick{max-height:94vh;height:auto;overflow-y:auto;overflow-x:hidden;justify-content:flex-start}
.shp-md.imgpick > .hd{position:sticky;top:0;z-index:30;flex:none}
/* 자식들이 남는 세로 공간을 나눠 갖지 않게 — 내용만큼만 차지하고 위부터 쌓인다(하단 빈 공간 방지) */
.shp-md.imgpick > *{flex:0 0 auto}
/* ★ 가로만 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}
/* ★ (2026-09-16) 목록 자체 스크롤 해제 → 모달 전체 스크롤에 합류 (위 .shp-md.imgpick 규칙과 한 쌍).
   ※ 이 줄은 반드시 위 `.imgpick .grid{...overflow-y:auto...}` 보다 뒤에 있어야 이긴다(같은 특정성). */
.shp-md.imgpick > .grid{overflow:visible;max-height:none;flex:none;min-height:0;padding-bottom:18px}
/* 빈 목록(안내문만)일 때는 최소 높이를 되살려 답답하지 않게 */
.shp-md.imgpick > .grid:has(.empty){min-height:160px}
.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}
/* ★ (2026-09-01) 파일 형식 배지 — 오른쪽 하단(SVG/JSON 구분) */
.imgpick .grid .it .ftype{position:absolute;right:4px;bottom:26px;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;z-index:2;line-height:1.3;letter-spacing:.3px}
.imgpick .grid .it .ftype-svg{background:#7c3aed}
.imgpick .grid .it .ftype-json{background:#0d9488}
/* 로티(.json) 미리보기 컨테이너 — 카드 안 정렬 */
.imgpick .grid .it lottie-player{display:block;margin:0 auto;background:#fff}
/* ★ (2026-09-01) 형식 필터 버튼형 */
.imgtype-btns button{border:1px solid #cbd5e1;background:#fff;color:#64748b;border-radius:16px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.3}
.imgtype-btns button:hover{background:#f1f5f9}
.imgtype-btns button.on{background:#2563eb;border-color:#2563eb;color:#fff}
/* 업로드함 파일 삭제 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}
/* ★ (2026-09-16) 소스 읽기 — 이동 라벨 우측. SVG/이미지 소스를 위 입력칸으로 불러온다. */
.imgpick .grid .it .srcx{position:absolute;right:6px;bottom:34px;background:#7c3aed;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 .srcx{display:block}
.imgpick .grid .it .srcx:hover{background:#6d28d9}
.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}
/* ★ 이미지 첨부 세트 (2026-09-07) — 탭 대신 상단 접이식 박스: 찾기/카메라/캡쳐 붙여넣기 + 대기 썸네일 + 올릴 함 선택 + HTML 소스 (샵헬퍼 builder.css 동일) */
.imgpick .imgattach{border-bottom:1px solid #e2e8f0;background:#fff;flex:none}
.imgpick .ia-hd{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;background:#f8fafc;user-select:none}
.imgpick .ia-hd:hover{background:#f1f5f9}
.imgpick .ia-hd b{font-size:13.5px;color:#0f172a;white-space:nowrap}
.imgpick .ia-sub{font-size:11.5px;color:#94a3b8;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imgpick .ia-cnt{background:#4f46e5;color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:2px 9px;white-space:nowrap}
.imgpick .ia-arrow{font-size:20px;color:#64748b;line-height:1}
.imgpick .ia-bd{padding:10px 16px 12px}
/* 점선 박스 하나 = 드롭/붙여넣기 대상. 큰 아이콘(Phosphor duotone) 3개 중앙정렬 */
.imgpick .ia-drop{border:2px dashed #93c5fd;background:#f8fafc;border-radius:12px;padding:14px 12px 12px;text-align:center;outline:none;transition:background .15s,border-color .15s}
.imgpick .ia-drop:focus,.imgpick .ia-drop.over{border-color:#2563eb;background:#eff6ff}
.imgpick .ia-acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.imgpick .ia-act{border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 16px;border-radius:12px;color:#334155;min-width:130px;font-family:inherit}
.imgpick .ia-act:hover{background:#fff;box-shadow:0 1px 5px rgba(15,23,42,.1)}
.imgpick .ia-act i{font-size:56px;color:#2563eb;line-height:1}
.imgpick .ia-act span{font-size:12.5px;font-weight:700;white-space:nowrap}
.imgpick .ia-act span b{color:#2563eb}
.imgpick .ia-drop-hint{font-size:11.5px;color:#94a3b8;margin-top:8px}
.imgpick .ia-drop-hint b{color:#2563eb}
/* 올릴 함 스위치 + 올리기 */
.imgpick .ia-row2{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.imgpick .ia-seg{display:inline-flex;background:#eef2f7;border-radius:9px;padding:3px;gap:2px}
.imgpick .ia-seg button{border:0;background:transparent;border-radius:7px;padding:8px 14px;font-size:12.5px;font-weight:700;color:#64748b;cursor:pointer;white-space:nowrap;font-family:inherit}
.imgpick .ia-seg button:hover{color:#0f172a}
.imgpick .ia-seg button.on{background:#0f172a;color:#fff}
.imgpick .ia-up{border:0;background:#2563eb;color:#fff;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.imgpick .ia-up:hover{background:#1d4ed8}
.imgpick .ia-row2 .ia-up{margin-left:auto}
.imgpick .ia-pend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px;padding:10px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;align-items:flex-start;text-align:left}
.imgpick .ia-th{position:relative;width:76px;flex:none}
.imgpick .ia-th img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:1px solid #e2e8f0;background:#fff;display:block}
.imgpick .ia-th .ia-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#dc2626;color:#fff;font-size:15px;line-height:22px;text-align:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.imgpick .ia-th .ia-x:hover{background:#b91c1c}
.imgpick .ia-th .ia-fn{font-size:10px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.imgpick .ia-pend-note{width:100%;font-size:12px;color:#475569}
.imgpick .ia-html{margin-top:10px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.imgpick .ia-html-hd{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;background:#fafafa;user-select:none}
.imgpick .ia-html-hd b{font-size:12.5px;color:#0f172a;white-space:nowrap}
.imgpick .ia-html-hd:hover{background:#f1f5f9}
.imgpick .ia-html-bd{padding:10px 12px}
.imgpick .ia-html-bd textarea{width:100%;box-sizing:border-box;min-height:80px;border:1px solid #cbd5e1;border-radius:8px;padding:8px;font-size:12.5px;font-family:Consolas,monospace;resize:vertical}
/* ★ (2026-09-14) HTML 소스 입력칸 + 우측 크기/색 패널 — 아이콘폰트(<i>) 크기·색 지정용 */
.imgpick .ia-html-row{display:flex;gap:10px;align-items:stretch}
.imgpick .ia-html-row textarea{flex:1;min-width:0}
.imgpick .ia-html-side{flex:0 0 132px;display:flex;flex-direction:column;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:8px 9px}
.imgpick .ia-hs-l{font-size:11.5px;font-weight:700;color:#334155;margin-bottom:3px}
.imgpick .ia-hs-in{display:flex;align-items:center;gap:5px}
.imgpick .ia-hs-in input[type=text]{width:56px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:6px;padding:5px 6px;font-size:12px;font-family:Consolas,monospace;text-align:center}
.imgpick .ia-hs-in input[type=color]{width:30px;height:26px;border:1px solid #cbd5e1;border-radius:6px;padding:1px;cursor:pointer;background:#fff}
.imgpick .ia-hs-in b{font-size:11px;color:#94a3b8;font-weight:400}
.imgpick .ia-hs-ck{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#475569;cursor:pointer;white-space:nowrap}
.imgpick .ia-hs-ck input{margin:0}
.imgpick .ia-hs-pv{margin-top:8px;height:44px;border:1px dashed #cbd5e1;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#94a3b8;font-size:10.5px}
.imgpick .ia-hs-pv img,.imgpick .ia-hs-pv svg{max-width:100%;max-height:100%;object-fit:contain}
.imgpick .ia-hs-tip{font-size:10px;color:#94a3b8;line-height:1.45;margin-top:6px}
@media (max-width:640px){
  .imgpick .ia-html-row{flex-direction:column}
  .imgpick .ia-html-side{flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  .imgpick .ia-hs-l{margin:0}
  .imgpick .ia-hs-pv{margin:0;width:44px;flex:none}
  .imgpick .ia-hs-tip{flex:1 0 100%;margin:0}
}
.imgpick .ia-html-ft{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;align-items:center;flex-wrap:wrap}
/* ★ (2026-09-16) SVG 칸 전용 — 우측 열을 넓히고(미리보기 크게) 그 밑에 색 팔레트·저장이름을 세로로. */
.imgpick .ia-svg-row .ia-svg-side{flex:0 0 230px}
.imgpick .ia-svg-row textarea{min-height:230px}
.imgpick .ia-svg-pv{height:150px;background:#fff}
.imgpick .ia-svgname{margin-top:9px;padding-top:9px;border-top:1px solid #e2e8f0}
.imgpick .ia-svgname input[type=text]{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:6px;padding:7px 9px;font-size:12.5px;color:#111827}
@media (max-width:640px){
  /* 모바일 = 세로 1열. 우측 열도 가로 배치 해제하고 원래대로 쌓는다. */
  .imgpick .ia-svg-row .ia-svg-side{flex:none;flex-direction:column;align-items:stretch}
  .imgpick .ia-svg-pv{width:auto;height:170px;margin-top:8px}
  .imgpick .ia-svg-row .ia-svg-side .ia-hs-l{margin-bottom:3px}
  .imgpick .ia-svg-row .ia-svg-side .ia-hs-tip{flex:none;margin-top:6px}
}
/* ★ (2026-09-16) SVG 색 팔레트 — 소스 안의 색을 동그라미로 나열, 클릭해서 변경.
   ★ (2026-09-16) 색 기조 정리 — 배경은 연한 회색/라인으로만 구분, 글씨는 검정. */
.imgpick .ia-svgpal{margin-top:9px;padding-top:9px;border-top:1px solid #e2e8f0}
.imgpick .ia-svgpal-hd{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.imgpick .ia-svgpal-hd b{font-size:12px;color:#111827;font-weight:800}
.imgpick .ia-svgpal-all{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#111827;font-weight:700}
.imgpick .ia-svgpal-all input[type=color]{width:26px;height:26px;padding:0;border:1px solid #cbd5e1;border-radius:6px;background:#fff;cursor:pointer}
/* 선 두께 */
.imgpick .ia-svgsw{margin-top:9px;padding-top:9px;border-top:1px solid #e2e8f0}
.imgpick .ia-svgsw-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.imgpick .ia-svgsw-hd b{font-size:12px;color:#111827;font-weight:800}
.imgpick .ia-svgsw-hd span{font-size:11.5px;color:#111827;font-weight:700}
.imgpick .ia-svgsw-row{display:flex;align-items:center;gap:8px}
.imgpick .ia-svgsw-row input[type=range]{flex:1;accent-color:#334155}
.imgpick .ia-svgsw-row button{flex:none;border:1px solid #cbd5e1;background:#fff;color:#111827;border-radius:6px;padding:5px 10px;font-size:11.5px;cursor:pointer}
.imgpick .ia-svgsw-row button:hover{background:#f1f5f9}
.imgpick .ia-svgpal-row{display:flex;flex-wrap:wrap;gap:7px}
.imgpick .ia-svgpal-c{position:relative;width:30px;height:30px;cursor:pointer;display:block}
.imgpick .ia-svgpal-c input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.imgpick .ia-svgpal-dot{display:block;width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1,0 1px 3px rgba(0,0,0,.14);pointer-events:none}
.imgpick .ia-svgpal-c:hover .ia-svgpal-dot{box-shadow:0 0 0 2px #7c3aed,0 1px 4px rgba(0,0,0,.2)}
.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 모달 */
/* ★ (2026-08-31) textarea — 회색 박스(.wjsave-box) 안. box-sizing으로 폭 안전 */
.wjmd textarea{display:block;width:100%;box-sizing:border-box;height:300px;border:1px solid #d8dee9;border-radius:8px;padding:12px 14px;font-size:12px;font-family:Consolas,monospace;outline:none;background:#fff}
/* ★ 모든 모달 입력창: 기본 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}
/* ★ (2026-08-31) 심플 무채색 UI — 저장 대상 스위치. 선택 시 uil-check 아이콘 노출 */
.wjmode-row{gap:10px}
.wjmode-grp{display:inline-flex;gap:6px;flex-wrap:wrap}
.wjmode{display:inline-flex;align-items:center;gap:5px;border:1px solid #d1d5db;background:#fff;color:#6b7280;border-radius:7px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.wjmode i{font-size:15px;width:0;opacity:0;overflow:hidden;transition:.12s} /* 미선택 시 아이콘 자리 접힘 */
.wjmode:hover{background:#f9fafb;border-color:#9ca3af}
.wjmode.on{background:#374151;border-color:#374151;color:#fff}
.wjmode.on i{width:15px;opacity:1}
/* ★ ? 도움말 아이콘 — 오버 시 커스텀 말풍선(data-tip) */
.wjhelp{position:relative;display:inline-flex;align-items:center;color:#9ca3af;cursor:help;font-size:15px;line-height:1}
.wjhelp:hover{color:#4b5563}
.wjhelp::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:normal;width:max-content;max-width:260px;background:#1f2937;color:#f3f4f6;font-size:11.5px;font-weight:400;line-height:1.5;text-align:left;padding:8px 10px;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:.14s;pointer-events:none;z-index:20}
.wjhelp::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:5px solid transparent;border-top-color:#1f2937;opacity:0;visibility:hidden;transition:.14s;z-index:20}
.wjhelp:hover::after,.wjhelp:focus::after,.wjhelp:hover::before,.wjhelp:focus::before{opacity:1;visibility:visible}
.wjhelp-hd{margin-left:2px}
.wjhelp-hd i{color:#94a3b8}
.wjhelp-hd:hover i{color:#e2e8f0}
/* 헤더 안 말풍선은 아래로 (헤더가 잘리지 않게) */
.wjhelp-hd::after{bottom:auto;top:calc(100% + 8px)}
.wjhelp-hd::before{bottom:auto;top:calc(100% + 3px);border-top-color:transparent;border-bottom-color:#1f2937}
/* ★ (2026-08-31) 항목 등장 모션 설정 모달 (작은) */
.lndmo-md{width:min(360px,94vw)}
.lndmo-bd{padding:14px 16px}
.lndmo-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.lndmo-row label{flex:0 0 96px;font-size:12.5px;font-weight:600;color:#374151;display:flex;align-items:center;gap:4px}
.lndmo-row select,.lndmo-row input{flex:1;min-width:0;border:1px solid #d1d5db;border-radius:6px;padding:8px 9px;font-size:12.5px;background:#fff;color:#374151;box-sizing:border-box}
.lndmo-row input[type=number]{-moz-appearance:textfield}
.lndmo-row input::-webkit-outer-spin-button,.lndmo-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lndmo-check{display:flex;align-items:center;gap:7px;margin-top:2px;padding:9px 11px;background:#f3f0fb;border:1px solid #e4dcf7;border-radius:7px;font-size:12.5px;font-weight:600;color:#5b21b6;cursor:pointer}
.lndmo-check input{width:16px;height:16px;cursor:pointer;accent-color:#7c3aed;flex:none}
/* ★ (2026-08-31) 불러오기 좌우 통일 카드 — 하단 패딩으로 저장영역과 간격 */
.wjpull-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 16px 14px}
/* ★ (2026-08-31) 저장 대상 ~ JSON 소스 회색 묶음 박스 */
.wjsave-box{margin:0 16px 4px;background:#f7f8fa;border:1px solid #e5e7eb;border-radius:10px;padding:12px}
.wjsave-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#6b7280;line-height:1.6;margin-bottom:8px}
.wjsave-row b{color:#374151;flex:none}
.wjsave-inp{flex:1;min-width:170px;border:1px solid #d1d5db;border-radius:6px;padding:8px 10px;font-size:13px;background:#fff;color:#374151}
.wjpull-card{background:#f7f8fa;border:1px solid #e5e7eb;border-radius:9px;padding:11px 12px}
.wjpull-t{font-size:12px;font-weight:700;color:#4b5563;margin-bottom:8px}
.wjpull-r{display:flex;gap:6px}
.wjpull-r select,.wjpull-r input{flex:1;min-width:0;border:1px solid #d1d5db;border-radius:6px;padding:8px 9px;font-size:12.5px;background:#fff;color:#374151}
.wjpull-r button{flex:none;border:0;background:#4b5563;color:#fff;border-radius:6px;padding:8px 13px;font-size:12px;font-weight:600;cursor:pointer;transition:.12s}
.wjpull-r button:hover{background:#374151}
@media (max-width:620px){.wjpull-grid{grid-template-columns:1fr}}

/* ★ 씨스루 모달 — 어두운 배경 없이 실제 페이지를 보며 수정 (텍스트 변경) */
.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}
/* ★ (2026-09-01) 아이콘 설정 아코디언 (Lucide/Phosphor) — 본그누 인라인수정 이식 */
#txtIconBox{margin-top:12px;border-top:1px dashed #d1d5db;padding-top:10px}
.txtmd .tic-acc{border:1px solid #e2e8f0;border-radius:8px;margin-bottom:8px;overflow:hidden}
.txtmd .tic-acc-hd{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#f8fafc;cursor:pointer;font-size:13px;font-weight:700;color:#334155;user-select:none}
.txtmd .tic-acc-hd small{font-weight:400;color:#9ca3af}
.txtmd .tic-arrow{font-size:10px;color:#94a3b8;transition:transform .15s}
.txtmd .tic-arrow.collapsed{transform:rotate(-90deg)}
.txtmd .tic-acc-bd{padding:10px 12px}
.txtmd .tic-acc-bd.collapsed{display:none}
.txtmd .tic-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.txtmd .tic-row:last-child{margin-bottom:0}
.txtmd .tic-lbl{font-size:12px;color:#64748b;font-weight:700;min-width:40px}
.txtmd .tic-row input[type=text]{flex:1;min-width:100px;border:1px solid #d1d5db;border-radius:6px;padding:6px 9px;font-size:12px}
.txtmd .tic-row select{border:1px solid #d1d5db;border-radius:6px;padding:6px 8px;font-size:12px}
.txtmd .tic-btn{border:1px solid #d1d5db;background:#fff;border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer;color:#475569;text-decoration:none;white-space:nowrap}
.txtmd .tic-btn:hover{background:#f1f5f9}
.txtmd .tic-btn.ins{background:#10b981;border-color:#10b981;color:#fff;font-weight:700}
.txtmd .tic-btn.ins:hover{background:#059669}
.txtmd .tic-color{width:38px;height:30px;border:1px solid #d1d5db;border-radius:6px;padding:2px;background:#fff;cursor:pointer}
.txtmd .tic-hex{width:80px;flex:none !important;font-family:monospace}
.txtmd .tic-hint{font-size:11px;color:#9ca3af;line-height:1.5;padding:0 2px 6px}
/* ★ (2026-10-01) 컬러픽/em픽 스와치 — 본그누 인라인수정 이식 (컬러 시스템 클래스 토글) */
.txtmd .tcp-wrap{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.txtmd .tcp-box{flex:1 1 50%;min-width:0;border:1px solid #e5e7eb;border-radius:8px;padding:8px;overflow:hidden}
.txtmd .tcp-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;font-weight:700;color:#64748b}
.txtmd .tcp-sw{display:flex;flex-direction:column;gap:3px;align-items:stretch}
.txtmd .tcp-empty{font-size:11px;color:#94a3b8}
/* (2026-10-01) 그룹 = 한 줄(라벨 + 원), 박스 폭을 넘치면 원이 줄바꿈 — 원 13px·간격 2px 로 셰이드 10개가 반 박스 안에 들어감 */
.txtmd .tcp-grp{display:flex;flex-wrap:wrap;align-items:center;gap:2px;width:100%;min-width:0}
.txtmd .tcp-grp .lb{font-size:10px;color:#888;flex:0 0 auto;min-width:22px;margin-right:2px;white-space:nowrap}
.txtmd .tcp-dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0;flex:0 0 auto}
.txtmd .tcp-dot:hover{transform:scale(1.15)}
.txtmd .tcp-dot.active{outline:2px solid #6d28d9;outline-offset:1px}
@media (max-width:640px){.txtmd .tcp-wrap{flex-direction:column}}
/* ★ (2026-09-01) 아이콘 생성기 모달 — 작은 버튼 */
#iconGenOv .ig-sw{border:1px solid #d1d5db;background:#fff;border-radius:6px;padding:6px 11px;font-size:12px;cursor:pointer;color:#475569}
#iconGenOv .ig-sw:hover{background:#f1f5f9}
/* 모드 탭 (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) */
/* ★ (2026-10-20) 인라인 전용 = 컬러·폰트(랜딩 전체 디자인)는 제작소 기능 — AI 편집 요금제로 레일 하단이 보여도 숨김 (서버도 차단) */
body.lnd-inline-only .lr-color,
body.lnd-inline-only .lr-font{display:none !important}
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 #wjlibOpen,
body.lnd-inline-only #lndPageDock,
body.lnd-inline-only #lndPageToggle,
body.lnd-inline-only #lndLeftRail,
body.lnd-inline-only .bld-hint{display:none !important}
/* ★ (2026-09-07) 인라인만 편집 + 요금제 [AI 편집] 허용(body.lnd-aiedit-on) = 레일을 보이되 하단 이미지 도구 그룹(자르기·배경제거·AI 편집)만. 상단 설정 아이콘·레이어·라이브러리는 그대로 숨김 */
body.lnd-inline-only.lnd-aiedit-on #lndLeftRail{display:flex !important}
body.lnd-inline-only.lnd-aiedit-on #lndLeftRail > .lr-btn,
body.lnd-inline-only.lnd-aiedit-on #lndLeftRail > .lr-sep,
body.lnd-inline-only.lnd-aiedit-on #lndLeftRail > #lndPageToggle,
body.lnd-inline-only.lnd-aiedit-on #lndLeftRail > #wjlibOpen{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 #mockwWrap,
body.lnd-inline-only .bld-top #tabwWrap,
body.lnd-inline-only .bld-top #innerWrap,
body.lnd-inline-only .bld-top #devModel,
body.lnd-inline-only .bld-top #devRotBtn,
body.lnd-inline-only .bld-top #devScaleWrap,
body.lnd-inline-only .bld-top #lndUnifyBtn,
body.lnd-inline-only .bld-top #lndDimWrap,
body.lnd-inline-only #lndToolsHideBtn,
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}
/* ★ (2026-08-23) 인라인 전용 = 글씨/이미지 "교체"만. 디자인·구조·기기설정 조작 UI 전부 숨김:
   모바일통일·도구감추기·회전·목업폭·태블릿폭 + 실기기 미리보기 + 단축키 안내(Alt 이미지편집 안내 무의미). */
body.lnd-inline-only #bldFloatTools #bftDeviceBtn,
body.lnd-inline-only .bld-top #bldDeviceBtnTop,
body.lnd-inline-only #infoWrap{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}

/* ★ (2026-10-03) 개별 잠근 자리 표시 — 편집 화면에서만 옅은 빗금. [스크린샷 준비]·인쇄·산출에서는 완전히 사라진다.
   ★ (fix) 종전엔 body.shp-locked(고객 화면)에만 걸어서, 제작자가 샘플에서 잠가도 화면이 그대로라
      "잠긴 건지 아닌지" 알 수 없었다. 제작자 화면에서도 보이게 접두를 걷어낸다. */
.blk.blk-lk::after,
[data-shp-lk="1"]::after,
[data-lk="1"]::after{
  content:'';position:absolute;inset:0;z-index:12;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(45deg,rgba(100,116,139,.085) 0 7px,transparent 7px 14px);
  outline:1px dashed rgba(100,116,139,.35);outline-offset:-1px;
}
body.shp-scanning .blk.blk-lk::after,
body.shp-scanning [data-lk="1"]::after,
body.shp-scanning [data-shp-lk="1"]::after,
body.shp-printing .blk.blk-lk::after,
body.shp-printing [data-lk="1"]::after,
body.shp-printing [data-shp-lk="1"]::after{display:none !important}
body.shp-locked .blk.blk-lk,body.shp-locked [data-lk="1"],body.shp-locked [data-shp-lk="1"]{cursor:not-allowed}
[data-shp-lk="1"]{position:relative}   /* 글씨 래퍼에 빗금을 얹기 위한 기준 */

/* ★ (2026-10-03) 편집 금지 이미지 — 빗금 + 자물쇠로 "이 이미지는 못 바꾼다"를 눈으로 알 수 있게.
   제작자(설정한 사람)와 고객 양쪽 모두 보인다. 캡처·인쇄에서는 사라진다. */
[data-edlk="1"]{position:relative}
body.shp-locked [data-edlk="1"]{cursor:not-allowed}
[data-edlk="1"]::after{
  content:'';position:absolute;inset:0;z-index:12;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(45deg,rgba(100,116,139,.09) 0 7px,transparent 7px 14px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='rgba(71,85,105,.5)' stroke-width='1.8'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>") no-repeat center;
  outline:1px dashed rgba(100,116,139,.35);outline-offset:-1px;
}
body.shp-scanning [data-edlk="1"]::after,
body.shp-printing [data-edlk="1"]::after{display:none !important}

/* ★ (2026-10-03) 저작권 보호 이미지 워터마크 — 아직 안 바꾼 이미지 위에 "바꾸세요" 경고.
   ⚠️ 빗금과 달리 캡처·산출에도 그대로 들어간다(의도) — 안 바꾸면 결과물에 찍혀 나가므로 바꿀 수밖에 없다. */
.xlock-wm{position:absolute;left:0;top:0;right:0;bottom:0;z-index:13;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:repeating-linear-gradient(-32deg,rgba(255,255,255,0) 0 26px,rgba(15,23,42,.13) 26px 52px)}
.xlock-wm b{display:block;transform:rotate(-16deg);color:#fff;background:rgba(15,23,42,.58);border:2px dashed rgba(255,255,255,.85);
  border-radius:10px;padding:.4em .9em;line-height:1.35;font-family:'Pretendard','Malgun Gothic',sans-serif;font-weight:800;
  text-align:center;white-space:nowrap;max-width:96%;overflow:hidden;text-overflow:ellipsis}
/* ★ (2026-10-03) 두 가지 섹션 잠금은 성격이 달라 표시도 다르게 한다.
   ① 제작자 잠금(lk)   = 자물쇠 · 검정 — "고객이 못 바꾸게" (샘플에서 건다)
   ② 복사본 지키기(cplk) = 방패 · 초록 — "샘플로 리셋해도 내 변경을 지키게" (복사본에서 건다) */
#blkSelRail button.lk{background:#0f172a !important;opacity:1 !important}
#blkSelRail button.lk i{color:#fff !important}
#blkSelRail button.lk:hover{background:#1e293b !important}
#blkSelRail button.cplk{background:#047857 !important;opacity:1 !important}
#blkSelRail button.cplk i{color:#fff !important}
#blkSelRail button.cplk:hover{background:#065f46 !important}
/* 카드 안 버튼 */
.bsr-card .qa.qa-lk-on{background:#0f172a;color:#fff}
.bsr-card .qa.qa-lk-on i{color:#fff}
.bsr-card .qa.qa-cplk-on{background:#ecfdf5;border-color:#6ee7b7;color:#047857}
.bsr-card .qa.qa-cplk-on i{color:#059669}

/* ★ 스캔 저장 중 — 화면 전용 표시물 숨김 (실제 픽셀 캡처라 화면에 보이면 찍힌다) */
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} /* 여백 블록 빗금(편집 표시)도 산출에서 제외 */
/* ★ (2026-08-31) 스캔 중 = 발행 화면과 동일하게. 감춘 블록(blk-hidden)·현재기기 감김(blk-dev-dim)은 편집에서 opacity:.4 로 보이지만 발행선 숨김 → 스캔에서도 완전히 숨김. */
body.shp-scanning .blk.blk-hidden,
body.shp-scanning .blk.blk-dev-dim{ display:none !important; }
/* 감김 블록의 편집용 반투명/뱃지도 무효화(혹시 display 안 먹는 케이스 대비 완전 투명) */
body.shp-scanning .blk.blk-hidden,
body.shp-scanning .blk.blk-dev-dim{ opacity:0 !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 보관함 날개 (몽구식) */
/* ★ (2026-08-30) 펼친 라이브러리 = 레이어 dock처럼 상하 꽉 채움(top=헤더52, bottom=0). z-index 1700 = 레이어(1600)보다 위 → 펼치면 위로 올라와 안 가려짐. 왼쪽 상단 토글버튼(48px 2개) 위엔 헤더 좌패딩으로 제목 안 가림. */
/* ★ (2026-08-30) 펼친 라이브러리 z 1720 = 레이어 dock/토글(1710)보다 위 → 열렸을 때 라이브러리가 화살표·버튼 위로 올라와 안 가려짐. (접힘 .wjlib.min 은 아래에서 z 낮춤) */
/* ★ (2026-08-30) 좌우 슬라이드 = 같은 위치(top52·width184)에서 transform만 변화. 펼침 translateX(0), 접힘 translateX(-100%)(왼쪽으로 밀려 숨고 격자버튼만 남음). 위아래 안 움직임. */
.wjlib{position:fixed;left:0;top:52px;bottom:0;width:184px;z-index:1720;background:#fff;border:1px solid #cbd5e1;border-left:0;border-top:0;border-radius:0;display:flex;flex-direction:column;box-shadow:2px 4px 14px rgba(15,23,42,.12);transform:translateX(0);transition:transform .22s ease}
.wjlib .hd{background:#0f172a;color:#fff;font-size:12px;font-weight:700;padding:9px 10px;border-radius:0;cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
/* ★ (2026-08-30) 펼침 헤더 우측 = X 닫기 버튼 (uil-times). 헤더 클릭 = 접기(toggle min)이므로 이 X가 닫기 역할 */
.wjlib .hd .fold{margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:#cbd5e1;font-weight:700;font-size:18px;border-radius:6px;transition:background .12s}
.wjlib .hd:hover .fold{background:rgba(255,255,255,.14);color:#fff}
.wjlib .hd .fold::before{content:'\eb79';font-family:'unicons-line'} /* uil-angle-left (< 접기) */
.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;z-index:2}
.wjlib .it:hover .del{display:block}
/* ★ (2026-09-01) 우측 하단 액션 버튼(복사 / 스티커 넣기) — 삭제 X는 여기서 제거(라이브러리 관리에서만 삭제) */
.wjlib .it .itbtns{position:absolute;right:3px;bottom:3px;display:none;gap:3px;z-index:3}
.wjlib .it:hover .itbtns{display:flex}
.wjlib .it .itbtns button{width:20px;height:20px;border:0;color:#fff;border-radius:6px;font-size:12px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.wjlib .it .itbtns button i{font-size:12px}
.wjlib .it .itbtns .cpy{background:rgba(15,23,42,.62)}
.wjlib .it .itbtns .cpy:hover{background:#2563eb}
.wjlib .it .itbtns .stk{background:rgba(37,99,235,.85)}
.wjlib .it .itbtns .stk:hover{background:#1d4ed8}
/* ★ (2026-09-01) 항목 목록 = 가로 3칸 정사각 썸네일 그리드 (제목·순서화살표 숨김, 쭈르륵 진열) */
.wjlib .itgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.wjlib .itgrid .it{aspect-ratio:1/1}
.wjlib .itgrid .it img,.wjlib .itgrid .it .noimg,.wjlib .itgrid .it .ico-pv{width:100%;height:100%;object-fit:cover;object-position:center;min-height:0}
.wjlib .itgrid .it .ico-pv{font-size:26px}
.wjlib .itgrid .it .noimg{font-size:10px}
.wjlib .itgrid .it .nm{display:none} /* 제목 숨김 */
/* 순서 이동 화살표(◤◢) 숨김 — .del(우상단 X)만 남김 */
.wjlib .itgrid .it > button[title^="위로"],.wjlib .itgrid .it > button[title^="아래로"]{display:none !important}
.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}
/* 접힘 = 아이콘( > ) 탭만 */
/* ★ (2026-08-30) 접힘 = 패널만 왼쪽으로 슬라이드(translateX -100%)해서 완전히 숨김. 열기 버튼은 별도 #wjlibOpen(패널 밖)이라 안 딸려감. */
/* ★ (2026-08-30) 접힘 시 border·그림자 제거 = 왼쪽으로 밀린 패널의 오른쪽 border(1px 흰회색)가 화면 x=0에 세로 흰줄로 비치는 것 방지 */
.wjlib.min{transform:translateX(-100%);pointer-events:none;border:0;box-shadow:none}
/* ★ 독립 열기 버튼 — 항상 왼쪽 고정(레이어 버튼 아래 top:100). 패널 열리면(.wjlib가 min 아님) 숨김. */
#wjlibOpen{position:fixed;left:0;top:100px;width:48px;height:48px;box-sizing:border-box;border:0;margin:0;padding:0;border-radius:0;background:#2563eb;color:#fff;cursor:pointer;z-index:1706;box-shadow:2px 2px 8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:22px}
#wjlibOpen:hover{background:#1d4ed8}
/* 열림/닫힘 시 열기버튼 표시는 인라인 JS(onclick)가 style.display 토글로 처리 — :has 미지원 폴백 */
body.shp-frame .wjlib,body.shp-locked .wjlib,body.shp-scanning .wjlib,
body.shp-frame #wjlibOpen,body.shp-locked #wjlibOpen,body.shp-scanning #wjlibOpen{display:none !important}

/* ★ INFO 미디어 박스 (유튜브/비메오/mp4/gif — 1~3개) */
/* ★ (2026-09-13) 미디어 박스는 기본 여백 0 — 여백은 [선택한 섹션 — 스타일 설정]의 안쪽여백에서만.
   .if-sec 공통 padding(10px 24px) 중 상하 10px 를 여기서 0 으로. 좌우는 renderInfoBlock 이 인라인 0. */
/* ★ (2026-10-20) 지도 · 오시는 길 정보 섹션 */
.if-map{width:100%}
.if-map-frame{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#eef2f7}
.if-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.if-map-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed #cbd5e1;border-radius:12px;color:#94a3b8;font-size:14px}
.if-map-empty i{font-size:30px}
.if-map-info{padding:14px 2px 4px;line-height:1.7}
.if-map-name{font-size:1.15em;font-weight:800;color:#0f172a}
.if-map-addr{font-size:.95em;color:#334155}
.if-map-copy{margin-left:6px;border:1px solid #cbd5e1;background:#fff;border-radius:6px;padding:1px 8px;font-size:12px;color:#475569;cursor:pointer;vertical-align:1px}
.if-map-tel a{color:#334155;text-decoration:none;font-weight:700}
.if-map-note{font-size:.92em;color:#64748b;margin-top:4px}
.if-map-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* 버튼 = 한 가지 색(흰 바탕·회색 테두리) + 라운드 6px + 앞 아이콘(공용 이미지 /_img/common/map) */
.if-map-btn{flex:1 1 0;min-width:110px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#0f172a;font-size:14px;font-weight:700;text-decoration:none;box-sizing:border-box;transition:border-color .15s,background .15s}
.if-map-btn:hover{border-color:#94a3b8;background:#f8fafc}
.if-map-btn img{width:20px;height:20px;object-fit:contain;flex:0 0 auto;border-radius:4px}
.if-sec.if-media{padding-top:0;padding-bottom:0}
.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-09-01) 아이콘 생성기 = admin 전용, 보라 계열로 구분 */
.shp-dock button.dock-icongen{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 4px 12px rgba(124,58,237,.4)}
.shp-dock button.dock-icongen:hover{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
/* ★ 이미지함 줄 (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 #wjlibOpen,
  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,
body.shp-mobile-view #wjlibOpen{ 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 #wjlibOpen,
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; }
/* ★ (2026-08-27) 게시판 inner = 다른 섹션(정보/헤더/푸터)과 동일 폭. 게시판 콘텐츠가 inner 밖으로 못 넘게. */
.board-area-inner{ width:100%; box-sizing:border-box; margin-left:auto; margin-right:auto; }
.board-area-inner > *{ max-width:100%; box-sizing:border-box; }
/* inline 게시판(랜딩전용) 프래그먼트도 inner 폭에 딱 맞게 */
.board-area-inner .lnd-board-inline{ width:100%; max-width:100%; box-sizing:border-box; }
.board-area-inner .lnd-board-inline .lb-wrap{ max-width:100% !important; width:100%; margin:0; box-sizing:border-box; }

/* 무대 = 편집 여백 제거, 발행 배경 */
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 }
/* ★ (2026-08-28) sticky footer — 내용이 짧아도 푸터를 화면 바닥으로. 래퍼가 세로 flex 면 푸터에 margin-top:auto.
   구조: .lndv-content > (.lndv-hf-header + #canvas + .lndv-hf-footer). 푸터 래퍼를 바닥으로 민다. */
body.lnd-view .lndv-content{ display:flex; flex-direction:column; min-height:100vh }
body.lnd-view .lndv-content > .lndv-hf-footer{ margin-top:auto }
/* flex 컨테이너 안에서 헤더/캔버스가 세로로 찌그러지지 않게 (본문은 자기 높이 유지, 푸터가 auto 여백으로 바닥) */
body.lnd-view .lndv-content > .lndv-hf-header,
body.lnd-view .lndv-content > #canvas{ flex:0 0 auto }
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-28) sticky footer — 내용 짧아도 푸터가 목업 바닥에 붙게. 세로 flex + min-height 채움. */
  display:flex; flex-direction:column; min-height:92vh; box-sizing:border-box;
  /* ★ (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 }
/* ★ (2026-08-28) full100 도 sticky footer 유지 — flex column + min-height:100vh (내용 짧아도 푸터 바닥) */
body.lnd-view.lndv-full100 .lndv-content{ min-height:100vh !important; max-height:none !important; overflow:visible !important; height:auto !important; display:flex !important; flex-direction:column !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%; }
/* ★ (2026-08-30) 캔버스 마지막 섹션의 하단 마진(섹션간격 S.gap) 제거 → 푸터가 바디 마지막 섹션에 딱 붙음(캔버스-푸터 빈공간 제거). */
#canvas > .blk:last-child{ margin-bottom:0 !important; }
/* ★ (2026-08-31) 푸터가 있는 콘텐츠(.lndv-content)에서는 캔버스 하단 패딩(화면 전체 패딩 하단)도 제거 → 푸터가 마지막 섹션에 딱 붙음.
   .lndv-hf-footer:empty 는 display:none 이라, 푸터가 실제로 있을 때만 이 규칙이 의미. :has 미지원 대비 편집·발행 모두 적용. */
.lndv-content > #canvas, .lndv-content-edit > #canvas{ padding-bottom:0 !important; }
.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). */
/* ★ (2026-08-30) z 1710 = 라이브러리(1700)보다 위 → 왼쪽 위 레이어 토글버튼이 라이브러리 펼침 헤더에 안 가리고 항상 보임 */
#lndPageDock{position:fixed;left:0;top:52px;bottom:0;width:300px;background:#0f172a;color:#e2e8f0;z-index:1710;
  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);box-shadow:none;border-right:0} /* ★ 닫힘 시 그림자·보더 제거 = 화면 왼쪽 라인 비침 방지 (2026-08-30) */
/* ★ (2026-08-30) 레이어 열기 버튼 = dock 밖 독립 fixed 요소 → dock 슬라이드에 안 딸려가고 항상 화면 왼쪽 헤더아래(top:52) 고정.
     48×48 진곤. 라이브러리 열기버튼(top:100)과 세로 라인 일치(left:0). 닫힘일 때만 보임(열림=display:none, JS 제어). */
#lndPageToggle{position:fixed;left:0;top:52px;width:48px;height:48px;box-sizing:border-box;border:0;border-radius:0;margin:0;padding:0;
  background:#0f172a;color:#fff;cursor:pointer;font-size:22px;font-weight:700;box-shadow:2px 2px 8px rgba(0,0,0,.25);z-index:1706;
  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}
/* ★ (2026-08-30) 레이어 헤더 우측 닫기 버튼 */
#lndPageDock .lpd-close{margin-left:auto;width:26px;height:26px;flex:none;border:0;background:transparent;color:#cbd5e1;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .12s}
#lndPageDock .lpd-close:hover{background:rgba(255,255,255,.14);color:#fff}
#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}
/* ★ (2026-08-31) box-sizing 추가 — 인라인 width 가 패딩 포함이 되어 3자리(100~120)+스핀버튼이 안 잘리게 */
.hf-inl input[type=number]{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:7px;padding:6px 7px;font-size:13px;width:74px}
.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}
/* ★ (2026-08-31) 헤더 높이 기기별 — 인라인 height:var(--lndh-h) 가 아래 변수 재정의를 따라감.
   발행뷰: 실제 폭 미디어쿼리 / 제작소 미리보기: setDevPreview 의 devp-mobile/tablet 로 강제. */
@media (max-width:1024px) and (min-width:641px){ .lndh{--lndh-h:var(--lndh-h-tab)} }
@media (max-width:640px){ .lndh{--lndh-h:var(--lndh-h-mo)} }
.devp-mobile #lndHdPrev .lndh{--lndh-h:var(--lndh-h-mo)}
.devp-tablet #lndHdPrev .lndh{--lndh-h:var(--lndh-h-tab)}
.devp-pc #lndHdPrev .lndh{--lndh-h:var(--lndh-h)}
.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}
/* ★ (2026-08-28) 드로어 상단 손님회원 영역 */
.lndh-guestbox{padding:14px 20px 14px;border-bottom:1px solid #eef0f3}
.lndh-guestbox:empty{display:none}
.lndh-gwrap-in .lndh-gwelcome{font-size:14px;color:#475569;line-height:1.5;margin-bottom:12px}
.lndh-gwrap-in .lndh-gwelcome b{color:#0f172a;font-size:16px;font-weight:800}
.lndh-gwrap-in .lndh-gwelcome span{font-size:12.5px;color:#16a34a;font-weight:700}
.lndh-gbtns{display:flex;gap:8px}
.lndh-gbtn{flex:1;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:9px;padding:11px 8px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;text-align:center}
.lndh-gbtn:hover{border-color:#94a3b8}
.lndh-gbtn.primary{background:var(--primary,#2563eb);border-color:var(--primary,#2563eb);color:#fff}
.lndh-gbtn.primary:hover{filter:brightness(.93)}
.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 var(--lndh-px,18px);box-sizing:border-box;border-bottom:1px solid rgba(0,0,0,.06)}
/* ★ (2026-08-27) 헤더 좌우 여백 — 모바일(≤1024)은 pad_x_mo(--lndh-px-mo) 사용. 로고/햄버거 가장자리 붙음 방지. */
@media (max-width:1024px){ .lndh-basic1 .lndh-in{padding-left:var(--lndh-px-mo,var(--lndh-px,16px));padding-right:var(--lndh-px-mo,var(--lndh-px,16px))} }
/* ★ 발행뷰 상단 고정 — 실제 모바일/태블릿(비목업)은 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-31) 제작소 모바일/태블릿 미리보기 = 발행과 동일하게. PC 중앙 펼침 메뉴는 PC(1024↑) 전용이라 숨김.
   (편집 헤더는 #lndHdPrev 라 실제 브라우저 폭이 1024px↑면 pcnav 가 flex 로 새던 문제 — devp-mobile/tablet 에서 차단)
   ★ 기기 클래스 = setDevPreview 가 .bld-stage/body 에 붙이는 devp-mobile / devp-tablet / devp-pc.
   단 '모두 펼침'(lndh-pcall) 켜면 모바일/태블릿에서도 보여야 하므로 예외. */
.devp-mobile #lndHdPrev .lndh-pcnav,
.devp-tablet #lndHdPrev .lndh-pcnav{display:none !important}
.devp-mobile #lndHdPrev .lndh-pcall .lndh-pcnav,
.devp-tablet #lndHdPrev .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}
/* ★ (2026-09-01) 상품 카드 (product_grid / product_swiper) — 갤러리 카드 기반 + 뱃지·가격·구매버튼 */
.lnd-rcnt .rc-prdwrap{display:grid;grid-template-columns:repeat(var(--rcgc,2),1fr);gap:calc(20px*var(--rcs)) var(--rcgap,calc(16px*var(--rcs)))}
.lnd-rcnt .rc-prdcard{display:flex;flex-direction:column;gap:5px;text-decoration:none;min-width:0}
.lnd-rcnt .rc-prd-thumb{display:block;width:100%;aspect-ratio:var(--rcgr,1/1);border-radius:14px;overflow:hidden;background:#eef1f5;position:relative}
.lnd-rcnt .rc-prd-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lnd-rcnt .rc-prdcard:hover .rc-prd-thumb img{transform:scale(1.06)}
.lnd-rcnt .rc-prdcard .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-prd-badge{position:absolute;left:8px;top:8px;background:var(--primary,#f0473e);color:#fff;font-size:calc(11px*var(--rcs));font-weight:700;padding:3px 8px;border-radius:6px;line-height:1.2;letter-spacing:-.3px}
.lnd-rcnt .rc-prd-sotag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.5);color:#fff;font-size:calc(14px*var(--rcs));font-weight:700}
.lnd-rcnt .rc-prd-name{margin-top:calc(10px*var(--rcs));font-size:calc(var(--rcft,15px)*var(--rcs));font-weight:700;color:#1f2937;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lnd-rcnt .rc-prdcard:hover .rc-prd-name{color:var(--primary,#2563eb)}
.lnd-rcnt .rc-prd-pricewrap{display:flex;align-items:baseline;gap:4px}
.lnd-rcnt .rc-prd-price{font-size:calc(16px*var(--rcs));font-weight:800;color:#0f172a}
.lnd-rcnt .rc-prd-price em{font-size:calc(12px*var(--rcs));font-weight:600;font-style:normal;color:#475569;margin-left:1px}
.lnd-rcnt .rc-prd-buy{margin-top:calc(7px*var(--rcs));display:inline-flex;align-items:center;justify-content:center;background:var(--primary,#2563eb);color:#fff;font-size:calc(13px*var(--rcs));font-weight:700;padding:calc(8px*var(--rcs)) 10px;border-radius:8px;line-height:1;transition:filter .15s}
.lnd-rcnt .rc-prdcard:hover .rc-prd-buy{filter:brightness(.92)}
.lnd-rcnt .rc-prd-soldout .rc-prd-buy{background:#94a3b8}
/* 상품 스와이퍼 = .rc-prdcard 를 슬라이드로. 카드 폭은 gallery_swiper 와 동일(swiper-slide 폭 계산 재사용) */
.lnd-rcnt .rc-gsw .rc-prd-thumb{aspect-ratio:1/1}

/* ══════════════════════════════════════════════════════════════════════════
 * ★ (2026-09-13) 배너 스와이퍼(banner_swiper) — 앱 홈 화면식 가로 배너
 *   · 왼쪽 시작점 = 본문(contents-container) 패딩 그대로
 *   · 오른쪽은 마스크 없이 화면 끝까지 흘러나감 → overflow:visible
 *     (갤러리/리뷰 스와이퍼는 모바일에서만 이렇게 하지만 배너는 PC/태블릿도 동일)
 *   · 화면 밖 가로스크롤은 body.lnd-view #canvas{overflow-x:hidden} 가 잘라줌(builder.css 상단)
 * ══════════════════════════════════════════════════════════════════════════ */
.lnd-bsw .bsw-wrap{width:100%;box-sizing:border-box}
.lnd-bsw .bsw-sw{overflow:visible}
.lnd-bsw .bsw-sw .swiper-wrapper{align-items:stretch}
.lnd-bsw .bsw-sw .swiper-slide{box-sizing:border-box;padding-right:var(--bswgap,14px);height:auto;min-width:0}
/* ★ 초기화 전 폭(FOUC 방지) — .lnd-rcnt 스코프 규칙을 못 받으므로 배너용으로 직접 정의.
   없으면 Swiper 붙기 전까지 배너가 100% 폭으로 한 장만 보였다 튄다. */
.lnd-bsw .bsw-sw:not(.swiper-initialized) .swiper-slide{flex:0 0 calc(100%/var(--gcm,1));max-width:calc(100%/var(--gcm,1))}
@media (min-width:641px){.lnd-bsw .bsw-sw:not(.swiper-initialized) .swiper-slide{flex-basis:calc(100%/var(--gct,2));max-width:calc(100%/var(--gct,2))}}
@media (min-width:1025px){.lnd-bsw .bsw-sw:not(.swiper-initialized) .swiper-slide{flex-basis:calc(100%/var(--gcp,2));max-width:calc(100%/var(--gcp,2))}}
.devp-mobile .lnd-bsw .bsw-sw:not(.swiper-initialized) .swiper-slide{flex-basis:calc(100%/var(--gcm,1)) !important;max-width:calc(100%/var(--gcm,1)) !important}
/* 터치 — 세로 스크롤은 살리고 가로만 스와이프 */
.lnd-bsw .bsw-sw{touch-action:pan-y}
.lnd-bsw .bsw-sw .swiper-slide{-webkit-user-select:none;user-select:none}
.lnd-bsw .bsw-card{position:relative;display:block;width:100%;aspect-ratio:var(--bswr,16/9);border-radius:var(--bswrd,16px);overflow:hidden;background:#e8edf5;text-decoration:none;cursor:grab}
.lnd-bsw a.bsw-card{cursor:pointer}
.lnd-bsw .bsw-media{position:absolute;inset:0;display:block;overflow:hidden}
.lnd-bsw .bsw-media img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* ★ (2026-09-18) 슬라이드 영상 레이어 — 이미지(포스터) 위. 기본 투명(정지), 재생(.playing) 때만 보임. 클릭 통과.
   iframe(유튜브·비메오)은 16:9 유지하며 박스를 덮음, mp4 는 object-fit cover. */
.lnd-bsw .bsw-vid{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;border:0;display:block;opacity:0;transition:opacity .3s ease;pointer-events:none;background:#000}
.lnd-bsw iframe.bsw-vid{width:auto;height:auto;min-width:100%;min-height:100%;aspect-ratio:16/9;left:50%;top:50%;transform:translate(-50%,-50%)}
.lnd-bsw .bsw-card.playing .bsw-vid{opacity:1}
/* 이미지 미지정 배너 — 자리표시가 배너 전체를 채우도록(부모 .bsw-media 기준) */
.lnd-bsw .bsw-ph{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:32px;color:#c3ccd8;background:linear-gradient(135deg,#f1f5f9,#dbe3ec)}
.lnd-bsw .bsw-dim{position:absolute;inset:0;background:rgba(0,0,0,var(--bswov,.35))}
.lnd-bsw .bsw-body{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:var(--bswpad,22px);box-sizing:border-box;pointer-events:none}
.lnd-bsw .bsw-title{font-size:var(--bswts,20px);line-height:1.3;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lnd-bsw .bsw-sub{font-size:var(--bswss,13px);line-height:1.5;opacity:.95;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lnd-bsw .bsw-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;line-height:1;margin-top:4px;white-space:nowrap;align-self:flex-start}
.lnd-bsw .bsw-body[style*="center"] .bsw-btn{align-self:center}
.lnd-bsw .bsw-btnwrap{position:absolute;right:var(--bswpad,22px);bottom:var(--bswpad,22px);pointer-events:none}
.lnd-bsw .bsw-btnwrap .bsw-btn{margin-top:0}
/* 페이징 점 — .lnd-rcnt 스코프 CSS 를 못 받으므로 여기서 직접 지정 */
.lnd-bsw .bsw-pag{position:static;margin-top:12px;display:flex;justify-content:center;gap:6px;line-height:1}
.lnd-bsw .bsw-pag:empty{display:none}
.lnd-bsw .bsw-pag .swiper-pagination-bullet{width:7px;height:7px;border-radius:999px;background:#cbd5e1;opacity:1;display:inline-block;cursor:pointer;transition:background .15s,width .15s}
.lnd-bsw .bsw-pag .swiper-pagination-bullet-active{background:var(--primary,#4f46e5);width:18px}
/* ★ 좌우 화살표 — 기존 .rc-gswnav 규칙은 .lnd-rcnt 안에서만 걸려 배너(.lnd-bsw)엔 안 먹는다.
   지정 안 하면 위치·크기 없이 세로로 쌓여 보임(2026-09-13 실버그). 같은 모양으로 직접 정의. */
.lnd-bsw .bsw-sw .rc-gswnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.92);color:#334155;font-size:20px;box-shadow:0 2px 10px rgba(15,23,42,.16);padding:0;opacity:.95}
.lnd-bsw .bsw-sw .rc-gswnav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.lnd-bsw .bsw-sw .rc-gswnav.prev{left:-6px}
.lnd-bsw .bsw-sw .rc-gswnav.next{right:10px}
.lnd-bsw .bsw-sw .rc-gswnav.swiper-button-disabled{opacity:.3;pointer-events:none}
/* 배너가 1개뿐이면 화살표·점 불필요 */
.lnd-bsw .bsw-sw.bsw-single .rc-gswnav,.lnd-bsw .bsw-sw.bsw-single .bsw-pag{display:none}
/* ★ (2026-09-18) PC 중앙 모드(.lnd-bsw-center, 엔진이 PC 구간에서 .bsw-cen-on 부여) — 래퍼 100%, 활성 카드 정가운데(centeredSlides+loop).
   화살표는 가운데 카드 양옆 바깥에: 카드 폭 = 100%/--gcp 이므로 50% ± 50%/gcp 기준으로 배치. */
.lnd-bsw-center .bsw-wrap{max-width:none !important;padding-left:0 !important;padding-right:0 !important;margin:0 !important}
.lnd-bsw .bsw-sw.bsw-cen-on .rc-gswnav.prev{left:calc(50% - 50%/var(--gcp,1.15) - 50px)}
.lnd-bsw .bsw-sw.bsw-cen-on .rc-gswnav.next{right:calc(50% - 50%/var(--gcp,1.15) - 50px + var(--bswgap,14px))}
@media (max-width:640px){
  .lnd-bsw .bsw-sw:not(.rc-gsw-arrm) .rc-gswnav{display:none}
  .lnd-bsw .bsw-sw .rc-gswnav.prev{left:2px}
  .lnd-bsw .bsw-sw .rc-gswnav.next{right:6px}
}
@media (max-width:640px){
  .lnd-bsw .bsw-body{padding:calc(var(--bswpad,22px) * .8)}
  .lnd-bsw .bsw-btnwrap{right:calc(var(--bswpad,22px) * .8);bottom:calc(var(--bswpad,22px) * .8)}
}

/* ★ (2026-09-13) 상품 썸네일 리스트형(product_list) — 왼쪽 작은 썸네일 + 상품명·판매처 + [바로구매].
   쿠팡·토스·다이소 등 외부 링크 모음(큐레이션)용. 가격은 기본 숨김(수시 변동). */
.lnd-rcnt .rc-prdlist{display:flex;flex-direction:column;gap:calc(10px*var(--rcs))}
.lnd-rcnt .rc-prl-row{display:flex;align-items:center;gap:calc(12px*var(--rcs));text-decoration:none;background:#fff;border:1px solid #e8ecf2;border-radius:14px;padding:calc(10px*var(--rcs));transition:border-color .15s,box-shadow .15s;min-width:0}
.lnd-rcnt .rc-prl-row:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(15,23,42,.07)}
.lnd-rcnt .rc-prl-thumb{flex:none;width:calc(68px*var(--rcs));height:calc(68px*var(--rcs));border-radius:12px;overflow:hidden;background:#eef1f5;position:relative;display:block}
.lnd-rcnt .rc-prl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lnd-rcnt .rc-prl-thumb .rc-gph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(22px*var(--rcs));color:#c3ccd8;background:linear-gradient(135deg,#f1f5f9,#e2e8f0)}
.lnd-rcnt .rc-prl-sotag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.52);color:#fff;font-size:calc(12px*var(--rcs));font-weight:700}
.lnd-rcnt .rc-prl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(4px*var(--rcs))}
.lnd-rcnt .rc-prl-name{font-size:calc(var(--rcft,15px)*var(--rcs));font-weight:700;color:#1f2937;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.lnd-rcnt .rc-prl-row:hover .rc-prl-name{color:var(--primary,#2563eb)}
.lnd-rcnt .rc-prl-meta{display:flex;align-items:center;gap:calc(6px*var(--rcs));flex-wrap:wrap}
.lnd-rcnt .rc-prl-shop{font-size:calc(11.5px*var(--rcs));font-weight:700;color:#475569;background:#f1f5f9;border-radius:5px;padding:2px calc(7px*var(--rcs));line-height:1.45}
.lnd-rcnt .rc-prl-badge{font-size:calc(11px*var(--rcs));font-weight:700;color:#fff;background:var(--primary,#f0473e);border-radius:5px;padding:2px calc(6px*var(--rcs));line-height:1.45}
.lnd-rcnt .rc-prl-price{font-size:calc(13px*var(--rcs));font-weight:800;color:#0f172a}
.lnd-rcnt .rc-prl-price em{font-size:calc(11px*var(--rcs));font-weight:600;font-style:normal;color:#475569;margin-left:1px}
.lnd-rcnt .rc-prl-buy{flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--primary,#2563eb);color:#fff;font-size:calc(12.5px*var(--rcs));font-weight:700;padding:calc(9px*var(--rcs)) calc(14px*var(--rcs));border-radius:9px;line-height:1;white-space:nowrap;transition:filter .15s}
.lnd-rcnt .rc-prl-row:hover .rc-prl-buy{filter:brightness(.92)}
.lnd-rcnt .rc-prl-soldout .rc-prl-buy{background:#94a3b8}
@media (max-width:520px){
  .lnd-rcnt .rc-prl-buy{padding:calc(8px*var(--rcs)) calc(11px*var(--rcs));font-size:calc(12px*var(--rcs))}
  .lnd-rcnt .rc-prl-thumb{width:calc(58px*var(--rcs));height:calc(58px*var(--rcs))}
}

/* ★ (2026-09-13) 딥링크(?prd=)로 들어온 상품 — 리스트 맨 위 큰 카드 */
.lnd-rcnt .rc-prd-hero{margin-bottom:calc(14px*var(--rcs))}
.lnd-rcnt .rc-prh-in{display:flex;gap:calc(16px*var(--rcs));text-decoration:none;background:#fff;border:2px solid var(--primary,#2563eb);border-radius:16px;padding:calc(14px*var(--rcs));align-items:stretch}
.lnd-rcnt .rc-prh-thumb{flex:none;width:calc(140px*var(--rcs));border-radius:12px;overflow:hidden;background:#eef1f5;position:relative;aspect-ratio:1/1}
.lnd-rcnt .rc-prh-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lnd-rcnt .rc-prh-thumb .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-prh-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(6px*var(--rcs));justify-content:center}
.lnd-rcnt .rc-prh-tag{font-size:calc(11px*var(--rcs));font-weight:700;color:var(--primary,#2563eb);letter-spacing:.02em}
.lnd-rcnt .rc-prh-name{font-size:calc(19px*var(--rcs));font-weight:800;color:#0f172a;line-height:1.35;word-break:break-word}
.lnd-rcnt .rc-prh-desc{font-size:calc(13px*var(--rcs));color:#64748b;line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lnd-rcnt .rc-prh-meta{display:flex;gap:calc(6px*var(--rcs));flex-wrap:wrap}
.lnd-rcnt .rc-prh-buy{align-self:flex-start;margin-top:calc(4px*var(--rcs));display:inline-flex;align-items:center;justify-content:center;background:var(--primary,#2563eb);color:#fff;font-size:calc(14px*var(--rcs));font-weight:700;padding:calc(11px*var(--rcs)) calc(22px*var(--rcs));border-radius:10px;line-height:1;transition:filter .15s}
.lnd-rcnt .rc-prh-in:hover .rc-prh-buy{filter:brightness(.92)}
@media (max-width:520px){
  .lnd-rcnt .rc-prh-in{flex-direction:column}
  .lnd-rcnt .rc-prh-thumb{width:100%;aspect-ratio:16/10}
  .lnd-rcnt .rc-prh-name{font-size:calc(17px*var(--rcs))}
  .lnd-rcnt .rc-prh-buy{align-self:stretch}
}
/* ★ 갤러리 스와이퍼 — Swiper.js 기반(리뷰후기 썸네일 스와이퍼와 동일 라이브러리). 터치·마우스 드래그 부드럽게. */
.lnd-rcnt .rc-gsw{position:relative;width:100%;max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box}
/* ★ 캐러셀 edge-to-edge = 모바일(≤640px)만! — PC/태블릿은 스와이퍼가 섹션 패딩 안(자기 사이즈)에
   딱 맞게(margin 확장 없음). 모바일에서만 오른쪽으로 20px 확장해 카드가 화면 오른쪽 끝까지 흐름.
   왼쪽은 섹션 패딩(20px) 그대로라 첫 카드 시작 여백 = 20px(타이틀과 맞음, 안 잘림).
   오른쪽만 margin -20px → Swiper 폭 계산 왜곡 최소(왔다갔다 없음), 오른쪽 잘림 없음.
   PC 는 이 규칙 미적용이라 기존처럼 자기폭에 정상 배치. 리뷰/갤러리 공통. */
@media (max-width:640px){
  /* ★ 모바일 캐러셀 = 스와이퍼 마스크(overflow) 해제 → 카드가 안 잘리고 섹션 밖으로 흐름.
     화면 밖 가로스크롤은 최상위 캔버스(body.lnd-view #canvas{overflow-x:hidden})가 이미 자름 → 안전.
     margin 확장 안 씀(Swiper 폭계산 안 건드림=왔다갔다 없음). 첫 카드 시작여백=섹션 패딩(20px) 유지.
     PC/태블릿은 이 규칙 밖이라 기존처럼 overflow:hidden(자기폭 안에 온전히). */
  .lnd-rcnt.rc-gallery_swiper .rc-gsw,
  .lnd-rcnt.rc-review_swiper .rc-gsw{overflow:visible}
}
/* ★ Swiper 4.0.7 이 부모 padding/flex 안에서 컨테이너 폭을 부정확하게 재 카드가 넘쳐 우측이 잘리고
   가운데 여백이 왔다갔다 하던 문제 방지 — 트랙/래퍼도 폭 경계를 명확히(내용이 폭을 늘리지 못하게). */
.lnd-rcnt .rc-gsw .swiper-wrapper{max-width:100%;min-width:0}
.lnd-rcnt .rc-gsw .swiper-slide{min-width:0}
/* ★ 간격은 Swiper(spaceBetween) 대신 CSS padding 으로 — box-sizing:border-box 라 폭 계산에 포함되고
   update 로 재적용돼 벌어지는 일이 없다(간격 튐·밀림·마지막 잘림의 근본 해결). 모든 칸 동일 간격.
   ※ 걸침(peek)은 진열칸 수를 소수(2.5)로 주는 방식으로 대체 → slidesPerView 가 2.5면 다음 카드 반쯤 보임. */
.lnd-rcnt .rc-gsw .swiper-slide{box-sizing:border-box;padding-right:var(--rcgap,14px)}
.lnd-rcnt .rc-gsw .swiper-wrapper{box-sizing:border-box;align-items:stretch}
.lnd-rcnt .rc-gsw .swiper-slide{height:auto;box-sizing:border-box}         /* 카드 높이 정렬 */
.lnd-rcnt .rc-gsw .rc-swcard{width:100%;height:100%;cursor:grab}
/* ★ FOUC 방지 — Swiper 초기화 '전'에는 swiper.min.css 가 슬라이드를 100%(=크게 1개)로 잡아
   "큰 1개 → 원래 개수" 깜빡임이 보임. 초기화 전(:not(.swiper-initialized))엔 진열칸 수(--gcm/-t/-p)
   만큼 폭을 미리 지정해 두면 개수가 처음부터 맞아 전환이 안 보인다. 초기화되면 Swiper 인라인폭이 이김. */
.lnd-rcnt .rc-gsw:not(.swiper-initialized) .swiper-wrapper{display:flex;flex-wrap:nowrap}
.lnd-rcnt .rc-gsw:not(.swiper-initialized) .swiper-slide{flex:0 0 calc(100%/var(--gcm,1));max-width:calc(100%/var(--gcm,1))}
@media (min-width:641px){.lnd-rcnt .rc-gsw:not(.swiper-initialized) .swiper-slide{flex-basis:calc(100%/var(--gct,2));max-width:calc(100%/var(--gct,2))}}
@media (min-width:1025px){.lnd-rcnt .rc-gsw:not(.swiper-initialized) .swiper-slide{flex-basis:calc(100%/var(--gcp,2));max-width:calc(100%/var(--gcp,2))}}
/* ★ 실제 폰 터치 스와이프 확보 — 가로 제스처는 Swiper 가 처리(세로 스크롤만 브라우저).
   카드가 <a> 링크라 터치가 링크로 먹혀 스와이프가 씹히던 문제 방지. */
.lnd-rcnt .rc-gsw,
.lnd-rcnt .rc-gsw .swiper-wrapper,
.lnd-rcnt .rc-gsw .swiper-slide,
.lnd-rcnt .rc-gsw .rc-swcard{touch-action:pan-y}
.lnd-rcnt .rc-gsw .rc-swcard img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.lnd-rcnt .rc-gsw.swiper-container{-webkit-user-select:none;user-select:none}
.lnd-rcnt .rc-gsw .rc-gthumb{aspect-ratio:4/3}                              /* 블록별 style 이 gratio 로 덮어씀 */
/* 좌우 화살표(navigation) — PC 항상, 모바일은 .rc-gsw-arrm 있을 때만 표시 */
.lnd-rcnt .rc-gswnav{position:absolute;top:calc(50% - 16px);transform:translateY(-50%);z-index:3;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.95);
  box-shadow:0 3px 14px rgba(0,0,0,.16);color:#334155;font-size:22px;cursor:pointer;transition:background .15s,transform .15s}
.lnd-rcnt .rc-gswnav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.lnd-rcnt .rc-gswnav.prev{left:-6px}
.lnd-rcnt .rc-gswnav.next{right:-6px}
.lnd-rcnt .rc-gswnav.swiper-button-disabled{opacity:.35;pointer-events:none}
/* 페이지네이션(점) */
.lnd-rcnt .rc-gswpag{position:static;margin-top:10px;text-align:center;transition:opacity .2s}
.lnd-rcnt .rc-gswpag .swiper-pagination-bullet-active{background:#4f46e5}
/* ★ 페이징 깜빡임 방지 — 초기화 전/업데이트 중엔 점 컨테이너를 숨겨 "나왔다 안나왔다" 제거.
   swiper-initialized 붙은 뒤에만 표시. (rc-gswpag 는 static 이라 자리도 안 차지 → 레이아웃 안 흔들림) */
.lnd-rcnt .rc-gsw:not(.swiper-initialized) .rc-gswpag{display:none}
.lnd-rcnt .rc-gsw .rc-gswpag:empty{display:none}   /* 점이 아직 안 그려졌으면 숨김 */
@media (max-width:640px){
  .lnd-rcnt .rc-gsw:not(.rc-gsw-arrm) .rc-gswnav{display:none}   /* 모바일: arrm 없으면 화살표 숨김 */
  .lnd-rcnt .rc-gswnav.prev{left:2px}.lnd-rcnt .rc-gswnav.next{right:2px}
}
/* ★ (2026-08-28) PC 하단 컨트롤 바 — 왼쪽 < > 버튼 2개 + 오른쪽 긴 진행바(Swiper scrollbar).
   PC(≥641px)=하단 바 표시 + 양옆 화살표(.rc-gswnav) 숨김 / 모바일(≤640px)=하단 바 숨김 + 기존 화살표 동작 유지. */
.lnd-rcnt .rc-gswbar{display:none}                                            /* 기본 숨김 → PC 에서만 표시 */
@media (min-width:641px){
  .lnd-rcnt .rc-gswnav{display:none !important}                               /* PC: 양옆 화살표 숨김(하단 바로 대체) */
  .lnd-rcnt .rc-gsw .rc-gswbar{display:flex;align-items:center;gap:12px;margin-top:14px}
  /* 하단 바가 붙어도 스와이퍼 마스크(overflow:hidden)엔 안 걸리게 — rc-gswbar 는 컨테이너 안 static 흐름 */
  .lnd-rcnt .rc-gswbar-btn{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border:1px solid #e2e8f0;border-radius:9px;background:#fff;color:#475569;font-size:20px;cursor:pointer;
    transition:border-color .15s,color .15s,background .15s}
  .lnd-rcnt .rc-gswbar-btn:hover{border-color:#94a3b8;color:#111;background:#f8fafc}
  .lnd-rcnt .rc-gswbar-btn:active{background:#eef2f7}
  .lnd-rcnt .rc-gswbar-btn.swiper-button-disabled{opacity:.35;pointer-events:none}
  /* 진행바(Swiper scrollbar) — 긴 회색 트랙 + 진한 회색 핸들 */
  .lnd-rcnt .rc-gswbar .rc-gswsb{position:relative;flex:1 1 auto;height:4px;background:#e5e7eb;border-radius:99px;overflow:hidden}
  .lnd-rcnt .rc-gswbar .rc-gswsb .swiper-scrollbar-drag{background:#94a3b8;border-radius:99px;cursor:grab}
  .lnd-rcnt .rc-gswbar .rc-gswsb .swiper-scrollbar-drag:active{cursor:grabbing;background:#64748b}
}
/* ★ 리뷰 스와이퍼 (rc-review, 2026-08-28) — 갤러리 스와이퍼(.rc-gsw)의 Swiper 동작을 그대로 물려받고 카드 내용만 리뷰용.
   카드: 별점(위) + 후기내용 + 이름·날짜 + 썸네일(선택). 헤더: 제목밑 평균★+(개수) + 우측 리뷰작성. 하단: 전체보기. */
/* 헤더 — 좌측 제목/평균/소제목 묶음 + 우측 리뷰작성 버튼 */
.lnd-rcnt.rc-review_swiper .rc-head{align-items:flex-start;justify-content:space-between}
.lnd-rcnt .rc-rvhead-l{min-width:0;flex:1 1 auto}
/* ★ (2026-08-28) 헤더 우측 묶음 = 리뷰작성 + 전체보기 나란히 (전체보기 헤더 이동) */
.lnd-rcnt .rc-rvhead-r{flex:none;display:flex;align-items:center;gap:8px}
.lnd-rcnt .rc-rvavg{display:flex;align-items:center;gap:6px;margin-top:calc(6px*var(--rcs))}
.lnd-rcnt .rc-rvavg-stars{font-size:calc(16px*var(--rcs));letter-spacing:1px;line-height:1}
.lnd-rcnt .rc-rvavg-num{font-size:calc(17px*var(--rcs));font-weight:800;color:#111}
.lnd-rcnt .rc-rvavg-cnt{font-size:calc(13px*var(--rcs));color:#94a3b8;font-weight:600}
/* 리뷰 작성하기 — 회색톤 심플 네모라운드 버튼 (크기 = --rcfbtn, 설정 fs_btn) (2026-08-28) */
.lnd-rcnt .rc-rvwrite{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;
  font-size:calc(var(--rcfbtn,13px)*var(--rcs));font-weight:700;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;
  padding:9px 16px;transition:background .15s,border-color .15s,color .15s}
.lnd-rcnt .rc-rvwrite:hover{background:#e2e8f0;border-color:#cbd5e1;color:#334155}
.lnd-rcnt .rc-rvwrite:active{background:#dde3ea}
.lnd-rcnt .rc-rvwrite i{font-size:calc(var(--rcfbtn,13px)*var(--rcs) + 2px)}
/* 별점 (카드/헤더 공통) — ★ 채움 + 회색 나머지 */
.lnd-rcnt .rc-rvstar,.lnd-rcnt .rc-rvavg-stars{white-space:nowrap}
.lnd-rcnt .rc-rvstar-on{color:#f59e0b}
.lnd-rcnt .rc-rvstar-off{color:#e2e8f0}
/* 리뷰 카드 — 테두리 라운드 + 연한 그림자 */
.lnd-rcnt .rc-rvcard{display:flex;flex-direction:column;gap:calc(9px*var(--rcs));background:#fff;border:1px solid #eef1f5;
  border-radius:16px;padding:calc(18px*var(--rcs)) calc(18px*var(--rcs));box-shadow:0 2px 10px rgba(15,23,42,.05);
  transition:box-shadow .2s,border-color .2s,transform .12s;box-sizing:border-box}
/* ★ 호버 시 카드는 '움직이지 않음'(translateY 제거) — .rc-gsw overflow:hidden 에 위쪽이 잘려 라인이 사라져 보였다.
   대신 이미지만 확대(아래 rc-rvthumb img scale) + 그림자/테두리 변화로 반응(자리 안 움직임). */
.lnd-rcnt .rc-rvcard:hover{box-shadow:0 8px 24px rgba(15,23,42,.1);border-color:#e0e5ec}
.lnd-rcnt .rc-rvcard .rc-rvstar{font-size:calc(15px*var(--rcs));letter-spacing:1px;line-height:1}
/* 후기 내용 — 3줄 말줄임 */
.lnd-rcnt .rc-rvtxt{font-size:calc(var(--rcfd,13.5px)*var(--rcs));color:#475569;line-height:1.6;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:var(--rcgl,3);-webkit-box-orient:vertical;flex:1 1 auto;word-break:break-word}
/* 썸네일 (선택) — gratio 비율(_swVars 가 aspect-ratio 지정), 없으면 표시 안 됨 */
.lnd-rcnt .rc-rvthumb{display:block;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f1f5f9}
.lnd-rcnt .rc-rvthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lnd-rcnt .rc-rvcard:hover .rc-rvthumb img{transform:scale(1.05)}
/* 이름·날짜 */
.lnd-rcnt .rc-rvmeta{display:flex;align-items:center;gap:8px;margin-top:calc(2px*var(--rcs));flex-wrap:wrap}
.lnd-rcnt .rc-rvname{font-size:calc(var(--rcft,13.5px)*var(--rcs));font-weight:700;color:#334155}
.lnd-rcnt .rc-rvdate{font-size:calc(var(--rcfdt,12px)*var(--rcs));color:#b0b9c6;margin-left:auto}
/* 하단 전체보기 */
.lnd-rcnt .rc-rvmore-wrap{text-align:center;margin-top:calc(20px*var(--rcs))}
.lnd-rcnt .rc-rvmore{display:inline-flex;align-items:center;gap:4px;font-size:calc(13.5px*var(--rcs));font-weight:700;
  color:#475569;text-decoration:none;border:1px solid #e2e8f0;border-radius:100px;padding:10px 24px;background:#fff;transition:border-color .15s,color .15s,background .15s}
.lnd-rcnt .rc-rvmore:hover{border-color:#c4b5fd;color:#7c3aed;background:#faf8ff}
.lnd-rcnt .rc-rvmore i{font-size:calc(16px*var(--rcs))}
/* ★ (2026-08-28) 헤더 우측 전체보기(리뷰작성 뒤) — 리뷰작성보다 옅은 회색 텍스트 링크형(구분). 라운드 네모, 리뷰작성과 높이 맞춤. */
/* ★ 전체보기 = '+' 아이콘 정사각 버튼(텍스트 + 기호만). 리뷰작성 옆에 나란히. */
.lnd-rcnt .rc-rvmore.rc-rvmore-head{display:inline-flex;align-items:center;justify-content:center;
  font-size:calc((var(--rcfbtn,13px) + 5px)*var(--rcs));font-weight:400;line-height:1;color:#64748b;
  border:1px solid #e2e8f0;border-radius:8px;width:calc((var(--rcfbtn,13px) + 20px)*var(--rcs));height:calc((var(--rcfbtn,13px) + 20px)*var(--rcs));
  background:#f1f5f9;text-decoration:none;box-sizing:border-box;padding:0}
.lnd-rcnt .rc-rvmore.rc-rvmore-head:hover{border-color:#cbd5e1;color:#334155;background:#e2e8f0}
@media (max-width:640px){
  /* ★ 모바일도 리뷰작성·전체보기 = 타이틀 우측 유지(요구). 좁으면 두 버튼 세로로 쌓음. */
  .lnd-rcnt.rc-review_swiper .rc-head{flex-wrap:nowrap;gap:8px;align-items:flex-start}
  .lnd-rcnt .rc-rvhead-r{flex:none;flex-direction:row;align-items:center;gap:6px}   /* 리뷰작성 | + 가로 나란히 */
  .lnd-rcnt .rc-rvwrite{padding:7px 12px}
  /* ★ (2026-08-28) 모바일 = 썸네일 마스크(크롭) 해제 — 이미지가 잘리지 않고 원본 비율 그대로.
     PC/태블릿은 위 규칙(aspect-ratio + object-fit:cover)대로 카드 비율에 맞춰 크롭. 두 스와이퍼 스킨 공통(.rc-gsw). */
  .lnd-rcnt .rc-gsw .rc-rvthumb,.lnd-rcnt .rc-gsw .rc-gthumb{aspect-ratio:auto !important}
  .lnd-rcnt .rc-gsw .rc-rvthumb img,.lnd-rcnt .rc-gsw .rc-gthumb img{object-fit:contain !important;height:auto}
}
/* ★ (2026-08-28) 편집 미리보기 모바일탭 대응 — 편집 캔버스는 실뷰포트가 PC라 위 @media(max-width:640px)가
   안 걸린다(발행은 실폭이라 걸림). 편집 모바일탭이면 stage(.bld-stage/body)에 .devp-mobile 이 붙으므로
   모바일 전용 규칙(마스크해제·edge-to-edge·하단바숨김·양옆화살표복원)을 .devp-mobile 스코프로도 복제.
   ※ .devp-pc / .devp-tablet 은 기존 PC/태블릿 규칙 유지(여기 미포함). */
/* ★ (2026-08-28) 편집 모바일탭 FOUC 폭 = 모바일 개수(--gcm)로 강제. 편집 캔버스는 실뷰포트 PC 라
   위 @media(min-width:641/1025) FOUC 규칙이 PC/태블릿 폭(--gct/--gcp)으로 걸려 슬라이드가 4개폭으로
   굳던 문제(slideW 계산 어긋남). devp-mobile 스코프로 min-width 규칙을 덮어써 --gcm 으로 되돌림. */
.devp-mobile .lnd-rcnt .rc-gsw:not(.swiper-initialized) .swiper-slide{flex-basis:calc(100%/var(--gcm,1)) !important;max-width:calc(100%/var(--gcm,1)) !important}
.devp-mobile .lnd-rcnt.rc-gallery_swiper .rc-gsw,
.devp-mobile .lnd-rcnt.rc-review_swiper .rc-gsw{overflow:visible}
/* PC 하단 바 숨김 + 양옆 화살표 복원 (내가 위에서 min-641 로 준 규칙을 !important 로 되돌림) */
.devp-mobile .lnd-rcnt .rc-gswbar{display:none !important}
.devp-mobile .lnd-rcnt .rc-gsw:not(.rc-gsw-arrm) .rc-gswnav{display:none !important}   /* arrm 없으면 화살표 숨김(모바일 기본) */
.devp-mobile .lnd-rcnt .rc-gsw.rc-gsw-arrm .rc-gswnav{display:flex !important}          /* arrm 켜졌으면 화살표 표시 */
.devp-mobile .lnd-rcnt .rc-gswnav.prev{left:2px}
.devp-mobile .lnd-rcnt .rc-gswnav.next{right:2px}
/* 리뷰 헤더 모바일 배치 */
.devp-mobile .lnd-rcnt.rc-review_swiper .rc-head{flex-wrap:nowrap;gap:8px;align-items:flex-start}
.devp-mobile .lnd-rcnt .rc-rvhead-r{flex:none;flex-direction:row;align-items:center;gap:6px;width:auto}
.devp-mobile .lnd-rcnt .rc-rvwrite{padding:7px 12px}
/* 썸네일 마스크(크롭) 해제 */
.devp-mobile .lnd-rcnt .rc-gsw .rc-rvthumb,.devp-mobile .lnd-rcnt .rc-gsw .rc-gthumb{aspect-ratio:auto !important}
.devp-mobile .lnd-rcnt .rc-gsw .rc-rvthumb img,.devp-mobile .lnd-rcnt .rc-gsw .rc-gthumb img{object-fit:contain !important;height:auto}
.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-09-07) 헤더 쇼핑몰 아이콘 — 장바구니(배지)·마이페이지 */
.lndh-shopics{display:flex;align-items:center;gap:2px;flex:none}
.lndh-shopic{position:relative;width:38px;height:38px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:#222;font-size:21px;text-decoration:none;cursor:pointer;border-radius:50%}
.lndh-shopic:hover{background:rgba(0,0,0,.05)}
.lndh-shopic b{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--lndh-hv,#f0473e);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;font-style:normal}
.lndh-trans:not(.lndh-scrolled) .lndh-shopic{color:#fff}
.lndh-trans:not(.lndh-scrolled) .lndh-shopic:hover{background:rgba(255,255,255,.15)}
/* ★ (2026-09-07) 마이페이지 아이콘 드롭다운 메뉴 — 아이콘 바로 아래 레이어. 로그인 전엔 안 열림(로그인 모달) */
.lndh-mywrap{position:relative;display:inline-flex}
.lndh-mymenu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:#fff;border:1px solid #e5e9f0;border-radius:14px;box-shadow:0 14px 40px rgba(15,23,42,.18);padding:6px;z-index:1200;display:none;text-align:left}
.lndh-mymenu.on{display:block;animation:lndhMmIn .16s ease}
@keyframes lndhMmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lndh-mymenu::before{content:"";position:absolute;top:-6px;right:14px;width:10px;height:10px;background:#fff;border-left:1px solid #e5e9f0;border-top:1px solid #e5e9f0;transform:rotate(45deg)}
.lndh-mm-hd{padding:9px 12px 8px;border-bottom:1px solid #f1f5f9;margin-bottom:4px;font-size:13px;color:#64748b}
.lndh-mm-hd b{color:#0f172a;font-size:14px}
.lndh-mm-i{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;padding:9px 12px;border-radius:9px;font-size:13.5px;color:#334155;cursor:pointer;text-align:left;font-family:inherit;white-space:nowrap}
.lndh-mm-i i{font-size:18px;color:#64748b;flex:none}
.lndh-mm-i:hover{background:#f4f6fa;color:#0f172a}
.lndh-mm-i[data-danger]{color:#dc2626;border-top:1px solid #f1f5f9;border-radius:0 0 9px 9px;margin-top:4px}
.lndh-mm-i[data-danger] i{color:#dc2626}
@media (max-width:640px){.lndh-mymenu{right:-6px;min-width:180px}}
/* ★ (2026-09-06) PC 1뎁스 호버 스타일 — lndh-pcs-line(밑줄이 왼쪽에서 그어짐) / lndh-pcs-dot(점이 톡 나타남). 기본은 색만 */
.lndh-pcs-line .lndh-pcit > a,.lndh-pcs-dot .lndh-pcit > a{position:relative}
.lndh-pcs-line .lndh-pcit > a::after{content:'';position:absolute;left:18px;right:18px;bottom:calc(50% - 15px);height:2px;border-radius:2px;background:var(--lndh-hv,#f0473e);transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.lndh-pcs-line .lndh-pcit:hover > a::after{transform:scaleX(1)}
.lndh-pcs-dot .lndh-pcit > a::after{content:'';position:absolute;left:50%;bottom:calc(50% - 18px);width:5px;height:5px;border-radius:50%;background:var(--lndh-hv,#f0473e);transform:translateX(-50%) scale(0);opacity:0;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .18s}
.lndh-pcs-dot .lndh-pcit:hover > a::after{transform:translateX(-50%) scale(1);opacity:1}
.lndh-trans:not(.lndh-scrolled) .lndh-pcit > a::after{display:none}
/* ★ (2026-09-06) PC 햄버거 = 전체 메뉴 (풀스크린 오버레이, 본그누 전체메뉴 느낌) — 1024px↑ 실제 발행뷰(비목업)에서 드로어 대신.
   배경/투명도/블러/글자색 = 인라인 CSS var(--lndh-fbg/--lndh-fblur/--lndh-ftx). lndh-full-v(세로 목록) / lndh-full-h(가로 사이트맵) */
.lndh-full{position:fixed;inset:0;z-index:1400;display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;
  background:var(--lndh-fbg,rgba(0,0,0,.85));-webkit-backdrop-filter:blur(var(--lndh-fblur,8px));backdrop-filter:blur(var(--lndh-fblur,8px));
  color:var(--lndh-ftx,#fff);overflow-y:auto;box-sizing:border-box}
.lndh-full-in{margin:auto;width:min(1200px,92%);padding:90px 20px 60px;box-sizing:border-box}
.lndh-fclose{position:fixed;top:22px;right:28px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;z-index:2;padding:0}
.lndh-fclose span{position:absolute;left:50%;top:50%;width:30px;height:2px;background:var(--lndh-ftx,#fff);border-radius:2px;transform:translate(-50%,-50%) rotate(45deg);transition:background .15s}
.lndh-fclose span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.lndh-fclose:hover span{background:var(--lndh-hv,#f0473e)}
.lndh-fnav a{color:inherit;text-decoration:none;transition:color .15s,opacity .15s}
.lndh-fnav a:hover{color:var(--lndh-hv,#f0473e)}
.lndh-fit{opacity:0;transform:translateY(18px);transition:opacity .45s,transform .45s;transition-delay:calc(.06s * var(--i,1))}
.lndh-f1{font-weight:800;letter-spacing:-.02em;display:inline-block}
/* 세로 목록 — 1뎁스 큰 글씨 가운데, 하위는 아래 가로 나열 */
.lndh-full-v .lndh-fnav{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.lndh-full-v .lndh-f1{font-size:var(--lndh-f1,34px);line-height:1.2}
.lndh-full-v .lndh-fsub{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:10px}
.lndh-full-v .lndh-fsub a{font-size:var(--lndh-f2,15px);opacity:.72}
.lndh-full-v .lndh-fsub a:hover{opacity:1}
/* 가로 사이트맵 — 1뎁스별 세로 컬럼 */
.lndh-full-h .lndh-fnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:44px 28px;align-items:start}
.lndh-full-h .lndh-fit{text-align:left}
.lndh-full-h .lndh-f1{font-size:var(--lndh-f1,22px);display:block;position:relative;padding-bottom:14px;line-height:1.25}
.lndh-full-h .lndh-f1::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.3}
.lndh-full-h .lndh-fsub{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.lndh-full-h .lndh-fsub a{font-size:var(--lndh-f2,15px);opacity:.78}
.lndh-full-h .lndh-fsub a:hover{opacity:1}
.lndh-fsns{margin-top:48px;display:flex;justify-content:center}
.lndh-full-h .lndh-fsns{justify-content:flex-start}
.lndh-fsns .lndh-sns{padding:0}
.lndh-fsns .lndh-sns-i{background:rgba(255,255,255,.14);color:var(--lndh-ftx,#fff)}
.lndh-fsns .lndh-sns-i:hover{background:var(--lndh-hv,#f0473e);color:#fff}
/* 손님회원 로그인/가입 영역 (전체 메뉴 하단) */
.lndh-fguest .lndh-guestbox{border:0;padding:0;margin-top:40px;display:flex;justify-content:center}
.lndh-fguest .lndh-gwrap{width:min(360px,100%)}
.lndh-fguest .lndh-gwelcome,.lndh-fguest .lndh-gwelcome b,.lndh-fguest .lndh-gwelcome span{color:inherit;text-align:center}
.lndh-full-h .lndh-fguest .lndh-guestbox{justify-content:flex-start}
/* 표시 조건 (2026-09-06 사용자 지시: 전체 메뉴 켜면 모바일도 드로어 대신 전체 메뉴) — 발행뷰 + 전체메뉴 켜진 헤더(lndh-fullon) → 모든 기기에서 드로어/딤 대신 오버레이 */
body.lnd-view .lndh-fullon .lndh-drawer,
body.lnd-view .lndh-fullon .lndh-dim{display:none !important}
body.lnd-view.lndh-open .lndh-fullon .lndh-full{visibility:visible;opacity:1}
body.lnd-view.lndh-open .lndh-fullon .lndh-fit{opacity:1;transform:none}
/* PC 목업(폰 프레임) = 오버레이를 폰 안(고정 헤더 기준)에 가둠 — 드로어와 같은 방식 */
body.lnd-view.lndv-qrwrap .lndh-full{position:absolute;top:0;left:0;right:0;bottom:auto;height:200vh;z-index:22}
body.lnd-view.lndv-qrwrap .lndh-full-in{margin:0 auto;padding-top:70px}
body.lnd-view.lndv-qrwrap .lndh-fclose{position:absolute;top:12px;right:12px}
@media (max-width:699px){
  .lndh-full-in{padding:76px 18px 48px}
  .lndh-fclose{top:14px;right:14px}
  .lndh-full-v .lndh-fnav{gap:20px}
  .lndh-full-h .lndh-fnav{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .lndh-full-v .lndh-f1,.lndh-full-h .lndh-f1{font-size:var(--lndh-f1m,24px)}
  .lndh-full-v .lndh-fsub a,.lndh-full-h .lndh-fsub a{font-size:var(--lndh-f2m,15px)}
}
/* 제작소 모바일 미리보기(devp-mobile)도 모바일 글자 크기 */
.devp-mobile #lndHdPrev .lndh-full .lndh-f1{font-size:var(--lndh-f1m,24px)}
.devp-mobile #lndHdPrev .lndh-full .lndh-fsub a{font-size:var(--lndh-f2m,15px)}
.hf-fcol2 .hf-flb small{font-weight:400;color:#94a3b8}
.hf-fpair{display:flex;gap:6px;width:100%}
.hf-fpair input[type=number]{width:100%;min-width:0;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:7px;padding:6px 7px;font-size:13px}
/* 제작소 미리보기(lndHfFullPrev) — 헤더 미리보기 레이어를 모달 위로 올려 오버레이 표시 */
body:not(.lnd-view):not(.lndh-fullprev) #lndHdPrev .lndh-full{display:none !important}
body.lndh-fullprev #lndHdPrev{z-index:100000 !important;pointer-events:auto !important}
body.lndh-fullprev #lndHdPrev .lndh-full{visibility:visible;opacity:1}
body.lndh-fullprev #lndHdPrev .lndh-fit{opacity:1;transform:none}
/* 헤더 설정 폼 — 전체 메뉴 박스 */
.hf-fullbox{margin-top:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px}
.hf-fullgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px;margin-top:10px}
.hf-fcol{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.hf-flb{font-size:11.5px;color:#64748b;font-weight:600}
.hf-flb b{color:#2563eb}
/* ★ 드로어(모바일) 아코디언 (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) .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-27) 헤더는 테마 container 패딩만 죽이고 스킨 자체 좌우여백(--lndh-px/-mo)은 살림. */
body:not(.lnd-wide) .lndh-in.contents-container{max-width:100% !important;margin-left:0 !important;margin-right:0 !important;
  padding-left:var(--lndh-px-mo,var(--lndh-px,18px)) !important;padding-right:var(--lndh-px-mo,var(--lndh-px,18px)) !important}
@media (min-width:1025px){
  body:not(.lnd-wide) .lndh-in.contents-container{padding-left:var(--lndh-px,18px) !important;padding-right:var(--lndh-px,18px) !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-08-28) 도형 설정 모달 본문 — .fld/.lbl 스타일은 .bld-side 안에서만 걸려 여기선 안 먹으므로 자체 정의 */
#shapeMdBody{padding:14px 16px 6px}
#shapeMdBody .fld{margin-bottom:13px}
#shapeMdBody .fld:last-child{margin-bottom:0}
#shapeMdBody .fld>label{display:block;font-size:12px;color:#64748b;font-weight:700;margin-bottom:5px}
#shapeMdBody .fld input[type=text],#shapeMdBody .fld input[type=number],#shapeMdBody .fld select{box-sizing:border-box}
#shapeMdBody .fld input[type=range]{width:100%;margin:2px 0}
#shapeMdBody .fld .rv{font-size:12px;color:#2563eb;font-weight:700}
#shapeMdBody .bld-btn{box-sizing:border-box}
/* 도형 모달은 세로로 긴 편 — 세로 여백 살짝 여유 + 컬러칩 세로정렬 */
#shapeMdBody .fld input[type=color]{vertical-align:middle}

/* ★ 게시판 유형 선택 모달 (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; overflow:hidden; /* ★ (2026-08-29) 둥글기는 인라인(설정값) 존중 — border-radius !important 제거. 물결용 overflow는 유지 */
}
.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; }
/* ★ (2026-08-29) 정렬(align) 대응 — 아이콘(점+흔들림)은 우측 고정, 글씨만 좌/중앙/우 정렬.
   글씨 영역(flex:1) 안에서 text-align 으로 정렬 → 아이콘 위치는 그대로. */
.dcbtn-anim[data-align="left"] .dcb-label{ text-align:left; }
.dcbtn-anim[data-align="center"] .dcb-label{ text-align:center; }
.dcbtn-anim[data-align="right"] .dcb-label{ text-align:right; }
/* 점 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; }
/* ★ (2026-10-10) 버튼 그림자 서브픽셀 틈 fix — dcShadowVars() 가 인라인에 --dc-shd/--dc-dshd 를 심는다.
   화면 = filter:drop-shadow(알파 기반, 둥근 모서리에 흰 틈 없음) · 캡처(shp-scanning/shp-printing/lnd-capture) = box-shadow(html2canvas 호환) */
[style*="--dc-dshd:"]{ box-shadow:none; filter:var(--dc-dshd); }
body.shp-scanning [style*="--dc-dshd:"], body.shp-printing [style*="--dc-dshd:"], body.lnd-capture [style*="--dc-dshd:"]{ filter:none; box-shadow:var(--dc-shd); }
.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 — 좌 라벨 / 우 아이콘 양끝. ★ (2026-08-29) 둥글기는 인라인(설정값) 존중 — border-radius !important 제거.
   (기존 알약 모양은 설정 둥글기 기본값이 담당. 0px 50px 50px 0px 같은 4방향도 이제 적용됨) */
.stdbtn-anim1{
  display:inline-flex !important; align-items:center; justify-content:space-between;
  gap:10px;
}
.stdbtn-anim1 .stdbtn-label{ flex:1; text-align:left; padding-left:6px; }
.stdbtn-anim1 .stdbtn-right{ display:inline-flex; align-items:center; flex:none; }
/* ★ (2026-08-29) 정렬(align) 대응 — 아이콘 우측 고정, 글씨만 좌/중앙/우 정렬(글씨 영역 안 text-align) */
.stdbtn-anim1[data-align="left"] .stdbtn-label{ text-align:left; }
.stdbtn-anim1[data-align="center"] .stdbtn-label{ text-align:center; }
.stdbtn-anim1[data-align="right"] .stdbtn-label{ text-align:right; }
/* ★ absr — 우측 고정 아이콘 (2026-10-10, 내 위치 전송 버튼). 아이콘은 absolute 로 흐름 밖(오른쪽 끝에서 icon_r 거리,
   세로 중앙 + icon_t 오프셋), 글씨는 버튼 전체 폭 기준으로 좌/중앙/우 정렬. 애니1 과 달리 중앙 정렬이 버튼 한가운데. */
.stdbtn-absr{ display:inline-flex !important; align-items:center; justify-content:center; position:relative; }
.stdbtn-absr .stdbtn-label{ flex:1 1 auto; width:100%; text-align:center; }
.stdbtn-absr[data-align="left"] .stdbtn-label{ text-align:left; }
.stdbtn-absr[data-align="center"] .stdbtn-label{ text-align:center; }
.stdbtn-absr[data-align="right"] .stdbtn-label{ text-align:right; }
.stdbtn-absr .stdbtn-absr-ic{ position:absolute; top:50%; right:16px; transform:translateY(-50%); display:inline-flex; align-items:center; gap:8px; line-height:0; pointer-events:none; }
/* ★ (2026-10-10) 점 3개 애니(띵띵띵) — 전화걸기 .dcb-dots 와 같은 모양·같은 keyframes(dcbDot). 아이콘 앞. 색=인라인 color(기본 흰색). */
.stdbtn-absr .stdbtn-dots{ display:inline-flex; gap:4px; align-items:center; }
.stdbtn-absr .stdbtn-dots i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; animation:dcbDot 1.2s infinite ease-in-out; }
.stdbtn-absr .stdbtn-dots i:nth-child(2){ animation-delay:.2s; }
.stdbtn-absr .stdbtn-dots i:nth-child(3){ animation-delay:.4s; }
@media (prefers-reduced-motion: reduce){ .stdbtn-absr .stdbtn-dots i{ animation: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; }
}

/* ═══════════════════════════════════════════════════════════════
   ★ 리뷰 작성 바텀시트 (2026-08-28) — 리뷰 스와이퍼 "리뷰 작성하기"
   화면 아래에서 쓰르륵 올라오는 시트. 별점/후기/사진/익명. 발행·편집 공통.
   ═══════════════════════════════════════════════════════════════ */
/* ★ (2026-09-17) 랜딩 전용 문의하기 — 발행 화면 접수 모달(#lndInqOv) + 빌더 폼 빌더(#lndInqFbOv). body>div 화이트리스트(builder.css:93) 등록됨 */
.lnd-inq-ov{position:fixed;inset:0;z-index:99998;background:rgba(15,23,42,.55);align-items:center;justify-content:center;padding:14px;opacity:0;transition:opacity .18s}
.lnd-inq-ov.on{opacity:1}
.lnd-inq-box{display:flex;flex-direction:column;background:#fff;border-radius:16px;width:min(600px,96vw);max-height:92vh;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.35);font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif}
.lnd-inq-hd{flex:none;display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid #eef1f5}
.lnd-inq-hd b{font-size:16px;color:#0f172a}
.lnd-inq-x{margin-left:auto;background:transparent;border:0;font-size:26px;line-height:1;color:#64748b;cursor:pointer;padding:0 2px}
.lnd-inq-body{flex:1;overflow:auto;padding:16px 18px 18px;-webkit-overflow-scrolling:touch}
.lnd-inq-desc{font-size:13px;color:#64748b;line-height:1.6;margin:-4px 0 14px;white-space:pre-line}
.lnd-inq-f{margin-bottom:13px}
.lnd-inq-f>label{display:block;font-size:12.5px;font-weight:700;color:#334155;margin-bottom:5px}
.lnd-inq-f>label .req{color:#ef4444;margin-left:2px}
.lnd-inq-in{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:9px;padding:10px 12px;font-size:14px;color:#0f172a;background:#fff;font-family:inherit}
.lnd-inq-in:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.12)}
textarea.lnd-inq-in{resize:vertical;min-height:90px;line-height:1.6}
.lnd-inq-opts{display:flex;flex-wrap:wrap;gap:8px 14px;padding:2px 0}
.lnd-inq-opt{display:flex;flex-direction:column;gap:6px;min-width:0}
.lnd-inq-opt>label{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#334155;cursor:pointer}
.lnd-inq-opt>label input{width:17px;height:17px;accent-color:#4f46e5;margin:0}
.lnd-inq-sub{display:none;min-width:180px}
.lnd-inq-opt.on .lnd-inq-sub{display:block}
.lnd-inq-sub .lnd-inq-in{padding:7px 10px;font-size:13px}
.lnd-inq-addr{display:flex;flex-direction:column;gap:6px}
.lnd-inq-addr .row{display:flex;gap:6px}
.lnd-inq-addr .row .lnd-inq-in{flex:1}
.lnd-inq-zipbtn{flex:none;border:1px solid #4f46e5;background:#eef2ff;color:#4338ca;border-radius:9px;padding:0 12px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
.lnd-inq-color{display:flex;align-items:center;gap:10px}
.lnd-inq-color input[type=color]{width:46px;height:36px;border:1px solid #cbd5e1;border-radius:8px;padding:2px;background:#fff;cursor:pointer}
.lnd-inq-color .hex{font-size:13px;color:#475569;font-family:ui-monospace,Menlo,monospace}
.lnd-inq-ed{border:1px solid #cbd5e1;border-radius:9px;overflow:hidden}
.lnd-inq-ed .tb{display:flex;gap:2px;padding:5px 6px;border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-wrap:wrap}
.lnd-inq-ed .tb button{border:1px solid transparent;background:transparent;border-radius:6px;min-width:30px;height:28px;padding:0 7px;font-size:13px;color:#334155;cursor:pointer;font-family:inherit}
.lnd-inq-ed .tb button:hover{background:#fff;border-color:#cbd5e1}
.lnd-inq-ed .ed{min-height:170px;max-height:420px;overflow:auto;padding:10px 12px;font-size:14px;line-height:1.7;color:#0f172a;outline:none}
.lnd-inq-ed .ed:empty:before{content:attr(data-ph);color:#94a3b8}
.lnd-inq-cap{margin:4px 0 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:10px 12px}
.lnd-inq-cap label{display:block;font-size:12px;font-weight:700;color:#334155;margin-bottom:5px}
.lnd-inq-cap .q{font-size:15px;font-weight:800;color:#0f172a;margin-right:8px}
.lnd-inq-cap input{width:90px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;font-size:14px}
.lnd-inq-submit{width:100%;border:0;border-radius:11px;padding:14px;font-size:15px;font-weight:800;color:#fff;background:#4f46e5;cursor:pointer;margin-top:4px;font-family:inherit}
.lnd-inq-submit:disabled{opacity:.6;cursor:default}
.lnd-inq-msg{font-size:13.5px;text-align:center;margin-top:10px;display:none;line-height:1.6}
.lnd-inq-done{text-align:center;padding:36px 10px 20px}
.lnd-inq-done .ic{font-size:44px;color:#16a34a;margin-bottom:10px}
.lnd-inq-done b{display:block;font-size:16px;color:#0f172a;margin-bottom:6px}
.lnd-inq-done p{font-size:13.5px;color:#64748b;line-height:1.7;white-space:pre-line;margin:0}
/* 폼 빌더 */
.lnd-inqfb-box{display:flex;flex-direction:column;background:#fff;border-radius:16px;width:min(980px,97vw);max-height:94vh;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.lnd-inqfb-top{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 18px;border-bottom:1px solid #eef1f5;background:#fafbfc}
.lnd-inqfb-top label{display:block;font-size:11.5px;font-weight:700;color:#64748b;margin-bottom:3px}
.lnd-inqfb-top input[type=text]{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit}
.lnd-inqfb-top .chk{display:flex;gap:14px;align-items:center;font-size:12.5px;color:#334155;padding-top:16px}
.lnd-inqfb-top .chk label{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:600;color:#334155;font-size:12.5px;cursor:pointer}
.lnd-inqfb-list{flex:1;overflow:auto;padding:12px 18px}
.lnd-inqfb-row{display:grid;grid-template-columns:auto 1.3fr 1fr auto auto 1fr auto;gap:6px 8px;align-items:center;border:1px solid #e2e8f0;border-radius:10px;padding:9px 10px;margin-bottom:8px;background:#fff}
.lnd-inqfb-row.hasopt{grid-template-rows:auto auto}
.lnd-inqfb-row input[type=text],.lnd-inqfb-row select,.lnd-inqfb-row textarea{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:7px;padding:7px 9px;font-size:12.5px;font-family:inherit;width:100%}
.lnd-inqfb-row .mv{display:flex;flex-direction:column;gap:2px}
.lnd-inqfb-row .mv button,.lnd-inqfb-row .del{border:1px solid #e2e8f0;background:#f8fafc;color:#475569;border-radius:6px;width:26px;height:22px;font-size:11px;cursor:pointer;line-height:1;padding:0}
.lnd-inqfb-row .del{width:30px;height:30px;color:#dc2626;font-size:16px}
.lnd-inqfb-row .req{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#334155;white-space:nowrap}
.lnd-inqfb-row .optbox{grid-column:2/8;display:flex;flex-direction:column;gap:4px}
.lnd-inqfb-row .optbox textarea{min-height:64px;resize:vertical;line-height:1.5}
.lnd-inqfb-row .optbox small{font-size:11px;color:#94a3b8;line-height:1.5}
.lnd-inqfb-ft{flex:none;display:flex;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid #eef1f5;background:#fafbfc;flex-wrap:wrap}
.lnd-inqfb-ft .btn{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:8px;padding:8px 13px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.lnd-inqfb-ft .btn.pri{border-color:#4f46e5;background:#4f46e5;color:#fff}
.lnd-inqfb-ft select{border:1px solid #cbd5e1;border-radius:8px;padding:7px 9px;font-size:12.5px;font-family:inherit}
@media (max-width:720px){
  .lnd-inqfb-top{grid-template-columns:1fr}
  .lnd-inqfb-row{grid-template-columns:auto 1fr auto;}
  .lnd-inqfb-row .optbox{grid-column:1/4}
  .lnd-inq-box{width:100%;max-height:96vh;border-radius:14px}
}
/* ★ (2026-09-16) 최근게시물 모달 바로보기 (#lndPostOv) — 서브페이지 없는 랜딩에서 글을 그 자리에서.
   body>div 화이트리스트(builder.css:93)에 #lndPostOv 등록됨 + JS 인라인 display !important 이중 방어.
   PC=가운데 카드 / 모바일(640↓)=바텀시트 슬라이드업. */
.lnd-post-ov{
  position:fixed; inset:0; z-index:100075; background:rgba(15,23,42,.62);
  display:flex; align-items:center; justify-content:center; padding:24px 16px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
  -webkit-overflow-scrolling:touch;
}
.lnd-post-ov.on{ opacity:1; visibility:visible; }
.lnd-post-box{
  position:relative; width:100%; max-width:720px; background:#fff;
  border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.34);
  max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(14px) scale(.985); transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.lnd-post-ov.on .lnd-post-box{ transform:translateY(0) scale(1); }
.lnd-post-box .lpv-x{
  position:absolute; top:10px; right:10px; z-index:3;
  width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(15,23,42,.55); color:#fff; font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lnd-post-box .lpv-x:hover{ background:rgba(15,23,42,.8); }
/* 영상 — 16:9 고정. 상단에 꽉 차게 */
.lnd-post-box .lpv-video{ width:100%; aspect-ratio:16/9; background:#000; flex:0 0 auto; }
.lnd-post-box .lpv-video iframe{ width:100%; height:100%; border:0; display:block; }
.lnd-post-box .lpv-scroll{ padding:22px 24px 26px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.lnd-post-box .lpv-tit{ margin:0 0 8px; font-size:20px; font-weight:800; line-height:1.4; color:#0f172a; padding-right:34px; }
.lnd-post-box .lpv-video + .lpv-scroll .lpv-tit{ padding-right:0; }
.lnd-post-box .lpv-meta{ display:flex; gap:10px; align-items:center; font-size:13px; color:#94a3b8; margin-bottom:16px; }
.lnd-post-box .lpv-meta b{ color:#475569; font-weight:700; }
.lnd-post-box .lpv-body{ font-size:15px; line-height:1.75; color:#334155; word-break:break-word; }
.lnd-post-box .lpv-body img{ max-width:100%; height:auto; border-radius:10px; margin:10px 0; }
.lnd-post-box .lpv-body .lbk-text{ margin:0 0 14px; white-space:normal; }
.lnd-post-box .lpv-body .lbk-img{ margin:0 0 14px; }
.lnd-post-box .lpv-body .lbk-img figcaption{ font-size:12.5px; color:#94a3b8; margin-top:6px; text-align:center; }
/* 본문 안 영상(블록 여러 개일 때) */
.lnd-post-box .lpv-body .lbk-video{ margin:0 0 14px; }
.lnd-post-box .lpv-body .lbk-video-in{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; }
.lnd-post-box .lpv-body .lbk-video-in iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lnd-post-box .lpv-body table{ width:100%; border-collapse:collapse; margin:10px 0; }
.lnd-post-box .lpv-body td,.lnd-post-box .lpv-body th{ border:1px solid #e2e8f0; padding:8px 10px; }
.lnd-post-box .lpv-more{
  display:inline-flex; align-items:center; gap:4px; margin-top:20px;
  font-size:13.5px; font-weight:700; color:#2563eb; text-decoration:none;
}
.lnd-post-box .lpv-more:hover{ text-decoration:underline; }
/* 발행 게시판 글 안의 영상 블록 (모달 밖 = 서브페이지 본문) */
.lbk-video{ margin:0 0 16px; }
.lbk-video-in{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; }
.lbk-video-in iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lbk-video figcaption{ font-size:12.5px; color:#94a3b8; margin-top:6px; text-align:center; }
@media (max-width:640px){
  /* 모바일 = 바텀시트 */
  .lnd-post-ov{ align-items:flex-end; padding:0; }
  .lnd-post-box{
    max-width:100%; max-height:92vh; border-radius:18px 18px 0 0;
    transform:translateY(100%) scale(1);
  }
  .lnd-post-ov.on .lnd-post-box{ transform:translateY(0); }
  .lnd-post-box .lpv-scroll{ padding:18px 18px 24px; }
  .lnd-post-box .lpv-tit{ font-size:18px; }
  .lnd-post-box .lpv-body{ font-size:14.5px; }
}
/* 발행 뷰에서 편집 도구가 모달 위에 뜨지 않게 */
body.lnd-view .lnd-post-ov .tools{ display:none !important; }

.lnd-rvsheet-ov{
  position:fixed; inset:0; z-index:100070; background:rgba(15,23,42,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.lnd-rvsheet-ov.on{ opacity:1; visibility:visible; }
.lnd-rvsheet{
  width:100%; max-width:560px; background:#fff;
  border-radius:20px 20px 0 0; box-shadow:0 -12px 50px rgba(0,0,0,.28);
  max-height:92vh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .32s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.lnd-rvsheet-ov.on .lnd-rvsheet{ transform:translateY(0); }
.lnd-rvsheet .rv-grab{
  width:42px; height:5px; border-radius:999px; background:#e2e8f0;
  margin:10px auto 2px;
}
.lnd-rvsheet .rv-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 20px 14px; border-bottom:1px solid #f1f5f9;
}
.lnd-rvsheet .rv-head b{ font-size:17px; color:#0f172a; font-weight:800; }
.lnd-rvsheet .rv-x{
  border:none; background:#f1f5f9; border-radius:9px; width:32px; height:32px;
  cursor:pointer; font-size:18px; color:#64748b; line-height:1;
}
.lnd-rvsheet .rv-body{ padding:18px 20px 6px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.lnd-rvsheet .rv-prof{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.lnd-rvsheet .rv-prof .rv-pname{ flex:1 1 auto; }   /* 이름이 남는 폭 차지 → 익명이 우측 끝 */
.lnd-rvsheet .rv-avatar{
  width:36px; height:36px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.lnd-rvsheet .rv-avatar img{ width:100%; height:100%; object-fit:contain; display:block; }
.lnd-rvsheet .rv-pname{ font-size:15px; font-weight:700; color:#0f172a; }
.lnd-rvsheet .rv-field{ margin-bottom:18px; }
.lnd-rvsheet .rv-label{ display:block; font-size:13px; font-weight:700; color:#334155; margin-bottom:8px; }
.lnd-rvsheet .rv-label small{ font-weight:400; color:#94a3b8; font-size:11.5px; }
/* 별점 — 제목·별 중앙정렬 + 위 점선 구분선 */
.lnd-rvsheet .rv-field-star{ text-align:center; padding-top:18px; border-top:1px dashed #e2e8f0; }
.lnd-rvsheet .rv-field-star .rv-label{ text-align:center; font-size:14px; color:#475569; margin-bottom:10px; }
.lnd-rvsheet .rv-stars{ display:flex; gap:6px; justify-content:center; }
.lnd-rvsheet .rv-star{
  border:none; background:none; cursor:pointer; padding:0 2px; line-height:1;
  color:#e2e8f0; transition:color .12s, transform .12s; display:inline-flex;
}
.lnd-rvsheet .rv-star i{ font-size:36px; line-height:1; }
.lnd-rvsheet .rv-star:hover{ transform:scale(1.12); }
.lnd-rvsheet .rv-star.on{ color:#fbbf24; }
/* 후기 */
.lnd-rvsheet .rv-textarea{
  width:100%; box-sizing:border-box; border:1px solid #d1d5db; border-radius:12px;
  padding:13px 14px; font-size:15px; line-height:1.6; min-height:120px; resize:vertical;
  font-family:inherit; color:#0f172a;
}
.lnd-rvsheet .rv-textarea:focus{ outline:none; border-color:var(--primary,#4f46e5); box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.lnd-rvsheet .rv-count{ text-align:right; font-size:12px; color:#94a3b8; margin-top:5px; }
/* 사진 */
.lnd-rvsheet .rv-photos{ display:flex; flex-wrap:wrap; gap:10px; }
.lnd-rvsheet .rv-photo-add{
  width:84px; height:84px; border:1.5px dashed #cbd5e1; border-radius:12px; background:#f8fafc;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; color:#94a3b8; font-size:12px; flex:none;
}
.lnd-rvsheet .rv-photo-add i{ font-size:22px; }
.lnd-rvsheet .rv-photo-add:hover{ border-color:var(--primary,#4f46e5); color:var(--primary,#4f46e5); background:#f1f5ff; }
.lnd-rvsheet .rv-photo{
  position:relative; width:84px; height:84px; border-radius:12px; overflow:hidden; flex:none;
  border:1px solid #e2e8f0; background:#f1f5f9;
}
.lnd-rvsheet .rv-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.lnd-rvsheet .rv-cover-badge{
  position:absolute; left:4px; bottom:4px; background:rgba(15,23,42,.72); color:#fff;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px;
}
.lnd-rvsheet .rv-photo-del{
  position:absolute; top:3px; right:3px; width:22px; height:22px; border:none; border-radius:50%;
  background:rgba(15,23,42,.65); color:#fff; cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
/* 익명 — 이름 줄 우측 끝(프로필 안) 컴팩트 */
.lnd-rvsheet .rv-anon{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:#64748b; cursor:pointer;
  flex:none; white-space:nowrap;
}
.lnd-rvsheet .rv-anon input{ width:17px; height:17px; accent-color:var(--primary,#4f46e5); cursor:pointer; }
/* 하단 버튼 */
.lnd-rvsheet .rv-foot{
  padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #f1f5f9; background:#fff;
}
.lnd-rvsheet .rv-submit{
  width:100%; border:none; border-radius:12px; padding:15px; font-size:16px; font-weight:800;
  background:var(--primary,#4f46e5); color:#fff; cursor:pointer;
}
.lnd-rvsheet .rv-submit:disabled{ opacity:.6; cursor:default; }
@media (prefers-reduced-motion: reduce){
  .lnd-rvsheet{ transition:none; }
  .lnd-rvsheet-ov{ transition:none; }
}

/* ═══ (2026-08-31) 손님회원 로그인/회원가입 모달 — 깔끔한 라벨형 디자인 ═══ */
.gauth-card{position:relative;background:#fff;border-radius:20px;max-width:400px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.28);max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gauth-x{position:absolute;top:14px;right:14px;z-index:2;border:0;background:transparent;width:34px;height:34px;border-radius:9px;cursor:pointer;color:#9ca3af;font-size:20px;display:flex;align-items:center;justify-content:center;transition:.12s}
.gauth-x:hover{background:#f3f4f6;color:#374151}
/* 탭 (두 방식 다 있을 때만) */
.gauth-tabs{display:flex;gap:4px;padding:16px 26px 0}
.gauth-tab{flex:1;border:0;background:none;padding:10px 4px 12px;font-size:14px;font-weight:600;color:#9ca3af;cursor:pointer;border-bottom:2px solid #eef0f4;transition:.12s}
.gauth-tab:hover{color:#4b5563}
.gauth-tab.ga-on{color:var(--primary,#4f46e5);border-bottom-color:var(--primary,#4f46e5)}
/* 본문 */
.gauth-body{padding:30px 26px 26px}
.gauth-tit{margin:0 0 8px;font-size:24px;font-weight:800;line-height:1.28;color:#111827;letter-spacing:-.01em}
.gauth-sub{margin:0 0 22px;font-size:13.5px;color:#9ca3af;line-height:1.5}
/* 필드 라벨 (+ 우측 링크) */
.gauth-flab{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:#374151;margin:15px 0 7px}
.gauth-flab:first-child,.gauth-body > div > .gauth-flab:first-of-type{margin-top:0}
.gauth-flink a{font-size:12.5px;color:var(--primary,#4f46e5);font-weight:600;text-decoration:none}
.gauth-flink a:hover{text-decoration:underline}
.gauth-opt{color:#c0c4cc;font-weight:400;font-size:12px}
/* 입력칸 */
.gauth-inp{width:100%;box-sizing:border-box;border:1px solid #e2e5ea;border-radius:11px;padding:14px 15px;font-size:14.5px;color:#1f2937;background:#fbfbfc;transition:.12s;outline:none}
/* 이메일 형식 체크 표시 (초록 체크) */
.gauth-inwrap{position:relative}
.gauth-inwrap.gauth-has-chk .gauth-inp{padding-right:42px}
.gauth-inchk{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;color:#22c55e;opacity:0;transition:.12s;pointer-events:none}
.gauth-inwrap.ok .gauth-inchk{opacity:1}
/* 필수 별표 */
.gauth-req{color:#ef4444;font-weight:700}
/* 설정 모달 — 로그인 아이디 방식 라디오 (칩형) */
.gc-idtype{display:inline-flex;align-items:center;gap:5px;border:1px solid #bfdbfe;background:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px;color:#1e40af;font-weight:600;cursor:pointer}
.gc-idtype input{accent-color:#2563eb;width:14px;height:14px;cursor:pointer}
.gc-idtype:has(input:checked){background:#2563eb;border-color:#2563eb;color:#fff}
.gc-idtype:has(input:checked) input{accent-color:#fff}
/* 자동등록방지 캡차 */
.gauth-captcha{display:flex;align-items:center;gap:8px}
.gauth-cap-q{flex:0 0 auto;font-size:16px;font-weight:800;color:#374151;background:#f3f4f6;border-radius:10px;padding:12px 14px;letter-spacing:1px;user-select:none;font-variant-numeric:tabular-nums}
.gauth-cap-refresh{flex:0 0 auto;border:1px solid #e2e5ea;background:#fbfbfc;border-radius:10px;width:44px;height:44px;cursor:pointer;color:#9ca3af;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.12s}
.gauth-cap-refresh:hover{background:#f3f4f6;color:#4b5563}
/* 성별 라디오 */
.gauth-radio{display:flex;gap:10px}
.gauth-radio label{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e2e5ea;border-radius:11px;padding:13px;font-size:14px;color:#4b5563;background:#fbfbfc;cursor:pointer;transition:.12s;font-weight:600}
.gauth-radio label:hover{border-color:#cbd0d8}
.gauth-radio input{accent-color:var(--primary,#4f46e5);width:16px;height:16px;cursor:pointer}
.gauth-radio input:checked + span{color:var(--primary,#4f46e5)}
.gauth-radio label:has(input:checked){border-color:var(--primary,#4f46e5);background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#4f46e5) 12%,transparent)}
/* ★ (2026-10-20) 가입 개인정보 수집·이용 동의(필수) — 체크 + 내용보기 펼침 */
.gauth-agree{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;border:1px solid #e2e5ea;border-radius:11px;padding:11px 13px;background:#fbfbfc;margin:0 0 16px}
.gauth-agree label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#374151;cursor:pointer}
.gauth-agree input{accent-color:var(--primary,#4f46e5);width:17px;height:17px;cursor:pointer;flex:0 0 auto}
.gauth-agree > a{font-size:12.5px;color:#6b7280;text-decoration:underline}
.gauth-agree-txt{flex:1 1 100%;font-size:12px;line-height:1.7;color:#6b7280;border-top:1px dashed #e2e5ea;padding-top:8px;margin-top:2px}
/* ★ (2026-10-20) 휴대폰 문자 인증 줄 — 입력칸 + 버튼 */
.gauth-otp{display:flex;gap:8px;align-items:stretch}
.gauth-otp .gauth-inp{flex:1;min-width:0}
.gauth-otp-btn{flex:0 0 auto;border:1px solid var(--primary,#4f46e5);background:#fff;color:var(--primary,#4f46e5);border-radius:11px;padding:0 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.gauth-otp-btn:disabled{opacity:.5;cursor:default}
.gauth-otp-msg{font-size:12.5px;margin-top:6px;min-height:0}
.gauth-inp::placeholder{color:#b6bcc6}
.gauth-inp:focus{border-color:var(--primary,#4f46e5);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.14);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#4f46e5) 14%,transparent)}
/* 버튼 */
.gauth-btn{width:100%;box-sizing:border-box;border:0;border-radius:12px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;margin-top:22px;transition:.12s;display:flex;align-items:center;justify-content:center;gap:7px}
.gauth-btn-primary{background:var(--primary,#4f46e5);color:#fff}
.gauth-btn-primary:hover{filter:brightness(.94)}
.gauth-btn-primary:disabled{opacity:.6;cursor:default}
.gauth-btn-soft{background:#f3f4f6;color:#374151;margin-top:0;margin-bottom:8px}
.gauth-btn-soft:hover{background:#e9ebef}
.gauth-btn-danger{background:#fef2f2;color:#dc2626;margin-top:0}
.gauth-btn-danger:hover{background:#fde5e5}
.gauth-kakao{width:100%;box-sizing:border-box;background:#FEE500;color:#191600;border:0;border-radius:12px;padding:14px;font-size:14.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:4px}
.gauth-kakao i{font-size:18px}
/* ★ (2026-10-16) 네이버 간편 로그인 버튼 — 네이버 그린 + N 로고(글자) */
.gauth-naver{width:100%;box-sizing:border-box;background:#03C75A;color:#fff;border:0;border-radius:12px;padding:14px;font-size:14.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 4px}
.gauth-naver b{font-family:Arial,sans-serif;font-size:17px;font-weight:900;line-height:1}
/* 구분선 (또는) */
.gauth-or{display:flex;align-items:center;text-align:center;color:#c7ccd6;font-size:12px;margin:16px 0}
.gauth-or::before,.gauth-or::after{content:"";flex:1;height:1px;background:#eef0f4}
.gauth-or span{padding:0 12px}
/* 하단 전환 링크 */
.gauth-switch{text-align:center;font-size:13px;color:#9ca3af;margin-top:18px}
.gauth-switch a{color:var(--primary,#4f46e5);font-weight:700;text-decoration:none;margin-left:3px}
.gauth-switch a:hover{text-decoration:underline}
/* 로그인 상태 카드 */
.gauth-me{text-align:center;margin-bottom:20px}
.gauth-me-av{width:60px;height:60px;border-radius:50%;background:#eef0fb;background:color-mix(in srgb,var(--primary,#4f46e5) 12%,#fff);color:var(--primary,#4f46e5);display:flex;align-items:center;justify-content:center;font-size:28px;margin:6px auto 12px}
.gauth-me b{font-size:18px;color:#111827}
.gauth-me-ph{font-size:13px;color:#9ca3af;margin-top:3px}

/* ══════════════════════════════════════════════════════════════════════════
   ★ (2026-09-06) 상단바 흰색 테마 (식스샵식) — 기존 다크 규칙·인라인 색을 !important 로 덮음.
   구성: [←목록][이름][출력모드][설계폭⇔][기기탭][기기select][회전][배율][↶↷] ··· [미리보기3 | 방문 새로고침] [저장]
   말풍선 = [data-tip="제목|부연"] → JS #bldTip (body 레벨 fixed, 위 화살표)
   ══════════════════════════════════════════════════════════════════════════ */
.bld-top{background:#fff !important;color:#1e293b !important;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(15,23,42,.04);gap:6px}
.bld-top a{color:#475569 !important}
.bld-top a:hover{color:#0f172a !important}
.bld-top .ttl-txt{color:#475569}
.bld-top .ttl-txt i{color:#6d5cff}
.bld-top .ttl-txt b{color:#0f172a}
.bld-top .ttl-txt .ttl-sub{color:#64748b}
/* ★ (2026-10-03) 랜딩 이름이 안 보이던 원인 = 도구가 많아지면 .bld-top(overflow:hidden) 안에서
   제목 칸이 0 으로 쪼그라들어 잘려 나갔다. 줄어들지 않게 고정 폭을 확보한다. */
.bld-top .ttl-txt{flex:0 0 auto !important;min-width:120px;max-width:280px}
.bld-top .ttl-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 소유자(고객 아이디) 칩 — 흰 테마/다크 테마 양쪽에서 읽히도록 진한 바탕 */
.bld-top .bld-own{flex:none;display:inline-flex;align-items:center;background:#4338ca;color:#fff !important;
  font-size:11.5px;font-weight:800;border-radius:6px;padding:5px 9px;white-space:nowrap;text-decoration:none}
.bld-top .bld-own:hover{background:#3730a3;color:#fff !important}
.bld-top select{background:#f1f5f9 !important;border:1px solid #e2e8f0 !important;color:#1e293b !important;border-radius:8px !important;font-weight:600}
.bld-top select:hover{background:#e9edf3 !important}
.bld-top label{color:#64748b !important}
.bld-top input[type=number]{background:#f1f5f9 !important;border:1px solid #e2e8f0 !important;color:#0f172a !important;border-radius:8px !important;height:34px !important;text-align:center;padding:0 4px !important;font-size:13px !important}
/* 일반 버튼(회전 등) = 연회색 */
.bld-top .bld-btn{background:#f1f5f9 !important;color:#334155 !important;border:1px solid transparent !important;border-radius:8px !important;font-weight:600}
.bld-top .bld-btn:hover{background:#e2e8f0 !important;color:#0f172a !important}
.bld-top .bld-btn i{font-size:16px;vertical-align:-3px}
/* 아이콘 전용 버튼(방문·새로고침) */
.bld-top .ico-btn{width:34px !important;padding:0 !important;display:inline-flex;align-items:center;justify-content:center}
.bld-top .ico-btn i{font-size:18px;vertical-align:0}
/* 되돌리기/다시실행 — 항상 표시, 기록 없으면 연회색 */
.bld-top .hist-btn{background:transparent !important;width:32px !important;padding:0 !important;display:inline-flex;align-items:center;justify-content:center;color:#334155 !important}
.bld-top .hist-btn i{font-size:18px;vertical-align:0}
.bld-top .hist-btn:hover{background:#f1f5f9 !important}
.bld-top .hist-btn:disabled{opacity:1 !important;color:#cbd5e1 !important;background:transparent !important;cursor:default}
/* 설계폭 아이콘 버튼 */
.bld-top .dim-btn{background:#f1f5f9;border-color:transparent;color:#334155;border-radius:8px}
.bld-top .dim-btn:hover{background:#e2e8f0;color:#0f172a}
.bld-top .dim-btn.on{background:#eef2ff;border-color:#c7d2fe;color:#6d5cff}
/* 기기 탭 — 연회색 그룹 박스, 활성=흰 박스+보라 아이콘 */
.bld-top .dev-tabs{background:#f1f5f9;border-radius:9px;padding:3px;gap:2px !important}
.dev-tabs .dev-tab{background:transparent;color:#64748b;width:32px;height:28px;border-radius:7px;border:1px solid transparent}
.dev-tabs .dev-tab:hover{color:#0f172a}
.dev-tabs .dev-tab.on{background:#fff;color:#6d5cff;box-shadow:0 1px 3px rgba(15,23,42,.14);border-color:#e2e8f0}
.dev-tabs .dev-tab i{font-size:17px}
/* 우측 그룹: [미리보기3] | [방문][새로고침] [저장] */
.bld-export{border-left:1px solid #e5e7eb;padding-left:12px;gap:6px}
.bld-vt{display:inline-flex;align-items:center;gap:2px;background:#f1f5f9;border-radius:9px;padding:3px}
.bld-vt .vt-btn{width:32px;height:28px;border:1px solid transparent;border-radius:7px;background:transparent;color:#475569;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.bld-vt .vt-btn i{font-size:18px}
.bld-vt .vt-btn:hover{background:#fff;color:#6d5cff;border-color:#e2e8f0;box-shadow:0 1px 3px rgba(15,23,42,.14)}
.bld-vt .vt-btn:disabled{color:#cbd5e1;cursor:not-allowed}
.bld-vt .vt-btn:disabled:hover{background:transparent;border-color:transparent;box-shadow:none;color:#cbd5e1}
.bld-sep{display:inline-block;width:1px;height:22px;background:#e5e7eb;margin:0 4px}
.mini-busy{color:#b45309}
/* 저장 = 맨 우측 보라 CTA */
.bld-top .bld-btn.save{background:#6d5cff !important;color:#fff !important;font-weight:700;padding:0 18px !important;border-radius:9px !important;box-shadow:0 2px 8px rgba(109,92,255,.35)}
.bld-top .bld-btn.save:hover{background:#5b48f0 !important}
.bld-top .bld-btn.save i{font-size:16px}
/* 설계폭 레이어 = 흰 카드 */
.bld-top .dim-pop{background:#fff;border:1px solid #e2e8f0;box-shadow:0 14px 40px rgba(15,23,42,.18);color:#334155}
.bld-top .dim-hd{color:#0f172a;border-bottom-color:#eef1f5}
.bld-top .dim-hd i{color:#6d5cff}
.bld-top .dim-x{color:#94a3b8}
.bld-top .dim-x:hover{background:#f1f5f9;color:#0f172a}
.bld-top .dim-unify{background:#6d5cff !important;color:#fff !important}
.bld-top .dim-unify:hover{background:#5b48f0 !important}
.bld-top .dim-row{color:#475569}
.bld-top .dim-row > span i{color:#6d5cff}
.bld-top .dim-row input[type=number]{background:#f8fafc !important;border:1px solid #e2e8f0 !important;color:#0f172a !important;height:30px !important}
.bld-top .dim-row select{background:#f8fafc !important}
.bld-top .dim-row em{color:#94a3b8}
.bld-top .dim-hint{color:#94a3b8;border-top-color:#eef1f5}
/* 모바일(≤820) 세로 패널에서도 흰 배경 유지 + 아이콘 버튼은 가로폭 고정 해제 */
@media (max-width:820px){
  .bld-top .ico-btn,.bld-top .hist-btn{width:100% !important}
  .bld-vt{width:100%;justify-content:space-around}
  .bld-sep{display:none}
}
/* 말풍선 #bldTip — 위 화살표 달린 검은 말풍선 (body 레벨 fixed, JS 위치) */
#bldTip{position:fixed;z-index:100000;display:none;align-items:center;gap:6px;background:#1f2937;color:#fff;font-size:12.5px;line-height:1.3;padding:8px 11px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 24px rgba(15,23,42,.28);pointer-events:none;font-family:var(--ff-ko1,'Pretendard','Malgun Gothic',sans-serif)}
#bldTip .bt-t{font-weight:700}
#bldTip .bt-s{color:#9ca3af;font-size:12px}
#bldTip .bt-s:empty{display:none}
#bldTip .bt-arrow{position:absolute;top:-5px;left:50%;width:10px;height:10px;background:#1f2937;transform:translateX(-50%) rotate(45deg);border-radius:2px}
#bldTip.up .bt-arrow{top:auto;bottom:-5px}
/* ★ (2026-09-06) 커스텀 셀렉트 .csel — 네이티브 select 숨김 + 버튼(글자+화살표) + 레이어 목록 #cselPop (JS 위치, body 레벨) */
.bld-top .csel{display:inline-flex;position:relative;flex:0 0 auto}
.bld-top .csel-native{display:none !important}
.bld-top .csel-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 12px;border:1px solid #e2e8f0;border-radius:8px;background:#f1f5f9;color:#1e293b;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:190px;line-height:1}
.bld-top .csel-btn .csel-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bld-top .csel-btn i{font-size:14px;color:#6d5cff;flex:0 0 auto;transition:transform .15s}
.bld-top .csel-btn:hover{background:#e9edf3}
.bld-top .csel-btn.on{background:#fff;border-color:#c7d2fe;box-shadow:0 0 0 3px rgba(109,92,255,.12)}
.bld-top .csel-btn.on i{transform:rotate(180deg)}
.bld-top .csel-btn:disabled,.bld-top .csel-btn.disabled{color:#94a3b8;cursor:not-allowed;background:#f8fafc}
.bld-top .csel-btn:disabled i{color:#cbd5e1}
.bld-top .dim-row .csel-btn{height:30px;font-size:12px;padding:0 8px 0 10px;background:#f8fafc}
@media (max-width:820px){ .bld-top .csel{width:100%} .bld-top .csel-btn{width:100%;max-width:100%;justify-content:space-between} }
#cselPop{position:fixed;z-index:100001;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.18);padding:5px;max-height:60vh;overflow-y:auto;font-family:var(--ff-ko1,'Pretendard','Malgun Gothic',sans-serif)}
#cselPop .csel-it{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:7px;font-size:13px;color:#1e293b;cursor:pointer;white-space:nowrap;line-height:1.3}
#cselPop .csel-it:hover{background:#f1f5f9}
#cselPop .csel-it.on{color:#6d5cff;font-weight:700;background:#f5f3ff}
#cselPop .csel-it i{font-size:15px;color:#6d5cff}
/* ★ (2026-09-06) 공중 플로팅(도구 감추기 · 줌 · 단축키) 흰색 심플 버전 — 흰 알약 + 연한 테두리 + 진회색 글자, 활성=보라 */
#bldZoomFloat .bzf-btn{background:#fff;border:1px solid #e2e8f0;color:#334155;box-shadow:0 4px 14px rgba(15,23,42,.10)}
#bldZoomFloat .bzf-btn:hover{background:#f1f5f9;color:#0f172a}
#bldZoomFloat .bzf-btn i{font-size:16px;color:#6d5cff}
#bldZoomFloat .bzf-btn.on{background:#6d5cff;border-color:#6d5cff;color:#fff}
#bldZoomFloat .bzf-btn.on i{color:#fff}
#bldZoomFloat .bzf-zoom{background:#fff;border:1px solid #e2e8f0;box-shadow:0 4px 14px rgba(15,23,42,.10)}
#bldZoomFloat .bzf-z{color:#334155;font-weight:700}
#bldZoomFloat .bzf-z:hover{background:#f1f5f9;color:#0f172a}
#bldZoomFloat .bzf-lbl{color:#475569;font-weight:600}
#bldZoomFloat .bzf-lbl:hover{color:#6d5cff}
.bld-info{background:#fff !important;border:1px solid #e2e8f0 !important;color:#334155 !important}
.bld-info:hover{background:#f1f5f9 !important;color:#0f172a !important}
.bld-info i{font-size:16px;color:#6d5cff}
#infoWrap .bld-info{box-shadow:0 4px 14px rgba(15,23,42,.10)}
#infoWrap.open .bld-info{background:#6d5cff !important;border-color:#6d5cff !important;color:#fff !important}
#infoWrap.open .bld-info i{color:#fff}
/* 왼쪽 날개(페이지 독 토글·라이브러리 열기) 아이콘 크기 — Phosphor duotone */
#lndPageToggle i,#wjlibOpen i{font-size:24px;line-height:1}
#lndPageDock .lpd-head i{font-size:18px}
.bld-side .stk-btn i.ph-duotone{font-size:18px;color:#6d5cff}
/* ★ (2026-09-06) 도구 감추기·단축키 → 상단바 아이콘. 줌 플로팅은 예전 단축키 자리(right:322px)로. #infoWrap 은 패널만(버튼 없음) */
#bldZoomFloat{right:322px}
#infoWrap{pointer-events:none}
#infoWrap .bld-infopanel{pointer-events:auto}
.bld-top .bld-btn.on{background:#6d5cff !important;color:#fff !important}
.bld-top .bld-btn.on i{color:#fff}
#infoBtnTop.on{background:#6d5cff !important;color:#fff !important}
@media screen and (max-width:900px){ #bldZoomFloat{top:auto;bottom:14px;right:14px} }
/* ★ (2026-09-06) 단축키 패널 = 클릭으로 열고 X 로 닫음 (hover 열림 해제). 헤더 우측 X */
.bld-infowrap:hover .bld-infopanel{display:none}
.bld-infowrap.open .bld-infopanel{display:block}
.bld-infopanel .ttl2{display:flex;align-items:center;gap:6px}
.bld-infopanel .info-x{margin-left:8px;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.bld-infopanel .info-x:hover{background:rgba(255,255,255,.12);color:#fff}
/* ★ (2026-09-06) 도형 아이콘 .stk-ic = 인라인 SVG duotone 풍 (연보라 면 20% + 보라 선 1.6) — Phosphor 규격과 통일 */
.bld-side .stk-btn i.stk-ic{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.bld-side .stk-btn i.stk-ic svg{width:20px;height:20px;fill:rgba(109,92,255,.2);stroke:#6d5cff;stroke-width:1.6;overflow:visible}
.bld-side .stk-btn:hover i.stk-ic svg{fill:rgba(109,92,255,.32)}
/* ★ (2026-09-06) 섹션 선택 레일 흰색 심플 — 톱니=흰 원(연한 테두리), 선택=보라. 빠른 액션=흰 카드 2열 그리드(.bsr-card) */
#blkSelRail button{background:#fff;color:#64748b;border:1px solid #e2e8f0;opacity:1;box-shadow:0 2px 8px rgba(15,23,42,.10);width:30px;height:30px;font-size:17px}
#blkSelRail button i{line-height:1}
#blkSelRail button:hover{background:#f1f5f9;color:#0f172a}
#blkSelRail button.on{background:#6d5cff;border-color:#6d5cff;color:#fff}
#blkSelRail .bsr-card{position:fixed;transform:translateY(-50%);z-index:891;display:grid;grid-template-columns:repeat(2,30px);gap:4px;padding:5px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.14)}
#blkSelRail .bsr-card.one{grid-template-columns:30px}
#blkSelRail .bsr-card button.qa{position:static;transform:none;width:30px;height:30px;border-radius:7px;border:0;background:transparent;color:#475569;box-shadow:none;font-size:17px;opacity:1}
#blkSelRail .bsr-card button.qa:hover{background:#f1f5f9;color:#0f172a}
#blkSelRail .bsr-card button.qa.qa-lib{color:#475569}
#blkSelRail .bsr-card button.qa.qa-lib:hover{background:#f1f5f9;color:#0f172a}
#blkSelRail .bsr-card button.qa.qa-ai{background:#f5f3ff;color:#6d5cff;box-shadow:none;width:30px;height:30px;font-size:17px}
#blkSelRail .bsr-card button.qa.qa-ai:hover{background:#ede9fe;color:#5b48f0}
#blkSelRail .bsr-card button.qa.qa-mo{background:transparent;color:#475569;font-weight:400;font-size:17px}
#blkSelRail .bsr-card button.qa.qa-mo:hover{background:#f1f5f9;color:#0f172a}
#blkSelRail .bsr-card button.qa.qa-mo.on{background:#6d5cff;color:#fff;box-shadow:none}
#blkSelRail .bsr-card button.qa.qa-mo.on:hover{background:#5b48f0}
/* ★ (2026-09-06) 왼쪽 아이콘 레일 #lndLeftRail — 흰 배경 세로 48px. 레이어·공용헤더·공용푸터·플로팅·게시판데이터·환경설정 ─ 라이브러리.
   #lndPageToggle / #wjlibOpen 은 레일 안 정적 배치(기존 fixed 규칙 덮음). 독(z1710)·라이브러리(z1720)가 열리면 레일 위를 덮음. */
#lndLeftRail{position:fixed;left:0;top:52px;bottom:0;width:48px;z-index:1706;background:#fff;border-right:1px solid #e5e7eb;box-shadow:1px 0 6px rgba(15,23,42,.05);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0}
#lndLeftRail .lr-btn,#lndLeftRail #lndPageToggle,#lndLeftRail #wjlibOpen{position:static !important;width:36px !important;height:36px !important;border:1px solid transparent;border-radius:9px;background:transparent;color:#475569;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;box-shadow:none;font-size:20px;transition:background .12s,color .12s}
#lndLeftRail .lr-btn i{font-size:20px;line-height:1}
#lndLeftRail .lr-btn:hover{background:#f1f5f9;color:#0f172a}
#lndLeftRail .lr-btn.on{background:#eef2ff;border-color:#c7d2fe;color:#6d5cff}
#lndLeftRail .lr-sep{display:block;width:24px;height:1px;background:#e5e7eb;margin:4px 0}
body.shp-frame #lndLeftRail,body.shp-scanning #lndLeftRail,body.shp-mobile-view #lndLeftRail,body.lnd-view #lndLeftRail{display:none !important}
/* 오른쪽 말풍선(왼쪽 레일용) — 화살표 왼쪽 */
#bldTip.side .bt-arrow{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}
/* ★ (2026-09-06) admin 도구 독 = 왼쪽 레일(48px)에 안 가리게 left 62px. 고객 도구는 레일 하단 .lr-bottom, 이미지함은 상단바. */
.shp-dock{left:62px}
#lndLeftRail .lr-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:6px}
#lndLeftRail .lr-color i{color:#f0473e}
#lndLeftRail .lr-color:hover i{color:#d93b32}
/* ★ (2026-10-11) 폰트 설정 아이콘(Aa, 보라) — 컬러 모달과 분리 */
#lndLeftRail .lr-font i{color:#6d5cff}
#lndLeftRail .lr-font:hover i{color:#5b21b6}
/* ★ (2026-09-06) 우측 날개 접기/펴기 손잡이 #bldSideHandle + body.side-collapsed */
.bld-side{transition:transform .2s ease}
/* ★ (2026-10-10) z-index 901→899: 공통영역 설정 등 .bld-side(z900) 안의 플로팅 패널이 손잡이 위로 덮이도록(손잡이가 패널 위로 비치던 증상) */
#bldSideHandle{position:fixed;right:300px;top:50%;transform:translateY(-50%);width:20px;height:60px;border:1px solid #e2e8f0;border-right:0;border-radius:9px 0 0 9px;background:#fff;color:#64748b;cursor:pointer;z-index:899;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:-2px 0 8px rgba(15,23,42,.08);font-size:14px;transition:right .2s ease,background .12s}
#bldSideHandle:hover{background:#f1f5f9;color:#6d5cff}
body.side-collapsed .bld-side{transform:translateX(100%)}
body.side-collapsed #bldSideHandle{right:0}
body.side-collapsed .bld-stage{padding-right:20px}
body.side-collapsed #bldZoomFloat{right:22px}
body.side-collapsed #lndAiFab{right:16px}
body.side-collapsed #lndAiChat{right:16px !important}
body.lnd-inline-only #bldSideHandle,body.shp-frame #bldSideHandle,body.shp-mobile-view #bldSideHandle,body.shp-scanning #bldSideHandle,body.shp-printing #bldSideHandle{display:none !important}
@media (max-width:900px){ #bldSideHandle{display:none !important} body.side-collapsed .bld-side{transform:none} body.side-collapsed .bld-stage{padding-right:10px} }
/* ★ (2026-09-06) 화면 줌 = 상단바 그룹 .bld-zoom (연회색 박스 [−][100%][+]) — #bldZoomFloat 폐지 */
.bld-zoom{display:inline-flex;align-items:center;gap:0;background:#f1f5f9;border-radius:9px;padding:3px;height:34px}
.bld-zoom .bz-btn{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:#475569;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:15px}
.bld-zoom .bz-btn:hover{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(15,23,42,.14)}
.bld-zoom .bz-lbl{height:28px;min-width:48px;border:0;border-radius:7px;background:transparent;color:#334155;font-size:12.5px;font-weight:700;cursor:pointer;padding:0 6px}
.bld-zoom .bz-lbl:hover{background:#fff;color:#6d5cff}
#bldZoomFloat{display:none !important}
body.lnd-inline-only .bld-top .bld-zoom{display:none !important}
/* ★ (2026-09-06) 흰순이 FAB — 날개 접힘/펼침 따라 오른쪽 위치 부드럽게 이동 */
#lndAiFab{transition:transform .18s,right .2s ease}
#lndAiChat{transition:right .2s ease}
/* ★ (2026-09-06) 우측 날개 손잡이 = 아이콘스카우트 라인 화살표 크기 */
#bldSideHandle i{font-size:18px;line-height:1}
/* ★ (2026-09-06) 섹션 레이어 추가 버튼 = 스티커 버튼 패턴 (아이콘 위 + 라벨, 가로 4칸 고정) */
.bld-side .lay-addrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex-wrap:nowrap}
.bld-side .lay-addrow .stk-btn{flex:none;min-width:0}
/* ★ (2026-09-06) 섹션 툴바 눈 3개 (.hdev) — 눈 + 작은 기기 아이콘. 감김=보라 */
.blk .tools button.hdev{width:auto;padding:0 5px;display:inline-flex;align-items:center;gap:2px}
.blk .tools button.hdev i{font-size:12px;line-height:1}
.blk .tools button.hdev i.hdev-ic{font-size:11px;opacity:.75}
.blk .tools button.hdev.on i.hdev-ic{opacity:1}
/* ★ (2026-09-06) 섹션 툴바 감기 묶음 .hdev-grp = [눈 | PC · T · M] — 한 알약 안에, 기기 아이콘 Phosphor duotone, 감김=보라 */
.blk .tools .hdev-grp{display:inline-flex;align-items:center;gap:0;height:26px;border-radius:4px;background:#0f172a;opacity:.88;padding:0 2px}
.blk .tools .hdev-grp button{width:24px;height:22px;border:0;border-radius:4px;background:transparent;color:#cbd5e1;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:1}
.blk .tools .hdev-grp button i{font-size:14px;line-height:1}
.blk .tools .hdev-grp button:hover{background:#334155;color:#fff}
.blk .tools .hdev-grp button.on{background:#7c3aed !important;color:#fff !important}
.blk .tools .hdev-grp .hdev-sep{display:inline-block;width:1px;height:14px;background:#334155;margin:0 2px}
.blk .tools button.hdev{width:24px;padding:0}
/* ★ (2026-09-06) 슬라이더 공통 = 얇은 라인 + 흰 원 썸 (우측 날개·모달 전체). 여백 행 .mg-row = [방향 아이콘][슬라이더][입력 px] */
.bld-side input[type=range],.shp-ov input[type=range],.lnd-hf-ov input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;margin:0;padding:0;cursor:pointer}
.bld-side input[type=range]::-webkit-slider-runnable-track,.shp-ov input[type=range]::-webkit-slider-runnable-track,.lnd-hf-ov input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#e2e8f0}
.bld-side input[type=range]::-webkit-slider-thumb,.shp-ov input[type=range]::-webkit-slider-thumb,.lnd-hf-ov input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 3px rgba(15,23,42,.18);margin-top:-5.5px;transition:border-color .12s,box-shadow .12s}
.bld-side input[type=range]:hover::-webkit-slider-thumb,.shp-ov input[type=range]:hover::-webkit-slider-thumb,.lnd-hf-ov input[type=range]:hover::-webkit-slider-thumb{border-color:#6d5cff;box-shadow:0 0 0 3px rgba(109,92,255,.15)}
.bld-side input[type=range]::-moz-range-track,.shp-ov input[type=range]::-moz-range-track,.lnd-hf-ov input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:#e2e8f0}
.bld-side input[type=range]::-moz-range-thumb,.shp-ov input[type=range]::-moz-range-thumb,.lnd-hf-ov input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 3px rgba(15,23,42,.18)}
.bld-side .mg-row{display:flex;align-items:center;gap:7px;margin:4px 0}
.bld-side .mg-row .mg-lb{flex:0 0 20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#475569;font-weight:600}
.bld-side .mg-row .mg-lb i{font-size:16px;color:#6d5cff}
.bld-side .mg-row .mg-sld{flex:1;min-width:0}
.bld-side .mg-row .mg-num{flex:0 0 58px;height:28px;border:1px solid #e2e8f0;border-radius:7px;padding:0 4px;font-size:12px;text-align:center;background:#fff;color:#0f172a;min-width:0;box-sizing:border-box}
.bld-side .mg-row .mg-num:focus{outline:0;border-color:#6d5cff;box-shadow:0 0 0 3px rgba(109,92,255,.12)}
.bld-side .mg-row .mg-unit{font-style:normal;font-size:11px;color:#94a3b8;flex:0 0 16px}
/* ★ (2026-09-06) 여백 방향 아이콘 .mg-ico = 점선 네모 + 해당 변 굵은 실선(보라) */
.bld-side .mg-row .mg-lb .mg-ico{display:inline-flex;width:18px;height:18px}
.bld-side .mg-row .mg-lb .mg-ico svg{width:18px;height:18px;overflow:visible}
.bld-side .mg-row .mg-lb .mg-ico .mg-box{fill:none;stroke:#94a3b8;stroke-width:1.2;stroke-dasharray:2.2 1.8}
.bld-side .mg-row .mg-lb .mg-ico .mg-side{fill:none;stroke:#6d5cff;stroke-width:3;stroke-linecap:round}
/* ★ (2026-09-06) 기기 탭 비활성(.off) = 작대기 — 출력모드에서 의미 없는 기기(모바일 전용=태블릿·PC / 모바일+태블릿=PC) */
.dev-tabs .dev-tab.off{color:#cbd5e1 !important;cursor:not-allowed;position:relative;background:transparent !important;box-shadow:none !important;border-color:transparent !important}
.dev-tabs .dev-tab.off::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:2px;background:#cbd5e1;transform:rotate(-40deg);border-radius:1px}
.dev-tabs .dev-tab.off:hover{color:#cbd5e1 !important}
/* 스타일 설정 헤더 기기 칩 + 여백 행 전용값 표시 */
.bld-side .dev-chip{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:#6d5cff;border-radius:12px;padding:2px 9px;white-space:nowrap}
.bld-side .mg-row .mg-lb .mg-ico .mg-box{stroke:#cbd5e1}
.bld-side .mg-row .mg-lb .mg-ico .mg-side{stroke:#cbd5e1}
.bld-side .mg-row .mg-lb.own .mg-ico .mg-box{stroke:#94a3b8}
.bld-side .mg-row .mg-lb.own .mg-ico .mg-side{stroke:#6d5cff}
/* ★ (2026-09-06) 설계폭 레이어 소제목(콘텐츠 배율) */
.bld-top .dim-sub{font-size:11.5px;font-weight:700;color:#334155;margin:6px 0 0;padding-top:8px;border-top:1px solid #eef1f5}
.bld-top .dim-sub small{font-weight:400;color:#94a3b8}
/* ★ (2026-09-06) 출력모드에서 쓰이지 않는 기기 칸(.dev-off) — 회색·작대기 느낌 */
.dev-off{opacity:.4 !important;background:#f1f5f9 !important;color:#94a3b8 !important;cursor:not-allowed !important;text-decoration:line-through}
/* ★ (2026-09-06) 예약/신청 폼 임베드 배열 강제 — .rsv-lay-mo=세로 한 칸(모바일형) / .rsv-lay-pc=달력+폼 좌우(700px 이상에서만, 폰은 세로) */
.blk.rsv-lay-mo .lb-rsv-grid{grid-template-columns:1fr !important}
@media (min-width:700px){ .blk.rsv-lay-pc .lb-rsv-grid{grid-template-columns:minmax(280px,380px) 1fr !important} }
/* ★ (2026-09-06) 레이어 위 즉시 삭제 아이콘(.hd-del) — 선택된 레이어 우상단 빨간 원 × */
.blk-layer .hd-del{position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:4;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;font-weight:700}
.blk-layer .hd-del:hover{background:#dc2626}
/* ══ ★ (2026-09-06) 페이지 독 흰색 테마 — 다크 규칙 반전 + Phosphor duotone 아이콘 + 하단 추가 버튼 가로 배열 ══ */
#lndPageDock{background:#fff;color:#1e293b;border-right:1px solid #e5e7eb;box-shadow:2px 0 12px rgba(15,23,42,.06)}
#lndPageDock .lpd-head{color:#0f172a}
#lndPageDock .lpd-head i{color:#6d5cff}
#lndPageDock .lpd-head small{color:#94a3b8}
#lndPageDock .lpd-close{color:#64748b}
#lndPageDock .lpd-close:hover{background:#f1f5f9;color:#0f172a}
#lndPageDock .lpd-item{background:#fff;border:1px solid #e5e7eb}
#lndPageDock .lpd-item:hover{border-color:#cbd5e1}
#lndPageDock .lpd-item.on{background:#f5f3ff;border-color:#c7d2fe}
#lndPageDock .lpd-grip{color:#cbd5e1}
#lndPageDock .lpd-grip i{font-size:16px}
#lndPageDock .lpd-link{color:#334155}
#lndPageDock .lpd-item.on .lpd-link{color:#0f172a}
#lndPageDock .lpd-link>i{font-size:17px;opacity:1;color:#6d5cff}
#lndPageDock .lpd-badge{background:#f1f5f9;color:#475569}
#lndPageDock .lpd-badge.bo{background:#e0f2fe;color:#0369a1}
#lndPageDock .lpd-item.on .lpd-badge{background:#ede9fe;color:#5b21b6}
#lndPageDock .lpd-acts button{background:#f1f5f9;color:#64748b;width:28px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
#lndPageDock .lpd-acts button i{font-size:15px;line-height:1}
#lndPageDock .lpd-acts button:hover{background:#e2e8f0;color:#0f172a}
#lndPageDock .lpd-acts button.del:hover{background:#fee2e2;color:#dc2626}
#lndPageDock .lpd-acts .msub.on{background:#ede9fe;color:#6d5cff;border-color:transparent}
#lndPageDock .lpd-json button{background:#f1f5f9;color:#475569;width:28px;height:26px;padding:0;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
#lndPageDock .lpd-json button i{font-size:15px;line-height:1}
#lndPageDock .lpd-json button:hover{background:#e2e8f0;color:#6d5cff}
#lndPageDock .lpd-add{flex-direction:row;gap:6px}
#lndPageDock .lpd-add button{flex:1;min-width:0;border:1px dashed #cbd5e1;background:#f8fafc;color:#334155;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
#lndPageDock .lpd-add button i{font-size:16px;color:#6d5cff}
#lndPageDock .lpd-add button:hover{border-color:#6d5cff;background:#f5f3ff;color:#0f172a}
#lndPageDock .lpd-hf{border-top-color:#eef1f5}
/* ★ (2026-09-06) 페이지 독 배지 — 흰 테마 색 (인라인 색 제거분) */
#lndPageDock .lpd-badge.bo.nv{background:#ede9fe;color:#6d28d9}
#lndPageDock .lpd-badge.hid{background:#f1f5f9;color:#64748b}
#lndPageDock .lpd-badge.bt{background:#e0f2fe;color:#0369a1;font-family:Consolas,'Courier New',monospace}
#lndPageDock .lpd-item.on .lpd-badge.bo.nv,#lndPageDock .lpd-item.on .lpd-badge.bt{background:#fff;color:#5b21b6}
/* ★ (2026-09-06) 현재 보고 있는 페이지 — 선명한 보라 라인 + 액션 아이콘 흰 배경 */
#lndPageDock .lpd-item.on{border:2px solid #6d5cff;background:#f5f3ff;box-shadow:0 0 0 3px rgba(109,92,255,.12)}
#lndPageDock .lpd-item.on .lpd-acts button,#lndPageDock .lpd-item.on .lpd-json button{background:#fff;border:1px solid #e2e8f0;color:#475569}
#lndPageDock .lpd-item.on .lpd-acts button:hover,#lndPageDock .lpd-item.on .lpd-json button:hover{background:#fff;border-color:#6d5cff;color:#6d5cff}
#lndPageDock .lpd-item.on .lpd-acts button.del:hover{background:#fff;border-color:#dc2626;color:#dc2626}
#lndPageDock .lpd-item.on .lpd-acts .msub.on{background:#fff;border-color:#c7d2fe;color:#6d5cff}
/* ★ (2026-09-06) 페이지 독 드래그 그립 — 조금 진한 회색 */
#lndPageDock .lpd-grip{color:#94a3b8}
#lndPageDock .lpd-grip:hover{color:#475569}
/* ★ (2026-09-06) 페이지 독 게시판 배지 — 회색 글자 + 아주 연한 회색 배경 (색 배지 → 중립) */
#lndPageDock .lpd-badge,#lndPageDock .lpd-badge.bo,#lndPageDock .lpd-badge.bo.nv,#lndPageDock .lpd-badge.hid,#lndPageDock .lpd-badge.bt{background:#f5f7fa;color:#64748b}
#lndPageDock .lpd-item.on .lpd-badge,#lndPageDock .lpd-item.on .lpd-badge.bo.nv,#lndPageDock .lpd-item.on .lpd-badge.bt{background:#fff;color:#64748b}
/* ★ (2026-09-06) 페이지 독 왼쪽 액션 아이콘 — 배경 없이 아이콘만 진한 회색 (현재 페이지 카드 안도 동일) */
#lndPageDock .lpd-acts button,#lndPageDock .lpd-item.on .lpd-acts button{background:transparent;border:0;color:#64748b}
#lndPageDock .lpd-acts button i{font-size:16px}
#lndPageDock .lpd-acts button:hover,#lndPageDock .lpd-item.on .lpd-acts button:hover{background:transparent;border:0;color:#0f172a}
#lndPageDock .lpd-acts button.del:hover,#lndPageDock .lpd-item.on .lpd-acts button.del:hover{background:transparent;border:0;color:#dc2626}
#lndPageDock .lpd-acts .msub.on,#lndPageDock .lpd-item.on .lpd-acts .msub.on{background:transparent;border:0;color:#6d5cff}
/* ★ (2026-09-06) 페이지 독 드래그 그립 — 라인 아이콘(uil) + 진한 회색 (duotone 반투명은 흐려 보임) */
#lndPageDock .lpd-grip{color:#64748b}
#lndPageDock .lpd-grip i{font-size:17px;opacity:1}
#lndPageDock .lpd-grip:hover{color:#0f172a}
/* ★ (2026-09-06) 플로팅 설정 모달 — 좌측 탭(.flt-nav) + 우측 패널(.flt-pan). 탭 초록 점 = 사용 중 */
.flt-wrap{display:flex;gap:16px;margin-top:14px;min-height:440px;align-items:stretch}
.flt-nav{flex:0 0 200px;display:flex;flex-direction:column;gap:4px;padding-right:12px;border-right:1px solid #eef1f5}
.flt-tab{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:9px;padding:10px 11px;font-size:13px;font-weight:600;color:#475569;cursor:pointer}
.flt-tab:hover{background:#f8fafc;color:#0f172a}
.flt-tab.active{background:#f5f3ff;border-color:#c7d2fe;color:#6d5cff}
.flt-tab .dot{width:9px;height:9px;border-radius:50%;background:#e2e8f0;flex:0 0 auto;transition:background .12s}
.flt-tab.on .dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.flt-tab.common .dot{background:transparent;border:1px dashed #cbd5e1}
.flt-tab .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flt-pan{flex:1;min-width:0}
.flt-pan .flt-sec{background:#fff !important;border:0 !important;padding:2px 4px !important}
@media (max-width:760px){ .flt-wrap{flex-direction:column} .flt-nav{flex:none;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #eef1f5;padding:0 0 10px} .flt-tab{width:auto} }
/* ★ (2026-09-06) 플로팅 모달 골격 — 고정 헤더(드래그·X) / 스크롤 본문 / 고정 푸터 */
.flt-box{max-height:92vh}
.flt-hd{flex:none;display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #eef1f5;cursor:move;user-select:none;background:#fff;border-radius:16px 16px 0 0}
.flt-hd > div{flex:1;min-width:0}
.flt-x{flex:none;width:32px;height:32px;border:0;border-radius:8px;background:#f1f5f9;color:#475569;font-size:20px;line-height:1;cursor:pointer}
.flt-x:hover{background:#e2e8f0;color:#0f172a}
.flt-body{flex:1;min-height:0;overflow:auto;padding:6px 20px 14px}
.flt-ft{flex:none;padding:12px 20px 16px;border-top:1px solid #eef1f5;background:#fff;border-radius:0 0 16px 16px}
.flt-ft > div{margin-top:0 !important}
.flt-wrap{min-height:0}
/* ★ (2026-09-06) 텍스트 모달 기기 탭 — 크기·행간·상하마진을 보고 있는 기기 값으로 편집 (헤더 .dev-tab 과 같은 톤) */
.tcs-devs{display:inline-flex;gap:2px;align-items:center;background:#f1f5f9;border-radius:8px;padding:2px}
.tcs-devs .tcs-dev{background:transparent;color:#64748b;width:30px;height:26px;border-radius:6px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.tcs-devs .tcs-dev i{font-size:16px}
.tcs-devs .tcs-dev:hover{color:#0f172a}
.tcs-devs .tcs-dev.on{background:#fff;color:#6d5cff;box-shadow:0 1px 3px rgba(15,23,42,.14);border-color:#e2e8f0}
.tcs-devs .tcs-dev.off{color:#cbd5e1 !important;cursor:not-allowed;position:relative;background:transparent !important;box-shadow:none !important;border-color:transparent !important}
.tcs-devs .tcs-dev.off::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:2px;background:#cbd5e1;transform:rotate(-40deg);border-radius:1px}
/* ★ (2026-09-06) 버튼 설정 모달(전화/일반/내위치/모달신청서) 정돈 — 본문 스크롤 영역 .bcfg-body */
.bcfg-body input[type=color]{width:30px !important;height:30px !important;border:1px solid #e2e8f0 !important;border-radius:50% !important;padding:0 !important;background:none !important;cursor:pointer;box-sizing:border-box;vertical-align:middle}
.bcfg-body input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
.bcfg-body input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.bcfg-body input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.bcfg-body input[type=text],.bcfg-body input[type=number],.bcfg-body select,.bcfg-body textarea{border:1px solid #e2e8f0 !important;border-radius:8px !important;font-size:12.5px !important;color:#0f172a;background:#fff}
.bcfg-body input[type=text],.bcfg-body input[type=number],.bcfg-body select{height:34px !important;padding:0 9px !important;box-sizing:border-box}
.bcfg-body input:focus,.bcfg-body select:focus,.bcfg-body textarea:focus{outline:none;border-color:#a5b4fc !important;box-shadow:0 0 0 3px rgba(109,92,255,.12)}
.bcfg-body input::placeholder{color:#cbd5e1}
.bcfg-bar button:hover{background:#f8fafc !important;color:#6d5cff !important;border-color:#c7d2fe !important}
.bcfg-x:hover{background:#e2e8f0 !important;color:#0f172a !important}
.bcfg-body .mg-ico{display:inline-flex;width:18px;height:18px;vertical-align:middle}
.bcfg-body .mg-ico svg{width:18px;height:18px;overflow:visible}
.bcfg-body .mg-ico .mg-box{fill:none;stroke:#94a3b8;stroke-width:1.2;stroke-dasharray:2.2 1.8}
.bcfg-body .mg-ico .mg-side{fill:none;stroke:#6d5cff;stroke-width:3;stroke-linecap:round}
/* ★ (2026-09-06) 공용 동그란 컬러 피커 .lnd-cpick (칸 디자인 배경 등) — 라인 없는 스와치 */
.lnd-cpick{width:30px !important;height:30px !important;border:1px solid #e2e8f0 !important;border-radius:50% !important;padding:0 !important;background:none !important;cursor:pointer;box-sizing:border-box;vertical-align:middle}
.lnd-cpick::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
.lnd-cpick::-webkit-color-swatch{border:0;border-radius:50%}
.lnd-cpick::-moz-color-swatch{border:0;border-radius:50%}
/* ★ (2026-09-06) 고급그리드 모달 열/행 비율 조절바 — 얇은 라인 슬라이더(우측 패널과 동일 톤) */
#g2MdBox input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;margin:0;padding:0;cursor:pointer}
#g2MdBox input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#e2e8f0}
#g2MdBox input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 3px rgba(15,23,42,.18);margin-top:-5.5px;transition:border-color .12s,box-shadow .12s}
#g2MdBox input[type=range]:hover::-webkit-slider-thumb{border-color:#6d5cff;box-shadow:0 0 0 3px rgba(109,92,255,.15)}
#g2MdBox input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:#e2e8f0}
#g2MdBox input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 3px rgba(15,23,42,.18)}
/* ★ (2026-09-06) HTML/CSS 하드코딩 섹션·칸 — 콘텐츠 래퍼 */
.html-blk,.lnd-html{width:100%;min-width:0}
#htmlCellOv .shp-md .CodeMirror{height:52vh}
/* ★ (2026-09-06) 그리드/고급그리드 칸 [꽉 채우기](inbox.fill) — 칸 높이만큼 내용 세로 채움, 이미지는 cover */
.gr-cell.gr-fill,.g2-cell.gr-fill{display:flex !important;flex-direction:column;min-height:0}
.gr-fill>.gr-img{flex:1 1 auto;min-height:0;display:flex;overflow:hidden}
.gr-fill>.gr-img>img{width:100% !important;height:100% !important;object-fit:cover;flex:1 1 auto;min-height:0;display:block}
.gr-fill>.gr-txt,.gr-fill>.lnd-html,.gr-fill>.html-blk{flex:1 1 auto;min-height:0}
/* ★ (2026-09-06) 칸 레이어(스티커·버튼·도형) — 칸 안 absolute 래퍼. 편집 캔버스에서는 클릭 통과(편집은 칸 레이어 모달) */
.gr-laywrap{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.gr-lay{pointer-events:none}
.gr-lay img{max-width:100%;display:block}
.gr-lay .ly-btn{line-height:1.3}
#clyStage .gr-lay{pointer-events:auto}
/* ★ (2026-10-03) 무대 안 이미지는 브라우저 기본 드래그를 막는다 — Shift/Alt/Ctrl+클릭이 먹히게 */
#clyStage .gr-lay img{-webkit-user-drag:none;user-select:none;pointer-events:none}
#clyStage .gr-lay .stk-mask,#clyStage .gr-lay .stk-shape{pointer-events:none}
/* 칸 영상 */
.gr-video-title{font-size:14px;font-weight:700;color:#0f172a;padding:8px 2px;line-height:1.4}
.gr-video iframe,.gr-video video{pointer-events:auto}
/* ★ (2026-09-06) 칸 레이어 모달 무대 핸들 — 섹션 레이어(.blk-layer)와 동일 모양: 크기(파랑 우하) · 회전(주황 상단) · 삭제(빨강 우상 ×) */
#clyStage .gr-lay .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)}
#clyStage .gr-lay .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)}
#clyStage .gr-lay .hd-rot::after{content:'';position:absolute;left:50%;top:13px;width:2px;height:11px;background:#f59e0b;margin-left:-1px}
#clyStage .gr-lay .hd-del{position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:4;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;font-weight:700}
#clyStage .gr-lay .hd-del:hover{background:#dc2626}
#clyStage{overflow:visible !important}
/* ★★ (2026-10-03) 칸 레이어 모달 — 넓게 + 모서리 끌어 크기 조절(기억) + 무대 도구줄. 샵헬퍼 역이식 */
#clyOv .shp-md{width:min(1500px,96vw) !important;max-width:none;position:relative}
/* ★ (2026-10-03) 모달 안 컬러 피커가 화면 왼쪽 위에 붙어 뜨던 문제 —
   네이티브 피커는 input 이 "보이는 자리"를 기준으로 뜬다. 스와치를 투명하게 숨기지 말고
   실제 크기를 가진 요소로 두어야 제자리에 열린다. (.lnd-cpick 이 30×30 을 보장) */
#clyPanel input[type=color]{min-width:26px;min-height:24px;opacity:1 !important;visibility:visible !important}
#clyOv .shp-md.cly-sized{width:var(--cly-w) !important;height:var(--cly-h) !important;max-height:none !important}
#clyOv .shp-md.cly-sized #clyPanel{max-height:none !important}
#clyOv .shp-md .hd{cursor:move}
#clyStageWrap{align-items:flex-start !important;justify-content:flex-start !important}   /* 확대 시 좌상단 기준 — 가운데 정렬이면 이동이 어긋난다 */
#clyTools button{border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:7px;cursor:pointer;font-family:inherit;line-height:1}
#clyTools button:hover{border-color:#6d5cff;color:#6d5cff}
#clyTools .cly-zb{width:26px;height:26px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
#clyTools .cly-zl{min-width:72px;height:26px;font-size:12px;font-weight:700;padding:0 8px}
#clyTools .cly-zt{height:26px;font-size:12px;padding:0 10px}
/* ★ (2026-10-03 v3) 고객 화면 그리드 안내 — 섹션 "아래쪽" 말풍선.
   ① 종전 v1(섹션 위 띠)은 기기 눈 아이콘·툴바에 가려 안 읽혔다.
   ② v2(캔버스 밖 오른쪽)는 #canvas 의 overflow-x:hidden 에 잘려 안 보인다.
   → 툴바가 없는 아래쪽 모서리에 작게 띄운다. 디자인은 거의 안 가리고 마우스를 올리면 더 흐려진다. */
.lnd-cellhint{position:absolute;right:10px;bottom:10px;z-index:7;pointer-events:none;
  max-width:min(260px,72%);background:rgba(15,118,110,.95);color:#fff;
  font-size:12px;font-weight:600;line-height:1.55;padding:8px 13px;text-align:left;
  border-radius:10px;letter-spacing:-.2px;box-shadow:0 6px 18px rgba(15,23,42,.25);transition:opacity .15s}
.lnd-cellhint b{font-weight:800;color:#fde68a}
.lnd-cellhint i{font-size:14px;vertical-align:-2px;margin-right:3px}
.blk:hover > .lnd-cellhint{opacity:.3}
@media (max-width:640px){ .lnd-cellhint{font-size:11px;padding:7px 10px;right:6px;bottom:6px} }
/* ★★ (2026-10-03) 칸 레이어 고객 모드 — 복사본에서는 설정 패널·도구줄을 감추고 무대만 남긴다.
   고객은 "두 번 눌러 글씨·이미지 교체"만 하면 된다. (저작권 보호 이미지를 바꾸는 유일한 길) */
body.lnd-cly-cust #clyPanel,
body.lnd-cly-cust #clyTools,
body.lnd-cly-cust #clyDevBar{display:none !important}
body.lnd-cly-cust #clyBox{width:min(900px,94vw) !important}
/* ⚠️ (2026-10-03 fix) [적용] 버튼을 숨기면 고객이 저장할 길이 없다 — 반드시 남긴다.
   (샵헬퍼는 자동저장이 돌지만 랜딩은 [적용]으로 닫아야 반영된다) */
body.lnd-cly-cust #clyOv .foot .apply{display:inline-flex !important}
body.lnd-cly-cust #clyStage .gr-lay{cursor:pointer}
/* 잠근 레이어는 무대에서도 못 고친다는 표시 */
body.lnd-cly-cust #clyStage .gr-lay[data-lk="1"]{cursor:not-allowed;position:relative}
body.lnd-cly-cust #clyStage .gr-lay[data-lk="1"]::after{content:'';position:absolute;inset:0;z-index:4;
  background:repeating-linear-gradient(45deg,rgba(180,83,9,.14) 0 7px,transparent 7px 14px);
  outline:1px dashed rgba(180,83,9,.55);outline-offset:-1px}
/* ★ (2026-10-03 v3) 칸 레이어에서 Alt=효과 / Ctrl=크롭 — 모달을 흐리게 하지 않는다.
   투명하게 만들면 "사라졌다"고 느껴진다는 지적 → 선명하게 둔 채 z-index 로만 뒤에 두고,
   딤(배경 어둠)과 클릭만 끈다. 필터·크롭 창은 그 위에 또렷하게 뜬다. */
body.lnd-cly-back #clyOv{background:transparent;pointer-events:none;z-index:1500}
/* ★ (2026-09-06) 칸 레이어 패널 숫자칸 — 스피너 숨기고 폭 넓혀 숫자가 안 잘리게 */
#clyPanel input[type=number]{width:74px !important;min-width:74px;-moz-appearance:textfield;appearance:textfield}
#clyPanel input[type=number]::-webkit-outer-spin-button,#clyPanel input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ★ (2026-09-06) 비주얼 스와이퍼 — 문구 줄·버튼 */
.lnd-vsw-ln{display:block}
.lnd-vsw-txt .wg_edit_txt{cursor:text}
.lnd-vsw-btnwrap{display:block}
.lnd-vsw-btn{pointer-events:auto;user-select:none}
.lnd-vsw .gr-video{z-index:0}
/* ★ (2026-09-06) 숫자 입력칸 공통 — 모달·우측 패널·버튼 설정 전부: 스피너 제거 + 최소 폭 확보(숫자 잘림 방지) */
.shp-ov input[type=number],.bld-side input[type=number],.sb-modal-ov input[type=number],.lnd-paste-modal input[type=number],.txtmd input[type=number]{min-width:78px !important;-moz-appearance:textfield;appearance:textfield;text-align:center}
.shp-ov input[type=number]::-webkit-outer-spin-button,.shp-ov input[type=number]::-webkit-inner-spin-button,.bld-side input[type=number]::-webkit-outer-spin-button,.bld-side input[type=number]::-webkit-inner-spin-button,.sb-modal-ov input[type=number]::-webkit-outer-spin-button,.sb-modal-ov input[type=number]::-webkit-inner-spin-button,.lnd-paste-modal input[type=number]::-webkit-outer-spin-button,.lnd-paste-modal input[type=number]::-webkit-inner-spin-button,.txtmd input[type=number]::-webkit-outer-spin-button,.txtmd input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ★ (2026-09-06) 비주얼 스와이퍼 설정 모달 — 영역별 연회색 박스 */
.vsw-grp{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px 12px;margin-top:12px}
.vsw-grp > .fld:first-child{margin-top:0}
.vsw-grp .fld{margin-top:10px}
.vsw-grp-tt{font-size:12.5px;font-weight:700;color:#334155;margin-bottom:6px}
/* ★ (2026-09-06) 스와이퍼 페이징 옆 멈춤/재생 버튼 */
.lnd-vsw-play{width:22px;height:22px;border-radius:50%;border:0;background:rgba(255,255,255,.45);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:6px;padding:0;font-size:11px;line-height:1;transition:.2s;pointer-events:auto}
.lnd-vsw-play:hover{background:rgba(255,255,255,.8);color:#0f172a}
.lnd-vsw-dots{align-items:center}

/* ★ (2026-09-07) 우측 날개 모서리별 라운드 4칸 — number 최소폭(78px !important) 때문에 300px 패널을 넘쳐 가로 스크롤 → 4칸은 좁게 + 패널 가로 스크롤 차단 */
.bld-side .fld .rd4 input[type=number]{min-width:0 !important;width:25% !important;padding:6px 2px !important;font-size:12px}
.bld-side{overflow-x:hidden}

/* ═══════════════════════════════════════════════════════════════
   ★ 탭 메뉴(2뎁스) 섹션 (type tabnav, 2026-09-18)
   색·크기·둥글기·두께는 블록 <style> 의 CSS 변수(--tn*) · 기기별 표시/스크롤도 블록 style 이 담당
   ═══════════════════════════════════════════════════════════════ */
.lnd-tn{width:100%;box-sizing:border-box}
.lnd-tn .tn-nav{flex-wrap:wrap;align-items:flex-end;gap:calc(var(--tngap,8px)*var(--tns,1));max-width:100%;box-sizing:border-box;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.lnd-tn .tn-nav::-webkit-scrollbar{height:4px}
.lnd-tn .tn-nav::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
.lnd-tn.tn-align-center .tn-nav{justify-content:center}
.lnd-tn.tn-align-right .tn-nav{justify-content:flex-end}
.lnd-tn.tn-align-full .tn-nav .tn-tab{flex:1 1 0;min-width:0}
.lnd-tn .tn-tab{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;box-sizing:border-box;cursor:pointer;flex:none;
  font-size:calc(var(--tnfs,14px)*var(--tns,1));font-weight:var(--tnfw,600);line-height:1.2;
  padding:calc(var(--tnpy,9px)*var(--tns,1)) calc(var(--tnpx,18px)*var(--tns,1));transition:background .15s,color .15s,border-color .15s}
/* 동그란(pill) — 둥글기 변수로 네모 라운드도 */
.lnd-tn .tn-kind-pill .tn-tab{background:var(--tnbg,#fff);color:var(--tnc,#475569);border:var(--tnbd,1px) solid var(--tnbc,#e2e8f0);border-radius:var(--tnrd,999px)}
.lnd-tn .tn-kind-pill .tn-tab:hover{border-color:var(--tnabc,#111827)}
.lnd-tn .tn-kind-pill .tn-tab.on{background:var(--tnabg,#111827);color:var(--tnac,#fff);border-color:var(--tnabc,#111827);font-weight:var(--tnafw,700)}
/* 책갈피(line) — 하단 라인 위에 탭, 활성 탭은 라인이 끊겨 아래와 이어짐 */
.lnd-tn .tn-kind-line{border-bottom:var(--tnlh,2px) solid var(--tnlc,#e2e8f0);align-items:flex-end;padding-bottom:0}
.lnd-tn .tn-kind-line .tn-tab{position:relative;background:var(--tnbg,transparent);color:var(--tnc,#475569);border:var(--tnbd,1px) solid var(--tnbc,transparent);border-bottom:0;border-radius:var(--tnrd,8px) var(--tnrd,8px) 0 0;margin-bottom:0}
.lnd-tn .tn-kind-line .tn-tab:hover{color:var(--tnac,#111827)}
.lnd-tn .tn-kind-line .tn-tab.on{background:var(--tnabg,#fff);color:var(--tnac,#111827);border-color:var(--tnabc,#e2e8f0);font-weight:var(--tnafw,700);z-index:1;margin-bottom:calc(var(--tnlh,2px)*-1);padding-bottom:calc(var(--tnpy,9px)*var(--tns,1) + var(--tnlh,2px))}
/* 셀렉트 박스 */
.lnd-tn .tn-kind-select{display:flex}
.lnd-tn .tn-select{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;max-width:100%;cursor:pointer;
  background:var(--tnbg,#fff) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right calc(var(--tnpx,18px)*var(--tns,1)*.7) center/14px;
  color:var(--tnc,#111827);border:var(--tnbd,1px) solid var(--tnbc,#cbd5e1);border-radius:var(--tnrd,10px);
  font-size:calc(var(--tnfs,14px)*var(--tns,1));font-weight:var(--tnfw,600);line-height:1.2;
  padding:calc(var(--tnpy,9px)*var(--tns,1)) calc(var(--tnpx,18px)*var(--tns,1)*2.2) calc(var(--tnpy,9px)*var(--tns,1)) calc(var(--tnpx,18px)*var(--tns,1))}
.lnd-tn.tn-align-left .tn-kind-select .tn-select,.lnd-tn.tn-align-right .tn-kind-select .tn-select,.lnd-tn.tn-align-center .tn-kind-select .tn-select{width:auto;min-width:220px}
.lnd-tn.tn-align-center .tn-kind-select{justify-content:center}
.lnd-tn.tn-align-right .tn-kind-select{justify-content:flex-end}

/* ═══════════════════════════════════════════════════════════════
   ★ 프로필 박스 (규격 디자인 profile_box, 2026-09-13)
   배경이미지 박스 + 원형 로고(좌측) + 사이트명 + 주력 연락처 버튼 + 해시태그
   외부 라이브러리 없음 · 편집/발행 공통 · inner(A형/B형) 어느 쪽이든 100% 로 채움
   ═══════════════════════════════════════════════════════════════ */
/* ★ (2026-10-15) 서브 상단 패키지 (type subtop · kind zoom/bar/simple) — 배경 + inner 제목·설명 + 2뎁스 바(홈·탭·따라다니는 밑줄) + 오브젝트 */
.lnd-subtop{position:relative;width:100%;box-sizing:border-box}
.lnd-subtop .lst-hero{position:relative;width:100%;height:var(--lst-h,500px);background:var(--lst-bg,#1e293b);overflow:hidden;display:flex;align-items:center}
.lnd-subtop .lst-bg{position:absolute;inset:0;z-index:0}
.lnd-subtop .lst-bg img,.lnd-subtop .lst-bg picture,.lnd-subtop .lst-bg video{width:100%;height:100%;object-fit:cover;object-position:var(--lst-ox,50%) var(--lst-oy,50%);display:block}
.lnd-subtop .lst-bg.lst-zoom img{animation:lstZoomOut 7s cubic-bezier(.22,.61,.36,1) both}
@keyframes lstZoomOut{from{transform:scale(1.1)}to{transform:scale(1)}}
.lnd-subtop .lst-dim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,var(--lst-dim,.35));pointer-events:none}
.lnd-subtop.lst-bar .lst-dim{display:none}
.lnd-subtop .lst-hero>.lst-in{position:relative;z-index:2;width:100%}
.lnd-subtop .lst-txt{display:flex;flex-direction:column;gap:10px}
.lnd-subtop .lst-txt.lst-al-center{align-items:center;text-align:center}
.lnd-subtop .lst-title{font-size:var(--lst-ts,40px);font-weight:800;color:var(--lst-tc,#fff);line-height:1.2;letter-spacing:-.02em;cursor:pointer;word-break:keep-all}
.lnd-subtop .lst-sub{font-size:var(--lst-ss,15px);color:var(--lst-sc,#fff);line-height:1.6;opacity:.92;cursor:pointer;word-break:keep-all}
body:not(.lnd-view) .lnd-subtop .lst-sub.lst-empty{opacity:.45;font-style:italic}
body:not(.lnd-view) .lnd-subtop .lst-title:hover,body:not(.lnd-view) .lnd-subtop .lst-sub:hover{outline:1px dashed #f59e0b;outline-offset:3px}
/* 2뎁스 바 */
.lnd-subtop .lst-bar{position:relative;z-index:3;width:100%}
.lnd-subtop .lst-bar-in{display:flex;align-items:stretch;background:var(--lst-bar-bg,#5fb878);min-height:54px}
.lnd-subtop .lst-home{display:flex;align-items:center;justify-content:center;width:74px;flex:none;background:var(--lst-home-bg,#2d3436);color:#fff;font-size:22px;text-decoration:none;border-radius:16px 0 0 16px}
.lnd-subtop .lst-tabs{position:relative;display:flex;align-items:stretch;gap:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.lnd-subtop .lst-tabs::-webkit-scrollbar{display:none}
.lnd-subtop .lst-tab{display:flex;align-items:center;padding:0 22px;color:var(--lst-bar-c,#fff);font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .15s;position:relative}
.lnd-subtop .lst-tab.on{color:var(--lst-bar-ac,#111);font-weight:800}
.lnd-subtop .lst-tab:hover{color:var(--lst-bar-ac,#111)}
.lnd-subtop .lst-ind{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--lst-ind,#111);opacity:0;transition:left .28s cubic-bezier(.22,.61,.36,1),width .28s cubic-bezier(.22,.61,.36,1),opacity .2s;pointer-events:none}
/* zoom 종류: 바가 이미지 아래 (inner 폭 안) */
.lnd-subtop.lst-zoom .lst-bar{margin-top:0}
/* bar 종류: 바가 이미지(연한 배경) 안쪽 하단에 */
.lnd-subtop.lst-bar .lst-hero{align-items:flex-start;padding-top:clamp(40px,8vw,90px)}
.lnd-subtop.lst-bar .lst-bar{position:absolute;left:0;right:0;bottom:clamp(40px,10%,70px)}
.lnd-subtop.lst-bar .lst-bar-in{border-radius:0}
.lnd-subtop.lst-bar .lst-txt{flex-direction:row;align-items:baseline;gap:18px;flex-wrap:wrap}
.lnd-subtop.lst-bar .lst-sub{opacity:1}
/* simple 종류: 전부 inner 안, 얇은 선 위 텍스트 탭 */
.lnd-subtop.lst-simple .lst-hero{align-items:flex-end}
.lnd-subtop.lst-simple .lst-hero>.lst-in{padding-bottom:0}
.lnd-subtop.lst-simple .lst-txt{padding-bottom:34px}
.lnd-subtop.lst-simple .lst-bar{position:absolute;left:0;right:0;bottom:0;z-index:3}
.lnd-subtop.lst-simple .lst-bar-in{background:transparent;min-height:0;border-top:1px solid var(--lst-line,rgba(255,255,255,.35))}
.lnd-subtop.lst-simple .lst-home{width:48px;background:transparent;color:var(--lst-bar-c,#fff);border-radius:0}
.lnd-subtop.lst-simple .lst-tab{padding:14px 0;margin-right:34px;font-size:17px;font-weight:700}
.lnd-subtop.lst-simple .lst-tab.on{color:var(--lst-bar-ac,#8fe39a)}
.lnd-subtop.lst-simple .lst-ind{bottom:auto;top:-2px;height:4px;background:var(--lst-ind,#8fe39a)}
.lnd-subtop.lst-simple .lst-hero{padding-bottom:58px}
/* 오브젝트 이미지 — 바 오른쪽 위 (hero 기준 절대) */
.lnd-subtop .lst-objwrap{position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;z-index:4}
.lnd-subtop .lst-objwrap>.lst-in{position:relative;height:100%}
.lnd-subtop .lst-obj{position:absolute;right:var(--lst-obj-r,4%);bottom:var(--lst-obj-b,0px);width:var(--lst-obj-w,260px);max-width:40%;pointer-events:auto;line-height:0}
.lnd-subtop .lst-obj img{width:100%;height:auto;display:block}
.lnd-subtop.lst-bar .lst-obj{bottom:calc(var(--lst-obj-b,0px) + clamp(40px,10%,70px) - 8px)}
.lnd-subtop.lst-zoom .lst-objwrap{top:auto;height:var(--lst-h,500px);bottom:auto}
body:not(.lnd-view) .lnd-subtop .lst-obj-empty{width:auto;max-width:none;border:1px dashed rgba(255,255,255,.7);color:#fff;font-size:12px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.25);cursor:pointer;line-height:1.2}
@media (max-width:1024px){
  .lnd-subtop .lst-hero{height:var(--lst-h-t,var(--lst-h,500px))}
  .lnd-subtop .lst-title{font-size:calc(var(--lst-ts,40px)*.8)}
  .lnd-subtop .lst-obj{width:calc(var(--lst-obj-w,260px)*.75)}
}
@media (max-width:640px){
  .lnd-subtop .lst-hero{height:var(--lst-h-m,var(--lst-h-t,var(--lst-h,500px)))}
  .lnd-subtop .lst-title{font-size:calc(var(--lst-ts,40px)*.62)}
  .lnd-subtop .lst-objwrap{display:none}
  .lnd-subtop .lst-bar-in{min-height:46px}
  .lnd-subtop .lst-home{width:50px;font-size:18px;border-radius:10px 0 0 10px}
  .lnd-subtop .lst-tab{padding:0 14px;font-size:14px}
  .lnd-subtop.lst-simple .lst-tab{padding:12px 0;margin-right:22px;font-size:15px}
  .lnd-subtop.lst-bar .lst-bar{bottom:24px}
  .lnd-subtop.lst-bar .lst-txt{flex-direction:column;gap:6px}
}
/* 제작소 기기 탭(devp-*) = 실제 창 폭 대신 미리보기 기기 기준으로도 같은 규칙 */
.bld-stage.devp-tablet .lnd-subtop .lst-hero{height:var(--lst-h-t,var(--lst-h,500px))}
.bld-stage.devp-mobile .lnd-subtop .lst-hero{height:var(--lst-h-m,var(--lst-h-t,var(--lst-h,500px)))}
.bld-stage.devp-mobile .lnd-subtop .lst-objwrap{display:none}
.bld-stage.devp-mobile .lnd-subtop .lst-title{font-size:calc(var(--lst-ts,40px)*.62)}
.lnd-pfb{position:relative;width:100%;box-sizing:border-box;overflow:hidden;background:#1e293b}
/* 배경 이미지 레이어 — 확대/초점/투명도는 인라인으로 주입 */
.lnd-pfb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;pointer-events:none}
.lnd-pfb-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* ★ (2026-09-17) PC 전용 배경 레이어 — 기본 숨김, 블록별 <style>(@media ≥1025px)이 켬. 기본 레이어(.lnd-pfb-bg-m)는 그때 숨김. */
.lnd-pfb-bg-pc{display:none}
/* ★ (2026-09-17) PC 폭 = 화면 전체(.lnd-pfb-full, b.noinner) — 섹션이 inner 밖 100%. 내용 래퍼(.lnd-pfb-cw)는 inner 폭으로 중앙(왼쪽 선 맞춤).
   .lnd-pfb-in 자체 안쪽여백(clamp 16~32)이 있으므로 inner 의 좌우 20px 패딩은 뺀다(이중 여백 방지). */
.lnd-pfb-full{border-radius:0}
.lnd-pfb-full .lnd-pfb-cw{position:relative;z-index:2;padding-left:0 !important;padding-right:0 !important}
/* ★ (2026-09-17) 배경 영상 — mp4 는 object-fit cover, 유튜브/비메오 iframe 은 16:9 를 유지하며 박스를 덮음(min-width/min-height + aspect-ratio).
   초점은 인라인 left/top+translate. 클릭 통과·소리 없음. */
.lnd-pfb-vid{overflow:hidden}
.lnd-pfb-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lnd-pfb-vid iframe{position:absolute;width:auto;height:auto;min-width:100%;min-height:100%;aspect-ratio:16/9;border:0;pointer-events:none;display:block}
/* 어둡게(가독성) 오버레이 */
.lnd-pfb-dim{position:absolute;inset:0;z-index:1;pointer-events:none}
/* 내용 */
.lnd-pfb-in{position:relative;z-index:2;display:flex;align-items:center;
  gap:clamp(12px, calc(0.94vw + 9px), 24px);
  padding:clamp(16px, calc(1.25vw + 12px), 32px)}
/* ★ (2026-09-13) 유리 카드 — 로고+글씨만 감싸는 반투명 박스(글래스모피즘).
   .lnd-pfb-in 은 안쪽여백만 담당(배경 가장자리~카드 거리), 카드가 실제 내용 컨테이너.
   색/불투명도/블러/둥글기/테두리/안쪽여백은 인라인 주입. backdrop-filter 미지원 = 반투명만(정상 폴백). */
.lnd-pfb-card{position:relative;box-sizing:border-box;display:flex;align-items:center;
  gap:clamp(12px, calc(0.94vw + 9px), 24px);
  max-width:100%;min-width:0}
/* 카드가 있으면 inr 은 카드를 담는 껍데기.
   ★ (2026-09-13) 기본 = 카드가 안쪽여백 안에서 가로 100% (우측이 비지 않게).
   카드에 인라인 width:100% 가 붙으므로 flex 가 줄이지 못하도록 flex-basis 도 풀어준다.
   '카드 가로 꽉 채움' 을 끄면 인라인 width 가 없어 내용 크기만큼만 차지(왼쪽 정렬). */
.lnd-pfb-in.lnd-pfb-hascard{display:flex;align-items:center;justify-content:flex-start}
.lnd-pfb-in.lnd-pfb-hascard > .lnd-pfb-card[style*="width:100%"]{flex:1 1 auto}
/* 로고 — 좌측 정렬 고정. 모양(원형/네모라운드)·배경색·맞춤은 인라인으로 주입 */
.lnd-pfb-logo{flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff}
.lnd-pfb-logo img{width:100%;height:100%;object-fit:cover;display:block}
/* 투명 PNG 로고를 안 잘리게 담을 때(contain) — 이미지가 박스를 넘지 않도록 */
.lnd-pfb-logo img[style*="contain"]{width:100%;height:100%}
.lnd-pfb-logo-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#e2e8f0;color:#94a3b8;font-size:11px}
/* 텍스트 컬럼 */
.lnd-pfb-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(6px, calc(0.47vw + 4.5px), 12px)}
.lnd-pfb-name{font-weight:800;line-height:1.25;word-break:keep-all}
.lnd-pfb-desc{line-height:1.5;word-break:keep-all;opacity:.9}
/* 주력 연락처 버튼 */
.lnd-pfb-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;font-weight:700;cursor:pointer;border:0;box-sizing:border-box;
  align-self:flex-start;transition:transform .15s ease, box-shadow .15s ease}
.lnd-pfb-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.lnd-pfb-cta i,.lnd-pfb-cta svg,.lnd-pfb-cta img{flex:none}
/* 해시태그 */
.lnd-pfb-tags{display:flex;flex-wrap:wrap;gap:clamp(5px, calc(0.23vw + 4.25px), 8px)}
.lnd-pfb-tag{display:inline-block;line-height:1.3;white-space:nowrap;box-sizing:border-box}
/* 세로형(모바일 등) — 로고 위, 내용 아래. 카드가 있으면 카드 안에서 세로 배치 + 카드는 가운데로. */
.lnd-pfb.lnd-pfb-stack .lnd-pfb-in,
.lnd-pfb.lnd-pfb-stack .lnd-pfb-card{flex-direction:column;align-items:center;text-align:center}
.lnd-pfb.lnd-pfb-stack .lnd-pfb-in.lnd-pfb-hascard{justify-content:center}
.lnd-pfb.lnd-pfb-stack .lnd-pfb-body{align-items:center}
.lnd-pfb.lnd-pfb-stack .lnd-pfb-cta{align-self:center}
.lnd-pfb.lnd-pfb-stack .lnd-pfb-tags{justify-content:center}
/* 좁은 화면 자동 세로 전환 (auto 모드) */
@media (max-width:640px){
  .lnd-pfb.lnd-pfb-auto .lnd-pfb-in,
  .lnd-pfb.lnd-pfb-auto .lnd-pfb-card{flex-direction:column;align-items:center;text-align:center}
  .lnd-pfb.lnd-pfb-auto .lnd-pfb-in.lnd-pfb-hascard{justify-content:center}
  .lnd-pfb.lnd-pfb-auto .lnd-pfb-body{align-items:center}
  .lnd-pfb.lnd-pfb-auto .lnd-pfb-cta{align-self:center}
  .lnd-pfb.lnd-pfb-auto .lnd-pfb-tags{justify-content:center}
}
/* 편집화면 빈 상태 안내 */
.lnd-pfb-empty{padding:34px 20px;text-align:center;color:#94a3b8;font-size:13px;background:#1e293b}
/* 설정 모달 — 스와이퍼와 같은 연회색 그룹 박스 재사용 */
.pfb-grp{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px 12px;margin-top:12px}
.pfb-grp-tt{font-size:12.5px;font-weight:700;color:#334155;margin-bottom:8px}
.pfb-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px;color:#334155}
.pfb-row + .pfb-row{margin-top:9px}
.pfb-row input[type=text],.pfb-row input[type=number]{border:1px solid #cbd5e1;border-radius:7px;padding:6px 9px;font-size:12.5px;box-sizing:border-box}
.pfb-lbl{display:block;font-size:12.5px;font-weight:700;color:#334155;margin:0 0 4px}
/* ★ (2026-09-13) 여백 행 — 우측 패널(.bld-side .mg-row)과 동일한 UI를 이 모달에서도.
   [방향 아이콘(점선 네모+해당 변 실선)] [얇은 라인 슬라이더] [입력칸] px */
.pfb-grp input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;margin:0;padding:0;cursor:pointer}
.pfb-grp input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#e2e8f0}
.pfb-grp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 3px rgba(15,23,42,.18);margin-top:-5.5px;transition:border-color .12s,box-shadow .12s}
.pfb-grp input[type=range]:hover::-webkit-slider-thumb{border-color:#6d5cff;box-shadow:0 0 0 3px rgba(109,92,255,.15)}
.pfb-grp input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:#e2e8f0}
.pfb-grp input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 3px rgba(15,23,42,.18)}
.pfb-grp .mg-row{display:flex;align-items:center;gap:7px;margin:4px 0}
.pfb-grp .mg-row .mg-lb{flex:0 0 20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#475569;font-weight:600}
.pfb-grp .mg-row .mg-sld{flex:1;min-width:0}
.pfb-grp .mg-row .mg-num{flex:0 0 58px;height:28px;border:1px solid #e2e8f0;border-radius:7px;padding:0 4px;font-size:12px;text-align:center;background:#fff;color:#0f172a;min-width:0;box-sizing:border-box}
.pfb-grp .mg-row .mg-num:focus{outline:0;border-color:#6d5cff;box-shadow:0 0 0 3px rgba(109,92,255,.12)}
.pfb-grp .mg-row .mg-unit{font-style:normal;font-size:11px;color:#94a3b8;flex:0 0 16px}
.pfb-grp .mg-row .mg-lb .mg-ico{display:inline-flex;width:18px;height:18px}
.pfb-grp .mg-row .mg-lb .mg-ico svg{width:18px;height:18px;overflow:visible}
.pfb-grp .mg-row .mg-lb .mg-ico .mg-box{fill:none;stroke:#94a3b8;stroke-width:1.2;stroke-dasharray:2.2 1.8}
.pfb-grp .mg-row .mg-lb .mg-ico .mg-side{fill:none;stroke:#6d5cff;stroke-width:3;stroke-linecap:round}

/* ★ (2026-09-23) 디자인 라이브러리 — 공동/나의 라이브러리 탭 (파트너) + 활용법 링크 (샵헬퍼 이식) */
.wjlib .hd .guide{color:#c7d2fe;text-decoration:none;font-size:14px;line-height:1;margin-left:auto;padding:4px;border-radius:6px}
.wjlib .hd .guide:hover{background:rgba(255,255,255,.14);color:#fff}
.wjlib .hd .guide + .fold{margin-left:0}
.wjlib .tabs{display:flex;border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}
.wjlib .tabs button{flex:1;border:0;background:transparent;padding:9px 4px;font-size:12px;font-weight:700;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.wjlib .tabs button.on{color:#c2410c;border-bottom-color:#ea580c;background:#fff}
.wjlib .tabs button .cnt{font-weight:400;color:#94a3b8;font-size:10px}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ (2026-10-03) 가상 보조키 바(#vmodBar) — 모달 위로. (샵헬퍼 이식)
   랜딩 종전 z-index:850 (builder.php vmodBar 인라인) < #clyOv(.shp-ov = 2000) 이라
   **칸 레이어 모달이 열리면 바가 뒤에 깔려** 태블릿에서 Shift/Ctrl/Alt 를 누를 방법이
   아예 없었다. 모달 안에서도 쓰려면 모달보다 위에 있어야 한다.
   ※ 랜딩 실측: .shp-ov=2000 · body.lnd-cly-back #clyOv=1500 → 2600 이면 둘 다 넘는다.
   ※ 위치(left:10px;top:45% 세로 배치)는 랜딩 그대로 두고 z-index 만 올린다.
   ══════════════════════════════════════════════════════════════════════════ */
#vmodBar{z-index:2600 !important}
/* 칸 레이어 모달이 열려 있을 때는 창을 가리지 않게 오른쪽 아래로 비켜 준다
   (랜딩 세로 배치라 transform:translateY(-50%) 도 함께 푼다 — 안 풀면 아래로 반쯤 잘린다) */
body.lnd-cly-on #vmodBar{left:auto !important;right:16px !important;top:auto !important;bottom:16px !important;transform:none !important}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ (2026-10-03) 태블릿 두 손가락 이동·핀치 확대가 안 먹던 원인 —
   touch-action 선언이 아예 없어서, 브라우저가 두 손가락 제스처를 "페이지 확대/스크롤"로
   먼저 가로채 갔다. touchstart 의 preventDefault 만으로는 요즘 브라우저에서 부족하다.
   무대에서는 브라우저 제스처를 끄고 우리 핸들러(builder.php 핀치)가 쓴다.
   ※ 세로 스크롤은 무대 바깥(페이지)에서 평소처럼 된다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★★ (2026-10-10) 발행 화면(body.lnd-view) 제외 필수 — 발행도 본문이 .bld-stage 안에 있어서
   이 none 이 그대로 걸리면 실폰에서 터치 스크롤이 통째로 막힌다(위로 안 올라감 증상).
   builder.php 가 head 에 심는 `body *{touch-action:pan-x pan-y pinch-zoom}` 보다 이 선택자(.bld-stage)가
   우선순위가 높아 거기서도 못 풀었다. 편집 화면(body:not(.lnd-view))에서만 핀치용 none. */
body:not(.lnd-view) .bld-stage{touch-action:none}
/* 입력칸·목록처럼 스크롤이 필요한 곳은 되돌린다 (무대 안에 있어도) */
body:not(.lnd-view) .bld-stage input,body:not(.lnd-view) .bld-stage textarea,body:not(.lnd-view) .bld-stage select,
body:not(.lnd-view) .bld-stage [contenteditable="true"]{touch-action:auto}
/* ★ (2026-10-10) 무대 이동/확대(applyPan: translate·scale) 중 = 옮긴 만큼 문서 바깥 영역이 생겨 브라우저 가로·세로 스크롤바가
   나타나던 문제 → 이동된 동안만(body.lnd-panned, applyPan 이 토글) 문서 스크롤 숨김. 원위치(0,0 · 배율 1)면 자동 해제. */
html:has(body:not(.lnd-view).lnd-panned){ overflow:hidden !important; }
body:not(.lnd-view).lnd-panned{ overflow:hidden !important; }
/* 손 모드 — 켜져 있는 동안은 편집 핸들이 방해하지 않게 커서만 바꿔 준다 */
body.lnd-hand-on .bld-stage{cursor:grab}
body.lnd-hand-on .bld-stage *{cursor:grab !important}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ (2026-10-03) 상단 도구줄 가로 스크롤 — 태블릿에서 도구가 화면 밖으로 넘쳐
   오른쪽 끝(저장·미리보기 등)에 아예 손이 닿지 않던 문제.
   종전 .bld-top{overflow:hidden} = 넘친 부분이 잘려 나가고 꺼낼 방법이 없었다.
   → 가로로만 스크롤되게 하고, 스크롤바는 숨긴다(보기 싫다는 요청). 손가락으로 좌우로 쓸면 된다.
   · flex-shrink:0 = 버튼이 찌그러지지 않고 제 폭을 지켜야 "넘침"이 생겨 스크롤이 작동한다.
   · touch-action:pan-x = 가로 쓸기는 우리가, 세로는 브라우저가.
   · overscroll-behavior-x:contain = 끝까지 쓸었을 때 뒤 페이지가 따라 움직이지 않게.
   ══════════════════════════════════════════════════════════════════════════ */
.bld-top{overflow-x:auto !important;overflow-y:hidden !important;
  touch-action:pan-x;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.bld-top::-webkit-scrollbar{width:0;height:0;display:none}
/* 넘쳐야 스크롤이 생긴다 — 자식들이 줄어들지 않도록 */
.bld-top > *{flex-shrink:0}
/* 제목 칸만 예외 — 길면 말줄임(…)으로 줄어도 된다 */
.bld-top .ttl-txt{flex:0 0 auto !important}
/* 끝에 여백 — 마지막 버튼이 화면 모서리에 딱 붙지 않게 */
.bld-top::after{content:'';flex:none;width:6px}

/* ★ (2026-10-03) 아이콘 버튼 켜짐 상태 — 터치 모션·손 모드처럼 "지금 켜져 있다"를 보여야 하는 토글용.
   종전엔 .on 스타일이 없어 켜도 눌렀는지 알 수 없었다(랜딩은 글씨로 덮어써 아이콘이 사라졌다). */
.bld-top .ico-btn.on{background:#6d5cff !important;border-color:#6d5cff !important}
.bld-top .ico-btn.on i{color:#fff !important}

/* ★ (2026-10-25) 정보 섹션 [사진 갤러리] — 발행 화면 크게 보기 커서·호버 + 모바일 배열 (데스크톱 배치는 인라인 → 모바일만 !important 로 덮음) */
.if-gal[data-zoom="1"] .if-gal-cell{cursor:zoom-in}
.if-gal[data-zoom="1"] .if-gal-cell img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.if-gal[data-zoom="1"] .if-gal-cell:hover img{transform:scale(1.045)}
@media screen and (max-width:640px){
  .if-gal-st-preset.if-gal-mo-col_eq .if-gal-grid{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:calc(62cqw * var(--gal-rh,1))!important;gap:min(var(--gal-g,20px),14px)!important}
  .if-gal-st-preset.if-gal-mo-col_ratio .if-gal-grid{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:min(var(--gal-g,20px),14px)!important}
  .if-gal-st-preset.if-gal-mo-col_eq .if-gal-cell,.if-gal-st-preset.if-gal-mo-col_ratio .if-gal-cell{grid-column:span 1!important;grid-row:span 1!important}
  .if-gal-st-preset.if-gal-mo-col_ratio .if-gal-cell{height:calc(var(--gcr,60) * 1cqw * var(--gal-rh,1))!important}
  .if-gal-st-preset.if-gal-mo-same .if-gal-grid{gap:min(calc(var(--gal-g,20px) * .5),10px)!important}
  .if-gal-st-grid .if-gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:min(var(--gal-g,20px),10px)!important}
  .if-gal-st-mason .if-gal-grid{columns:2!important;column-gap:min(var(--gal-g,20px),10px)!important}
  .if-gal-st-mason .if-gal-cell{margin-bottom:min(var(--gal-g,20px),10px)!important}
  .if-gal-st-hmason .if-gal-grid{gap:min(var(--gal-g,20px),8px)!important}
  .if-gal-st-hmason .if-gal-cell{height:30cqw!important;flex-basis:calc(30cqw * var(--ar,1.5))!important}
  /* 글 여백 = 인라인 clamp(갤러리 폭 기준) — 설정 창 [이미지 안 글 여백] */
}
.devp-mobile .if-gal-st-preset.if-gal-mo-col_eq .if-gal-grid{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:calc(62cqw * var(--gal-rh,1))!important;gap:min(var(--gal-g,20px),14px)!important}
.devp-mobile .if-gal-st-preset.if-gal-mo-col_ratio .if-gal-grid{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:min(var(--gal-g,20px),14px)!important}
.devp-mobile .if-gal-st-preset.if-gal-mo-col_eq .if-gal-cell,.devp-mobile .if-gal-st-preset.if-gal-mo-col_ratio .if-gal-cell{grid-column:span 1!important;grid-row:span 1!important}
.devp-mobile .if-gal-st-preset.if-gal-mo-col_ratio .if-gal-cell{height:calc(var(--gcr,60) * 1cqw * var(--gal-rh,1))!important}
.devp-mobile .if-gal-st-preset.if-gal-mo-same .if-gal-grid{gap:min(calc(var(--gal-g,20px) * .5),10px)!important}
.devp-mobile .if-gal-st-grid .if-gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:min(var(--gal-g,20px),10px)!important}
.devp-mobile .if-gal-st-mason .if-gal-grid{columns:2!important;column-gap:min(var(--gal-g,20px),10px)!important}
.devp-mobile .if-gal-st-mason .if-gal-cell{margin-bottom:min(var(--gal-g,20px),10px)!important}
.devp-mobile .if-gal-st-hmason .if-gal-grid{gap:min(var(--gal-g,20px),8px)!important}
.devp-mobile .if-gal-st-hmason .if-gal-cell{height:30cqw!important;flex-basis:calc(30cqw * var(--ar,1.5))!important}
/* .devp-mobile 글 여백 = 인라인 clamp (갤러리 폭이 좁아지면 자동) */