/* 스티키 네비 바 : 야놀자 스타일 */


/* ==========================================
05 📌 스티키 Section Navigation (야놀자 탭 스타일)
- 탭 간격은 gap이 아니라 탭 좌우 패딩으로 조절 */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

/* 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;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 전체 배경 및 하단 회색 구분선 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) {
    background: #ffffff !important;
    border: none !important;
    border-top: 0px solid #37352f !important;

    border-bottom: 1px solid #37352f !important;
}

/* 내부 정렬 레이아웃 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__content {
    max-width: 1108px !important;
    margin: 0 auto !important;
    padding: 0 0px !important;
}

/* 아이콘 숨김 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__icon {
    display: none !important;
}

/* 메뉴 리스트 컨테이너 (부모 쪽 간격은 0, 간격은 탭 패딩이 담당) */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0 !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;
}

/* 노션 컬럼으로 만든 경우도 부모 간격 제거 (이중 간격 방지) */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-column-list,
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-row {
    gap: 0 !important;
}

.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-column {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !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;
    display: flex !important;
    align-items: center !important;
}

/* -----------------------------------
⚪ 비활성화 탭 기본 디자인
----------------------------------- */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 20px !important; /* 🔥 [PC 탭 간격] 좌우 12px씩 = 탭 사이 24px. 간격 조절은 이 숫자만 바꾸세요 */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !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 {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #37352f !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* 🚨 모든 탭의 기본 가상요소(언더바) 완전 차단 */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code::after,
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code *::after {
    display: none !important;
    content: "" !important;
}

/* -----------------------------------
🔥 활성화(Active) 탭: JS가 붙여주는 .is-active 에서만
----------------------------------- */
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code.is-active,
.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code.is-active * {
    color: #37352f !important;
    font-weight: 500 !important;

}

.notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code.is-active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #37352f !important;
    border-radius: 0 !important;
}

/* -----------------------------------
📱 반응형 (모바일 / 태블릿)
----------------------------------- */
@media (max-width: 768px) {
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) ul {
        gap: 0 !important;
    }

    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code {
        padding: 12px 10px !important; /* 🔥 [모바일 탭 간격] 좌우 10px씩 = 탭 사이 20px */
    } 
    
    .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 {
        font-size: 14px !important;
    } 

    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) code.is-active::after {
        height: 2px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery)) .notion-callout__content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* 앵커 이동 시 스티키 바에 제목이 가려지지 않도록 (바 높이에 맞춰 조정) */
html { scroll-padding-top: 130px; }


/* ==========================================
📌 스티키 네비 탭 간격 수정
- 실제 탭을 감싸는 span 사이에서 간격 제어
- 언더바는 글자 너비 유지
========================================== */

/* PC */
@media (min-width: 769px) {

    /* 탭 전체를 담는 실제 레이아웃 부모 */
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        column-gap: 40px !important; /* PC 탭 간격 */
        row-gap: 0 !important;
        width: max-content !important;
        max-width: none !important;
    }

    /* 공백만 담고 있는 span 제거 */
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li > span:not(:has(code)) {
        display: none !important;
    }

    /* 실제 탭을 감싸는 span */
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li > span:has(> code) {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* code는 글자 너비만 유지 */
    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li > span > code {
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: max-content !important;
    }
}

/* 모바일 */
@media (max-width: 768px) {

    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        column-gap: 20px !important; /* 모바일 탭 간격 */
        row-gap: 0 !important;
        width: max-content !important;
        max-width: none !important;
    }

    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li > span:not(:has(code)) {
        display: none !important;
    }

    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li > span:has(> code) {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .notion-callout[class*="orange"]:has(code):not(:has(.notion-collection-gallery))
    .notion-bulleted-list > li > span > code {
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: max-content !important;
    }
}