/* =========================================================
   KOKFLO THEME v2.0
   2026 BADMINTON PORTAL
========================================================= */

:root{
    --primary:#16c76d;
    --primary-dark:#0fa95a;
    --navy:#08244a;

    --bg:#f5f7fb;
    --card:#ffffff;

    --text:#17202a;
    --sub:#737b86;
    --muted:#9aa1aa;

    --border:#e9edf1;

    --shadow:0 8px 28px rgba(15,23,42,.055);

    --radius:20px;
}


/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    background:var(--bg);
    color:var(--text);

    font-family:
        Pretendard,
        "Noto Sans KR",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
}

button,
input{
    font-family:inherit;
}


/* =========================================================
   HEADER
========================================================= */

#kf-wrap{
    min-height:100vh;
}

#kf-header{
    position:sticky;
    top:0;
    left:0;
    right:0;

    width:100%;
    height:68px;

    display:flex;
    align-items:center;

    padding:0 24px;

    background:#fff;

    border-bottom:1px solid var(--border);

    box-shadow:0 2px 10px rgba(0,0,0,.025);

    z-index:9999;
}


/* =========================================================
   LOGO
========================================================= */

.kf-logo{
    flex-shrink:0;
}

.kf-logo a{
    display:flex;
    align-items:center;

    color:var(--primary);

    font-size:25px;
    font-weight:900;

    letter-spacing:-1.2px;

    text-decoration:none;
}


/* =========================================================
   PC NAV
========================================================= */

.kf-main-nav{
    display:flex;
    align-items:center;

    gap:32px;

    margin-left:55px;
}

.kf-main-nav a{
    position:relative;

    display:flex;
    align-items:center;

    height:68px;

    color:#30363d;

    font-size:15px;
    font-weight:650;

    text-decoration:none;

    transition:.2s;
}

.kf-main-nav a:hover{
    color:var(--primary);
}

.kf-main-nav a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:0;
    height:3px;

    background:var(--primary);

    border-radius:3px;

    transform:translateX(-50%);

    transition:.2s;
}

.kf-main-nav a:hover::after{
    width:100%;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.kf-header-right{
    margin-left:auto;

    display:flex;
    align-items:center;

    gap:5px;
}


/* =========================================================
   HEADER ICON
========================================================= */

.kf-header-icon{
    position:relative;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:19px;

    text-decoration:none;

    transition:.2s;
}

.kf-header-icon:hover{
    background:#f4f6f8;
}


/* =========================================================
   MY INFO
========================================================= */

.kf-my-wrap{
    position:relative;
}

.kf-header-my{
    display:flex;
    align-items:center;

    gap:7px;

    padding:7px 12px;

    border:0;

    border-radius:10px;

    background:transparent;

    color:#333;

    text-decoration:none;

    cursor:pointer;

    transition:.2s;
}

.kf-header-my:hover{
    background:#f5f7fb;
}

.kf-user-icon{
    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f1f3f5;

    font-size:15px;
}

.kf-user-name{
    max-width:90px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:14px;
    font-weight:600;
}

.kf-my-arrow{
    margin-left:3px;

    font-size:12px;

    color:#888;
}


/* =========================================================
   LOGIN
========================================================= */

.kf-login-btn{
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 17px;

    border-radius:9px;

    background:var(--primary);

    color:#fff !important;

    font-size:14px;
    font-weight:700;

    text-decoration:none;

    transition:.2s;
}

.kf-login-btn:hover{
    background:var(--primary-dark);
}


/* =========================================================
   REGISTER
========================================================= */

.kf-register-btn{
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 15px;

    border:1px solid #ddd;

    border-radius:9px;

    background:#fff;

    color:#333;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:.2s;
}

.kf-register-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}


/* =========================================================
   LOGOUT
========================================================= */

.kf-header-logout{
    padding:8px 10px;

    color:#777;

    font-size:12px;

    text-decoration:none;
}

.kf-header-logout:hover{
    color:#333;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.kf-mobile-menu-btn{
    display:none;

    width:42px;
    height:42px;

    margin-left:5px;

    padding:0;

    border:0;

    border-radius:10px;

    background:transparent;

    font-size:24px;

    cursor:pointer;
}


/* =========================================================
   MOBILE MENU
========================================================= */

#kf-mobile-menu{
    display:none;

    position:fixed;

    top:68px;
    left:0;
    right:0;

    background:#fff;

    border-bottom:1px solid var(--border);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    z-index:9998;
}

#kf-mobile-menu.active{
    display:block;
}

.kf-mobile-menu-inner{
    display:flex;

    flex-direction:column;

    padding:10px 15px 15px;
}

.kf-mobile-menu-inner a{
    display:flex;
    align-items:center;

    min-height:48px;

    padding:0 10px;

    border-bottom:1px solid #f1f3f5;

    color:#333;

    font-size:15px;
    font-weight:600;

    text-decoration:none;
}

.kf-mobile-menu-inner a:last-child{
    border-bottom:none;
}

.kf-mobile-menu-inner a:hover{
    color:var(--primary);
    background:#f8faf9;
    border-radius:8px;
}


/* =========================================================
   MAIN
========================================================= */

#kokflo-main{
    width:100%;
    max-width:1180px;

    margin:0 auto;

    padding:28px 20px 110px;
}


/* =========================================================
   HERO
========================================================= */

.kf-main-hero{
    position:relative;

    min-height:240px;

    margin-bottom:32px;

    overflow:hidden;

    border-radius:26px;

    background:
        linear-gradient(
            120deg,
            #08244a 0%,
            #0b4b65 55%,
            #16c76d 100%
        );

    box-shadow:
        0 12px 35px rgba(8,36,74,.14);
}

.kf-main-hero::after{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-100px;
    top:-150px;

    border-radius:50%;

    background:rgba(255,255,255,.09);
}

.kf-main-hero::before{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:130px;
    bottom:-150px;

    border-radius:50%;

    background:rgba(255,255,255,.06);
}

.kf-hero-inner{
    position:relative;

    z-index:2;

    min-height:240px;

    display:flex;
    align-items:center;

    padding:42px 48px;
}

.kf-hero-label{
    display:inline-flex;

    margin-bottom:13px;

    color:#8ff0bb;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.2px;
}

.kf-hero-text h1{
    margin:0;

    color:#fff;

    font-size:34px;
    line-height:1.25;

    letter-spacing:-1.5px;
}

.kf-hero-text p{
    margin:14px 0 0;

    color:rgba(255,255,255,.78);

    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   SECTION
========================================================= */

.kf-main-section{
    margin-bottom:34px;
}

.kf-section-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    margin-bottom:15px;
}

.kf-section-label{
    display:block;

    margin-bottom:4px;

    color:var(--primary);

    font-size:10px;
    font-weight:800;

    letter-spacing:1.1px;
}

.kf-section-header h2{
    margin:0;

    color:var(--text);

    font-size:22px;
    font-weight:800;

    letter-spacing:-.8px;
}

.kf-section-more{
    flex-shrink:0;

    color:#7b838d;

    font-size:13px;
    font-weight:600;

    text-decoration:none;
}

.kf-section-more:hover{
    color:var(--primary);
}


/* =========================================================
   CONTENT BOX
========================================================= */

.kf-content-box{
    overflow:hidden;

    background:#fff;

    border:1px solid rgba(230,234,239,.8);

    border-radius:var(--radius);

    box-shadow:var(--shadow);
}


/* =========================================================
   EMPTY
========================================================= */

.kf-empty-content{
    min-height:170px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:30px;

    text-align:center;
}

.kf-empty-icon{
    margin-bottom:10px;

    font-size:32px;
}

.kf-empty-content strong{
    color:#555;

    font-size:14px;
}

.kf-empty-content p{
    margin:7px 0 0;

    color:#999;

    font-size:12px;
}


/* =========================================================
   TOURNAMENT
========================================================= */

.kf-main-tournament .kf-content-box{
    padding:18px;
}

.kf-tournament-wrap{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    padding:0;
}

.kf-tournament-card{
    min-width:0;

    padding:20px;

    background:#f8fafb;

    border:1px solid var(--border);

    border-radius:17px;

    transition:.2s;
}

.kf-tournament-card:hover{
    transform:translateY(-2px);

    border-color:#cfeede;

    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.badge{
    display:inline-flex;
    align-items:center;

    min-height:24px;

    padding:0 9px;

    margin-bottom:12px;

    border-radius:20px;

    background:#e8faf1;

    color:var(--primary-dark);

    font-size:11px;
    font-weight:700;
}


/* =========================================================
   NEWS
========================================================= */

.kf-main-news .kf-content-box{
    padding:0;
}

.kf-news-list{
    display:flex;
    flex-direction:column;
}

.kf-news-list a{
    display:flex;
    align-items:center;

    gap:18px;

    padding:17px 20px;

    border-bottom:1px solid #f0f2f4;

    text-decoration:none;

    transition:.15s;
}

.kf-news-list a:last-child{
    border-bottom:none;
}

.kf-news-list a:hover{
    background:#fafcfb;
}

.kf-news-thumb{
    flex-shrink:0;

    width:92px;
    height:64px;

    overflow:hidden;

    border-radius:10px;

    background:#edf1f3;
}

.kf-news-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.kf-news-content{
    min-width:0;
}

.kf-news-category{
    display:block;

    margin-bottom:4px;

    color:var(--primary);

    font-size:11px;
    font-weight:700;
}

.kf-news-title{
    display:block;

    overflow:hidden;

    color:#222;

    font-size:15px;
    font-weight:700;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.kf-news-date{
    display:block;

    margin-top:5px;

    color:#999;

    font-size:11px;
}


/* =========================================================
   KOKFLO PICK
========================================================= */

.kf-pick-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;
}

.kf-pick-card{
    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.2s;
}

.kf-pick-card:hover{
    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(15,23,42,.09);
}

.kf-pick-image{
    position:relative;

    height:175px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #e8f9f0,
            #eef3f7
        );
}

.kf-pick-placeholder{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:45px;
}

.kf-pick-tag{
    position:absolute;

    left:12px;
    top:12px;

    padding:5px 8px;

    border-radius:7px;

    background:rgba(0,0,0,.62);

    color:#fff;

    font-size:9px;
    font-weight:800;

    letter-spacing:.5px;
}

.kf-pick-content{
    padding:17px 17px 19px;
}

.kf-pick-category{
    display:block;

    margin-bottom:6px;

    color:var(--primary);

    font-size:11px;
    font-weight:700;
}

.kf-pick-content h3{
    margin:0;

    color:#222;

    font-size:16px;
    line-height:1.45;

    letter-spacing:-.4px;
}

.kf-pick-content p{
    margin:7px 0 0;

    color:#999;

    font-size:11px;
    line-height:1.5;
}


/* =========================================================
   COMMUNITY
========================================================= */

.kf-community-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.kf-community-card{
    padding:20px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:var(--shadow);
}

.kf-community-card-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding-bottom:12px;

    border-bottom:1px solid #edf0f2;
}

.kf-community-card-header h3{
    margin:0;

    color:#222;

    font-size:16px;
    font-weight:800;
}

.kf-community-card-header a{
    color:#999;

    font-size:11px;

    text-decoration:none;
}

.kf-community-card-header a:hover{
    color:var(--primary);
}

.kf-community-list{
    display:flex;

    flex-direction:column;
}

.kf-community-list a{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:15px;

    min-width:0;

    padding:13px 0;

    border-bottom:1px solid #f2f3f5;

    text-decoration:none;
}

.kf-community-list a:last-child{
    border-bottom:none;
}

.kf-community-list a:hover .kf-community-title{
    color:var(--primary);
}

.kf-community-title{
    min-width:0;

    overflow:hidden;

    color:#333;

    font-size:13px;

    text-overflow:ellipsis;
    white-space:nowrap;

    transition:.15s;
}

.kf-community-meta{
    flex-shrink:0;

    color:#aaa;

    font-size:11px;
}


/* =========================================================
   MY CLUB
========================================================= */

.kf-my-club-box{
    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    box-shadow:var(--shadow);
}

.kf-my-club-box .kf-club-card{
    height:210px;

    margin-bottom:0;

    border-radius:0;

    box-shadow:none;
}

.kf-club-card{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.72)
        ),
        url('../img/club_bg.jpg');

    background-size:cover;
    background-position:center;
}

.kf-club-overlay{
    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:25px;

    color:#fff;
}

.kf-club-overlay h2{
    margin:0;

    font-size:24px;
}

.kf-club-overlay p{
    margin:7px 0 12px;

    font-size:13px;
}

.kf-club-stats{
    display:flex;

    gap:8px;
}

.kf-club-stats div{
    padding:8px 12px;

    border-radius:10px;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(10px);

    font-size:11px;
}

.kf-club-stats b{
    display:inline;

    margin-left:4px;

    font-size:13px;
}

.kf-club-overlay a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:150px;

    margin-top:12px;

    padding:10px 14px;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    font-size:12px;
    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   OLD MAIN COMPONENTS HIDE
========================================================= */

.kf-main-top,
.kf-kpi-wrap,
.kf-main-quick,
.kf-quick-menu{
    display:none;
}


/* =========================================================
   MY MENU
========================================================= */

.kf-my-menu{
    display:none;

    position:absolute;

    top:48px;
    right:0;

    width:190px;

    padding:8px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    z-index:10001;
}

.kf-my-menu.active{
    display:block;
}

.kf-my-menu a{
    display:flex;
    align-items:center;

    gap:8px;

    min-height:42px;

    padding:0 10px;

    border-radius:9px;

    color:#333;

    font-size:13px;
    font-weight:500;

    text-decoration:none;
}

.kf-my-menu a:hover{
    background:#f5f7fb;
    color:var(--primary);
}

.kf-my-menu-line{
    height:1px;

    margin:6px 4px;

    background:#eee;
}

.kf-my-menu .kf-my-logout{
    color:#dc2626;
}


/* =========================================================
   SEARCH MODAL
========================================================= */

.kf-search-modal{
    display:none;

    position:fixed;

    inset:0;

    align-items:flex-start;
    justify-content:center;

    padding-top:120px;

    background:rgba(0,0,0,.45);

    z-index:10050;
}

.kf-search-modal.active{
    display:flex;
}

.kf-search-box{
    width:90%;
    max-width:600px;

    padding:20px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.kf-search-box input{
    width:100%;

    height:54px;

    padding:0 15px;

    border:1px solid #ddd;

    border-radius:12px;

    outline:none;

    font-size:16px;
}

.kf-search-help{
    margin-top:12px;

    color:#888;

    font-size:13px;
}


/* =========================================================
   ALARM
========================================================= */

.kf-alarm-wrap{
    position:relative;
}

.kf-alarm-btn{
    position:relative;

    border:0;

    background:transparent;

    cursor:pointer;

    font-family:inherit;
}

.kf-alarm-badge{
    position:absolute;

    top:-2px;
    right:-2px;

    min-width:18px;
    height:18px;

    padding:0 5px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:20px;

    background:#ef4444;

    color:#fff;

    font-size:11px;
    font-weight:700;

    line-height:1;
}

.kf-alarm-menu{
    display:none;

    position:absolute;

    top:48px;
    right:0;

    width:320px;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    z-index:10001;
}

.kf-alarm-menu.active{
    display:block;
}

.kf-alarm-title{
    padding:15px;

    border-bottom:1px solid #eee;

    font-size:15px;
    font-weight:700;
}

.kf-alarm-item{
    display:block;

    padding:12px 15px;

    border-bottom:1px solid #f3f4f6;

    color:#333;

    text-decoration:none;
}

.kf-alarm-item:hover{
    background:#f8fafc;
}

.kf-alarm-item strong{
    display:block;

    margin-bottom:4px;

    font-size:13px;
}

.kf-alarm-item span{
    color:#999;

    font-size:11px;
}

.kf-alarm-empty{
    padding:30px;

    text-align:center;

    color:#999;
}

.kf-alarm-more{
    display:block;

    padding:12px;

    color:var(--primary);

    font-size:13px;
    font-weight:700;

    text-align:center;

    text-decoration:none;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.kf-bottom-nav{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:68px;

    display:flex;

    align-items:center;
    justify-content:space-around;

    background:rgba(255,255,255,.97);

    border-top:1px solid #e9edf0;

    box-shadow:0 -4px 18px rgba(0,0,0,.04);

    z-index:9999;

    backdrop-filter:blur(12px);
}

.kf-bottom-nav a{
    min-width:60px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:3px;

    color:#737982;

    font-size:11px;
    font-weight:600;

    text-decoration:none;

    transition:.2s;
}

.kf-bottom-nav a:hover,
.kf-bottom-nav a.active{
    color:var(--primary);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    #kf-header{
        height:58px;

        padding:0 15px;
    }

    .kf-logo a{
        font-size:21px;
    }

    .kf-main-nav{
        display:none;
    }

    .kf-header-right{
        display:flex;

        margin-left:auto;

        gap:2px;
    }

    .kf-header-icon{
        width:38px;
        height:38px;

        font-size:18px;
    }

    .kf-mobile-menu-btn{
        display:flex;

        align-items:center;
        justify-content:center;
    }

    #kf-mobile-menu{
        top:58px;
    }

    .kf-my-wrap{
        display:none !important;
    }

    #kf-search-btn{
        display:none !important;
    }


    /* MAIN */

    #kokflo-main{
        max-width:none;

        padding:15px 14px 96px;
    }


    /* HERO */

    .kf-main-hero{
        min-height:210px;

        margin-bottom:26px;

        border-radius:21px;
    }

    .kf-hero-inner{
        min-height:210px;

        padding:30px 25px;
    }

    .kf-hero-label{
        margin-bottom:9px;

        font-size:9px;
    }

    .kf-hero-text h1{
        font-size:25px;

        letter-spacing:-1px;
    }

    .kf-hero-text p{
        margin-top:10px;

        font-size:12px;

        line-height:1.6;
    }


    /* SECTION */

    .kf-main-section{
        margin-bottom:28px;
    }

    .kf-section-header{
        margin-bottom:12px;
    }

    .kf-section-header h2{
        font-size:19px;
    }

    .kf-section-label{
        font-size:9px;
    }

    .kf-section-more{
        font-size:11px;
    }


    /* TOURNAMENT */

    .kf-main-tournament .kf-content-box{
        padding:12px;
    }

    .kf-tournament-wrap{
        display:flex;

        gap:10px;

        overflow-x:auto;

        padding-bottom:3px;

        scrollbar-width:none;
    }

    .kf-tournament-wrap::-webkit-scrollbar{
        display:none;
    }

    .kf-tournament-card{
        flex:0 0 235px;

        padding:16px;

        border-radius:15px;
    }


    /* NEWS */

    .kf-news-list a{
        gap:11px;

        padding:13px 14px;
    }

    .kf-news-thumb{
        width:72px;
        height:53px;

        border-radius:8px;
    }

    .kf-news-title{
        font-size:13px;
    }

    .kf-news-category{
        font-size:9px;
    }

    .kf-news-date{
        margin-top:3px;

        font-size:9px;
    }


    /* PICK */

    .kf-pick-grid{
        display:flex;

        gap:10px;

        overflow-x:auto;

        padding-bottom:5px;

        scrollbar-width:none;
    }

    .kf-pick-grid::-webkit-scrollbar{
        display:none;
    }

    .kf-pick-card{
        flex:0 0 235px;

        border-radius:15px;
    }

    .kf-pick-image{
        height:140px;
    }

    .kf-pick-content{
        padding:13px;
    }

    .kf-pick-content h3{
        font-size:14px;

        line-height:1.4;
    }

    .kf-pick-content p{
        font-size:10px;
    }


    /* COMMUNITY */

    .kf-community-grid{
        grid-template-columns:1fr;

        gap:10px;
    }

    .kf-community-card{
        padding:15px;

        border-radius:15px;
    }

    .kf-community-card-header h3{
        font-size:14px;
    }

    .kf-community-list a{
        padding:11px 0;
    }

    .kf-community-title{
        font-size:12px;
    }

    .kf-community-meta{
        font-size:10px;
    }


    /* MY CLUB */

    .kf-my-club-box{
        border-radius:16px;
    }

    .kf-my-club-box .kf-club-card{
        height:190px;
    }

    .kf-club-overlay{
        padding:18px;
    }

    .kf-club-overlay h2{
        font-size:20px;
    }

    .kf-club-overlay p{
        margin:5px 0 9px;

        font-size:11px;
    }

    .kf-club-stats{
        gap:5px;
    }

    .kf-club-stats div{
        padding:6px 8px;

        font-size:9px;
    }

    .kf-club-stats b{
        font-size:11px;
    }

    .kf-club-overlay a{
        width:120px;

        margin-top:9px;

        padding:8px 10px;

        font-size:10px;
    }


    /* BOTTOM NAV */

    .kf-bottom-nav{
        height:65px;
    }

    .kf-bottom-nav a{
        min-width:50px;

        font-size:10px;
    }


    /* ALARM */

    .kf-alarm-menu{
        position:fixed;

        top:64px;
        left:10px;
        right:10px;

        width:auto;

        max-height:70vh;

        overflow-y:auto;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:380px){

    #kokflo-main{
        padding-left:11px;
        padding-right:11px;
    }

    .kf-main-hero{
        min-height:195px;
    }

    .kf-hero-inner{
        min-height:195px;

        padding:25px 21px;
    }

    .kf-hero-text h1{
        font-size:23px;
    }

    .kf-pick-card{
        flex-basis:220px;
    }

    .kf-tournament-card{
        flex-basis:220px;
    }
}

/* ==========================
   NEWS
========================== */

.kf-news-wrap{

    background:#fff;

    border-radius:20px;

    padding:24px;

    box-shadow:var(--shadow);

    margin-bottom:20px;
}

.kf-section-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;
}

.kf-section-head h2{

    margin:0;

    font-size:20px;

    font-weight:800;
}

.kf-section-head a{

    color:var(--primary);

    text-decoration:none;

    font-size:14px;

    font-weight:700;
}

.kf-news-list{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.kf-news-item{

    display:block;

    padding:16px;

    border:1px solid var(--border);

    border-radius:14px;

    text-decoration:none;

    transition:.2s;

    background:#fff;
}

.kf-news-item:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.kf-news-title{

    color:#222;

    font-size:15px;

    font-weight:700;

    line-height:1.5;

    margin-bottom:6px;
}

.kf-news-meta{

    color:#888;

    font-size:12px;
}