/* ==========================================================================
📱 [태블릿/아이패드 전용] 3레이어 일반 스크롤 반응형 CSS (768px ~ 1024px)
========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* 1. 최상위 컨테이너 기준점 */
    .notion-page-content {
        position: relative !important;
    }

    /* --------------------------------------------------------------------------
       1번 레이어: 히어로 이미지 (스티키 해제 & 일반 흐름 적용)
    -------------------------------------------------------------------------- */
    .notion-callout:not([class*="bg-"]):not([class*="brown"]):not([class*="orange"]):not([class*="blue"]):not([class*="gray"]):not([class*="yellow"]):not(:has(ol)):not(:has([class*="numbered"])):has(.notion-image) {
        position: relative !important;
        top: 0 !important;
        z-index: 1 !important;
        background-color: #37352F !important;
        border: none !important;
        border-radius: 0px !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 1번 레이어 풀와이드 배경판 (일반 흐름에 맞게 상단 여백 리셋) */
    .notion-callout:not([class*="bg-"]):not([class*="brown"]):not([class*="orange"]):not([class*="blue"]):not([class*="gray"]):not([class*="yellow"]):not(:has(ol)):not(:has([class*="numbered"])):has(.notion-image)::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;
    }

    /* 히어로 이미지 내부 아이콘 숨김 및 여백 정리 */
    .notion-callout:not([class*="bg-"]):not([class*="brown"]):not([class*="orange"]):not([class*="blue"]):not([class*="gray"]):not([class*="yellow"]):not(:has(ol)):not(:has([class*="numbered"])):has(.notion-image) .notion-callout__icon {
        display: none !important;
    }

    .notion-callout:not([class*="bg-"]):not([class*="brown"]):not([class*="orange"]):not([class*="blue"]):not([class*="gray"]):not([class*="yellow"]):not(:has(ol)):not(:has([class*="numbered"])):has(.notion-image) > .notion-callout__content {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .notion-callout:not([class*="bg-"]):not([class*="brown"]):not([class*="orange"]):not([class*="blue"]):not([class*="gray"]):not([class*="yellow"]):not(:has(ol)):not(:has([class*="numbered"])):has(.notion-image) .notion-image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 태블릿용 히어로 이미지 비율 및 최대 높이 */
    .notion-callout:not([class*="bg-"]):not([class*="brown"]):not([class*="orange"]):not([class*="blue"]):not([class*="gray"]):not([class*="yellow"]):not(:has(ol)):not(:has([class*="numbered"])):has(.notion-image) img {
        width: 100% !important;
        max-height: 380px !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        border-radius: 0px !important;
    }


    /* ==========================================================================
       🟫 [독립 영역] 좋아요 & 쉐어 버튼 (태블릿 구간 숨김 처리)
    ========================================================================== */
    .notion-callout[class*="brown"]:is(:has(li), :has([class*="bulleted"])) {
        display: none !important;
    }


    /* --------------------------------------------------------------------------
       2번 레이어: 핑크 콜아웃 (스티키 제거 및 일반 스크롤 순서 배치)
    -------------------------------------------------------------------------- */
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) {
        position: relative !important;
        top: 0 !important;
        z-index: 5 !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 30px 0px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* 2-1. 풀와이드 다크 배경판 (#37352F) */
    .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;
    }

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

    /* 2-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;
    }

    /* 2-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;
    }

    /* 2-5. 인트로 내부 브레드크럼 + 위치 (파란색 콜아웃 무력화) */
    .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;
    }

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

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

    /* 2-6. 인트로 내부 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;
    }

    /* 2-7. 인트로 내부 핵심정보 (녹색 콜아웃 + 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: 16px !important;
    }

    /* 2-8. 인트로 내부 미술관 개요 (녹색 콜아웃 + 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;
    }

    /* 2-9. 인트로 내부 인라인 코드 버튼 */
    .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;
        margin: 0px !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*="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;
    }

}