body { font-family: "나눔고딕","Malgun Gothic","맑은고딕","굴림","돋움","Helvetica","Apple SD Gothic Neo","sans-serif"; line-height: 1.6; margin: 0; padding: 0; background-color: #353535;color: #e0e0e0; }
        .progress-container { width: 100%; height: 1px;  position: fixed; top: 0; left: 0; z-index: 100;}
        .progress-bar { height: 1px; background: #007bff; width: 0%; transition: width 0.2s; }
        .youtube-container {
            position: fixed;
            z-index: 10; /* 다른 요소들 위에 표시 */
            display: none; /* 기본적으로 숨김 */
            top: 0;
            z-index: 10;
            background: #11111100;
            padding-bottom: 0px;
            border-bottom: 1px solid #444;
        }
        #player {
            border-radius: 4px; 
        }
        .image-container:hover {
            cursor: pointer;
        }
/* Markdown Table Styles */
.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    color: #ffffff;
    background-color: black;
}
.markdown-body th,
.markdown-body td {
    border: 1px solid #555; /* 어두운 배경에 맞는 테두리 색상 */
    padding: 8px 12px;
    text-align: left;
}

.markdown-body th {
    background-color: #2a2a2a; /* 헤더 배경색을 약간 다르게 설정 */
    font-weight: bold;
}
/* markdown-body 내부의 모든 요소에 대해 text-indent를 0으로 설정 */
.markdown-body * {
    text-indent: 0 !important;
}

/* garo */
@media (min-aspect-ratio: 1/1) {
    
    .youtube-container {
                width: 70%;
                float: left;
                margin-right: 1px;
            }
    .container { max-width: 100%; margin: auto; background: #353535; padding: 0; }
    .content-block { 
        display: flex; /* Flexbox 레이아웃 사용 */
        flex-direction: row; /* 가로 방향 배치 */
        align-items: flex-start; /* 상단 정렬 */
        gap: 1px; /* 이미지와 자막 사이 간격 */
        margin-bottom: 20px;
    }
    .image-container {
        flex-basis: 70%; /* 너비 70% 차지 */
        flex-shrink: 0; /* 공간이 부족해도 줄어들지 않음 */
    }
    .image-container img {
        width: 100%; /* 부모 컨테이너 너비에 100% 맞춤 */
        height: auto; /* 이미지 비율 유지를 위해 높이는 자동으로 설정 */
    }
    .caption-container {
        flex-basis: 30%; /* 너비 30% 차지 */
    }
    .content-block .caption { text-indent: 0.8em; font-size: 0.9em; padding: 5px 5px;margin:0; }
    .markdown-body ul { padding-left: 10px; margin: 0; }
    .markdown-body li { padding-right: 5px; margin:0; font-size: 0.9em; }
    .markdown-body p { font-size: 0.9em; padding: 0px 0px;margin:0; }
}
/* sero */
@media (max-aspect-ratio: 1/1) {
        .container { max-width: 100%; margin: auto; background: #353535; padding: 0; }
        .content-block { max-width: 100%; margin-bottom: 20px; text-align: left; }
        .content-block img { max-width: 100%; padding: 0; margin: 1px auto; display: block; }
        .caption { text-indent: 0.8em; font-size: 1em; width: 90%; padding: 5px 10px; margin: 0 auto 0 auto; box-sizing: border-box; }
    .markdown-body ul { padding-left: 15px; margin: 0; }
    .markdown-body li { padding-right: 5px; margin: 0; font-size: 1em; }
    .markdown-body p { font-size: 1em; width: 100%; padding: 0px 0px; margin: 0 auto 0 auto; box-sizing: border-box; }
}