/* ========================================= 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가 로드되기 전까지는 대응하는 스타일 규칙이 없어 화면에 특별한 효과가 없습니다. 이 파일이 로드되는 순간부터 실제로 화려하게 보이기 시작합니다. [2026-09-19 대규모 교차검증 - v1.3.0] 무료 플러그인 쪽에서 여러 세션에 걸쳐 "-2"(3D 미리보기, .editor-styles-wrapper로만 스코프됨) 규칙들이 재설계되었는데, 이 애드온 CSS는 그 변화 다수를 반영하지 못한 채 예전 버전 기준으로 멈춰 있었다. 무료 플러그인의 "0. 공통 규칙"이 명시하는 대로, 이 파일이 할 일은 각 "-2" 클래스에 .editor-styles-wrapper 없이도 (즉 발행 화면에서도) 동급 이상의 효과를 내는 것 - 그런데 아래 항목들은 그 동급 대응이 아예 없거나(발행해도 3D 효과가 전혀 안 보임), 이미 에디터에서 여러 차례 실사용자 피드백으로 다시 그려진 모양과 완전히 다른 옛날 모양을 그대로 쓰고 있었다. 이번 개정에서 전부 최신 무료 플러그인 CSS(assets/css/dbk-frontend.css)를 1차 소스로 삼아 대조·수정: - 글로우박스: 새로 생긴 "지정 색상(네온)" 기본 3D 모드(.dbk-glow--neon3d) 자체가 이 파일에 아예 없었음 - 라이선스 있는 사이트에서도 글로우박스 3D 기본값(네온)을 쓰면 발행 글에는 아무 효과도 안 보이는 상태였음. - 인용구 - 클래식: 좌우 꺾쇠(대괄호 모양)를 밝게/어둡게 갈라 입체로 깎아 보이게 하는 처리가 없어서, 발행 화면은 그냥 밋밋한 단색 꺾쇠 + 공용 그림자뿐이었음. - 인용구 - 세로바: 막대(::before) 자체의 그라데이션 입체 처리가 이 파일에 아예 없어서, 발행 화면의 막대는 항상 납작한 단색이었음. - 인용구 - 라인 프레임: "얇은 두 줄이 박스 바깥으로 살짝 떠 있는" 현재 모양이 아니라, 여러 차례 반려됐던 "두꺼운 이중 테두리"로 되돌아가는 옛날 방식을 쓰고 있었음 - 교체. - 구분선(실선/파선/점선/다이아몬드/슬래시/눈금): 사용자가 고른 --dbk-divider-color를 무시하고 회색/검정 고정값을 쓰고 있었음 (원칙 c 위반, 모든 3D 처리는 사용자가 고른 색 그대로 써야 함) - 전부 사용자 색 기반으로 재작성. - 반짝이는 텍스트: 마찬가지로 무관한 고정 무지개 색을 쓰고 있었음 - 사용자가 고른 --dbk-sparkle-color + 흰색 글린트로 교체. - 인용구 - 큰따옴표: 무료 쪽은 opacity:1 + 양각 그림자로 이미 강화됐는데 이 파일은 옅은 opacity:0.5만 쓰고 있어서 맞춰 올림. - 말풍선: 전용 3D 규칙이 없어서 공용 .dbk-3d-premium(변형/그림자가 말풍선에는 안 맞는 값)만 걸리고 있었음 - 말풍선 전용 규칙 추가. Postit/Corner-frame처럼 특이도를 일부러 맞춰야 하는 곳(주석 참고)은 그대로 유지했고, 그 외에는 발행 화면에서 실제로 3D 효과가 보이는지를 최우선 기준으로 삼았다. [2026-09-20 추가 수정 - v1.3.1] 위 교차검증에서 "인용구 - 라인 프레임"을 옛날 두꺼운 이중 테두리에서 얇은 오프셋 선 구조로 바꾸긴 했지만, 세부 수치(두께, 그림자, 가로 그라데이션)까지 무료 에디터와 완전히 같지는 않았고, 결정적으로 공용 규칙(.dbk-quote.dbk-3d-premium)의 박스 전체 그림자를 지워주지 않아 발행 화면에만 그 그림자가 새어 들어오고 있었음 - 실사용자가 "편집화면엔 없는 입체음영이 발행화면엔 생긴다"고 정확히 재현. 해당 규칙을 무료 에디터와 완전히 동일하게(두께 2px, 가로 그라데이션/선 자체 그림자/border-radius 없음) 맞추고 공용 box-shadow도 명시적으로 제거해, 편집화면과 라이선스 발행화면이 완전히 똑같아지도록 재수정함 (아래 "인용구 - 라인 프레임" 섹션 참고). [2026-09-20 추가 수정 - v1.3.2] 위 교차검증 때 함께 훑어봤어야 했는데 놓친 부분 - "인용구 - 포스트잇"과 "인용구 - 모서리 프레임"은 특이도를 무료 쪽과 맞추려고 일부러 클래스 1개짜리 선택자(.dbk-quote--postit / .dbk-quote--corner-frame)를 쓰는데, 그 선택자 밑에 회전·그림자·모서리 접힘 같은 3D 전용 장식까지 그대로 걸려 있었다 - 즉 .dbk-3d-premium을 전혀 안 골라도(순수 "기본형"을 선택해도) 애드온이 설치돼 있기만 하면 이미 3D처럼 보여서, 기본형 자체의 모습이 무료 플러그인이 정의한 모습과 달라지고 기본형/3D형의 구분도 사라지는 문제였음. 3D 전용 장식 속성을 전부 ".dbk-3d-premium"이 붙은 선택자로 옮겨서, 기본형은 애드온이 설치돼 있어도 무료 쪽 10-5-1/10-6-1과 완전히 동일하게 보이도록 고침 (아래 "인용구: 포스트잇 / 모서리 프레임" 섹션 참고). */ /* ----------------------------------------- 말풍선: 파스텔 스타일 + 아바타 이미지 ----------------------------------------- */ /* [2026-09-25, 1.3.11] 글자색은 더 이상 고른 색으로 바꾸지 않는다(모양에만 색) - 무료 1-1-1과 동일. */ .dbk-bubble--soft { background: color-mix( in srgb, var(--dbk-bubble-color) 14%, white ); } .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; } /* [2026-09-19 신규] 말풍선 전용 3D 규칙 - 예전에는 공용 .dbk-3d-premium(아래) 하나로만 처리됐는데, 그 규칙은 translateY(-3px)로 위로 들뜨는 효과가 있어 대화형 말풍선이 줄 맞춰 떠 있어야 하는데 하나씩 어긋나 보이는 문제가 있었고, 그림자 값도 말풍선에 맞춰 튜닝된 게 아니었음. 무료 플러그인의 에디터 미리보기(.editor-styles-wrapper .dbk-bubble.dbk-3d-premium)와 동급 - 살짝 진한 그림자 + 위쪽 광택 하이라이트. 말풍선 꼬리(::after)와 충돌하지 않도록 ::before만 사용(무료 쪽과 동일한 이유 - 0. 공통 규칙 d). */ /* [2026-09-25, 1.3.11] 2-1-2처럼 좌상단 빛 기준 우하단 드롭섀도에 고른 색을 입힌다. 또 윤곽선 말풍선은 3D에서 테두리를 투명으로 지워 모양(고른 색 테두리)이 사라졌었다 - 윤곽선만은 고른 색 테두리를 되살린다(공용 .dbk-3d-premium의 회색 border-color !important도 이것으로 덮음). */ .dbk-bubble.dbk-3d-premium { position: relative; transform: none; box-shadow: 3px 7px 16px rgba(0,0,0,0.38), 1px 2px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4); box-shadow: 3px 7px 16px color-mix(in srgb, var(--dbk-bubble-color, #111111) 50%, transparent), 1px 2px 4px color-mix(in srgb, var(--dbk-bubble-color, #111111) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.4); border-color: transparent !important; } .dbk-bubble.dbk-bubble--outline.dbk-3d-premium { border-color: var(--dbk-bubble-color) !important; } .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; } /* ----------------------------------------- 글머리기호: 무지개 배지 스타일 ----------------------------------------- */ .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; } /* [2026-09-25, 1.3.9] 섹션박스 3D (2-1-2) 전용 규칙 - 실사용자 지적: "색을 지정해도 색이 적용이 안 된다". 섹션박스는 전용 규칙이 없어 위 공용 .dbk-3d-premium을 그대로 받았는데, 그 규칙이 회색 그림자 + border-color 회색 !important라서 사용자가 고른 색이 테두리에도 그림자에도 전혀 안 나왔다. 무료 플러그인 에디터 미리보기(dbk-frontend.css 2-1-2)와 같은 값으로: 그림자 색 = 사용자가 고른 --dbk-box-color, 모양 = 좌상단 빛 기준 우하단 드롭섀도. 테두리는 solid/dashed에서 고른 색으로 되돌리고, shadow 스타일은 무료 기본형과 같은 옅은 테두리(#eee)를 유지한다. */ .dbk-box.dbk-3d-premium { box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 1px 2px 3px rgba(0,0,0,0.12), 4px 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); box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 1px 2px 3px color-mix(in srgb, var(--dbk-box-color, #111111) 35%, transparent), 4px 10px 22px color-mix(in srgb, var(--dbk-box-color, #111111) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -10px 16px -10px color-mix(in srgb, var(--dbk-box-color, #111111) 25%, transparent); } /* [2026-09-25 2차 - 실사용자 지적: "드롭섀도는 마음에 드는데 프레임 선이 두꺼우면 촌스럽다. 있는 듯 없는 듯 얇게, 특히 좌상단은 더욱"] 3D에서만 테두리를 1px로 줄이고 고른 색을 아주 옅게(투명도만 조절) 쓴다. 빛을 받는 좌상단은 12%로 거의 안 보이게, 그림자 쪽 우하단은 32%로 살짝만. 기본형(2-1-1)의 2px 테두리는 그대로다. !important는 편집 화면이 블록에 인라인으로 넣는 border-color와, 애드온 공용 .dbk-3d-premium의 border-color !important를 이기기 위한 것. */ .dbk-box.dbk-box--solid.dbk-3d-premium, .dbk-box.dbk-box--dashed.dbk-3d-premium { border-width: 1px !important; border-top-color: rgba(0,0,0,0.06) !important; border-left-color: rgba(0,0,0,0.06) !important; border-right-color: rgba(0,0,0,0.16) !important; border-bottom-color: rgba(0,0,0,0.16) !important; border-top-color: color-mix(in srgb, var(--dbk-box-color, #111111) 12%, transparent) !important; border-left-color: color-mix(in srgb, var(--dbk-box-color, #111111) 12%, transparent) !important; border-right-color: color-mix(in srgb, var(--dbk-box-color, #111111) 32%, transparent) !important; border-bottom-color: color-mix(in srgb, var(--dbk-box-color, #111111) 32%, transparent) !important; } .dbk-box.dbk-box--shadow.dbk-3d-premium { border-color: #eee !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; } /* [2026-09-25, 1.3.11] 인용구 - 큰따옴표 3D(10-2-2): 공용 규칙의 안쪽 위 그림자 때문에 음영이 좌상단으로(거꾸로) 보였다 - 10-5-2와 같은 우하단 드롭섀도로 덮어쓴다(무료 에디터와 동일 값). */ .dbk-quote.dbk-3d-premium.dbk-quote--quotation-marks { 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); } .dbk-quote.dbk-3d-premium.dbk-quote--quotation-marks::before, .dbk-quote.dbk-3d-premium.dbk-quote--quotation-marks::after { /* [2026-09-19 수정] 무료 에디터 미리보기가 opacity:1 + 흰색 반사광 + 검은 그림자로 훨씬 진해졌는데(양각 처리), 여긴 옅은 opacity:0.5만 쓰고 있어서 실제로는 무료 미리보기보다 발행 화면이 더 흐릿하게 보이는 역전 현상이 있었음 - 무료와 동급으로 맞춤. */ opacity: 1; text-shadow: -1px -1px 0 rgba(255,255,255,.55), 2px 3px 4px rgba(0,0,0,.35); } /* [2026-09-19 신규] 인용구 - 클래식: "[ 텍스트 ]" 꺾쇠 모양 자체는 무료 플러그인이 이미 그리고(::before/::after의 border), 여기서는 그 꺾쇠 테두리를 위/아래(+좌우 바깥쪽)만 밝게, 반대쪽은 어둡게 갈라 입체로 깎인 단면처럼 보이게 한다 - 무료 에디터 미리보기(dbk-frontend.css 10-1-2)와 동일한 color-mix() 값. 공용 규칙(.dbk-quote.dbk-3d-premium)의 전체 box-shadow가 이미 "꺾쇠부터 중간까지 하나로 이어지는" 입체감을 주므로, 여기서는 꺾쇠 단면 색상만 추가한다. */ /* [2026-09-24, 1.3.7] 인용구 - 클래식 3D의 음영 깊이 - 실사용자 지적("음영의 깊이감이 하나도 없어 너무 얕다"). 이 스타일은 공용 규칙(.dbk-quote.dbk-3d-premium)의 얕은 그림자(0 1px 3px)만 받고 있었다. 무료 플러그인 2.44.40 에디터 미리보기 (dbk-frontend.css 10-1-2)와 완전히 같은 값으로 맞춰, 발행 화면에서도 같은 깊이의 음영이 나오게 한다. 클래식 스타일에만 적용(클래스 3개 선택자). */ .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); /* [2026-09-25, 1.3.11] 음영에 고른 색 */ box-shadow: 0 1px 2px color-mix(in srgb, var(--dbk-quote-color, #111111) 14%, transparent), 0 8px 18px color-mix(in srgb, var(--dbk-quote-color, #111111) 32%, transparent), inset 0 1px 0 rgba(255,255,255,0.3); } .dbk-quote.dbk-quote--classic.dbk-3d-premium::before, .dbk-quote.dbk-quote--classic.dbk-3d-premium::after { border-top-color: color-mix(in srgb, var(--dbk-quote-color) 60%, #fff); /* [2026-09-24, 1.3.6] 꺾쇠 아래쪽 선에 검정 45%를 섞던 것을 제거 - 발행 화면에서 "[ ]" 아래 끝이 검게 끊겨 보인다는 실사용자 지적. 선은 선택 색 그대로 두고, 음영(입체감)은 공용 규칙(.dbk-quote.dbk-3d-premium)의 box-shadow가 그대로 담당한다. */ border-bottom-color: var(--dbk-quote-color); } .dbk-quote.dbk-quote--classic.dbk-3d-premium::before { border-left-color: color-mix(in srgb, var(--dbk-quote-color) 60%, #fff); } .dbk-quote.dbk-quote--classic.dbk-3d-premium::after { border-right-color: color-mix(in srgb, var(--dbk-quote-color) 60%, #fff); } /* [2026-09-19 신규] 인용구 - 세로바: 막대(::before) 자체의 입체 그라데이션이 이 파일에 전혀 없어서, 발행 화면에서는 막대가 항상 기본형 그대로 납작한 단색이었음 - 무료 에디터 미리보기(10-3-2)와 동일한 color-mix() 그라데이션 + 옅은 앰비언트 그림자로 교체. 공용 규칙이 이미 요소 전체의 부드러운 box-shadow를 주므로, 여기서는 막대 자체만 다룬다. */ /* [2026-09-25, 1.3.11] 인용구 - 세로바 3D(10-3-2): 박스 음영이 공용 규칙(얕고, 안쪽 위 그림자로 거꾸로 보임)뿐이었다 - 무료 에디터 10-3-2와 같은 깊이로, 그림자 색은 고른 색으로. */ .dbk-quote.dbk-quote--vertical-bar.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.35); box-shadow: 0 1px 2px color-mix(in srgb, var(--dbk-quote-color, #111111) 14%, transparent), 0 8px 18px color-mix(in srgb, var(--dbk-quote-color, #111111) 32%, transparent), inset 0 1px 0 rgba(255,255,255,0.35); } .dbk-quote--vertical-bar.dbk-3d-premium::before { width: 10px; border-radius: 5px; background: var(--dbk-quote-color); 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); box-shadow: 2px 3px 5px color-mix(in srgb, var(--dbk-quote-color, #111111) 35%, transparent); /* [1.3.11] 막대 그림자도 고른 색 */ } /* [2026-09-20 전면 재작성 - 실사용자가 실제 커밋된 발행 화면을 직접 보고 재확인: "위아래 각각 두 줄이 하나도 안 됐고 전체 드롭섀도우도 하나도 안 나온다"] 바로 위 두 차례(09-19, 09-20 이전)의 수정은 전부 무료 에디터 미리보기 쪽 코드에 달려있던 "실사용자 피드백으로 확정됨"이라는 코멘트를 그대로 믿고 거기 맞춘 것이었는데, 그 코멘트 자체가 실제 확인 없이 쓰인 잘못된 기록이었음이 실사용자의 직접 재현으로 드러났다. 올바른 요구사항은 처음부터 한결같았다: 위쪽 두 줄(굵기 서로 동일) + 아래쪽 두 줄(굵기 서로 동일) + 박스 전체 입체음영(드롭섀도우)을 전부 함께 섞어서 적용. 무료 쪽 dbk-frontend.css 10-4-2를 동일하게 다시 썼으니 그 파일과 완전히 똑같은 구조를 여기도 쓴다 - border-style:double의 정수 픽셀 분할 문제를 피하려고 border 대신 ::before/::after 하나짜리 요소 안에 "색-투명-색" 하드 스톱 그라데이션으로 두 줄을 그린다(각 줄 두께를 그라데이션 스톱 픽셀로 직접 지정하므로 위/아래 줄이 항상 완전히 같은 굵기로 나온다). 박스 전체 드롭섀도우는 공용 규칙(.dbk-quote.dbk-3d-premium, 152행)이 이미 주는 그림자를 재활용하지 않고 이 스타일 전용으로 다시 지정해서(공용 규칙과 값이 달라도 되므로), 무료 에디터와 정확히 같은 그림자가 나오게 한다. */ .dbk-quote--line-frame.dbk-3d-premium { border-top: none !important; border-bottom: none !important; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.3); } .dbk-quote--line-frame.dbk-3d-premium::before, .dbk-quote--line-frame.dbk-3d-premium::after { content: ''; position: absolute; left: 0; right: 0; height: 7px; background: linear-gradient( to bottom, var(--dbk-quote-color) 0px, var(--dbk-quote-color) 2px, transparent 2px, transparent 5px, var(--dbk-quote-color) 5px, var(--dbk-quote-color) 7px ); } .dbk-quote--line-frame.dbk-3d-premium::before { top: 0; transform: translateY(-100%); } .dbk-quote--line-frame.dbk-3d-premium::after { bottom: 0; transform: translateY(100%); } /* ----------------------------------------- 하이라이트: 그라데이션 스윕 효과 ----------------------------------------- */ /* 이 효과는 원래 transform: scaleX()로 왼쪽에서 오른쪽으로 "쓸어나오는" 느낌을 냈었는데, 이 규칙이 걸리는 요소 자체가(에디터 안에서) 실제로 글자를 직접 입력하는 contentEditable 요소(RichText가 렌더링하는 태그 자체)라서 문제가 있었음 - 브라우저가 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; } /* [2026-09-25, 1.3.9] 계층 번호 - 실사용자 지적: "H2 3개 중 가운데 H2 밑에 H3가 있으면 H3는 2-1, 2-2…, 마지막 H2는 3이어야 하는데 전부 1, 2, 3, 4…로 한 줄로 매겨진다". 무료 플러그인(2.44.45+)이 계산해 둔 번호(data-toc-num)를 그대로 표시한다. 그 속성이 없는 예전 무료 플러그인에서는 위의 기존 counter 번호가 그대로 나온다(하위호환). */ .dbk-toc--3d .dbk-toc__item[data-toc-num]::before { content: attr(data-toc-num); } .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; /* [2026-09-25, 1.3.9] "2-1"처럼 두 자리 이상 번호도 들어가도록 고정 원형(width) 대신 최소 크기 + 좌우 여백의 알약 모양. 한 자리 번호는 예전과 똑같이 동그랗게 보인다. */ min-width: 1.6em; padding: 0 0.4em; box-sizing: border-box; height: 1.6em; border-radius: 999px; 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); } /* ----------------------------------------- 반짝이는(샤인) 텍스트: 속도 조절 + 3D 글린트 ----------------------------------------- */ /* [2026-09-21 버그 수정] 아래 2D 속도 오버라이드는 이제 무료 플러그인의 dbk-frontend.css 6-1-1에서 --dbk-sparkle-duration 커스텀 프로퍼티로 직접 정의하므로(무료 CSS가 항상 이 애드온보다 먼저 로드됨), 여기서 중복 정의할 필요가 없어 제거함 - 두 파일이 서로 다른 값으로 드리프트할 위험을 없애기 위함. [2026-09-19 교체] 무료 쪽은 이미 "무관한 고정 무지개색 대신, 사용자가 설정한 --dbk-sparkle-color를 그대로 쓰되 흰색 글린트를 한 번 더 지나가게" 방식으로 바뀌었는데(0. 공통 규칙 c 위반 수정), 여기는 여전히 사용자 색과 무관한 핑크/노랑/민트/보라 고정 그라데이션을 쓰고 있었음 - 사용자가 어떤 색을 골라도 항상 같은 무지개만 보이는 버그. 무료와 동일한 원리(사용자 색 + 흰색 글린트)로 교체하되, 애드온답게 한 겹 더 화려하게: 글린트를 2회(더 촘촘하게) 지나가게 하고 은은한 text-shadow를 더한다. [2026-09-21 재수정] 실사용자 피드백 2건: (1) 속도(슬로우/노멀/패스트)가 발행 화면에서도 전혀 안 먹었음 - animation 축약형에 1.6s를 !important로 박아놔서 --dbk-sparkle-duration이나 .dbk-sparkle--slow/--fast의 animation-duration을 전부 무시하고 있었음(무료 CSS와 같은 원인의 같은 버그). longhand로 풀고, 속도 클래스 결합 셀렉터로 확실히 덮어쓰도록 수정. (2) "예전엔 화려한 무지개 느낌이었는데 지금은 검은 바탕에 지정색이 살짝 지나가는 느낌이라 지저분하다" - 그라데이션의 절반 이상(0~20%, 64~80%, 100%)이 currentColor(보통 검정)였던 게 원인. 원칙 c(사용자가 고른 색을 써야 함)는 유지하되 currentColor를 전부 빼고 그라데이션 전체를 --dbk-sparkle-color로 채운 뒤, 애드온답게 흰색 글린트를 2회 지나가게 해서 "화려함 속에 지정색이 확실히 강조"되도록 재구성 - 무료 CSS(6-1-2)와 동일한 원리를 그대로 따르되 글린트 횟수만 2회로 유지. */ .dbk-sparkle--rainbow3d { background-image: linear-gradient( 100deg, var(--dbk-sparkle-color) 0%, var(--dbk-sparkle-color) 25%, #fff 35%, var(--dbk-sparkle-color) 45%, var(--dbk-sparkle-color) 55%, #fff 65%, var(--dbk-sparkle-color) 75%, var(--dbk-sparkle-color) 100% ) !important; background-size: 250% 100% !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12)); animation-name: dbk-shine-rainbow3d; animation-duration: var(--dbk-sparkle-duration, 1.6s); animation-timing-function: linear; animation-iteration-count: infinite; } /* 결합 셀렉터로 특이도를 .dbk-sparkle--rainbow3d 단독보다 확실히 높여서, 속도 클래스가 항상 이겨야 한다(무료 CSS 6-1-2와 동일한 방식). */ .dbk-sparkle--rainbow3d.dbk-sparkle--slow { animation-duration: 4.5s; } .dbk-sparkle--rainbow3d.dbk-sparkle--fast { animation-duration: 1.4s; } @keyframes dbk-shine-rainbow3d { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .dbk-sparkle--rainbow3d { animation: none !important; } } /* ----------------------------------------- 글로우박스: "지정 색상" 네온 + 무지개 펄스 + 반짝이는 별(twinkle) ----------------------------------------- */ /* [2026-09-19 신규] 글로우박스 3D의 새 기본 모드("지정 색상" 네온) 자체가 이 파일에 아예 없었음 - 라이선스가 있는 사이트라도, 사용자가 무지개 옵션을 켜지 않은(기본값) 글로우박스 3D는 발행 화면에서 아무 광채도 안 보이는 상태였음(가장 치명적인 누락 - 이게 지금 새 기본값이라 거의 모든 신규 3D 글로우박스가 영향을 받음). 무료 플러그인이 --dbk-glow-color3d 변수를 이미 인라인으로 계산해서 내려주므로(검정 기본값일 땐 밝은 주황 #FF9F45로 자동 대체됨 - includes/class-dbk-renderer.php glow_box() 참고), 여기서는 그 변수를 그대로 써서 네온사인처럼 진하게-옅게 겹쳐 빛나는 광채를 만든다. */ .dbk-glow--neon3d { border: 3px solid transparent !important; animation: dbk-glow-neon3d 2s ease-in-out infinite; } @keyframes dbk-glow-neon3d { 0%, 100% { box-shadow: 0 0 10px 2px var(--dbk-glow-color3d, #FF9F45), 0 0 20px 5px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 75%, transparent), 0 0 34px 10px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 16px 4px var(--dbk-glow-color3d, #FF9F45), 0 0 30px 8px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 75%, transparent), 0 0 48px 14px color-mix(in srgb, var(--dbk-glow-color3d, #FF9F45) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } } .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); } } /* [2026-09-19 신규] 무료 에디터 미리보기는 두 3D 모드 모두 모서리에 ✨ 반짝임 장식을 얹어 "글로우박스 3D"라는 정체성을 통일해서 표현하는데, 이 파일에는 그게 전혀 없어서 발행 화면에서는 네온/무지개 둘 다 반짝임 장식이 빠진 채로 보였음 - 두 클래스 공통으로 추가. */ .dbk-glow--rainbow3d::before, .dbk-glow--rainbow3d::after, .dbk-glow--neon3d::before, .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; } .dbk-glow--rainbow3d::before, .dbk-glow--neon3d::before { top: 6px; left: 8px; } .dbk-glow--rainbow3d::after, .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 ); } } .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--rainbow3d, .dbk-glow--neon3d, .dbk-glow--rainbow3d::before, .dbk-glow--rainbow3d::after, .dbk-glow--neon3d::before, .dbk-glow--neon3d::after { animation: none; } .dbk-glow--twinkle::before, .dbk-glow--twinkle::after { animation: none; } } /* ----------------------------------------- 인용구: 포스트잇 / 모서리 프레임 ----------------------------------------- */ /* [2026-09-27 갱신 - 위 "특이도 주의" 전제가 틀렸던 것으로 확인됨] 아래 옛 메모는 무료 플러그인 dbk-frontend.css(10-5-1/10-6-1)의 기본형 padding 규칙이 클래스 1개(.dbk-quote--postit / .dbk-quote--corner-frame)였을 때 얘기다 - 무료 플러그인 쪽에서 "편집화면은 여백이 넉넉한데 발행화면만 타이트해진다"는 테마 특이도 충돌 버그가 발견되어, 그 기본형 padding 규칙이 이제 ".dbk-quote.dbk-quote--postit" / ".dbk-quote.dbk-quote--corner-frame"(클래스 2개)로 올라갔다. 이 애드온의 3D 규칙은 어차피 처음부터 최소 클래스 2개 (아래 ".dbk-quote--postit.dbk-3d-premium" 등)였고 padding 자체를 건드리지도 않으므로, 무료 쪽이 클래스 2개가 되어도 이 애드온의 장식(포스트잇 색, 코너 프레임 브래킷)이 덮어써지는 동작에는 전혀 영향이 없다 - 실제로 부딪히는 상황이 아니었으니, 아래 "클래스 개수를 무료 쪽과 똑같이 맞춰야 한다"는 옛 결론은 무시하고 이 애드온 파일은 지금 이대로 두면 된다(변경 불필요). 아래 원본 메모는 기록용으로 남겨둔다. */ /* [옛 메모, 더 이상 유효하지 않음] 무료 플러그인의 dbk-frontend.css(10-5-1/10-6-1)가 일부러 클래스 1개짜리 선택자(.dbk-quote--postit / .dbk-quote--corner-frame) 만 쓰도록 맞춰져 있다 - 이 애드온이 뒤에 로드되도록 의존성이 걸려있는 것과 맞물려("나중에 로드되는 동일 특이도 규칙이 이긴다"), 여기 특이도를 클래스 2개 이상으로 올리면 안 된다. 클래스 개수를 무료 쪽과 똑같이 유지해야 애드온의 실제 장식(포스트잇 색, 코너 프레임 브래킷)이 라이선스 있는 사이트에서 정상적으로 무료 플러그인의 "플레인" 대체 규칙을 덮어씀. [2026-09-20 버그 수정 - 실사용자 지적] 바로 위 특이도 계산은 맞았지만, 그동안 이 파일이 ".dbk-quote--postit"과 ".dbk-quote--corner-frame"(즉 .dbk-3d-premium이 안 붙은 "기본형" 선택자)에도 회전·그림자·모서리 접힘 같은 3D 전용 장식을 얹고 있었다 - 그러면 애드온이 설치된 순간부터(라이선스 유무와 무관하게 에디터 에서, 라이선스가 있으면 발행 화면까지) "기본형"을 골라도 이미 3D스러운 모습이 나와서, 기본형/3D형의 시각적 구분이 사라지고 무료 플러그인이 정의한 "기본형"의 실제 모습과도 달라지는 문제가 있었다. 3D 전용 장식은 반드시 ".dbk-3d-premium"이 붙은 선택자에만 걸려야 한다(원칙: 특이도만 맞추고 기본형 자체의 모습은 절대 건드리지 않는다) - 기본형 선택자에서는 무료 쪽과 똑같이 "이 클래스가 존재한다"는 사실 자체만 남기고 실제 장식 속성은 전부 .dbk-3d-premium 쪽으로 옮김. [2026-09-20 재수정 - 실사용자 지적: "비네팅 촌스럽다, 이전 모습(자연스러운 그라데이션)으로"] 위에서 기본형/3D 분리는 맞게 했지만, 옮겨 심은 3D 디자인 자체가 애초에 무료 에디터의 확정 디자인(10-5-2)과 달랐다 - 여긴 radial-gradient(중심에서 퍼지는 "비네팅"모양) + 두꺼운 회전(rotate -1deg)+ 들뜸(translateY)을 쓰고 있었는데, 무료 에디터는 155deg 대각선 방향 linear-gradient(크림→옅은 골드→짙은 골드로 매끄럽게 흐름) + 회전 없음 + 상단하이라이트/하단그림자 inset 조합을 쓴다 - 실사용자가 "이전 모습이 그라데이션도 자연스럽고 깔끔했다"고 한 게 바로 이 무료 에디터 쪽 모습과 일치한다(여러 차례 실사용자 피드백으로 이미 확정된 디자인이므로). 접힌 모서리 위치도 여긴 우측 하단이었는데 무료 쪽은 우측 상단이다 - 이것도 맞춤. padding/position은 기본형(무료 10-5-1)에서 그대로 물려받으므로 여기서 다시 선언하지 않는다(에디터도 동일한 방식). */ .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); } /* [2026-09-25, 1.3.11] 사용자 색 포스트잇 - 기본값(#111111) 이외의 색을 고르면 무료 플러그인이 .dbk-quote--custom-color를 붙인다. 그때만 종이 색을 고른 색 하나로 만든 같은 방향·같은 명암 단계의 그라데이션으로 바꾼다(기본값이면 위 노랑 그대로). 무료 에디터 10-5-2와 동일 값. */ .dbk-quote--postit.dbk-3d-premium.dbk-quote--custom-color { background: linear-gradient(155deg, color-mix(in srgb, var(--dbk-quote-color) 8%, white) 0%, color-mix(in srgb, var(--dbk-quote-color) 32%, white) 55%, color-mix(in srgb, var(--dbk-quote-color) 45%, white) 100%); } .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; } /* 3D 버전은 기본형과 똑같이 검증된 직선 그라데이션 방식(ㄴ자 모양이 확실히 나오는 방식)을 그대로 재사용하되, 두께를 더 두껍게 + 그림자를 얹어서 입체감을 냄. 기본형과 나란히 놓아도 확실히 차이가 남. 요소 하나에만 그림(가상요소 없음). [2026-09-20 버그 수정] 위 포스트잇과 동일한 이유로, 3D 전용 장식(두꺼운 브래킷·그림자)을 기본형 선택자(.dbk-quote--corner-frame)에서 떼어내 .dbk-3d-premium 쪽으로만 옮김 - 기본형은 무료 쪽 10-6-1과 완전히 동일한 모습(얇은 브래킷, 그림자 없음)을 유지한다. */ /* [2026-09-27, 1.4.1] 무료 플러그인 쪽 기본형(.dbk-quote.dbk-quote--corner-frame) padding이 테마의 blockquote 기본 padding과의 특이도 싸움에서 확실히 이기도록 !important로 바뀌었다(dbk-frontend.css 10-6-1 참고) - 여기 3D 전용 36px 40px도 똑같이 !important를 걸어야, 3D를 켰을 때 무료 쪽 24px 28px !important에 지지 않고 이 더 넓은 3D 여백이 이긴다. 이 규칙은 무료 파일보다 항상 나중에 로드되고 (register_styles()에서 'decobl-frontend'를 의존성으로 걸어둠) 특이도도 똑같이 클래스 2개라, !important끼리는 로드 순서로 갈리는 규칙에 따라 이 규칙이 이긴다. */ .dbk-quote--corner-frame.dbk-3d-premium { position: relative; padding: 54px 60px !important; /* [2026-09-27, 1.4.2] 실사용자 요청으로 기존 값(36px 40px)의 1.5배 - 무료 쪽 기본형(2.44.54)과 같은 비율로 함께 키움 */ 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; /* (공용 .dbk-quote.dbk-3d-premium의 위쪽 inset 그림자가 음영을 거꾸로 보이게 하던 것도 이 box-shadow가 덮어써서 함께 해결된다) [2026-09-25 수정 - 실사용자 지적: "음영이 거꾸로다. 좌상단에서 빛이 내려오니 우하단으로 드롭섀도가 생겨야 한다. 10-5-2(포스트잇)처럼 음영만 따라하라"] 음영(box-shadow)만 10-5-2와 완전히 같은 값으로 맞춘다: 우하단 드롭섀도 + 위쪽 안 하이라이트 + 아래쪽 안 그늘. 꺾쇠 모양·두께·색·위치·여백은 그대로. 예전 filter: drop-shadow는 박스 그림자와 글자까지 한 번 더 그림자를 씌워 지저분해지므로 이 음영으로 대체한다. [2026-09-25, 1.3.11] 음영에 고른 색(두 번째 box-shadow). */ 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); box-shadow: 3px 6px 14px color-mix(in srgb, var(--dbk-quote-color, #111111) 42%, transparent), inset 0 2px 0 rgba(255,255,255,.85), inset 0 -10px 14px -10px color-mix(in srgb, var(--dbk-quote-color, #111111) 20%, transparent); } /* ----------------------------------------- 구분선: 입체(3D) 실선/점선/파선 + 다이아몬드/화살표/슬래시/눈금 장식 ----------------------------------------- */ /* [2026-09-19 전면 재작성] 이 섹션 전체가 사용자가 고른 --dbk-divider-color를 무시하고 회색(#4a4a4a~#7a7a7a)/검정 고정값을 쓰고 있었음(0. 공통 규칙 원칙 c 위반 - "새 팔레트를 발명해서 사용자가 고른 색을 무시하지 않는다"). 무료 플러그인은 진작에 전부 var(--dbk-divider-color) 기반으로 정리되어 있으므로, 여기도 사용자가 어떤 색을 고르든 그 색의 광택/그림자 버전으로 보이도록 전부 교체. 모양(두께, 배치, 애니메이션)은 애드온의 기존 디자인을 유지하고 색상 소스만 고쳤다. */ .dbk-divider--solid.dbk-divider--3d { border-top: none !important; height: 5px !important; border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--dbk-divider-color) 55%, #fff), color-mix(in srgb, var(--dbk-divider-color) 70%, #000) ); 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, var(--dbk-divider-color) 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, var(--dbk-divider-color) 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, color-mix(in srgb, var(--dbk-divider-color) 55%, #fff), var(--dbk-divider-color) ); 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, color-mix(in srgb, var(--dbk-divider-color) 55%, #fff), color-mix(in srgb, var(--dbk-divider-color) 65%, #000) ); 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, color-mix(in srgb, var(--dbk-divider-color) 60%, #fff), color-mix(in srgb, var(--dbk-divider-color) 65%, #000) ); box-shadow: 1px 0 0 rgba(255,255,255,0.2) inset, 2px 2px 4px rgba(0,0,0,0.35); }