/* ==========================================
   LINEAGE GUIDE BOARD - GAME GUIDE STYLE
========================================== */

#lineage-guide-board{
    position:relative;
    width:100%;
    margin:0 auto;
    padding:38px;
    box-sizing:border-box;
    border-radius:20px;
    overflow:hidden;
    color:#36516a;
    background:
        radial-gradient(circle at top left, rgba(110,210,255,.35), transparent 34%),
        linear-gradient(135deg,#f8fdff,#e6f8ff);
    border:1px solid rgba(100,190,240,.48);
    box-shadow:
        0 18px 45px rgba(60,150,210,.18),
        inset 0 1px 0 rgba(255,255,255,.95);
}

#lineage-guide-board:before{
    content:"";
    position:absolute;
    top:0;
    left:8%;
    width:84%;
    height:1px;
    background:linear-gradient(to right, transparent, rgba(65,190,255,.8), transparent);
}

#lineage-guide-board:after{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(90,190,255,.16);
    filter:blur(20px);
    pointer-events:none;
}

/* =========================
   상단
========================= */

.guide-top-wrap{
    position:relative;
    z-index:2;
    display:block;
    margin-bottom:24px;
}

.guide-total-count{
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:38px;
    padding:0 16px;
    border-radius:12px;
    background:linear-gradient(to bottom,#ffffff,#eaf8ff);
    border:1px solid rgba(91,174,232,.7);
    color:#1f86c9;
    font-size:13px;
    font-weight:900;
    box-shadow:
        0 6px 16px rgba(80,160,220,.14),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.guide-total-count span{
    color:#6a9dbb;
}

.guide-total-count strong{
    color:#168de0;
}

/* =========================
   검색
========================= */

.guide-search{
    flex:1;
    display:flex;
    justify-content:flex-end;
}

.guide-search form{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:12px;
    box-sizing:border-box;
    border-radius:14px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(110,190,235,.45);
    box-shadow:0 8px 20px rgba(80,160,220,.1);
}

.guide-search select,
.guide-search input{
    height:42px;
    border-radius:9px;
    border:1px solid rgba(90,170,225,.55);
    background:#ffffff;
    color:#184d73;
    padding:0 14px;
    outline:none;
    font-size:13px;
    font-weight:800;
    box-sizing:border-box;
}

.guide-search select{
    width:92px;
}

.guide-search input{
    flex:1;
    min-width:180px;
}

.guide-search select:focus,
.guide-search input:focus{
    border-color:#27a8f2;
    box-shadow:0 0 15px rgba(80,180,255,.24);
}

.guide-search button,
.guide-write-btn{
    height:42px;
    padding:0 25px;
    border-radius:10px;
    border:1px solid rgba(90,170,225,.7);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(to bottom,#8cddff,#2d96dc);
    color:#ffffff !important;
    font-size:13px;
    font-weight:900;
    text-decoration:none !important;
    box-shadow:
        0 8px 18px rgba(70,170,240,.24),
        inset 0 1px 0 rgba(255,255,255,.45);
    transition:all .25s ease;
}

.guide-search button:hover,
.guide-write-btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(to bottom,#b4ecff,#39a9ef);
    box-shadow:0 10px 25px rgba(70,170,240,.35);
}

/* =========================
   리스트
========================= */

.guide-list-wrap{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    width:100%;
    margin-top:18px;
}

/* =========================
   카드
========================= */

.guide-item{
    position:relative;
    display:block;
    overflow:hidden;
    min-height:100%;
    border-radius:18px;
    text-decoration:none !important;
    background:
        linear-gradient(to bottom, rgba(255,255,255,.98), rgba(239,250,255,.98));
    border:1px solid rgba(100,180,230,.48);
    box-shadow:
        0 10px 26px rgba(80,160,220,.13),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease;
}

.guide-item:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.7) 48%, transparent 70%);
    transform:translateX(-130%);
    transition:.55s ease;
    pointer-events:none;
}

.guide-item:after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:0;
    height:2px;
    background:linear-gradient(to right, transparent, rgba(42,166,237,.8), transparent);
    opacity:.4;
    transition:.25s ease;
}

.guide-item:hover,
.guide-item.active{
    transform:translateY(-7px);
    border-color:#2aa6ed;
    background:
        radial-gradient(circle at top, rgba(120,220,255,.3), transparent 42%),
        linear-gradient(to bottom,#ffffff,#eaf8ff);
    box-shadow:
        0 18px 42px rgba(45,150,220,.26),
        0 0 0 1px rgba(65,180,245,.25);
}

.guide-item:hover:before,
.guide-item.active:before{
    transform:translateX(130%);
}

.guide-item:hover:after,
.guide-item.active:after{
    opacity:1;
}

/* 공지 하이라이트 */

.notice-item{
    border-color:rgba(255,190,70,.75);
    background:
        radial-gradient(circle at top, rgba(255,210,110,.3), transparent 42%),
        linear-gradient(to bottom,#fffdf5,#eef9ff);
}

.notice-item:after{
    background:linear-gradient(to right, transparent, rgba(255,180,40,.95), transparent);
}

/* =========================
   썸네일
========================= */

.guide-thumb{
    position:relative;
    width:100%;
    height:210px;
    overflow:hidden;
    background:linear-gradient(135deg,#dff4ff,#ffffff);
}

.guide-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease, filter .45s ease;
}

.guide-thumb:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:65%;
    background:linear-gradient(to top, rgba(0,55,90,.42), transparent);
    pointer-events:none;
}

.guide-item:hover .guide-thumb img,
.guide-item.active .guide-thumb img{
    transform:scale(1.08);
    filter:brightness(1.08) saturate(1.12);
}

/* 배지 */

.guide-badge{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    height:25px;
    padding:0 11px;
    border-radius:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(to bottom,#ffcf6a,#ff8d28);
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.5px;
    box-shadow:0 5px 14px rgba(255,140,40,.35);
}

.guide-badge.normal{
    background:linear-gradient(to bottom,#7bd4ff,#2d96dc);
    box-shadow:0 5px 14px rgba(70,170,240,.32);
}

/* =========================
   내용
========================= */

.guide-content{
    position:relative;
    z-index:2;
    padding:17px 17px 16px;
    min-width:0;
}

.guide-title{
    position:relative;
    display:block;
    min-height:42px;
    line-height:1.45;
    margin:0 0 10px 0;
    padding:0 0 0 18px;
    color:#17527d;
    font-size:15px;
    font-weight:900;
    letter-spacing:-.2px;
    overflow:hidden;
}

.guide-title:before{
    content:"◆";
    position:absolute;
    left:0;
    top:4px;
    color:#2aa6ed;
    font-size:10px;
    text-shadow:0 0 8px rgba(42,166,237,.35);
}

.notice-item .guide-title:before{
    color:#ff9b27;
    text-shadow:0 0 8px rgba(255,150,40,.4);
}

.guide-title span{
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}

.guide-desc{
    display:block;
    height:24px;
    line-height:24px;
    margin:0 0 13px 0;
    color:#6a97b3;
    font-size:12px;
    font-weight:800;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.guide-meta{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:22px;
    color:#6a97b3;
    font-size:12px;
    font-weight:800;
}

.guide-meta img{
    vertical-align:middle;
    margin-right:4px;
    max-height:20px;
}

.dot{
    width:4px;
    height:4px;
    flex:0 0 4px;
    border-radius:50%;
    background:#2aa6ed;
    box-shadow:0 0 8px rgba(42,166,237,.55);
}

/* =========================
   페이지
========================= */

.guide-pagination,
.kboard-pagination{
    margin-top:42px;
    text-align:center;
}

.kboard-pagination-pages{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    padding:0;
    margin:0;
    list-style:none;
}

.kboard-pagination-pages li a,
.kboard-pagination-pages li span{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#ffffff;
    border:1px solid rgba(90,170,225,.55);
    color:#2286c9;
    text-decoration:none;
    font-weight:900;
    box-shadow:0 5px 15px rgba(80,160,220,.15);
    transition:.25s;
}

.kboard-pagination-pages li a:hover,
.kboard-pagination-pages li.active a,
.kboard-pagination-pages li.active span{
    transform:translateY(-2px);
    background:linear-gradient(to bottom,#7fd5ff,#2e98de);
    color:#ffffff;
}

/* =========================
   글쓰기
========================= */

.guide-write-wrap,
.kboard-control{
    margin-top:32px;
    display:flex;
    justify-content:flex-end;
}

/* =========================
   리스트 없을 때
========================= */

.guide-list-wrap:empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    border-radius:16px;
    background:rgba(255,255,255,.55);
    border:1px dashed rgba(90,170,225,.45);
}

.guide-list-wrap:empty:before{
    content:"등록된 가이드가 없습니다.";
    color:#6a97b3;
    font-size:14px;
    font-weight:900;
}
.guide-search form{width:100%;}
.guide-search select{
width:90px;
}
.guide-search input {
    flex: 1;
    width:260px;

}
/* =========================
   반응형
========================= */

@media(max-width:1024px){
    .guide-list-wrap{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:640px){
    #lineage-guide-board{
        padding:16px;
        border-radius:14px;
    }

    .guide-top-wrap{
        display:block;
    }

    .guide-total-count{
        margin-bottom:12px;
    }

    .guide-search{
        display:block;
    }

    .guide-search form{
        display:block;
        max-width:none;
    }

    .guide-search select,
    .guide-search input,
    .guide-search button{
        width:100%;
        margin:4px 0;
    }

    .guide-list-wrap{
        grid-template-columns:1fr;
        gap:14px;
    }

    .guide-thumb{
        height:210px;
    }

    .guide-write-wrap,
    .guide-write-btn{
        width:100%;
    }
}