/* ==========================================
05 📌 스티키 Section Navigation
orange = 화이트 버튼
red = 블랙 버튼
========================================== */
/* sticky 전체 컨테이너 - 공통 속성 정의*/
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)), 
.notion-callout[class*="red"]:has(code) {
    position: sticky !important;
    top: 64px !important;
    z-index: 999 !important;
    backdrop-filter: blur(12px);
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 12px 0 !important;
}
/* -----------------------------------
🔵 주황색(화이트 버튼)*/
/*배경*/
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) {
    background: #f7f7f7 !important;
}
/* 구분선 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) {
    border-top: 0px solid #37352f !important;
    border-bottom: 2px solid #37352f !important;
}
/* 내부 정렬 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__content {
    max-width: 1150px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}
/* 아이콘 제거 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__icon {
    display: none !important;
}
/* 메뉴 리스트 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    scrollbar-width: none !important;
}
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) ul::-webkit-scrollbar {
    display: none !important;
}
/* li */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) li,
.notion-callout[class*="red"]:has(code) li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
/* 화이트 버튼 - 디자인 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 16px !important;
    border-radius: 999px !important;
    border: 0px solid rgba(0,0,0,.1) !important;
    transition: all .2s ease !important;
    
  /* 여기서 간격을 조정하세요 (오른쪽 여백) */
    margin-right: 10px !important;  
    white-space: nowrap !important;   
}
/* 화이트 버튼 - 세부 디자인 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code {
    background: transparent !important;
}
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code,
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code *,
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code a,
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code strong {

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
/*호버 효과 및 점프 효과 적용 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code {
    /* inline 요소가 transform을 제대로 인식하도록 변경 */
    display: inline-block !important; 
    
    /* 기존 transition에 추가 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
}
/* PC 환경 호버 시 효과 */
@media (min-width: 769px) {
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code:hover {
        transform: translateY(4px) !important; /* 거리 4px로 상향 조정 */
        box-shadow: 0 0px 0px rgba(0,0,0,0.1) !important;
        cursor: pointer !important;
    }
}
@media (max-width: 768px) {
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__content {
        padding-left: 22px !important;
        padding-right: 16px !important;
    }
    
/* Orange(화이트) 버튼 모바일 폰트 조정 */
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code,
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code *,
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code a,
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code strong {
        font-size: 16px !important; /* 14px * 0.8 */
    } 
}