/* =========================================
   DecoBlocks 3D 스타일 업그레이드 (별도 구매 애드온)
   =========================================
   이 파일은 워드프레스닷오알지에 제출하는 무료 플러그인 패키지에
   포함되지 않습니다. store.luxdigest.com 마켓플레이스 서버에 호스팅해두고,
   3D 라이선스 키가 검증된 사용자에게만 REST 엔드포인트로 내려줍니다
   (플러그인 쪽 class-dbk-admin.php의 download_3d_addon_css() 참고).

   무료 플러그인은 이 클래스들을 항상 정상적으로 출력하지만(아바타 이미지,
   dbk-bubble--soft, dbk-3d-premium, rainbow3d 등), 이 CSS가 로드되기
   전까지는 대응하는 스타일 규칙이 없어 화면에 특별한 효과가 없습니다.
   이 파일이 로드되는 순간부터 실제로 화려하게 보이기 시작합니다.
*/

/* -----------------------------------------
   말풍선: 파스텔 스타일 + 아바타 이미지
   ----------------------------------------- */
.dbk-bubble--soft {
	background: color-mix( in srgb, var(--dbk-bubble-color) 14%, white );
	color: var(--dbk-bubble-color);
}
.dbk-bubble--left.dbk-bubble--soft::after,
.dbk-bubble--right.dbk-bubble--soft::after {
	content: '';
	position: absolute;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: inherit;
	border-bottom: inherit;
	border-radius: 0 0 3px 0;
}
.dbk-bubble--left.dbk-bubble--soft::after {
	left: 12px;
	border-right: inherit;
	transform: rotate(45deg);
}
.dbk-bubble--right.dbk-bubble--soft::after {
	right: 12px;
	border-left: inherit;
	transform: rotate(-45deg);
	border-radius: 0 0 0 3px;
}
.dbk-bubble__avatar {
	display: block !important;
}

/* -----------------------------------------
   글머리기호: 무지개 배지 스타일
   ----------------------------------------- */
.dbk-bullet-list--rainbow3d .dbk-bullet-list__item {
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.dbk-bullet-list--rainbow3d .dbk-bullet-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: linear-gradient(160deg, #fdfdfd, #d5d5d5);
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 4px rgba(0,0,0,0.06),
		0 1px 0 rgba(255,255,255,0.9) inset,
		0 -3px 4px rgba(0,0,0,0.14) inset,
		0 4px 8px rgba(0,0,0,0.28);
	font-size: 1.3em;
}

/* -----------------------------------------
   공용 3D 프리미엄 프레임 (말풍선/섹션박스/인용박스 등에서 재사용)
   ----------------------------------------- */
.dbk-3d-premium {
	position: relative;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.6) inset,
		0 -1px 0 rgba(0,0,0,0.06) inset,
		0 14px 28px -6px rgba(20,20,20,0.22),
		0 4px 8px rgba(20,20,20,0.10);
	transform: translateY(-3px);
	border-color: rgba(0,0,0,0.14) !important;
}
.dbk-quote.dbk-3d-premium {
	transform: none;
	box-shadow:
		0 1px 3px rgba(0,0,0,0.15),
		0 1px 0 rgba(255,255,255,0.8) inset,
		inset 0 2px 6px rgba(0,0,0,0.08);
	border-color: transparent !important;
}
.dbk-quote.dbk-3d-premium.dbk-quote--quotation-marks::before,
.dbk-quote.dbk-3d-premium.dbk-quote--quotation-marks::after {
	text-shadow: 2px 3px 3px rgba(0,0,0,0.25);
	opacity: 0.5;
}

/* -----------------------------------------
   하이라이트: 그라데이션 스윕 효과
   ----------------------------------------- */
.dbk-highlight.dbk-highlight--gradient3d {
	position: relative;
	--dbk-highlight-gradient-color: #F5C400;
	background-image: linear-gradient(90deg, var(--dbk-highlight-gradient-color) 0%, var(--dbk-highlight-gradient-color) 55%, transparent 100%);
	padding: 1px 6px 2px 3px;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.18);
	animation: dbk-highlight-sweep 0.7s cubic-bezier(0.65,0,0.35,1) both;
	transform-origin: left center;
}
@keyframes dbk-highlight-sweep {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.dbk-highlight.dbk-highlight--gradient3d { animation: none; }
}

/* -----------------------------------------
   목차: 입체 카드 + 번호 배지
   ----------------------------------------- */
.dbk-toc--3d {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow:
		0 0 0 4px #fff,
		0 0 0 6px rgba(0,0,0,0.08),
		0 1px 0 rgba(255,255,255,0.6) inset,
		0 12px 24px -6px rgba(0,0,0,0.22),
		0 4px 8px rgba(0,0,0,0.1);
	transform: translateY(-2px);
	counter-reset: dbk-toc-counter;
}
.dbk-toc--3d .dbk-toc__item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dbk-toc--3d .dbk-toc__item::before {
	counter-increment: dbk-toc-counter;
	content: counter(dbk-toc-counter);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	font-size: 0.75em;
	font-weight: 700;
	color: #444;
	background: linear-gradient(160deg, #fdfdfd, #dcdcdc);
	box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -2px 3px rgba(0,0,0,0.12) inset, 0 2px 4px rgba(0,0,0,0.25);
}

/* -----------------------------------------
   반짝이는(샤인) 텍스트: 속도 조절 + 무지개
   ----------------------------------------- */
.dbk-sparkle--slow { animation-duration: 4.5s; }
.dbk-sparkle--fast { animation-duration: 1.4s; }
.dbk-sparkle--rainbow3d {
	background-image: linear-gradient(100deg, #FF6F91, #FFD93D, #3FCFB4, #8C6FE6, #FF6F91) !important;
	background-size: 300% 100% !important;
	animation: dbk-shine-rainbow3d 3s linear infinite !important;
}
@keyframes dbk-shine-rainbow3d {
	0%   { background-position: 0% 0; }
	100% { background-position: 100% 0; }
}

/* -----------------------------------------
   글로우박스: 무지개 펄스 + 반짝이는 별(twinkle)
   ----------------------------------------- */
.dbk-glow--rainbow3d {
	border: 3px solid transparent !important;
	background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #FF6F91, #FFD93D, #3FCFB4, #8C6FE6);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	animation: dbk-glow-rainbow3d 3s ease-in-out infinite;
}
@keyframes dbk-glow-rainbow3d {
	0%, 100% { box-shadow: 0 0 10px 2px rgba(255, 111, 145, 0.5); }
	33%      { box-shadow: 0 0 18px 4px rgba(255, 217, 61, 0.5); }
	66%      { box-shadow: 0 0 18px 4px rgba(63, 207, 180, 0.5); }
}
.dbk-glow--twinkle {
	overflow: hidden;
}
.dbk-glow--twinkle::before,
.dbk-glow--twinkle::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background: var(--dbk-glow-color);
	border-radius: 50%;
	filter: blur(0.5px);
	animation: dbk-twinkle 1.8s ease-in-out infinite;
}
.dbk-glow--twinkle::before { top: 10px; left: 16px; animation-delay: 0s; }
.dbk-glow--twinkle::after { bottom: 14px; right: 20px; animation-delay: 0.6s; }
@keyframes dbk-twinkle {
	0%, 100% { opacity: 0.2; transform: scale(0.8); }
	50%      { opacity: 1; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
	.dbk-glow--twinkle::before,
	.dbk-glow--twinkle::after {
		animation: none;
	}
}

/* -----------------------------------------
   인용구: 포스트잇 / 모서리 프레임
   ----------------------------------------- */
.dbk-quote--postit {
	position: relative;
	padding: 20px 24px;
	background: #FFF9C4;
	box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
	transform: rotate(-0.6deg);
}
.dbk-quote--postit::after {
	content: '';
	position: absolute;
	bottom: -8px;
	right: 16px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 0 0;
	border-color: rgba(0,0,0,0.08) transparent transparent transparent;
}
.dbk-quote--postit.dbk-3d-premium {
	background:
		radial-gradient(ellipse at center, rgba(255,249,196,1) 55%, rgba(235,220,140,1) 100%);
	box-shadow: 3px 5px 14px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(0,0,0,0.04);
	transform: rotate(-1deg) translateY(-2px);
}
.dbk-quote--postit.dbk-3d-premium::after {
	border-width: 14px 14px 0 0;
	border-color: rgba(0,0,0,0.18) transparent transparent transparent;
	filter: blur(0.5px);
}
.dbk-quote--corner-frame {
	position: relative;
	padding: 32px 36px;
	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:
		20px 2px, 2px 20px,
		20px 2px, 2px 20px;
	background-position:
		top right, top right,
		bottom left, bottom left;
}
/* 3D 버전은 기본형과 똑같이 검증된 직선 그라데이션 방식(ㄴ자 모양이 확실히 나오는
   방식)을 그대로 재사용하되, 두께를 더 두껍게 + 그림자를 얹어서 입체감을 냄.
   기본형과 나란히 놓아도 확실히 차이가 남. 요소 하나에만 그림(가상요소 없음). */
.dbk-quote--corner-frame.dbk-3d-premium {
	padding: 36px 40px;
	background-image:
		linear-gradient(to bottom left, color-mix(in srgb, var(--dbk-quote-color) 45%, white), var(--dbk-quote-color)),
		linear-gradient(to bottom left, color-mix(in srgb, var(--dbk-quote-color) 45%, white), var(--dbk-quote-color)),
		linear-gradient(to top right, color-mix(in srgb, var(--dbk-quote-color) 45%, white), var(--dbk-quote-color)),
		linear-gradient(to top right, color-mix(in srgb, var(--dbk-quote-color) 45%, white), var(--dbk-quote-color));
	background-size:
		28px 5px, 5px 28px,
		28px 5px, 5px 28px;
	background-position:
		top right, top right,
		bottom left, bottom left;
	filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.3));
}

/* -----------------------------------------
   구분선: 입체(3D) 실선/점선/파선 + 다이아몬드/화살표/슬래시/눈금 장식
   ----------------------------------------- */
.dbk-divider--solid.dbk-divider--3d {
	border-top: none !important;
	height: 5px !important;
	border-radius: 3px;
	background: linear-gradient(180deg, #6b6b6b, #2a2a2a);
	box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 3px 6px rgba(0,0,0,0.3);
}
.dbk-divider--dashed.dbk-divider--3d {
	border-top: none !important;
	height: 4px !important;
	background-image: repeating-linear-gradient(90deg, #4a4a4a 0 14px, transparent 14px 22px);
	background-size: 100% 4px;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
	border-radius: 2px;
}
.dbk-divider--dotted.dbk-divider--3d {
	border-top: none !important;
	height: 6px !important;
	background-image: radial-gradient(circle, #5a5a5a 40%, transparent 42%);
	background-size: 14px 6px;
	background-repeat: repeat-x;
	background-position: center;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}

.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;
}
.dbk-divider--diamond.dbk-divider--3d { border-top: 1px solid rgba(0,0,0,0.15); }
.dbk-divider--diamond.dbk-divider--3d .dbk-divider__ornament {
	font-size: 0;
	width: 16px;
	height: 16px;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.9) 0%, transparent 45%),
		linear-gradient(315deg, rgba(0,0,0,0.25) 0%, transparent 45%),
		linear-gradient(45deg, #cfd4da, #8b93a1);
	transform: translate(-50%, -50%) rotate(45deg);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.35);
	padding: 0;
}

.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;
}
.dbk-divider--arrow.dbk-divider--3d { border-top-color: rgba(0,0,0,0.15); }
.dbk-divider--arrow.dbk-divider--3d .dbk-divider__ornament {
	font-size: 1.3em;
	text-shadow: 1px 2px 3px rgba(0,0,0,0.4);
	animation: dbk-arrow-fly-in 1s cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes dbk-arrow-fly-in {
	0%   { transform: translate(120px, -50%) rotate(-90deg); opacity: 0; }
	70%  { opacity: 1; }
	100% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.dbk-divider--arrow.dbk-divider--3d .dbk-divider__ornament { animation: none; }
}

.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);
}
.dbk-divider--slash.dbk-divider--3d .dbk-divider__ornament--slash {
	width: 4px;
	height: 26px;
	border-radius: 2px;
	background: linear-gradient(180deg, #6b6b6b, #222);
	box-shadow: 1px 1px 0 rgba(255,255,255,0.2) inset, 2px 3px 4px rgba(0,0,0,0.35);
}

.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%);
}
.dbk-divider--tick.dbk-divider--3d .dbk-divider__ornament--tick {
	width: 5px;
	height: 20px;
	border-radius: 2px;
	background: linear-gradient(180deg, #7a7a7a, #2a2a2a);
	box-shadow: 1px 0 0 rgba(255,255,255,0.2) inset, 2px 2px 4px rgba(0,0,0,0.35);
}