/*===========================================
🔵 [타입 A] 파란색 콜아웃 + 인라인 코드 트리거 (6열 격자형)
/* 1. 컨테이너: 풀와이드 속성 해제 및 기본 배치 */
.notion-callout[class*="blue"]:has(code) {
    position: static !important; /* 풀와이드 해제 */
    left: auto !important;
    width: 100% !important;      /* 뷰포트가 아닌 컨테이너 너비에 맞춤 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

/* 2. 갤러리 그리드 (4열 고정) */
.notion-callout[class*="blue"]:has(code) .notion-collection-gallery {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4열 고정 */
    gap: 16px 8px !important;
    padding: 0 !important;       /* 좌우 패딩 제거 (풀와이드 해제 시 필요) */
    width: 100% !important;      /* 너비 100% */
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}


/* 인라인 코드 트리거 영역 숨김 */
.notion-callout[class*="blue"]:has(code) code {
    display: none !important;
}
/* 3. 카드 내부 요소의 마진/패딩 초기화 */
.notion-callout[class*="blue"]:has(code) .notion-collection-card {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* 2. 카드 디자인 (배경 투명 및 라운딩 제거) */
.notion-callout[class*="blue"]:has(code) .notion-collection-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    transition: opacity 0.3s ease;
}
/* 3. 썸네일 스타일 (R값 없음) */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__cover,
.notion-callout[class*="blue"]:has(code) .notion-collection-card__cover img {
    aspect-ratio: 4 / 6 !important;
    border-radius: 0 !important; 
    width: 100% !important;
}
/* 4. 속성 글자 및 레이아웃 (카드 배경 투명) */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__content {
    background: transparent !important;
    padding: 8px 0 !important;
}

/* 5. 속성 숨김 및 제어 */
/* 속성 7 (인덱스 7, 0부터 시작하는 리스트 기준) 숨김 */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(8) {
    display: none !important;
}

/* [구분선] Divider 속성 고유 클래스 타겟팅 수정 */
.notion-collection-card__property.property-714d6155 {
    display: block !important;
    height: 1px !important;              
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e9e9e6 !important;
    
    /* 여기서 margin-top을 음수로 조정하여 공간을 줄입니다 */
    margin: -18px 0 5px 0 !important;   /* 필요에 따라 -10px을 -5px, -15px 등으로 조절하세요 */
    
    padding: 0 !important;
    color: transparent !important;
    pointer-events: none !important;
}

/* 모바일 대응: 좌우 여백 8px 고정 */
@media (max-width: 768px) {
/* 1. 갤러리 컨테이너 초기화: 패딩 제거 및 2열 설정 */
    .notion-callout[class*="blue"]:has(code) .notion-collection-gallery {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 !important;             /* 패딩 제거 */
        width: 100% !important;            /* 부모 요소인 콜아웃 너비에 100% 맞춤 */
        margin: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        overflow: hidden !important;       /* 넘침 방지 */
    }
  


    /* 1. 호출 내부에 있는 모든 속성 글자 크기를 11px로 통일 */
    .notion-callout[class*="blue"] .notion-collection-card__property:not(:first-child),
    .notion-callout[class*="blue"] .notion-collection-card__property:not(:first-child) *,
    .notion-callout[class*="blue"] .notion-collection-card__property:not(:first-child) [class*="relation"] a {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    /* 2. 호출 내 제목(첫 번째 속성) 크기 별도 제어 */
    .notion-callout[class*="blue"] .notion-collection-card__property:first-child,
    .notion-callout[class*="blue"] .notion-collection-card__property:first-child * {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

.notion-callout[class*="blue"] 
.notion-collection-card__property{

    min-height:auto !important;
    height:auto !important;

    padding-top:0 !important;
    padding-bottom:0 !important;

    margin-top:0 !important;
    margin-bottom:10 !important;

    line-height:1.2 !important;
}

/*구분선*/

.notion-property.property-714d6155,
.notion-property__text.property-714d6155,
.notion-collection-card__property.property-714d6155{

    min-height:1px !important;
    height:1px !important;
    max-height:7px !important;

    line-height:0 !important;

    margin:-6px 0 2px 0 !important;
    padding:0 !important;
}

}







/*=======================================

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

==========================================*/





/* 페이지 전체의 가로 스크롤바 숨김 (가장 강력한 수단) */

body, #notion-app, .notion-frame {

    overflow-x: hidden !important;

}



/* 풀와이드 컨테이너 (부모 영역 침범 방지) */

.notion-callout[class*="blue"]:has(.notion-quote) {

    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(.notion-quote) .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(.notion-quote) .notion-collection-gallery::-webkit-scrollbar {

    display: none !important;

}



/* 4. 시작점 보정 초기화 (중복 마진 제거) */

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-gallery > *:first-child {

    margin-left: 0 !important;

}



/* 5. 갤러리 뷰 컨테이너 초기화 */

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-view {

    background: transparent !important;

    padding: 20px 0 !important;

}



/**/



/* 3. 카드 디자인 및 너비 제어 (중복 통합) */

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-item,

.notion-callout[class*="blue"]:has(.notion-quote) .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(.notion-quote)

.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(.notion-quote)

.notion-collection-card__cover{



    display:block !important;

    overflow:hidden !important;



}



/* 실제 이미지 */

.notion-callout[class*="blue"]:has(.notion-quote)

img.notion-collection-card__cover{



    height:650px !important;

    width:auto !important;



    max-width:none !important;

    max-height:none !important;



    object-fit:contain !important;



}





.notion-callout[class*="blue"]:has(.notion-quote)

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(.notion-quote) .notion-collection-card__property-list {

    display: flex !important;

    flex-direction: column !important;

    /* gap을 음수로 설정하여 요소들을 서로 밀착시킴 */

    gap: -8px !important; 

    background: transparent !important;

    padding: 10px 0 !important;

}



/* 5. 속성 리스트 간격 최적화 (음수 마진 강제 적용) */

.notion-callout[class*="blue"]:has(.notion-quote) .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(.notion-quote) .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(.notion-quote) .notion-collection-card__property.title,

.notion-callout[class*="blue"]:has(.notion-quote) .notion-property.notion-property__title,

.notion-callout[class*="blue"]:has(.notion-quote) .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(.notion-quote) .notion-collection-card__property:not(.title) {

    margin-top: 2px !important; 

}



/* 모든 속성 리스트 내부의 텍스트 요소들을 타겟팅 */

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-card__property,

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-card__property *,

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-card__property .highlighted-color,

.notion-callout[class*="blue"]:has(.notion-quote) .notion-semantic-string,

.notion-callout[class*="blue"]:has(.notion-quote) .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(.notion-quote) .notion-semantic-string strong,

.notion-callout[class*="blue"]:has(.notion-quote) .notion-property-text strong,

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-card__property strong {

    color: #37352f !important; /* 위에서 설정한 텍스트 색상과 동일하게 */

    font-weight: 600 !important; /* 굵기는 유지 */

}



/* 속성 2번(index 2)과 3번(index 3) 사이 간격 강제 확장 */

/* .notion-collection-card__property-list 내부의 2번째 자식 요소에 하단 여백 추가 */

.notion-callout[class*="blue"]:has(.notion-quote) .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(.notion-quote) .notion-collection-card__property.property-4f45735f {

    margin-bottom: 0px !important;

    padding-bottom: 0px !important;

    display: block !important;

}





/* 6. 인용 트리거 숨김 */

.notion-callout[class*="blue"]:has(.notion-quote) .notion-quote {

    display: none !important;

}



/*모바일*/

@media (max-width:768px){

.notion-callout[class*="blue"]:has(.notion-quote)

img.notion-collection-card__cover{



    height:300px !important;

    width:auto !important;



    max-width:none !important;

    max-height:none !important;



    object-fit:contain !important;

    object-position:center center !important;



}



/*모바일 끝점 마무리*/

.notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-gallery {

        /* 모바일 끝점 여백: 30px 고정 */

        padding-right: 35px !important;

    }





/* 썸네일 박스 */

.notion-callout[class*="blue"]:has(.notion-quote)

.notion-collection-card__cover{



    height:300px !important;

    width:auto !important;

    min-height:0 !important;

    overflow:hidden !important;



}



/* 이미지 */

.notion-callout[class*="blue"]:has(.notion-quote)

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(.notion-quote) .notion-collection-card__property.title,

    .notion-callout[class*="blue"]:has(.notion-quote) .notion-property.notion-property__title {

        font-size: 14px !important; /* 모바일용 제목 크기 */

    }









/* 모바일 통합 스타일: 속성 리스트 내 모든 텍스트/볼드체/하이라이트 일괄 제어 */

    .notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-card__property-list,

    .notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-card__property-list *,

    .notion-callout[class*="blue"]:has(.notion-quote) .notion-collection-card__property-list .highlighted-color,

    .notion-callout[class*="blue"]:has(.notion-quote) .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(.notion-quote) .notion-collection-card__property-list strong {

        font-weight: 500 !important;

    }





.notion-callout[class*="blue"]:has(.notion-quote)

.notion-property__relation{



    height:16px !important;

    min-height:16px !important;

    max-height:16px !important;



    line-height:16px !important;



    margin:0 !important;

    padding:0 !important;



}
}





/*------------------------------------------
🟦 [타입 C] 블루 콜아웃+ 토글 트리거
    -> 오버랩+가로형 : 온라인 전시 (독립형 수정본)
  -----------------------------------------*/
/*트리거 숨김*/
.notion-callout[class*="blue"]:has(.notion-toggle):has(.notion-collection-gallery) .notion-toggle__trigger {
    display: none !important;
}

/* 토글 전체 영역은 남겨두어 기능 유지 */
.notion-callout[class*="blue"]:has(.notion-toggle):has(.notion-collection-gallery) .notion-toggle__summary {
    display: block !important;
    height: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 1. 그리드 레이아웃 설정 */
/*PC 2열 */
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}





/* 2. 카드 전체 설정 및 비율 */
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    aspect-ratio: 5 / 2 !important; /* 비율 유지 */
}
/* 3. */
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__cover,
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__cover > div,
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__cover img {
    height: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
    transition: transform 0.4s ease-in-out !important; 
    will-change: transform;
}

/* 4. 호버 효과 정밀 제어 */
/* 카드 전체에 호버했을 때 텍스트 레이어(그라데이션)가 유지되도록 함 */
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card:hover .notion-collection-card__content {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%) !important;
}

/* 호버 시 이미지 커짐 효과 유지 */
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card:hover .notion-collection-card__cover,
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card:hover .notion-collection-card__cover img {
    transform: scale(1.1) !important;
}


/* 5. 텍스트 레이어 */
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 25px 15px 25px !important;
    z-index: 10 !important;
    pointer-events: none;
    text-align: left !important;
}

/*제목 스타일*/
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:first-child,
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:first-child * {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
    display: block !important;
}


/*제목 위치*/
.notion-callout[class*="blue"]:has(.notion-toggle)
.notion-collection-card__content{

    display:flex !important;
    flex-direction:row !important;

    align-items:flex-end !important;
    justify-content:space-between !important;

    width:100% !important;
}

/*속성 화살표 스타일*/
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:not(:first-child),
.notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:not(:first-child) * {
    color: rgba(255,255,255,0.9) !important;
    font-size: 35px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5) !important;

}

/* 🚨 속성(첫 번째 제외한 모든 것) 숨김 처리 */
.notion-callout[class*="blue"]:has(.notion-toggle)
.notion-collection-card__property:nth-child(3){
    display:none !important;
}

/*------------------------------------------
📱 [모바일 전용 스타일] (768px 이하)
------------------------------------------*/
@media (max-width: 768px) {
    /* 모바일 1열 */
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-gallery {
        grid-template-columns: 1fr !important;
    }

    /* 모바일 비율 16:9 */
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card { 
        aspect-ratio: 16 / 9 !important; 
    }

    /* [모바일 그라데이션 높이 더 아래로 조정] */
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__content {
        height: 35% !important; /* 이미지의 아래쪽 1/3만 덮음 */
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%) !important;
        padding: 0 12px 12px 12px !important;
    }

    /* [모바일 폰트 제어] - 구체적인 클래스 타겟팅 */
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:first-child,
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:first-child .notion-semantic-string,
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:first-child * {
        font-size: 15px !important; /* 모바일 제목 크기 */
        font-weight: 700 !important;
    }

    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:not(:first-child),
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:not(:first-child) .notion-semantic-string,
    .notion-callout[class*="blue"]:has(.notion-toggle) .notion-collection-card__property:not(:first-child) * {
        font-size: 30px !important; /* 모바일 속성 크기 */
        line-height: 1.2 !important;
    }
}