@charset "UTF-8";
/*CSS Document */
/*
    추가적인 CSS는 여기에 작성할것. by hangh
*/

/*전체 화면 스크롤 노출*/
body{
    overflow-y: scroll;
}

body::-webkit-scrollbar {
    width: 10px; /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    background: #7E8299; /* 스크롤바의 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

body::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1); /*스크롤바 뒷 배경 색상*/
}

.card {
    border-color: #e0e0e0;
    box-shadow: 0 2px 4px rgba(187, 187, 187, 0.2); /* 카드 그림자 효과 */
}

.card .card-header {
    border-color: #e0e0e0;
    background-color: #f8f8f8; /* 카드 헤더 배경색 */
}

/*tooltip 줄바꿈 => 
*/
.tooltip-inner {white-space: pre-wrap; text-align: left;}

/* 깜빡이는 효과 */
@keyframes blink-effect {
    70% {opacity: 0;}
    100% {opacity: 1;}
}
.blink {animation: blink-effect 1.5s step-end infinite;}
.blink_0_1 {animation: blink-effect 0.1s step-end infinite;}
.blink_0_3 {animation: blink-effect 0.3s step-end infinite;}
.blink_0_5 {animation: blink-effect 0.5s step-end infinite;}
.blink_0_7 {animation: blink-effect 0.7s step-end infinite;}
.blink_1_0 {animation: blink-effect 1.0s step-end infinite;}
.blink_1_2 {animation: blink-effect 1.2s step-end infinite;}


/* 부드럽게 깜빡이는 효과 */
@keyframes blinkSoft {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1;}
}

.blink_soft_1 {animation: blinkSoft 1s infinite;}
.blink_soft_1_3 {animation: blinkSoft 1.3s infinite;}
.blink_soft_1_5 {animation: blinkSoft 1.5s infinite;}
.blink_soft_1_8 {animation: blinkSoft 1.8s infinite;}
.blink_soft_2 {animation: blinkSoft 2s infinite;}
.blink_soft_2_5 {animation: blinkSoft 2.5s infinite;}
.blink_soft_3 {animation: blinkSoft 3s infinite;}


/* 아래로 움직이는 화살표 애니메이션 */
.arrow-down { font-size: 40px; color: #333; display: inline-block; animation: moveDown 1.5s infinite;}

@keyframes moveDown {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(20px);
        opacity: 0;
    }
}

.arrows i:nth-child(1) { animation-delay: 0.3s; }
.arrows i:nth-child(2) { animation-delay: 0.6s; }
.arrows i:nth-child(3) { animation-delay: 0.9s; }

.border-rainbow {
    border: 5px solid transparent;
    border-image: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
    border-image-slice: 1;
    padding: 16px;
}

/* 무지개 버튼 애니메이션 */
.rainbow-btn { position: relative; overflow: hidden; border: none; color: #fff; }
.rainbow-btn span { position: relative; z-index: 2; /* 글자 위로 */ }
.rainbow-btn::before {
    content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, #ff0000,#ff7a00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff,#ff0000);
    background-size: 300% 300%; animation: rainbowFlow 4s linear infinite; z-index: 1; opacity: 0.9; /* 글자 더 잘 보이도록 */
}
/* ⭐ 마우스오버하면 애니메이션 멈춤 */
.rainbow-btn:hover::before {
    animation-play-state: paused;
    opacity: 1; /* 선택: 멈출 때 조금 더 선명하게 */
}
/* ⭐ Hover 시 글자를 변경 */
.rainbow-btn:hover span {
    color: #ffffff; /* 강한 대비 */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.9),
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 15px rgba(255, 255, 255, 0.7);
}
@keyframes rainbowFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}


/* 진행바 스타일 (웹툰 손익) */
#progressContainer { background-color:#ffffff; width: 100%; border: 1px solid #f1416c; height: 25px; margin-top: 18px; position: relative; border-radius: 20px; }
#progressBar { background-color: #f1416c; height: 100%; width: 0%; text-align: center; color: white; line-height: 25px; border-radius: 20px; }

.w-30 { width: 30%!important }
.w-35 { width: 35%!important }
.w-38 { width: 38%!important }
.w-40 { width: 40%!important }
.w-42 { width: 42%!important }
.w-45 { width: 45%!important }
.w-48 { width: 48%!important }
.w-52 { width: 52%!important }
.w-55 { width: 55%!important }
.w-60 { width: 60%!important }
.w-65 { width: 65%!important }
.w-70 { width: 70%!important }
.w-76 { width: 76%!important }
.w-78 { width: 78%!important }
.w-80 { width: 80%!important }
.w-82 { width: 82%!important }
.w-85 { width: 85%!important }
.w-88 { width: 88%!important }
.w-90 { width: 90%!important }
.w-92 { width: 92%!important }
.w-95 { width: 95%!important }
.w-98 { width: 98%!important }

/* 검색 토글 아이콘 회전 효과 */
.search-toggle-icon { transition: transform .25s ease; }
a[aria-expanded="true"] .search-toggle-icon { transform: rotate(180deg); }