/* =========================================
   DecoBlocks 3D 스타일 업그레이드 (별도 구매 애드온)
   =========================================
   이 파일은 워드프레스닷오알지에 제출하는 무료 "DecoBlocks" 플러그인
   패키지에는 포함되지 않습니다. 이 파일이 속한 "DecoBlocks 3D 스타일
   업그레이드"는 완전히 독립된 플러그인으로, store.luxdigest.com에서
   구매 후 zip으로 직접 다운로드해 워드프레스 관리자 화면에서 수동으로
   설치(플러그인 업로드)합니다 - 무료 플러그인이 원격 서버에서 이 CSS를
   자동으로 받아오거나 실행하는 구조가 아닙니다(정확한 로딩 조건은 이
   플러그인의 decoblocks-3d-style-upgrade.php, enqueue_frontend() /
   enqueue_editor() 참고 - 발행된 글에는 라이선스 인증 후에만, 글쓰기
   화면(에디터)에는 이 플러그인이 설치·활성화만 되어 있으면 항상 로드됨).

   무료 플러그인은 이 클래스들을 항상 정상적으로 출력하지만(아바타 이미지,
   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-quote.dbk-3d-premium)의 border-color: transparent !important가
   그대로 걸리면 선이 통째로 사라지고 은은한 그림자만 남은 밋밋한 박스가
   되어버림 - classic/postit/corner-frame처럼 선을 그림자로 완전히 대체해도
   괜찮은 스타일과 달리, line-frame은 그러면 정체성이 아예 없어짐. 그래서
   여기서 선을 다시 명시적으로 살리고, 두께+이중선으로 입체감을 더함
   (postit/corner-frame 바로 아래에 있는 것과 같은 패턴 - 공용 규칙 위에
   스타일별 예외를 얹는 방식).
*/
.dbk-quote--line-frame.dbk-3d-premium {
	border-top: 4px double var(--dbk-quote-color) !important;
	border-bottom: 4px double var(--dbk-quote-color) !important;
	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);
}

/* -----------------------------------------
   하이라이트: 그라데이션 스윕 효과
   ----------------------------------------- */
/* 이 효과는 원래 transform: scaleX()로 왼쪽에서 오른쪽으로 "쓸어나오는" 느낌을
   냈었는데, 이 규칙이 걸리는 요소 자체가(에디터 안에서) 실제로 글자를 직접 입력하는
   contentEditable 요소(RichText가 렌더링하는 <mark> 태그 자체)라서 문제가 있었음 -
   브라우저가 contentEditable 요소에 transform이 걸리면 별도의 좌표/스태킹 컨텍스트가
   생기면서 커서 위치 계산과 클릭 포커스가 꼬여, 이 하이라이트 안을 클릭해도 커서가
   안 잡히고 텍스트 입력 자체가 안 되는 증상이 나타남(널리 알려진 브라우저 레벨
   transform-on-contentEditable 상호작용 버그) - 기본형(하일라이트)에는 이 스타일이
   안 걸려서 정상 입력되고, 3D만 이 문제를 겪었던 이유가 바로 이것. 그래서 동일한
   "쓸어나오는" 시각 효과를 transform 대신 background-size로 구현하도록 바꿈
   (0% → 100%로 배경 너비만 넓어지는 방식) - contentEditable과 충돌하는 좌표계 변경이
   전혀 없어서 커서/입력 동작에 영향을 주지 않음. */
.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%);
	background-repeat: no-repeat;
	background-size: 100% 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;
}
@keyframes dbk-highlight-sweep {
	from { background-size: 0% 100%; }
	to   { background-size: 100% 100%; }
}
@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);
}