/* 페이지 빌더 — 공개/편집 공통 */
/* 라우터 본문 래퍼 — overflow-x만 hidden 이면 스펙상 overflow-y 가 auto 로 계산되어 이중 세로 스크롤이 생길 수 있음 → clip+visible */
#pb-page-wrap { width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow-x: clip; overflow-y: visible; }
/* full 레이아웃 행은 브라우저 전체 너비 확보 */
.pb-row.pb-layout-full { width: 100%; margin-left: 0; margin-right: 0; }
.pb-row.pb-layout-full > .pb-row-inner { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.pb-page { max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.pb-row { position: relative; box-sizing: border-box; }
.pb-row-inner { display: flex; flex-wrap: nowrap; width: 100%; margin: 0 auto; box-sizing: border-box; align-items: stretch; }
.pb-row-inner.pb-container { max-width: 1140px; padding-left: 15px; padding-right: 15px; }
/* 빌더: 편집 시 container 행도 full 과 동일하게 좌우 여백 없음(12컬럼 그리드 정렬) */
body.pb-builder-active .pb-row-inner.pb-container { max-width: none; width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* 공개 모드: 거터 0 — 빌더 전용 padding은 body.pb-builder-active .pb-col 에서 별도 지정 */
.pb-col { box-sizing: border-box; padding: 0; min-width: 0; }
/* 공개 모드: 최소 높이/배경 없음 — 빌더 모드에서만 아래에서 별도 지정 */
.pb-col-content::after { content: ""; display: table; clear: both; }
/* 게시판·공지사항 위젯 리스트 */
/* 공개 모드: 위젯 배경·모서리 없음 — 배경은 행(pb-row)의 bg_color/bg_image 로 제어 */
.pb-widget-inner { background: transparent; }
.pb-widget-empty { padding: 24px; text-align: center; color: #999; font-size: 14px; }
.pb-widget-list { list-style: none; margin: 0; padding: 0; }
.pb-widget-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
.pb-widget-list li:last-child { border-bottom: none; }
.pb-widget-list li:hover { background: #f8fafd; }
.pb-widget-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4e73df; flex-shrink: 0; }
.pb-widget-list li a { flex: 1; color: #333; text-decoration: none; font-size: 14px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-widget-list li a:hover { color: #4e73df; }
.pb-widget-meta { flex-shrink: 0; color: #999; font-size: 12px; white-space: nowrap; }
.pb-widget-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 16px; list-style: none; margin: 0; padding: 0; }
.pb-widget-product-item { text-align: center; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 12px 10px 14px; transition: box-shadow 0.2s; }
.pb-widget-product-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.pb-widget-product-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; margin: 0 auto 10px; border-radius: 6px; }
.pb-widget-product-name { display: block; font-size: 14px; color: #222; text-decoration: none; line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; }
.pb-widget-product-name:hover { color: #0066cc; text-decoration: underline; }

/* 위젯 product_list — 레거시 클래스(alias). 구조 변수는 동일 요소의 .pb-wv 가 제공 */
.pb-widget-products.pb-widget-products--skin-compact .pb-widget-products-grid,
.pb-widget-products.pb-widget-products--skin-size-s-sm .pb-widget-products-grid { gap: 10px 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pb-widget-products.pb-widget-products--skin-compact .pb-widget-product-item,
.pb-widget-products.pb-widget-products--skin-size-s-sm .pb-widget-product-item { padding: 8px 6px 10px; }
.pb-widget-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.pb-widget-gallery-item { border-radius: 6px; overflow: hidden; transition: box-shadow 0.2s; }
.pb-widget-gallery-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.pb-widget-gallery-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   위젯 공통 — .pb-widget-inner.pb-wv (테마 10종 색 변수 + 스킨 10종 간격 변수)
   레거시 .pb-wv--skin-compact 는 .pb-wv--skin-size-s-sm 과 동등 효과(CSS 병렬 선택자)
═══════════════════════════════════════════════════════════════════════════ */
.pb-widget-inner.pb-wv {
	--pb-wv-accent: #4e73df;
	--pb-wv-accent-hover: #224abe;
	--pb-wv-accent-bright: #2563eb;
	--pb-wv-link-text: #333;
	--pb-wv-meta: #999;
	--pb-wv-border-soft: #f0f0f0;
	--pb-wv-list-hover-bg: #f8fafd;
	--pb-wv-list-muted-bg: transparent;
	--pb-wv-faq-bd: #e2e8f0;
	--pb-wv-faq-answer-bg: #f8fafc;
	--pb-wv-ai-input-bd: var(--pb-wv-accent);
	--pb-wv-ai-bt-bg: var(--pb-wv-accent);
	--pb-wv-ai-bt-bg-hover: var(--pb-wv-accent-hover);
	--pb-wv-gallery-gap: 12px;
	--pb-wv-gallery-min: 140px;
	--pb-wv-list-li-pad-y: 12px;
	--pb-wv-list-li-pad-x: 16px;
	--pb-wv-list-li-gap: 12px;
	--pb-wv-list-fs: 14px;
	--pb-wv-product-gap-y: 20px;
	--pb-wv-product-gap-x: 16px;
	--pb-wv-product-min: 160px;
	--pb-wv-product-pad-y: 12px;
	--pb-wv-product-pad-x: 10px;
	--pb-wv-product-radius: 8px;
	--pb-wv-faq-q-py: 14px;
	--pb-wv-faq-q-px: 16px;
	--pb-wv-faq-q-fs: 15px;
	--pb-wv-ai-py: 16px;
	--pb-wv-ai-grid-gap: 14px;
	--pb-wv-ai-card-min: 260px;
	--pb-wv-ai-im-h: 160px;
	--pb-wv-history-sec-py: 20px;
	--pb-wv-history-sec-px: 16px;
	--pb-wv-history-item-gap: 14px;
	--pb-wv-history-item-pb: 22px;
	--pb-wv-history-card-py: 14px;
	--pb-wv-history-card-px: 16px;
	--pb-wv-history-title-fs: 17px;
	--pb-wv-gallery-hover: 0 4px 14px rgba(0,0,0,0.12);
	--pb-wv-gallery-accent-hover: 0 4px 18px rgba(78,115,223,0.22);
	--pb-wv-banner-ring: color-mix(in srgb, var(--pb-wv-accent) 38%, transparent);
	--pb-wv-slider-shadow: 0 2px 14px rgba(78,115,223,0.12);
}

/* 테마 색상 (10종) */
.pb-widget-inner.pb-wv.pb-wv--theme-default { --pb-wv-accent: #4e73df; --pb-wv-accent-hover: #224abe; --pb-wv-accent-bright: #2563eb; }
.pb-widget-inner.pb-wv.pb-wv--theme-muted {
	--pb-wv-accent: #64748b; --pb-wv-accent-hover: #475569; --pb-wv-accent-bright: #475569;
	--pb-wv-list-muted-bg: #f8fafc; --pb-wv-border-soft: #e8edf3; --pb-wv-faq-bd: #e2e8f0; --pb-wv-ai-input-bd: #94a3b8;
	--pb-wv-gallery-accent-hover: 0 4px 16px rgba(100,116,139,0.2);
}
.pb-widget-inner.pb-wv.pb-wv--theme-accent {
	--pb-wv-accent: #2563eb; --pb-wv-accent-hover: #1d4ed8; --pb-wv-accent-bright: #1d4ed8;
}
.pb-widget-inner.pb-wv.pb-wv--theme-ocean { --pb-wv-accent: #0ea5e9; --pb-wv-accent-hover: #0284c7; --pb-wv-accent-bright: #0284c7; --pb-wv-gallery-accent-hover: 0 4px 18px rgba(14,165,233,0.26); }
.pb-widget-inner.pb-wv.pb-wv--theme-emerald { --pb-wv-accent: #059669; --pb-wv-accent-hover: #047857; --pb-wv-accent-bright: #059669; --pb-wv-gallery-accent-hover: 0 4px 18px rgba(5,150,105,0.26); }
.pb-widget-inner.pb-wv.pb-wv--theme-violet { --pb-wv-accent: #7c3aed; --pb-wv-accent-hover: #6d28d9; --pb-wv-accent-bright: #7c3aed; --pb-wv-gallery-accent-hover: 0 4px 18px rgba(124,58,237,0.26); }
.pb-widget-inner.pb-wv.pb-wv--theme-amber { --pb-wv-accent: #d97706; --pb-wv-accent-hover: #b45309; --pb-wv-accent-bright: #ea580c; --pb-wv-gallery-accent-hover: 0 4px 18px rgba(217,119,6,0.26); }
.pb-widget-inner.pb-wv.pb-wv--theme-rose { --pb-wv-accent: #e11d48; --pb-wv-accent-hover: #be123c; --pb-wv-accent-bright: #e11d48; --pb-wv-gallery-accent-hover: 0 4px 18px rgba(225,29,72,0.24); }
.pb-widget-inner.pb-wv.pb-wv--theme-slate { --pb-wv-accent: #475569; --pb-wv-accent-hover: #334155; --pb-wv-accent-bright: #334155; --pb-wv-gallery-accent-hover: 0 4px 16px rgba(51,65,85,0.22); }
.pb-widget-inner.pb-wv.pb-wv--theme-charcoal { --pb-wv-accent: #1e293b; --pb-wv-accent-hover: #0f172a; --pb-wv-accent-bright: #334155; --pb-wv-gallery-accent-hover: 0 4px 16px rgba(30,41,59,0.28); }

/* 스킨 간격 축(size-s/m/l × sm/md/lg) — default 는 기존 디폴트에 맞춤 */
.pb-widget-inner.pb-wv.pb-wv--skin-default { --pb-wv-gallery-gap: 12px; --pb-wv-gallery-min: 140px; --pb-wv-list-li-pad-y: 12px; --pb-wv-list-li-pad-x: 16px; --pb-wv-list-li-gap: 12px; --pb-wv-list-fs: 14px; --pb-wv-product-gap-y: 20px; --pb-wv-product-gap-x: 16px; --pb-wv-product-min: 160px; --pb-wv-product-pad-y: 12px; --pb-wv-product-pad-x: 10px; --pb-wv-ai-grid-gap: 14px; --pb-wv-ai-card-min: 260px; --pb-wv-ai-im-h: 160px; --pb-wv-history-sec-py: 20px; --pb-wv-history-card-py: 14px; }
.pb-widget-inner.pb-wv.pb-wv--skin-size-s-sm {
	--pb-wv-gallery-gap: 6px; --pb-wv-gallery-min: 100px; --pb-wv-list-li-pad-y: 7px; --pb-wv-list-li-pad-x: 10px; --pb-wv-list-li-gap: 8px; --pb-wv-list-fs: 13px;
	--pb-wv-product-gap-y: 10px; --pb-wv-product-gap-x: 8px; --pb-wv-product-min: 118px; --pb-wv-product-pad-y: 8px; --pb-wv-product-pad-x: 6px; --pb-wv-faq-q-py: 11px; --pb-wv-faq-q-px: 12px; --pb-wv-faq-q-fs: 14px;
	--pb-wv-ai-py: 8px; --pb-wv-ai-grid-gap: 10px; --pb-wv-ai-card-min: 210px; --pb-wv-ai-im-h: 130px; --pb-wv-history-sec-py: 13px; --pb-wv-history-item-gap: 11px; --pb-wv-history-item-pb: 15px; --pb-wv-history-card-py: 10px; --pb-wv-history-card-px: 12px; --pb-wv-history-title-fs: 15px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-s-md {
	--pb-wv-gallery-gap: 8px; --pb-wv-gallery-min: 112px; --pb-wv-list-li-pad-y: 9px; --pb-wv-list-li-pad-x: 12px; --pb-wv-list-fs: 13px;
	--pb-wv-product-gap-y: 14px; --pb-wv-product-gap-x: 10px; --pb-wv-product-min: 130px;
	--pb-wv-ai-py: 11px; --pb-wv-ai-grid-gap: 11px; --pb-wv-ai-card-min: 225px; --pb-wv-ai-im-h: 138px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-s-lg {
	--pb-wv-gallery-gap: 10px; --pb-wv-gallery-min: 124px; --pb-wv-list-li-pad-y: 10px; --pb-wv-product-min: 140px;
	--pb-wv-ai-py: 13px; --pb-wv-ai-grid-gap: 12px; --pb-wv-ai-card-min: 238px; --pb-wv-ai-im-h: 146px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-m-sm {
	--pb-wv-gallery-gap: 10px; --pb-wv-gallery-min: 132px; --pb-wv-product-min: 150px;
	--pb-wv-ai-py: 13px; --pb-wv-ai-grid-gap: 13px; --pb-wv-ai-card-min: 246px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-m-md {
	--pb-wv-gallery-gap: 12px; --pb-wv-gallery-min: 140px; --pb-wv-product-min: 158px;
	--pb-wv-ai-py: 14px; --pb-wv-ai-card-min: 252px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-m-lg {
	--pb-wv-gallery-gap: 14px; --pb-wv-gallery-min: 152px; --pb-wv-list-li-pad-y: 13px;
	--pb-wv-product-gap-y: 22px; --pb-wv-product-min: 170px;
	--pb-wv-ai-py: 15px; --pb-wv-ai-grid-gap: 14px; --pb-wv-ai-card-min: 268px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-l-sm {
	--pb-wv-gallery-gap: 14px; --pb-wv-gallery-min: 168px; --pb-wv-product-gap-y: 24px; --pb-wv-product-min: 188px;
	--pb-wv-ai-py: 15px; --pb-wv-ai-grid-gap: 14px; --pb-wv-ai-card-min: 280px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-l-md {
	--pb-wv-gallery-gap: 16px; --pb-wv-gallery-min: 184px; --pb-wv-list-fs: 15px;
	--pb-wv-product-gap-y: 26px; --pb-wv-product-gap-x: 18px; --pb-wv-product-min: 200px; --pb-wv-product-pad-y: 14px;
	--pb-wv-ai-py: 17px; --pb-wv-ai-grid-gap: 16px; --pb-wv-ai-card-min: 300px; --pb-wv-ai-im-h: 176px; --pb-wv-history-title-fs: 18px;
}
.pb-widget-inner.pb-wv.pb-wv--skin-size-l-lg {
	--pb-wv-gallery-gap: 20px; --pb-wv-gallery-min: 200px;
	--pb-wv-product-gap-y: 30px; --pb-wv-product-gap-x: 20px; --pb-wv-product-min: 220px; --pb-wv-product-pad-y: 16px;
	--pb-wv-ai-py: 18px; --pb-wv-ai-grid-gap: 18px; --pb-wv-ai-card-min: 320px; --pb-wv-ai-im-h: 188px;
	--pb-wv-history-sec-py: 26px; --pb-wv-history-card-py: 18px;
}

/* 리스트·갤러리·제품 — 변수 적용 */
.pb-widget-inner.pb-wv .pb-widget-list li { gap: var(--pb-wv-list-li-gap); padding: var(--pb-wv-list-li-pad-y) var(--pb-wv-list-li-pad-x); border-bottom-color: var(--pb-wv-border-soft); }
.pb-widget-inner.pb-wv .pb-widget-list li::before { background: var(--pb-wv-accent); }
.pb-widget-inner.pb-wv .pb-widget-list li a { font-size: var(--pb-wv-list-fs); color: var(--pb-wv-link-text); }
.pb-widget-inner.pb-wv .pb-widget-list li:hover { background: var(--pb-wv-list-hover-bg); }
.pb-widget-inner.pb-wv .pb-widget-list li a:hover { color: var(--pb-wv-accent); }
.pb-widget-inner.pb-wv.pb-wv--theme-muted .pb-widget-list li { background: var(--pb-wv-list-muted-bg); border-bottom-color: var(--pb-wv-border-soft); }
.pb-widget-inner.pb-wv.pb-wv--theme-muted .pb-widget-list li:hover { background: color-mix(in srgb, var(--pb-wv-accent) 7%, var(--pb-wv-list-muted-bg)); }

.pb-widget-inner.pb-wv .pb-widget-gallery-grid { gap: var(--pb-wv-gallery-gap); grid-template-columns: repeat(auto-fill, minmax(var(--pb-wv-gallery-min), 1fr)); }
.pb-widget-inner.pb-wv.pb-wv--theme-muted .pb-widget-gallery .pb-widget-gallery-item { box-shadow: inset 0 0 0 1px #e8edf3; }
.pb-widget-inner.pb-wv .pb-widget-gallery .pb-widget-gallery-item:hover { box-shadow: var(--pb-wv-gallery-hover); }

.pb-widget-products.pb-wv .pb-widget-products-grid {
	gap: var(--pb-wv-product-gap-y) var(--pb-wv-product-gap-x);
	grid-template-columns: repeat(auto-fill, minmax(var(--pb-wv-product-min), 1fr));
}
.pb-widget-products.pb-wv .pb-widget-product-item { padding: var(--pb-wv-product-pad-y) var(--pb-wv-product-pad-x); border-radius: var(--pb-wv-product-radius); }
.pb-widget-products.pb-wv.pb-wv--theme-muted .pb-widget-product-item { border-color: #dfe6ee; background: #f7f9fc; }
.pb-widget-products.pb-wv.pb-wv--theme-muted .pb-widget-product-name { color: #455060; }

.pb-widget-products.pb-wv.pb-wv--theme-accent .pb-widget-product-item,
.pb-widget-products.pb-wv.pb-wv--theme-ocean .pb-widget-product-item,
.pb-widget-products.pb-wv.pb-wv--theme-emerald .pb-widget-product-item,
.pb-widget-products.pb-wv.pb-wv--theme-violet .pb-widget-product-item,
.pb-widget-products.pb-wv.pb-wv--theme-amber .pb-widget-product-item,
.pb-widget-products.pb-wv.pb-wv--theme-rose .pb-widget-product-item,
.pb-widget-products.pb-wv.pb-wv--theme-slate .pb-widget-product-item,
.pb-widget-products.pb-wv.pb-wv--theme-charcoal .pb-widget-product-item {
	border-color: color-mix(in srgb, var(--pb-wv-accent) 45%, transparent);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--pb-wv-accent) 14%, transparent);
}

.pb-widget-inner.pb-wv.pb-widget-faq .pb-faq-question { padding: var(--pb-wv-faq-q-py) var(--pb-wv-faq-q-px); font-size: var(--pb-wv-faq-q-fs); }
.pb-widget-inner.pb-wv.pb-widget-faq .pb-faq-item { border-bottom-color: var(--pb-wv-faq-bd); }
.pb-widget-inner.pb-wv.pb-widget-faq .pb-faq-answer { background: var(--pb-wv-faq-answer-bg); }
.pb-widget-inner.pb-wv.pb-widget-faq .pb-faq-q-badge { background: var(--pb-wv-accent-bright); }

/* AI 검색 위젯: 전역 변수 + 페이지 빌더 보조 (인라인 #id 선택자는 패딩/레이아웃만 유지 가능) */
.pb-widget-inner.pb-widget-ai-product-search.pb-wv { padding-top: var(--pb-wv-ai-py) !important; padding-bottom: var(--pb-wv-ai-py) !important; max-width: 1000px; margin-left: auto; margin-right: auto; }
.pb-widget-inner.pb-widget-ai-product-search.pb-wv .pb-ai-ps-grid { gap: var(--pb-wv-ai-grid-gap); grid-template-columns: repeat(auto-fill,minmax(min(100%, var(--pb-wv-ai-card-min)),1fr)); }
.pb-widget-inner.pb-widget-ai-product-search.pb-wv .pb-ai-ps-im { height: var(--pb-wv-ai-im-h); }
.pb-widget-inner.pb-widget-ai-product-search.pb-wv .pb-ai-ps-q,
.pb-widget-ai-product-search.pb-widget-inner.pb-wv.pb-wv--theme-accent .pb-ai-ps-q { border-width: 2px; border-style: solid; }
.pb-widget-inner.pb-widget-ai-product-search.pb-wv .pb-ai-ps-q,
.pb-widget-ai-product-search.pb-widget-inner.pb-wv .pb-ai-ps-q {
	border-radius: 24px;
	font-size: 15px;
	border-color: var(--pb-wv-ai-input-bd); color: var(--pb-wv-link-text);
}
.pb-widget-ai-product-search.pb-widget-inner.pb-wv button.pb-ai-ps-bt,
.pb-widget-inner.pb-widget-ai-product-search.pb-wv button.pb-ai-ps-bt {
	border-radius: 24px;
	background: var(--pb-wv-ai-bt-bg) !important; border-color: transparent !important; color: #fff !important;
}
.pb-widget-ai-product-search.pb-widget-inner.pb-wv button.pb-ai-ps-bt:hover,
.pb-widget-inner.pb-widget-ai-product-search.pb-wv button.pb-ai-ps-bt:hover {
	background: var(--pb-wv-ai-bt-bg-hover) !important;
}
.pb-widget-inner.pb-widget-ai-product-search.pb-wv.pb-ai-ps--input-fixed .pb-ai-ps-q { flex: 0 0 auto !important; min-width: 0 !important; }
.pb-widget-inner.pb-widget-ai-product-search.pb-wv.pb-ai-ps--input-fixed .pb-ai-ps-row { justify-content: center; }

.pb-widget-inner.pb-widget-banner.pb-wv { box-sizing: border-box; outline: 1px solid var(--pb-wv-banner-ring); outline-offset: -1px; }
.pb-widget-inner.pb-widget-slider.pb-wv,
.pb-widget-inner.pb-widget-main-visual.pb-wv { box-sizing: border-box; outline: color-mix(in srgb, var(--pb-wv-accent) 18%, transparent) solid 1px; border-radius: 4px; overflow: hidden; }
.pb-widget-inner.pb-widget-slider.pb-wv.pb-wv--theme-muted,
.pb-widget-inner.pb-widget-main-visual.pb-wv.pb-wv--theme-muted,
.pb-widget-inner.pb-widget-banner.pb-wv.pb-wv--theme-muted { outline-color: #e2e8f0; }
.pb-widget-inner.pb-widget-slider.pb-wv.pb-wv--theme-default,
.pb-widget-inner.pb-widget-main-visual.pb-wv.pb-wv--theme-default { box-shadow: var(--pb-wv-slider-shadow); outline: none; }

.pb-widget-inner.pb-wv.pb-wv--theme-accent .pb-widget-gallery .pb-widget-gallery-item:hover,
.pb-widget-inner.pb-wv.pb-wv--theme-default .pb-widget-gallery .pb-widget-gallery-item:hover { box-shadow: var(--pb-wv-gallery-accent-hover); }
.pb-widget-inner.pb-wv.pb-wv--theme-ocean .pb-widget-gallery .pb-widget-gallery-item:hover,
.pb-widget-inner.pb-wv.pb-wv--theme-emerald .pb-widget-gallery .pb-widget-gallery-item:hover,
.pb-widget-inner.pb-wv.pb-wv--theme-violet .pb-widget-gallery .pb-widget-gallery-item:hover,
.pb-widget-inner.pb-wv.pb-wv--theme-amber .pb-widget-gallery .pb-widget-gallery-item:hover,
.pb-widget-inner.pb-wv.pb-wv--theme-rose .pb-widget-gallery .pb-widget-gallery-item:hover,
.pb-widget-inner.pb-wv.pb-wv--theme-slate .pb-widget-gallery .pb-widget-gallery-item:hover,
.pb-widget-inner.pb-wv.pb-wv--theme-charcoal .pb-widget-gallery .pb-widget-gallery-item:hover { box-shadow: var(--pb-wv-gallery-accent-hover); }


/* 과거 클래스만 있는 product_list 노출 호환(pb-wv 미부착 시) */
.pb-widget-products.pb-widget-products--theme-muted .pb-widget-product-item { border-color: #dfe6ee; background: #f7f9fc; }
.pb-widget-products.pb-widget-products--theme-muted .pb-widget-product-name { color: #455060; }
.pb-widget-products.pb-widget-products--theme-accent .pb-widget-product-item,
.pb-widget-products.pb-widget-products--theme-ocean .pb-widget-product-item,
.pb-widget-products.pb-widget-products--theme-emerald .pb-widget-product-item,
.pb-widget-products.pb-widget-products--theme-violet .pb-widget-product-item,
.pb-widget-products.pb-widget-products--theme-amber .pb-widget-product-item,
.pb-widget-products.pb-widget-products--theme-rose .pb-widget-product-item,
.pb-widget-products.pb-widget-products--theme-slate .pb-widget-product-item,
.pb-widget-products.pb-widget-products--theme-charcoal .pb-widget-product-item {
	border-color: rgba(52,152,219,0.45);
	box-shadow: 0 2px 8px rgba(52,152,219,0.12);
}

/* ── 레거시 클래스 compact = size-s-sm ─────────────────────────────────── */
.pb-widget-gallery.pb-wv.pb-wv--skin-compact .pb-widget-gallery-grid,
.pb-widget-gallery.pb-wv.pb-wv--skin-size-s-sm .pb-widget-gallery-grid { gap: var(--pb-wv-gallery-gap); grid-template-columns: repeat(auto-fill, minmax(var(--pb-wv-gallery-min), 1fr)); }
.pb-widget-inner.pb-wv.pb-wv--skin-compact .pb-widget-list li,
.pb-widget-inner.pb-wv.pb-wv--skin-size-s-sm .pb-widget-list li {
	gap: var(--pb-wv-list-li-gap); padding: var(--pb-wv-list-li-pad-y) var(--pb-wv-list-li-pad-x);
}
.pb-widget-inner.pb-wv.pb-wv--skin-compact .pb-widget-list li a,
.pb-widget-inner.pb-wv.pb-wv--skin-size-s-sm .pb-widget-list li a { font-size: var(--pb-wv-list-fs); }
.pb-widget-ai-product-search.pb-wv.pb-wv--skin-compact,
.pb-widget-ai-product-search.pb-wv.pb-wv--skin-size-s-sm { padding-top: var(--pb-wv-ai-py) !important; padding-bottom: var(--pb-wv-ai-py) !important; }

.pb-widget-inner.pb-wv.pb-wv--theme-accent .pb-widget-list li:hover { background: color-mix(in srgb, var(--pb-wv-accent) 8%, #fff); }


/* 빌더: 행·띠 사이 세로 간격 */
body.pb-builder-active .pb-page { display: flex; flex-direction: column; gap: 0; }

/* 빌더 전용 — 행 구분을 명확히 표시 */
body.pb-builder-active .pb-row.pb-row--builder {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border: 2px solid #b8cce4;
	border-radius: 4px;
	background: #ffffff;
	margin-bottom: 0;
	margin-top: 0;
	position: relative;
}
body.pb-builder-active .pb-row.pb-row--builder:hover {
	border-color: #3d82c4;
	box-shadow: 0 0 0 2px rgba(61, 130, 196, 0.18);
}
/* 일반 flex 상단바: 열 리사이저와 맞는 푸른 톤·점선 박스형 행 순서 드래그 핸들 */
body.pb-builder-active .pb-row-topbar .pb-row-handle--groupbar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	cursor: grab;
	user-select: none;
	color: #2980b9;
	border: 1px dashed #90b8e0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.95);
	flex-shrink: 0;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}
body.pb-builder-active .pb-row-topbar .pb-row-handle--groupbar:hover { color: #1a5276; background: #e8f0fe; border-color: #2980b9; }
body.pb-builder-active .pb-row-topbar .pb-row-handle--groupbar:active { cursor: grabbing; color: #154360; background: #d6e8fa; border-color: #2471a3; }
body.pb-builder-active .pb-row-topbar .pb-row-handle--groupbar .fas { font-size: 0.85rem; pointer-events: none; }
body.pb-builder-active .pb-row-topbar .pb-row-tool-btn:disabled,
body.pb-builder-active .pb-row-toolbar.pb-toolbar-rail .pb-row-tool-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}
/* 행 상단바: lead-stack(핸들+행삭제 세로) + 컴팩트 툴바 — 높이는 상단 .pb-topbar-btn(히스토리)에 맞춤 */
body.pb-builder-active .pb-row-topbar {
	display: flex;
	align-items: center;
	gap: 6px;
	align-self: stretch;
	padding: 3px 6px;
	margin: 0;
	background: #eef4fb;
	border-bottom: 1px solid #b8cce4;
	border-radius: 2px 2px 0 0;
	min-height: 0;
}
body.pb-builder-active .pb-row-lead-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex-shrink: 0;
	margin-right: 4px;
	padding: 1px 0;
}
body.pb-builder-active .pb-row-lead-stack .pb-row-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	padding: 2px 4px;
	margin: 0;
	font-size: 11px;
	color: #8a9bb0;
	border-radius: 4px;
	cursor: grab;
	user-select: none;
}
body.pb-builder-active .pb-row-lead-stack .pb-row-handle .fas { font-size: 0.72rem; pointer-events: none; }
body.pb-builder-active .pb-row-lead-stack .pb-row-handle:hover { color: #4e73df; background: rgba(78, 115, 223, 0.08); }
body.pb-builder-active .pb-row-lead-stack > .pb-row-tool-btn.icon-only {
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	padding: 0;
}
body.pb-builder-active .pb-row-topbar .pb-row-tool-btn,
body.pb-builder-active .pb-rowbar-builder .pb-row-tool-btn {
	min-height: 28px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 4px;
}
body.pb-builder-active .pb-row-topbar .pb-row-tool-btn.icon-only,
body.pb-builder-active .pb-rowbar-builder .pb-row-tool-btn.icon-only {
	min-width: 28px;
	width: 28px;
	height: 28px;
	padding: 0;
}
body.pb-builder-active .pb-row-topbar .pb-row-tool-btn .fas,
body.pb-builder-active .pb-rowbar-builder .pb-row-tool-btn .fas { font-size: 0.85rem; }
/* 그룹 빌더에서만 라벨 붙은 +컬럼 사용 시(현재 미사용) — flex 행은 icon-only */
body.pb-builder-active .pb-rowbar-builder .pb-row-tool-btn.pb-add-col:not(.icon-only) { min-width: 4.75rem; padding-left: 0.5rem; padding-right: 0.55rem; }
body.pb-builder-active .pb-row-toolbar.pb-toolbar-rail {
	display: flex;
	position: relative;
	inset: auto;
	z-index: 60;
	width: auto;
	padding: 2px 4px;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: none;
	border-radius: 6px;
	box-shadow: none;
	box-sizing: border-box;
	pointer-events: auto;
	opacity: 1;
}
body.pb-builder-active .pb-row.pb-row--builder:hover .pb-row-toolbar.pb-toolbar-rail { opacity: 1; }
/* 컬럼: 세로 flex — 편집 크롬(좌 레일 또는 우측 경계 스트립) */
body.pb-builder-active .pb-col {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0;
	min-width: 0;
	border: 1px dashed #b8cce4;
	border-radius: 3px;
	background: #fafcff;
}
body.pb-builder-active .pb-col:hover {
	border-color: #3d82c4;
	background: #f5f9ff;
}
/* 빌더 모드: 위젯 컨테이너에 흰 배경 + 둥근 모서리 (편집 편의) */
body.pb-builder-active .pb-widget-inner { background: #fff; border-radius: 8px; overflow: hidden; }
/* 빌더: 컬럼 본문 영역 — 기본 여백 없음(행·컬럼 설정 없을 때 WYSIWYG 가 실제 레이아웃에 붙도록). 좌/우 레일용은 .pb-col--pad-edge-* */
body.pb-builder-active .pb-col-content { min-height: 40px; padding: 0; box-sizing: border-box; }
/* 좌측 경계(flex): 상단 그립·하단 이 칼럼 삭제(우측과 동일 패턴, 리사이즈 없음) */
body.pb-builder-active .pb-col-edge--left {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 24px;
	/* Froala .fr-box(z-index:3000)보다 위 — 편집기가 좌측 레일 삭제·드래그를 덮지 않게 함. 우측 레일보다 +1 해 이웃 컬럼 경계에서 뒤쪽(이 컬럼) 삭제가 클릭되게 함 */
	z-index: 3060;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 3px 0;
	box-sizing: border-box;
	pointer-events: none;
	background: rgba(238, 244, 251, 0.88);
	border-right: 1px solid #d0e0f0;
	border-radius: 3px 0 0 3px;
}
body.pb-builder-active .pb-col-edge--left .pb-toolbar-btn.pb-col-del { margin: 0; }
/* 삭제 버튼이 flex 안 리사이저 블록보다 항상 위에서 클릭되게 */
body.pb-builder-active .pb-col-edge .pb-toolbar-btn.pb-col-del--boundary {
	position: relative;
	z-index: 3;
}
body.pb-builder-active .pb-col-edge--right {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 24px;
	z-index: 3050;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 3px 0;
	box-sizing: border-box;
	pointer-events: none;
}
body.pb-builder-active .pb-col-edge-grip {
	position: relative;
	z-index: 2;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	user-select: none;
	color: #8a9bb0;
	padding: 2px 0;
	margin: 0;
	border-radius: 4px;
	flex-shrink: 0;
}
body.pb-builder-active .pb-col-edge-grip .fas { font-size: 0.72rem; pointer-events: none; }
body.pb-builder-active .pb-col-edge-grip:hover { color: #4e73df; background: rgba(78, 115, 223, 0.08); }
body.pb-builder-active .pb-col-edge-grip:active { cursor: grabbing; }
body.pb-builder-active .pb-col-edge-resize.pb-resizer {
	position: relative;
	/* 전역 .pb-resizer z-index:70 은 형제 삭제 버튼·그립을 덮어 클릭 뺏음 — 세로 레일 안에서는 리사이저를 아래로 */
	z-index: 0;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	pointer-events: auto;
	cursor: col-resize;
	background: transparent;
	border: none;
	font-size: 9px;
	color: #6c8ebf;
	align-self: stretch;
}
body.pb-builder-active .pb-col-edge-resize .pb-resizer-track {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 28px;
	border-radius: 3px;
	border: 1px dashed #b8cce4;
	background: transparent;
}
body.pb-builder-active .pb-col-edge-resize:hover .pb-resizer-track { background: rgba(232, 240, 254, 0.8); border-color: #2563eb; color: #1d4ed8; }
/* 우측 세로 레일: 리사이즈 트랙이 그립~삭제 사이 세로 공간을 채움 */
body.pb-builder-active .pb-col-edge--right .pb-col-edge-resize {
	flex: 1 1 0;
	min-height: 28px;
	width: 100%;
	align-self: stretch;
}
body.pb-builder-active .pb-col-del--boundary {
	pointer-events: auto;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px;
	margin: 0;
	padding: 0;
	border: 2px solid #c0392b;
	border-radius: 5px;
	background: #fff;
	color: #922b21;
	opacity: 0.95;
}
body.pb-builder-active .pb-col-del--boundary:hover {
	background: #fff5f4;
	border-color: #922b21;
	color: #7b241c;
}
body.pb-builder-active .pb-col-edge--right .pb-toolbar-btn.pb-col-del { margin: 0; }
/* 컬럼 정렬 시 경계 UI 잠시 숨김 — Sortable과 겹침 완화 */
body.pb-builder-active .pb-col-edge--left.pb-edge-dim,
body.pb-builder-active .pb-col-edge--right.pb-edge-dim { visibility: hidden; pointer-events: none; }
/* 본문과 경계/좌레일 겹침 방지 */
body.pb-builder-active .pb-col--pad-edge-left > .pb-col-content {
	padding-left: 28px;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
}
body.pb-builder-active .pb-col--pad-edge-right > .pb-col-content {
	padding-right: 28px;
	padding-left: 0;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
}
body.pb-builder-active .pb-col--builder-chrome[data-content-type="html"] > .pb-col-content { cursor: text; }
/* 공통 툴바 버튼(최소 터치 ~40px 권장) */
body.pb-builder-active .pb-toolbar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.75rem;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 0.375rem;
	border: 1px solid #b8c2ce;
	background: #f4f7fb;
	cursor: pointer;
	box-sizing: border-box;
}
body.pb-builder-active .pb-toolbar-btn .fas { font-size: 1rem; line-height: 1; pointer-events: none; }
body.pb-builder-active .pb-toolbar-btn .pb-toolbar-btn-label { white-space: nowrap; pointer-events: none; }
body.pb-builder-active .pb-toolbar-btn.icon-only { min-width: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
body.pb-builder-active .pb-toolbar-btn.pb-col-del:not(.pb-col-del--boundary) { display: inline-flex; align-items: center; gap: 5px; padding-left: 8px; padding-right: 10px; min-width: auto; font-size: 12px; font-weight: 600; }
body.pb-builder-active .pb-toolbar-btn:hover { background: #e8eef6; border-color: #4e73df; }
body.pb-builder-active .pb-toolbar-btn.danger:hover { background: #fdecea; border-color: #c0392b; color: #922b21; }
body.pb-builder-active .pb-row-tool-btn.pb-add-col:not(.icon-only) { padding-left: 0.65rem; padding-right: 0.75rem; min-width: 5.5rem; }
body.pb-builder-active .pb-col-toolbar .pb-widget-toolbar-btn { min-width: 5.25rem; }
/* 경계 삭제 버튼: .pb-toolbar-btn 보다 우선 */
body.pb-builder-active .pb-toolbar-btn.pb-col-del--boundary {
	margin: 0;
	padding: 0;
	gap: 0;
	font-size: 0;
	line-height: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
body.pb-builder-active .pb-toolbar-btn.pb-col-del--boundary:hover {
	box-shadow: 0 2px 6px rgba(192, 57, 43, 0.15);
}
/* 경계 삭제는 컴팩트(22px) 고정: icon-only·공통 toolbar-btn 가 덮어쓰지 않도록 */
body.pb-builder-active .pb-toolbar-btn.pb-col-del--boundary.icon-only {
	min-width: 22px;
	max-width: 22px;
	width: 22px;
	min-height: 22px;
	max-height: 22px;
	height: 22px;
	padding: 0;
	box-sizing: border-box;
}
/* 드래그 핸들 — 툴바 opacity 와 무관하게 항상 선명 */
body.pb-builder-active .pb-toolbar-rail .pb-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2.5rem;
	padding: 0 6px;
	margin: 0;
	cursor: grab;
	user-select: none;
	color: #8a9bb0;
	border-radius: 4px;
	opacity: 1;
	transition: color 0.15s, background 0.15s;
}
body.pb-builder-active .pb-toolbar-rail .pb-handle:hover { color: #4e73df; background: rgba(78, 115, 223, 0.08); }
body.pb-builder-active .pb-toolbar-rail .pb-handle:active { cursor: grabbing; color: #3a5fc8; background: rgba(78, 115, 223, 0.15); }
body.pb-builder-active .pb-toolbar-rail .pb-handle .fas { font-size: 1rem; pointer-events: none; }
/* Froala 인라인·팝업이 행/컬럼 툴바(z-index 40~50)보다 위에 표시 */
body.pb-builder-active .fr-box,
body.pb-builder-active .fr-toolbar,
body.pb-builder-active .fr-second-toolbar,
body.pb-builder-active .fr-popup,
body.pb-builder-active .fr-image-resizer { z-index: 3000 !important; }
/* Froala 인라인 툴바 — 외부 드래그 그립 (툴바 왼쪽에 떠 있음) */
.pb-fr-toolbar-external-grip { cursor: move; user-select: none; background: linear-gradient(180deg, #dce3ef 0%, #c5cedd 100%); border: 1px solid #9aabb8; border-right: 0; border-radius: 5px 0 0 5px; box-shadow: none; box-sizing: border-box; pointer-events: auto; margin-right: -1px; }
.pb-fr-toolbar-external-grip:hover { background: linear-gradient(180deg, #cfd9ea 0%, #b5c0d4 100%); }
.pb-fr-toolbar-external-grip__icon { display: block; width: 100%; height: 100%; position: relative; }
.pb-fr-toolbar-external-grip__icon::before { content: "⋮⋮"; display: block; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -3px; color: #3d4f63; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.fr-toolbar.fr-inline[data-pb-toolbar-pinned="1"] { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18); }
/* 빌더: Froala 기본(본문 20px 패딩·회색 테두리) 제거 — 에디트 영역이 컬럼 안에 붙어 보이게 */
body.pb-builder-active .pb-col-content .fr-box { border-radius: 0; }
body.pb-builder-active .pb-col-content .fr-box .fr-wrapper {
	border: 0;
	background: transparent;
}
body.pb-builder-active .pb-col-content .fr-box .fr-element {
	padding: 0 !important;
	min-height: 48px;
	box-sizing: border-box;
}
body.pb-builder-active .pb-col,
body.pb-builder-active .pb-row-inner { overflow: visible; }
/* 빌더 편집: + 컬럼 추가 시 반응형 wrap 으로 세로 쌓임 방지 */
body.pb-builder-active .pb-row.pb-row--builder > .pb-row-inner { flex-wrap: nowrap !important; }
@media (max-width: 980px) {
	body.pb-builder-active .pb-row.pb-row--builder > .pb-row-inner > .pb-col { max-width: none !important; min-width: 0 !important; }
	body.pb-builder-active .pb-row.pb-row--builder > .pb-row-inner > .pb-resizer { display: flex !important; }
}
.pb-handle { cursor: grab; user-select: none; padding: 0 4px; color: #555; }
.pb-btn { border: 1px solid #bbb; background: #f8f8f8; border-radius: 3px; padding: 2px 6px; cursor: pointer; font-size: 12px; margin: 0 1px; }
.pb-btn:hover { background: #eef; }
.pb-add-row-strip { display: block; width: 100%; border: 0; background: rgba(60, 120, 200, 0.12); color: #246; font-size: 13px; padding: 6px 0; cursor: pointer; margin: 2px 0; }
.pb-add-row-strip:hover { background: rgba(60, 120, 200, 0.22); }
/* 빌더: 새 행 띠 — 밝은 회색(#ddd 급); 행 박스 간 세로 여백은 마크업에서 두지 않음(.pb-page gap:0) */
body.pb-builder-active .pb-add-row-strip { margin: 0; padding: 5px 10px; background: #f0f4fa; color: #4a6fa5; font-size: 12px; line-height: 1.2; border: 1px dashed #a0bcd8; border-radius: 3px; text-align: center; }
body.pb-builder-active .pb-add-row-strip:hover { background: #daeaf8; color: #1a4a80; border-color: #3d82c4; border-style: solid; }
body.pb-builder-active .pb-add-row-strip.pb-add-row-top { margin-bottom: 0; }
.pb-resizer { flex: 0 0 14px; width: 14px; min-width: 14px; max-width: 14px; cursor: col-resize; align-self: stretch; background: rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #666; user-select: none; box-sizing: border-box; margin: 0; position: relative; z-index: 70; }
.pb-resizer:hover { background: rgba(0, 80, 200, 0.25); }
.pb-resizer:active { background: rgba(0, 80, 200, 0.35); }
.pb-resizer-hidden { visibility: hidden; width: 0; min-width: 0; max-width: 0; flex-basis: 0; overflow: hidden; }

/* 빌더: 컬럼 줄무늬 배경 + 영역 점선 테두리 — 본문 가독성을 위해 거의 흰색 (살짝 톤 차이) */
body.pb-builder-active .pb-col.pb-col-stripe-a { background-color: rgba(245, 249, 255, 0.45); border: 1px dashed rgba(74, 120, 180, 0.22); border-radius: 6px; box-sizing: border-box; }
body.pb-builder-active .pb-col.pb-col-stripe-b { background-color: rgba(255, 252, 245, 0.45); border: 1px dashed rgba(180, 130, 60, 0.18); border-radius: 6px; box-sizing: border-box; }
body.pb-builder-active .pb-col > .pb-col-content { background: transparent; border-radius: 0; min-height: 48px; box-sizing: border-box; }
/* HTML 칼럼: 본문 컨테이너가 행·셀 높이만큼 채워져 빈 영역에서도 드롭·클릭 타깃이 칼럼 전체가 되도록 */
body.pb-builder-active .pb-col[data-content-type="html"] > .pb-col-content {
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-height: 48px;
	position: relative;
	z-index: 2;
}
body.pb-builder-active .pb-col[data-motion-badge] > .pb-col-content { pointer-events: auto; }
body.pb-builder-active .pb-col[data-content-type="html"] .fr-box,
body.pb-builder-active .pb-col[data-content-type="html"] .fr-wrapper,
body.pb-builder-active .pb-col[data-content-type="html"] .fr-element { pointer-events: auto; cursor: text; }
body.pb-builder-active .pb-col[data-content-type="html"] > .fr-box,
body.pb-builder-active .pb-col[data-content-type="html"] > .pb-col-content.fr-box { flex: 1 1 auto; align-self: stretch; width: 100%; min-height: 48px; position: relative; z-index: 2; }
body.pb-builder-active .pb-col[data-content-type="html"] > .pb-col-content .fr-box {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
body.pb-builder-active .pb-col[data-content-type="html"] > .pb-col-content .fr-wrapper {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
body.pb-builder-active .pb-col[data-content-type="html"] > .pb-col-content .fr-element {
	flex: 1 1 auto;
	min-height: 48px;
	box-sizing: border-box;
}
/* Froala 활성 시 에디터 영역 60% 투명 — 뒤 본문·레이아웃이 보이도록 */
body.pb-builder-active .pb-col[data-content-type="html"].pb-col--froala-focus > .pb-col-content .fr-box .fr-wrapper,
body.pb-builder-active .pb-col[data-content-type="html"]:focus-within > .pb-col-content .fr-box .fr-wrapper {
	background: rgba(255, 255, 255, 0.4) !important;
	transition: background 0.18s ease;
}
body.pb-builder-active .pb-col[data-content-type="html"].pb-col--froala-focus > .pb-col-content .fr-element,
body.pb-builder-active .pb-col[data-content-type="html"]:focus-within > .pb-col-content .fr-element {
	background: rgba(255, 255, 255, 0.35) !important;
	transition: background 0.18s ease;
}
body.pb-builder-active .pb-col[data-content-type="html"].pb-col--froala-focus.pb-col-stripe-a,
body.pb-builder-active .pb-col[data-content-type="html"].pb-col--froala-focus.pb-col-stripe-b {
	background-color: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(74, 120, 180, 0.35);
}
body.pb-builder-active .pb-col.pb-col--ai-streaming > .pb-col-content .fr-element [data-pb-ai-stream-ph="1"],
body.pb-builder-active .pb-col.pb-col--ai-streaming > .pb-col-content .fr-element .pb-ai-stream-ph {
	background: rgba(78, 115, 223, 0.08);
	border-radius: 2px;
	min-height: 1.2em;
}
body.pb-builder-active .pb-col[data-content-type="html"] .fr-element mark.pb-ai-sel-mark { background: rgba(78, 115, 223, 0.32); color: inherit; padding: 0 1px; border-radius: 2px; }
/* 마우스를 올린 컬럼만 살짝 진하게 — 평상시엔 본문 가독성 유지 */
body.pb-builder-active .pb-col.pb-col-stripe-a:hover { background-color: rgba(232, 241, 252, 0.75); border-color: rgba(74, 120, 180, 0.45); }
body.pb-builder-active .pb-col.pb-col-stripe-b:hover { background-color: rgba(252, 246, 232, 0.78); border-color: rgba(180, 130, 60, 0.4); }
/* flex 빌더 행: 열은 동일 층, 리사이저만 위로 — 우측 열이 겹치며 1px만 잡히는 현상 방지 */
body.pb-builder-active .pb-row-inner > .pb-col { position: relative; z-index: 1; }
body.pb-builder-active .pb-row-inner > .pb-resizer.pb-resizer--flex-between { z-index: 8; }
/* 폭 0 유지 */
body.pb-builder-active .pb-resizer {
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	max-width: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	margin: 0;
	font-size: 0;
}
/* flex 열 사이: 넓은 히트(.pb-resizer-hit) + ::before 점선 가이드 + ::after 중앙 핸들만(그룹 그리드와 유사) */
body.pb-builder-active .pb-resizer.pb-resizer--flex-between .pb-resizer-hit {
	position: absolute;
	left: -12px;
	top: 0;
	width: 24px;
	height: 100%;
	min-height: 48px;
	cursor: col-resize;
	z-index: 2;
	pointer-events: auto;
	background: transparent;
	box-sizing: border-box;
}
/* 좌우 점선 경계 + 중앙 세로 점선(핸들 위·아래만 — 레이아웃 확인용) */
body.pb-builder-active .pb-resizer.pb-resizer--flex-between::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 22px;
	transform: translateX(-50%);
	box-sizing: border-box;
	border-left: 1px dashed rgba(120, 150, 190, 0.42);
	border-right: 1px dashed rgba(120, 150, 190, 0.42);
	pointer-events: none;
	z-index: 1;
	background:
		repeating-linear-gradient(to bottom, rgba(90, 120, 160, 0.48) 0 2px, transparent 2px 7px) center top / 1px max(0px, calc(50% - 28px)) repeat-y,
		repeating-linear-gradient(to bottom, rgba(90, 120, 160, 0.48) 0 2px, transparent 2px 7px) center bottom / 1px max(0px, calc(50% - 28px)) repeat-y;
}
body.pb-builder-active .pb-resizer.pb-resizer--flex-between::after {
	content: '\21D4';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	min-height: 40px;
	margin: 0;
	padding: 4px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px dashed #b8cce4;
	border-radius: 3px;
	font-size: 9px;
	color: #6c8ebf;
	cursor: col-resize;
	z-index: 3;
	pointer-events: none;
	box-sizing: border-box;
}
body.pb-builder-active .pb-resizer.pb-resizer--flex-between:hover::before {
	border-left-color: rgba(37, 99, 235, 0.72);
	border-right-color: rgba(37, 99, 235, 0.72);
}
body.pb-builder-active .pb-resizer.pb-resizer--flex-between:hover::after { background: rgba(232, 240, 254, 0.8); border-color: #2563eb; color: #1d4ed8; }

/* 자동 저장 상태 표시 (화면 고정) */
.pb-autosave-bar { position: fixed; right: 16px; bottom: 16px; z-index: 99990; max-width: 320px; padding: 8px 14px; font-size: 13px; line-height: 1.35; color: #1a2a3a; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(80, 120, 180, 0.35); border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); pointer-events: none; }
.pb-autosave-bar .pb-autosave-clock { display: block; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #2a4058; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(80, 120, 180, 0.2); }
.pb-autosave-bar .pb-autosave-text { display: block; }
.pb-autosave-bar .pb-autosave-hint { display: block; margin-top: 4px; font-size: 11px; color: #5a6a7a; }
.pb-autosave-bar .pb-autosave-last { display: block; margin-top: 6px; font-size: 11px; color: #3d5a78; font-variant-numeric: tabular-nums; }
.pb-autosave-bar.is-pending { border-color: rgba(200, 150, 50, 0.45); background: rgba(255, 252, 240, 0.98); }
.pb-autosave-bar.is-saving { border-color: rgba(60, 100, 200, 0.5); background: rgba(240, 246, 255, 0.98); }
.pb-autosave-bar.is-saved { border-color: rgba(40, 160, 80, 0.4); background: rgba(240, 255, 245, 0.98); }
.pb-autosave-bar.is-error { border-color: rgba(200, 60, 60, 0.45); background: rgba(255, 242, 240, 0.98); color: #6a1a1a; }

/* 모달 */
.pb-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 10000; }
.pb-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10001; background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); min-width: 320px; max-width: 96vw; max-height: 90vh; overflow: auto; }
.pb-modal-dialog { padding: 0; }
.pb-modal-head { font-weight: bold; padding: 12px 16px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; }
.pb-modal-body { padding: 16px; }
.pb-modal-foot { padding: 12px 16px; border-top: 1px solid #e0e0e0; text-align: right; }
.pb-modal-close { border: 0; background: none; font-size: 22px; cursor: pointer; line-height: 1; color: #666; }
.pb-btn-primary { background: #4e73df; color: #fff; border: 0; padding: 8px 20px; border-radius: 4px; cursor: pointer; }
.pb-btn-primary:hover { background: #3a5fc8; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; margin-bottom: 4px; font-size: 14px; }
.form-control { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; }

/* 공통 편집기 상단 2단 (HTML 편집 · 페이지 빌더) */
:root { --pb-editor-header-h: 96px; --pb-shell-border: #cfd8e3; --pb-shell-accent: #4e73df; }
.pb-editor-header { display: flex; flex-direction: column; flex-shrink: 0; }
.pb-bo-doc-bar { background: #2b2f36; color: #f8f9fa; padding: 0; font-size: 13px; border-bottom: 1px solid #3d4450; }
.pb-bo-doc-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; }
.pb-bo-doc-brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding-right: 12px; border-right: 1px solid #3d4450; }
.pb-bo-doc-brand i { color: #5c76f2; font-size: 15px; line-height: 1; }
.pb-bo-doc-bar strong { color: #fff; font-size: 13px; font-weight: 700; }
.pb-bo-doc-info { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 180px; }
.pb-bo-doc-title { color: #f1f3f5; font-weight: 600; font-size: 13px; line-height: 1.35; word-break: break-word; }
.pb-bo-doc-key { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: #1f2329; border: 1px solid #495057; color: #adb5bd; font-family: ui-monospace, Consolas, monospace; line-height: 1.4; }
.pb-bo-doc-muted { color: #adb5bd; }
.pb-bo-doc-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pb-bo-doc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px; line-height: 1.35; border: 1px solid #495057; border-radius: 4px; background: #3a3f47; color: #e9ecef; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; }
.pb-bo-doc-btn i { font-size: 12px; opacity: 0.9; }
.pb-bo-doc-btn:hover { background: #4a5058; border-color: #6c757d; color: #fff; text-decoration: none; }
.pb-bo-doc-btn--site { border-color: #2d6a4f; background: #243832; color: #8fd4b4; }
.pb-bo-doc-btn--site:hover { background: #2d4a3e; border-color: #3d8b67; color: #b8f0d4; }
.pb-bo-doc-bar .bo-ui-mode-toggle-host--inline { margin-left: 0; flex-shrink: 0; }
.pb-bo-doc-close { padding: 5px 14px; font-size: 13px; border: 1px solid #6c757d; border-radius: 4px; background: #495057; color: #fff; cursor: pointer; }
.pb-bo-doc-close:hover { background: #5a6268; border-color: #adb5bd; }
.pb-mode-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f0f2f5; border-bottom: 1px solid #dde1e6; flex-wrap: wrap; }
.pb-mode-bar .pb-bo-doc-close { margin-left: auto; }
.pb-mode-label { font-size: 13px; font-weight: 600; color: #333; margin-right: 6px; }
.pb-mode-btn { border: 1px solid #bbb; background: #fff; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; color: #333; }
.pb-mode-btn:hover { background: #eef2f8; }
.pb-mode-btn.is-active { background: #4e73df; color: #fff; border-color: #3a5fc8; }
.pb-mode-separator { display: inline-block; width: 1px; height: 24px; background: #ccc; margin: 0 6px; }
.pb-editor-preview-size { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-editor-preview-preset { min-width: 9rem; padding: 4px 8px; font-size: 12px; border: 1px solid var(--pb-shell-border); border-radius: 6px; background: #fff; color: #334155; }
.pb-editor-preview-width-input { width: 4.5rem; padding: 4px 6px; font-size: 12px; border: 1px solid var(--pb-shell-border); border-radius: 6px; background: #fff; color: #334155; }
.pb-editor-preview-width-input[hidden] { display: none !important; }
.pb-editor-preview-width-badge { font-size: 11px; color: #64748b; min-width: 3.5rem; white-space: nowrap; }
.pb-editor-preview-size .pb-editor-preview-link { margin-left: 8px; }
.pb-editor-preview-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; line-height: 1.35; border: 1px solid #36a2b8; border-radius: 6px; background: #fff; color: #17a2b8; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; box-sizing: border-box; }
.pb-editor-preview-link i { font-size: 12px; opacity: 0.9; }
.pb-editor-preview-link:hover { background: #17a2b8; border-color: #17a2b8; color: #fff; text-decoration: none; }
.pb-editor-device-btns { display: inline-flex; gap: 4px; }
.pb-editor-device { padding: 6px 10px; border: 1px solid var(--pb-shell-border); border-radius: 6px; background: #fff; color: #64748b; cursor: pointer; }
.pb-editor-device.is-active { background: var(--pb-shell-accent); border-color: #3a5fc8; color: #fff; }
.pb-editor-toolbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; border: 1px solid var(--pb-shell-border); border-radius: 6px; background: #fff; color: #334155; cursor: pointer; }
.pb-editor-toolbar-btn:hover { background: #f8fafc; }
.pb-editor-toolbar-btn.is-panel-hidden { background: var(--pb-shell-accent); border-color: #3a5fc8; color: #fff; }
.pb-builder-toggle-rail-label { font-size: 12px; }
.pb-editor-toolbar-btn--primary { background: var(--pb-shell-accent); border-color: #3a5fc8; color: #fff; }
.pb-editor-toolbar-btn--primary:hover { background: #3a5fc8; }
.pb-editor-toolbar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pb-surface-btns { display: inline-flex; align-items: center; gap: 0; }
.pb-surface-btns .pb-surface-btn { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; border: 1px solid var(--pb-shell-border); border-radius: 0; margin: 0; background: #fff; color: #334155; cursor: pointer; }
.pb-surface-btns .pb-surface-btn:first-child { border-radius: 6px 0 0 6px; }
.pb-surface-btns .pb-surface-btn:last-child { border-radius: 0 6px 6px 0; border-left-width: 0; }
.pb-surface-btns .pb-surface-btn.is-active { background: var(--pb-shell-accent); border-color: #3a5fc8; color: #fff; }
.pb-preview-btn { border: 1px solid #bbb; background: #fff; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; font-size: 14px; color: #555; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.pb-preview-btn:hover { background: #e8f0ff; color: #4e73df; border-color: #4e73df; }

/* 미리보기 오버레이 */
.pb-preview-overlay { position: fixed; inset: 0; z-index: 100000; background: #1a1d23; flex-direction: column; display: none; }
.pb-preview-overlay:not([hidden]) { display: flex; }
.pb-preview-topbar { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 10px 20px; background: #22262e; border-bottom: 1px solid #333; flex-shrink: 0; }
.pb-preview-device-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pb-preview-topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.pb-preview-device { border: 1px solid #555; background: #2d323c; color: #ccc; padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.pb-preview-device:hover { background: #3a4050; color: #fff; }
.pb-preview-device.is-active { background: #4e73df; color: #fff; border-color: #3a5fc8; }
.pb-preview-size-label { font-size: 13px; color: #999; font-variant-numeric: tabular-nums; }
.pb-preview-guide-btn { border: 1px solid #666; background: #3a3f4a; color: #ddd; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.15s; white-space: nowrap; }
.pb-preview-guide-btn:hover { background: #4a5568; color: #fff; border-color: #7c8aa0; }
.pb-preview-guide-btn.is-active { background: #2e4a8f; color: #fff; border-color: #4e73df; font-weight: 600; }
.pb-preview-close { border: 1px solid #666; background: #3a3f4a; color: #ddd; padding: 7px 18px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.pb-preview-close:hover { background: #e74a3b; color: #fff; border-color: #e74a3b; }
.pb-preview-stage { flex: 1; display: flex; justify-content: center; align-items: flex-start; overflow: auto; padding: 24px 0; }
.pb-preview-frame { height: 100%; border: none; background: #fff; border-radius: 6px; box-shadow: 0 0 40px rgba(0,0,0,0.5); transition: width 0.3s ease; }
.pb-normal-wrap { display: block; }

/* 전문가 모드 패널 */
.pb-expert-wrap { padding: 12px; max-width: 100%; box-sizing: border-box; }
.pb-expert-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pb-expert-editor-col { flex: 1 1 420px; min-width: 280px; }
/* 전문가 모드 헤더 (레이블 + 매뉴얼 버튼 + 폰트크기) */
.pb-expert-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pb-expert-header .pb-expert-label { margin-bottom: 0; }
.pb-expert-manual-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 12px; border: 1px solid #c8d0db; border-radius: 4px; background: #fff; color: #4e73df; cursor: pointer; transition: background 0.15s; font-weight: 600; }
.pb-expert-manual-btn:hover { background: #eef1f7; }
.pb-expert-fontsize { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: #555; }
.pb-fontsize-btn { padding: 3px 8px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; color: #333; transition: background 0.12s; }
.pb-fontsize-btn:hover { background: #e8e8e8; }

/* 매뉴얼 레이어 팝업 (에디터 위에 오버레이) */
.pb-manual-layer { position: absolute; top: 42px; left: 0; width: 100%; max-width: 1024px; z-index: 200; max-height: 630px; display: none; flex-direction: column; background: #fff; border: 1px solid #bbb; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.pb-manual-layer:not([hidden]) { display: flex; }
.pb-manual-layer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #2c3e50; color: #fff; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 14px; }
.pb-manual-layer-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; padding: 4px 8px; }
.pb-manual-layer-close:hover { color: #e74a3b; }
.pb-manual-layer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.pb-expert-wrap { position: relative; }
.pb-expert-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.pb-expert-textarea { width: 100%; min-height: 120px; box-sizing: border-box; font-family: Consolas, "Courier New", monospace; font-size: 13px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
.pb-expert-editor-col .CodeMirror { border: 1px solid #444; border-radius: 4px; font-size: 13px; }
.pb-expert-cm-host { padding: 8px; background: #1e1e2e; border: 1px solid #3d3d52; border-radius: 6px; box-sizing: border-box; }
.pb-expert-wrap .CodeMirror { flex: 1 1 auto; height: 100% !important; min-height: 180px; border: 1px solid #444; border-radius: 4px; background: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; line-height: 1.5; }
.pb-expert-wrap .CodeMirror pre { font-family: Consolas, "Courier New", monospace; line-height: 1.5; }
.pb-expert-wrap .CodeMirror-gutters { background: #272822; border-right: 1px solid #444; }
.pb-expert-wrap .CodeMirror-linenumber { color: #75715e; }
.pb-expert-wrap .CodeMirror-focused { outline: 2px solid var(--pb-shell-accent); outline-offset: 1px; }
.pb-expert-wrap .CodeMirror-cursor { border-left: 2px solid #f8f8f2 !important; }
.cm-s-monokai span.cm-keyword { color: #66d9e8 !important; font-weight: 700; }
.cm-s-monokai span.cm-string-2 { color: #e6db74 !important; }
.pb-code-pane .CodeMirror { border: none; font-size: 13px; min-height: 350px; }
.CodeMirror-foldgutter { width: 1.2em; }
.pb-expert-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-expert-manual-inner { font-size: 13px; line-height: 1.55; color: #222; }
.pb-expert-manual-title { margin: 0 0 10px; font-size: 16px; }
.pb-expert-manual-inner h4 { margin: 14px 0 6px; font-size: 14px; }
.pb-expert-sample { background: #fff; border: 1px solid #ddd; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.pb-expert-li { margin: 6px 0; padding-left: 18px; }
.pb-expert-warn { margin-top: 14px; padding: 10px; background: #fff8e6; border: 1px solid #e6c200; border-radius: 4px; }
.pb-expert-tip { margin: 8px 0 0; padding: 8px 10px; background: #eef6ff; border: 1px solid #b8d4f5; border-radius: 4px; font-size: 12px; }
.pb-btn-muted { background: #e8e8e8; color: #222; border: 1px solid #bbb; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.pb-btn-muted:hover { background: #ddd; }

/* 위젯 선택 카탈로그 — 컴팩트 카드 (툴바 위젯 아이콘 크기 기준) */
.pb-modal--widget-catalog { min-width: 320px; max-width: 760px; }
.pb-modal-dialog--layout-reg { min-width: 360px; max-width: 560px; }
.pb-layout-reg-hint { font-size: 13px; color: #555; margin: 0 0 14px; line-height: 1.55; }
.pb-layout-reg-ai-row { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pb-layout-reg-ai-btn { padding: 6px 12px; font-size: 13px; border: 1px solid #6f42c1; background: #f3e8ff; color: #5b21b6; border-radius: 4px; cursor: pointer; }
.pb-layout-reg-ai-btn:hover { background: #e9d5ff; }
.pb-layout-reg-ai-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.pb-layout-reg-ai-hint { font-size: 12px; color: #6c757d; }
.pb-layout-reg-ai-thumb-wrap { margin-bottom: 12px; }
.pb-layout-reg-ai-thumb-label { display: block; font-size: 12px; color: #495057; margin-bottom: 6px; }
.pb-layout-reg-ai-thumb-img { display: block; max-width: 100%; height: auto; max-height: 140px; border-radius: 6px; border: 1px solid #dee2e6; background: #f8f9fa; }
.pb-widget-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-items: stretch; }
.pb-widget-card { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: initial; min-height: 0; padding: 6px 10px; box-sizing: border-box; text-align: left; border: 1px solid #d8dee8; border-radius: 6px; cursor: pointer; background: #f8fafd; box-shadow: none; transition: border-color 0.12s, background 0.12s; }
.pb-widget-card:hover { border-color: #4e73df; background: #eef3ff; }
.pb-widget-card:focus { outline: 2px solid #4e73df; outline-offset: 1px; }
.pb-widget-card-icon { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: #4e73df; color: #fff; font-size: 12px; }
.pb-widget-card-html .pb-widget-card-icon { background: #258391; }
.pb-widget-card-text { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
.pb-widget-card-title { font-size: 12px; font-weight: 600; color: #2d3748; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-widget-card-desc { display: none; }
.pb-widget-common-opts { display: flex; gap: 10px; margin-top: 10px; }
.pb-widget-common-opts .form-group { margin-bottom: 0; }

/* FAQ 아코디언 위젯 */
.pb-widget-faq { background: #fff; border-radius: 8px; overflow: hidden; }
.pb-faq-item { border-bottom: 1px solid #eef0f4; }
.pb-faq-item:last-child { border-bottom: none; }
.pb-faq-question { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border: none; background: none; cursor: pointer; text-align: left; font-size: 15px; color: #222; transition: background 0.15s; }
.pb-faq-question:hover { background: #f5f7fb; }
.pb-faq-q-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #4e73df; color: #fff; font-weight: 700; font-size: 14px; }
.pb-faq-q-text { flex: 1; font-weight: 600; line-height: 1.45; }
.pb-faq-arrow { flex-shrink: 0; color: #aab; font-size: 13px; transition: transform 0.25s; }
.pb-faq-question[aria-expanded="true"] .pb-faq-arrow { transform: rotate(180deg); }
.pb-faq-question[aria-expanded="true"] { background: #f0f4ff; }
/* 기본 숨김 상태 — display:flex 는 .is-open 클래스 적용 시에만 */
.pb-faq-answer { display: none; gap: 12px; padding: 14px 18px 18px; background: #fafbfd; }
.pb-faq-answer.is-open { display: flex; animation: pbFaqSlide 0.2s ease; }
.pb-faq-a-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e74a3b; color: #fff; font-weight: 700; font-size: 14px; }
.pb-faq-a-text { flex: 1; font-size: 14px; color: #444; line-height: 1.65; }
@keyframes pbFaqSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================
 *  상단 바 저장/히스토리/커스텀코드 버튼
 * ================================================================ */
.pb-topbar-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; font-size: 13px; border: 1px solid #c8d0db; border-radius: 4px; background: #fff; color: #333; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pb-topbar-btn:hover { background: #eef1f7; border-color: #aab; }
.pb-save-btn { background: #4e73df; color: #fff; border-color: #4e73df; font-weight: 600; }
.pb-save-btn:hover { background: #3a5cc5; }
.pb-save-btn.pb-save-dirty { background: #e74a3b; border-color: #e74a3b; color: #fff; animation: pbSavePulse 1.5s infinite; }
.pb-save-btn.pb-save-dirty:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
@keyframes pbSavePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(231,74,59,0.5); } 50% { box-shadow: 0 0 0 6px rgba(231,74,59,0); } }
.pb-save-status { font-size: 12px; color: #6c757d; white-space: nowrap; }
.pb-responsive-hint { font-size: 11px; color: #e67e22; white-space: nowrap; margin-left: 4px; }

/* ================================================================
 *  히스토리 패널 (풀스크린 오버레이)
 * ================================================================ */
.pb-history-overlay { display: none; position: fixed; inset: 0; z-index: 9999; flex-direction: column; background: #f4f5f7; min-height: 0; height: 100vh; height: 100dvh; box-sizing: border-box; }
.pb-history-overlay:not([hidden]) { display: flex; }
.pb-history-topbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: #2c3e50; color: #fff; }
.pb-history-title { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.pb-history-close { background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 5px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.pb-history-close:hover { background: rgba(255,255,255,0.1); }
.pb-history-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.pb-history-sidebar { width: 320px; min-width: 260px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #ddd; min-height: 0; }
.pb-history-expert-notice { margin: 8px 8px 0; padding: 8px 10px; border: 1px solid #ffe08a; background: #fff8e6; color: #7a5b00; border-radius: 6px; font-size: 12px; line-height: 1.4; display: flex; align-items: flex-start; gap: 6px; }
.pb-history-expert-notice__text { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: keep-all; }
.pb-history-list { flex: 1; overflow-y: auto; padding: 8px; }
.pb-history-item { padding: 12px 14px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: background 0.12s, border-color 0.12s; margin-bottom: 4px; }
.pb-history-item:hover { background: #f0f4ff; border-color: #d0d8e8; }
.pb-history-item.is-selected { background: #e8f0ff; border-color: #4e73df; }
.pb-history-date { display: block; font-size: 13px; font-weight: 600; color: #222; }
.pb-history-memo { display: block; font-size: 12px; color: #777; margin-top: 2px; cursor: pointer; border-bottom: 1px dashed transparent; transition: color 0.15s, border-color 0.15s; }
.pb-history-memo:hover { color: #4e73df; border-bottom-color: #4e73df; }
.pb-history-actions { padding: 12px; border-top: 1px solid #eee; }
.pb-history-actions .pb-btn-primary { width: 100%; }
.pb-history-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #eceff4; }
.pb-history-preview-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #d8dee8; }
.pb-history-tool-btn { border: 1px solid #cfd7e6; background: #fff; color: #2f3b55; border-radius: 4px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.pb-history-tool-btn:hover:not(:disabled) { background: #f0f5ff; border-color: #9fb3de; }
.pb-history-tool-btn:disabled { opacity: 0.45; cursor: default; }
.pb-history-tool-btn.is-active { background: #e8f0ff; border-color: #4e73df; color: #2a4ab8; font-weight: 600; }
.pb-history-tool-link { font-size: 12px; color: #4e73df; text-decoration: none; border-bottom: 1px dashed transparent; }
.pb-history-tool-link:hover { border-bottom-color: #4e73df; }
.pb-history-frame { flex: 1; min-height: 0; width: 100%; border: none; background: #fff; }
.pb-history-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px 4px; margin-top: 6px; border-top: 1px solid #eef1f6; }
.pb-history-page-info { font-size: 12px; color: #666; white-space: nowrap; }
.pb-history-page-btn { border: 1px solid #cfd7e6; background: #fff; color: #2f3b55; border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.pb-history-page-btn:hover:not(:disabled) { background: #f0f5ff; border-color: #9fb3de; }
.pb-history-page-btn:disabled { opacity: 0.45; cursor: default; }

/* 전문가 모드 안내 */
.pb-expert-notice { margin: 8px 14px 0; padding: 8px 10px; border: 1px solid #ffe08a; background: #fff8e6; color: #7a5b00; border-radius: 6px; font-size: 12px; line-height: 1.45; display: flex; gap: 6px; align-items: flex-start; }
.pb-expert-notice__text { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: keep-all; }
.pb-expert-notice i { margin-top: 2px; }

/* ================================================================
 *  커스텀 CSS/JS 모달
 * ================================================================ */
.pb-customcode-overlay { display: none; position: fixed; inset: 0; z-index: 9998; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); }
.pb-customcode-overlay:not([hidden]) { display: flex; }
.pb-customcode-dialog { width: 90%; max-width: 820px; max-height: 85vh; display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.25); overflow: hidden; }
.pb-customcode-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: #2c3e50; color: #fff; font-weight: 600; font-size: 15px; }
.pb-customcode-head button { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 4px; }
.pb-customcode-tabs { display: flex; gap: 0; border-bottom: 2px solid #e8e8e8; }
.pb-code-tab { flex: 1; padding: 10px 0; text-align: center; background: #f8f8f8; border: none; font-size: 14px; font-weight: 500; color: #555; cursor: pointer; transition: background 0.15s, color 0.15s; }
.pb-code-tab.is-active { background: #fff; color: #4e73df; border-bottom: 2px solid #4e73df; margin-bottom: -2px; }
.pb-customcode-body { flex: 1; overflow: auto; }
.pb-code-pane { padding: 0; }
.pb-code-editor { width: 100%; min-height: 350px; box-sizing: border-box; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.55; padding: 16px; border: none; resize: vertical; outline: none; background: #1e1e1e; color: #d4d4d4; }
.pb-customcode-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid #eee; gap: 12px; }
.pb-customcode-warn { font-size: 12px; color: #e67e22; }

/* 히스토리 삭제 버튼 */
.pb-history-item { display: flex; align-items: center; gap: 8px; }
.pb-history-item-info { flex: 1; min-width: 0; }
.pb-history-del { flex-shrink: 0; width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #999; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.pb-history-del:hover { background: #e74a3b; color: #fff; border-color: #e74a3b; }

/* ================================================================
 * 히스토리 미리보기 구역 가이드 (.pb-preview-region-guide)
 * ================================================================ */
/* 구역 가이드: outline + 절대위치 라벨만 사용 (padding으로 칸을 밀지 않음 → 미리보기 레이아웃·폭 유지) */
.pb-preview-region-guide.pb-page { box-sizing: border-box; outline: 2px dashed rgba(52, 73, 94, 0.35); outline-offset: -2px; }
.pb-preview-region-guide .pb-row { position: relative; box-sizing: border-box; outline: 2px dashed rgba(52, 152, 219, 0.5); outline-offset: -2px; }
.pb-preview-region-guide .pb-row > .pb-row-inner { box-sizing: border-box; }
.pb-preview-region-guide .pb-row::before { content: '행 #' attr(data-row-id); position: absolute; top: 6px; left: 8px; z-index: 12; font-size: 11px; font-weight: 700; color: #1b5276; background: rgba(255, 255, 255, 0.94); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(52, 152, 219, 0.45); pointer-events: none; max-width: min(280px, 92%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.pb-preview-region-guide .pb-row-group { position: relative; box-sizing: border-box; outline: 2px dashed rgba(230, 126, 34, 0.55); outline-offset: -2px; }
.pb-preview-region-guide .pb-row-group-inner { box-sizing: border-box; }
.pb-preview-region-guide .pb-row-group::before { content: '그룹 ' attr(data-group-id); position: absolute; top: 6px; left: 8px; z-index: 12; font-size: 11px; font-weight: 700; color: #92400e; background: rgba(255, 248, 235, 0.96); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(230, 126, 34, 0.45); pointer-events: none; max-width: min(320px, 94%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
/* 컬럼에 position:relative 를 넣지 않음 — 본문 HTML 의 position:absolute 가 .pb-row 기준을 유지해야 함(가이드 ON 시 폭이 줄어드는 현상 방지) */
.pb-preview-region-guide .pb-row-inner > .pb-col,
.pb-preview-region-guide .pb-row-group-inner > .pb-col { box-sizing: border-box; outline: 1px dashed rgba(142, 68, 173, 0.55); outline-offset: -1px; }
.pb-preview-region-guide .pb-row-inner > .pb-col > .pb-col-content,
.pb-preview-region-guide .pb-row-group-inner > .pb-col > .pb-col-content { box-sizing: border-box; }

/* ================================================================
 *  기본 반응형 레이아웃
 * ================================================================ */
@media (max-width: 980px) {
	/* 행 내부를 wrap 허용 */
	.pb-row-inner { flex-wrap: wrap; }
	/* span=12 (풀 화면 컬럼)는 항상 100% 유지 */
	.pb-col[data-span="12"] { flex: 0 0 100% !important; max-width: 100% !important; }
	/* span=7~11 큰 컬럼도 100% 유지 */
	.pb-col[data-span="11"], .pb-col[data-span="10"], .pb-col[data-span="9"], .pb-col[data-span="8"], .pb-col[data-span="7"] { flex: 0 0 100% !important; max-width: 100% !important; }
	/* span=1~6 작은 컬럼은 50% 2열 */
	.pb-col[data-span="6"], .pb-col[data-span="5"], .pb-col[data-span="4"], .pb-col[data-span="3"], .pb-col[data-span="2"], .pb-col[data-span="1"] { flex: 0 0 50% !important; max-width: 50% !important; min-width: 0 !important; }
	/* 리사이저 숨김 */
	.pb-resizer { display: none !important; }
	/* 내부 그리드 레이아웃 (4열→2열) */
	.pb-col-content [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }
	/* 내부 flex 레이아웃 wrap 허용 */
	.pb-col-content [style*="display: flex"], .pb-col-content [style*="display:flex"] { flex-wrap: wrap !important; }
	/* 내부 flex 아이템 최소 너비 기반 2열 */
	.pb-col-content [style*="display: flex"] > *, .pb-col-content [style*="display:flex"] > * { min-width: 45% !important; flex-shrink: 0 !important; }
	/* 이미지 비율 유지 */
	.pb-col-content img { max-width: 100% !important; height: auto !important; }
}
@media (max-width: 600px) {
	/* 모바일: 모든 컬럼 1열 */
	.pb-col { flex: 0 0 100% !important; max-width: 100% !important; }
	/* 내부 그리드 1열 */
	.pb-col-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
	/* 내부 flex 아이템 1열 */
	.pb-col-content [style*="display: flex"] > *, .pb-col-content [style*="display:flex"] > * { min-width: 100% !important; }
	/* 모드바 모바일 대응 */
	.pb-mode-bar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
	.pb-mode-separator { display: none; }
	.pb-bo-doc-bar-inner { gap: 8px 10px; padding: 8px 10px; }
	.pb-bo-doc-brand { padding-right: 0; border-right: 0; }
	.pb-bo-doc-info { flex: 1 1 100%; order: 2; }
	.pb-bo-doc-actions { margin-left: 0; flex: 1 1 100%; order: 3; }
	.pb-bo-doc-bar .bo-ui-mode-toggle-host--inline { order: 4; margin-left: auto; }
}

/* ================================================================
 *  신규 위젯 — 배너(Banner)
 * ================================================================ */
.pb-widget-banner { position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; border-radius: 8px; }
.pb-widget-banner .pb-banner-overlay { position: absolute; inset: 0; pointer-events: none; }
.pb-widget-banner .pb-banner-content { position: relative; z-index: 1; width: 100%; padding: 40px; box-sizing: border-box; }
.pb-widget-banner.pb-banner-align-left   .pb-banner-content { text-align: left; }
.pb-widget-banner.pb-banner-align-center .pb-banner-content { text-align: center; }
.pb-widget-banner.pb-banner-align-right  .pb-banner-content { text-align: right; }
.pb-banner-title { margin: 0 0 14px; font-size: 38px; font-weight: 700; line-height: 1.25; color: inherit; }
.pb-banner-subtitle { margin: 0 0 22px; font-size: 18px; line-height: 1.55; color: inherit; opacity: 0.94; }
.pb-banner-btn { display: inline-block; padding: 12px 32px; background: rgba(255,255,255,0.95); color: #1a2a3a; font-weight: 600; font-size: 16px; border-radius: 4px; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.pb-banner-btn:hover { background: #fff; transform: translateY(-1px); text-decoration: none; }

/* ================================================================
 *  슬라이더 위젯 — 업로드 UI (옵션 모달 내부)
 * ================================================================ */
.pb-slider-uploader { border: 1px solid #d8dee8; border-radius: 6px; padding: 8px; background: #fafbfd; }
.pb-slu-droparea { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 14px; border: 2px dashed #b8c4d4; border-radius: 6px; background: #fff; color: #5a7090; font-size: 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pb-slu-droparea:hover, .pb-slu-droparea.is-drag { border-color: #4e73df; background: #eef3ff; color: #2c4790; }
.pb-slu-droparea i.fas { font-size: 28px; color: #8a9bb0; }
.pb-slu-droparea .pb-slu-droptext { text-align: center; line-height: 1.4; }
.pb-slu-fileinput { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pb-slu-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-slu-empty { padding: 8px 12px; color: #999; font-size: 12px; text-align: center; }
.pb-slu-item { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #e0e6ee; border-radius: 6px; background: #fff; }
.pb-slu-ghost { opacity: 0.5; background: #eef3ff; }
.pb-slu-handle { flex: 0 0 auto; padding: 6px; color: #8a9bb0; cursor: grab; user-select: none; }
.pb-slu-handle:active { cursor: grabbing; color: #4e73df; }
.pb-slu-thumb { flex: 0 0 auto; width: 60px; height: 40px; overflow: hidden; border-radius: 4px; background: #eef0f4; }
.pb-slu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-slu-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-slu-fields input { width: 100%; box-sizing: border-box; padding: 4px 8px; border: 1px solid #d8dee8; border-radius: 4px; font-size: 12px; }
.pb-slu-del { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid #e0c0c0; border-radius: 50%; background: #fff; color: #c0392b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; }
.pb-slu-del:hover { background: #c0392b; color: #fff; }
.pb-slu-progress { margin-top: 8px; padding: 6px 10px; background: #fff8e6; border: 1px solid #f0d57a; border-radius: 4px; font-size: 12px; color: #7a5400; }

/* ================================================================
 *  신규 위젯 — 슬라이더(Slider)
 *  (slick-theme.css 미사용 — 필요한 테마 스타일을 직접 정의)
 * ================================================================ */
.pb-widget-slider { padding: 0; }
.pb-slider { position: relative; }
.pb-slider .pb-slide { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; display: block; outline: none; }
.pb-slider .pb-slide-link { position: absolute; inset: 0; z-index: 1; }
.pb-slider .pb-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 24px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0)); font-size: 16px; z-index: 2; pointer-events: none; line-height: 1.4; }

/* slick 화살표 (이전/다음) */
.pb-slider .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background 0.15s, opacity 0.15s; outline: none; }
.pb-slider .slick-arrow:hover { background: rgba(0,0,0,0.7); }
.pb-slider .slick-arrow i { line-height: 1; pointer-events: none; }
.pb-slider .slick-prev { left: 14px; }
.pb-slider .slick-next { right: 14px; }
.pb-slider .slick-arrow.slick-disabled { opacity: 0.35; cursor: default; }
.pb-slider .slick-arrow.slick-hidden { display: none; }

/* slick 페이지네이션 (dots) */
.pb-slider .slick-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex !important; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; z-index: 4; }
.pb-slider .slick-dots li { display: inline-block; margin: 0; padding: 0; }
.pb-slider .slick-dots li button { display: block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.55); color: transparent; font-size: 0; line-height: 0; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.pb-slider .slick-dots li button:hover { background: rgba(255,255,255,0.85); }
.pb-slider .slick-dots li.slick-active button { background: #fff; transform: scale(1.25); }

/* ================================================================
 *  신규 위젯 — 지도(Map)
 * ================================================================ */
.pb-widget-map { background: #f4f5f7; border-radius: 8px; overflow: hidden; }
.pb-widget-map iframe { display: block; }
.pb-widget-map.pb-widget-map--roughmap { background: transparent; }
.pb-widget-map--roughmap .pb-map-roughmap-frame { box-sizing: border-box; }

/* ================================================================
 *  신규 위젯 모바일 대응
 * ================================================================ */
@media (max-width: 768px) {
	.pb-banner-title { font-size: 28px; }
	.pb-banner-subtitle { font-size: 15px; }
	.pb-widget-banner .pb-banner-content { padding: 28px 22px; }
}

/* ================================================================
 * Row Group — CSS Grid 행 그룹 레이아웃
 * row_group 이 동일한 연속 행들이 CSS Grid 컨테이너로 묶임
 * ================================================================ */

/* 공개 모드: 행 그룹 외곽 래퍼 */
.pb-row-group { position: relative; box-sizing: border-box; width: 100%; }
.pb-row-group.pb-layout-full { margin-left: 0; margin-right: 0; }

/* 공개 모드: CSS Grid 내부 컨테이너 */
.pb-row-group-inner {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-flow: row dense;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	align-items: stretch;
}
.pb-row-group-inner.pb-container { max-width: 1140px; padding-left: 15px; padding-right: 15px; }

/* 공개 모드: 그룹 내 컬럼 (grid-column/grid-row는 인라인 style로 지정) */
.pb-row-group-inner > .pb-col { box-sizing: border-box; padding: 0; min-width: 0; }
.pb-row-group-inner > .pb-col .pb-col-content::after { content: ""; display: table; clear: both; }

/* 반응형: 768px 이하에서 grid 해제 → flex 1열 + mobile_order 적용 */
@media (max-width: 768px) {
	.pb-row-group-inner {
		display: flex;
		flex-direction: column;
		grid-template-columns: unset;
	}
	.pb-row-group-inner > .pb-col {
		width: 100%;
		grid-column: unset !important;
		grid-row: unset !important;
		order: var(--pb-mob-order, 0);
	}
}

/* ================================================================
 * 빌더 모드: 그룹 행 뱃지 표시
 * ================================================================ */

/* 행 그룹이 설정된 행 — 왼쪽 테두리로 강조 */
.pb-row--builder[data-row-group]:not([data-row-group=""]),
body.pb-builder-active .pb-row[data-row-group]:not([data-row-group=""]) {
	border-color: #e67e22 !important;
	border-left-width: 4px !important;
}
.pb-row--builder[data-row-group]:not([data-row-group=""]):hover,
body.pb-builder-active .pb-row[data-row-group]:not([data-row-group=""]):hover {
	border-color: #d35400 !important;
	box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}

/* 인라인 그룹 뱃지 (HTML에서 .pb-row-group-badge 요소로 직접 출력) */
.pb-row-group-badge {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11px; font-weight: 600; color: #e67e22;
	background: #fff8f0; border: 1px solid #f39c12;
	border-radius: 12px; padding: 2px 8px;
	margin-left: 6px; vertical-align: middle; line-height: 1;
}
.pb-row-group-badge i { font-size: 10px; }
/* 그룹 행의 topbar 색상 강조 */
.pb-row--builder[data-row-group]:not([data-row-group=""]) > .pb-row-topbar,
body.pb-builder-active .pb-row[data-row-group]:not([data-row-group=""]) > .pb-row-topbar {
	background: #fff3e0;
	border-bottom-color: #f39c12;
}

/* ================================================================
 * Ghost 셀 — 위 행 rowspan 컬럼이 아래 행에서 차지하는 영역 (빌더 전용)
 * ================================================================ */
.pb-col-ghost {
	display: flex;
	align-items: stretch;
	flex-grow: 0;
	flex-shrink: 0;
	/* flex-basis / max-width 는 PHP inline style 에서 span/12*100% 로 고정 지정 */
	pointer-events: none;
	user-select: none;
	box-sizing: border-box;
}
.pb-col-ghost-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: repeating-linear-gradient(
		135deg,
		#dde3ea 0px, #dde3ea 5px,
		#eaeff4 5px, #eaeff4 10px
	);
	border: 2px dashed #a0b0c0;
	border-radius: 3px;
	color: #7a8a99;
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
	min-height: 60px;
	padding: 8px 4px;
}
.pb-col-ghost-inner .fas { font-size: 14px; color: #99aabb; }

/* ================================================================
 * 행 그룹 설정 UI (행 설정 모달 내부)
 * ================================================================ */
.pb-rowgroup-section { border-top: 1px solid #e9ecef; padding-top: 14px; margin-top: 6px; }
.pb-rowgroup-label { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 10px; }
.pb-badge-tip { font-size: 11px; font-weight: 500; background: #e8f4fd; color: #2980b9; border-radius: 20px; padding: 2px 8px; }

/* 동작 설명 박스 */
.pb-rowgroup-howto { display: flex; gap: 14px; align-items: flex-start; background: #f8faff; border: 1px solid #d6e4f0; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.pb-rowgroup-howto-list { margin: 0; padding-left: 16px; font-size: 12px; color: #555; line-height: 1.7; }
.pb-rowgroup-howto-list strong { color: #2c3e50; }

/* 다이어그램 미니 */
.pb-rowgroup-howto-diagram { flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.pb-rg-demo-row { display: flex; gap: 3px; }
.pb-rg-demo-col { background: #dce8f7; border: 1px solid #90b8e0; border-radius: 3px; font-size: 10px; color: #1a5276; text-align: center; padding: 2px 5px; min-width: 38px; line-height: 1.3; }
.pb-rg-demo-col--span2 { background: #aed6f1; border-color: #2980b9; font-weight: 700; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* 기존 그룹 칩 */
.pb-rowgroup-existing { margin-bottom: 10px; }
.pb-rowgroup-existing-label { font-size: 11px; color: #888; margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.pb-rowgroup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-rowgroup-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 1.5px solid #adb5bd; background: #f8f9fa; color: #495057; cursor: pointer; transition: all 0.15s; }
.pb-rowgroup-chip:hover { border-color: #e67e22; background: #fff8f0; color: #e67e22; }
.pb-rowgroup-chip.is-active { border-color: #e67e22; background: #fff3e0; color: #c0392b; font-weight: 700; }
.pb-chip-count { font-size: 10px; color: #aaa; }
.pb-rowgroup-chip.is-active .pb-chip-count { color: #c0392b; }

/* 입력 + 버튼 행 */
.pb-rowgroup-input-row { display: flex; gap: 6px; align-items: center; }
.pb-rowgroup-input-row .form-control { flex: 1; }
/* 자동 추천된 그룹 ID 입력 필드 — 연한 배경으로 구분 */
.pb-rowgroup-input-row .form-control.pb-rowgroup-suggested { background: #fffbeb; border-color: #f39c12; color: #856404; }
.pb-rowgroup-new-btn { font-size: 12px; padding: 0 10px; height: 36px; white-space: nowrap; background: #eafaf1; border-color: #27ae60; color: #1e8449; border-radius: 6px; border-width: 1px; border-style: solid; cursor: pointer; }
.pb-rowgroup-new-btn:hover { background: #d5f5e3; }
.pb-rowgroup-clear-btn { font-size: 12px; padding: 0 10px; height: 36px; white-space: nowrap; background: #fdecea; border-color: #c0392b; color: #922b21; border-radius: 6px; border-width: 1px; border-style: solid; cursor: pointer; }
.pb-rowgroup-clear-btn:hover { background: #fadbd8; }

/* 상태 메시지 */
.pb-rowgroup-status { font-size: 12px; margin-top: 7px; min-height: 20px; }
.pb-rgs-none { color: #888; }
.pb-rgs-new { color: #27ae60; }
.pb-rgs-join { color: #2980b9; }

/* ================================================================
 * Continuation Row — 그룹 내 2번째 이후 행
 * ================================================================ */

/* continuation 행: 위 행과 시각적으로 이어지게 */
body.pb-builder-active .pb-row--continuation {
    margin-top: 0 !important;
    margin-bottom: 0;
    border-top: none !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* continuation 앞 행(group-first)은 하단 radius/margin 제거 */
body.pb-builder-active .pb-row--group-first {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px dashed #b8cce4 !important;
}
/* :has() 지원 환경에서는 더 정확하게 처리 */
body.pb-builder-active .pb-row--builder:has(+ .pb-row--continuation) {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px dashed #b8cce4 !important;
}

/* 이어지는 행 topbar — 슬림 */
body.pb-builder-active .pb-row--continuation .pb-row-topbar {
    background: #f5f0e8;
    border-bottom-color: #e0c890;
    min-height: 26px;
    padding: 2px 8px;
}

/* 이음새 뱃지 */
.pb-row-continuation-badge {
    font-size: 11px;
    color: #b07d1a;
    font-style: italic;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ================================================================
 * Group Builder WYSIWYG — CSS Grid 빌더 컨테이너
 * ================================================================ */

/* 그룹 전체 외부 래퍼 */
.pb-row-group-builder {
    display: block;
    margin-bottom: 0;
    margin-top: 0;
    border: 2px solid #e8a42a;
    border-radius: 4px;
    overflow: visible;
    position: relative;
}
.pb-row-group-builder.pb-row-group--translate-selected { box-shadow: 0 0 0 2px #f97316; border-color: #f97316; }
.pb-row.pb-row-flex-group--translate-selected { outline: 2px solid #f97316; outline-offset: 2px; }

/* CSS Grid 내부 컨테이너 (12칸) */
.pb-row-group-builder-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: stretch;
    position: relative;
    min-height: 60px;
}
.pb-row-group-builder-inner.pb-container { max-width: 1140px; padding-left: 15px; padding-right: 15px; }

/* 행 topbar — grid 안에서 전체 12칸 차지 */
.pb-rowbar-builder {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: #fff3e0;
    border-bottom: 1px solid #e8a42a;
    position: relative;
    z-index: 10;
    min-height: 0;
}

/* 그룹 빌더 툴바: 순서 이동 핸들 — 설정/삭제(icon-only 28px)과 동일 높이, .pb-handle 미사용으로 레일 min-height 2.5rem 방지 */
body.pb-builder-active .pb-rowbar-builder--first .pb-row-handle--groupbar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	cursor: grab;
	user-select: none;
	color: #5a6c7d;
	border: 1px solid transparent;
	border-radius: 4px;
	flex-shrink: 0;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}
body.pb-builder-active .pb-rowbar-builder--first .pb-row-handle--groupbar:hover { color: #4e73df; background: rgba(78, 115, 223, 0.08); border-color: rgba(78, 115, 223, 0.2); }
body.pb-builder-active .pb-rowbar-builder--first .pb-row-handle--groupbar:active { cursor: grabbing; color: #3a5fc8; background: rgba(78, 115, 223, 0.15); }
body.pb-builder-active .pb-rowbar-builder--first .pb-row-handle--groupbar .fas { font-size: 0.85rem; pointer-events: none; }

.pb-rowbar-builder .pb-row-group-badge {
	font-size: 11px;
	padding: 2px 8px;
	max-width: 14rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 이어지는 행 — 그룹 구분선 (번역 선택은 첫 행 툴바에서 그룹 전체 적용) */
.pb-rowbar-builder--divider {
    display: block;
    min-height: 0;
    height: 0;
    background: transparent;
    border-top: 2px solid #e0c890;
    grid-column: 1 / -1;
    padding: 0;
    margin: 0;
}

/* 그룹 빌더 내 컬럼 */
.pb-row-group-builder-inner .pb-col {
    min-height: 80px;
    border: 1px dashed #b8cce4;
    background: #fafcff;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* 반응형 미디어 쿼리의 .pb-col flex/max-width !important 차단 */
    max-width: none !important;
    flex: none !important;
    width: auto !important;
}

/* 그룹 빌더 내 컬럼 — rowspan > 1 이면 위에 표시 */
.pb-row-group-builder-inner .pb-col[data-row-span="2"],
.pb-row-group-builder-inner .pb-col[data-row-span="3"],
.pb-row-group-builder-inner .pb-col[data-row-span="4"] {
    border-color: #2980b9;
    background: #eaf3fb;
    z-index: 2;
}

/* ================================================================
 * 새 행 추가 wrap + 레이아웃 템플릿 버튼
 * ================================================================ */

.pb-add-row-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.pb-add-row-wrap .pb-add-row-strip {
    flex: 1;
}

/* 레이아웃 템플릿 버튼 */
.pb-layout-preset-btn {
    flex-shrink: 0;
    background: #fff;
    border: 1px dashed #b8cce4;
    border-radius: 3px;
    color: #5a6a8a;
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.pb-layout-preset-btn:hover {
    background: #eef4fb;
    border-color: #5a8fd4;
    color: #2060c0;
}

/* 프리셋 패널 */
#pbPresetPanel {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #c0cfe0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 8px;
    min-width: 520px;
    max-width: 640px;
    max-height: 72vh;
    overflow-y: auto;
    display: none;
}
#pbPresetPanel.is-open { display: block; }
.pb-preset-head { font-size: 12px; font-weight: 600; color: #334; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #e0e8f0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pb-preset-count { font-size: 10px; font-weight: 500; color: #57708e; }
.pb-preset-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pb-preset-cat { padding: 4px 8px; font-size: 10px; border: 1px solid #d0ddef; border-radius: 4px; background: #f8faff; color: #334; cursor: pointer; }
.pb-preset-cat.is-active { background: #dbeafe; border-color: #2563eb; color: #1e40af; font-weight: 600; }
.pb-preset-grid-wrap { max-height: 52vh; overflow-y: auto; }
.pb-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pb-preset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px;
    border: 1px solid #d0ddef;
    border-radius: 5px;
    cursor: pointer;
    background: #f8faff;
    transition: background 0.15s, border-color 0.15s;
    font-size: 11px;
    color: #334;
    text-align: center;
}
.pb-preset-item:hover { background: #e4eff9; border-color: #5a8fd4; }
.pb-preset-item span { display: block; font-weight: 600; line-height: 1.25; }
.pb-preset-item em { display: block; font-style: normal; font-size: 10px; color: #57708e; line-height: 1.2; }
.pb-preset-diagram {
    display: flex;
    gap: 2px;
    width: 100%;
    height: 36px;
}
.pb-pd-col {
    flex: 1;
    background: #d6e8f5;
    border: 1px solid #8ab8d8;
    border-radius: 2px;
}
.pb-pd-col--tall {
    grid-row: span 2;
    background: #aed1ee;
    border-color: #3a80b8;
}
.pb-pd-row-stack { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.pb-pd-row-stack .pb-pd-col { flex: 1; }

/* Grid 빌더 리사이저 — 자식 스택이 있으면 ::after 생략 */
.pb-resizer--grid { width: 0; overflow: visible; cursor: default; position: relative; display: flex; align-items: stretch; justify-content: center; flex: none; min-width: 0; max-width: 0; z-index: 3050; }
.pb-resizer--grid:not(:empty)::after { content: none; display: none !important; }
.pb-resizer--grid:empty::after { content: '\21D4'; position: absolute; left: -5px; width: 10px; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px dashed #b8cce4; border-radius: 3px; font-size: 9px; color: #6c8ebf; cursor: col-resize; }
.pb-resizer--grid:empty:hover::after { background: rgba(232, 240, 254, 0.8); border-color: #2563eb; color: #1d4ed8; }
.pb-resizer--grid .pb-resizer-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	left: -10px;
	top: 0;
	bottom: 0;
	width: 22px;
	padding: 3px 0;
	box-sizing: border-box;
	pointer-events: none;
}
body.pb-builder-active .pb-resizer--grid .pb-resizer-stack {
	justify-content: center;
}
.pb-resizer--grid .pb-resizer-grip {
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #8a9bb0;
	padding: 2px 0;
	flex-shrink: 0;
}
.pb-resizer--grid .pb-resizer-grip .fas { font-size: 0.72rem; }
.pb-resizer--grid .pb-resizer-track {
	pointer-events: auto;
	position: relative;
	z-index: 0;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	min-height: 40px;
	margin: 0;
	font-size: 9px;
	color: #6c8ebf;
	cursor: col-resize;
	border: 1px dashed #b8cce4;
	border-radius: 3px;
	background: transparent;
	box-sizing: border-box;
	align-self: center;
}
.pb-resizer--grid .pb-resizer-track:hover { background: rgba(232, 240, 254, 0.8); border-color: #2563eb; color: #1d4ed8; }
.pb-resizer--grid .pb-col-del--boundary { pointer-events: auto; flex-shrink: 0; position: relative; z-index: 3; }

/* 본문에 빌더 오염이 감지된 경우 빌더 전용 안내 */
.pb-danger-note { margin: 8px 0; padding: 10px 12px; background: #fff4f4; border: 1px solid #e0a0a0; border-radius: 6px; color: #7a1f1f; font-size: 13px; line-height: 1.45; }

/* ── 좌측 콘텐츠 레일 (미디어·블록) ── */
html:has(body.pb-builder-active) {
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
body.pb-builder-active {
	min-height: 0;
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
@supports (height: 100svh) {
	body.pb-builder-active {
		height: 100svh;
		max-height: 100svh;
	}
}
body.pb-builder-active > .pb-editor-header,
body.pb-builder-active .pb-editor-header > .pb-bo-doc-bar,
body.pb-builder-active .pb-editor-header > .pb-mode-bar {
	flex-shrink: 0;
}
@supports (height: 100dvh) {
	body.pb-builder-active {
		height: 100dvh;
		max-height: 100dvh;
	}
}
#pbBuilderWorkspace.pb-builder-workspace {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border-top: 1px solid #cfd8e3;
	--pb-rail-pct: 25%;
}
.pb-builder-workspace.pb-workspace-expert #pbAssetRail { display: none !important; }
.pb-builder-main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	background: #f5f7fb;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 40px;
	box-sizing: border-box;
}
.pb-builder-main .pb-normal-wrap {
	flex: 0 0 auto;
	align-self: stretch;
	width: 100%;
	min-height: min-content;
}
.pb-builder-main .pb-expert-wrap { flex: 1; min-height: 0; }
/* 전문가 모드: 상단 헤더·안내·하단 버튼 높이는 유지, CodeMirror만 남은 세로 공간 채움 */
.pb-builder-workspace.pb-workspace-expert .pb-builder-main .pb-expert-wrap {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.pb-builder-workspace.pb-workspace-expert .pb-expert-wrap .pb-expert-header,
.pb-builder-workspace.pb-workspace-expert .pb-expert-wrap .pb-expert-notice,
.pb-builder-workspace.pb-workspace-expert .pb-expert-wrap .pb-expert-actions {
	flex-shrink: 0;
}
.pb-builder-workspace.pb-workspace-expert .pb-expert-wrap .pb-expert-cm-host {
	flex: 1 1 auto;
	min-height: 200px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
/* 전문가 모드: JS가 hidden 속성만 줄 때, 저자 스타일(display:block·flex)이 [hidden]을 이겨 일반 캔버스와 에디터가 동시에 보이는 문제 방지 */
.pb-builder-main #pb-normal-wrap[hidden],
.pb-builder-main #pb-expert-wrap[hidden] { display: none !important; }
.pb-asset-rail {
	flex: 0 0 var(--pb-rail-pct, 24%);
	width: var(--pb-rail-pct, 24%);
	min-width: 240px;
	max-width: 45%;
	min-height: 0;
	background: #eef2f7;
	border-right: 1px solid #cfd8e3;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	position: relative;
	z-index: 20;
	box-sizing: border-box;
}
.pb-asset-rail.is-collapsed { flex: 0 0 52px; width: 52px; min-width: 52px; max-width: 52px; }
.pb-rail-splitter { flex: 0 0 6px; cursor: col-resize; background: #dce4ee; border-left: 1px solid #cfd8e3; border-right: 1px solid #cfd8e3; user-select: none; touch-action: none; z-index: 21; }
.pb-rail-splitter:hover,.pb-rail-splitter.is-dragging { background: #4e73df; }
.pb-asset-rail.is-collapsed + .pb-rail-splitter { display: none; }
.pb-builder-workspace.pb-workspace-expert .pb-rail-splitter { display: none !important; }
body.pb-rail-resizing { cursor: col-resize !important; user-select: none !important; }
.pb-asset-rail-inner {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.pb-asset-rail-collapsed-strip { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: #e4eaf3; border-right: 1px solid #cfd8e3; box-sizing: border-box; }
.pb-rail-icon-btn { width: 40px; height: 40px; border: 1px solid #b8c8dc; border-radius: 8px; background: #fff; color: #345; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pb-rail-icon-btn .fas,.pb-rail-icon-btn .far { pointer-events: none; }
.pb-rail-icon-btn:hover { background: #f0f6ff; border-color: #4e73df; color: #224abe; }
.pb-asset-rail-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid #dce4ee; background: #e8eef6; }
.pb-asset-rail-title { font-weight: 700; font-size: 14px; color: #223; }
.pb-rail-collapse-btn { width: 32px; height: 32px; border: 1px solid #c5d3e6; border-radius: 6px; background: #fff; color: #456; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.pb-rail-collapse-btn:hover { border-color: #4e73df; color: #224abe; }
.pb-asset-rail-tabs { flex: none; display: flex; flex-direction: row; flex-wrap: nowrap; border-bottom: 2px solid #cfd8e3; background: #eef2f7; }
.pb-rail-tab { flex: 1 1 0; min-width: 0; margin: 0; padding: 8px 3px; border: none; background: transparent; font-size: 11px; font-weight: 600; color: #6b7a90; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; text-align: center; }
.pb-rail-tab--ai { flex: 0.55 1 0; max-width: 2.75rem; padding: 8px 2px; font-size: 10px; }
.pb-rail-tab--media { flex: 0.85 1 0; min-width: 2.5rem; padding: 8px 3px; }
.pb-rail-tab--program { flex: 0.85 1 0; min-width: 2.5rem; padding: 8px 3px; }
.pb-rail-tab--motion { flex: 0.85 1 0; min-width: 2.5rem; padding: 8px 3px; }
.pb-rail-tab:hover { color: #334; background: rgba(255,255,255,0.35); }
.pb-rail-tab.is-active { color: #1a3a6e; border-bottom-color: #4e73df; background: rgba(255,255,255,0.5); }
.pb-rail-tab--ai.is-active { color: #0d4a8f; border-bottom-color: #2563eb; font-weight: 700; }
.pb-rail-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
/* 저작자 스타일의 display:flex 가 [hidden] 기본 숨김을 덮어쓰는 경우 방지 — 탭별로 패널 하나만 표시 */
.pb-rail-panel[hidden] { display: none !important; }
.pb-rail-panel-hint { margin: 0; font-size: 11px; color: #5a6b82; line-height: 1.45; }
.pb-rail-toolbar-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pb-rail-toolbar-line--category,
.pb-rail-toolbar-line--search { align-items: stretch; }
.pb-rail-select--full { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.pb-rail-search--full { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.pb-rail-select { flex: 1; min-width: 90px; padding: 6px 8px; border: 1px solid #c5d3e6; border-radius: 6px; font-size: 12px; background: #fff; color: #223; box-sizing: border-box; }
.pb-rail-search { flex: 2; min-width: 100px; padding: 6px 8px; border: 1px solid #c5d3e6; border-radius: 6px; font-size: 12px; box-sizing: border-box; }
.pb-rail-toolbar-line--upload { align-items: center; }
.pb-rail-upload-btn { font-size: 12px; padding: 6px 12px; }
.pb-asset-upload-progress { flex: none; width: 100%; padding: 8px 4px 6px; margin-top: 2px; box-sizing: border-box; border: 1px solid #c5d3e6; border-radius: 8px; background: #fff; display: none !important; }
.pb-asset-upload-progress.is-active { display: flex !important; flex-direction: column; gap: 8px; }
.pb-asset-upload-progress-track { height: 10px; border-radius: 5px; background: #e2e8f0; overflow: hidden; margin-bottom: 0; }
.pb-asset-upload-progress-fill { height: 100%; width: 0%; min-width: 0; border-radius: 5px; background: linear-gradient(90deg, #4e73df, #224abe); transition: width 0.15s ease-out; box-sizing: border-box; }
.pb-asset-upload-progress-text { display: block; font-size: 12px; font-weight: 600; color: #1a3a6e; line-height: 1.4; }
.pb-rail-empty { margin: 0; font-size: 12px; color: #7a8699; text-align: center; padding: 16px 8px; }
.pb-rail-toolbar-line--asset-prefs { align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; }
.pb-rail-inline-label { font-size: 11px; color: #5a6b82; white-space: nowrap; flex: none; }
.pb-rail-select--prefs { flex: 0 1 auto; min-width: 72px; max-width: 140px; }
.pb-rail-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pb-asset-pagination { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 4px 4px; border-top: 1px solid #e2e8f0; margin-top: 4px; }
.pb-asset-pagination-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pb-asset-pagination-meta { text-align: center; }
.pb-asset-page-jump { margin: 0; padding: 4px 8px; font-size: 12px; border: 1px solid #c5d3e6; border-radius: 6px; background: #fff; color: #223; min-width: 88px; max-width: 160px; box-sizing: border-box; }
.pb-asset-page-btn { margin: 0; padding: 5px 10px; font-size: 12px; border: 1px solid #c5d3e6; border-radius: 6px; background: #fff; color: #223; cursor: pointer; }
.pb-asset-page-btn:hover:not(:disabled) { border-color: #4e73df; color: #224abe; background: #f0f6ff; }
.pb-asset-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#pbAssetPageInfo { font-size: 11px; color: #5a6b82; display: inline-block; max-width: 100%; }
.pb-asset-grid { display: grid; box-sizing: border-box; }
.pb-asset-grid--xs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pb-asset-grid--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pb-asset-grid--md { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pb-asset-grid--lg { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pb-asset-grid--xs .pb-asset-card-thumb-wrap { aspect-ratio: 1 / 1; min-height: 36px; }
.pb-asset-grid--xs .pb-asset-card-title { font-size: 9px; padding: 3px 4px; line-height: 1.2; }
.pb-asset-grid--sm .pb-asset-card-thumb-wrap { aspect-ratio: 1 / 1; min-height: 40px; }
.pb-asset-grid--lg .pb-asset-card-thumb-wrap { aspect-ratio: 1 / 1; min-height: 80px; }
.pb-asset-card-thumb--contain { object-fit: contain; padding: 4px; box-sizing: border-box; }
.pb-asset-grid--lg .pb-asset-card-title { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; max-height: 2.7em; word-break: break-word; }
.pb-asset-card { border: 1px solid #c5d3e6; border-radius: 8px; background: #fff; overflow: hidden; cursor: grab; display: flex; flex-direction: column; transition: box-shadow 0.15s, border-color 0.15s; text-align: left; padding: 0; margin: 0; font: inherit; color: inherit; }
.pb-asset-card:hover { border-color: #4e73df; box-shadow: 0 2px 10px rgba(78,115,223,0.15); }
.pb-asset-card.is-dragging { opacity: 0.55; cursor: grabbing; }
.pb-asset-card-thumb-wrap { aspect-ratio: 4/3; background: #f0f2f5; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.pb-asset-card-del { position: absolute; top: 6px; right: 6px; z-index: 3; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); background: rgba(255,255,255,0.95); color: #b71c1c; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.12); flex-shrink: 0; }
.pb-asset-card-del:hover { background: #e53935; color: #fff; border-color: #c62828; }
.pb-asset-card-del-x { font-weight: 700; display: block; margin-top: -1px; }
.pb-asset-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-asset-card-title { font-size: 11px; padding: 6px 8px; color: #334; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-rail-manage-link { display: inline-block; font-size: 12px; color: #4e73df; text-decoration: none; padding: 4px 0; }
.pb-rail-manage-link:hover { text-decoration: underline; color: #2e59d9; }
.pb-asset-card--video .pb-asset-card-thumb-wrap { background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%); }
.pb-asset-card-video-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,0.92); color: #1a237e; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.pb-asset-card-thumb--video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #000; }
.pb-asset-card--video .pb-asset-card-thumb-wrap:has(.pb-asset-card-thumb--video) { background: #111; }
.pb-asset-card-play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.pb-asset-card-play-badge::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent rgba(255,255,255,0.92); margin-left: 4px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }
.pb-asset-card--pdf .pb-asset-card-thumb-wrap { background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%); position: relative; }
.pb-asset-card-pdf-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #c62828; z-index: 1; pointer-events: none; }
.pb-asset-card--pdf.is-pdf-rendered .pb-asset-card-pdf-icon { opacity: 0.15; }
.pb-asset-card-thumb--pdf { position: relative; z-index: 2; width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
.pb-asset-card-pdf-badge { position: absolute; right: 4px; bottom: 4px; z-index: 3; font-size: 9px; font-weight: 700; color: #fff; background: rgba(198,40,40,0.88); padding: 2px 5px; border-radius: 4px; pointer-events: none; }
.pb-widget-pdf-viewer { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pb-pdf-viewer-title { font-size: 15px; font-weight: 700; color: #334; word-break: break-word; }
.pb-pdf-viewer-mount { width: 100%; border: 1px solid #d8dee8; border-radius: 8px; overflow: hidden; background: #f8fafd; }
.pb-pdf-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #eef2f8; border-bottom: 1px solid #d8dee8; flex-wrap: wrap; }
.pb-pdf-viewer-toolbar-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-pdf-viewer-btn { min-width: 36px; height: 32px; padding: 0 10px; border: 1px solid #c5d3e6; border-radius: 6px; background: #fff; color: #334; cursor: pointer; font-size: 18px; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.pb-pdf-viewer-btn--text { font-size: 12px; min-width: 32px; padding: 0 8px; }
.pb-pdf-viewer-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pb-pdf-viewer-page { font-size: 13px; color: #5a5c69; min-width: 72px; text-align: center; }
.pb-pdf-viewer-zoom { font-size: 12px; color: #5a5c69; min-width: 44px; text-align: center; }
.pb-pdf-viewer-stage { position: relative; display: flex; align-items: flex-start; justify-content: center; overflow: auto; background: #525659; padding: 12px; box-sizing: border-box; }
.pb-pdf-viewer-canvas { display: block; max-width: none; height: auto; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.pb-pdf-viewer-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: rgba(0,0,0,0.35); z-index: 2; pointer-events: none; }
.pb-pdf-viewer-loading.is-active { display: flex; }
.pb-pdf-viewer-loading[hidden] { display: none !important; }
.pb-pdf-viewer-lightbox { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.pb-pdf-viewer-lightbox[hidden] { display: none !important; }
.pb-pdf-viewer-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); }
.pb-pdf-viewer-lightbox-dialog { position: relative; z-index: 1; width: min(1100px,96vw); max-height: 92vh; background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.35); display: flex; flex-direction: column; box-sizing: border-box; }
.pb-pdf-viewer-lightbox-close { position: absolute; top: 8px; right: 10px; z-index: 3; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.pb-pdf-viewer-lightbox-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pb-pdf-viewer-mount--lightbox { border: 0; border-radius: 6px; }
body.pb-pdf-viewer-lightbox-open { overflow: hidden; }
.pb-snippet-grid { display: flex; flex-direction: column; gap: 10px; }
.pb-snippet-card { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid #c5d3e6; border-radius: 8px; background: #fff; cursor: grab; font: inherit; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
body.pb-builder-active .pb-snippet-card[role="button"] { margin: 0; box-sizing: border-box; outline: none; -webkit-user-select: none; user-select: none; }
body.pb-builder-active .pb-snippet-card[role="button"]:focus-visible { outline: 2px solid #4e73df; outline-offset: 2px; }
body.pb-builder-active .pb-snippet-card-preview svg { pointer-events: none; }
body.pb-builder-active .pb-snippet-card-preview .pb-snippet-thumb-svg { pointer-events: none; }
.pb-snippet-card:hover { border-color: #4e73df; box-shadow: 0 2px 10px rgba(78,115,223,0.12); }
.pb-snippet-card.is-dragging { opacity: 0.55; cursor: grabbing; }
.pb-snippet-card-icon { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #e8f0fe; color: #224abe; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pb-snippet-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-snippet-card-title { font-size: 13px; font-weight: 700; color: #223; margin: 0; }
.pb-snippet-card-desc { font-size: 11px; color: #5a6b82; line-height: 1.35; margin: 0; }
.pb-rail-panel--snippets-only { gap: 6px; padding-top: 10px; padding-bottom: 14px; }
.pb-snippet-grid--plain { gap: 6px; }
.pb-snippet-card--plain { flex-direction: column; align-items: stretch; padding: 8px 10px; gap: 0; min-height: 0; }
.pb-snippet-card--plain .pb-snippet-card-title { font-size: 12px; font-weight: 600; line-height: 1.35; white-space: normal; word-break: keep-all; }
.pb-asset-rail.is-collapsed .pb-asset-rail-inner { display: none; }
.pb-asset-rail:not(.is-collapsed) .pb-asset-rail-collapsed-strip { display: none !important; }
.pb-asset-rail.is-collapsed .pb-asset-rail-collapsed-strip { display: flex !important; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; width: 100%; box-sizing: border-box; }
@media (max-width: 1280px) {
.pb-asset-rail:not(.is-collapsed) { min-width: 220px; }
}
.pb-snippet-grid--with-thumb { gap: 8px; }
.pb-snippet-card--thumb { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; gap: 0; border-radius: 8px; }
.pb-snippet-card-preview { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 72px; max-height: 72px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; box-sizing: border-box; }
.pb-snippet-card-preview-img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; display: block; }
.pb-snippet-thumb-svg { display: block; width: 100%; height: 72px; }
.pb-snippet-card-preview-placeholder { display: block; width: 48px; height: 36px; border-radius: 6px; background: repeating-linear-gradient(-45deg, #e2e8f0, #e2e8f0 4px, #f1f5f9 4px, #f1f5f9 8px); }
.pb-snippet-card-meta { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
.pb-snippet-card--thumb .pb-snippet-card-title { font-size: 12px; font-weight: 600; line-height: 1.35; white-space: normal; word-break: keep-all; }
.pb-snippet-card--thumb .pb-snippet-card-desc { font-size: 11px; color: #5a6b82; line-height: 1.35; margin: 0; }
.pb-snippet-grid.pb-asset-grid { display: grid; box-sizing: border-box; flex-direction: unset; align-content: start; }
.pb-asset-grid .pb-snippet-card--thumb { min-width: 0; width: 100%; box-sizing: border-box; }
.pb-snippet-card-preview-img--contain { object-fit: contain; padding: 2px; box-sizing: border-box; }
#pbSnippetPageInfo { font-size: 11px; color: #5a6b82; display: inline-block; max-width: 100%; }
#pbLayoutSamplePageInfo { font-size: 11px; color: #5a6b82; display: inline-block; max-width: 100%; }
.pb-asset-grid--xs .pb-snippet-card-preview { min-height: 52px; max-height: 52px; }
.pb-asset-grid--xs .pb-snippet-card-preview-img { max-height: 52px; }
.pb-asset-grid--xs .pb-snippet-thumb-svg { height: 52px; }
.pb-asset-grid--xs .pb-snippet-card-meta { padding: 4px 6px 6px; gap: 2px; }
.pb-asset-grid--xs .pb-snippet-card--thumb .pb-snippet-card-title { font-size: 10px; }
.pb-asset-grid--xs .pb-snippet-card--thumb .pb-snippet-card-desc { font-size: 9px; line-height: 1.25; }
.pb-asset-grid--sm .pb-snippet-card-preview { min-height: 62px; max-height: 62px; }
.pb-asset-grid--sm .pb-snippet-card-preview-img { max-height: 62px; }
.pb-asset-grid--sm .pb-snippet-thumb-svg { height: 62px; }
.pb-asset-grid--lg .pb-snippet-card-preview { min-height: 100px; max-height: 100px; }
.pb-asset-grid--lg .pb-snippet-card-preview-img { max-height: 100px; }
.pb-asset-grid--lg .pb-snippet-thumb-svg { height: 100px; }
.pb-asset-grid--lg .pb-snippet-card-meta { padding: 10px 12px 12px; }
.pb-asset-grid--lg .pb-snippet-card--thumb .pb-snippet-card-title { font-size: 13px; }
.pb-rail-panel--program-only { gap: 8px; padding-top: 8px; }
.pb-program-widget-grid { display: flex; flex-direction: column; gap: 6px; }
.pb-rail-widget-card { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid #c5d3e6; border-radius: 8px; background: #fff; cursor: grab; font: inherit; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; margin: 0; box-sizing: border-box; }
.pb-rail-widget-card:hover { border-color: #4e73df; box-shadow: 0 2px 10px rgba(78,115,223,0.12); }
.pb-rail-widget-card.is-dragging { opacity: 0.55; cursor: grabbing; }
.pb-rail-widget-card-icon { flex: none; width: 34px; height: 34px; border-radius: 8px; background: #e8f4fc; color: #224abe; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.pb-rail-widget-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pb-rail-widget-card-title { font-size: 12px; font-weight: 700; color: #223; margin: 0; line-height: 1.3; }
.pb-rail-widget-card-desc { font-size: 10px; color: #5a6b82; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pb-rail-widget-card--html .pb-rail-widget-card-icon { background: #fef3c7; color: #b45309; }

.pb-rail-panel--html-layout .pb-rail-panel-hint--html-layout { margin: 0 0 8px; font-size: 11px; color: #5a6b82; line-height: 1.38; }
/* 샘플 레이아웃 카드: DB 설명이 길어도 레일 한 화면에 맞게 2줄까지 표시 */
.pb-rail-panel--html-layout .pb-snippet-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; }
/* 제목이 긴 사용자 레이아웃도 카드 높이 과다 방지 */
.pb-rail-panel--html-layout .pb-snippet-card--thumb .pb-snippet-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; }

/* 레일에서 칼럼으로 드래그 중 — 유효·무효 영역 표시 */
body.pb-rail-dnd-active .pb-builder-main { position: relative; }
/* Let the card own the drag even when the pointer starts on an SVG preview. */
.pb-snippet-card-preview, .pb-snippet-card-preview * { pointer-events: none; }
/* The complete column is a drop surface, including an empty editor's padding. */
body.pb-builder-active .pb-col[data-content-type] > .pb-col-content,
body.pb-builder-active .pb-col[data-content-type] > .pb-col-content.fr-box { min-height: 80px; }
body.pb-rail-dnd-active .pb-col.pb-drop-target--valid,
body.pb-builder-shell .pb-col.pb-drop-target--valid {
	outline: 2px solid rgba(78, 115, 223, 0.95);
	outline-offset: -2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	z-index: 4;
}
body.pb-rail-dnd-active .pb-builder-main.pb-rail-dnd-main--no-drop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	box-sizing: border-box;
	background: repeating-linear-gradient(
		-45deg,
		rgba(148, 163, 184, 0.14),
		rgba(148, 163, 184, 0.14) 10px,
		rgba(148, 163, 184, 0.26) 10px,
		rgba(148, 163, 184, 0.26) 20px
	);
}
/* 레일에서 블록 드래그 중: Froala 편집 레이어가 히트 테스트를 가로막지 않게 — 툴바(.fr-toolbar)는 형제라 유지 */
body.pb-rail-dnd-active .pb-builder-main .pb-col[data-content-type="html"] .fr-box .fr-wrapper,
body.pb-rail-dnd-active .pb-builder-main .pb-col[data-content-type="html"] .fr-box .fr-element {
	pointer-events: none;
}

/* ZIP 임포트 row_split_mode=by_section: 행 padding_y=0·pb-import-section 과 병행 — 연속 섹션 간 불필요한 띠 최소화(본문 .doc-cnt 등에서 간격 제어) */
#pb-page-wrap .pb-page > .pb-row.pb-import-section + .pb-row.pb-import-section {
	margin-top: 0;
}

/* 공개: 넓은 제품 표 등 — .pb-row-inner flex 안에서 .pb-col-content 가 내용 최소 너비로 뷰포트 전체 가로 스크롤을 만들지 않게 */
#pb-page-wrap .pb-col-content {
	min-width: 0;
	max-width: 100%;
}
#pb-page-wrap .pb-col-content .table-responsive {
	max-width: 100%;
	box-sizing: border-box;
}

/* ── 빌더: 위젯 칼럼 상단 「위젯 옵션」버튼(저장된 settings 로드용) ── */
body.pb-builder-active .pb-col.pb-col--builder-chrome[data-content-type="widget"] { position: relative; }
body.pb-builder-active .pb-col-widget-mini-toolbar {
	position: absolute;
	top: 4px;
	right: 6px;
	z-index: 25;
	pointer-events: auto;
	opacity: 0.88;
}
body.pb-builder-active .pb-col:hover .pb-col-widget-mini-toolbar,
body.pb-builder-active .pb-col-widget-mini-toolbar:focus-within { opacity: 1; }
body.pb-builder-active .pb-widget-open-settings-btn { min-height: 2rem; padding: 4px 8px; font-size: 11px; gap: 4px; }

/* 행 설정 모달 — 행 속성 / 행 내 위젯 탭 */
.pb-modal-dialog--row-settings .pb-row-settings-tablist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; border-bottom: 1px solid #d8e2ef; list-style: none; }
.pb-modal-dialog--row-settings .pb-row-settings-tablist [role="tab"] { flex: none; margin: 0 0 -1px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #476189; background: transparent; border: 1px solid transparent; border-radius: 6px 6px 0 0; cursor: pointer; }
.pb-modal-dialog--row-settings .pb-row-settings-tab.is-active { color: #1e3a5f; border-color: #d8e2ef #d8e2ef #fff #d8e2ef; background: #fff; }
.pb-modal-dialog--row-settings .pb-row-settings-tab:hover:not(.is-active):not(:disabled) { color: #224abe; background: rgba(78,115,223,0.06); }
.pb-modal-dialog--row-settings .pb-row-settings-tab--disabled { opacity: 0.45; cursor: not-allowed; }
.pb-modal-dialog--row-settings .pb-row-settings-pane { margin-top: 0; }
.pb-modal-dialog--row-settings .pb-row-settings-pane:not([hidden]).is-active { animation: pbPaneFadeIn 0.18s ease; }
@keyframes pbPaneFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pb-modal-dialog--row-settings .pb-row-widget-empty { margin: 12px 0 0; padding: 10px 12px; font-size: 12px; line-height: 1.45; color: #5a6b82; background: #f5f8fc; border: 1px dashed #c5d3e6; border-radius: 8px; }
.pb-modal-dialog--row-settings .pb-row-widget-pane-hint { margin: 0 0 12px; padding: 0; font-size: 12px; line-height: 1.48; color: #5a6b82; }
.pb-modal-dialog--row-settings .pb-row-settings-foot .pb-row-widget-save { margin-left: 8px; }

/* ── 위젯: 연혁 history / 동적연혁 dynamic_history (타임라인 공통 클래스 pb-widget-company-history) ── */
.pb-widget-company-history { background: #fff; border-radius: 10px; padding: 20px 18px 24px; box-sizing: border-box; }
.pb-hist-ul, .pb-dh-ul { list-style: none; margin: 0; padding: 0; }
.pb-hist-ev, .pb-dh-ev { margin: 10px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid #e8ecf3; word-break: break-word; }
.pb-hist-ev:first-child, .pb-dh-ev:first-child { margin-top: 6px; padding-top: 0; border-top: none; }
.pb-hist-muted-title { margin: 0 0 4px 0; font-size: 13px; color: #64748b; line-height: 1.35; }
.pb-hist-body { margin-top: 4px !important; }
.pb-dh-date { margin: 0 0 4px 0; font-size: 13px; font-weight: 700; color: #475569; }
.pb-dh-tt { margin: 0 0 4px 0 !important; font-size: 15px; font-weight: 700; color: #1e293b !important; line-height: 1.35; }
.pb-dh-body { margin: 0 !important; font-size: 14px; color: #475569 !important; line-height: 1.65 !important; }
.pb-hist-banner { margin: 10px 0 12px 0; }
.pb-hist-banner img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.pb-ch-intro { margin: 0 0 18px; font-size: 14px; color: #495057; line-height: 1.55; }
.pb-ch-list { list-style: none; margin: 0; padding: 0; }
.pb-ch-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 14px 16px; padding: 0 0 22px; margin: 0; }
.pb-ch-item:last-child { padding-bottom: 0; }
.pb-ch-marker {
	display: block;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	border-radius: 50%;
	background: #4e73df;
	box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.18);
	justify-self: center;
}
.pb-ch-card {
	border: 1px solid #e8ecf3;
	border-radius: 10px;
	padding: 14px 16px;
	background: #fafbfd;
	box-sizing: border-box;
	min-width: 0;
}
.pb-ch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 8px; }
.pb-ch-year {
	flex: none;
	font-size: 13px;
	font-weight: 800;
	color: #224abe;
}
.pb-ch-title { flex: 1; margin: 0; font-size: 17px; font-weight: 700; color: #1e293b; line-height: 1.35; min-width: 0; }
.pb-ch-body { font-size: 14px; color: #475569; line-height: 1.65; margin: 0; word-break: break-word; }
.pb-ch-foot { margin: 10px 0 0; }
.pb-ch-link { font-size: 13px; font-weight: 600; color: #224abe; text-decoration: underline; }
.pb-ch-link:hover { color: #1a38a5; }

.pb-ch-layout-timeline .pb-ch-item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 22px;
	bottom: -6px;
	width: 2px;
	background: linear-gradient(to bottom, rgba(78, 115, 223, 0.35), rgba(78, 115, 223, 0.08));
	border-radius: 1px;
}
.pb-ch-layout-simple .pb-ch-marker { background: #64748b; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2); }
.pb-ch-layout-simple .pb-ch-item:not(:last-child)::before { display: none; }

.pb-widget-inner.pb-widget-company-history.pb-wv { padding: var(--pb-wv-history-sec-py) var(--pb-wv-history-sec-px); box-sizing: border-box; }
.pb-widget-inner.pb-widget-company-history.pb-wv .pb-ch-item { gap: var(--pb-wv-history-item-gap); padding-bottom: var(--pb-wv-history-item-pb); }
.pb-widget-inner.pb-widget-company-history.pb-wv .pb-ch-card { padding: var(--pb-wv-history-card-py) var(--pb-wv-history-card-px); }
.pb-widget-inner.pb-widget-company-history.pb-wv .pb-ch-title { font-size: var(--pb-wv-history-title-fs); }

.pb-widget-company-history.pb-wv.pb-ch-layout-timeline .pb-ch-item:not(:last-child)::before {
	background: linear-gradient(to bottom, color-mix(in srgb, var(--pb-wv-accent) 42%, transparent), color-mix(in srgb, var(--pb-wv-accent) 8%, transparent));
}

.pb-widget-inner.pb-widget-company-history.pb-wv.pb-wv--theme-muted .pb-ch-card,
.pb-wv--theme-muted.pb-widget-company-history .pb-ch-card { background: #f8fafc; border-color: #e2e8f0; }
.pb-widget-inner.pb-widget-company-history.pb-wv.pb-wv--theme-muted .pb-ch-year,
.pb-wv--theme-muted.pb-widget-company-history .pb-ch-year { color: #334155; }
.pb-widget-inner.pb-widget-company-history.pb-wv.pb-ch-layout-timeline .pb-ch-marker {
	background: var(--pb-wv-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pb-wv-accent) 22%, transparent);
}

/* 페이지빌더 AI 패널 */
.pb-rail-panel--ai { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; min-height: 0; }
.pb-ai-chat-header { flex: none; padding: 10px 12px 8px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.pb-ai-chat-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 6px; }
.pb-ai-chat-history-note { margin: 0; font-size: 11px; line-height: 1.45; color: #64748b; }
.pb-ai-chat-history-note strong { color: #b45309; font-weight: 600; }
.pb-ai-chat-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.pb-modal--ai-session { min-width: min(420px, 92vw); max-width: 480px; }
.pb-modal-dialog--ai-session { max-height: 70vh; display: flex; flex-direction: column; }
.pb-ai-composer-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pb-ai-composer-popover { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); overflow: hidden; }
.pb-ai-composer-popover::after { content: ""; position: absolute; left: 24px; bottom: -7px; width: 14px; height: 14px; background: #fff; border-right: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; transform: rotate(45deg); }
.pb-ai-composer-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; font-size: 13px; font-weight: 700; color: #1e293b; }
.pb-ai-composer-popover-close { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #64748b; font-size: 18px; line-height: 1; cursor: pointer; }
.pb-ai-composer-popover-close:hover { background: #e2e8f0; color: #334155; }
.pb-ai-composer-popover-body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pb-ai-image-choice-lead { margin: 0; font-size: 12px; line-height: 1.55; color: #334155; }
.pb-ai-image-choice-hint { margin: 0; font-size: 11px; line-height: 1.45; color: #b45309; }
.pb-ai-image-choice-actions { display: flex; flex-direction: column; gap: 6px; }
.pb-ai-image-choice-actions .pb-btn { width: 100%; justify-content: center; font-size: 12px; padding: 7px 10px; }
.pb-ai-image-choice-actions .pb-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.pb-ai-page-scope-lead { margin: 0; font-size: 12px; line-height: 1.55; color: #334155; }
.pb-ai-page-scope-warn { margin: 0; font-size: 11px; line-height: 1.5; color: #b45309; font-weight: 600; }
.pb-ai-page-scope-actions { display: flex; flex-direction: column; gap: 6px; }
.pb-ai-page-scope-actions .pb-btn { width: 100%; justify-content: center; font-size: 12px; padding: 7px 10px; }
.pb-ai-page-scope-actions .pb-btn-warn { background: #dc2626; color: #fff; border: 0; }
.pb-ai-page-scope-actions .pb-btn-warn:hover { background: #b91c1c; }
.pb-ai-session-modal-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 120px; max-height: calc(70vh - 52px); }
.pb-ai-session-list__items { margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; flex: 1; min-height: 0; }
.pb-ai-session-list__item { display: block; width: 100%; margin: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid #f1f5f9; background: transparent; text-align: left; font-size: 12px; line-height: 1.45; color: #334155; cursor: pointer; }
.pb-ai-session-list__item:hover { background: #f8fafc; }
.pb-ai-session-list__item.is-current { background: #eef2ff; color: #1d4ed8; font-weight: 600; }
.pb-ai-session-list__empty { margin: 0; padding: 16px 14px; font-size: 12px; color: #94a3b8; text-align: center; }
.pb-ai-chat-settings { flex: none; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; max-height: 180px; overflow-y: auto; }
.pb-ai-translate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 0; }
.pb-ai-translate-label { font-size: 11px; font-weight: 600; color: #475569; flex: none; }
.pb-ai-translate-select { flex: 1 1 72px; min-width: 72px; max-width: 110px; font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #334155; }
.pb-ai-translate-arrow { flex: none; font-size: 12px; color: #64748b; }
.pb-ai-translate-btn { flex: none; font-size: 12px; padding: 4px 10px; white-space: nowrap; }
.pb-ai-translate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pb-ai-translate-hint { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: #64748b; }
body.pb-builder-active .pb-row-tool-btn.pb-row-translate-pick { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 4.85rem; padding-left: 0.4rem; padding-right: 0.45rem; color: #c2410c; background: #fff7ed; border-color: #fdba74; }
body.pb-builder-active .pb-row-tool-btn.pb-row-translate-pick:hover { color: #9a3412; background: #ffedd5; border-color: #fb923c; }
body.pb-builder-active .pb-row-tool-btn.pb-row-translate-pick i { color: #ea580c; }
body.pb-builder-active .pb-row-tool-btn.pb-row-translate-pick .pb-row-edit-pick-label { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.pb-row-translate-pick.is-active { color: #9a3412; background: #ffedd5; border-color: #f97316; }
.pb-row-translate-pick.is-active i { color: #ea580c; }
.pb-row-translate-pick.is-active .pb-row-edit-pick-label { color: #9a3412; }
.pb-row.pb-row--translate-selected { outline: 2px solid #f97316; outline-offset: 2px; }
.pb-rowbar-builder.pb-row--translate-selected,
.pb-rowbar-builder--divider.pb-row--translate-selected { box-shadow: inset 0 0 0 2px #f97316; }
.pb-col.pb-row--translate-selected { outline: 2px solid #f97316; outline-offset: -1px; }
body.pb-builder-active .pb-row-tool-btn.pb-row-motion-pick { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 3.5rem; padding-left: 0.4rem; padding-right: 0.45rem; color: #6d28d9; background: #f5f3ff; border-color: #c4b5fd; }
body.pb-builder-active .pb-row-tool-btn.pb-row-motion-pick:hover { color: #5b21b6; background: #ede9fe; border-color: #a78bfa; }
body.pb-builder-active .pb-row-tool-btn.pb-row-motion-pick i { color: #7c3aed; }
body.pb-builder-active .pb-row-tool-btn.pb-row-motion-pick .pb-row-motion-pick-label { font-size: 11px; font-weight: 700; line-height: 1; }
.pb-row-motion-pick.is-active { color: #5b21b6; background: #ede9fe; border-color: #8b5cf6; }
.pb-row-motion-pick.is-active i { color: #7c3aed; }
.pb-row-motion-pick.is-active .pb-row-motion-pick-label { color: #5b21b6; }
.pb-row.pb-row--motion-target { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.pb-row-group-builder.pb-row--motion-target { box-shadow: inset 0 0 0 2px #8b5cf6; }
.pb-col.pb-col--motion-target { outline: 2px solid #8b5cf6; outline-offset: -1px; }
.pb-rail-panel--motion { display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0; overflow: hidden; background: #fff; }
.pb-rail-panel--motion .pb-motion-target-bar { margin: 6px 10px 0; padding: 4px 6px; font-size: 11px; font-weight: 600; color: #334155; background: #f1f5f9; border: 0; border-radius: 5px; line-height: 1.3; }
.pb-rail-panel--motion .pb-motion-empty-hint { margin: 4px 10px 0; font-size: 10px; line-height: 1.35; color: #64748b; }
.pb-rail-panel--motion .pb-motion-empty-hint summary { cursor: pointer; font-weight: 600; color: #475569; list-style: none; }
.pb-rail-panel--motion .pb-motion-empty-hint summary::-webkit-details-marker { display: none; }
.pb-rail-panel--motion .pb-motion-empty-hint[open] summary { margin-bottom: 4px; }
.pb-rail-panel--motion .pb-motion-empty-hint p { margin: 0; padding: 0 0 4px; }
.pb-rail-panel--motion .pb-motion-form-mount { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px; background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.pb-motion-form { display: flex; flex-direction: column; gap: 5px; }
.pb-motion-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pb-motion-tab { flex: 1 1 calc(50% - 2px); margin: 0; padding: 3px 6px; border: 1px solid #c7d2fe; border-radius: 5px; background: #eef2ff; font-size: 10px; font-weight: 600; color: #4e73df; cursor: pointer; line-height: 1.2; text-align: center; }
.pb-motion-tab:hover { background: #e0e7ff; }
.pb-motion-tab.is-active { color: #fff; background: #4e73df; border-color: #4e73df; }
.pb-motion-tab-panel { margin: 0; }
.pb-motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0; overflow: visible; max-height: none; }
.pb-motion-effect-btn { margin: 0; padding: 5px 4px; min-height: 24px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; font-size: 10px; font-weight: 600; color: #475569; cursor: pointer; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; box-sizing: border-box; }
.pb-motion-effect-btn:hover { border-color: #4e73df; color: #224abe; background: #f0f6ff; }
.pb-motion-effect-btn.is-selected { color: #fff; background: #4e73df; border-color: #4e73df; }
.pb-motion-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; padding: 5px 0 0; border-top: 1px solid #e2e8f0; }
.pb-motion-opt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0; min-width: 0; }
.pb-motion-opt-label { flex: none; min-width: 3.2rem; margin: 0; font-size: 10px; font-weight: 600; color: #475569; cursor: help; }
.pb-motion-opt-input { flex: 1 1 48px; min-width: 0; max-width: 100%; margin: 0; padding: 2px 4px; font-size: 11px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: #334155; box-sizing: border-box; height: 22px; }
.pb-motion-opt-check { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 10px; font-weight: 600; color: #475569; cursor: help; grid-column: 1 / -1; }
.pb-motion-opt-check input { margin: 0; }
.pb-motion-preview-wrap { padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-motion-preview-box { min-height: 36px; padding: 8px 5px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pb-motion-preview-inner { padding: 0; border-radius: 5px; background: transparent; color: #1d4ed8; font-size: 10px; font-weight: 600; min-width: 0; text-align: center; }
.pb-motion-preview-chip { display: inline-block; padding: 3px 8px; border-radius: 5px; background: #eef2ff; color: #1d4ed8; font-size: 10px; font-weight: 600; min-width: 4rem; text-align: center; }
.pb-motion-preview-play-btn { width: 100%; margin: 0; padding: 4px 6px; font-size: 10px; font-weight: 600; color: #1d4ed8; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px; cursor: pointer; }
.pb-motion-preview-play-btn:hover { background: #dbeafe; border-color: #93c5fd; }
body.pb-builder-active .pb-motion-preview-playing .pb-motion-preview-chip { transition: none !important; }
body.pb-builder-active .pb-motion-preview-chip[data-pb-preview-aos] { transition: none !important; animation: none !important; }
body.pb-builder-active .pb-motion-preview-chip.animate__animated { animation-duration: var(--animate-duration, 0.8s) !important; animation-delay: var(--animate-delay, 0ms) !important; animation-fill-mode: both !important; }
body.pb-builder-active .motion-preview-target.animate__animated { animation-duration: var(--animate-duration, 0.8s) !important; animation-delay: var(--animate-delay, 0ms) !important; animation-fill-mode: both !important; }
body.pb-builder-active .motion-preview-target[data-aos] { opacity: 1 !important; transition-property: opacity, transform !important; transition-duration: 0.65s !important; transition-timing-function: ease !important; }
body.pb-builder-active .motion-preview-target[data-aos].aos-animate { opacity: 1 !important; transform: none !important; }
.pb-rail-panel--motion .pb-rail-toolbar-line--motion-actions { flex: none; padding: 10px 12px; margin: 0; background: #fff; border-top: 0; }
.pb-rail-panel--motion .pb-rail-toolbar-line--motion-actions .pb-btn { flex: 1; font-size: 12px; padding: 6px 12px; }
body.pb-builder-active [data-motion-badge]:not(.motion-preview-target) { position: relative; }
body.pb-builder-active [data-motion-badge]:not(.motion-preview-target)::after { content: attr(data-motion-badge); position: absolute; top: 2px; right: 2px; z-index: 3; padding: 1px 6px; font-size: 10px; line-height: 1.4; color: #fff; background: rgba(109, 40, 217, 0.85); border-radius: 3px; pointer-events: none; white-space: nowrap; }
body.pb-builder-active [data-aos]:not(.motion-preview-target) { opacity: 1 !important; transform: none !important; transition: none !important; }
body.pb-builder-active .animate__animated:not(.motion-preview-target):not(.pb-motion-preview-chip) { animation: none !important; opacity: 1 !important; transform: none !important; }
body.pb-builder-active .fr-box [data-aos] { opacity: 1 !important; transform: none !important; }
body.pb-builder-active .fr-box .animate__animated { animation: none !important; opacity: 1 !important; transform: none !important; }
.pb-ai-chat-main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: #f1f5f9; }
.pb-ai-thread-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 12px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.pb-ai-chat-footer { flex: none; padding: 8px 12px 10px; border-top: 1px solid #e2e8f0; background: #fff; }
.pb-ai-attach-preview { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; }
.pb-ai-attach-preview[hidden] { display: none !important; }
.pb-ai-attach-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #cbd5e1; flex: none; }
.pb-ai-attach-label { flex: 1; font-size: 11px; color: #64748b; line-height: 1.35; }
.pb-ai-attach-clear { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: #e2e8f0; color: #475569; cursor: pointer; font-size: 16px; line-height: 1; }
.pb-ai-attach-clear:hover { background: #fecaca; color: #b91c1c; }
.pb-ai-composer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 8px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.pb-ai-composer-input-wrap { position: relative; flex: 1; min-height: 72px; }
.pb-ai-composer .pb-ai-prompt { width: 100%; min-height: 72px; max-height: 200px; padding: 0; border: 0; border-radius: 0; font-size: 14px; line-height: 1.55; resize: none; background: transparent; box-shadow: none; pointer-events: auto; cursor: text; }
.pb-ai-composer .pb-ai-prompt:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(78, 115, 223, 0.35); border-radius: 4px; }
.pb-ai-composer-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 2px 4px; font-size: 12px; font-weight: 600; line-height: 1.45; border-radius: 4px; pointer-events: none; }
.pb-ai-composer-overlay.is-dismissible:not([hidden]) { pointer-events: auto; cursor: text; }
.pb-ai-composer-overlay i { flex-shrink: 0; margin-top: 1px; font-size: 12px; }
.pb-ai-composer-overlay span { flex: 1; min-width: 0; }
.pb-ai-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 공개 pb 페이지 — AOS 컬럼 transform (빌더 편집 화면 pb-builder-active 제외) */
.pb-page .pb-col[data-aos] { transform-origin: center center; backface-visibility: hidden; }
/* pb_preview iframe·독립 미리보기: doc.css reduced-motion 등과 충돌 방지 */
html.pb-aos-force-motion .pb-page .pb-col[data-aos] { will-change: opacity, transform; }
.pb-ai-composer-attach { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: #f1f5f9; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pb-ai-composer-attach:hover { background: #e2e8f0; color: #1d4ed8; }
.pb-ai-composer-attach:disabled { opacity: 0.45; cursor: not-allowed; }
.pb-ai-composer-send { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: #4e73df; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-left: auto; }
.pb-ai-composer-send:hover { background: #224abe; }
.pb-ai-composer-send:disabled { opacity: 0.45; cursor: not-allowed; background: #94a3b8; }
.pb-ai-composer-send.is-loading i { opacity: 0; }
.pb-ai-composer-send.is-loading::after { content: ""; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: pbAiSpin 0.75s linear infinite; }
.pb-ai-chat-msg__bubble-img { display: block; max-width: 160px; max-height: 100px; margin-top: 6px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.12); object-fit: cover; }
.pb-ai-chat-msg__img-placeholder { display: block; margin-top: 6px; font-size: var(--font-size-xs, 12px); color: var(--color-muted, #888); }
.pb-ai-chat-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.pb-ai-chat-msg--user { flex-direction: row-reverse; }
.pb-ai-chat-msg__avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; background: #e2e8f0; color: #475569; }
.pb-ai-chat-msg__avatar i { display: block; font-size: 13px; line-height: 1; }
.pb-ai-chat-msg--user .pb-ai-chat-msg__avatar { background: #dbeafe; color: #3b82f6; border: 1px solid #bfdbfe; }
.pb-ai-chat-msg--assistant .pb-ai-chat-msg__avatar { background: #e2e8f0; color: #64748b; border: 1px solid #cbd5e1; }
.pb-ai-chat-msg__col { display: flex; flex-direction: column; gap: 4px; max-width: calc(100% - 40px); min-width: 0; }
.pb-ai-chat-msg--user .pb-ai-chat-msg__col { align-items: flex-end; }
.pb-ai-chat-msg__name { font-size: 10px; font-weight: 700; color: #64748b; line-height: 1; }
.pb-ai-chat-msg__bubble { padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.pb-ai-chat-msg--user .pb-ai-chat-msg__bubble { background: #e0f2fe; color: #0c4a6e; border: 1px solid #bae6fd; border-bottom-right-radius: 4px; }
.pb-ai-chat-msg--assistant .pb-ai-chat-msg__bubble { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.pb-ai-chat-msg--assistant.pb-ai-chat-msg--err .pb-ai-chat-msg__bubble { background: #fef2f2; color: #b91c1c; border-color: #fecaca; white-space: pre-wrap; word-break: break-word; }
.pb-ai-chat-msg--welcome .pb-ai-chat-msg__bubble { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.pb-ai-chat-msg--typing .pb-ai-chat-msg__bubble { padding: 10px 14px; }
.pb-ai-typing-dots { display: inline-flex; align-items: center; gap: 4px; }
.pb-ai-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: pbAiTypingDot 1.2s infinite ease-in-out; }
.pb-ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.pb-ai-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pbAiTypingDot { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.pb-ai-pending-bar { margin-bottom: 8px; padding: 8px 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; }
.pb-ai-pending-bar[hidden] { display: none !important; }
.pb-ai-pending-bar__summary { margin: 0 0 8px; font-size: 12px; color: #1e40af; line-height: 1.45; }
.pb-ai-pending-bar__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-ai-pending-preview { font-size: 12px; }
.pb-ai-chat-footer .pb-ai-chips { margin-bottom: 8px; }
.pb-ai-new-chat-btn { font-size: 11px; padding: 3px 8px; min-height: 0; line-height: 1.4; }
.pb-ai-thread-wrap { margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; }
.pb-ai-context-bar { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: #f1f5f9; border-radius: 6px; }
.pb-ai-context-main { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.4; }
.pb-ai-context-sub { font-size: 11px; color: #64748b; line-height: 1.45; }
.pb-ai-context-sub[hidden] { display: none !important; }
.pb-ai-context-main.pb-ai-context-target--err { color: #b91c1c; font-weight: 700; }
.pb-ai-context-main.pb-ai-context-target--warn { color: #b45309; font-weight: 700; }
.pb-ai-status-bar { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.45; border-radius: 8px; }
.pb-ai-composer-overlay.pb-ai-status-bar { margin-bottom: 0; padding: 2px 4px; font-size: 12px; }
.pb-ai-status-bar[hidden] { display: none !important; }
.pb-ai-status-bar--err { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.pb-ai-status-bar--warn { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.pb-ai-status-bar--ok { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.pb-ai-status-bar i { flex-shrink: 0; margin-top: 2px; font-size: 14px; }
.pb-ai-prompt:disabled, .pb-ai-ref-url:disabled, #pbAiRefImage:disabled { opacity: 0.55; cursor: not-allowed; background: #f1f5f9; }
.pb-ai-chip:disabled { opacity: 0.55; cursor: not-allowed; background: #f1f5f9; color: #94a3b8; }
.pb-ai-mode-card:has(input:disabled) { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
#pbAiSubmit:disabled { opacity: 0.55; cursor: not-allowed; background: #94a3b8; border-color: #94a3b8; }
.pb-ai-input-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pb-ai-input-tab { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; }
.pb-ai-input-tab.is-active { background: #4e73df; color: #fff; border-color: #4e73df; }
.pb-ai-scope-row, .pb-ai-mode-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; font-size: 12px; }
.pb-ai-scope-label, .pb-ai-mode-label { font-weight: 600; color: #334155; width: 100%; margin-bottom: 2px; }
.pb-ai-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.pb-ai-mode-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border: 2px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.pb-ai-mode-card:hover { border-color: #93c5fd; background: #f8fafc; }
.pb-ai-mode-card:has(input:checked) { border-color: #4e73df; background: #eff6ff; box-shadow: 0 0 0 1px rgba(78, 115, 223, 0.25); }
.pb-ai-mode-card input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pb-ai-mode-card-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 13px; color: #4e73df; background: #eef2ff; border-radius: 8px; }
.pb-ai-mode-card:has(input:checked) .pb-ai-mode-card-icon { color: #fff; background: #4e73df; }
.pb-ai-mode-card-title { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.pb-ai-mode-card-desc { font-size: 10px; color: #64748b; line-height: 1.3; }
.pb-ai-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.pb-ai-scope-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border: 2px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.pb-ai-scope-card:hover { border-color: #93c5fd; background: #f8fafc; }
.pb-ai-scope-card:has(input:checked) { border-color: #4e73df; background: #eff6ff; box-shadow: 0 0 0 1px rgba(78, 115, 223, 0.25); }
.pb-ai-scope-card input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pb-ai-scope-card-fig { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.pb-ai-scope-svg { display: block; max-width: 100%; height: auto; }
.pb-ai-scope-card-title { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.pb-ai-scope-card-desc { font-size: 10px; color: #64748b; line-height: 1.3; }
.pb-ai-scope-opt--disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.pb-ai-scope-opt--disabled input { pointer-events: none; }
.pb-ai-prompt { width: 100%; min-height: 72px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; resize: vertical; box-sizing: border-box; }
.pb-ai-ref-url { width: 100%; margin-bottom: 6px; box-sizing: border-box; }
.pb-ai-hint { font-size: 11px; color: #64748b; margin: 4px 0 8px; line-height: 1.4; }
.pb-ai-ref-or { text-align: center; font-size: 11px; color: #94a3b8; margin: 6px 0; }
.pb-ai-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-ai-chip { padding: 4px 8px; font-size: 11px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 999px; cursor: pointer; }
.pb-ai-chip:hover { background: #e2e8f0; }
.pb-ai-actions { display: flex; justify-content: center; align-items: center; gap: 8px; }
#pbAiSubmit.pb-ai-composer-send { min-width: 0; width: 28px; height: 28px; pointer-events: auto; }
#pbAiSubmit.is-loading { pointer-events: none; opacity: 0.92; }
.pb-ai-loading { position: absolute; inset: 0; z-index: 20; background: rgba(248,250,252,0.88); border-radius: 8px; }
.pb-ai-loading[hidden] { display: none !important; }
.pb-ai-loading:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.pb-ai-loading-box { text-align: center; padding: 20px 16px; max-width: 220px; }
.pb-ai-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid #c7d2fe; border-top-color: #4e73df; border-radius: 50%; animation: pbAiSpin 0.75s linear infinite; }
.pb-ai-loading-msg { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: #1e3a5f; }
.pb-ai-loading-hint { margin: 0; font-size: 11px; color: #64748b; line-height: 1.45; }
@keyframes pbAiSpin { to { transform: rotate(360deg); } }
.pb-ai-result-wrap { flex-direction: column; gap: 8px; }
.pb-ai-result-wrap[hidden] { display: none !important; }
.pb-ai-result-wrap:not([hidden]) { display: flex; }
.pb-ai-preview-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; font-size: 13px; font-weight: 700; color: #fff; background: #4e73df; border: none; border-radius: 8px; cursor: pointer; }
.pb-ai-preview-open:hover { background: #224abe; }
.pb-ai-summary { font-size: 12px; color: #1e40af; padding: 8px 10px; background: #eff6ff; border-radius: 6px; line-height: 1.5; word-break: break-word; }
.pb-ai-ref-meta { font-size: 12px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; line-height: 1.45; word-break: break-word; }
.pb-ai-ref-meta[hidden] { display: none !important; }
.pb-ai-section-list { margin: 4px 0 0 16px; padding: 0; }
.pb-modal--ai-preview { min-width: 560px; max-width: 920px; width: 92vw; }
.pb-modal-dialog--ai-preview { max-height: 90vh; display: flex; flex-direction: column; }
.pb-ai-preview-modal-body { max-height: calc(90vh - 130px); overflow-y: auto; font-size: 14px; line-height: 1.55; }
.pb-ai-preview-modal-summary { margin-bottom: 12px; padding: 12px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 14px; color: #1e3a5f; line-height: 1.55; }
.pb-ai-preview-modal-meta { margin-bottom: 12px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; }
.pb-ai-preview-modal-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.pb-ai-preview-tab { padding: 8px 14px; font-size: 13px; font-weight: 600; color: #476189; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; }
.pb-ai-preview-tab:hover { background: #eef2ff; border-color: #93c5fd; color: #1e40af; }
.pb-ai-preview-tab.is-active { color: #fff; background: #4e73df; border-color: #4e73df; }
.pb-ai-preview-tab[hidden] { display: none; }
.pb-ai-preview-pane { display: none; }
.pb-ai-preview-pane.is-active { display: block; }
.pb-ai-preview-modal-html { min-height: 200px; max-height: calc(90vh - 280px); overflow: auto; padding: 16px 20px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.6; }
.pb-ai-preview-modal-html img { max-width: 100%; height: auto; }
.pb-ai-preview-modal-structure { min-height: 200px; max-height: calc(90vh - 280px); overflow: auto; margin: 0; padding: 14px 16px; font-size: 13px; line-height: 1.55; background: #1e293b; color: #e2e8f0; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.pb-ai-preview-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.pb-ai-badge { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; border-radius: 999px; vertical-align: middle; }
.pb-ai-badge--ok { color: #166534; background: #dcfce7; border: 1px solid #86efac; }
.pb-ai-badge--warn { color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.pb-ai-badge--info { color: #1e40af; background: #dbeafe; border: 1px solid #93c5fd; }
.pb-ai-preview-modal-visual .pb-ai-preview-row { margin-bottom: 12px; border: 1px dashed #cbd5e1; border-radius: 8px; overflow: hidden; }
.pb-ai-preview-row-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pb-ai-preview-col { min-width: 0; }
.pb-ai-preview-col--span-1 { grid-column: span 1; }
.pb-ai-preview-col--span-2 { grid-column: span 2; }
.pb-ai-preview-col--span-3 { grid-column: span 3; }
.pb-ai-preview-col--span-4 { grid-column: span 4; }
.pb-ai-preview-col--span-5 { grid-column: span 5; }
.pb-ai-preview-col--span-6 { grid-column: span 6; }
.pb-ai-preview-col--span-7 { grid-column: span 7; }
.pb-ai-preview-col--span-8 { grid-column: span 8; }
.pb-ai-preview-col--span-9 { grid-column: span 9; }
.pb-ai-preview-col--span-10 { grid-column: span 10; }
.pb-ai-preview-col--span-11 { grid-column: span 11; }
.pb-ai-preview-col--span-12 { grid-column: span 12; }
.pb-ai-preview-widget-ph { padding: 16px; text-align: center; font-size: 13px; color: #64748b; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 6px; }
.pb-ai-apply-row { gap: 8px; }
.pb-ai-apply-row[hidden] { display: none !important; }
.pb-ai-apply-row:not([hidden]) { display: flex; }
.pb-ai-thread-wrap { margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; }
.pb-ai-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; }
.pb-ai-thread-title { font-size: 12px; font-weight: 600; color: #334155; }
.pb-ai-new-chat-btn { font-size: 11px; padding: 2px 8px; min-height: 0; line-height: 1.4; }
.pb-ai-thread-wrap .pb-ai-thread-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; padding: 8px; }
.pb-ai-thread-empty { margin: 0; font-size: 11px; color: #94a3b8; text-align: center; padding: 12px 4px; }
.pb-ai-chat-bubble { max-width: 92%; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.pb-ai-chat-bubble--user { align-self: flex-end; margin-left: auto; background: #dbeafe; color: #1e3a5f; border: 1px solid #bfdbfe; }
.pb-ai-chat-bubble--assistant { align-self: flex-start; background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.pb-ai-chat-bubble--err { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pb-ai-thread { font-size: 11px; border-top: 1px solid #e2e8f0; padding-top: 6px; overflow: visible; }
.pb-ai-thread-item { padding: 3px 0; color: #475569; word-break: break-word; }
.pb-ai-thread-item--ok { color: #166534; }
.pb-ai-thread-item--err { color: #b91c1c; font-weight: 600; padding: 4px 6px; background: #fef2f2; border-radius: 4px; }
.pb-ai-muted { color: #94a3b8; font-style: italic; }
.pb-ai-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pb-ai-prompt-label { font-size: 12px; font-weight: 600; color: #334155; flex-shrink: 0; }
.pb-ai-help-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; padding: 4px 8px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #4e73df; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pb-ai-help-toggle i { font-size: 10px; }
.pb-ai-help-toggle:hover { background: #e0e7ff; }
.pb-ai-help-toggle[aria-expanded="true"] { background: #4e73df; color: #fff; border-color: #4e73df; }
.pb-ai-new-chat-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; padding: 4px 8px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #e67e22; background: #fff8f0; border: 1px solid #f5cba7; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pb-ai-new-chat-toggle i { font-size: 10px; }
.pb-ai-new-chat-toggle:hover { background: #fff3e0; }
.pb-ai-session-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; padding: 4px 8px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #64748b; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pb-ai-session-toggle i { font-size: 10px; }
.pb-ai-session-toggle:hover { background: #f1f5f9; color: #475569; }
.pb-ai-session-toggle[aria-expanded="true"] { background: #e2e8f0; color: #334155; border-color: #94a3b8; }
.pb-modal--ai-help { min-width: 520px; max-width: 640px; }
.pb-modal-dialog--ai-help { max-height: 88vh; display: flex; flex-direction: column; }
.pb-ai-help-modal-body { max-height: calc(88vh - 120px); overflow-y: auto; font-size: 13px; line-height: 1.55; color: #334155; }
.pb-ai-help-intro { margin-bottom: 16px; padding: 14px; background: #f0f4ff; border: 1px solid #c7d2fe; border-radius: 10px; }
.pb-ai-help-intro-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #1e3a5f; }
.pb-ai-help-steps { margin: 0; padding-left: 20px; }
.pb-ai-help-steps li { margin-bottom: 6px; }
.pb-ai-help-intro-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed #c7d2fe; font-size: 12px; color: #475569; }
.pb-ai-help-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.pb-ai-help-nav-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; color: #476189; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 20px; cursor: pointer; }
.pb-ai-help-nav-btn:hover { background: #eef2ff; border-color: #93c5fd; color: #1e40af; }
.pb-ai-help-nav-btn.is-active { color: #fff; background: #4e73df; border-color: #4e73df; }
.pb-ai-help-section { display: none; margin-bottom: 20px; padding: 14px; background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 10px; }
.pb-ai-help-section.is-current { display: block; border-color: #93c5fd; background: #fff; box-shadow: 0 0 0 2px rgba(78,115,223,0.12); }
.pb-ai-help-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #1e293b; }
.pb-ai-help-lead { margin: 0 0 12px; color: #475569; }
.pb-ai-help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pb-ai-help-col { padding: 10px 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; }
.pb-ai-help-subtitle { margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.pb-ai-help-subtitle--ok { color: #166534; }
.pb-ai-help-subtitle--no { color: #b45309; }
.pb-ai-help-list { margin: 0; padding-left: 18px; color: #475569; font-size: 12px; }
.pb-ai-help-list li { margin-bottom: 4px; }
.pb-ai-help-list--muted { color: #64748b; }
.pb-ai-help-sub { margin: 0 0 10px; font-size: 12px; color: #64748b; }
.pb-ai-help-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pb-ai-help-card { padding: 12px 14px; background: #fff; border: 1px solid #dbeafe; border-radius: 10px; box-shadow: 0 1px 3px rgba(30,64,175,0.06); }
.pb-ai-help-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pb-ai-help-card-head strong { font-size: 13px; color: #1e3a5f; }
.pb-ai-help-card-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; color: #1e40af; background: #eff6ff; border-radius: 10px; }
.pb-ai-help-card-desc { margin: 0 0 8px; font-size: 12px; color: #64748b; }
.pb-ai-help-card-prompt { margin: 0 0 10px; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: #1e40af; background: #f8fafc; border-left: 3px solid #93c5fd; border-radius: 0 6px 6px 0; }
.pb-ai-help-ex { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #fff; background: #4e73df; border: none; border-radius: 6px; cursor: pointer; }
.pb-ai-help-ex:hover { background: #224abe; }
.pb-ai-help-widget-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pb-ai-help-widget-card { padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; }
.pb-ai-help-widget-card.is-highlight { border-color: #4e73df; box-shadow: 0 0 0 2px rgba(78,115,223,0.18); }
.pb-ai-help-widget-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pb-ai-help-widget-card-head strong { font-size: 13px; color: #1e3a5f; }
.pb-ai-help-widget-key { font-size: 10px; font-weight: 600; color: #64748b; font-family: monospace; }
.pb-ai-help-widget-kw { margin: 0 0 6px; font-size: 11px; color: #475569; line-height: 1.45; }
.pb-ai-help-widget-kw-label { display: inline-block; margin-right: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; color: #1e40af; background: #eff6ff; border-radius: 4px; }
.pb-ai-help-widget-manual { margin: 0 0 6px; font-size: 11px; color: #b45309; line-height: 1.4; }
.pb-ai-help-foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 12px; color: #64748b; line-height: 1.5; }
@media (max-width: 640px) { .pb-modal--ai-help { min-width: 0; width: 96vw; } .pb-ai-help-cols { grid-template-columns: 1fr; } .pb-ai-help-widget-cards { grid-template-columns: 1fr; } .pb-modal--ai-preview { min-width: 0; width: 96vw; } }

/* AI 5-Stage 진행 모달 */
.pb-modal--ai-progress { min-width: 720px; max-width: 1100px; width: 94vw; }
.pb-modal-dialog--ai-progress { max-height: 90vh; }
.pb-ai-progress-body { padding: 0; overflow: hidden; }
.pb-ai-progress-layout { display: flex; min-height: 420px; max-height: 72vh; }
.pb-ai-progress-preview-wrap { flex: 1 1 auto; position: relative; min-width: 0; background: #f1f5f9; overflow: auto; }
.pb-ai-progress-preview { padding: 16px; min-height: 360px; }
.pb-ai-progress-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,23,42,0.55); color: #fff; text-align: center; padding: 24px; pointer-events: none; transition: opacity 0.35s ease; }
.pb-ai-progress-overlay.is-faded { opacity: 0; }
.pb-ai-progress-stage-num { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 8px; opacity: 0.9; }
.pb-ai-progress-stage-msg { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.pb-ai-progress-stage-hint { margin: 10px 0 0; font-size: 13px; opacity: 0.85; line-height: 1.45; max-width: 320px; }
.pb-ai-progress-bar { width: min(280px, 80%); height: 6px; background: rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; }
.pb-ai-progress-bar span { display: block; height: 100%; background: #60a5fa; border-radius: 999px; transition: width 0.4s ease; }
.pb-ai-progress-rail { flex: 0 0 220px; padding: 16px 14px; border-left: 1px solid #e2e8f0; background: #fff; overflow-y: auto; }
.pb-ai-progress-steps { list-style: none; margin: 0 0 16px; padding: 0; }
.pb-ai-progress-step { display: flex; align-items: center; gap: 10px; padding: 8px 6px; font-size: 12px; color: #94a3b8; border-radius: 6px; }
.pb-ai-progress-step.is-active { color: #1e40af; font-weight: 700; background: #eff6ff; }
.pb-ai-progress-step.is-done { color: #059669; }
.pb-ai-progress-step-num { flex: 0 0 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border-radius: 50%; background: #e2e8f0; color: #64748b; }
.pb-ai-progress-step.is-active .pb-ai-progress-step-num { background: #4e73df; color: #fff; }
.pb-ai-progress-step.is-done .pb-ai-progress-step-num { background: #10b981; color: #fff; }
.pb-ai-progress-sections { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid #f1f5f9; font-size: 11px; }
.pb-ai-progress-sections li { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; color: #64748b; }
.pb-ai-progress-sections li.is-active { color: #1e40af; font-weight: 600; }
.pb-ai-progress-sections li.is-done { color: #059669; }
.pb-ai-progress-sections li.is-warn { color: #d97706; }
@media (max-width: 768px) { .pb-modal--ai-progress { min-width: 0; width: 96vw; } .pb-ai-progress-layout { flex-direction: column; max-height: none; } .pb-ai-progress-rail { flex: none; border-left: none; border-top: 1px solid #e2e8f0; } }
.pb-builder-main { position: relative; }
.pb-ai-progress-dim { position: absolute; inset: 0; background: rgba(15,23,42,0.08); z-index: 120; pointer-events: none; }
.pb-ai-progress-hud { position: absolute; top: 12px; right: 12px; z-index: 130; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,0.18); }
.pb-ai-progress-hud-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; font-size: 13px; font-weight: 700; color: #0f172a; }
.pb-ai-progress-hud-close { border: none; background: transparent; font-size: 20px; line-height: 1; color: #64748b; cursor: pointer; padding: 0 4px; }
.pb-ai-progress-hud-body { padding: 12px 14px 14px; }
.pb-ai-progress-hud .pb-ai-progress-stage-num { display: inline-block; font-size: 12px; font-weight: 800; color: #4e73df; margin-bottom: 4px; }
.pb-ai-progress-hud .pb-ai-progress-stage-msg { margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 1.35; color: #0f172a; }
.pb-ai-progress-hud .pb-ai-progress-stage-hint { margin: 8px 0 12px; font-size: 12px; color: #64748b; line-height: 1.45; }
.pb-ai-progress-hud .pb-ai-progress-bar { width: 100%; height: 5px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.pb-ai-progress-hud .pb-ai-progress-bar span { display: block; height: 100%; background: #4e73df; border-radius: 999px; transition: width 0.4s ease; }
.pb-ai-progress-steps--hud { list-style: none; margin: 0 0 10px; padding: 0; }
.pb-ai-progress-steps--hud .pb-ai-progress-step { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 11px; color: #94a3b8; border-radius: 6px; }
.pb-ai-progress-sections--hud { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid #f1f5f9; font-size: 10px; max-height: 140px; overflow-y: auto; }
.pb-ai-progress-hud.is-done .pb-ai-progress-stage-msg { color: #059669; }
@media (max-width: 768px) { .pb-ai-progress-hud { top: 8px; right: 8px; width: min(300px, calc(100% - 16px)); } }
.pb-ai-custom-layout-banner { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #c7d2fe; border-radius: 10px; background: #eef2ff; }
.pb-ai-custom-layout-banner__title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #312e81; }
.pb-ai-custom-layout-banner__list { list-style: none; margin: 0; padding: 0; }
.pb-ai-custom-layout-banner__list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 12px; color: #1e293b; border-top: 1px solid #dbeafe; }
.pb-ai-custom-layout-banner__list li:first-child { border-top: none; }
.pb-ai-custom-layout-approve { flex-shrink: 0; border: none; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; color: #fff; background: #4e73df; cursor: pointer; }
.pb-ai-custom-layout-banner__list li.is-approved { color: #059669; }
.pb-ai-stage-preview { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; max-height: 160px; overflow: auto; font-size: 11px; }
.pb-ai-stage-preview__label { margin: 0 0 6px; font-weight: 700; color: #64748b; }
.pb-ai-stage-preview__body { transform: scale(0.85); transform-origin: top left; width: 117%; }
.pb-ai-title { font-weight: 700; line-height: 1.35; }
.pb-ai-body { line-height: 1.65; color: #475569; }
.pb-modal--row-source { min-width: min(720px, 94vw); max-width: 920px; }
.pb-row-source-modal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-row-source-modal-head #pbRowSourceModalTitle { flex: 1; min-width: 0; }
.pb-row-source-fontsize { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #555; margin-left: auto; }
.pb-row-source-fontsize .pb-fontsize-btn { min-width: 28px; padding: 2px 6px; font-size: 11px; font-weight: 700; border: 1px solid #c8d0db; border-radius: 4px; background: #fff; color: #4e73df; cursor: pointer; }
.pb-row-source-fontsize .pb-fontsize-btn:hover { background: #eef1f7; }
.pb-modal--row-source .pb-modal-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pb-modal-dialog--row-source { max-height: 88vh; display: flex; flex-direction: column; }
.pb-row-source-modal-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pb-row-source-notice { margin: 0; font-size: 11px; line-height: 1.45; color: #64748b; }
.pb-row-source-cm-host { flex: 1; min-height: 240px; }
.pb-row-source-textarea { width: 100%; min-height: 240px; box-sizing: border-box; font-family: Consolas, "Courier New", monospace; font-size: 13px; }
.pb-row-source-cm-host { padding: 8px; background: #1e1e2e; border: 1px solid #3d3d52; border-radius: 6px; box-sizing: border-box; }
.pb-row-source-cm-host .CodeMirror { height: auto; min-height: 240px; border: 1px solid #444; border-radius: 4px; background: #272822; color: #f8f8f2; font-size: 13px; font-family: Consolas, "Courier New", monospace; line-height: 1.5; }
.pb-row-source-cm-host .CodeMirror pre { font-family: Consolas, "Courier New", monospace; line-height: 1.5; }
.pb-row-source-cm-host .CodeMirror-gutters { background: #272822; border-right: 1px solid #444; }
.pb-row-source-cm-host .CodeMirror-linenumber { color: #75715e; }
.pb-row-source-cm-host .CodeMirror-focused { outline: 2px solid var(--pb-shell-accent); outline-offset: 1px; }
.pb-row-source-cm-host .CodeMirror-cursor { border-left: 2px solid #f8f8f2 !important; }
body.pb-builder-active .pb-row-tool-btn.pb-row-expert-source { color: #475569; }
body.pb-builder-active .pb-row-tool-btn.pb-row-expert-source:hover { color: #1e293b; background: #f1f5f9; border-color: #cbd5e1; }
body.pb-builder-active .pb-row-tool-btn.pb-row-expert-source i { color: #64748b; }
@media (max-width: 640px) { .pb-modal--row-source { min-width: 0; width: 96vw; } }
/* 빌더 프론트 셸 iframe 캔버스 */
.pb-builder-main .pb-normal-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pb-builder-shell-stage { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; overflow: auto; background: #e8edf5; padding: 12px; box-sizing: border-box; }
.pb-builder-shell-frame { display: block; width: 1920px; max-width: 100%; min-height: 100%; height: 100%; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.08); }
body.pb-builder-shell #header a, body.pb-builder-shell #menu a, body.pb-builder-shell footer a, body.pb-builder-shell #footer a { cursor: default; }
body.pb-builder-shell .pb-front-shell-lock a { cursor: default; }
body.pb-builder-shell.pb-builder-active .pb-row-inner.pb-container { max-width: unset; width: unset; margin-left: unset; margin-right: unset; padding-left: unset; padding-right: unset; }
.pb-builder-shell-error { margin: 16px; padding: 12px 16px; border: 1px solid #f0c36d; background: #fff8e6; color: #5c4a00; }
/* 셸 iframe: 부모 워크스페이스용 100vh/overflow:hidden 이 같이 적용되면 본문 스크롤이 막힘 */
html.pb-builder-shell-doc,
html.pb-builder-shell-doc:has(body.pb-builder-active) { height: auto; max-height: none; overflow-x: hidden; overflow-y: auto; }
body.pb-builder-shell,
body.pb-builder-shell.pb-builder-active { height: auto; max-height: none; min-height: 100%; overflow: visible; display: block; }
@supports (height: 100svh) { body.pb-builder-shell.pb-builder-active { height: auto; max-height: none; } }
@supports (height: 100dvh) { body.pb-builder-shell.pb-builder-active { height: auto; max-height: none; } }
body.pb-builder-shell #wrapper { overflow: visible; }
body.pb-builder-shell.pb-builder-active .fr-element img,
body.pb-builder-shell.pb-builder-active .fr-view img,
html.pb-builder-shell-doc .fr-element img { max-width: 100%; height: auto; }
@media (max-width: 980px) { html.pb-builder-shell-doc .pb-col-content img, html.pb-builder-shell-doc .fr-element img { max-width: 100% !important; height: auto !important; } }
body.pb-builder-shell--preview [data-motion-badge]::after { content: none; display: none; }
body.pb-builder-shell--preview .pb-col-content img { max-width: 100%; height: auto; }
.pb-builder-shell-frame { max-width: none; }
/* website 서브셸 + 빌더 셸: 프론트와 동일한 본문 여백·서브비주얼 레이아웃 */
body.pb-builder-shell.website-layout .sub-hero,
body.pb-builder-shell.website-layout .lnb-tabs { pointer-events: none; }
body.pb-builder-shell.website-layout .sub-hero a,
body.pb-builder-shell.website-layout .lnb-tabs a,
body.pb-builder-shell.website-layout #gnb a { cursor: default; }
body.pb-builder-shell.website-layout .sub-content .container #pb-page-wrap { width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
body.pb-builder-shell.website-layout.pb-builder-active .sub-content .container .pb-row-inner.pb-container { max-width: none; width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
body.pb-builder-shell.website-layout #pb-page-wrap .info-table { border-top: 2px solid var(--c-ink); margin-top: 16px; }
body.pb-builder-shell.website-layout #pb-page-wrap .info-table tr { border-bottom: 1px solid var(--c-divider); }
body.pb-builder-shell.website-layout #pb-page-wrap .info-table th { width: 170px; text-align: left; padding: 16px 18px; font-size: 15px; font-weight: 700; background: var(--c-pearl); }
body.pb-builder-shell.website-layout #pb-page-wrap .info-table td { padding: 16px 18px; font-size: 15px; color: var(--c-ink-70); }
body.pb-builder-shell.website-layout #pb-page-wrap .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: clamp(48px, 5vw, 76px); }
body.pb-builder-shell.website-layout #pb-page-wrap .val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
/* 너비 프리셋(1280·1920)이 스테이지에 눌려 줄어들면 iframe 미디어쿼리가 선택값과 달라진다 */
.pb-builder-shell-frame { flex: none; }
/* 저장 메모 창: 시안 버튼·입력 초기화가 라벨과 칸을 한 줄로 붙이지 않게 한다 */
#pbSaveMemoDialog { min-width: 420px; color: #212529; background: #fff; }
#pbSaveMemoDialog .form-group { margin-bottom: 0; }
#pbSaveMemoDialog .form-group label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #212529; }
#pbSaveMemoDialog .form-control { display: block; width: 100%; height: auto; margin: 0; padding: 8px 10px; border: 1px solid #ced4da; border-radius: 4px; background: #fff; color: #212529; font-size: 14px; line-height: 1.4; box-shadow: none; appearance: auto; }
#pbSaveMemoDialog .pb-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
#pbSaveMemoDialog .pb-btn { padding: 8px 16px; font-size: 14px; line-height: 1.4; color: #212529; background: #f8f9fa; border: 1px solid #ced4da; }
#pbSaveMemoDialog .pb-btn-primary { color: #fff; background: #4e73df; border-color: #4e73df; }