/* =========================================
   DecoBlocks Frontend Styles
   모든 클래스는 dbk- 네임스페이스로 시작 (테마 충돌 방지)
   ========================================= */

/* =========================================
   0. 공통 규칙 (파일 전체에 적용되는 원칙 - 반드시 읽고 작업할 것)
   ========================================= */

/*
   [번호 규칙] 이 파일은 "블록군-하위스타일-단계" 번호로 정리되어 있다.
   예) 1-1-1 = 1번 블록군(말풍선)의 1번째 하위스타일의 1단계(기본형/무료)
       1-1-2 = 같은 자리의 2단계(3D 미리보기)
   기본형(마지막 자리가 1)과 그 3D(마지막 자리가 2)는 항상 파일에서 바로
   붙어 있다 - 서로 다른 요소에 같은 CSS 한 줄을 재사용해서 획일화시키는
   실수를 구조적으로 막기 위함이다. 하위 스타일이 여러 개인 블록(인용구
   6종, 구분선 7종)은 가운데 번호가 스타일마다 따로 있다
   (예: 10-1-1/10-1-2 = 인용구의 1번째 하위스타일인 클래식의 기본/3D,
   10-2-1/10-2-2 = 2번째 하위스타일인 큰따옴표의 기본/3D, ...).
   CSS 클래스 이름 자체는 이 재정리와 전혀 무관하게 하나도 바뀌지 않았다
   (JS/blocks-editor.js가 정확한 클래스명 문자열에 의존하기 때문).

   [무료/유료 "스위치"의 실제 동작 원리] 이 파일 안의 모든 "-2"(3D) 규칙은
   반드시 .editor-styles-wrapper 조상 선택자로 시작한다. 이 클래스는
   Gutenberg가 에디터 안(메인 캔버스 iframe + 블록 인서터의 호버 미리보기
   iframe)에만 자동으로 붙이고, 실제 발행된 페이지에는 절대 붙지 않는다.
   그래서 스위치는 이미 구조적으로 완성되어 있다:
     - 무료 버전: "-1"(기본형)과 "-2"(3D) 둘 다 편집 화면 안에서는 자유롭게
       고르고 미리볼 수 있다. 하지만 발행 화면에는 .editor-styles-wrapper가
       없으므로 "-1"만 실제로 보인다("-2" 규칙 자체가 발행 화면 DOM에서는
       아예 매치되지 않는다 - 강제로 숨기는 게 아니라 애초에 규칙이 안 걸림).
     - 유료(3D 스타일 업그레이드를 설치하고 라이선스까지 인증한 경우): 별도
       애드온 CSS가 .editor-styles-wrapper 없이(즉 발행 화면에도) 같은
       클래스에 3D급 효과를 적용하므로, 발행 화면에서도 "-2"와 동급의
       결과가 그대로 보인다.
   즉 이 파일이 할 일은 각 "-2" 규칙이 .editor-styles-wrapper로 시작하는
   조건만 지키는 것뿐이고, 그 아래 각 블록 섹션에는 이 원리를 한 줄로만
   다시 짚어준다(자세한 설명은 여기 한 곳에만 적어 파일이 불필요하게
   길어지지 않게 한다).

   [3D 디자인 원칙 - 이후 모든 수정에서 위반 금지, 여러 차례의 실사용자
   피드백으로 확정됨]
   a) 같은 블록 안에서도 이름이 다른 하위 스타일끼리는 절대 CSS 규칙을
      공유하지 않는다(한 줄/한 클래스로 여러 스타일을 획일화하지 않는다).
   b) "3D" = 빛(밝은 하이라이트)과 그림자(어두운 그늘)로 만드는 입체감이지,
      색상 자체를 바꾸는 것이 아니다. 유일한 예외는 글로우 박스 - 사용자가
      명시적으로 "여긴 예외, 원래 색과 무관하게 화려한 멀티컬러 광채가
      3D의 정체성"이라고 못박음.
   c) 색이 필요하면 그 블록이 이미 갖고 있는 --dbk-*-color 변수를 그대로
      쓴다. 새 팔레트를 발명해서 사용자가 사이드바에서 고른 색을 무시하지
      않는다.
   d) 새 ::before/::after를 붙이기 전에 그 자리를 기본형이 이미 쓰고
      있는지 반드시 확인한다 - 한 요소에 ::after(또는 ::before)는 하나뿐이라,
      나중에 오는 더 높은 특이도의 규칙이 완전히 덮어써서 충돌한다(말풍선
      꼬리가 사라졌던 버그가 정확히 이 케이스였음).
   e) border-image는 이 파일 어디에도 쓰지 않는다(실사용자 화면에서
      의도보다 얇고 흐리게 깨지는 렌더링 버그가 확인됨) - 대신 겹치는
      ::before/::after 절대위치 요소에 background로 그린다.
   f) 딱딱한 단색 테두리/링보다 부드럽게 번지는 하이라이트-그림자 조합을
      우선한다 - 하드엣지는 "그냥 색선"으로 보이지 입체감으로 안 읽힌다.
      단, "얇은 두 줄"처럼 원래 가늘어야 하는 요소에 굵게 번지는 그림자를
      얹으면 오히려 뭉툭해 보이므로, 그런 경우는 블러 없는 깔끔한 선을 쓴다.
   g) 기본형(무료 CSS)은 이 세션에서 사용자가 명시적으로 지시한 경우가
      아니면 건드리지 않는다.
   h) 배포하는 zip마다 버전을 올리고 readme.txt에 원인까지 설명하는 영어
      체인지로그를 남기며, php -l / node --check / CSS 파싱 검증 / zip
      내용물 diff 검증을 모두 거친 뒤에만 전달한다.
*/

/* -----------------------------------------
   1-1-1. 말풍선 (Bubble) - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-bubble {
	--dbk-bubble-color: #111111;
	position: relative;
	max-width: 80%;
	width: fit-content;
	margin: 16px 0;
	padding: 14px 18px;
	border-radius: 18px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* 채움 (기본) - 배경을 색으로 꽉 채움 */
.dbk-bubble--filled {
	background: var(--dbk-bubble-color);
	color: #fff;
}

/* 윤곽선 - 배경은 흰색, 테두리와 글자만 색 (더 산뜻하고 가벼운 인상) */
.dbk-bubble--outline {
	background: #fff;
	color: var(--dbk-bubble-color);
	border: 2px solid var(--dbk-bubble-color);
}

/* [2026-09 수정] 파스텔 - 예전에는 무료 버전에 대응 CSS가 아예 없어서, 이 스타일을
   선택해도 배경/글자색에 아무 변화가 없는(사실상 깨진 것처럼 보이는) 문제가 있었음.
   무료 버전용으로 은은한 회색 톤 파스텔을 기본 제공하고, 3D 스타일 업그레이드
   (별도 구매)를 설치하면 실제 말풍선 색상에 맞춘 컬러 파스텔(+아바타 이미지)로
   업그레이드됨. [특이도 주의] 애드온의 .dbk-bubble--soft 규칙도 클래스 1개
   선택자라서, 여기도 반드시 클래스 1개(.dbk-bubble--soft)로 맞춰야 로드 순서대로
   애드온이 정상적으로 덮어씀. */
.dbk-bubble--soft {
	background: rgba(0,0,0,0.045);
	color: var(--dbk-bubble-color);
}

.dbk-bubble__content {
	flex: 1;
}
/* [2026-09 버그 수정] 예전에는 <p>만 상대로 여백을 지웠는데, 이 안의 글자를
   제목 태그(H2~H6, htmlTag 옵션)로 지정하면 <p>가 아니라 <h2>~<h6>가 그
   자리를 대신 차지한다. 그런데 브라우저/테마가 제목 태그에 기본으로 거는
   margin-top/margin-bottom은 대개 서로 다른 값(테마마다 제각각)이라, 이걸
   안 지워주면 박스 자체의 padding은 위아래가 똑같아도 글자가 위/아래 어느
   한쪽으로 쏠려 보이는 문제가 생긴다("세로 중심이 안 맞는다"는 게 바로 이
   증상). <p> 전용이던 선택자를 첫/마지막 "자식 전부"로 넓혀서, 어떤 태그가
   오든 항상 박스 padding만으로 정확히 대칭이 되게 한다. */
.dbk-bubble__content > *:first-child { margin-top: 0; }
.dbk-bubble__content > *:last-child { margin-bottom: 0; }

.dbk-bubble__avatar {
	/* 아바타는 3D 스타일 업그레이드 구매 항목 - 애드온 CSS가 로드되면 표시됨 */
	display: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* 좌측 말풍선 (꼬리가 좌측 하단) */
.dbk-bubble--left {
	margin-right: auto;
	border-bottom-left-radius: 4px;
}
.dbk-bubble--left.dbk-bubble--filled::after {
	content: '';
	position: absolute;
	left: 12px;
	bottom: -8px;
	border-width: 8px 8px 0 0;
	border-style: solid;
	border-color: var(--dbk-bubble-color) transparent transparent transparent;
}
.dbk-bubble--left.dbk-bubble--outline::after {
	content: '';
	position: absolute;
	left: 12px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: inherit;
	border-right: inherit;
	border-bottom: inherit;
	transform: rotate(45deg);
	border-radius: 0 0 3px 0;
}

/* 우측 말풍선 (꼬리가 우측 하단) */
.dbk-bubble--right {
	margin-left: auto;
	border-bottom-right-radius: 4px;
	flex-direction: row-reverse;
}
.dbk-bubble--right.dbk-bubble--filled::after {
	content: '';
	position: absolute;
	right: 12px;
	bottom: -8px;
	border-width: 8px 0 0 8px;
	border-style: solid;
	border-color: var(--dbk-bubble-color) transparent transparent transparent;
}
.dbk-bubble--right.dbk-bubble--outline::after {
	content: '';
	position: absolute;
	right: 12px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: inherit;
	border-left: inherit;
	border-bottom: inherit;
	transform: rotate(-45deg);
	border-radius: 0 0 0 3px;
}

/* -----------------------------------------
   1-1-2. 말풍선 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 - 스위치
   원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 수정] 이전 그림자가 너무 옅어서(특히 기본 검은색 말풍선에서)
   기본형과 실질적으로 구분이 안 갔음(실사용자 확인) - 그림자 불투명도/번짐을
   확실히 눈에 띄는 수준으로 올리고, 광택도 더 진하게.
   [2026-09-19 버그 수정] ::after로 ✨ 뱃지를 얹었더니, 말풍선 꼬리(위
   1-1-1의 .dbk-bubble--left/--right.dbk-bubble--filled/--outline::after,
   삼각형 border-width 트릭)도 똑같이 ::after 하나를 쓰고 있어서 서로 충돌
   - 한 요소에 ::after는 하나뿐이라, 특이도가 더 높은 이 규칙이 통째로
   덮어써서 말풍선 꼬리가 사라지고 그 자리에 이상한 도형(뱃지 잔재)만 보이는
   버그였음("V자 같은 게 왜 나오냐"는 바로 이 충돌). 뱃지를 완전히 빼서
   꼬리를 그대로 살림 - 입체감은 그림자/광택만으로 충분히 표현됨. */
.editor-styles-wrapper .dbk-bubble.dbk-3d-premium {
	position: relative;
	box-shadow: 0 6px 16px rgba(0,0,0,0.38), 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}
.editor-styles-wrapper .dbk-bubble.dbk-3d-premium::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	height: 42%;
	border-radius: 16px 16px 60% 60% / 16px 16px 70% 70%;
	background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0));
	pointer-events: none;
}

/* -----------------------------------------
   2-1-1. 섹션박스 (Box) - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-box {
	--dbk-box-color: #111111;
	margin: 20px auto;
	padding: 18px 20px;
	border-radius: 8px;
	background: #fff;
	max-width: 600px;
	text-align: center;
	width: fit-content;
	max-width: 100%;
}

.dbk-box__title {
	/* [2026-09-19 버그 수정] 이 제목은 이제 사용자가 골랐다면 실제 <h2>~<h6>
	   태그로도 렌더링될 수 있다(목차 자동 반영을 위해 - includes/
	   class-dbk-renderer.php의 resolve_title_tag() 참고). 브라우저 기본
	   스타일시트가 h2~h6에 자체 margin을 걸어두므로, 여기서 명시적으로
	   0으로 초기화하지 않으면 <div>였을 때는 없던 위아래 여백이 헤딩
	   태그를 고른 순간 갑자기 생겨버린다 - 태그가 뭐든 항상 이 박스의
	   padding만으로 여백이 결정되게 한다. */
	margin: 0;
	font-weight: 700;
	color: var(--dbk-box-color);
	font-size: 1.05em;
}
/* title 다음에 실제로 content가 있을 때만 사이 간격을 줌(인접 선택자) - PHP
   렌더러가 content 없이 title만 있으면 .dbk-box__content 자체를 아예 안 만드는
   것과 맞물려서, title만 있는 박스는 title에 불필요한 아래쪽 여백이 남지 않고
   위/아래 padding이 대칭을 유지함(항상 정확히 가운데). */
.dbk-box__title + .dbk-box__content {
	margin-top: 10px;
}

/* [2026-09 버그 수정] 말풍선과 동일한 이유 - <p> 전용이던 선택자를 자식 전부로
   넓혀서, 제목 태그(H2~H6)를 골랐을 때도 테마의 기본 여백 없이 박스 padding
   만으로 위아래가 정확히 대칭이 되게 한다. */
.dbk-box__content > *:first-child { margin-top: 0; }
.dbk-box__content > *:last-child { margin-bottom: 0; }

/* 왼쪽 정렬 - 박스 자체의 위치(가운데 정렬)는 그대로 두고 안쪽 글자만
   왼쪽으로 붙임. 박스의 기존 padding(18px 20px)이 그대로 유지되므로 글자가
   테두리에 딱 붙지 않고 항상 여유가 있음. */
.dbk-box.dbk-align-left {
	text-align: left;
}

.dbk-box--solid {
	border: 2px solid var(--dbk-box-color);
}

.dbk-box--shadow {
	border: 1px solid #eee;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.dbk-box--dashed {
	border: 2px dashed var(--dbk-box-color);
	background: transparent;
}

/* -----------------------------------------
   2-1-2. 섹션박스 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 - 스위치
   원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 수정] "검은 두꺼운 선 = 입체감"이 아니라 "옅은 색 + 음영으로
   박스가 도드라져 보여야 한다"는 지적(실사용자, 재차 확인) - 단색 이중 링
   (hard-edged solid ring)을 완전히 버리고, 흐릿하게 번지는 옅은 하이라이트
   (거의 흰색) + 부드럽게 번지는 그림자만으로 "빛을 받아 떠 있는 카드"처럼
   보이게 함. 색을 넣은 딱딱한 선이 전혀 없다. */
.editor-styles-wrapper .dbk-box.dbk-3d-premium {
	position: relative;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.85),
		0 1px 2px rgba(0,0,0,0.12),
		0 10px 22px rgba(0,0,0,0.3),
		inset 0 1px 0 rgba(255,255,255,0.55),
		inset 0 -10px 16px -10px rgba(0,0,0,0.18);
}

/* -----------------------------------------
   3-1-1. 커스텀 글머리기호 (Bullet List) - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-bullet-list {
	list-style: none;
	margin: 16px 0;
	padding: 0;
}

.dbk-bullet-list__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	line-height: 1.6;
}

.dbk-bullet-list__icon {
	flex-shrink: 0;
	line-height: 1.6;
}

/* -----------------------------------------
   3-1-2. 글머리기호 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 - 스위치
   원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   무지개 색 마커 아이콘 - 이 블록은 전용 색 변수(--dbk-*-color)가 없어서
   장식 전용 색을 쓴다(원칙 c의 예외 아님 - 애초에 사용자가 고르는 기존
   색상이 없는 요소). */
.editor-styles-wrapper .dbk-bullet-list--rainbow3d .dbk-bullet-list__icon {
	background-image: linear-gradient( 120deg, #FF6F91, #8C6FE6, #3FCFB4 );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow( 0 1px 1px rgba( 0, 0, 0, 0.15 ) );
}

/* -----------------------------------------
   4-1-1. 하이라이트 (형광펜) - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
mark.dbk-highlight {
	background: none;
	padding: 0 2px;
	border-radius: 2px;
}

.dbk-highlight.dbk-highlight--yellow {
	background: linear-gradient(transparent 60%, #FFF176 60%);
}

.dbk-highlight.dbk-highlight--green {
	background: linear-gradient(transparent 60%, #AED581 60%);
}

/* -----------------------------------------
   4-1-2. 하이라이트 3D 미리보기(그라데이션) [무료: 편집화면만 / 유료:
   발행까지 - 스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 수정] "그라데이션"이라면서 사용자가 고른 색과 무관한 4가지
   고정 색(핑크/보라/민트)을 늘어놓은 게 진짜 문제였음(실사용자 확인:
   "그라데이션의 뜻을 모르냐" - 그라데이션은 한 색이 옅어지거나 짙어지는
   것이지, 여러 무관한 색을 늘어놓는 게 아니라는 지적). 사이드바 "Gradient
   Color"로 고른 그 색 단 하나(--dbk-highlight-gradient-color)만 사용해서,
   그 색이 짙게 시작해 옅게 끝나는 진짜(단색) 그라데이션으로 바꿈 - 무관한
   고정값은 전혀 안 남기고 순수하게 사용자가 고른 색만 씀.
   [2026-09-19 방향 수정] 각도를 100deg(약간 아래로 기운 방향)에서 순수
   왼쪽→오른쪽인 90deg로 바꾸고, 밝음→진함이었던 순서를 반대로(진함→기본색→
   밝음) 뒤집음 - "사람들이 줄 그을 때 왼쪽에서 오른쪽으로 긋지 반대로 긋냐"는
   지적(실사용자)에 따름. */
.editor-styles-wrapper .dbk-highlight--gradient3d {
	/* color-mix()를 모르는 구형 브라우저를 위한 대체값 - 아래 규칙이 무효
	   처리되면 이 단색이 그대로 남는다(신형 브라우저는 아래 줄로 항상
	   덮어써짐). */
	background-image: linear-gradient( var(--dbk-highlight-gradient-color, #F5C400), var(--dbk-highlight-gradient-color, #F5C400) );
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--dbk-highlight-gradient-color, #F5C400) 75%, #000) 0%,
		var(--dbk-highlight-gradient-color, #F5C400) 45%,
		color-mix(in srgb, var(--dbk-highlight-gradient-color, #F5C400) 35%, #fff) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 42%;
	background-position: 0 100%;
	font-weight: 700;
}

/* -----------------------------------------
   5. 목차 (TOC) - 3D 미리보기 없음 (이 블록은 3D 스타일 업그레이드 대상이
   아니라서 -1/-2 페어가 존재하지 않음. 기본형이 무료/유료 구분 없이 항상
   동일하게 적용됨.)
   ----------------------------------------- */
.dbk-toc {
	margin: 20px auto;
	padding: 16px 20px;
	background: #F8F9FA;
	border-radius: 8px;
	border: 1px solid #E9ECEF;
	max-width: 480px;
	text-align: center;
}

.dbk-toc__title {
	font-weight: 700;
	margin-bottom: 10px;
}

.dbk-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	display: inline-block;
}

.dbk-toc__item {
	margin-bottom: 6px;
}

.dbk-toc__item a {
	color: inherit;
	text-decoration: none;
}
.dbk-toc__item a:hover {
	text-decoration: underline;
}

.dbk-toc__item--level-3 {
	padding-left: 16px;
	font-size: 0.95em;
}

/* -----------------------------------------
   6-1-1. 반짝이는(샤인) 텍스트 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-sparkle {
	--dbk-sparkle-color: #FFD700;
	position: relative;
	font-weight: 700;
	background: linear-gradient(
		100deg,
		currentColor 0%,
		currentColor 40%,
		var(--dbk-sparkle-color) 50%,
		currentColor 60%,
		currentColor 100%
	);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: dbk-shine 2.6s linear infinite;
}

@keyframes dbk-shine {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dbk-sparkle { animation: none; }
}

/* -----------------------------------------
   6-1-2. 반짝이는 텍스트 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   무관한 무지개 대신, 이미 설정된 --dbk-sparkle-color를 그대로 쓰되 흰색
   글린트를 한 번 더 지나가게 해서 "더 반짝이게"만 업그레이드(원칙 c 준수). */
.editor-styles-wrapper .dbk-sparkle--rainbow3d {
	background-image: linear-gradient(
		100deg,
		currentColor 0%,
		currentColor 25%,
		var(--dbk-sparkle-color) 42%,
		#fff 50%,
		var(--dbk-sparkle-color) 58%,
		currentColor 75%,
		currentColor 100%
	);
	background-size: 250% 100%;
	animation: dbk-shine 1.3s linear infinite;
}
/* 위 6-1-1의 reduced-motion 규칙은 .dbk-sparkle 클래스만 겨냥하므로, 특이도가
   더 높은 이 3D 클래스에는 안 먹는다 - 3D 전용으로 하나 더 필요. */
@media (prefers-reduced-motion: reduce) {
	.editor-styles-wrapper .dbk-sparkle--rainbow3d {
		animation: none;
	}
}

/* -----------------------------------------
   7-1-1. 빛나는(글로우) 박스 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-glow {
	--dbk-glow-color: #111111;
	position: relative;
	margin: 20px auto;
	padding: 18px 20px;
	border-radius: 10px;
	background: #fff;
	border: 2px solid var(--dbk-glow-color);
	max-width: 600px;
	text-align: center;
}

.dbk-glow__title {
	/* [2026-09-19 버그 수정] 섹션박스(위 .dbk-box__title)와 동일한 이유 - 헤딩
	   태그(H2~H6)로 렌더링될 수 있으므로 브라우저 기본 margin을 0으로
	   초기화해서, 태그가 뭐든 항상 박스 padding만으로 여백이 결정되게 한다. */
	margin: 0;
	font-weight: 700;
	color: var(--dbk-glow-color);
}
/* .dbk-box와 동일한 이유(위 참고) - title 다음에 실제 content가 있을 때만 간격을 줌 */
.dbk-glow__title + .dbk-glow__content {
	margin-top: 10px;
}

/* [2026-09 버그 수정] 말풍선/섹션박스와 동일한 이유 - <p> 전용이던 선택자를
   자식 전부로 넓혀서, 제목 태그(H2~H6)를 골랐을 때도 테마의 기본 여백 없이
   박스 padding만으로 위아래가 정확히 대칭이 되게 한다. */
.dbk-glow__content > *:first-child { margin-top: 0; }
.dbk-glow__content > *:last-child { margin-bottom: 0; }

/* 왼쪽 정렬 - .dbk-box와 동일: 박스 위치는 유지, 글자만 왼쪽으로 */
.dbk-glow.dbk-align-left {
	text-align: left;
}

/* [2026-09-19 수정] 기본형(무료)은 애니메이션 없이 정지해 있어야 하고, "점멸"은
   3D에서만 보여야 한다는 명확한 지시(실사용자)에 따라 펄스/트윙클 두 스타일 모두
   기본형 애니메이션을 제거함. (펄스라는 이름과는 별개로, "빛이 켜져 있다/은은하게
   보인다"는 box-shadow는 유지하되 움직이지는 않음 - 애니메이션 자체가 3D 전용.
   이전에 있던 @keyframes dbk-glow-pulse와 그 reduced-motion 예외는 더 이상
   어디서도 참조되지 않는 죽은 코드가 되어 이번 정리에서 함께 제거함.) */
.dbk-glow--pulse {
	box-shadow: 0 0 10px 2px var(--dbk-glow-color);
}

.dbk-glow--twinkle {
	box-shadow: 0 0 10px 2px var(--dbk-glow-color);
}

/* -----------------------------------------
   7-1-2. 글로우박스 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 - 스위치
   원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 수정] "기존 색 그대로 유지"(원칙 c) 원칙을 글로우에도 그대로
   적용했더니, 기본색이 검정(기본값)일 때 "검은 광채"가 되어 사실상 안
   보였고 기본형의 은은한 단색 펄스와 구분이 안 됐음. 실사용자 확인: 글로우
   박스는 예외적으로(원칙 b 참고) 화려한 멀티컬러 광채가 "3D"의 정체성이었음
   (기존 테두리 색은 그대로 두고, 광채만 컬러풀하게).
   [2026-09-19 추가 수정] "한 번에 한 색씩 바뀌는" 펄스가 아니라, 여러 색이
   동시에 겹쳐 보이는 진짜 "무지개" 광채를 원한다는 지적(실사용자) -
   box-shadow를 여러 겹(핑크/보라/민트 동시에) 쌓아서 한번에 여러 색이 같이
   빛나게 하고, 세기만 커졌다 작아졌다 펄스. 모서리에서 끊기던 이전 버그의
   원인이었던 background-clip 그라데이션 테두리 트릭은 쓰지 않고 box-shadow로만
   구현(모서리에서 안 끊기고, 작은 인서터 미리보기에서도 번짐이 있어 잘 보임).
   [2026-09-19 세 번째 수정] 7-1-1의 기본형 테두리(border: 2px solid
   var(--dbk-glow-color))가 3D에서도 그대로 남아있었는데, 이 변수의 기본값이
   검정(#111111)이라 대부분의 사용자 화면에서는 "무지개 광채 + 검은 테두리"가
   따로 놀아 지저분해 보인다는 지적(실사용자) - 3D는 원칙 b의 예외로 색 자체가
   무지개이므로, 사용자가 고른 단색 테두리와 섞이면 안 된다. 3D 클래스가 붙으면
   테두리를 투명하게 만들어(너비는 유지 - 박스 크기가 기본형과 3D 사이에서
   흔들리지 않도록) 무지개 box-shadow만 경계를 그리게 한다.
   [2026-09-19 네 번째 수정 - 색상 교체] 핑크/보라/민트 조합이 "어둡고
   조잡하다", "예전엔 옐로우/주황/골드/초록처럼 밝은 계열이었다"는 지적
   (실사용자) - "글로우(빛남)"라는 이름에 맞게 따뜻하고 밝은 골드/오렌지/
   그린 계열로 교체했다. 그린은 이 플러그인 기본 색상 팔레트(#7ED321)와
   같은 톤으로 맞춰 브랜드 색상과도 어긋나지 않게 함.
   [2026-09-19 다섯 번째 수정 - 진짜 색상 전환으로 재설계] 색상만 바꿨는데도
   "테두리 바깥이 무조건 노란색으로만 번쩍인다, 이 영역은 무지개로 전환되며
   반짝이는 영역이어야 한다"는 지적(실사용자) - 원인은 세 색 레이어가 항상
   "같은 비율"로 커졌다 작아지기만 해서(0%/50%/100% 전부 골드가 제일 진하고
   가깝고, 초록이 제일 흐리고 멀었음), 밝기만 바뀔 뿐 색 구성 비율은 절대
   안 바뀌어 눈에는 그냥 "골드가 항상 제일 센 고정된 노란빛"으로만 보였던
   것. 이제 키프레임 3단계(0%/33%/66%)마다 어떤 색이 "제일 크고 진하게"
   앞으로 나설지를 서로 바꿔가며 돌아가게 재설계 - 골드 → 오렌지 → 그린 →
   (다시 골드로 순환) 순서로 매 순간 다른 색이 도드라지도록 만들어, 실제로
   "무지개로 전환되며 반짝이는" 움직임이 눈에 보이게 했다. 색상 자체는 3번째
   수정의 골드/오렌지/그린을 그대로 유지. 전환이 부드럽게 읽히도록 주기도
   2초에서 3초로 늘림.
   [2026-09-19 여섯 번째 수정 - 색상 지정 모드 추가] "빨강을 지정하면 외부가
   빨강으로 네온처럼 빛나고, 보라를 지정하면 보라로... 무지개는 별도 옵션으로
   빼줘, 기본은 노랑/주황이 좋겠다"는 지적(실사용자) - 무지개는 이제 3D의
   유일한 정체성이 아니라, 두 가지 중 하나를 고르는 "옵션"이 됐다. 기본값은
   사용자가 지정한 단색을 네온처럼 빛나게 하는 .dbk-glow--neon3d(아래),
   무지개 다색 순환은 .dbk-glow--rainbow3d(위, 그대로 유지)로 남겨 명시적으로
   켠 사람만 보게 한다. 두 클래스는 편집기의 새 "3D Glow Color" 드롭다운
   값(glow3dRainbow 속성)에 따라 JS/PHP에서 양자택일로 붙는다(둘 다 동시에
   붙지 않음). ✨ 반짝임 장식과 prefers-reduced-motion 예외는 두 클래스 모두에
   공통으로 적용되도록 선택자를 합쳐뒀다. */
.editor-styles-wrapper .dbk-glow--rainbow3d {
	border-color: transparent;
	animation: dbk-glow-pulse3d 3s ease-in-out infinite;
}
@keyframes dbk-glow-pulse3d {
	0%, 100% {
		box-shadow:
			0 0 20px 5px rgba(255,215,0,.8),
			0 0 12px 2px rgba(255,159,69,.3),
			0 0 12px 2px rgba(126,211,33,.25),
			inset 0 1px 0 rgba(255,255,255,.3);
	}
	33% {
		box-shadow:
			0 0 12px 2px rgba(255,215,0,.3),
			0 0 20px 5px rgba(255,159,69,.8),
			0 0 12px 2px rgba(126,211,33,.25),
			inset 0 1px 0 rgba(255,255,255,.3);
	}
	66% {
		box-shadow:
			0 0 12px 2px rgba(255,215,0,.25),
			0 0 12px 2px rgba(255,159,69,.3),
			0 0 20px 5px rgba(126,211,33,.8),
			inset 0 1px 0 rgba(255,255,255,.3);
	}
}
/* [2026-09-19 여섯 번째 수정] 새 "지정 색상" 3D 모드 - 기본값. 편집기/렌더러가
   --dbk-glow-color3d 변수를 계산해서 넘겨준다(사용자가 고른 색을 그대로 쓰되,
   기본값인 검정(#111111)일 때만 예외적으로 밝은 주황(#FF9F45)으로 대체 - 검은
   네온은 안 보이므로). color-mix()로 같은 색을 불투명도만 다르게 세 겹 쌓아
   "네온사인"처럼 가운데는 진하고 바깥으로 갈수록 옅게 퍼지는 광채를 만든다. */
.editor-styles-wrapper .dbk-glow--neon3d {
	border-color: transparent;
	animation: dbk-glow-pulse3d-mono 2s ease-in-out infinite;
}
@keyframes dbk-glow-pulse3d-mono {
	0%, 100% {
		box-shadow:
			0 0 8px 1px var(--dbk-glow-color3d, #FF9F45),
			0 0 16px 4px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 70%, transparent),
			0 0 28px 8px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 40%, transparent),
			inset 0 1px 0 rgba(255,255,255,.3);
	}
	50% {
		box-shadow:
			0 0 14px 3px var(--dbk-glow-color3d, #FF9F45),
			0 0 26px 7px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 70%, transparent),
			0 0 42px 12px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 40%, transparent),
			inset 0 1px 0 rgba(255,255,255,.3);
	}
}
.editor-styles-wrapper .dbk-glow--rainbow3d::before,
.editor-styles-wrapper .dbk-glow--rainbow3d::after,
.editor-styles-wrapper .dbk-glow--neon3d::before,
.editor-styles-wrapper .dbk-glow--neon3d::after {
	content: '✨';
	position: absolute;
	font-size: 15px;
	line-height: 1;
	z-index: 2;
	animation: dbk-twinkle3d 1.6s ease-in-out infinite;
	pointer-events: none;
}
.editor-styles-wrapper .dbk-glow--rainbow3d::before,
.editor-styles-wrapper .dbk-glow--neon3d::before { top: 6px; left: 8px; }
.editor-styles-wrapper .dbk-glow--rainbow3d::after,
.editor-styles-wrapper .dbk-glow--neon3d::after { bottom: 6px; right: 8px; animation-delay: 0.8s; }
@keyframes dbk-twinkle3d {
	0%, 100% { opacity: 0.3; transform: scale( 0.8 ); }
	50%      { opacity: 1; transform: scale( 1.15 ); }
}
@media (prefers-reduced-motion: reduce) {
	.editor-styles-wrapper .dbk-glow--rainbow3d,
	.editor-styles-wrapper .dbk-glow--rainbow3d::before,
	.editor-styles-wrapper .dbk-glow--rainbow3d::after,
	.editor-styles-wrapper .dbk-glow--neon3d,
	.editor-styles-wrapper .dbk-glow--neon3d::before,
	.editor-styles-wrapper .dbk-glow--neon3d::after {
		animation: none;
	}
}

/* -----------------------------------------
   8. 자동 반복 폭죽 효과 - 3D CSS 없음 (이 블록의 "3D" 프리뷰는 색상 CSS가
   아니라 인서터에 표시되는 전용 SVG 아이콘 하나로 되어 있어서, 이 파일이
   아니라 assets/js/blocks-editor.js의 register3DVariation() 호출에서
   처리된다. 여기서는 캔버스/캡션 레이아웃만 담당.)
   ----------------------------------------- */
.dbk-firework-effect {
	position: relative;
	width: 100%;
	height: 160px;
	margin: 20px 0;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dbk-firework-effect__canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.dbk-firework-effect__caption {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: 1.1em;
	color: #333;
	pointer-events: none;
}

/* -----------------------------------------
   10-0. 인용구 (Quote) - 6개 하위 스타일이 공유하는 기반 CSS (무료: 편집·
   발행 모두 적용). 아래 10-1 ~ 10-6이 각 하위 스타일의 기본형/3D 쌍이다 -
   6종 전부 자기 요소·자기 색을 그대로 쓰고, 빛/그림자로만 입체감을 낸다
   (원칙 a, b 참고 - 서로 다른 스타일끼리 규칙을 공유하지 않는다).
   ----------------------------------------- */
.dbk-quote {
	--dbk-quote-color: #111111;
	/* [2026-09 버그 수정] 실제 luxdigest.com 발행 글에서 직접 확인한 문제 - 이 요소는
	   실제 <blockquote> 태그라서, 테마(luxdigest-theme)가 ".본문클래스 blockquote"
	   식으로 걸어둔 자기 기본 인용구 스타일(margin: 1.8em 0)과 항상 경쟁한다. 이
	   테마 선택자는 클래스 1개 + 태그 1개(blockquote)라서 특이도가 여기 있던
	   기존 규칙(클래스 1개)보다 높고, 테마 스타일시트가 이 플러그인 CSS보다 항상
	   나중에 로드되기 때문에(워드프레스가 플러그인 스타일을 테마보다 먼저 큐에
	   넣음), 순서상으로도 테마가 이긴다 - 그 결과 여기서 24px auto로 의도한
	   위아래 여백이 실제 발행 화면에서는 테마의 1.8em 0(약 43px, 값 자체는 다름)으로
	   조용히 덮어써져서, 편집화면에서 보던 여백과 실제 발행된 페이지의 여백이
	   달라지는 원인이 됐다. !important로 확실히 지킨다(아래 border에 이미 똑같은
	   이유로 !important가 붙어있던 것과 동일한 원칙 - 3D 애드온은 margin을 건드리지
	   않으므로 이 !important가 애드온 동작을 막지 않는다). */
	margin: 24px auto !important;
	padding: 0;
	text-align: center;
	/* 이 요소는 실제 <blockquote> 태그라서, 테마가 blockquote에 자체적으로
	   걸어둔 border/background(흔히 있는 "인용구는 왼쪽에 색깔 선" 같은 기본
	   디자인)를 그대로 물려받을 수 있음 - 그러면 라인프레임처럼 위/아래 선만
	   써야 하는 스타일에, 의도하지 않은 왼쪽 선이 테마 쪽에서 새어 들어와
	   붙어버림. 아래 6가지 스타일이 자기 border/background를 전부 명시적으로
	   직접 정의하므로, 여기서 먼저 깨끗하게 초기화해서 테마 기본값이 섞여
	   들어올 여지를 없앰.

	   border는 !important를 붙임 - 많은 테마가 blockquote 기본 스타일을
	   ".entry-content blockquote"처럼 조상 클래스와 결합한 선택자로 걸어두는
	   경우가 흔한데, 그러면 특이도(specificity)가 이 규칙(클래스 1개, 0-1-0)
	   보다 높아져서, !important 없이는 테마 쪽이 순서와 무관하게 이겨버린다 -
	   그 결과 코너 프레임/포스트잇처럼 기본형에서 의도적으로 테두리가 없어야
	   하는 스타일에 테마의 기본 좌측 선(흔히 포인트 색상, 빨간색인 사이트도 많음)이
	   그대로 남아 "왼쪽에 정체불명의 선 하나만 그어진" 것처럼 보이는 문제가
	   있었음. 아래 .dbk-quote--classic / --line-frame처럼 자기만의 테두리를
	   직접 정의하는 스타일도, 그 규칙에 똑같이 !important를 붙여서(이 파일
	   안에서 항상 이 규칙보다 뒤에 오므로 순서상으로도 이기지만, 혹시 모를
	   테마의 고특이도 선택자까지 확실히 이기도록) 이중으로 방어함.
	   background는 !important를 붙이지 않음 - 코너 프레임의 3D(유료 애드온)
	   버전은 실제로 background-image를 이 요소 자체에 그려야 하므로, 여기서
	   !important를 걸면 그 정상적인 장식까지 막혀버림(애드온 스타일시트가
	   항상 이 파일 뒤에 로드되도록 의존성을 걸어뒀으므로, !important 없이도
	   순서상 애드온이 안전하게 이김 - decoblocks-3d-style-upgrade.php의
	   register_styles() 참고).
	*/
	border: none !important;
	background: none;
}
/* 왼쪽 정렬 - box/glow와 동일한 원칙: blockquote 자체의 위치는 그대로 두고
   안쪽 글자만 왼쪽으로. 각 스타일이 이미 자기 padding을 갖고 있어서
   (예: line-frame 24px 32px) 글자가 테두리에 딱 붙지 않고 여유가 유지됨. */
.dbk-quote.dbk-align-left {
	text-align: left;
}
.dbk-quote__content {
	font-size: 1.35em; /* 인용구는 주제 타이틀 성격이라 본문보다 확실히 크게 */
	font-weight: 600;
	line-height: 1.5;
}
/* [2026-09 버그 수정] 말풍선/섹션박스/글로우박스와 동일한 이유 - 라인프레임
   등 위아래 선(테두리)만으로 짜인 스타일은 이 문제가 특히 눈에 잘 띈다(예:
   padding은 24px 24px로 대칭인데, 제목 태그의 테마 기본 여백 때문에 글자가
   위/아래 어느 한쪽으로 쏠려 보임). <p> 전용이던 선택자를 자식 전부로 넓혀서
   해결한다. */
.dbk-quote__content > *:first-child { margin-top: 0; }
.dbk-quote__content > *:last-child { margin-bottom: 0; }
.dbk-quote__attribution {
	display: block;
	margin-top: 10px;
	font-size: 0.6em; /* 본문 대비 작고 옅게 - 출처는 어디까지나 보조 정보 */
	color: #999;
	font-style: normal;
	font-weight: 400;
	opacity: 0.85;
}
.dbk-quote__attribution:empty::before {
	content: attr(data-placeholder);
	color: #bbb;
}

/* -----------------------------------------
   10-1-1. 인용구 - 클래식 - 기본형 (무료: 편집·발행 모두 적용)
   -----------------------------------------
   [2026-09-19 두 번째 재설계 - 명시적 지시(실사용자)로 기본형 변경, 원칙 g의
   예외] 사방을 꽉 채운 단순 테두리 박스로 바꿨더니, 이번엔 "섹션박스랑
   똑같잖아"라는 지적 - 그냥 네모난 테두리는 섹션박스(2-1)의 실루엣과
   구분이 안 됐다. 사용자가 직접 그려준 모양("[ 텍스트 ]" - 양쪽을 대괄호
   처럼 감싸는 형태)대로 다시 만든다: 사방을 막는 완전한 사각 테두리가
   아니라, 왼쪽엔 "[" 모양(위/왼쪽/아래 3면만 있는 꺾쇠), 오른쪽엔 "]"
   모양(위/오른쪽/아래 3면만 있는 꺾쇠)을 각각 ::before/::after로 만들어
   텍스트를 양쪽에서 감싸는 클래식한 "북마크/인용" 느낌을 낸다 - 세로바
   (막대 1개), 섹션박스(사방 막힌 사각), 큰따옴표(글자 장식) 중 어느
   것과도 실루엣이 겹치지 않는, 이 스타일만의 고유한 모양이다.

   [2026-09 버그 수정, 계속 유효] 이 요소는 실제 <blockquote> 태그라서, 테마의
   ".본문클래스 blockquote"(클래스 1개+태그 1개, 특이도 더 높음 + 더 늦게 로드)가
   padding을 덮어쓰는 문제가 있었다(luxdigest.com 발행 글에서 직접 확인) - 선택자를
   ".dbk-quote.dbk-quote--*"(클래스 2개)로 묶어 특이도를 올려서 방어한다. 꺾쇠는
   실제 element border가 아니라 ::before/::after의 border라서, 10-0의
   ".dbk-quote { border: none !important; }"(blockquote 자기 자신의 테두리만
   지움)와 애초에 부딪히지 않는다 - 그래서 여기는 !important가 필요 없다. */
.dbk-quote.dbk-quote--classic {
	position: relative;
	padding: 18px 34px;
}
.dbk-quote--classic .dbk-quote__content {
	font-style: italic;
	color: #333;
}
.dbk-quote.dbk-quote--classic::before,
.dbk-quote.dbk-quote--classic::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 14px;
	border: 3px solid var(--dbk-quote-color);
	pointer-events: none;
}
.dbk-quote.dbk-quote--classic::before {
	left: 0;
	border-right: none;
}
.dbk-quote.dbk-quote--classic::after {
	right: 0;
	border-left: none;
}

/* -----------------------------------------
   10-1-2. 인용구 - 클래식 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 두 번째 재설계] 위 10-1-1이 이제 고유한 "[ ]" 꺾쇠 모양이므로,
   3D는 그 모양을 하나도 바꾸지 않고 빛/그림자만 얹는다(원칙 b). 꺾쇠 테두리
   자체에 위쪽은 밝게 아래쪽은 어둡게 색을 나눠 입혀(border-top-color /
   border-bottom-color) 단면이 입체적으로 깎인 느낌을 내고, 바깥쪽에 옅은
   드롭 섀도를 더해 꺾쇠가 살짝 떠 보이게 한다. 이전에 있던 좌상단/우하단
   장식 인용부호(::before/::after 텍스트 글리프)는 "따옴표 없애라"는 지적
   (실사용자)에 따라 계속 제거된 상태로 둔다 - 꺾쇠 자체가 이미 장식이다.
   [2026-09-19 세 번째 수정] "좌우 꺾쇠만 도드라지고 그 사이(중간)는 음영이
   끊겨서 하나로 안 이어진다"는 지적(실사용자, "[ ] 사이에 음영이 이어지면서
   전체적으로 도드라져야지") - 이전엔 ::before/::after(꺾쇠)에만 음영을
   줘서, 꺾쇠 두 개가 따로 떠 있고 그 사이 텍스트 영역은 완전히 평평했다.
   인용구 요소 자체(블록쿼트 전체)에도 섹션박스/세로바와 같은 방식의 부드러운
   box-shadow를 추가해서, 꺾쇠부터 중간 텍스트 영역까지 하나로 이어지는
   연속된 입체감이 되게 한다.
   [2026-09-19 다섯 번째 수정] 위에서 전체 요소에 box-shadow를 추가했더니,
   각 꺾쇠(::before/::after)가 "자기 자신만의" box-shadow(2px 3px 5px)를
   여전히 따로 갖고 있어서 - 전체 박스 그림자 위에 꺾쇠 각각의 그림자가 한 겹
   더 겹쳐, "박스 하나 위에 꺾쇠 박스가 또 한 단 떠 있는" 이중 레이어처럼
   보인다는 지적(실사용자, "안쪽 음영을 놔둬서... 또 한단 위로 올라와 있는
   듯한 느낌"). 꺾쇠 자신의 개별 box-shadow는 제거하고, 꺾쇠의 입체감은
   위/아래 테두리 색을 밝게/어둡게 나눈 것(border-top-color/
   border-bottom-color)만으로 표현한다 - 전체 요소의 box-shadow 한 겹만
   남겨서, 꺾쇠와 중간 영역이 정말로 하나의 연속된 표면처럼 보이게 한다. */
.editor-styles-wrapper .dbk-quote.dbk-quote--classic.dbk-3d-premium {
	box-shadow:
		0 1px 2px rgba(0,0,0,0.1),
		0 8px 18px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.3);
}
.editor-styles-wrapper .dbk-quote.dbk-quote--classic.dbk-3d-premium::before,
.editor-styles-wrapper .dbk-quote.dbk-quote--classic.dbk-3d-premium::after {
	border-top-color: color-mix(in srgb, var(--dbk-quote-color) 60%, #fff);
	border-bottom-color: color-mix(in srgb, var(--dbk-quote-color) 55%, #000);
}
.editor-styles-wrapper .dbk-quote.dbk-quote--classic.dbk-3d-premium::before {
	border-left-color: color-mix(in srgb, var(--dbk-quote-color) 60%, #fff);
}
.editor-styles-wrapper .dbk-quote.dbk-quote--classic.dbk-3d-premium::after {
	border-right-color: color-mix(in srgb, var(--dbk-quote-color) 60%, #fff);
}

/* -----------------------------------------
   10-2-1. 인용구 - 큰따옴표 - 기본형 (무료: 편집·발행 모두 적용)
   -----------------------------------------
   워드프레스 기본 "인용구" 블록의 그 느낌을, DecoBlocks 자체 스타일로 진짜 구현 */
.dbk-quote.dbk-quote--quotation-marks {
	position: relative;
	padding: 20px 44px 24px 52px;
	background: rgba(0,0,0,0.02);
	border-radius: 10px;
}
.dbk-quote--quotation-marks::before {
	content: '\201C';
	position: absolute;
	top: -6px;
	left: 12px;
	font-size: 64px;
	line-height: 1;
	font-family: Georgia, 'Times New Roman', serif;
	color: var(--dbk-quote-color);
	opacity: 0.35;
}
.dbk-quote--quotation-marks::after {
	content: '\201D';
	position: absolute;
	bottom: -28px;
	right: 12px;
	font-size: 64px;
	line-height: 1;
	font-family: Georgia, 'Times New Roman', serif;
	color: var(--dbk-quote-color);
	opacity: 0.35;
}
.dbk-quote--quotation-marks .dbk-quote__content {
	font-style: italic;
	color: #333;
	position: relative;
	z-index: 1;
}

/* -----------------------------------------
   10-2-2. 인용구 - 큰따옴표 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지
   - 스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   색은 그대로(var(--dbk-quote-color)), 완전히 불투명하게 + 양각(embossed)
   그림자로 도드라지게. */
.editor-styles-wrapper .dbk-quote--quotation-marks.dbk-3d-premium::before,
.editor-styles-wrapper .dbk-quote--quotation-marks.dbk-3d-premium::after {
	opacity: 1;
	text-shadow: -1px -1px 0 rgba(255,255,255,.55), 2px 3px 4px rgba(0,0,0,.35);
}

/* -----------------------------------------
   10-3-1. 인용구 - 세로바 - 기본형 (무료: 편집·발행 모두 적용)
   -----------------------------------------
   끝이 둥글게 처리된 두꺼운 색상 바 (네이버 블로그 인용구 특유의 디테일) */
.dbk-quote.dbk-quote--vertical-bar {
	position: relative;
	padding: 8px 0 8px 30px;
}
.dbk-quote--vertical-bar::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 8px;
	border-radius: 4px;
	background: var(--dbk-quote-color);
}
.dbk-quote--vertical-bar .dbk-quote__content {
	font-weight: 600;
}

/* -----------------------------------------
   10-3-2. 인용구 - 세로바 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 두 번째 재설계] "막대는 그대로 앞에 두면서 박스 전체에도
   음영을 줘야 한다"는 지적(실사용자, "쿼티박스 3D 항목에 버티컬 바만
   붙여버리면 되는거잖아") - 이전엔 막대(::before) 자체의 하이라이트/그림자만
   강화했는데, 이제 인용구 요소 자체(.dbk-quote--vertical-bar.dbk-3d-premium)
   에도 클래식/섹션박스와 같은 "박스 전체가 떠 보이는" soft box-shadow를
   추가한다 - 막대는 막대대로 유지하고, 그 위에 박스 전체 음영이 더해지는
   구조.
   [2026-09-19 색상 정리] "다른 색을 고르면 왜 검은색이 그라데이션 시작점에
   있어서 지저분하냐"는 지적(실사용자) - 원인은 막대 표면에 rgba(0,0,0,x)를
   반투명 레이어로 겹겹이 얹는 방식이, 채도 높은 색 위에서는 색과 분리된
   "회색/검은 얼룩"처럼 보였기 때문. Highlight(4-1-2)에서 이미 쓴 것과 같은
   color-mix() 방식으로 바꿔서, 막대 표면 자체가 "그 색의 연한 톤 → 그 색
   그대로 → 그 색의 짙은 톤"으로만 이어지는 순수한 단색 그라데이션이 되게
   했다(검은/흰색이 별도 레이어로 섞이지 않음). 막대 둘레의 검은 테두리 링도
   같은 이유로 제거 - 대신 옅은 앰비언트 드롭 섀도(막대 자체 색이 아니라
   막대가 배경 위에 드리우는 그림자이므로 검은 계열이어도 자연스럽다)만
   남긴다. */
.editor-styles-wrapper .dbk-quote--vertical-bar.dbk-3d-premium {
	position: relative;
	box-shadow:
		0 1px 2px rgba(0,0,0,0.1),
		0 8px 18px rgba(0,0,0,0.22),
		inset 0 1px 0 rgba(255,255,255,0.35);
}
/* [2026-09-19 네 번째 수정] color-mix로 바꾼 뒤에도 "색을 바꿔보면 막대 뿌리
   (아래쪽)가 검게 보인다"는 지적(실사용자) - 원인 두 가지를 같이 고쳤다:
   (1) 아래쪽 끝의 color-mix가 색 60%/검정 40%로, 채도가 낮은 색에서는 거의
   검정으로 읽힐 만큼 어두웠음 - 색 78%/검정 22%로 완화해서 "그 색의 짙은
   톤"이 여전히 "그 색"으로 보이게 함. (2) 막대 바깥의 앰비언트 드롭
   섀도(box-shadow)가 꽤 진하고 번짐이 커서(8px 블러, .35 불투명도) 막대
   아래쪽의 어두운 그라데이션과 겹쳐 보이며 "검은 덩어리"처럼 뭉쳐 보이는
   데 일조했음 - 블러와 불투명도를 모두 낮춰 막대 자체의 색 그라데이션과
   섞여 보이지 않게 했다. */
.editor-styles-wrapper .dbk-quote--vertical-bar.dbk-3d-premium::before {
	width: 10px;
	border-radius: 5px;
	background: var(--dbk-quote-color); /* color-mix 미지원 구형 브라우저용 단색 대체값 */
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--dbk-quote-color) 55%, #fff) 0%,
		var(--dbk-quote-color) 50%,
		color-mix(in srgb, var(--dbk-quote-color) 78%, #000) 100%
	);
	box-shadow: 2px 3px 5px rgba(0,0,0,.25);
}

/* -----------------------------------------
   10-4-1. 인용구 - 라인 프레임 - 기본형 (무료: 편집·발행 모두 적용)
   -----------------------------------------
   위아래 두꺼운 선 */
.dbk-quote.dbk-quote--line-frame {
	padding: 24px 32px;
	border-top: 3px solid var(--dbk-quote-color) !important;
	border-bottom: 3px solid var(--dbk-quote-color) !important;
}

/* -----------------------------------------
   10-4-2. 인용구 - 라인 프레임 - 3D 미리보기 [무료: 편집화면만 / 유료:
   발행까지 - 스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 네 번째 재설계] "얇은 선 두줄을 위아래로 적용하라고 했는데
   왜 계속 굵은 선이 나오냐"는 지적이 3px로 줄인 뒤에도 두 번 반복됨
   (실사용자, 재차 확인). 원인 진단: 높이(height) 자체는 3px로 얇았지만,
   그 위에 얹은 box-shadow(0 2px 3px 블러)가 선 바깥으로 번지면서 시각적으로
   "두꺼운 하나의 덩어리"처럼 보이게 만들고 있었음 - 즉 두께 문제가 아니라
   블러 그림자가 선의 체감 두께를 부풀리는 문제였다(원칙 f에 이미 있던
   "얇은 두 줄에는 블러 없는 깔끔한 선을 쓴다"는 원칙을 이번에 실제로
   적용). box-shadow를 완전히 제거하고, 높이도 3px→2px로 한 번 더 줄여서
   확실히 "가는 두 줄"로 보이게 했다.
   [2026-09-19 다섯 번째 재설계] 얇아지긴 했지만 선이 박스 padding 경계에
   딱 붙어 있어서 "붙은 것도 떨어진 것도 아닌 애매한 느낌"이라는 지적(실
   사용자) - 선을 박스 바깥으로 살짝(6px) 밀어내 텍스트/박스와 분명한
   간격을 두고 "떠 있는 프레임"처럼 보이게 했다. 이 여백은 .dbk-quote의
   바깥 margin(24px) 안쪽이라 인서터의 작은 호버 미리보기에서도 잘리지
   않는다. 입체감은 각 선 내부에서 위는 밝게 아래는 어둡게 흐르는 얇은
   그라데이션만으로 표현한다(선 바깥으로 번지지 않으므로 두께가 부풀지
   않음). */
.editor-styles-wrapper .dbk-quote--line-frame.dbk-3d-premium {
	position: relative;
}
.editor-styles-wrapper .dbk-quote--line-frame.dbk-3d-premium::before,
.editor-styles-wrapper .dbk-quote--line-frame.dbk-3d-premium::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
		var(--dbk-quote-color);
}
.editor-styles-wrapper .dbk-quote--line-frame.dbk-3d-premium::before {
	top: -6px;
}
.editor-styles-wrapper .dbk-quote--line-frame.dbk-3d-premium::after {
	bottom: -6px;
}

/* -----------------------------------------
   10-5-1. 인용구 - 포스트잇 - 기본형 (무료: 편집·발행 모두 적용)
   -----------------------------------------
   [2026-09-19 재설계 - 명시적 지시(실사용자)로 기본형 색상 변경, 원칙 g의
   예외] 예전 무료 배경(#F8F7F2, 거의 흰색에 가까운 아주 옅은 회색)이
   "색을 넣은 것도 안 넣은 것도 아닌 애매한 방식"이라는 지적 - 포스트잇이면
   눈에 띄게 포스트잇 색이어야지, 알아보기 힘들 만큼 옅게 타협하지 말라는
   것. 뚜렷하게 보이는 실제 파스텔 노랑(#FFF3B0)으로 바꿨다 - 3D 스타일
   업그레이드(별도 구매)가 주는 입체 그라데이션·모서리 접힘 효과와는 여전히
   다르지만(아래 10-5-2 참고), 색 자체는 이제 확실히 "포스트잇"으로 보인다.

   [특이도 주의] 여기 일부러 ".dbk-quote.dbk-quote--postit"(클래스 2개)가 아니라
   ".dbk-quote--postit"(클래스 1개)만 씀 - 3D 스타일 업그레이드 애드온의
   assets/style.css도 이 두 스타일에는 클래스 1개짜리 선택자(.dbk-quote--postit,
   .dbk-quote--corner-frame)를 쓰고 있어서, 특이도를 동일하게 맞춰야만 "나중에
   로드되는 CSS가 이긴다"는 로드 순서 규칙대로 애드온이 이 무료 규칙을 정상적으로
   덮어씀. 여기서 클래스 2개를 쓰면 특이도가 더 높아져서, 라이선스를 구매한
   사이트에서도 애드온의 실제 디자인(노란 포스트잇 색 등)이 절대 적용되지 않는
   버그가 생기므로 반드시 클래스 1개로 유지할 것. */
.dbk-quote--postit {
	padding: 24px 28px;
	background: #FFF3B0;
	box-shadow: 1px 2px 6px rgba(0,0,0,0.10);
}

/* -----------------------------------------
   10-5-2. 인용구 - 포스트잇 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지
   - 스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   [2026-09-19 수정, 세 번째 반복 지적 반영] "포스트잇은 기본형부터 이미
   색이 들어가 있다 - 3D는 색을 넣는 게 아니라 이미 있는 그 색에 음영을 더
   도드라지게 주는 것"이라는 지적(실사용자) - 색조 자체는 유지하되, 입체
   신호를 진짜 종이가 살짝 들려 있는 것처럼 보이도록 상단 하이라이트/하단
   그림자를 훨씬 강하게 줌. 위 10-5-1에서 기본형 색 자체가 더 뚜렷한
   노랑(#FFF3B0)으로 바뀐 뒤에도 이 원칙은 그대로 - 3D 그라데이션(더 밝은
   크림→더 짙은 노랑)은 색을 "추가"하는 게 아니라 기본형 색 위에 종이
   질감의 미묘한 명암 단계만 더하는 것이라 여전히 자연스럽게 이어진다. */
.editor-styles-wrapper .dbk-quote--postit.dbk-3d-premium {
	position: relative;
	background: linear-gradient(155deg, #FFFDE7 0%, #FFF59D 55%, #FFE985 100%);
	box-shadow:
		3px 6px 14px rgba(0,0,0,0.3),
		inset 0 2px 0 rgba(255,255,255,.85),
		inset 0 -10px 14px -10px rgba(0,0,0,0.15);
}
.editor-styles-wrapper .dbk-quote--postit.dbk-3d-premium::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 20px 0;
	border-color: transparent rgba(0,0,0,0.2) transparent transparent;
}

/* -----------------------------------------
   10-6-1. 인용구 - 모서리 프레임 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-quote--corner-frame {
	position: relative;
	padding: 24px 28px;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color)),
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color)),
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color)),
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color));
	background-size:
		16px 1px, 1px 16px,
		16px 1px, 1px 16px;
	background-position:
		top right, top right,
		bottom left, bottom left;
	opacity: 1;
}

/* -----------------------------------------
   10-6-2. 인용구 - 모서리 프레임 - 3D 미리보기 [무료: 편집화면만 / 유료:
   발행까지 - 스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   브래킷 4개는 색·위치·개수 전부 기본형과 동일(var(--dbk-quote-color)),
   두께만 키우고(1px→3px) 박스 전체에 elevation 그림자를 더해 입체감을 낸다.
   색 자체를 바꾸지 않으므로 사용자가 고른 색과 100% 일관됨(원칙 c). */
.editor-styles-wrapper .dbk-quote--corner-frame.dbk-3d-premium {
	box-shadow: 2px 4px 10px rgba(0,0,0,0.18);
	background-image:
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color)),
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color)),
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color)),
		linear-gradient(var(--dbk-quote-color), var(--dbk-quote-color));
	background-size:
		24px 3px, 3px 24px,
		24px 3px, 3px 24px;
	background-position:
		top right, top right,
		bottom left, bottom left;
	background-repeat: no-repeat;
}

/* -----------------------------------------
   11-0. 구분선 (Divider) - 7개 하위 스타일이 공유하는 기반 CSS (무료: 편집·
   발행 모두 적용). 아래 11-1 ~ 11-7이 각 하위 스타일의 기본형/3D 쌍이다 -
   7종 전부 자기 요소·자기 색(var(--dbk-divider-color))을 그대로 쓰고,
   빛/그림자로만 "튀어나온" 입체감을 낸다. 색을 새로 발명하지 않는다
   (원칙 a, c 참고).
   ----------------------------------------- */
.dbk-divider {
	--dbk-divider-color: #111111;
	position: relative;
	margin: 28px 0;
	height: 0;
	border-top: 1px solid var(--dbk-divider-color);
}

/* -----------------------------------------
   11-1-1. 구분선 - 실선 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-divider--solid {
	border-top-width: 1px;
	border-top-style: solid;
}

/* -----------------------------------------
   11-1-2. 구분선 - 실선 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   광택 바(위는 밝게, 아래는 어둡게) + 살짝 뜬 그림자로 "돌출된 바" 느낌 */
.editor-styles-wrapper .dbk-divider--solid.dbk-divider--3d {
	border-top: none;
	height: 4px;
	border-radius: 2px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%),
		var(--dbk-divider-color);
	box-shadow: 0 2px 3px rgba(0,0,0,.2);
}

/* -----------------------------------------
   11-2-1. 구분선 - 파선 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-divider--dashed {
	border-top-style: dashed;
}

/* -----------------------------------------
   11-2-2. 구분선 - 파선 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   같은 색의 두꺼운 대시 + 위/아래 얇은 하이라이트·그림자 선으로 입체감 */
.editor-styles-wrapper .dbk-divider--dashed.dbk-divider--3d {
	border-top: none;
	height: 4px;
	border-radius: 2px;
	background-image: repeating-linear-gradient(90deg, var(--dbk-divider-color) 0 14px, transparent 14px 22px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.15);
}

/* -----------------------------------------
   11-3-1. 구분선 - 점선 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-divider--dotted {
	border-top-style: dotted;
}

/* 실선/점선/파선의 입체(3D) 처리는 위 11-1-2/11-2-2와 아래 11-3-2를 참고. */

/* -----------------------------------------
   11-3-2. 구분선 - 점선 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   같은 색의 점 + 점마다 작은 하이라이트를 얹어 "구슬" 같은 광택 */
.editor-styles-wrapper .dbk-divider--dotted.dbk-divider--3d {
	border-top: none;
	height: 5px;
	background-image:
		radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), transparent 45%),
		radial-gradient(circle, var(--dbk-divider-color) 45%, transparent 48%);
	background-size: 16px 5px, 16px 5px;
	background-position: 0 0, 0 0;
	background-repeat: repeat-x, repeat-x;
	box-shadow: 0 2px 3px rgba(0,0,0,.12);
}

/* -----------------------------------------
   11-4-1. 구분선 - 다이아몬드 - 기본형 (무료: 편집·발행 모두 적용)
   -----------------------------------------
   [2026-09 수정] 예전에는 이 장식 자체를 화면에 배치하는 구조적 CSS(위치
   지정 등)가 무료 버전에 전혀 없어서, 렌더러가 출력하는 ◆ 글자가 줄 위에
   아무렇게나(또는 겹쳐서) 떠 있는 것처럼 깨져 보였음(장식이 "없는" 게 아니라
   "잘못 배치된" 상태였음). 배치/구조는 무료 버전에서도 정상 동작하도록
   추가하고, 그라데이션·그림자·애니메이션 같은 화려한 입체 처리만 3D의 몫으로
   남김. */
.dbk-divider--diamond {
	border-top-style: solid;
}
.dbk-divider--diamond .dbk-divider__ornament {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 0 10px;
	color: var(--dbk-divider-color);
	font-size: 0.8em;
}

/* -----------------------------------------
   11-4-2. 구분선 - 다이아몬드 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지
   - 스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   선은 살짝 두껍게만, 자기 ◆ 장식은 같은 색 그대로 확대 + 양각 그림자로 도드라지게 */
.editor-styles-wrapper .dbk-divider--diamond.dbk-divider--3d {
	border-top-width: 2px;
}
.editor-styles-wrapper .dbk-divider--diamond.dbk-divider--3d .dbk-divider__ornament {
	font-size: 1.3em;
	text-shadow: -1px -1px 0 rgba(255,255,255,.6), 1px 2px 3px rgba(0,0,0,.4);
}

/* -----------------------------------------
   11-5-1. 구분선 - 화살표 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-divider--arrow {
	border-top-style: solid;
}
.dbk-divider--arrow .dbk-divider__ornament {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 0 8px;
	color: var(--dbk-divider-color);
	font-size: 0.9em;
	line-height: 1;
}

/* -----------------------------------------
   11-5-2. 구분선 - 화살표 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   같은 처리(다이아몬드와 동일한 양각 그림자) + 위아래로 살짝 통통 튀는
   애니메이션으로 다이아몬드와 구분 */
.editor-styles-wrapper .dbk-divider--arrow.dbk-divider--3d {
	border-top-width: 2px;
}
.editor-styles-wrapper .dbk-divider--arrow.dbk-divider--3d .dbk-divider__ornament {
	font-size: 1.15em;
	text-shadow: -1px -1px 0 rgba(255,255,255,.6), 1px 2px 3px rgba(0,0,0,.4);
	animation: dbk-divider-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes dbk-divider-arrow-bounce {
	0%, 100% { transform: translate(-50%, -50%) translateY(0); }
	50%      { transform: translate(-50%, -50%) translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
	.editor-styles-wrapper .dbk-divider--arrow.dbk-divider--3d .dbk-divider__ornament {
		animation: none;
	}
}

/* -----------------------------------------
   11-6-1. 구분선 - 슬래시 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-divider--slash {
	border-top: none;
	height: 20px;
}
.dbk-divider--slash .dbk-divider__ornament--slash {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 20px;
	background: var(--dbk-divider-color);
	transform: translate(-50%, -50%) rotate(20deg);
}

/* -----------------------------------------
   11-6-2. 구분선 - 슬래시 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   자기 대각선 막대를 두껍게 + 같은 색에 광택/그림자 */
.editor-styles-wrapper .dbk-divider--slash.dbk-divider--3d .dbk-divider__ornament--slash {
	width: 3px;
	border-radius: 2px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%),
		var(--dbk-divider-color);
	box-shadow: 1px 1px 2px rgba(0,0,0,.25);
}

/* -----------------------------------------
   11-7-1. 구분선 - 눈금 - 기본형 (무료: 편집·발행 모두 적용)
   ----------------------------------------- */
.dbk-divider--tick {
	border-top: none;
	height: 16px;
}
.dbk-divider--tick .dbk-divider__ornament--tick {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 16px;
	background: var(--dbk-divider-color);
	transform: translate(-50%, -50%);
}

/* -----------------------------------------
   11-7-2. 구분선 - 눈금 - 3D 미리보기 [무료: 편집화면만 / 유료: 발행까지 -
   스위치 원리는 파일 최상단 "0. 공통 규칙" 참고]
   -----------------------------------------
   자기 눈금을 두껍게(광택/그림자) + 양옆에 같은 색 보조 눈금 2개로 "측정
   눈금 다발" 느낌 */
.editor-styles-wrapper .dbk-divider--tick.dbk-divider--3d .dbk-divider__ornament--tick {
	width: 3px;
	height: 20px;
	border-radius: 2px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%),
		var(--dbk-divider-color);
	box-shadow: 1px 1px 2px rgba(0,0,0,.25);
}
.editor-styles-wrapper .dbk-divider--tick.dbk-divider--3d::before,
.editor-styles-wrapper .dbk-divider--tick.dbk-divider--3d::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 2px;
	height: 12px;
	border-radius: 2px;
	background: var(--dbk-divider-color);
	opacity: 0.55;
}
.editor-styles-wrapper .dbk-divider--tick.dbk-divider--3d::before {
	left: calc(50% - 10px);
	transform: translateY(-50%);
}
.editor-styles-wrapper .dbk-divider--tick.dbk-divider--3d::after {
	left: calc(50% + 10px);
	transform: translateY(-50%);
}

/* -----------------------------------------
   13. 스티커 - 3D 없음 (스티커 자체가 이미지 파일이라 CSS 3D 대상이 아님.
   마켓플레이스에 유료 스티커 카테고리가 별도로 있음.)
   ----------------------------------------- */
.dbk-sticker {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.dbk-sticker-wrap {
	display: block;
	margin: 12px 0;
}
.dbk-sticker-wrap--center { text-align: center; }
.dbk-sticker-wrap--left   { text-align: left; }
.dbk-sticker-wrap--right  { text-align: right; }

/* 마켓플레이스를 작은 팝업 안에서 고르기 불편하다는 피드백에 따라 전체화면급으로
   확장. isFullScreen prop을 지원하는 워드프레스에서는 코어 CSS가 이미 꽉 채워주지만,
   그 prop이 없는 구버전에서도 최소한 이만큼은 넓게 보이도록 하는 폴백. */
.dbk-sticker-modal.components-modal__frame {
	max-width: 100vw;
	width: 98vw;
	height: 96vh;
	max-height: 96vh;
}

.dbk-sticker-modal .components-modal__content {
	padding: 20px;
	height: 100%;
}

/* -----------------------------------------
   13-1. 스티커 블록 인서터 아이콘 강조 (핵심 기능이라 다른 블록보다 크고 눈에 띄게)
   이 부분은 Gutenberg 인서터의 내부 DOM 구조에 의존하므로,
   워드프레스 버전에 따라 클래스명이 바뀌면 이 스타일이 안 먹힐 수 있음 (안전한 실패: 그냥 기본 크기로 보임).
   ----------------------------------------- */
.editor-block-list-item-decoblocks-sticker .block-editor-block-icon,
.block-editor-inserter__block-list .editor-block-list-item-decoblocks-sticker .block-editor-block-icon {
	width: 52px !important;
	height: 52px !important;
}
.editor-block-list-item-decoblocks-sticker .block-editor-block-icon svg {
	width: 48px !important;
	height: 48px !important;
}

/* -----------------------------------------
   14. 무료 버전 브랜딩 표기
   ----------------------------------------- */
.dbk-branding {
	font-size: 11px;
	color: #999;
	text-align: right;
	margin-top: 4px;
}
.dbk-branding a {
	color: #999;
}