/* 위치: 큐레이션 > 온라인 컬렉션 - 갤러리워크 */
/* 기능: 가로 슬라이드뷰 */

/*=======================================
📌[타입B] 슬라이드 갤러리형-파란색 콜아웃 바레이션 (온라인전시사용)
==========================================*/

/* 페이지 전체의 가로 스크롤바 숨김 (가장 강력한 수단) */
body, #notion-app, .notion-frame {
    overflow-x: hidden !important;
}

/* 풀와이드 컨테이너 (부모 영역 침범 방지) */
.notion-callout[class*="blue"]:has(blockquote) {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 53% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    /* 추가: 자기 자식들로 인해 부모가 늘어나는 것 방지 */
    overflow-x: hidden !important;
}

/* 2. 갤러리 뷰 및 슬라이드 (시작점/끝점 여백 통일) */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 100px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* 시작점 여백 제어 */
    padding-left: max(20px, calc((100vw - 1200px) / 2)) !important;
    /* [수정됨] 끝점 여백 제어: 시작점과 동일하게 적용 */
    padding-right: max(20px, calc((100vw - 1200px) / 2)) !important;
    padding-right: 470px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
}

/* 스크롤바 확실한 숨김 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-gallery::-webkit-scrollbar {
    display: none !important;
}

/* 4. 시작점 보정 초기화 (중복 마진 제거) */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-gallery > *:first-child {
    margin-left: 0 !important;
}

/* 5. 갤러리 뷰 컨테이너 초기화 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-view {
    background: transparent !important;
    padding: 20px 0 !important;
}

/* 3. 카드 디자인 및 너비 제어 (중복 통합) */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-item,
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 16:9 강제 비율 완전 제거 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__cover {
    aspect-ratio: unset !important;
    width: fit-content !important;
    min-width: unset !important;
    max-width: none !important;
}

/* 4. 썸네일 비율 조정 */
/* 썸네일 박스 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__cover {
    display: block !important;
    overflow: hidden !important;
}

/* 실제 이미지 */
.notion-callout[class*="blue"]:has(blockquote) img.notion-collection-card__cover {
    height: 650px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* 5. 속성 리스트 및 텍스트 스타일 (간격 최적화 버전) */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important; /* gap은 0으로 고정 */
    background: transparent !important;
    padding: 10px 0 !important;
}

/* 핵심: 각 속성 요소에 직접 음수 마진 적용 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property {
    margin-top: 0px !important; /* 이 값을 조절하여 위로 더 붙이세요 */
    margin-bottom: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}

/* 제목 스타일 (Roboto Flex 적용) */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property.title,
.notion-callout[class*="blue"]:has(blockquote) .notion-property.notion-property__title,
.notion-callout[class*="blue"]:has(blockquote) .notion-property.notion-property__title .notion-semantic-string {
    font-family: 'Roboto Flex', sans-serif !important; /* 제목은 Roboto Flex */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #37352f !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}

/* 첫 번째 속성 요소의 상단 마진을 0으로 초기화 (제목 아래 간격을 침범하지 않도록) */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property:not(.title) {
    margin-top: 2px !important; 
}

/* 모든 속성 리스트 내부의 텍스트 요소들을 타겟팅 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property,
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property *,
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property .highlighted-color,
.notion-callout[class*="blue"]:has(blockquote) .notion-semantic-string,
.notion-callout[class*="blue"]:has(blockquote) .notion-semantic-string * {
    font-family: 'Roboto Flex', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #37352f !important;
    line-height: 1.4 !important;
    background: transparent !important; /* 하이라이트 배경 강제 제거 */
}

/* 볼드체(strong)의 색상 강제 지정 */
.notion-callout[class*="blue"]:has(blockquote) .notion-semantic-string strong,
.notion-callout[class*="blue"]:has(blockquote) .notion-property-text strong,
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property strong {
    color: #37352f !important; /* 위에서 설정한 텍스트 색상과 동일하게 */
    font-weight: 600 !important; /* 굵기는 유지 */
}

/* 속성 2번(index 2)과 3번(index 3) 사이 간격 강제 확장 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property-list .notion-collection-card__property:nth-of-type(3) {
    margin-bottom: 10px !important; /* 15px만큼 간격이 벌어집니다 (수치 조절 가능) */
}

/* 1. 속성 5번(관계형/링크) 하단 여백 제거 */
.notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property.property-4f45735f {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
}

/* 6. 인용 트리거 숨김 */
.notion-callout[class*="blue"]:has(blockquote) .notion-quote {
    display: none !important;
}

/* 모바일 */
@media (max-width: 768px) {
    /* 모바일 끝점 마무리 */
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-gallery {
        /* 모바일 끝점 여백: 35px 고정 */
        padding-right: 35px !important;
    }

    /* 썸네일 박스 */
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__cover {
        height: 300px !important;
        width: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* 이미지 */
    .notion-callout[class*="blue"]:has(blockquote) img.notion-collection-card__cover {
        height: 400px !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* 제목 크기 조정 */
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property.title,
    .notion-callout[class*="blue"]:has(blockquote) .notion-property.notion-property__title {
        font-size: 14px !important; /* 모바일용 제목 크기 */
    }

    /* 모바일 통합 스타일: 속성 리스트 내 모든 텍스트/볼드체/하이라이트 일괄 제어 */
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property-list,
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property-list *,
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property-list .highlighted-color,
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property-list strong {
        font-family: 'Roboto Flex', sans-serif !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* 볼드체 굵기 고정 */
    .notion-callout[class*="blue"]:has(blockquote) .notion-collection-card__property-list strong {
        font-weight: 500 !important;
    }

    .notion-callout[class*="blue"]:has(blockquote) .notion-property__relation {
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        line-height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}