/* 에디터 콘텐츠 기본 스타일 유틸리티 */
/* use-base 클래스를 추가하면 하위 자식 요소들에 기본 스타일이 적용됩니다 */
@layer components {
  .use-base ul,
  .use-base ol {
    @apply list-disc pl-6;
  }
  .use-base ol {
    @apply list-decimal;
  }
  .use-base ul ul,
  .use-base ol ol,
  .use-base ul ol,
  .use-base ol ul {
    @apply mb-0;
  }

  .use-base table {
    @apply w-full border-collapse;
  }
  .use-base thead {
    @apply bg-gray-100;
  }
  .use-base th,
  .use-base td {
    @apply border border-gray-300 px-4 py-2 text-left;
  }
  .use-base th {
    @apply font-semibold bg-gray-50;
  }
  .use-base tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }

  .use-base blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic text-gray-700;
  }

  .use-base h1 {
    @apply text-2xl;
  }
  .use-base h2 {
    @apply text-xl;
  }
  .use-base h3 {
    @apply text-lg;
  }
  .use-base h4 {
    @apply text-base;
  }
  .use-base h5 {
    @apply text-sm;
  }
  .use-base h6 {
    @apply text-xs;
  }

  .use-base strong,
  .use-base b {
    @apply font-bold;
  }
  .use-base em,
  .use-base i {
    @apply italic;
  }
  .use-base u {
    @apply underline;
  }
  .use-base s {
    @apply line-through;
  }

  .use-base a {
    @apply text-blue-600 underline;
  }
  .use-base a:hover {
    @apply text-blue-800;
  }

  .use-base img {
    @apply max-w-full h-auto my-4;
  }

  .use-base pre {
    @apply bg-gray-100 p-4 rounded overflow-x-auto mb-4;
  }
  .use-base code {
    @apply bg-gray-100 px-1 py-0.5 rounded text-sm;
  }
  .use-base pre code {
    @apply bg-transparent p-0;
  }
}