@charset "utf-8";

.neon-gem {
  font-size: 1.2em;
  /* 4색 순환을 위해 애니메이션 시간을 4초로 늘립니다. */
  animation: neon-glow 4s infinite;
}

@keyframes neon-glow {
  0%, 100% {
    color: #FFA; /* [변경] 빛에 맞는 연한 빨강색 코어 */
    /* 네온 레드 글로우 */
    text-shadow: 0 0 7px #FF003C,
                 0 0 10px #FF003C,
                 0 0 21px #FF003C;
  }
  25% {

    /* [변경] 더 진한 네온 옐로우-골드 글로우 */
    text-shadow: 0 0 7px #FFBF00,
                 0 0 10px #FFBF00,
                 0 0 21px #FFBF00;
  }
  50% {

    /* 네온 그린 글로우 */
    text-shadow: 0 0 7px #00FF7F,
                 0 0 10px #00FF7F,
                 0 0 21px #00FF7F;
  }
  75% {

    /* 네온 블루 글로우 */
    text-shadow: 0 0 7px #00BFFF,
                 0 0 10px #00BFFF,
                 0 0 21px #00BFFF;
  }
}

.best {
  color: #3ad29f; 
  font-weight: bold;
  animation: neon-text-glow 4s infinite;
}
@keyframes neon-text-glow {
  0%, 100% {
    color: #FF003C; /* 네온 레드 */
  }
  25% {
    color: #FFBF00; /* 진한 네온 옐로우-골드 */
  }
  50% {
    color: #00FF7F; /* 네온 그린 */
  }
  75% {
    color: #00BFFF; /* 네온 블루 */
  }
}

  .chart-container {
    display: flex;
    flex-direction: column;
    gap: 0;
	border-top:2px solid #ddd;
	border-bottom:1px solid #ddd;
  }

  .chart-card {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    padding: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

 


.chart-card.disabled {
  position: relative;
  filter: grayscale(90%) opacity(50%); /* 흐리게 처리 */
  pointer-events: none; /* 클릭 비활성화 */
}
.disabled > .album-image {
	display:none;
  position: relative;
  background: white; /* 기본 배경색 */
  overflow: hidden; /* 가상 요소가 영역 밖으로 나가는 것을 방지 */
}

.disabled > .album-image::before,
.disabled > .album-image::after {
  content: '';
  position: absolute;
  top: 50;
  left: 50;
  width: 150%;
  height: 1px; /* 선의 두께 */
  background: #000; /* X표 선 색상 */
  transform-origin: center; /* 회전 기준 */
}

.disabled > .album-image::before {
  transform: rotate(45deg); /* 첫 번째 대각선 */
}

.disabled > .album-image::after {
  transform: rotate(-45deg); /* 두 번째 대각선 */
}
.disabled > .song-info {
  position: relative; /* 필요한 경우 위치 설정 */
  text-decoration: line-through; /* 텍스트에 취소선 추가 */}



.chart-card.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 부모 요소의 너비를 완전히 덮음 */
  height: 100%; /* 부모 요소의 높이를 완전히 덮음 */
  background-color: rgba(255, 255, 255, 0.5); /* 반투명 배경 */
  font-size: 3em;
  color: #000;
  text-align: center;
  display: flex; /* 중앙 정렬을 위해 플렉스 사용 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
}

/* 1순위 카드: 연하게 조정한 색상 */
.chart-container > a:nth-child(1) > .chart-card {
    background-color: #e0fff2;
}

/* 2순위 카드: 새로 계산된 중간 톤 색상 */
.chart-container > a:nth-child(2) > .chart-card {
    background-color: #e8fff6;
}

/* 3순위 카드: 가장 연한 색상 */
.chart-container > a:nth-child(3) > .chart-card {
    background-color: #f0fff9;
}
.chart-container > a:last-child > .chart-card {
  /* background-color: #e0fff2; */
}
.chart-container > a > .chart-card:hover {
    background-color: #c2fbe5; /* 모든 카드 hover 시 동일한 색상 */
}













  /* Rank container styling */
  .rank-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 60px;
    margin-right: 15px;
  }

  .rank {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
  }

  .rank::before {
     content: ""; /* 기존 카운터 출력을 빈 값으로 설정 */
  }

  .change {
    margin-top: 5px;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .change .new {
    color: #ff0000;
	display: flex;
    align-items: center;
	font-weight: 700;

  }

  .change .up {
    color: #d63031;
    display: flex;
    align-items: center;
  }

  .change .down {
    color: #0984e3;
    display: flex;
    align-items: center;
  }

  .change .same {
    color: #999;
  }


  /* Album image */
  .album-image {
    flex-shrink: 0;
    margin-right: 15px;
	background:#fff;
	border-radius: 4px;
	border:1px solid #ddd;
	width: 90px; /* 고정된 너비 */
	height: 90px; /* 고정된 높이 */
	overflow: hidden; /* 이미지를 컨테이너 안에 제한 */
	display: flex; /* 플렉스박스 사용 */
	justify-content: center; /* 가로 가운데 정렬 */
	align-items: center; /* 세로 가운데 정렬 */
	padding:2px;
  }

  .album-image img {
  width: 100%;       /* 부모 컨테이너 너비에 맞춤 */
  height: 100%;      /* 부모 컨테이너 높이에 맞춤 */
  max-width: 100%;   /* 이미지가 컨테이너 너비를 넘어가지 않음 */
  max-height: 100%;  /* 이미지가 컨테이너 높이를 넘어가지 않음 */
  object-fit: contain; /* 비율을 유지하며 축소 (이미지의 모든 부분을 보여줌) */
  display: block;    /* 인라인 이미지를 블록으로 변경 */
  }

  /* Song information */
  .song-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .song-info h3 {
    margin: 0;
    font-size: 1.3em;
  }

  .song-info p {
    margin: 5px 0 0;
    font-size: 0.9em;
    color: #555;
  }

  /* Like button and tag container */
  .like-button-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 10px;
  }

  .tag {
  	display: none; /* 초기 상태는 숨김 */
    font-size: 1em;
    color: #FFF;
	font-weight:600;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
  }


	.tag.visible {
	  display: inline-block; /* 값이 있으면 보이도록 변경 */
	}

  .like-button {
    display: flex;
    align-items: center;
  }

  .like-button .heart-icon {
    font-size: 1em;
    color: #ff5a5a;
    margin-right: 5px;
  }

  .like-button .count {
    font-size: 0.9em;
    color: #333;
  }

@media (max-width: 555px) {
	.chart-card {padding: 15px 3px;}
	.rank-container {width:30px;margin-right: 10px;}
	.album-image {width:80px;height:80px;}
	.like-button-container {
    flex-direction: column; /* 세로 정렬 */
    align-items: flex-end;  /* 왼쪽 정렬 */
    gap: 2px; /* 요소 간 간격 */
	text-align:right;
	font-size:.9em;
  }
	.tag {padding: 2px 5px;}
	.like-button .heart-icon {font-size:.8em;}
}


.ggulfile{color:#3e2224;} .allplz{color:#19b8d0;}.filegosu{color:#5035a1;}.filebogo{color:#3d8eee}.filejo{color:#294163}.filemaru{color:#c62a2a}.filesun{color:#f83600}.filecast{color:#21b2e3}.applefile{color:#fe5d5d}.todisk{color:#ff5a00}.filemong{color:#b14747}.ssadafile{color:#EF544D}.yesfile{color:#dc1c28;}.geniefile{color:#34a2f0}.smartfile{color:#0394CD}.oottx{color-image:linear-gradient(150deg,#e25b29 0%,#ffcb15 100%)}.filestar{color:#e61c68;}

/*
  @media (max-width: 768px) { 
    .chart-card[data-status="filejo"] {
      display: none;
    }
  }

 */



 
.cdn-img {
    width: 100%; /* 고정된 너비 */
    height: auto; /* 고정된 높이 */
}

.cdn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 핵심 속성 */
}
      /* Block: 전체 콘텐츠를 감싸는 블록 */
        .webhard-guide {
            font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
            line-height: 1.7;
            color: #333;
			padding: 7px;
			background-color: #f4f4f4;
			margin: 30px 0;
			border-radius: 8px;
			position: relative; /* ::after 위치 조정을 위한 기준 */
            padding-bottom: 40px; 
        }
		 .webhard-guide.is-collapsed > div:nth-of-type(n + 2) {
            display: none;
        }

        /* 2. '더보기/접기' 텍스트를 ::after로 생성 */
        .webhard-guide::after {
            content: ''; /* 텍스트 내용은 아래에서 상태에 따라 정의 */
            position: absolute;
            bottom: 10px; /* 하단에서 10px 떨어진 위치 */
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            color: #ddd;
        }

        /* 3. is-collapsed 상태에 따라 ::after 텍스트 변경 및 커서 모양 변경 */
        .webhard-guide.is-collapsed::after {
            content: '더보기 ▼';
        }
        .webhard-guide.is-collapsed {
            cursor: pointer;
        }

        .webhard-guide:not(.is-collapsed)::after {
            content: '접기 ▲';
        }
        .webhard-guide:not(.is-collapsed) {
             cursor: pointer;
        }
        /* Element: 공지사항 박스 */
        .webhard-guide__notice {
            padding: 20px;
            margin: 30px 0;
        }
        .webhard-guide__notice p {
            margin: 8px 0;
        }
        .webhard-guide__notice-text {
            display: inline-block;
            font-family: 'S-CoreDream-3Light', sans-serif;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            padding: 3px 8px;
            border-radius: 4px;
            color: #444;
            background-color: #d7d7d7;
        }
        /* Modifier: 공지사항의 '중요' 버전 */
        .webhard-guide__notice-text--important {
            background-color: #d7d7d7;
        }

        /* Element: 이미지 컨테이너 */
        .webhard-guide__image-container {
            margin: 25px 0;
            text-align: center;
        }
        .webhard-guide__image-container img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Element: 메인 타이틀 */
        .webhard-guide__title {
            font-size: 2em;
            font-weight: 600;
            color: #111;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
            margin-top: 30px;
        }

        /* Element: 서브 타이틀 */
        .webhard-guide__subtitle {
            font-size: 1.5em;
            font-weight: 600;
            color: #111;
            border-left: 4px solid #007bff;
            padding-left: 10px;
            margin-top: 40px;
        }

        /* Element: 본문 단락 */
        .webhard-guide__paragraph {
            font-size: 1em;
            text-align: justify;
        }

        /* Element: 본문 강조 텍스트 */
        .webhard-guide__highlight {
            color: #0056b3;
            font-weight: 600;
        }