/* 온라인 컬렉션 시리즈 명화 모음 - 컬렉션뷰 */
/* 3그리드 + 아미지 비율 노출 */

/*===========================================
🔵 [타입 A] 파란색 콜아웃 + 인라인 코드 트리거 (3열/온라인전시 컬렉션뷰)
/* 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(3, 1fr) !important; /* 4열 고정 */
    gap: 20px 10px !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;
}

/* 4. 속성 글자 및 레이아웃 (카드 배경 투명) */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__content {
    background: transparent !important;
    padding: 8px 0 !important;
}

/* 📌 속성 스타일링 */
/* --- 속성 1: 제목/강조 --- */
.notion-callout[class*="blue"]:has(code) .notion-property__title,
.notion-callout[class*="blue"]:has(code) .notion-property__title {
    /* font-size: 18px !important; */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    /*text-align: center;*/
    margin-bottom: 2px !important;
}

/* --- 속성 2: 설명 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(2),
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(2) * {
    /* font-size: 12px !important; */
    /*text-align: center;*/
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin-bottom: -4px !important;
}


/* --- 속성 3: 설명 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(3),
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(3) * {
      /* font-size: 12px !important; */
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
        margin-bottom: -4px !important;

}


/* --- 속성 4: 설명 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(4),
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(4) * {
      /* font-size: 12px !important; */
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* --- 속성 6: 관계형 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(6),
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(6) * {
      /* font-size: 12px !important; */
    padding: 0 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

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

/* [구분선] Divider 속성 고유 클래스 타겟팅 수정 [베이스로 옮김] */






/* 모바일 대응: 좌우 여백 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;        /* 넘침 방지 */
    }
  

/*구분선 [모바일 독립 제어]*/

.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;
}



/* 📌 속성 스타일링 */
/* --- 속성 1: 제목/강조 --- */
.notion-callout[class*="blue"]:has(code) .notion-property__title {
    /*font-size: 16px !important;*/
    line-height: 1.2 !important;
    /*text-align: center;*/
    margin-bottom: -5px !important;
}

/* --- 속성 2: 설명 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(2) {
    /*font-size: 10px !important;*/
    /*text-align: center;*/
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin-bottom: -4px !important;
}


/* --- 속성 3: 설명 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(3) {
      /*font-size: 10px !important;*/
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
        margin-bottom: -4px !important;

}


/* --- 속성 4: 설명 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(4) {
      /*font-size: 10px !important;*/
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* --- 속성 6: 관계형 --- */
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(6),
.notion-callout[class*="blue"]:has(code) .notion-collection-card__property:nth-child(6) * {
      /*font-size: 10px !important;*/
    padding: 0 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}





}