/* 추가적인 커스텀 스타일을 위한 파일 */
body {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
}
.prose {
    max-width: 100%;
}


/* Quill Editor Content Styling */

/* 유튜브 비디오를 감싸는 컨테이너 스타일 */
.ql-editor {
    margin: 20px auto; /* 위아래 마진 및 좌우 자동 중앙 정렬 */
    max-width: 780px;  /* 비디오의 최대 너비 설정 */
    aspect-ratio: 16 / 9; /* 16:9 비율 유지 */
}

/* iframe 자체의 스타일 */
.ql-editor iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.prose {
    max-width: 100%;
    overflow-wrap: break-word; /* 표준 속성: 긴 단어를 강제로 줄바꿈 */
    word-wrap: break-word;     /* 구형 브라우저 호환용 */
    white-space: pre-wrap;     /* 공백/줄바꿈은 유지하면서 자동 줄바꿈 */
}

.prose .ql-video {
    display: block; /* 중앙 정렬을 위해 block 요소로 변경 */
    width: 100%;
    max-width: 780px; /* 비디오의 최대 너비 설정 */
    height: auto; /* 높이는 비율에 따라 자동 조절되도록 설정 */
    aspect-ratio: 16 / 9; /* 16:9 비율을 직접 지정 */
    margin: 20px auto; /* 위아래 마진 및 좌우 자동 중앙 정렬 */
    border: none;
}

/* .prose 내의 Quill 컨텐츠 스타일 (유튜브 iframe) */
.prose .ql-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin: 1.5rem 0;
}
.prose .ql-video-wrapper iframe.ql-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* .prose 내의 HTML5 <video> 태그 스타일 (신규 추가)
*/
.prose video {
    width: 100%; /* 너비를 100%로 설정 */
    max-width: 800px; /* 최대 너비 제한 (선택 사항) */
    height: auto; /* 높이는 비율에 맞게 자동 조절 */
    display: block; /* 블록 요소로 변경 */
    margin: 1.5rem auto; /* 상하 마진 및 중앙 정렬 */
    border-radius: 8px; /* 모서리 둥글게 (선택 사항) */
    background-color: #000; /* 비디오 로딩 중 배경색 */
}


/* 기타 기본 스타일 */
body {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
}
.prose {
    max-width: 100%;
}