/* connect-b ltr */

body{
    background-color: #fff;
    overflow-y:auto;
}

nav, .navOpen nav{
	display: none;
}

section{
    height: auto;
    margin-top: 0;
}

.mainWrap {
    width: 100%;
    max-width: 1200px;
    min-height: calc(100vh - 60px);
    margin: 0 auto;
    padding: 40px 30px;
    box-sizing: border-box;
}

.searchBox{
    width: 100%;
}

.searchWrap{
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    border: 1px solid #CCCCCC;
    background-color: #F9F9F9;
}

.searchWrap input {
    display: block;
}


.searchWrap .btn-search {
    width: 25px;
    background: none;
    box-shadow: none;
}


@media screen and (min-width: 712px) {
    .mainWrap {
        padding: 60px 40px;
    }
    
    .searchWrap{
        padding: 0 30px;
    }

    .searchWrap .btn-search {
        padding-left: 0px;
    }
}


.cover_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 35px;
    
}

.cover_list li a {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 55px;
    padding: 12px 20px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;    
    font-weight: 700;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* 마우스 환경에서만 hover 적용 */
@media (hover: hover) and (pointer: fine) {
    .cover_list li a:hover {
        background-color: #F4F4F4;
    }
}

/* 터치는 누르고 있는 동안만 표시 → 드래그·스크롤 후 손을 떼면 자동 해제 */
.cover_list li a:active {
    background-color: #F4F4F4;
}

.cover_list .text-box .txt {
    font-weight: 700;
    font-size: 18px;
}




@media screen and (min-width: 712px) {
    .cover_list {
        grid-template-columns: 1fr 1fr; /* 2열로 변경 */
        gap: 16px;
    }
}



/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body{
        color: #fff;
        background: #121416;
    }

    .searchWrap {
        border: 1px solid rgba(255, 255, 255, 0.68);
        background-color: #0B1015;
        box-shadow: none;
    }

    .cover_list li a{
        border-color: #5C5C5C;
        color:#fff;
        background-color: #353535;
    }

    @media (hover: hover) and (pointer: fine) {
        .cover_list li a:hover {
            background-color: #6E6E6E;
        }
    }

    .cover_list li a:active {
        background-color: #6E6E6E;
    }
}