/* ==========================================
📌 [1] 상단 다크 인트로 (좌측 8px 마진 제거 및 완벽 정렬)
트리거: 핑크 콜아웃 + 번호 매기기 목록
========================================== */
/* 1. 최외각 콜아웃: 노션 기본 8px 마진 제거 및 오프셋 초기화 */
.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; /* 📌 주황색 8px 좌측 마진 제거 */
    margin-right: 0px !important;
    padding: 100px 0 70px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* 2. 화면 전체(100vw)를 채우는 다크 배경 */
.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;
}

/* 3. 내부 콘텐츠 영역 마진/패딩 초기화 */
.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;
}

/* 4. 맨 위 트리거용 번호매기기 목록 숨김 */
.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;
}

/* ------------------------------------------
🎨 글자색 제어: 커스텀 컬러 유지
------------------------------------------ */
.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;
}

/* ------------------------------------------
➕ 인트로 내부 인라인 코드 버튼 스타일
------------------------------------------ */
.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;
}

@media (max-width: 768px) {
    /* 모바일 인트로 상단 패딩 50px 축소 */
    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) {
        padding: 70px 0 70px 0 !important;
    }

    .notion-callout[class*="pink"]:has(ol):has(.notion-numbered-list) code {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

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