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

.card-custom {
    border: none; /* 카드 테두리 제거 */
    padding: 0;
    margin: 0;
}

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

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

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

/* 네이버 순위확인 버튼 스타일 */
.btn-naver-rank-check {
    background-color: #28a745; /* 기본 배경색 */
    border-color: #28a745; /* 기본 테두리 색상 */
    height: 50px;
    color: #ffffff; /* 텍스트 색상 (예: 흰색) */
    font-weight: bold;
}

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

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

.naver-history-bg-primary {
    background-color: #007bff; /* 기본 배경색 */
    border-color: #007bff; /* 기본 테두리 색상 */
    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; /* 리스트 아이템의 기본 테두리 제거 */
}

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

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

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

/* 하이라이트된 항목 */
.naver-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; /* 깜빡이는 상태 */
    }
}

.naver-search-text-info {
    font-size: 20px;
    font-weight: bold;
    color: #28a745
}

.naver-input-guide-text {
    padding-left: 15px;
    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; /* 텍스트 색상 변경 (예: 오렌지색) */
}

.search-result-highlight-keyword-naver {
    color: #28a745; /* 원하는 색상 */
    font-weight: bold; /* 강조 효과 */
}

.place-info-container-naver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-right: 130px;
    padding-left: 130px;
    justify-content: space-between; /* 부모 너비에 맞게 균등 배치 */
    gap: 20px; /* 아이템 간 간격 */
    margin-top: 50px;
    width: 100%; /* 부모 요소의 너비에 맞추기 */
}

.data-circle-naver {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #1c1f24; /* 동그라미 배경색 */
    display: flex;
    flex-direction: column;
    border: 2px solid #28a745; /* 테두리 색상 */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #ffffff;
    text-align: center;
}

.circle-value-naver {
    font-size: 25px;
    font-weight: bold;
    color: #28a745 !important;
}

.data-circle-naver p {
    margin: 0;
    font-weight: bold;
    font-size: 15px;
    color: #d1d5db;
}

.highlight-rank-circle-naver {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #28a745 !important;
    animation: blinkHighlight 1.5s infinite !important; /* 깜빡이는 애니메이션 */
}


/* 카드 컨테이너 */
.naver-my-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* 카드 간격 */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 개별 카드 스타일 */
.naver-my-card {
    background-color: #1e1e2f; /* 어두운 배경 */
    color: #ffffff; /* 기본 텍스트 색상 */
    border: 1px solid #28a745; /* 카드 테두리 */
    border-radius: 8px; /* 둥근 모서리 */
    width: 150px; /* 카드 너비 */
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 */
    font-family: Arial, sans-serif;
    font-size: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* 텍스트 중앙 정렬
    text-align: center;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 카드 hover 효과 */
.naver-my-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 카드 헤더 */
.naver-my-card-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 7px;
}

/* 카드 본문 */
.naver-my-card-body p {
    margin: 2px 0;
    line-height: 1.5;
}

/* 순위 상승/하락/변동 없음 */
.naver-my-rank-up {
    color: #f44336; /* 빨간색 */
}

.naver-my-rank-down {
    color: #2196f3; /* 파란색 */
}

.naver-my-rank-neutral {
    color: #cccccc; /* 회색 */
}

/* 평점 스타일 */
.naver-my-rating strong {
    color: #ffc107; /* 노란색 강조 */
}

/* 블로그 리뷰 수 스타일 */
.naver-my-blog-reviews strong {
    color: #9c27b0; /* 보라색 강조 */
}

/* 갱신일 스타일 */
.naver-my-update-date strong {
    color: #4caf50; /* 초록색 강조 */
}

/* 방문자 리뷰 스타일 */
.naver-my-visitor-reviews strong {
    color: #61dafb; /* 초록색 강조 */
}

/* 저장수 스타일 */
.naver-my-save strong {
    color: #2196f3; /* 초록색 강조 */
}

/* 첫 번째 카드 순위 강조 스타일 */
.naver-my-card-first .naver-my-card-header span.highlight-rank-card {
    color: #ff5722; /* 강조 색상 */
    font-weight: bold;
    font-size: 17px; /* 크기 조정 */
    animation: blinkHighlight 1s infinite !important;
}

.naver-place-memo-button {
    background-color: #ffeb3b; /* 노란색 배경 */
    border: none; /* 테두리 없음 */
    border-radius: 10px; /* 모서리 둥글게 */
    color: #000; /* 텍스트 색상: 검정 */
    padding: 5px 10px; /* 안쪽 여백 */
    font-size: 12px; /* 글꼴 크기 */
    font-weight: bold; /* 굵은 글씨 */
    cursor: pointer; /* 마우스 커서 포인터 모양 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 약간의 그림자 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 부드러운 전환 효과 */
}

.naver-place-memo-button:hover {
    background-color: #fdd835; /* 호버 시 더 진한 노란색 */
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}

.naver-place-memo-button:active {
    background-color: #fbc02d; /* 클릭 시 색상 */
    transform: translateY(0); /* 클릭 시 내려옴 */
}

.naver-place-memo-viewer-area {
    width: 100%; /* 헤더와 동일한 너비 */
    height: auto;
    color: #ffffff;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.naver-place-memo-viewer-area p {
    font-size: 0.9em;
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 중앙 정렬 */
    height: 100%; /* 부모 요소의 높이에 맞춤 */
    margin: 0; /* 기본 마진 제거 */
    line-height: 1.5; /* 텍스트 라인 높이 조정 */
}

.advertiser-select-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start; /* 부모 요소의 좌측에 배치 */
}

.advertiser-form-select {
    width: 250px; /* 셀렉터 너비 확대 */
    height: 40px; /* 셀렉터 높이 확대 */
    padding: 10px 15px; /* 패딩을 추가하여 텍스트가 안에 꽉 차지 않도록 */
    border-radius: 8px; /* 부드러운 모서리 */
    border: 1px solid #ccc; /* 테두리 색상 */
    background-color: #f8f9fa; /* 배경색 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 약간의 그림자 효과 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

.advertiser-form-select:focus {
    border-color: #007bff; /* 포커스시 테두리 색상 */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 포커스시 그림자 */
    background-color: #ffffff; /* 포커스시 배경색 변경 */
}

.advertiser-search-button {
    margin-left: 15px; /* 버튼과 셀렉터 사이 간격 */
    padding: 10px 20px; /* 버튼 패딩 추가 */
    font-size: 16px; /* 버튼 폰트 크기 */
    border-radius: 8px; /* 버튼 모서리 부드럽게 */
    background-color: #007bff; /* 버튼 배경 색상 */
    color: #fff; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 제거 */
    cursor: pointer; /* 마우스 포인터 변경 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

.advertiser-search-button:hover {
    background-color: #0056b3; /* 버튼 호버 시 색상 */
}

.advertiser-search-button:focus {
    outline: none; /* 포커스 시 외부 테두리 제거 */
}