/* =================================================================== ante ante CSS : https://www.mk.co.kr/ : 2025-10-23 =================================================================== */

/* ante in + padding per */
header {
    position: fixed !important;
    top: 30px !important; /* ante */
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important; /* ante */
    padding: 8px 0 !important; /* padding */
}

/* padding */
header .header-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ante - , inetiam */
.stock_flow_sec {
    position: fixed; /* in ante */
    top: 0; /* in */
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #111111;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
    overflow: hidden;
    z-index: 1001; /* configuratio (ante ) */
}

/* bodyin - ante(30px) + (60px) */
body {
    padding-top: 90px !important; /* ante 30px + 60px */
}

/* Inner - cum max-width */
.stock_flow_sec .set_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* processus */
.sec_ttl.is_blind {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ante - cum etiam */
.stock_flow_wrap {
    position: relative;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/*  */
.stock_list {
    display: inline-flex;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 30px;
}

/* - etiam 2 (50s → 25s) */
.stock_list.is_move {
    animation: flowTxt 25s linear infinite;
    animation-play-state: running;
}

/*  */
@keyframes flowTxt {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(var(--repeat) * -1px));
    }
}

/* instrumentum */
.stock_node {
    display: flex;
    align-items: center;
    padding-right: 40px;
    white-space: nowrap;
}

/* instrumentum */
.stock_item {
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 30px;
}

/* instrumentum */
.stock_name {
    display: inline-block;
    margin-right: 16px;
    color: #f0f0f0;
    font-size: 13px;
    font-weight: 400;
}

/* informatio */
.stock_info_group {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

/* 가격 - 기본 흰색 */
.stock_price {
    color: #f0f0f0;
    font-size: 13px;
}

/* 등락률 - 기본 흰색 */
.stock_rate {
    color: #f0f0f0;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 상승 삼각형 - 빨간색 */
.stock_rate.is_plus .triangle-icon {
    color: #e74747;
}

/* 하락 삼각형 - 파란색 */
.stock_rate.is_minus .triangle-icon {
    color: #2679ed;
}

/* 레거시 클래스 호환성 유지 */
.stock {
    color: #f0f0f0;
    font-size: 13px;
}

.is_plus {
    color: #f0f0f0;
    font-size: 13px;
}

.is_minus {
    color: #f0f0f0;
    font-size: 13px;
}

/* : */
[aria-hidden="true"] {
    /* ex processus */
}

/* basis */
.stock_flow_wrap a {
    text-decoration: none;
    color: inherit;
}

/* () */
.stock_list.is_move:hover {
    animation-play-state: paused;
}

/* 🆕 + cum */
.stock_price,
.stock_rate,
.stock,
.is_plus,
.is_minus {
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stock_price.flip,
.stock_rate.flip,
.stock.flip,
.is_plus.flip,
.is_minus.flip {
    animation: flipNumberWithGlow 0.8s ease;
}

@keyframes flipNumberWithGlow {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 0px rgba(255, 255, 255, 0);
        filter: brightness(1);
    }
    25% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        filter: brightness(1.5);
    }
    50% {
        transform: rotateX(90deg);
        opacity: 0.5;
        box-shadow: 0 0 12px rgba(255, 255, 255, 1);
        filter: brightness(2);
    }
    75% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        filter: brightness(1.5);
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 0px rgba(255, 255, 255, 0);
        filter: brightness(1);
    }
}

/* : - set_inner iam 100%per */
@media (max-width: 1270px) {
    /* .set_inner iam 100% usus inter */
}

@media (max-width: 768px) {
    .stock_flow_sec {
        height: 28px;
        font-size: 14px;
        line-height: 28px;
    }

    .stock_flow_wrap {
        height: 28px;
        padding: 0;
    }

    .stock_item {
        font-size: 12px;
        line-height: 28px;
    }

    .stock_name {
        font-size: 12px;
        margin-right: 12px;
    }

    .stock_price,
    .stock_rate {
        font-size: 12px;
    }

    .stock,
    .is_plus,
    .is_minus {
        font-size: 12px;
    }

    .stock_node {
        padding-right: 30px;
    }

    .stock_list.is_move {
        animation-duration: 25s; /* cum etiam */
    }

    /* 🆕 ex ante(28px) per in */
    header {
        top: 28px !important; /* ante in (30px → 28px) */
    }

    /* 🆕 body paddingetiam (ante 28px + ~60px) */
    body {
        padding-top: 88px !important; /* ante 28px + 60px */
    }
}