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

/* -----------------------------------------
   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);
}

.dbk-bubble__content {
	flex: 1;
}
.dbk-bubble__content p:first-child { margin-top: 0; }
.dbk-bubble__content p: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;
}

/* -----------------------------------------
   2. 섹션박스 (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 {
	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;
}

.dbk-box__content p:first-child { margin-top: 0; }
.dbk-box__content p: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;
}

/* -----------------------------------------
   3. 커스텀 글머리기호 (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;
}

/* -----------------------------------------
   4. 하이라이트 (형광펜)
   ----------------------------------------- */
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%);
}

/* -----------------------------------------
   5. 목차 (TOC)
   ----------------------------------------- */
.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. 반짝이는(샤인) 텍스트
   ----------------------------------------- */
.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;
}

/* 3D 스타일 업그레이드(별도 구매) 항목: 속도 조절 + 무지개 반짝임 -
   해당 CSS는 애드온 파일에만 있음. 미구매 상태에서 speed=slow/fast를
   선택해도 기본 속도(2.6s)로 그대로 보임(깨지지 않음, 차이만 없음). */

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

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

/* -----------------------------------------
   7. 빛나는(글로우) 박스
   ----------------------------------------- */
.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 {
	font-weight: 700;
	color: var(--dbk-glow-color);
}
/* .dbk-box와 동일한 이유(위 참고) - title 다음에 실제 content가 있을 때만 간격을 줌 */
.dbk-glow__title + .dbk-glow__content {
	margin-top: 10px;
}

.dbk-glow__content p:first-child { margin-top: 0; }
.dbk-glow__content p:last-child { margin-bottom: 0; }

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

.dbk-glow--pulse {
	animation: dbk-glow-pulse 2s ease-in-out infinite;
}

@keyframes dbk-glow-pulse {
	0%, 100% { box-shadow: 0 0 6px 0 var(--dbk-glow-color); }
	50%      { box-shadow: 0 0 18px 4px var(--dbk-glow-color); }
}

/* 3D 스타일 업그레이드(별도 구매) 항목: 무지개 펄스 광채 + 반짝이는 별(twinkle) -
   해당 CSS는 애드온 파일에만 있음. */

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

/* -----------------------------------------
   8. 자동 반복 폭죽 효과
   ----------------------------------------- */
.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. 인용구 (하위 스타일 여러 종)
   ----------------------------------------- */
.dbk-quote {
	--dbk-quote-color: #111111;
	margin: 24px auto;
	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;
}
.dbk-quote__content p:first-child { margin-top: 0; }
.dbk-quote__content p: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;
}

/* 클래식 - 큰따옴표 장식 */
.dbk-quote--classic {
	position: relative;
	padding: 8px 0 8px 22px;
	border-left: 4px solid var(--dbk-quote-color) !important;
}
.dbk-quote--classic .dbk-quote__content {
	font-style: italic;
	color: #333;
}

/* 큰따옴표 장식 - 워드프레스 기본 "인용구" 블록의 그 느낌을, DecoBlocks 자체 스타일로 진짜 구현 */
.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;
}
/* 3D 애드온 버전은 .dbk-3d-premium 공용 클래스(그라데이션 테두리+입체 그림자)가
   이미 자동으로 같이 붙기 때문에, 여기서 따로 3D CSS를 만들 필요 없음 - 재사용됨 */

/* 세로바 - 끝이 둥글게 처리된 두꺼운 색상 바 (네이버 블로그 인용구 특유의 디테일) */
.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;
}

/* 라인 프레임 - 위아래 두꺼운 선 */
.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;
}

/* 포스트잇 / 모서리 프레임 - 실제 디자인(모서리 장식, 종이 질감 등)은 3D 스타일
   업그레이드(별도 구매) 파일에만 있음. 무료 버전에서 이 스타일을 선택해도 "미완성
   버그처럼 보이지 않을 정도의" 기본 여백만 주고, 화려한 장식은 일부러 안 줌 -
   이게 3D 업그레이드를 구매할 이유가 되는 지점이라 무료 쪽에서 미리 다 보여주면 안 됨. */
.dbk-quote--postit,
.dbk-quote--corner-frame {
	padding: 24px 28px;
}

/* 포스트잇/모서리프레임 스타일: 3D 스타일 업그레이드(별도 구매) 항목.
   해당 CSS는 애드온 파일에만 있음 - 미구매 상태에서 선택해도 기본
   인용구(classic과 동일한 박스) 모양으로 표시됨(깨지지 않음). */

/* -----------------------------------------
   11. 구분선 (하위 스타일 여러 종)
   ----------------------------------------- */
.dbk-divider {
	--dbk-divider-color: #111111;
	position: relative;
	margin: 28px 0;
	height: 0;
	border-top: 1px solid var(--dbk-divider-color);
}

.dbk-divider--solid {
	border-top-width: 1px;
	border-top-style: solid;
}

.dbk-divider--dashed {
	border-top-style: dashed;
}

.dbk-divider--dotted {
	border-top-style: dotted;
}

/* 실선/점선/파선의 입체(3D) 처리: 3D 스타일 업그레이드(별도 구매) 항목.
   해당 CSS는 애드온 파일에만 있음 - 미구매 상태에서는 일반 선 스타일 그대로 보임. */

/* 다이아몬드/화살표/슬래시/눈금 장식 구분선: 3D 스타일 업그레이드(별도 구매) 항목.
   해당 CSS는 애드온 파일에만 있음 - 미구매 상태에서 선택해도 기본 실선
   구분선(.dbk-divider 기본 border-top)만 보임(깨지지 않음, 장식만 없음). */

/* -----------------------------------------
   13. 스티커
   ----------------------------------------- */
.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;
}