/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 *= require actiontext
 */


/* Apply system font globally - 맑은 고딕 기반 통일 */
body {
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

/* Quill 에디터 SVG 아이콘 복원 - Tailwind reset 무효화 */
.ql-toolbar svg {
  display: inline !important;
  width: 18px !important;
  height: 18px !important;
  vertical-align: middle !important;
}



.ql-toolbar .ql-stroke {
  fill: none !important;
  stroke: #374151 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
}

.ql-toolbar .ql-fill {
  fill: #374151 !important;
  stroke: none !important;
}

/* Quill 기본 아이콘 색상 */
.ql-snow .ql-stroke {
  stroke: #374151 !important;
}

/* CSP 준수 - 모달 백드롭 스타일 */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  overscroll-behavior: contain;
}

/* CSP 준수 - 숨김 요소 */
.element-hidden {
  display: none;
}

.ql-snow .ql-fill {
  fill: #374151 !important;
}

/* 통합 툴바 스타일 - 모든 버튼 요소에 Flexbox 적용 */
.ql-toolbar button,
.ql-toolbar .ql-picker-label,
.ql-toolbar .ql-align {
  width: 28px;
  height: 24px;
  padding: 0 !important;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.15s ease;
}

/* 드롭다운 라벨은 통합 스타일에서 처리되므로 제거 */

.ql-toolbar button,
.ql-toolbar .ql-picker-label,
.ql-toolbar .ql-align {
  transition: all 0.2s;
}

.ql-toolbar .ql-picker-label,
.ql-toolbar .ql-align {
  color: #374151 !important;
}

.ql-toolbar button:hover,
.ql-toolbar .ql-picker-label:hover,
.ql-toolbar .ql-align:hover {
  background-color: #e5e7eb !important;
}

.ql-toolbar .ql-align:hover,
.ql-toolbar .ql-align.ql-active {
  color: #111827 !important;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-stroke,
.ql-toolbar button.ql-active .ql-fill,
.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-toolbar .ql-align:hover .ql-fill,
.ql-toolbar .ql-align.ql-active .ql-fill,
.ql-toolbar .ql-align:hover .ql-stroke,
.ql-toolbar .ql-align.ql-active .ql-stroke {
  stroke: #111827 !important;
  fill: #111827 !important;
}

/* 드롭다운 특별 스타일 */
.ql-toolbar .ql-picker-label:hover,
.ql-toolbar .ql-picker-label.ql-active {
  color: #111827 !important;
}

.dark .ql-toolbar .ql-stroke {
  stroke: #d4d4d4 !important;
}

.dark .ql-toolbar .ql-fill {
  fill: #d4d4d4 !important;
}

.dark .ql-snow .ql-stroke {
  stroke: #d4d4d4 !important;
}

.dark .ql-snow .ql-fill {
  fill: #d4d4d4 !important;
}

.dark .ql-toolbar .ql-picker-label,
.dark .ql-toolbar .ql-align {
  color: #d4d4d4 !important;
}

.dark .ql-toolbar button:hover,
.dark .ql-toolbar .ql-picker-label:hover,
.dark .ql-toolbar .ql-align:hover {
  background-color: #404040 !important;
}

.dark .ql-toolbar .ql-align:hover,
.dark .ql-toolbar .ql-align.ql-active {
  color: #FFFFFF !important;
}

.dark .ql-toolbar button:hover .ql-stroke,
.dark .ql-toolbar button:hover .ql-fill,
.dark .ql-toolbar button.ql-active .ql-stroke,
.dark .ql-toolbar button.ql-active .ql-fill,
.dark .ql-toolbar .ql-picker-label:hover .ql-stroke,
.dark .ql-toolbar .ql-picker-label:hover .ql-fill,
.dark .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.dark .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.dark .ql-toolbar .ql-align:hover .ql-fill,
.dark .ql-toolbar .ql-align.ql-active .ql-fill,
.dark .ql-toolbar .ql-align:hover .ql-stroke,
.dark .ql-toolbar .ql-align.ql-active .ql-stroke {
  stroke: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.dark .ql-toolbar .ql-picker-label:hover,
.dark .ql-toolbar .ql-picker-label.ql-active {
  color: #FFFFFF !important;
}

/* User dropdown positioning - accounts for navigation padding */
.dropdown-top-nav {
  top: 54px; /* 60px nav height - 6px to account for button positioning */
}

@media (max-width: 500px) {
  .notifications-drawer-menu {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}



/* Custom scrollbar styling */
:root {
  --custom-scrollbar-size: 6px;
  --custom-scrollbar-radius: 9999px;
  --custom-scrollbar-track: rgba(226, 232, 240, 0.72);
  --custom-scrollbar-thumb: rgba(148, 163, 184, 0.78);
  --custom-scrollbar-thumb-active: rgba(100, 116, 139, 0.88);
  --custom-scrollbar-transition: background-color 180ms ease, box-shadow 180ms ease;
}

.dark {
  --custom-scrollbar-track: rgba(38, 38, 38, 0.78);
  --custom-scrollbar-thumb: rgba(115, 115, 115, 0.78);
  --custom-scrollbar-thumb-active: rgba(163, 163, 163, 0.84);
}

.custom-scrollbar-global,
.action-text-content pre.ql-syntax,
.action-text-content .ql-code-block,
.action-text-content .ql-code-block-container {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

.action-text-content pre.ql-syntax,
.action-text-content .ql-code-block,
.action-text-content .ql-code-block-container {
  --custom-scrollbar-track: rgba(255, 255, 255, 0.14);
  --custom-scrollbar-thumb: rgba(255, 255, 255, 0.28);
  --custom-scrollbar-thumb-active: rgba(255, 255, 255, 0.42);
}

.custom-scrollbar-global:hover,
.custom-scrollbar-global:focus,
.custom-scrollbar-global:focus-within,
.action-text-content pre.ql-syntax:hover,
.action-text-content pre.ql-syntax:focus,
.action-text-content pre.ql-syntax:focus-within,
.action-text-content .ql-code-block:hover,
.action-text-content .ql-code-block:focus,
.action-text-content .ql-code-block:focus-within,
.action-text-content .ql-code-block-container:hover,
.action-text-content .ql-code-block-container:focus,
.action-text-content .ql-code-block-container:focus-within {
  scrollbar-color: var(--custom-scrollbar-thumb) var(--custom-scrollbar-track) !important;
}

/* Webkit browsers (Chrome, Safari, Edge, Naver Whale) */
.custom-scrollbar-global::-webkit-scrollbar,
.action-text-content pre.ql-syntax::-webkit-scrollbar,
.action-text-content .ql-code-block::-webkit-scrollbar,
.action-text-content .ql-code-block-container::-webkit-scrollbar {
  width: var(--custom-scrollbar-size) !important;
  height: var(--custom-scrollbar-size) !important;
  background: transparent !important;
}

.custom-scrollbar-global::-webkit-scrollbar-track,
.action-text-content pre.ql-syntax::-webkit-scrollbar-track,
.action-text-content .ql-code-block::-webkit-scrollbar-track,
.action-text-content .ql-code-block-container::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: var(--custom-scrollbar-radius) !important;
  transition: var(--custom-scrollbar-transition) !important;
}

.banner-adsense-slot {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-slot-frame {
  height: clamp(96px, 10vw, 144px);
}

.banner-direct-frame {
  min-height: 104px;
}

.banner-adsense-frame {
  min-height: 104px;
}

.custom-scrollbar-global::-webkit-scrollbar-track-piece,
.action-text-content pre.ql-syntax::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block-container::-webkit-scrollbar-track-piece {
  background: transparent !important;
  border-radius: var(--custom-scrollbar-radius) !important;
  transition: var(--custom-scrollbar-transition) !important;
}

/* Hide scrollbars but preserve scrolling */
.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.custom-scrollbar-global::-webkit-scrollbar-thumb,
.action-text-content pre.ql-syntax::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block-container::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: var(--custom-scrollbar-radius) !important;
  transition: var(--custom-scrollbar-transition) !important;
}

.custom-scrollbar-global:hover::-webkit-scrollbar-track,
.custom-scrollbar-global:focus::-webkit-scrollbar-track,
.custom-scrollbar-global:focus-within::-webkit-scrollbar-track,
.action-text-content pre.ql-syntax:hover::-webkit-scrollbar-track,
.action-text-content pre.ql-syntax:focus::-webkit-scrollbar-track,
.action-text-content pre.ql-syntax:focus-within::-webkit-scrollbar-track,
.action-text-content .ql-code-block:hover::-webkit-scrollbar-track,
.action-text-content .ql-code-block:focus::-webkit-scrollbar-track,
.action-text-content .ql-code-block:focus-within::-webkit-scrollbar-track,
.action-text-content .ql-code-block-container:hover::-webkit-scrollbar-track,
.action-text-content .ql-code-block-container:focus::-webkit-scrollbar-track,
.action-text-content .ql-code-block-container:focus-within::-webkit-scrollbar-track {
  background: var(--custom-scrollbar-track) !important;
}

.custom-scrollbar-global:hover::-webkit-scrollbar-track-piece,
.custom-scrollbar-global:focus::-webkit-scrollbar-track-piece,
.custom-scrollbar-global:focus-within::-webkit-scrollbar-track-piece,
.action-text-content pre.ql-syntax:hover::-webkit-scrollbar-track-piece,
.action-text-content pre.ql-syntax:focus::-webkit-scrollbar-track-piece,
.action-text-content pre.ql-syntax:focus-within::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block:hover::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block:focus::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block:focus-within::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block-container:hover::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block-container:focus::-webkit-scrollbar-track-piece,
.action-text-content .ql-code-block-container:focus-within::-webkit-scrollbar-track-piece {
  background: var(--custom-scrollbar-track) !important;
}

.custom-scrollbar-global:hover::-webkit-scrollbar-thumb,
.custom-scrollbar-global:focus::-webkit-scrollbar-thumb,
.custom-scrollbar-global:focus-within::-webkit-scrollbar-thumb,
.action-text-content pre.ql-syntax:hover::-webkit-scrollbar-thumb,
.action-text-content pre.ql-syntax:focus::-webkit-scrollbar-thumb,
.action-text-content pre.ql-syntax:focus-within::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block:hover::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block:focus::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block:focus-within::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block-container:hover::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block-container:focus::-webkit-scrollbar-thumb,
.action-text-content .ql-code-block-container:focus-within::-webkit-scrollbar-thumb {
  background: var(--custom-scrollbar-thumb) !important;
}

.custom-scrollbar-global:hover::-webkit-scrollbar-thumb:hover,
.custom-scrollbar-global:focus::-webkit-scrollbar-thumb:hover,
.custom-scrollbar-global:focus-within::-webkit-scrollbar-thumb:hover,
.action-text-content pre.ql-syntax:hover::-webkit-scrollbar-thumb:hover,
.action-text-content pre.ql-syntax:focus::-webkit-scrollbar-thumb:hover,
.action-text-content pre.ql-syntax:focus-within::-webkit-scrollbar-thumb:hover,
.action-text-content .ql-code-block:hover::-webkit-scrollbar-thumb:hover,
.action-text-content .ql-code-block:focus::-webkit-scrollbar-thumb:hover,
.action-text-content .ql-code-block:focus-within::-webkit-scrollbar-thumb:hover,
.action-text-content .ql-code-block-container:hover::-webkit-scrollbar-thumb:hover,
.action-text-content .ql-code-block-container:focus::-webkit-scrollbar-thumb:hover,
.action-text-content .ql-code-block-container:focus-within::-webkit-scrollbar-thumb:hover {
  background: var(--custom-scrollbar-thumb-active) !important;
}

.custom-scrollbar-global::-webkit-scrollbar-button,
.action-text-content pre.ql-syntax::-webkit-scrollbar-button,
.action-text-content .ql-code-block::-webkit-scrollbar-button,
.action-text-content .ql-code-block-container::-webkit-scrollbar-button {
  display: none !important;
}

.custom-scrollbar-global::-webkit-scrollbar-corner,
.action-text-content pre.ql-syntax::-webkit-scrollbar-corner,
.action-text-content .ql-code-block::-webkit-scrollbar-corner,
.action-text-content .ql-code-block-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  .custom-scrollbar-global::-webkit-scrollbar-track,
  .custom-scrollbar-global::-webkit-scrollbar-track-piece,
  .custom-scrollbar-global::-webkit-scrollbar-thumb,
  .action-text-content pre.ql-syntax::-webkit-scrollbar-track,
  .action-text-content pre.ql-syntax::-webkit-scrollbar-track-piece,
  .action-text-content pre.ql-syntax::-webkit-scrollbar-thumb,
  .action-text-content .ql-code-block::-webkit-scrollbar-track,
  .action-text-content .ql-code-block::-webkit-scrollbar-track-piece,
  .action-text-content .ql-code-block::-webkit-scrollbar-thumb,
  .action-text-content .ql-code-block-container::-webkit-scrollbar-track,
  .action-text-content .ql-code-block-container::-webkit-scrollbar-track-piece,
  .action-text-content .ql-code-block-container::-webkit-scrollbar-thumb {
    transition: none !important;
  }
}

/* Avatar tier preview frames */
.avatar-tier-frame {
  --frame-color: #a1a1aa;
  --frame-shadow: rgba(15, 23, 42, 0.28);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 4px;
  isolation: isolate;
  background: var(--frame-color);
  box-shadow: 0 10px 20px -18px var(--frame-shadow);
}

.avatar-tier-frame::before {
  display: none;
}

.avatar-tier-frame > img {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: inherit;
}

.avatar-tier-frame__markers {
  position: absolute;
  pointer-events: none;
}

.avatar-tier-frame__markers {
  left: 50%;
  bottom: -8px;
  height: 14px;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.92);
  box-shadow:
    0 8px 14px -10px rgba(2, 6, 23, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background-repeat: no-repeat;
  background-position: center;
}

.avatar-tier-frame__markers--1 {
  width: 18px;
  background-image: radial-gradient(circle at 50% 50%, #f8fafc 0 3px, transparent 3.5px);
}

.avatar-tier-frame__markers--2 {
  width: 28px;
  background-image:
    radial-gradient(circle at 32% 50%, #f8fafc 0 3px, transparent 3.5px),
    radial-gradient(circle at 68% 50%, #f8fafc 0 3px, transparent 3.5px);
}

.avatar-tier-frame__markers--3 {
  width: 38px;
  background-image:
    radial-gradient(circle at 24% 50%, #f8fafc 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 50%, #f8fafc 0 3px, transparent 3.5px),
    radial-gradient(circle at 76% 50%, #f8fafc 0 3px, transparent 3.5px);
}

.dark .avatar-tier-frame {
  box-shadow: 0 12px 24px -18px rgba(2, 6, 23, 0.78);
}

.avatar-tier-frame--amateur {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.avatar-tier-frame--amateur::before {
  display: none;
}

.avatar-tier-frame--family-amateur {
  --frame-color: #a1a1aa;
  --frame-shadow: rgba(82, 82, 91, 0.82);
}

.avatar-tier-frame--family-rookie {
  --frame-color: #94a3b8;
  --frame-shadow: rgba(75, 85, 99, 0.82);
}

.avatar-tier-frame--family-semi-pro {
  --frame-color: #10b981;
  --frame-shadow: rgba(5, 150, 105, 0.9);
}

.avatar-tier-frame--family-pro {
  --frame-color: #2563eb;
  --frame-shadow: rgba(17, 42, 136, 0.98);
}

.avatar-tier-frame--family-star {
  --frame-color: #6d28d9;
  --frame-shadow: rgba(76, 29, 149, 0.9);
}

.avatar-tier-frame--family-superstar {
  --frame-color: #d946ef;
  --frame-shadow: rgba(162, 28, 175, 0.9);
}

.avatar-tier-frame--family-world-class {
  --frame-color: #f59e0b;
  --frame-shadow: rgba(180, 83, 9, 0.9);
}

.avatar-tier-frame--family-mvp {
  --frame-color: #dc2626;
  --frame-shadow: rgba(127, 29, 29, 0.96);
}

.avatar-tier-frame--competitive-legend {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 245, 230, 0.72), transparent 24%),
    linear-gradient(145deg, #f8d6b1, #b87333 44%, #7c3f10 82%);
  box-shadow:
    0 18px 34px -24px rgba(124, 63, 16, 0.9),
    0 0 0 1px rgba(184, 115, 51, 0.56),
    inset 0 0 0 1px rgba(255, 244, 230, 0.54),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.avatar-tier-frame--competitive-legend::after,
.avatar-tier-frame--competitive-champion::after,
.avatar-tier-frame--competitive-goat::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255, 243, 191, 0.22), rgba(217, 119, 6, 0.2));
  filter: blur(6px);
}

.avatar-tier-frame--competitive-champion {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.96), transparent 26%),
    linear-gradient(145deg, #ffffff, #edf2f7 38%, #b7c2d1 72%, #7b8798 100%);
  box-shadow:
    0 18px 34px -22px rgba(100, 116, 139, 0.86),
    0 0 0 1px rgba(148, 163, 184, 0.88),
    0 0 0 3px rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.avatar-tier-frame--competitive-champion::after {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(148, 163, 184, 0.24));
}

.avatar-tier-frame--competitive-goat {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 250, 214, 0.92), transparent 22%),
    linear-gradient(145deg, #fff7cc, #facc15 36%, #f59e0b 66%, #9a3412 100%);
  box-shadow:
    0 20px 40px -22px rgba(180, 83, 9, 0.94),
    0 0 0 1px rgba(250, 204, 21, 0.74),
    0 0 0 3px rgba(255, 247, 204, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    inset 0 0 0 2px rgba(250, 204, 21, 0.2);
}

.avatar-tier-frame--competitive-goat::after {
  background:
    linear-gradient(145deg, rgba(255, 247, 204, 0.28), rgba(245, 158, 11, 0.22));
}

.tier-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--frame-color, #a1a1aa);
  box-shadow: 0 10px 24px -18px var(--frame-shadow, rgba(15, 23, 42, 0.72));
  transition: width 180ms ease-out;
}

.tier-progress-fill--0 { width: 0%; }
.tier-progress-fill--5 { width: 5%; }
.tier-progress-fill--10 { width: 10%; }
.tier-progress-fill--15 { width: 15%; }
.tier-progress-fill--20 { width: 20%; }
.tier-progress-fill--25 { width: 25%; }
.tier-progress-fill--30 { width: 30%; }
.tier-progress-fill--35 { width: 35%; }
.tier-progress-fill--40 { width: 40%; }
.tier-progress-fill--45 { width: 45%; }
.tier-progress-fill--50 { width: 50%; }
.tier-progress-fill--55 { width: 55%; }
.tier-progress-fill--60 { width: 60%; }
.tier-progress-fill--65 { width: 65%; }
.tier-progress-fill--70 { width: 70%; }
.tier-progress-fill--75 { width: 75%; }
.tier-progress-fill--80 { width: 80%; }
.tier-progress-fill--85 { width: 85%; }
.tier-progress-fill--90 { width: 90%; }
.tier-progress-fill--95 { width: 95%; }
.tier-progress-fill--100 { width: 100%; }

/* Community description clamp */
.community-description--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.best-comment-highlight--transition {
  transition: background-color 0.6s ease-out, box-shadow 0.6s ease-out;
}

.best-comment-highlight--active {
  background-color: rgba(147, 197, 253, 0.25);
}

/* 미디어/테이블 컨텍스트 툴바 공통 톤 */
.ql-media-controls,
.ql-table-context-toolbar {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* 미디어 컨트롤 스타일 */
.ql-media-controls {
  position: absolute;
  top: var(--toolbar-top, 0px);
  left: var(--toolbar-left, 0px);
  z-index: 1000;
  padding: 8px;
}

.ql-media-resize-overlay {
  position: absolute;
  top: var(--overlay-top, 0px);
  left: var(--overlay-left, 0px);
  width: var(--overlay-width, 0px);
  height: var(--overlay-height, 0px);
  z-index: 999;
  pointer-events: none;
}

.ql-media-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  background: #2563eb;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.35);
  pointer-events: auto;
  touch-action: none;
}

.ql-media-resize-handle-nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.ql-media-resize-handle-ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.ql-media-resize-handle-sw {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.ql-media-resize-handle-se {
  bottom: -7px;
  right: -7px;
  cursor: nwse-resize;
}

.ql-media-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* 모바일 반응형 레이아웃 */
@media (max-width: 640px) {
  .ql-media-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .ql-media-size {
    justify-content: center;
  }
  
  .ql-media-align {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .ql-media-controls {
    top: calc(var(--toolbar-top, 0px) - 35px);
  }

  .ql-media-resize-handle {
    width: 20px;
    height: 20px;
  }

  .ql-media-resize-handle-nw {
    top: -10px;
    left: -10px;
  }

  .ql-media-resize-handle-ne {
    top: -10px;
    right: -10px;
  }

  .ql-media-resize-handle-sw {
    bottom: -10px;
    left: -10px;
  }

  .ql-media-resize-handle-se {
    bottom: -10px;
    right: -10px;
  }
}


.ql-media-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ql-media-size label {
  color: #6b7280;
  font-size: 12px;
}


.ql-media-align {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid #d1d5db;
}

.ql-media-align .ql-aspect-group {
  margin-right: 12px;
}

.ql-media-align .ql-media-btn {
  margin-left: 12px;
}

.ql-media-main-btn {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 42px;
  width: 42px;
  height: 28px;
  padding: 6px;
}

.ql-media-main-btn:hover,
.ql-media-dropdown-item:hover {
  background: #e2e8f0;
  border-color: #d1d5db;
}

.ql-media-main-btn[aria-expanded="true"] {
  border-color: #d1d5db;
  background: #e2e8f0;
}

.ql-media-menu-item {
  position: relative;
  display: inline-flex;
}

.ql-media-main-btn {
  color: #111827;
}

.ql-media-main-icon,
.ql-media-main-caret {
  display: inline-flex;
  align-items: center;
}

.ql-media-main-caret {
  color: #111827;
}

.ql-media-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 42px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.ql-media-dropdown.hidden {
  display: none;
}

.ql-media-dropdown-item-icon {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #111827;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  width: 28px;
  min-width: 28px;
  padding: 6px;
}

.ql-media-dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ql-media-main-btn svg,
.ql-media-dropdown-item svg {
  width: 14px;
  height: 14px;
}

/* Quill: make newly inserted tables fill editor width */


.ql-media-main-btn svg line,
.ql-media-dropdown-item svg line {
  stroke: #111827;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ql-media-align .ql-media-btn {
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.ql-media-align .ql-media-btn svg {
  width: 14px;
  height: 14px;
}

/* 픽셀 기반 크기 조절 스타일 */
.ql-size-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
}

.ql-size-label {
  color: #6b7280;
  font-size: 12px;
  min-width: 24px;
  font-weight: 500;
}

.ql-size-input {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  color: #111827;
  font-size: 12px;
  padding: 4px 8px;
  width: 70px;
  text-align: center;
  transition: all 0.2s ease;
}

.ql-size-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #f9fafb;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.ql-size-input:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #cbd5e1;
}

.ql-size-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
}

.ql-size-input.ql-input-error {
  border-color: #ff4757;
  background: rgba(255, 71, 87, 0.1);
  animation: shake 0.3s ease-in-out;
}

.ql-size-unit {
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
}

/* 비율 유지 체크박스 그룹 */
.ql-aspect-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ql-aspect-checkbox {
  width: 14px;
  height: 14px;
  accent-color: #0066cc;
  cursor: pointer;
}

.ql-aspect-label {
  color: #6b7280;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

.ql-aspect-label:hover {
  color: #111827;
}

/* 에러 메시지 스타일 */
.ql-size-error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ff4757;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 0 0 4px 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1001;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ql-size-error.ql-error-visible {
  opacity: 1;
  visibility: visible;
}

/* 입력 에러 애니메이션 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* 통일된 미디어 버튼 스타일 */
.ql-media-btn {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: #111827;
  font-size: 14px;
  width: auto;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ql-media-btn:hover {
  background: #e2e8f0;
  border-color: #d1d5db;
}

.dark .ql-media-controls {
  background: #18181b;
  border: 1px solid #52525b;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.dark .ql-media-resize-handle {
  border-color: #0a0a0a;
  background: #60a5fa;
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35);
}

.dark .ql-media-size label {
  color: #999;
}

.dark .ql-media-main-btn {
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #e5e7eb;
}

.dark .ql-media-main-btn:hover,
.dark .ql-media-dropdown-item:hover {
  background: #3f3f46;
  border-color: #52525b;
}

.dark .ql-media-main-btn[aria-expanded="true"] {
  border-color: #52525b;
  background: #3f3f46;
}

.dark .ql-media-main-btn svg line,
.dark .ql-media-dropdown-item svg line {
  stroke: #e5e7eb;
}

.dark .ql-media-align {
  border-left-color: #52525b;
}

.dark .ql-media-main-caret {
  color: #e5e7eb;
}

.dark .ql-media-dropdown {
  border-color: #52525b;
  background: #18181b;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.dark .ql-media-dropdown-item {
  color: #e5e7eb;
}

.dark .ql-size-label {
  color: #a3a3a3;
}

.dark .ql-size-input {
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #fff;
}

.dark .ql-size-input:focus {
  border-color: #0066cc;
  background: #2a2a2a;
  box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.2);
}

.dark .ql-size-input:hover:not(:disabled) {
  background: #3f3f46;
  border-color: #52525b;
}

.dark .ql-size-input:disabled {
  background: #1a1a1a;
}

.dark .ql-size-unit {
  color: #a3a3a3;
}

.dark .ql-aspect-label {
  color: #ccc;
}

.dark .ql-aspect-label:hover {
  color: #fff;
}

.dark .ql-media-btn {
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #e5e7eb;
}

.dark .ql-media-btn:hover {
  background: #3f3f46;
  border-color: #52525b;
}


/* 에디터 내 미디어 반응형 스타일 */
.ql-editor img,
.ql-editor video {
  max-width: 100%;
}

.ql-editor img:not(.embed-resized-csp),
.ql-editor video:not(.embed-resized-csp) {
  height: auto;
}

/* YouTube iframe은 원본 크기 유지 (JavaScript에서 설정한 크기 존중) */
.ql-editor iframe {
  max-width: 100%;
  /* height는 iframe 속성값 유지 - auto 제거로 원본 비율 보존 */
}

/* 에디터 컨테이너 position 설정 */
.ql-container {
  position: relative;
}

/* Quill 에디터 다크 테마 커스텀 스타일 */
.ql-snow.ql-toolbar {
  border: none;
  background-color: #e5e5e5;
  border-radius: 0.375rem 0.375rem 0 0;
  border-bottom: 1px solid #e5e7eb;
}

.ql-snow .ql-toolbar button {
  color: #374151;
}

.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active {
  color: #111827;
}

.ql-snow .ql-stroke,
.ql-snow .ql-stroke-miter {
  stroke: #374151;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill,
.ql-snow .ql-even {
  fill: #374151;
  stroke: #374151;
}

.ql-snow.ql-container {
  border: none;
  background-color: #ffffff;
  color: #111827;
  border-radius: 0 0 0.375rem 0.375rem;
}

.ql-snow .ql-editor {
  color: #111827;
  background-color: #ffffff;
}

.ql-snow .ql-editor.ql-blank::before {
  color: #6b7280;
  font-style: normal;
  transition: color 200ms;
}

.ql-snow .ql-editor.ql-blank:focus::before {
  color: #374151;
}


.dark .ql-snow.ql-toolbar {
  background-color: #262626;
  border-bottom: 1px solid #262626;
}

.dark .ql-snow .ql-toolbar button {
  color: #d4d4d4;
}

.dark .ql-snow .ql-toolbar button:hover,
.dark .ql-snow .ql-toolbar button.ql-active {
  color: #FFFFFF;
}

.dark .ql-snow .ql-stroke,
.dark .ql-snow .ql-stroke-miter {
  stroke: #d4d4d4;
}

.dark .ql-snow .ql-fill,
.dark .ql-snow .ql-stroke.ql-fill,
.dark .ql-snow .ql-even {
  fill: #d4d4d4;
  stroke: #d4d4d4;
}

.dark .ql-snow.ql-container {
  background-color: #000000;
  color: #FFFFFF;
}

.dark .ql-snow .ql-editor {
  color: #FFFFFF;
  background-color: #000000;
}

.dark .ql-snow .ql-editor.ql-blank::before {
  color: #6b7280;
}

.dark .ql-snow .ql-editor.ql-blank:focus::before {
  color: #d1d5db;
}

/* Quill 에디터 포커스 상태는 이제 Tailwind 클래스로 처리 */

/* Quill 에디터 크기 조정 */
.ql-editor {
  min-height: 200px;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 툴바 그룹 구분선 */
.ql-snow .ql-toolbar .ql-formats {
  margin-right: 15px;
}

/* 툴바 드롭다운 스타일 */
.ql-snow .ql-picker-label {
  color: #374151;
}

.ql-snow .ql-picker-options {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ql-snow .ql-picker-item {
  color: #374151;
}

.ql-snow .ql-picker-item:hover {
  background-color: #e5e7eb;
  color: #111827 !important;
}

.ql-snow .ql-picker-item.ql-selected {
  background-color: #e5e7eb;
  color: #111827 !important;
}

.dark .ql-snow .ql-picker-label {
  color: #FFFFFF;
}

.dark .ql-snow .ql-picker-options {
  background-color: #262626;
  border: 1px solid #4B5563;
}

.dark .ql-snow .ql-picker-item {
  color: #FFFFFF;
}

.dark .ql-snow .ql-picker-item:hover {
  background-color: #404040;
  color: #FFFFFF !important;
}

.dark .ql-snow .ql-picker-item.ql-selected {
  background-color: #525252;
  color: #FFFFFF !important;
}


/* 정렬 버튼은 Quill 기본 스타일 사용 (테스트 페이지와 동일) */


/* 링크 스타일 개선 */
.ql-editor a {
  color: #3B82F6;
  text-decoration: underline;
  cursor: pointer;
}

.ql-editor a:hover {
  color: #1D4ED8;
  text-decoration: none;
}

/* Quill syntax module code blocks */
.ql-editor pre.ql-syntax {
  background-color: #f3f4f6;
  color: #111827;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.25rem 0;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}

.dark .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f5f5f5;
}

.ql-editor .ql-code-block-container {
  font-family: Menlo, Consolas, 'Courier New', monospace;
}

/* 테이블 다크 테마 스타일 - 검은색 배경에서 테이블 선을 보이게 설정 */
.ql-editor table {
  border-collapse: collapse;
  border: 1px solid #94a3b8;
  margin: 8px 0;
  width: auto;
  max-width: none;
  min-width: 200px;
  table-layout: auto;
}

.ql-editor td,
.ql-editor th {
  border: 1px solid #94a3b8;
  padding: 8px 12px;
  vertical-align: top;
  text-align: left;
}

.ql-editor td.ql-table-resize-col-cursor,
.ql-editor th.ql-table-resize-col-cursor {
  cursor: col-resize !important;
}

.ql-editor td.ql-table-resize-row-cursor,
.ql-editor th.ql-table-resize-row-cursor {
  cursor: row-resize !important;
}

.ql-editor.ql-table-col-resize-cursor {
  cursor: col-resize !important;
}

.ql-editor.ql-table-row-resize-cursor {
  cursor: row-resize !important;
}

.ql-editor th {
  background-color: #f3f4f6;
  font-weight: 600;
  color: #111827;
}

.ql-editor td {
  background-color: transparent;
  color: inherit;
}

.dark .ql-editor table {
  border: 1px solid #6B7280;
}

.dark .ql-editor td,
.dark .ql-editor th {
  border: 1px solid #6B7280;
}

.dark .ql-editor th {
  background-color: #374151;
  color: #FFFFFF;
}

.action-text-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.action-text-content table {
  border-collapse: collapse;
  border: 1px solid #94a3b8;
  margin: 8px 0;
  width: auto;
  max-width: none;
  min-width: 200px;
  table-layout: auto;
}

.action-text-content td,
.action-text-content th {
  border: 1px solid #94a3b8;
  padding: 8px 12px;
  vertical-align: top;
  text-align: left;
}

.action-text-content th {
  background-color: #f3f4f6;
  font-weight: 600;
  color: #111827;
}

.action-text-content td {
  background-color: transparent;
  color: inherit;
}

.dark .action-text-content table {
  border: 1px solid #6B7280;
}

.dark .action-text-content td,
.dark .action-text-content th {
  border: 1px solid #6B7280;
}

.dark .action-text-content th {
  background-color: #374151;
  color: #FFFFFF;
}

.ql-editor td.ql-table-cell-selected,
.ql-editor th.ql-table-cell-selected {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.ql-editor td.ql-table-cell-range-selected,
.ql-editor th.ql-table-cell-range-selected {
  background-color: rgba(37, 99, 235, 0.14);
}

.dark .ql-editor td.ql-table-cell-range-selected,
.dark .ql-editor th.ql-table-cell-range-selected {
  background-color: rgba(96, 165, 250, 0.22);
}

.ql-table-context-toolbar {
  position: absolute;
  top: var(--table-toolbar-top, 0);
  left: var(--table-toolbar-left, 0);
  z-index: 45;
  padding: 6px;
}

.ql-table-context-toolbar.hidden {
  display: none;
}

.ql-table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ql-table-menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.ql-table-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 42px;
  width: 42px;
  height: 28px;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f8fafc;
  color: #111827;
  cursor: pointer;
}

.ql-table-main-btn:hover {
  background: #e2e8f0;
}

.ql-table-main-btn[aria-expanded="true"] {
  border-color: #d1d5db;
  background: #e2e8f0;
}

.ql-table-main-icon svg,
.ql-table-main-caret svg,
.ql-table-delete-btn svg {
  width: 14px;
  height: 14px;
}

.ql-table-main-caret {
  display: inline-flex;
  align-items: center;
  color: #111827;
}

.ql-table-main-divider {
  width: 1px;
  height: 18px;
  background: #d1d5db;
  margin: 0 2px;
}

.ql-table-delete-btn {
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.ql-table-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 148px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.ql-table-dropdown-compact {
  min-width: 42px;
}

.ql-table-dropdown.hidden {
  display: none;
}

.ql-table-dropdown-item {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #111827;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  padding: 8px 10px;
  white-space: nowrap;
  cursor: pointer;
}

.ql-table-dropdown-item-icon {
  justify-content: center;
  width: 28px;
  min-width: 28px;
  padding: 6px;
}

.ql-table-dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ql-table-dropdown-item:hover {
  background: #e2e8f0;
}

.dark .ql-table-context-toolbar {
  border-color: #52525b;
  background-color: #18181b;
}

.dark .ql-table-main-btn {
  border-color: #3f3f46;
  background: #27272a;
  color: #e5e7eb;
}

.dark .ql-table-main-btn:hover {
  background: #3f3f46;
}

.dark .ql-table-main-btn[aria-expanded="true"] {
  border-color: #52525b;
  background: #3f3f46;
}

.dark .ql-table-main-caret {
  color: #e5e7eb;
}

.dark .ql-table-main-divider {
  background: #52525b;
}

.dark .ql-table-dropdown {
  border-color: #52525b;
  background: #18181b;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.dark .ql-table-dropdown-item {
  color: #e5e7eb;
}

.dark .ql-table-dropdown-item:hover {
  background: #3f3f46;
}

.dark .ql-table-dropdown-item-icon svg line {
  stroke: #e5e7eb;
}

.dark .ql-table-delete-btn {
  border-color: #3f3f46;
  background: #27272a;
  color: #e5e7eb;
}

.dark .ql-table-delete-btn:hover {
  background: #3f3f46;
}

@media (max-width: 640px) {
  .ql-table-toolbar {
    flex-wrap: wrap;
    max-width: min(420px, calc(100vw - 24px));
  }

  .ql-table-dropdown {
    left: 50%;
    transform: translateX(-50%);
  }

  .ql-media-dropdown {
    left: 50%;
    transform: translateX(-50%);
  }
}

.ql-editor table.ql-align-left,
.action-text-content table.ql-align-left {
  margin-left: 0;
  margin-right: auto;
}

.ql-editor table.ql-align-center,
.action-text-content table.ql-align-center {
  margin-left: auto;
  margin-right: auto;
}

.ql-editor table.ql-align-right,
.action-text-content table.ql-align-right {
  margin-left: auto;
  margin-right: 0;
}

/* Quill 색상/배경 클래스 매핑 (CSP-safe) */
.ql-editor .ql-color-0a0a0a,
.action-text-content .ql-color-0a0a0a { color: #0a0a0a; }
.ql-editor .ql-color-e60000,
.action-text-content .ql-color-e60000 { color: #e60000; }
.ql-editor .ql-color-ff9900,
.action-text-content .ql-color-ff9900 { color: #ff9900; }
.ql-editor .ql-color-ffff00,
.action-text-content .ql-color-ffff00 { color: #ffff00; }
.ql-editor .ql-color-008a00,
.action-text-content .ql-color-008a00 { color: #008a00; }
.ql-editor .ql-color-0066cc,
.action-text-content .ql-color-0066cc { color: #0066cc; }
.ql-editor .ql-color-9933ff,
.action-text-content .ql-color-9933ff { color: #9933ff; }
.ql-editor .ql-color-ffffff,
.action-text-content .ql-color-ffffff { color: #ffffff; }
.ql-editor .ql-color-facccc,
.action-text-content .ql-color-facccc { color: #facccc; }
.ql-editor .ql-color-ffebcc,
.action-text-content .ql-color-ffebcc { color: #ffebcc; }
.ql-editor .ql-color-ffffcc,
.action-text-content .ql-color-ffffcc { color: #ffffcc; }
.ql-editor .ql-color-cce8cc,
.action-text-content .ql-color-cce8cc { color: #cce8cc; }
.ql-editor .ql-color-cce0f5,
.action-text-content .ql-color-cce0f5 { color: #cce0f5; }
.ql-editor .ql-color-ebd6ff,
.action-text-content .ql-color-ebd6ff { color: #ebd6ff; }
.ql-editor .ql-color-bbbbbb,
.action-text-content .ql-color-bbbbbb { color: #bbbbbb; }
.ql-editor .ql-color-f06666,
.action-text-content .ql-color-f06666 { color: #f06666; }
.ql-editor .ql-color-ffc266,
.action-text-content .ql-color-ffc266 { color: #ffc266; }
.ql-editor .ql-color-ffff66,
.action-text-content .ql-color-ffff66 { color: #ffff66; }
.ql-editor .ql-color-66b966,
.action-text-content .ql-color-66b966 { color: #66b966; }
.ql-editor .ql-color-66a3e0,
.action-text-content .ql-color-66a3e0 { color: #66a3e0; }
.ql-editor .ql-color-c285ff,
.action-text-content .ql-color-c285ff { color: #c285ff; }
.ql-editor .ql-color-888888,
.action-text-content .ql-color-888888 { color: #888888; }
.ql-editor .ql-color-a10000,
.action-text-content .ql-color-a10000 { color: #a10000; }
.ql-editor .ql-color-b26b00,
.action-text-content .ql-color-b26b00 { color: #b26b00; }
.ql-editor .ql-color-b2b200,
.action-text-content .ql-color-b2b200 { color: #b2b200; }
.ql-editor .ql-color-006100,
.action-text-content .ql-color-006100 { color: #006100; }
.ql-editor .ql-color-0047b2,
.action-text-content .ql-color-0047b2 { color: #0047b2; }
.ql-editor .ql-color-6b24b2,
.action-text-content .ql-color-6b24b2 { color: #6b24b2; }
.ql-editor .ql-color-444444,
.action-text-content .ql-color-444444 { color: #444444; }
.ql-editor .ql-color-5c0000,
.action-text-content .ql-color-5c0000 { color: #5c0000; }
.ql-editor .ql-color-663d00,
.action-text-content .ql-color-663d00 { color: #663d00; }
.ql-editor .ql-color-666600,
.action-text-content .ql-color-666600 { color: #666600; }
.ql-editor .ql-color-003700,
.action-text-content .ql-color-003700 { color: #003700; }
.ql-editor .ql-color-002966,
.action-text-content .ql-color-002966 { color: #002966; }
.ql-editor .ql-color-3d1466,
.action-text-content .ql-color-3d1466 { color: #3d1466; }

.ql-editor .ql-bg-0a0a0a,
.action-text-content .ql-bg-0a0a0a { background-color: #0a0a0a; }
.ql-editor .ql-bg-e60000,
.action-text-content .ql-bg-e60000 { background-color: #e60000; }
.ql-editor .ql-bg-ff9900,
.action-text-content .ql-bg-ff9900 { background-color: #ff9900; }
.ql-editor .ql-bg-ffff00,
.action-text-content .ql-bg-ffff00 { background-color: #ffff00; }
.ql-editor .ql-bg-008a00,
.action-text-content .ql-bg-008a00 { background-color: #008a00; }
.ql-editor .ql-bg-0066cc,
.action-text-content .ql-bg-0066cc { background-color: #0066cc; }
.ql-editor .ql-bg-9933ff,
.action-text-content .ql-bg-9933ff { background-color: #9933ff; }
.ql-editor .ql-bg-fefefe,
.action-text-content .ql-bg-fefefe { background-color: #fefefe; }
.ql-editor .ql-bg-facccc,
.action-text-content .ql-bg-facccc { background-color: #facccc; }
.ql-editor .ql-bg-ffebcc,
.action-text-content .ql-bg-ffebcc { background-color: #ffebcc; }
.ql-editor .ql-bg-ffffcc,
.action-text-content .ql-bg-ffffcc { background-color: #ffffcc; }
.ql-editor .ql-bg-cce8cc,
.action-text-content .ql-bg-cce8cc { background-color: #cce8cc; }
.ql-editor .ql-bg-cce0f5,
.action-text-content .ql-bg-cce0f5 { background-color: #cce0f5; }
.ql-editor .ql-bg-ebd6ff,
.action-text-content .ql-bg-ebd6ff { background-color: #ebd6ff; }
.ql-editor .ql-bg-bbbbbb,
.action-text-content .ql-bg-bbbbbb { background-color: #bbbbbb; }
.ql-editor .ql-bg-f06666,
.action-text-content .ql-bg-f06666 { background-color: #f06666; }
.ql-editor .ql-bg-ffc266,
.action-text-content .ql-bg-ffc266 { background-color: #ffc266; }
.ql-editor .ql-bg-ffff66,
.action-text-content .ql-bg-ffff66 { background-color: #ffff66; }
.ql-editor .ql-bg-66b966,
.action-text-content .ql-bg-66b966 { background-color: #66b966; }
.ql-editor .ql-bg-66a3e0,
.action-text-content .ql-bg-66a3e0 { background-color: #66a3e0; }
.ql-editor .ql-bg-c285ff,
.action-text-content .ql-bg-c285ff { background-color: #c285ff; }
.ql-editor .ql-bg-888888,
.action-text-content .ql-bg-888888 { background-color: #888888; }
.ql-editor .ql-bg-a10000,
.action-text-content .ql-bg-a10000 { background-color: #a10000; }
.ql-editor .ql-bg-b26b00,
.action-text-content .ql-bg-b26b00 { background-color: #b26b00; }
.ql-editor .ql-bg-b2b200,
.action-text-content .ql-bg-b2b200 { background-color: #b2b200; }
.ql-editor .ql-bg-006100,
.action-text-content .ql-bg-006100 { background-color: #006100; }
.ql-editor .ql-bg-0047b2,
.action-text-content .ql-bg-0047b2 { background-color: #0047b2; }
.ql-editor .ql-bg-6b24b2,
.action-text-content .ql-bg-6b24b2 { background-color: #6b24b2; }
.ql-editor .ql-bg-444444,
.action-text-content .ql-bg-444444 { background-color: #444444; }
.ql-editor .ql-bg-5c0000,
.action-text-content .ql-bg-5c0000 { background-color: #5c0000; }
.ql-editor .ql-bg-663d00,
.action-text-content .ql-bg-663d00 { background-color: #663d00; }
.ql-editor .ql-bg-666600,
.action-text-content .ql-bg-666600 { background-color: #666600; }
.ql-editor .ql-bg-003700,
.action-text-content .ql-bg-003700 { background-color: #003700; }
.ql-editor .ql-bg-002966,
.action-text-content .ql-bg-002966 { background-color: #002966; }
.ql-editor .ql-bg-3d1466,
.action-text-content .ql-bg-3d1466 { background-color: #3d1466; }

/* Quill 컬러 픽커 색상 swatch(class-based) */
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="0a0a0a"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="0a0a0a"] { background-color: #0a0a0a; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="e60000"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="e60000"] { background-color: #e60000; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ff9900"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ff9900"] { background-color: #ff9900; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ffff00"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ffff00"] { background-color: #ffff00; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="008a00"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="008a00"] { background-color: #008a00; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="0066cc"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="0066cc"] { background-color: #0066cc; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="9933ff"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="9933ff"] { background-color: #9933ff; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ffffff"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ffffff"] { background-color: #ffffff; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="facccc"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="facccc"] { background-color: #facccc; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ffebcc"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ffebcc"] { background-color: #ffebcc; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ffffcc"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ffffcc"] { background-color: #ffffcc; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="cce8cc"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="cce8cc"] { background-color: #cce8cc; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="cce0f5"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="cce0f5"] { background-color: #cce0f5; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ebd6ff"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ebd6ff"] { background-color: #ebd6ff; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="bbbbbb"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="bbbbbb"] { background-color: #bbbbbb; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="f06666"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="f06666"] { background-color: #f06666; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ffc266"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ffc266"] { background-color: #ffc266; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="ffff66"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="ffff66"] { background-color: #ffff66; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="66b966"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="66b966"] { background-color: #66b966; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="66a3e0"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="66a3e0"] { background-color: #66a3e0; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="c285ff"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="c285ff"] { background-color: #c285ff; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="888888"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="888888"] { background-color: #888888; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="a10000"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="a10000"] { background-color: #a10000; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="b26b00"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="b26b00"] { background-color: #b26b00; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="b2b200"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="b2b200"] { background-color: #b2b200; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="006100"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="006100"] { background-color: #006100; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="0047b2"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="0047b2"] { background-color: #0047b2; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="6b24b2"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="6b24b2"] { background-color: #6b24b2; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="444444"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="444444"] { background-color: #444444; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="5c0000"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="5c0000"] { background-color: #5c0000; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="663d00"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="663d00"] { background-color: #663d00; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="666600"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="666600"] { background-color: #666600; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="003700"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="003700"] { background-color: #003700; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="002966"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="002966"] { background-color: #002966; }
.ql-toolbar .ql-picker.ql-color .ql-picker-item[data-value="3d1466"],
.ql-toolbar .ql-picker.ql-background .ql-picker-item[data-value="3d1466"] { background-color: #3d1466; }

/* Quill.js 툴팁 및 드롭다운 다크 테마 */
.ql-tooltip,
.ql-tooltip-editor {
  background-color: #374151 !important;
  border: 1px solid #4B5563 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.ql-tooltip input[type="text"] {
  background-color: #4B5563 !important;
  color: #FFFFFF !important;
  border: 1px solid #6B7280 !important;
}

.ql-tooltip input[type="text"]:focus {
  background-color: #4B5563 !important;
  border-color: #3B82F6 !important;
  outline: none !important;
}

.ql-tooltip a {
  color: #3B82F6 !important;
}

.ql-tooltip a:hover {
  color: #60A5FA !important;
}


/* 글꼴 크기 스타일 */
.ql-size-small {
  font-size: 0.75em;
}

.ql-size-large {
  font-size: 1.5em;
}

.ql-size-huge {
  font-size: 2em;
}

/* 들여쓰기 스타일 */
.ql-indent-1 {
  padding-left: 2em;
}

.ql-indent-2 {
  padding-left: 4em;
}

.ql-indent-3 {
  padding-left: 6em;
}

/* 정렬 스타일 - CSP 준수 */
.ql-align-left {
  text-align: left !important;
}

.ql-align-center {
  text-align: center;
}

.ql-align-right {
  text-align: right;
}

.ql-align-justify {
  text-align: justify;
}

/* embed 기본 스타일 - 컨테이너와 내부 요소 display 설정 */
.ql-video-embed {
  display: inline-block;
}

.ql-video-container,
.ql-youtube-container {
  display: inline-block;
  max-width: 100%;
}

/* embed 정렬 통일 - 개별 컨테이너 기반 정렬 */
img.ql-align-left,
.ql-video-container.ql-align-left,
.ql-youtube-container.ql-align-left {
  display: inline-block;
  text-align: left;
}

img.ql-align-center,
.ql-video-container.ql-align-center,
.ql-youtube-container.ql-align-center {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}

img.ql-align-right,
.ql-video-container.ql-align-right,
.ql-youtube-container.ql-align-right {
  display: block;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
  width: fit-content;
  max-width: 100%;
}

/* 커스텀 YouTube 버튼 아이콘 - LUCIDE SVG */
.ql-toolbar .ql-youtube:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3e%3cpath d='m10 15 5-3-5-3z'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-youtube {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-youtube:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3e%3cpath d='m10 15 5-3-5-3z'/%3e%3c/svg%3e");
}

/* 비디오 업로드 버튼은 Quill 기본 SVG 아이콘 사용 */

/* YouTubeBlot iframe 스타일 - 원본 크기 유지 */
.ql-editor iframe[src*="youtube.com/embed"] {
  max-width: 100%;
  border: 0;
  background: #000;
  /* height는 iframe 속성값 유지 (JavaScript에서 설정한 크기 존중) */
}

/* 다크 테마 호환성 - Flexbox 중앙 정렬 */
.ql-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.ql-toolbar .ql-formats {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

/* Quill 헤더 드롭다운 한글화 */
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before {
  content: '제목1';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before {
  content: '제목2';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before {
  content: '제목3';
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="false"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="false"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item:not([data-value])::before,
.ql-snow .ql-picker.ql-header .ql-picker-label:not([data-value])::before {
  content: '본문';
}

/* 기존 텍스트 숨기기 */
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value]::after,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value]::after {
  content: '';
  text-indent: -9999px;
  position: absolute;
  left: -9999px;
}

.ql-snow .ql-picker.ql-header .ql-picker-item,
.ql-snow .ql-picker.ql-header .ql-picker-label {
  text-indent: -9999px;
  position: relative;
  padding: 8px 10px;
  min-width: 60px;
  width: 60px;
  min-height: 28px;
  line-height: 1.5;
  height: auto;
  display: block;
  margin: 2px 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* 기본 텍스트 포맷 아이콘들 Lucide 교체 */
/* Bold 아이콘 */
.ql-toolbar .ql-bold:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-bold:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-bold {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-bold svg {
  display: none !important;
}

/* Italic 아이콘 */
.ql-toolbar .ql-italic:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='19' x2='10' y1='4' y2='4'/%3e%3cline x1='14' x2='5' y1='20' y2='20'/%3e%3cline x1='15' x2='9' y1='4' y2='20'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-italic:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='19' x2='10' y1='4' y2='4'/%3e%3cline x1='14' x2='5' y1='20' y2='20'/%3e%3cline x1='15' x2='9' y1='4' y2='20'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-italic {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-italic svg {
  display: none !important;
}

/* Underline 아이콘 */
.ql-toolbar .ql-underline:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 4v6a6 6 0 0 0 12 0V4'/%3e%3cline x1='4' x2='20' y1='20' y2='20'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-underline:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 4v6a6 6 0 0 0 12 0V4'/%3e%3cline x1='4' x2='20' y1='20' y2='20'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-underline {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-underline svg {
  display: none !important;
}

/* Strike 아이콘 */
.ql-toolbar .ql-strike:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M16 4H9a3 3 0 0 0-2.83 4'/%3e%3cpath d='M14 12a4 4 0 0 1 0 8H6'/%3e%3cline x1='4' x2='20' y1='12' y2='12'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-strike:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M16 4H9a3 3 0 0 0-2.83 4'/%3e%3cpath d='M14 12a4 4 0 0 1 0 8H6'/%3e%3cline x1='4' x2='20' y1='12' y2='12'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-strike {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-strike svg {
  display: none !important;
}

/* 색상 관련 아이콘들 Lucide 교체 - 드롭다운 기능 유지 */
/* Color 드롭다운 아이콘 교체 */
.ql-toolbar .ql-picker.ql-color .ql-picker-label svg {
  display: none !important;
}

.ql-toolbar .ql-picker.ql-color .ql-picker-label:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='13.5' cy='6.5' r='.5'/%3e%3ccircle cx='17.5' cy='10.5' r='.5'/%3e%3ccircle cx='8.5' cy='7.5' r='.5'/%3e%3ccircle cx='6.5' cy='12.5' r='.5'/%3e%3cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-picker.ql-color .ql-picker-label:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='13.5' cy='6.5' r='.5'/%3e%3ccircle cx='17.5' cy='10.5' r='.5'/%3e%3ccircle cx='8.5' cy='7.5' r='.5'/%3e%3ccircle cx='6.5' cy='12.5' r='.5'/%3e%3cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-picker.ql-color .ql-picker-label {
  position: relative;
  width: 28px;
  height: 24px;
}

/* Background 드롭다운 아이콘 교체 */
.ql-toolbar .ql-picker.ql-background .ql-picker-label svg {
  display: none !important;
}

.ql-toolbar .ql-picker.ql-background .ql-picker-label:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3e%3cpath d='m5 2 5 5'/%3e%3cpath d='M2 13h15'/%3e%3cpath d='m22 20-7.5-7.5L13 14l9 9Z'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-picker.ql-background .ql-picker-label:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3e%3cpath d='m5 2 5 5'/%3e%3cpath d='M2 13h15'/%3e%3cpath d='m22 20-7.5-7.5L13 14l9 9Z'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-picker.ql-background .ql-picker-label {
  position: relative;
  width: 28px;
  height: 24px;
}

/* 정렬 아이콘들 Lucide 교체 */
/* Align Left 아이콘 */
.ql-toolbar .ql-align[value=""] .ql-stroke,
.ql-toolbar .ql-align[value="left"] .ql-stroke,
.ql-toolbar button[data-value=""] .ql-stroke {
  display: none !important;
}

.ql-toolbar .ql-align[value=""]:before,
.ql-toolbar .ql-align[value="left"]:before,
.ql-toolbar button[data-value=""]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='15' x2='3' y1='12' y2='12'/%3e%3cline x1='17' x2='3' y1='18' y2='18'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-align[value=""]:hover:before,
.ql-toolbar .ql-align[value="left"]:hover:before,
.ql-toolbar button[data-value=""]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='15' x2='3' y1='12' y2='12'/%3e%3cline x1='17' x2='3' y1='18' y2='18'/%3e%3c/svg%3e");
}

/* Align Center 아이콘 */
.ql-toolbar .ql-align[value="center"] .ql-stroke,
.ql-toolbar button[data-value="center"] .ql-stroke {
  display: none !important;
}

.ql-toolbar .ql-align[value="center"]:before,
.ql-toolbar button[data-value="center"]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' x2='6' y1='6' y2='6'/%3e%3cline x1='21' x2='3' y1='12' y2='12'/%3e%3cline x1='18' x2='6' y1='18' y2='18'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-align[value="center"]:hover:before,
.ql-toolbar button[data-value="center"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' x2='6' y1='6' y2='6'/%3e%3cline x1='21' x2='3' y1='12' y2='12'/%3e%3cline x1='18' x2='6' y1='18' y2='18'/%3e%3c/svg%3e");
}

/* Align Right 아이콘 */
.ql-toolbar .ql-align[value="right"] .ql-stroke,
.ql-toolbar button[data-value="right"] .ql-stroke {
  display: none !important;
}

.ql-toolbar .ql-align[value="right"]:before,
.ql-toolbar button[data-value="right"]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='21' x2='9' y1='12' y2='12'/%3e%3cline x1='21' x2='7' y1='18' y2='18'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-align[value="right"]:hover:before,
.ql-toolbar button[data-value="right"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='21' x2='9' y1='12' y2='12'/%3e%3cline x1='21' x2='7' y1='18' y2='18'/%3e%3c/svg%3e");
}

/* 정렬 버튼 크기 설정 (통합 스타일에서 상속받음) */
.ql-toolbar .ql-align {
  width: 28px;
  height: 24px;
}

/* 정렬 버튼 패딩 통일 - 다른 버튼들과 동일하게 */
.ql-toolbar .ql-picker.ql-align .ql-picker-label {
  padding: 4px !important;
}

/* 리스트 아이콘들 Lucide 교체 */
/* List 아이콘 (불순서 리스트) */
.ql-toolbar .ql-list[value="bullet"]:before,
.ql-toolbar .ql-list[value=""]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='8' x2='21' y1='6' y2='6'/%3e%3cline x1='8' x2='21' y1='12' y2='12'/%3e%3cline x1='8' x2='21' y1='18' y2='18'/%3e%3ccircle cx='3' cy='6' r='1'/%3e%3ccircle cx='3' cy='12' r='1'/%3e%3ccircle cx='3' cy='18' r='1'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-list[value="bullet"]:hover:before,
.ql-toolbar .ql-list[value=""]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='8' x2='21' y1='6' y2='6'/%3e%3cline x1='8' x2='21' y1='12' y2='12'/%3e%3cline x1='8' x2='21' y1='18' y2='18'/%3e%3ccircle cx='3' cy='6' r='1'/%3e%3ccircle cx='3' cy='12' r='1'/%3e%3ccircle cx='3' cy='18' r='1'/%3e%3c/svg%3e");
}

/* ListOrdered 아이콘 (순서 리스트) */
.ql-toolbar .ql-list[value="ordered"]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='10' x2='21' y1='6' y2='6'/%3e%3cline x1='10' x2='21' y1='12' y2='12'/%3e%3cline x1='10' x2='21' y1='18' y2='18'/%3e%3cpath d='M4 6h1v4'/%3e%3cpath d='M4 10h2'/%3e%3cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-list[value="ordered"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='10' x2='21' y1='6' y2='6'/%3e%3cline x1='10' x2='21' y1='12' y2='12'/%3e%3cline x1='10' x2='21' y1='18' y2='18'/%3e%3cpath d='M4 6h1v4'/%3e%3cpath d='M4 10h2'/%3e%3cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-list {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-list svg {
  display: none !important;
}

/* 미디어 및 기타 아이콘들 Lucide 교체 */
/* Link 아이콘 */
.ql-toolbar .ql-link:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3e%3cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-link:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3e%3cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-link {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-link svg {
  display: none !important;
}

/* Image 아이콘 */
.ql-toolbar .ql-image:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3e%3ccircle cx='9' cy='9' r='2'/%3e%3cpath d='M21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-image:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3e%3ccircle cx='9' cy='9' r='2'/%3e%3cpath d='M21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-image {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-image svg {
  display: none !important;
}

/* Video 아이콘 */
.ql-toolbar .ql-video:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m22 8-6 4 6 4V8Z'/%3e%3crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-video:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m22 8-6 4 6 4V8Z'/%3e%3crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-video {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-video svg {
  display: none !important;
}

/* Table 아이콘 */
.ql-toolbar .ql-table:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 3v18'/%3e%3crect width='18' height='18' x='3' y='3' rx='2'/%3e%3cpath d='M3 9h18'/%3e%3cpath d='M3 15h18'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-table:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 3v18'/%3e%3crect width='18' height='18' x='3' y='3' rx='2'/%3e%3cpath d='M3 9h18'/%3e%3cpath d='M3 15h18'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-table {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-table svg {
  display: none !important;
}

/* Code 아이콘 */
.ql-toolbar .ql-code-block:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 16 4-4-4-4'/%3e%3cpath d='m6 8-4 4 4 4'/%3e%3cpath d='m14.5 4-5 16'/%3e%3c/svg%3e");
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 6px;
  pointer-events: none;
}

.ql-toolbar .ql-code-block:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 16 4-4-4-4'/%3e%3cpath d='m6 8-4 4 4 4'/%3e%3cpath d='m14.5 4-5 16'/%3e%3c/svg%3e");
}

.ql-toolbar .ql-code-block {
  position: relative;
  width: 28px;
  height: 24px;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ql-toolbar .ql-code-block svg {
  display: none !important;
}

/* 다크 테마용 Lucide 아이콘 */
.dark .ql-toolbar .ql-youtube:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3e%3cpath d='m10 15 5-3-5-3z'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-youtube:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3e%3cpath d='m10 15 5-3-5-3z'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-bold:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-bold:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-italic:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='19' x2='10' y1='4' y2='4'/%3e%3cline x1='14' x2='5' y1='20' y2='20'/%3e%3cline x1='15' x2='9' y1='4' y2='20'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-italic:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='19' x2='10' y1='4' y2='4'/%3e%3cline x1='14' x2='5' y1='20' y2='20'/%3e%3cline x1='15' x2='9' y1='4' y2='20'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-underline:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 4v6a6 6 0 0 0 12 0V4'/%3e%3cline x1='4' x2='20' y1='20' y2='20'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-underline:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 4v6a6 6 0 0 0 12 0V4'/%3e%3cline x1='4' x2='20' y1='20' y2='20'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-strike:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M16 4H9a3 3 0 0 0-2.83 4'/%3e%3cpath d='M14 12a4 4 0 0 1 0 8H6'/%3e%3cline x1='4' x2='20' y1='12' y2='12'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-strike:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M16 4H9a3 3 0 0 0-2.83 4'/%3e%3cpath d='M14 12a4 4 0 0 1 0 8H6'/%3e%3cline x1='4' x2='20' y1='12' y2='12'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-picker.ql-color .ql-picker-label:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='13.5' cy='6.5' r='.5'/%3e%3ccircle cx='17.5' cy='10.5' r='.5'/%3e%3ccircle cx='8.5' cy='7.5' r='.5'/%3e%3ccircle cx='6.5' cy='12.5' r='.5'/%3e%3cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-picker.ql-color .ql-picker-label:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='13.5' cy='6.5' r='.5'/%3e%3ccircle cx='17.5' cy='10.5' r='.5'/%3e%3ccircle cx='8.5' cy='7.5' r='.5'/%3e%3ccircle cx='6.5' cy='12.5' r='.5'/%3e%3cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-picker.ql-background .ql-picker-label:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3e%3cpath d='m5 2 5 5'/%3e%3cpath d='M2 13h15'/%3e%3cpath d='m22 20-7.5-7.5L13 14l9 9Z'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-picker.ql-background .ql-picker-label:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z'/%3e%3cpath d='m5 2 5 5'/%3e%3cpath d='M2 13h15'/%3e%3cpath d='m22 20-7.5-7.5L13 14l9 9Z'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-align[value=""]:before,
.dark .ql-toolbar .ql-align[value="left"]:before,
.dark .ql-toolbar button[data-value=""]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='15' x2='3' y1='12' y2='12'/%3e%3cline x1='17' x2='3' y1='18' y2='18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-align[value=""]:hover:before,
.dark .ql-toolbar .ql-align[value="left"]:hover:before,
.dark .ql-toolbar button[data-value=""]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='15' x2='3' y1='12' y2='12'/%3e%3cline x1='17' x2='3' y1='18' y2='18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-align[value="center"]:before,
.dark .ql-toolbar button[data-value="center"]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' x2='6' y1='6' y2='6'/%3e%3cline x1='21' x2='3' y1='12' y2='12'/%3e%3cline x1='18' x2='6' y1='18' y2='18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-align[value="center"]:hover:before,
.dark .ql-toolbar button[data-value="center"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' x2='6' y1='6' y2='6'/%3e%3cline x1='21' x2='3' y1='12' y2='12'/%3e%3cline x1='18' x2='6' y1='18' y2='18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-align[value="right"]:before,
.dark .ql-toolbar button[data-value="right"]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='21' x2='9' y1='12' y2='12'/%3e%3cline x1='21' x2='7' y1='18' y2='18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-align[value="right"]:hover:before,
.dark .ql-toolbar button[data-value="right"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='21' x2='3' y1='6' y2='6'/%3e%3cline x1='21' x2='9' y1='12' y2='12'/%3e%3cline x1='21' x2='7' y1='18' y2='18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-list[value="bullet"]:before,
.dark .ql-toolbar .ql-list[value=""]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='8' x2='21' y1='6' y2='6'/%3e%3cline x1='8' x2='21' y1='12' y2='12'/%3e%3cline x1='8' x2='21' y1='18' y2='18'/%3e%3ccircle cx='3' cy='6' r='1'/%3e%3ccircle cx='3' cy='12' r='1'/%3e%3ccircle cx='3' cy='18' r='1'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-list[value="bullet"]:hover:before,
.dark .ql-toolbar .ql-list[value=""]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='8' x2='21' y1='6' y2='6'/%3e%3cline x1='8' x2='21' y1='12' y2='12'/%3e%3cline x1='8' x2='21' y1='18' y2='18'/%3e%3ccircle cx='3' cy='6' r='1'/%3e%3ccircle cx='3' cy='12' r='1'/%3e%3ccircle cx='3' cy='18' r='1'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-list[value="ordered"]:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='10' x2='21' y1='6' y2='6'/%3e%3cline x1='10' x2='21' y1='12' y2='12'/%3e%3cline x1='10' x2='21' y1='18' y2='18'/%3e%3cpath d='M4 6h1v4'/%3e%3cpath d='M4 10h2'/%3e%3cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-list[value="ordered"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='10' x2='21' y1='6' y2='6'/%3e%3cline x1='10' x2='21' y1='12' y2='12'/%3e%3cline x1='10' x2='21' y1='18' y2='18'/%3e%3cpath d='M4 6h1v4'/%3e%3cpath d='M4 10h2'/%3e%3cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-link:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3e%3cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-link:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3e%3cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-image:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3e%3ccircle cx='9' cy='9' r='2'/%3e%3cpath d='M21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-image:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3e%3ccircle cx='9' cy='9' r='2'/%3e%3cpath d='M21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-video:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m22 8-6 4 6 4V8Z'/%3e%3crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-video:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m22 8-6 4 6 4V8Z'/%3e%3crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3e%3c/svg%3e");
}

.ql-toolbar button[aria-disabled="true"],
.ql-toolbar button[aria-disabled="true"]:hover {
  cursor: not-allowed !important;
}

.ql-toolbar button[aria-disabled="true"]:hover {
  background-color: transparent !important;
}

.ql-toolbar button[aria-disabled="true"] .ql-stroke,
.ql-toolbar button[aria-disabled="true"] .ql-fill,
.ql-toolbar button[aria-disabled="true"]:hover .ql-stroke,
.ql-toolbar button[aria-disabled="true"]:hover .ql-fill {
  stroke: #374151 !important;
  fill: #374151 !important;
}

.ql-toolbar .ql-image[aria-disabled="true"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3e%3ccircle cx='9' cy='9' r='2'/%3e%3cpath d='M21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3e%3c/svg%3e") !important;
}

.ql-toolbar .ql-video[aria-disabled="true"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m22 8-6 4 6 4V8Z'/%3e%3crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3e%3c/svg%3e") !important;
}

.dark .ql-toolbar button[aria-disabled="true"] .ql-stroke,
.dark .ql-toolbar button[aria-disabled="true"] .ql-fill,
.dark .ql-toolbar button[aria-disabled="true"]:hover .ql-stroke,
.dark .ql-toolbar button[aria-disabled="true"]:hover .ql-fill {
  stroke: #d4d4d4 !important;
  fill: #d4d4d4 !important;
}

.dark .ql-toolbar .ql-image[aria-disabled="true"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3e%3ccircle cx='9' cy='9' r='2'/%3e%3cpath d='M21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3e%3c/svg%3e") !important;
}

.dark .ql-toolbar .ql-video[aria-disabled="true"]:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m22 8-6 4 6 4V8Z'/%3e%3crect width='14' height='12' x='2' y='6' rx='2' ry='2'/%3e%3c/svg%3e") !important;
}

.dark .ql-toolbar .ql-table:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 3v18'/%3e%3crect width='18' height='18' x='3' y='3' rx='2'/%3e%3cpath d='M3 9h18'/%3e%3cpath d='M3 15h18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-table:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 3v18'/%3e%3crect width='18' height='18' x='3' y='3' rx='2'/%3e%3cpath d='M3 9h18'/%3e%3cpath d='M3 15h18'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-code-block:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 16 4-4-4-4'/%3e%3cpath d='m6 8-4 4 4 4'/%3e%3cpath d='m14.5 4-5 16'/%3e%3c/svg%3e");
}

.dark .ql-toolbar .ql-code-block:hover:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 16 4-4-4-4'/%3e%3cpath d='m6 8-4 4 4 4'/%3e%3cpath d='m14.5 4-5 16'/%3e%3c/svg%3e");
}

/* Syntax 언어 선택 드롭다운 */
.ql-code-block-container select.ql-ui {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 244, 246, 0.98)),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3e%3cpath d='M1 1.5l5 4 5-4' stroke='%23374151' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right 12px center;
  background-size: 100% 100%, 12px 7px;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 32px 6px 12px;
  font-size: 12px;
  line-height: 1;
  height: 25px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: Menlo, Consolas, 'Courier New', monospace;
}

.dark .ql-code-block-container select.ql-ui {
  background-image:
    linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(12, 12, 12, 0.98)),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3e%3cpath d='M1 1.5l5 4 5-4' stroke='%23f8fafc' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
}

.ql-code-block-container select.ql-ui:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.ql-code-block-container select.ql-ui:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.dark .ql-code-block-container select.ql-ui:focus,
.dark .ql-code-block-container select.ql-ui:hover {
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.28);
}

.ql-code-block-container select.ql-ui::-ms-expand {
  display: none;
}

.ql-code-block-container select.ql-ui::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.ql-code-block-container select.ql-ui + .ql-code-block-language-label {
  display: none;
}

.ql-code-block-container select.ql-ui option {
  background: rgba(12, 12, 12, 0.96);
  color: rgba(226, 232, 240, 0.9);
}



.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  text-indent: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  font-size: 14px !important;
  font-weight: normal !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before {
  text-indent: 0;
  position: absolute;
  left: 5px !important;
  top: 50%;
  transform: translateY(-50%) !important;
  width: calc(100% - 25px) !important;
  text-align: left !important;
  line-height: 1.2;
  white-space: nowrap;
  font-size: 14px !important;
  font-weight: normal !important;
}

/* 드롭다운 옵션 컨테이너 전체 설정 */
.ql-snow .ql-picker.ql-header .ql-picker-options {
  max-height: none !important;
  padding: 4px 0;
  overflow-y: visible;
  top: 100% !important;
  margin-top: 1px;
  min-width: 60px;
  width: 60px;
  box-sizing: border-box;
}

/* 드롭다운 레이블 (선택된 항목 표시) 설정 */
.ql-snow .ql-picker.ql-header .ql-picker-label {
  margin: 0;
  margin-top: -2px;
  min-height: 28px;
  overflow: hidden;
}

/* 펼침 아이콘 오른쪽 배치 */
.ql-snow .ql-picker.ql-header .ql-picker-label::after {
  content: '▼' !important;
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  color: #FFFFFF !important;
  pointer-events: none;
}

/* Quill.js 기본 CSS에서 오는 width 오버라이드 */
.ql-snow .ql-picker.ql-header {
  width: auto !important;
  min-width: auto !important;
}

/* 정렬 드롭다운, 텍스트 색상, 배경색 드롭다운 수직 정렬 교정 완료 */
/* .ql-picker.ql-align, .ql-picker.ql-color, .ql-picker.ql-background 관련 margin-top 제거됨 */

/* Navigation bar height - CSP compliant */
.navbar-height {
  height: 60px;
}

/* Modal backdrop - CSP compliant */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

/* Quill editor container - CSP compliant */
.quill-editor-container {
  min-height: 250px;
}

/* CSP A-grade 준수 - 실시간 동기화 진행률 바 시스템 */
.progress-container-csp {
  --progress-width: 0%;
  position: relative;
  width: 100%;
}

.progress-bar-csp {
  width: var(--progress-width);
  transition: width 0.3s ease-in-out;
}

/* CSP A-grade 준수 - 모달 애니메이션 시스템 */
.modal-csp {
  --modal-opacity: 0;
  --modal-scale: 0.95;
  --modal-transition: all 0.2s ease-out;

  opacity: var(--modal-opacity);
  transform: scale(var(--modal-scale));
  transition: var(--modal-transition);
}

.modal-csp.modal-showing {
  --modal-opacity: 1;
  --modal-scale: 1;
}

.modal-csp.modal-hiding {
  --modal-opacity: 0;
  --modal-scale: 0.95;
  --modal-transition: all 0.2s ease-in;
}

/* CSP A-grade 준수 - 드롭다운 애니메이션 시스템 */
.dropdown-menu-csp {
  --dropdown-opacity: 0;
  --dropdown-transform: translateY(-8px) scale(0.95);
  --dropdown-transition: opacity 150ms ease-out, transform 150ms ease-out;

  opacity: var(--dropdown-opacity);
  transform: var(--dropdown-transform);
  transition: var(--dropdown-transition);
}

.dropdown-menu-csp.dropdown-showing {
  --dropdown-opacity: 1;
  --dropdown-transform: translateY(0) scale(1);
}

.dropdown-menu-csp.dropdown-hiding {
  --dropdown-opacity: 0;
  --dropdown-transform: translateY(-8px) scale(0.95);
  --dropdown-transition: opacity 100ms ease-in, transform 100ms ease-in;
}

/* 드롭다운 위치 조정 CSS 클래스 */
.dropdown-position-right {
  right: 0;
  left: auto;
}

.dropdown-position-default {
  right: auto;
  left: auto;
}

/* Body 스크롤 제어 CSS 클래스 */
.body-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* CSP A-grade 준수 - 컬렉션 가능한 콘텐츠 확장/축소 애니메이션 */
.collapsible-content-csp {
  --content-max-height: 0px;
  --icon-rotate: 0deg;

  max-height: var(--content-max-height);
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
  opacity: 0;
}

.collapsible-content-csp.content-expanded {
  max-height: none;
  overflow: visible;
}

.collapsible-content-csp[data-state="open"] {
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
}

.collapsible-content-csp[data-state="closed"] {
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
  border-left-width: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
}

.show-all-list-csp {
  --show-all-max-height: 0px;
  max-height: var(--show-all-max-height);
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0.25rem;
  margin: -0.25rem;
}

.show-all-item-csp {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.show-all-item-hidden-csp {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* CSP A-grade 준수 - 표시/숨김 상태 제어 */
.display-none-csp {
  display: none !important;
}

.display-block-csp {
  display: block !important;
}

.display-flex-csp {
  display: flex !important;
}

.visibility-hidden-csp {
  visibility: hidden !important;
}

/* CSP A-grade 준수 - Quill YouTube Blot 시스템 */
.youtube-container-csp {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.youtube-container-csp iframe {
  display: block;
}

.youtube-iframe-csp {
  display: block;
  border: 0;
  max-width: 100%;
}

.youtube-overlay-csp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

/* CSP A-grade 준수 - Video Blot 시스템 */
.video-container-csp {
  position: relative;
  display: inline-block;
  max-width: 100%;
  --video-outline: 2px solid transparent;

  outline: var(--video-outline);
}

.video-container-csp.video-selected {
  --video-outline: 2px solid #0066cc;
}

.video-overlay-csp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

.video-overlay-hidden {
  display: none !important;
}

/* CSP A-grade 준수 - Embed Interaction 시스템 */
.embed-selected-csp {
  outline: 3px solid #3b82f6;
}

.embed-resizable-csp {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.embed-overlay-csp {
  display: none;
}

.embed-overlay-csp.overlay-visible {
  display: block;
}

.image-preview-hidden-csp {
  display: none !important;
}

.image-preview-visible-csp {
  display: block !important;
}

.image-progress-visible-csp {
  display: block !important;
}

.image-progress-hidden-csp {
  display: none !important;
}

.dropzone-disabled-csp {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.dropzone-enabled-csp {
  pointer-events: auto !important;
  opacity: 1 !important;
}

.dropzone-uploading-csp {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.dropzone-ready-csp {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* CSP A-grade 준수 - Video Element 시스템 */
.video-element-csp {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  height: auto;
  outline: 2px solid transparent;
  transition: outline 0.2s ease-in-out;
}

.video-element-csp.video-selected {
  outline: 2px solid #0066cc;
}

/* CSP A-grade 준수 - 선택된 embed 요소 */
.selected-embed {
  --embed-outline: 3px solid #3b82f6;

  outline: var(--embed-outline);
}

/* CSP A-grade 준수 - YouTube 오버레이 숨김 */
.youtube-overlay-hidden {
  display: none !important;
}

/* 게시물 상세 페이지에서 YouTube 오버레이 비활성화 (재생 가능하도록) */
.action-text-content .youtube-overlay-csp {
  pointer-events: none !important;
  display: none !important;
}

.action-text-content .video-overlay-csp {
  pointer-events: none !important;
  display: none !important;
}

.action-text-content .video-element-csp.video-selected {
  outline: none;
}

.action-text-content h1,
.action-text-content h2,
.action-text-content h3 {
  font-weight: 700;
  color: #f5f5f5;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.action-text-content h1 {
  font-size: 1.75rem;
}

.action-text-content h2 {
  font-size: 1.5rem;
}

.action-text-content h3 {
  font-size: 1.25rem;
}

.action-text-content p + h1,
.action-text-content p + h2,
.action-text-content p + h3 {
  margin-top: 2rem;
}

.action-text-content ul,
.action-text-content ol {
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.action-text-content ul {
  list-style-type: disc;
}

.action-text-content ol {
  list-style-type: decimal;
}

.action-text-content [data-list="bullet"] {
  list-style-type: disc;
}

.action-text-content [data-list="ordered"] {
  list-style-type: decimal;
}

.action-text-content li + li {
  margin-top: 0.5rem;
}

.action-text-content a {
  color: #4da3ff;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

.action-text-content a:hover,
.action-text-content a:focus {
  color: #7bbdff;
}

.action-text-content pre.ql-syntax,
.action-text-content .ql-code-block {
  background-color: #23241f;
  color: #f5f5f5;
  font-family: Menlo, Consolas, 'Courier New', monospace;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.25rem 0;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}

.action-text-content .ql-code-block-container {
  position: relative;
  background-color: #23241f;
  color: #f5f5f5;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.25rem 0;
  overflow-x: auto;
  font-family: Menlo, Consolas, 'Courier New', monospace;
  line-height: 1.6;
}

.action-text-content .ql-code-block-container .ql-code-block {
  white-space: pre;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.action-text-content .ql-code-block-container .ql-code-block + .ql-code-block {
  margin-top: 0;
}

.action-text-content pre.ql-syntax code {
  font: inherit;
  color: inherit;
}

.policy-document-shell {
  border: 1px solid #d4d4d8;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.policy-document-body {
  padding: 1.5rem 1.25rem;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.85;
  letter-spacing: -0.01em;
}

.policy-document-body > :first-child {
  margin-top: 0;
}

.policy-document-body > :last-child {
  margin-bottom: 0;
}

.policy-document-body h1,
.policy-document-body h2,
.policy-document-body h3,
.policy-document-editor-shell .ql-editor h1,
.policy-document-editor-shell .ql-editor h2,
.policy-document-editor-shell .ql-editor h3 {
  color: #111827;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.policy-document-body h1,
.policy-document-editor-shell .ql-editor h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.85rem;
  line-height: 1.15;
}

.policy-document-body h2,
.policy-document-editor-shell .ql-editor h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.45rem;
  line-height: 1.25;
}

.policy-document-body h3,
.policy-document-editor-shell .ql-editor h3 {
  margin-top: 2.1rem;
  margin-bottom: 0.85rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(148, 163, 184, 0.45);
  font-size: 1rem;
  line-height: 1.4;
}

.policy-document-body p,
.policy-document-editor-shell .ql-editor p {
  margin: 0.85rem 0;
}

.policy-document-body ul,
.policy-document-body ol {
  margin: 1rem 0;
  padding-left: 1.4rem;
}

.policy-document-body ul {
  list-style-type: disc;
}

.policy-document-body ol {
  list-style-type: decimal;
}

.policy-document-body [data-list="bullet"] {
  list-style-type: disc;
}

.policy-document-body [data-list="ordered"] {
  list-style-type: decimal;
}

.policy-document-body li,
.policy-document-editor-shell .ql-editor li {
  padding-left: 0.2rem;
}

.policy-document-body li + li,
.policy-document-editor-shell .ql-editor li + li {
  margin-top: 0.55rem;
}

.policy-document-editor-shell .ql-editor {
  min-height: 26rem;
  padding: 1.6rem 1.35rem 1.8rem;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.85;
  letter-spacing: -0.01em;
}

.policy-document-editor-shell .ql-editor > :first-child {
  margin-top: 0;
}

.policy-document-editor-shell .ql-editor > :last-child {
  margin-bottom: 0;
}

.policy-document-editor-shell .ql-editor ol,
.policy-document-editor-shell .ql-editor ul {
  margin: 1rem 0;
}

.policy-document-body strong,
.policy-document-editor-shell .ql-editor strong {
  color: #111827;
  font-weight: 700;
}

.policy-document-body a,
.policy-document-editor-shell .ql-editor a {
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
}

.policy-document-body a:hover,
.policy-document-body a:focus,
.policy-document-editor-shell .ql-editor a:hover,
.policy-document-editor-shell .ql-editor a:focus {
  color: #1e40af;
}

.policy-document-body blockquote,
.policy-document-editor-shell .ql-editor blockquote {
  margin: 1.25rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid #94a3b8;
  color: #475569;
}

.policy-document-body pre.ql-syntax,
.policy-document-body .ql-code-block-container,
.policy-document-editor-shell .ql-editor pre.ql-syntax,
.policy-document-editor-shell .ql-editor .ql-code-block-container {
  margin: 1.35rem 0;
}

.policy-document-body table,
.policy-document-editor-shell .ql-editor table {
  margin: 1.1rem 0;
}

.policy-document-editor-shell [data-quill-editor-target="container"] {
  border-color: #d4d4d8;
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
}

.policy-document-editor-shell .ql-snow.ql-toolbar {
  border-bottom: 1px solid rgba(212, 212, 216, 0.9);
  background: rgba(248, 250, 252, 0.95);
}

.policy-document-editor-shell .ql-snow .ql-editor.ql-blank::before {
  left: 1.35rem;
  right: 1.35rem;
}

.dark .policy-document-shell {
  border-color: #27272a;
  background: rgba(23, 23, 23, 0.7);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}

.dark .policy-document-body,
.dark .policy-document-editor-shell .ql-editor {
  color: #d4d4d8;
}

.dark .policy-document-body h1,
.dark .policy-document-body h2,
.dark .policy-document-body h3,
.dark .policy-document-editor-shell .ql-editor h1,
.dark .policy-document-editor-shell .ql-editor h2,
.dark .policy-document-editor-shell .ql-editor h3,
.dark .policy-document-body strong,
.dark .policy-document-editor-shell .ql-editor strong {
  color: #fafafa;
}

.dark .policy-document-body h3,
.dark .policy-document-editor-shell .ql-editor h3 {
  border-top-color: rgba(82, 82, 91, 0.95);
}

.dark .policy-document-body a,
.dark .policy-document-editor-shell .ql-editor a {
  color: #93c5fd;
}

.dark .policy-document-body a:hover,
.dark .policy-document-body a:focus,
.dark .policy-document-editor-shell .ql-editor a:hover,
.dark .policy-document-editor-shell .ql-editor a:focus {
  color: #bfdbfe;
}

.dark .policy-document-body blockquote,
.dark .policy-document-editor-shell .ql-editor blockquote {
  border-left-color: #52525b;
  color: #a1a1aa;
}

.dark .policy-document-editor-shell [data-quill-editor-target="container"] {
  border-color: #27272a;
  background: rgba(23, 23, 23, 0.7);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}

.dark .policy-document-editor-shell .ql-snow.ql-toolbar {
  border-bottom-color: rgba(39, 39, 42, 0.95);
  background: rgba(24, 24, 27, 0.94);
}

@media (min-width: 640px) {
  .policy-document-body {
    padding: 2rem 1.9rem;
  }

  .policy-document-editor-shell .ql-editor {
    padding: 2rem 1.9rem 2.1rem;
  }

  .policy-document-editor-shell .ql-snow .ql-editor.ql-blank::before {
    left: 1.9rem;
    right: 1.9rem;
  }
}

/* CSP A-grade 준수 - 툴바 위치 시스템 */
.embed-toolbar-csp {
  --toolbar-top: 0px;
  --toolbar-left: 0px;

  position: absolute;
  top: var(--toolbar-top);
  left: var(--toolbar-left);
  z-index: 1000;
}

/* CSP 준수 - 커스텀 select 화살표 제거 */
.select-no-arrow {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
}

/* Tournament create form: keep event-format prompt tone aligned with other placeholder-like fields */
.tournament-event-format-select {
  background-color: #f5f5f5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

.tournament-event-format-select:hover,
.tournament-event-format-select:focus {
  background-color: #e5e5e5;
}

.dark .tournament-event-format-select {
  background-color: #262626;
}

.dark .tournament-event-format-select:hover,
.dark .tournament-event-format-select:focus {
  background-color: #404040;
}

.tournament-event-format-select:required:invalid {
  color: #737373;
}

.tournament-event-format-select:required:invalid:hover,
.tournament-event-format-select:required:invalid:focus {
  color: #404040;
}

.dark .tournament-event-format-select:required:invalid {
  color: #737373;
}

.dark .tournament-event-format-select:required:invalid:hover,
.dark .tournament-event-format-select:required:invalid:focus {
  color: #d4d4d4;
}

/* Admin users filter selects: align placeholder/background tone with tournament event-format select */
.admin-filter-select-tone {
  background-color: #f5f5f5;
}

.admin-filter-select-tone:hover,
.admin-filter-select-tone:focus {
  background-color: #e5e5e5;
}

.dark .admin-filter-select-tone {
  background-color: #262626;
}

.dark .admin-filter-select-tone:hover,
.dark .admin-filter-select-tone:focus {
  background-color: #404040;
}

.admin-filter-select-placeholder {
  color: #525252;
}

.admin-filter-select-placeholder:hover,
.admin-filter-select-placeholder:focus {
  color: #262626;
}

.dark .admin-filter-select-placeholder {
  color: #737373;
}

.dark .admin-filter-select-placeholder:hover,
.dark .admin-filter-select-placeholder:focus {
  color: #d4d4d4;
}

/* Light theme readability tuning */
html:not(.dark) .text-neutral-500 {
  color: #525252;
}

html:not(.dark) .text-neutral-600 {
  color: #404040;
}

html:not(.dark) .placeholder-neutral-400::placeholder {
  color: #737373;
  opacity: 1;
}

html:not(.dark) .placeholder-neutral-500::placeholder {
  color: #525252;
  opacity: 1;
}

html:not(.dark) .hover\:placeholder-neutral-700:hover::placeholder,
html:not(.dark) .focus\:placeholder-neutral-700:focus::placeholder {
  color: #404040;
  opacity: 1;
}

html:not(.dark) .text-amber-600 {
  color: #b45309;
}

html:not(.dark) .text-amber-700 {
  color: #92400e;
}

html:not(.dark) .text-emerald-600 {
  color: #047857;
}

html:not(.dark) .text-emerald-700 {
  color: #065f46;
}

html:not(.dark) .text-rose-600 {
  color: #be123c;
}

html:not(.dark) .text-rose-700 {
  color: #9f1239;
}

html:not(.dark) .text-sky-700 {
  color: #075985;
}

html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-500 {
  color: #2563eb;
}

html:not(.dark) .hover\:text-blue-300:hover,
html:not(.dark) .hover\:text-blue-400:hover,
html:not(.dark) .hover\:text-blue-500:hover,
html:not(.dark) .hover\:text-blue-600:hover {
  color: #1d4ed8;
}

/* 스크롤바 숨김 - 드래그 스크롤용 */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

.keep-white {
  color: #ffffff;
}