@import "tailwindcss";

/* 히어로/제목용 디스플레이 폰트 — font-display 클래스로 사용 */
@theme {
  --font-display: "Black Han Sans", sans-serif;
}

/* 브랜드 메인 색상 — 여기만 바꾸면 사이트 전체 primary 색이 바뀝니다 */
@theme inline {
  --color-primary-50: var(--color-purple-50);
  --color-primary-100: var(--color-purple-100);
  --color-primary-400: var(--color-purple-400);
  --color-primary-500: var(--color-purple-500);
  --color-primary-600: var(--color-purple-600);
  --color-primary-700: var(--color-purple-700);
  --color-primary-800: var(--color-purple-800);
}

/* 홈 히어로 등장 애니메이션 — animate-rise: 아래에서 떠오름, animate-pop: 튀어나오듯 팝 */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.6); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}

.animate-rise {
  animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-pop {
  animation: pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-rise, .animate-pop { animation: none; }
}

/* 점묘 배경 위 텍스트 가독성 확보 — 흰색 외곽선(stroke) + 은은한 글로우 */
.text-outline-white {
  paint-order: stroke fill;
  -webkit-text-stroke: 6px white;
  text-shadow: 0 0 12px white, 0 0 24px white;
}

.shimmer-placeholder {
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: shimmer-sweep 1.5s infinite linear;
}

@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Action Text styles for rich text editor */
.trix-editor {
  @apply min-h-[200px] px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
}

.trix-button-group button {
  @apply text-gray-700 hover:text-primary-500;
}

.trix-button--icon-bold::before,
.trix-button--icon-italic::before,
.trix-button--icon-link::before,
.trix-button--icon-quote::before,
.trix-button--icon-code::before,
.trix-button--icon-bullet-list::before,
.trix-button--icon-number-list::before,
.trix-button--icon-undo::before,
.trix-button--icon-redo::before {
  @apply text-gray-600;
}

.trix-button--icon-bold.trix-active::before,
.trix-button--icon-italic.trix-active::before,
.trix-button--icon-link.trix-active::before,
.trix-button--icon-quote.trix-active::before,
.trix-button--icon-code.trix-active::before,
.trix-button--icon-bullet-list.trix-active::before,
.trix-button--icon-number-list.trix-active::before {
  @apply text-primary-500;
}