/* =========================================================
   호박서버 FAQ 게시판
========================================================= */

#kboard-often-list{
    width:100%;
    max-width:1200px;
    margin:40px auto;
    padding:30px;
    box-sizing:border-box;

    background:
    linear-gradient(to bottom,
    rgba(16,7,0,0.96),
    rgba(7,2,0,0.98));

    border:1px solid rgba(255,170,60,0.10);

    border-radius:22px;

    box-shadow:
    0 0 30px rgba(255,140,0,0.04),
    inset 0 0 25px rgba(255,170,60,0.02);

    overflow:hidden;
}

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

#kboard-often-list .kboard-list-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

#kboard-often-list .kboard-total-count{
    color:#bc8f53;
    font-size:13px;
}

/* =========================================================
   정렬
========================================================= */

#kboard-often-list .kboard-sort select{
    width:120px;
    height:44px;

    padding:0 14px;

    border-radius:12px;

    background:
    linear-gradient(to bottom,
    #2a1400,
    #140700);

    border:1px solid rgba(255,170,60,0.10);

    color:#efcc8d;

    outline:none;
}

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

#kboard-often-list .kboard-search{
    margin-bottom:26px;
}

#kboard-often-list .kboard-search form{
    display:flex;
    gap:10px;
    align-items:center;
}

#kboard-often-list .kboard-search select,
#kboard-often-list .kboard-search input{

    height:48px;

    border-radius:14px;

    background:
    linear-gradient(to bottom,
    #241000,
    #120600);

    border:1px solid rgba(255,170,60,0.10);

    color:#f0d19a;

    outline:none;
}

#kboard-often-list .kboard-search select{
    width:90px;
    padding:0 12px;
}

#kboard-often-list .kboard-search input{
    flex:1;
    padding:0 18px;
}

/* =========================================================
   버튼
========================================================= */

#kboard-often-list .kboard-thumbnail-button-small{

    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    min-width:74px;
    height:48px;

    padding:0 20px !important;

    border:none !important;

    border-radius:12px;

    background:
    linear-gradient(to bottom,
    #efc46b,
    #a96a16);

    color:#2a1400 !important;

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

    cursor:pointer;

    text-decoration:none !important;
}

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

#kboard-often-list .kboard-list table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 14px;
}

#kboard-often-list .kboard-list tbody tr{
    display:block;
    width:100%;
}

#kboard-often-list .kboard-list-title{
    display:block;
    width:100%;

    padding:0 !important;
    border:none !important;
}

/* =========================================================
   질문 카드
========================================================= */

#kboard-often-list .kobard_often_title{

    width:100%;

    background:
    linear-gradient(to right,
    #2a1200,
    #160700);

    border:1px solid rgba(255,170,60,0.08);

    border-radius:18px;

    overflow:hidden;

    transition:0.25s;
}

#kboard-often-list .kobard_often_title:hover{

    border-color:rgba(255,190,90,0.16);

    box-shadow:
    0 0 16px rgba(255,160,40,0.05);
}

#kboard-often-list .kobard_often_title.active{

    border-color:rgba(255,190,90,0.20);

    box-shadow:
    0 0 18px rgba(255,170,60,0.08);
}

/* =========================================================
   질문 내부
========================================================= */

#kboard-often-list .kboard-thumbnail-cut-strings{

    display:flex;
    align-items:center;

    width:100%;

    padding:22px 24px;

    color:#f0d7ae;

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

    cursor:pointer;

    gap:12px;
	    box-sizing: content-box;
}

/* =========================================================
   제목 텍스트
========================================================= */

#kboard-often-list .kboard-thumbnail-cut-strings{

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
}

/* 제목만 늘어나게 */
#kboard-often-list .kboard-thumbnail-cut-strings > span:not(.qa_icon):not(.qa_insert):not(.kboard-comments-count),
#kboard-often-list .kboard-thumbnail-cut-strings > a{

    flex:1;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

/* =========================================================
   QA 아이콘
========================================================= */

#kboard-often-list .qa_icon{

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

    width:34px;
    height:34px;

    flex-shrink:0;

    border-radius:11px;

    background:
    linear-gradient(to bottom,
    #f7ca70,
    #b9771f);

    color:#2b1300;

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

    white-space:nowrap;
}

/* =========================================================
   수정 버튼
========================================================= */

#kboard-often-list .qa_insert{

    margin-left:10px;

    flex-shrink:0;
}

#kboard-often-list .qa_insert_btn{

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

    height:28px;

    padding:0 12px;

    border-radius:9px;

    background:rgba(255,140,0,0.05);

    border:1px solid rgba(255,170,60,0.10);

    color:#ffb84d !important;

    font-size:11px;

    text-decoration:none !important;

    white-space:nowrap;
}

/* =========================================================
   댓글수
========================================================= */

#kboard-often-list .kboard-comments-count{

    margin-left:auto;

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

    min-width:28px;
    height:28px;

    padding:0 8px;

    flex-shrink:0;

    border-radius:999px;

    background:rgba(255,180,60,0.08);

    color:#e0b46d;

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

    line-height:1;

    white-space:nowrap;
	margin-right:50px;
}

/* =========================================================
   답변영역
========================================================= */

#kboard-often-list .often-answer{

    display:none;

    width:100% !important;

    margin-top:10px;

    padding:0 !important;

    border:none !important;

    background:none !important;

    overflow:hidden;
}

#kboard-often-list .often-answer .qa_answer{

    display:block;

    width:100%;

    box-sizing:border-box;

    padding:24px;

    border-radius:16px;

    background:
    linear-gradient(to bottom,
    #1a0900,
    #0d0300);

    border:1px solid rgba(255,170,60,0.06);

    color:#d8c3a0;

    line-height:1.9;
    font-size:14px;
}

/* =========================================================
   페이지네이션
========================================================= */

#kboard-often-list .kboard-pagination{
    width:100%;
    margin-top:36px;
    text-align:center;
}

#kboard-often-list .kboard-pagination-pages{

    display:flex !important;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    padding:0;
    margin:0;

    list-style:none;
}

#kboard-often-list .kboard-pagination-pages li{

    display:flex !important;
    align-items:center;
    justify-content:center;
}

#kboard-often-list .kboard-pagination-pages a,
#kboard-often-list .kboard-pagination-pages span{

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

    min-width:40px;
    height:40px;

    padding:0 14px;

    border-radius:12px;

    background:#221000;

    border:1px solid rgba(255,170,60,0.08);

    color:#d8b06c !important;

    text-decoration:none !important;
}

#kboard-often-list .kboard-pagination-pages .active span,
#kboard-often-list .kboard-pagination-pages a:hover{

    background:
    linear-gradient(to bottom,
    #efc46b,
    #a96a16);

    color:#2a1400 !important;
}

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

#kboard-often-list .kboard-control{
    margin-top:28px;
    text-align:right;
}
/* =========================================================
   FAQ hover 효과
========================================================= */

/* 기본 transition */
#kboard-often-list .kboard-list tbody tr{

    transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

/* hover */
#kboard-often-list .kboard-list tbody tr:hover{

    transform:translateY(-2px);

    filter:brightness(1.03);
}

/* hover 시 질문 카드 */
#kboard-often-list .kboard-list tbody tr:hover .kobard_often_title{

    border-color:rgba(255,190,90,0.24);

    box-shadow:
    0 0 18px rgba(255,170,60,0.08),
    0 6px 20px rgba(0,0,0,0.25);
}

/* hover 시 제목 */
#kboard-often-list .kboard-list tbody tr:hover .qa_title_wrap{

    color:#ffe1a8;
}

/* hover 시 QA 아이콘 */
#kboard-often-list .kboard-list tbody tr:hover .qa_icon{

    box-shadow:
    0 0 14px rgba(255,190,80,0.22);
}

/* hover 시 댓글 */
#kboard-often-list .kboard-list tbody tr:hover .kboard-comments-count{

    background:rgba(255,190,80,0.14);

    color:#ffd38c;
}
/* =========================================================
   모바일
========================================================= */

@media(max-width:768px){

    #kboard-often-list{
        padding:18px;
    }

    #kboard-often-list .kboard-search form{
        flex-direction:column;
    }

    #kboard-often-list .kboard-search select,
    #kboard-often-list .kboard-search input,
    #kboard-often-list .kboard-thumbnail-button-small{
        width:100%;
    }

    #kboard-often-list .kboard-thumbnail-cut-strings{
        padding:18px;
        font-size:13px;
    }

    #kboard-often-list .qa_answer{
        padding:18px !important;
        font-size:13px;
    }

    #kboard-often-list .qa_icon{
        width:30px;
        height:30px;
        font-size:10px;
    }

    #kboard-often-list .kboard-comments-count{
        min-width:24px;
        height:24px;
        font-size:10px;
    }
}