/*
 * 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.
 */

/* 반응형 미디어 임베드 */
.prose iframe[src*="youtube.com"],
.prose iframe[src*="youtu.be"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}

/* 트위터 임베드 반응형 */
.prose .twitter-tweet {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

/* 일반 iframe 반응형 */
.prose iframe {
  max-width: 100%;
}

/* 코드 블록 스타일 */
.prose .code-block-wrapper {
  position: relative;
  margin: 0.25rem 0 !important;
}

.prose pre {
  margin: 0 !important;
}

.prose .code-block-wrapper pre {
  position: relative;
  overflow-x: auto;
  padding: 0.5rem 0.75rem !important;
  background-color: #1e293b;
  border-radius: 0.5rem;
  margin: 0 !important;
}

.prose .code-block-wrapper code {
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #e2e8f0;
  padding: 0 !important;
  display: block;
}

/* 복사 버튼 스타일 */
.code-block-wrapper .copy-button {
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.code-block-wrapper:hover .copy-button {
  opacity: 1;
}

/* highlight.js 테마 커스터마이징 */
.hljs {
  background: transparent !important;
  color: #e2e8f0 !important;
}

/* HTML/XML */
.hljs-tag { color: #60a5fa !important; }
.hljs-tag .hljs-name { color: #60a5fa !important; }
.hljs-tag .hljs-attr { color: #fbbf24 !important; }
.hljs-attribute { color: #fbbf24 !important; }

/* 문자열 */
.hljs-string { color: #86efac !important; }
.hljs-attr-value { color: #86efac !important; }

/* 키워드 */
.hljs-keyword { color: #c084fc !important; }
.hljs-built_in { color: #c084fc !important; }

/* 함수/메서드 */
.hljs-function { color: #60a5fa !important; }
.hljs-title.function_ { color: #60a5fa !important; }

/* 숫자 */
.hljs-number { color: #fbbf24 !important; }

/* 주석 */
.hljs-comment { color: #6b7280 !important; }

/* 변수 */
.hljs-variable { color: #f87171 !important; }

/* 클래스 */
.hljs-class { color: #fbbf24 !important; }
.hljs-title.class_ { color: #fbbf24 !important; }

/* 구분선 스타일 */
.prose hr {
  border: 0;
  height: 1px;
  background: #e5e7eb;
  margin: 2rem auto !important;
  width: 100%;
  max-width: 100%;
}

/* 또는 그라데이션을 원한다면 */
.prose hr.gradient {
  background: linear-gradient(to right, transparent 10%, #d1d5db 30%, #d1d5db 70%, transparent 90%);
}