/* ==========================================
05 📌 스티키 Section Navigation 상세페이지-버튼형
========================================== */
/* sticky 전체 컨테이너 - 공통 속성 정의*/
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) {
    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*="blue"]:has(code):not(:has(.notion-collection-gallery)) {
    background: #ffffff !important;
    border: none !important; /* 기본 테두리 제거 */
}
/* 구분선 */
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) {
    max-width: 1108px !important;
    margin: 0 auto !important;
    border-top: 1px solid #37352f !important;
    border-bottom: 0px solid #37352f !important;
}
/* 내부 정렬 */
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__content {
    max-width: 1150px !important;
    margin: 0 auto !important;
    padding: 0 5px !important;
}
/* 아이콘 제거 */
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__icon {
    display: none !important;
}
/* 메뉴 리스트 */
.notion-callout[class*="blue"]: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*="blue"]:has(code):not(:has(.notion-collection-gallery)) ul::-webkit-scrollbar {
    display: none !important;
}
/* li */
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
/* 화이트 버튼 - 디자인 */
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* [알약 높이 조절 위치] */
    min-height: 15px !important; /* 최소 높이 15px 설정 */
    padding: 4px 16px !important;
    
    border-radius: 999px !important; /* 알약 형태 */
    border: 1px solid #000000 !important; /* 1px f5f5f5 테두리 */
    background: #ffffff !important; /* 기본 흰색 배경 */
    transition: all .2s ease !important;
    
    margin-right: 10px !important;  
    white-space: nowrap !important;   
}
/* 화이트 버튼 - 세부 디자인 */
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code {
    background: transparent !important;
}
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code,
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code *,
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code a,
.notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code strong {

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
/*호버 효과 및 점프 효과 적용 */
.notion-callout[class*="blue"]: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*="blue"]: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*="blue"]:has(code):not(:has(.notion-collection-gallery)) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__content {
        max-width: 100% !important;
        padding-left: 22px !important;
        padding-right: 16px !important;
    }
    
/* Orange(화이트) 버튼 모바일 폰트 조정 */
    .notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code,
    .notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code *,
    .notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code a,
    .notion-callout[class*="blue"]:has(code):not(:has(.notion-collection-gallery)) code strong {
        font-size: 16px !important; /* 14px * 0.8 */
    } 
}