/* ==========================================================================
📌 [PC 전용] 다크 인트로 통합 스타일
========================================================================== */

/* --------------------------------------------------------------------------
1. 최외각 부모 다크 인트로 컨테이너 & 레이아웃
-------------------------------------------------------------------------- */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: -100px !important; 
    margin-bottom: 0px !important; 
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 80px 0 70px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* 1-1. 풀와이드 다크 배경 */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list)::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    margin-left: -50vw !important;
    background-color: #37352F !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* 1-2. 내부 콘텐츠 영역 초기화 */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) > .notion-callout__content {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 1-3. 맨 위 트리거용 번호매기기 목록 숨김 */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) ol:first-of-type,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-numbered-list:first-of-type {
    display: none !important;
}

/* 1-4. 기본 텍스트 및 링크 색상 지정 */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) > .notion-callout__content,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) h1:not([class*="color-"]),
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) h2:not([class*="color-"]),
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) h3:not([class*="color-"]),
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) p:not([class*="color-"]) {
    color: #ffffff !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) a:not(.ticket-popup-btn):not([class*="color-"]) {
    color: #ffffff !important;
    text-decoration: underline;
}



/* --------------------------------------------------------------------------
3. 인트로 내부 브레드크럼 + 위치 (주석 0.8) (파란색 콜아웃 무력화)
-------------------------------------------------------------------------- */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) {
    background-color: transparent !important; 
    border: 0px solid transparent !important;  
    border-radius: 0px !important;
    padding: 0px !important;
    /* color: #ffffff !important; */
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) .notion-callout__icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *::before,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *::after,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) p,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) div,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) span,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) li,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) strong,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) b {
    font-size: 0.8rem !important;    
    line-height: 1.6 !important;     
    /* color: #ffffff !important; 원래 노션 컬러 반영 위해 삭제 */ 
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) .notion-callout__content,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) .notion-text {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* -----------------------------------
📍 Location 링크는 노션 지정 색상 그대로 사용
----------------------------------- */
/* .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list)
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle))
a.notion-link {
    color: inherit !important;
} */


/* --------------------------------------------------------------------------
4. 인트로 내부 h1 제목 여백 리셋
-------------------------------------------------------------------------- */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(h1):not(:has(p, h2, h3, ul, ol, .notion-bulleted_list)) {
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 0px !important;
    padding: 0px 0px 15px 0px !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(h1):not(:has(p, h2, h3, ul, ol, .notion-bulleted_list)) .notion-callout__content,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(h1):not(:has(p, h2, h3, ul, ol, .notion-bulleted_list)) h1 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* --------------------------------------------------------------------------
5. 인트로 내부 핵심정보 (녹색 콜아웃 + code)
-------------------------------------------------------------------------- */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(code) p:has(code):first-of-type,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(code) .notion-text:has(code):first-of-type,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(code) ol:first-of-type {
    display: none !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(code) {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0px !important;  
    padding-top: 0px !important;    
    padding-bottom: 0px !important; 
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;       
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(code) .notion-callout__content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(code) .notion-callout__content * {
    font-size: 18px !important;
}

/* --------------------------------------------------------------------------
6. 인트로 내부 미술관 개요 (녹색 콜아웃 + toggle)
-------------------------------------------------------------------------- */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle) .notion-numbered_list,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle) .notion-numbered-list,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle) ol,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle) .notion-inline-code,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle) code {
    display: none !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)),
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .super-content div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .super-content div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)):hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) div:not(.notion-divider):not(.notion-callout),
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) *:not(.notion-divider):not(.notion-divider *):not(.notion-callout):not(.notion-callout *) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-callout__content * {
    font-size: 13px !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-callout__icon,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle__trigger_icon,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle__trigger_icon span,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle__trigger svg {
    display: none !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle:not(.open) .notion-toggle__trigger::before {
    content: "View more +" !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #999999 !important;
    display: inline-block !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle.open .notion-toggle__trigger::before {
    content: "View less -" !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #999999 !important;
    display: inline-block !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0 !important; 
    margin-left: 0 !important; 
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-callout__content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle__content {
    order: 1 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-callout__content > *,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle__content > *,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle__summary {
    order: 2 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-toggle__trigger {
    padding-left: 2px !important;
    margin-left: 0 !important;
} 

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-divider,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)):hover .notion-divider {
    display: block !important;
    visibility: visible !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 12px 0 !important;
    background: transparent !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-divider *,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)):hover .notion-divider * {
    background: transparent !important;
    border: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
7. 인트로 내부 인라인 코드 버튼 (예: 티켓 예매 버튼 등)
-------------------------------------------------------------------------- */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-text:has(code),
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) p:has(code) {
    text-align: center !important;
    margin-top: 20px !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) code {
    display: inline-block !important;
    color: #AD1A72 !important;
    background-color: #37352f !important;
    padding: 12px 24px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    border: 1px solid #ffffff !important;
}

.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) code a,
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) a code {
    color: #AD1A72 !important;
    text-decoration: none !important;
}


/* ==========================================================================
🟫 [독립 영역] 이미지 오버랩 좋아요 & 쉐어 버튼 (브라운 콜아웃)
========================================================================== */
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) {
    --padding-x-pc: 15px;
    position: relative !important;
    margin-top: -55px !important;
    z-index: 100 !important;
    width: 100% !important;
    max-width: 1150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--padding-x-pc) !important;
    padding-right: var(--padding-x-pc) !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) li,
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) [class*="bulleted"],
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) .notion-callout__icon {
    display: none !important;
}

.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) > .notion-callout__content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])),
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) p,
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) h1,
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) h2,
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) h3,
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) a,
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) span:not(:has(code)) {
    color: #ffffff !important;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) code,
.notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) .notion-inline-code {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #37352f !important;
    -webkit-text-fill-color: #37352f !important;
    background: rgba(255, 255, 255, 1) !important; 
    text-shadow: none !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}


/* ==========================================================================
🌐 [전역 영역] 인트로 외부 일반 파란색 콜아웃 (주석/브레드크럼)
========================================================================== */
.notion-callout[class*="blue"]:not(:has(code)) {
    background-color: transparent !important; 
    border: 0px solid transparent !important;  
    border-radius: 0px !important;
    padding: 0px !important;
    color: #37352f !important;
}

.notion-callout[class*="blue"]:not(:has(code)) .notion-callout__icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *::before,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *::after,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) p,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) div,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) span,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) li,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) strong,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) b {
    font-size: 0.8rem !important;    
    line-height: 1.6 !important;     
}

.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) .notion-text-block,
.notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) [contenteditable="false"] {
    font-size: 0.8rem !important;
}

.notion-callout[class*="blue"]:not(:has(code)) .notion-callout__content,
.notion-callout[class*="blue"]:not(:has(code)) .notion-text {
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* ==========================================================================
📱 [모바일 전용] 다크 인트로 통합 스타일 (768px 이하)
========================================================================== */
@media (max-width: 768px) {

    /* --------------------------------------------------------------------------
    1. 최외각 다크 인트로 컨테이너 패딩 조절
    -------------------------------------------------------------------------- */
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) {
        padding: 70px 0 70px 0 !important;
    }


   /* --------------------------------------------------------------------------
    3. 브레드크럼 (파란색 콜아웃) - PC 우선순위 덮어쓰기 수정 완료
    -------------------------------------------------------------------------- */
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *::before,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) *::after,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) p,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) div,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) span,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) li,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) strong,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) b,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) .notion-text-block,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) [contenteditable="false"],
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) .notion-semantic-string,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) .notion-semantic-string span,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)):not(:has(.notion-toggle)) .notion-callout__content * {
        font-size: 0.7rem !important;
        line-height: 1.6 !important;
    }

    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) .notion-text:first-child,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) p:first-child,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) .notion-callout__content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) ul,
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) ol {
        padding-left: 18px !important;
        margin-top: 8px !important;
    }

    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="blue"]:not(:has(code)) {
        display: block !important;
        padding: 0 !important;
        margin-bottom: -15px !important;
        width: 100% !important;
    }

/* --------------------------------------------------------------------------
4. 핵심정보 (녹색 콜아웃 + code) 글자 크기 (PC 우선순위 덮어쓰기 수정)
-------------------------------------------------------------------------- */
.notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) .notion-callout[class*="green"]:has(code) .notion-callout__content * {
    font-size: 14px !important;
}

    /* --------------------------------------------------------------------------
    5. 인라인 코드 버튼 패딩 및 크기
    -------------------------------------------------------------------------- */
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) code {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* --------------------------------------------------------------------------
    6. 오버랩 버튼 (브라운 콜아웃)
    -------------------------------------------------------------------------- */
    .notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) {
        --padding-x-mobile: 0px;
        margin-top: -55px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: var(--padding-x-mobile) !important;
        padding-right: var(--padding-x-mobile) !important;
        font-size: 10px !important;
    }


/* --------------------------------------------------------------------------
    미술관 개요 (녹색 콜아웃 + toggle) 모바일 글자 크기 조절
    -------------------------------------------------------------------------- */
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) div.notion-callout[class*="green"]:has(.notion-toggle):is(:has(.notion-numbered_list), :has(.notion-numbered-list), :has(ol), :has(.notion-inline-code), :has(code)) .notion-callout__content * {
        font-size: 11px !important; /* 모바일에 맞게 원하시는 크기(예: 11px~12px)로 조절 가능합니다 */
    }
}


/* ==========================================================================
📱 [소형 모바일] (380px 이하 전용)
========================================================================== */
@media (max-width: 380px) {
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) code {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}


/* ==========================================================================
📱 [모바일] 히어로 이미지 제어
========================================================================== */






/* ==========================================
📌 [2] 화이트 콘텐츠 시트 레이어 (인트로 위로 덮고 올라가는 영역)
========================================== */
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) {
    position: relative !important;
    z-index: 10 !important; /* 인트로(z-index: 1)보다 위에 위치해 위로 덮임 */
    background-color: #ffffff !important; /* 시각 확인용 연분홍 (완료 후 #ffffff) */
    border: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 0 80px 0 !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    
    /* 그림자 효과로 시트 느낌 강조 */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* 풀와이드 배경 보완 레이어 */
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"])::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    background-color: #ffffff !important;
    z-index: -1 !important;
}

/* 내부 트리거 숨김 */
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) > .notion-callout__content > ol:first-of-type,
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) > .notion-callout__content > .notion-numbered-list:first-of-type {
    display: none !important;
}

/* 내부 콘텐츠 정렬 */
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) > .notion-callout__content {
    position: relative !important;
    z-index: 1 !important;
    max-width: 1150px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* 텍스트 좌측 정렬 지정 */
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) h1,
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) h2,
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) h3,
.notion-callout:has(ol):has(.notion-numbered-list):not([class*="pink"]):not([class*="green"]):not([class*="blue"]):not([class*="brown"]) p {
    text-align: left !important;
}