/**
 * 하이라이트 스타일
 * 섹션 하이라이트 및 강조 효과를 위한 스타일
 */

.highlight-section {
    animation: highlight-pulse 2s ease-in-out;
    scroll-margin-top: 80px; /* 상단 탭 메뉴 높이를 고려한 여백 */
}

@keyframes highlight-pulse {
    0% {
        background-color: rgba(255, 255, 0, 0);
    }
    25% {
        background-color: rgba(255, 255, 0, 0.3);
    }
    75% {
        background-color: rgba(255, 255, 0, 0.3);
    }
    100% {
        background-color: rgba(255, 255, 0, 0);
    }
}

/* 섹션 헤딩에 호버 효과 추가 
h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
    color: #577ec3;
    cursor: pointer;
}
*/

/* 섹션 헤딩에 앵커 아이콘 추가 
h2[id]::after, h3[id]::after, h4[id]::after, h5[id]::after, h6[id]::after {
    content: " 🔗";
    font-size: 0.8em;
    opacity: 0.5;
    visibility: hidden;
}

h2[id]:hover::after, h3[id]:hover::after, h4[id]:hover::after, h5[id]:hover::after, h6[id]:hover::after {
    visibility: visible;
}
*/

/* 하위섹션 네비게이션을 위한 추가 스타일 */
.notion-content {
    position: relative;
}

.notion-content h2, 
.notion-content h3, 
.notion-content h4, 
.notion-content h5, 
.notion-content h6 {
    scroll-margin-top: 80px; /* 상단 탭 메뉴 높이를 고려한 여백 */
    position: relative;
    padding-left: 0px;
    border-left: 0px solid transparent;
    /* 5px -> 0px, 3px -> 0px, transition: border-left-color 0.3s ease; */
}

.notion-content h2:hover, 
.notion-content h3:hover, 
.notion-content h4:hover, 
.notion-content h5:hover, 
.notion-content h6:hover {
    border-left-color: #0066cc;
}

.text-highlight {
    background-color: rgba(93, 135, 200, 0.3);
    padding: 0.05em;
    padding-left: 0.2em !important;
    padding-right: 0.3em !important;
    border-radius: 3px;
}

/* 중간제목 - 주목도를 낮춘 버전 */
.muted-heading {
    font-size: 0.8em;
    opacity: 0.2;
    font-weight: normal;  /* 필요시 사용 */
}

/* 본문 텍스트 - 주목도를 낮춘 버전 */
.muted-text {
    font-size: 0.7em;
    opacity: 0.2;
}