.title-logo {
    height: 5rem;
    /* 로고 이미지의 높이 (is-4 타이틀에 맞춰 조절) */
}

#streamer-profile-container .image {
    height: 4rem;
    width: 4rem;
}

.profile-item {
    margin-left: 0.3rem;
}

/* 마주치며 흐르는 화살표 애니메이션 */
.flowing-arrows-container {
    display: flex;
    align-items: center;
    width: 40px;
    height: 2rem;
    position: relative;
    overflow: hidden;
}

.arrow-ltr, .arrow-rtl {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    opacity: 0;
}

/* 왼쪽 -> 오른쪽 화살표 */
.arrow-ltr {
    border-left: 7px solid #3273dc; /* is-link color */
    animation: flow-ltr 1.5s infinite linear;
}

/* 오른쪽 -> 왼쪽 화살표 */
.arrow-rtl {
    border-right: 7px solid #00d1b2; /* is-primary color */
    animation: flow-rtl 1.5s infinite linear;
}

@keyframes flow-ltr {
    0%   { transform: translateX(-10px); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(40px); opacity: 0; }
}

@keyframes flow-rtl {
    0%   { transform: translateX(40px); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(-10px); opacity: 0; }
}


#userTable td {
    vertical-align: middle;
    /* 모든 테이블 셀의 내용을 세로 중앙으로 정렬 */
}

/* 등급별 깜빡임 애니메이션 */
@keyframes blink-rank-0 {

    /* No Emoji - 연녹색 */
    from,
    to {
        background-color: transparent;
    }

    50% {
        background-color: #f1f8e9;
    }
}

@keyframes blink-rank-1 {

    /* Bronze - 연두색 */
    from,
    to {
        background-color: transparent;
    }

    50% {
        background-color: #d4edda;
    }
}

@keyframes blink-rank-2 {

    /* Silver - 노란색 (짙게 수정) */
    from,
    to {
        background-color: transparent;
    }

    50% {
        background-color: #ffee58;
    }
}

@keyframes blink-rank-3 {

    /* Gold - 주황색 (짙게 수정) */
    from,
    to {
        background-color: transparent;
    }

    50% {
        background-color: #ffb74d;
    }
}

@keyframes blink-rank-4 {

    /* Crown - 붉은색 (짙게 수정) */
    from,
    to {
        background-color: transparent;
    }

    50% {
        background-color: #e57373;
    }
}

/* 애니메이션 적용 클래스 (지속 시간 차등 적용) */
.blink-rank-0 {
    animation: blink-rank-0 0.2s linear 5;
    /* 1.0초 */
}

.blink-rank-1 {
    animation: blink-rank-1 0.3s linear 5;
    /* 1.5초 */
}

.blink-rank-2 {
    animation: blink-rank-2 0.4s linear 5;
    /* 2.0초 */
}

.blink-rank-3 {
    animation: blink-rank-3 0.5s linear 5;
    /* 2.5초 */
}

.blink-rank-4 {
    animation: blink-rank-4 0.6s linear 5;
    /* 3.0초 */
}

.section {
    padding: 1.5rem 1.5rem;
}

/* "최애 스트리머" 셀에서 줄바꿈이 적용되도록 설정 */
#userTable td:last-child {
    white-space: pre-line;
}

.box {
    padding: 1rem;
}

.box:not(:last-child) {
    margin-bottom: 1rem;
}

.message.is-info {
    background-color: #eff5fb;
    margin-bottom: 1rem;
}

.message.is-danger {
    background-color: #feecf0;
    margin-bottom: 1rem;
}


.message-body {
    padding: 0.6em 2em;
}




/* ks/static/css/style.css */

@media screen and (max-width: 768px) {

    /* 닉네임 폰트 크기 줄이기 */
    #userTable .is-size-4 {
        font-size: 1.1rem !important;
    }

    .section {
        padding: 1rem 0.5rem;
    }

    /* "오늘", "7일", "최애 스트리머" 컬럼 숨기기 */
    #userTable thead th:nth-child(3),
    #userTable tbody td:nth-child(3),
    #userTable thead th:nth-child(4),
    #userTable tbody td:nth-child(4),
    #userTable thead th:last-child,
    #userTable tbody td:last-child {
        display: none;
    }

    /* 모바일에서 테이블 셀 패딩 조정으로 공간 확보 */
    .table td,
    .table th {
        padding: 0.5em 0.4em;
    }
}

/* --- 토스트 알림 스타일 (디버깅용으로 수정) --- */
.toast-notification {
    position: fixed;
    top: 20px; /* 화면 상단으로 이동 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff3860; /* Bulma의 is-danger 색상으로 눈에 띄게 */
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    z-index: 9999; /* 다른 모든 요소 위에 있도록 z-index를 매우 높게 설정 */
    opacity: 1; /* 항상 보이도록 투명도 1로 고정 */
    transition: top 0.5s ease-out, opacity 0.5s ease-out; /* 부드러운 등장을 위해 transition 유지 */
    font-weight: bold;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.toast-notification.show {
    top: 40px; /* 나타날 때 살짝 아래로 이동 */
    opacity: 1;
}