/* 카드 컴포넌트 스타일 */
.card {
    background-color: #2b2b3b; /* 카드 배경색 */
    border: none; /* 카드 테두리 제거 */
}

/* 카드 헤더 스타일 */
.card-header {
    border-bottom: none; /* 헤더의 아래쪽 테두리 제거 */
}

.form-container-blacklist {
    background-color: #2b2b3b;
    padding: 45px;
    border-radius: 8px;
    width: 70%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    text-align: left;
}

/* 입력 필드 스타일 */
.form-control-blacklist {
    background-color: #ffffff !important; /* 입력 필드 배경색 */
    color: #000000 !important; /* 입력 필드 텍스트 색상 */
    border: none; /* 입력 필드 테두리 제거 */
    height: 45px;
    align-content: start;
}

/* 입력 필드의 플레이스홀더 텍스트 색상 설정 */
.form-control::placeholder {
    color: #bbbbbb; /* 플레이스홀더 텍스트 색상 (연한 회색) */
}

/* 블랙리스트 글쓰기 버튼 스타일 */
.btn-blacklist-check {
    background-color: #dc3545; /* 기본 배경색 */
    border-color: #dc3545; /* 기본 테두리 색상 */
    height: 40px;
    color: #ffffff; /* 텍스트 색상 (예: 흰색) */
    font-weight: bold;
}

.btn-blacklist-check:hover {
    background-color: #f44336; /* 호버 시 배경색 */
    border-color: #c82333; /* 호버 시 테두리 색상 */
}

/* 기본 버튼 스타일 */
.blacklist-bg-primary {
    background-color: #dc3545; /* 기본 배경색 */
    border-color: #dc3545; /* 기본 테두리 색상 */
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #0056b3; /* 호버 시 배경색 */
    border-color: #0056b3; /* 호버 시 테두리 색상 */
}

/* 텍스트 강조 스타일 */
.text-primary {
    color: #61dafb !important; /* 하늘색 텍스트 */
}

.text-info {
    color: #17a2b8 !important; /* 정보용 밝은 청록색 텍스트 */
}

/* 리스트 아이템 스타일 */
.list-group-item {
    border: none; /* 리스트 아이템의 기본 테두리 제거 */
}

/* 플레이스 리스트 컨테이너 기본 상태 (축소 상태) */
.blacklist-container {
    max-height: 200px; /* 리스트 컨테이너의 기본 높이 */
    overflow: hidden; /* 넘치는 내용은 숨김 */
    transition: max-height 0.3s ease-in-out; /* 높이 변경 시 부드러운 애니메이션 */
}

/* 플레이스 리스트 컨테이너 확장 상태 */
.blacklist-container.expanded {
    max-height: none; /* 확장 시 높이 제한 없음 */
}

/* 토글 버튼 스타일 (현재 빈 상태, 추가 스타일 필요 시 여기에 정의 가능) */
.blacklist-toggle-btn {
    width: 100%;
    background-color: #2b2b3b; /* 카드 배경색 */
    border-color: #28a745; /* 기본 테두리 색상 */
    color: #ffffff;
    text-align: center; /* 텍스트 중앙 정렬 */
    display: flex; /* 플렉스 박스를 사용 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

/* 하이라이트된 항목 */
.blacklist-highlighted {
    font-size: 25px !important;
    font-weight: bold;
    color: #28a745 !important;
    animation: blinkHighlight 1s infinite !important; /* 깜빡이는 애니메이션 */
}

/* 깜빡이는 애니메이션 */
@keyframes blinkHighlight {
    0%, 100% {
        opacity: 1; /* 초기 상태 */
    }
    50% {
        opacity: 0; /* 깜빡이는 상태 */
    }
}

.blacklist-input-guide-text {
    font-size: 15px;
    color: #ffffff;
}

/* 키워드 배지 스타일 */
.keyword-badge {
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    background-color: hsl(calc(360 * var(--random-color, 0)), 70%, 60%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 랜덤 색상 생성 */
.keyword-badge:nth-child(1) {
    --random-color: 0.1;
}

.keyword-badge:nth-child(2) {
    --random-color: 0.2;
}

.keyword-badge:nth-child(3) {
    --random-color: 0.3;
}

.keyword-badge:nth-child(4) {
    --random-color: 0.4;
}

.keyword-badge:nth-child(5) {
    --random-color: 0.5;
}

.keyword-badge:nth-child(6) {
    --random-color: 0.6;
}

.keyword-badge:nth-child(7) {
    --random-color: 0.7;
}

.keyword-badge:nth-child(8) {
    --random-color: 0.8;
}

.keyword-badge:nth-child(9) {
    --random-color: 0.9;
}

.keyword-badge:nth-child(10) {
    --random-color: 1;
}

.related-keywords-container {
    margin-left: 0; /* 왼쪽 여백 제거 */
    padding-left: 0; /* padding으로 다른 요소들과 동일하게 조정 */
}

.toast {
    z-index: 9999; /* 다른 요소 위에 표시 */
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.highlight-rank {
    font-size: 1.5rem !important; /* 글자 크기를 키움 */
    font-weight: bold !important; /* 강조 효과 */
    color: #ff5722 !important; /* 텍스트 색상 변경 (예: 오렌지색) */
}

.blacklist-author-badge {
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 5px;
    color: #61dafb;
    }