/* 검색창 디자인 */
#캐릭 { grid-area: 캐릭; }
#분류 { grid-area: 분류; }
#부위 { grid-area: 부위; }
#특수 { grid-area: 특수; }
#판정 { grid-area: 판정; }
#속도 { grid-area: 속도; }
#출신 { grid-area: 출신; }

/* 필터 전체를 감싸는 상자 */
#검색필터 {
    display: none;
    grid-template-areas:
    "캐릭 캐릭"
    "분류 판정"
    "부위 특수"
    "속도 출신";
    gap: 0.5em;
    margin: 0.5em;
}

@media screen and (max-width: 480px) {
    #검색필터 {
        grid-template-areas:
        "캐릭"
        "분류"
        "부위"
        "특수"
        "판정"
        "속도"
        "출신";
    }
}

/* 각 필터의 체크박스와 라벨을 감싸는 상자 */
.필터세부 {
    display: flex;
    flex-direction: column;
    background-color: #F2F2F2;
    padding: .5em;
    border-radius: 1em;
}

.필터세부 > label, .필터세부 > div > label {
    font-weight: 900;
    font-size: 1.3em;
}

.검색체크 {
    display: flex;
    flex-direction: row;
}

.작은버튼 {
    padding: 0 0.5em 0 0.5em;
    margin: auto 0 auto 0;
}

.검색체크 > div > label {
    padding: 0.25em 0.5em 0.25em 0.5em;
    border-radius: 0.5em;
    margin: 0.1em 0.25em 0.1em 0.25em;
    font-size: 0.85em;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #d9d9d9;
}

.작은버튼 > div > label {
    padding: 0.1em 0.25em 0.1em 0.25em;
    border-radius: 0.5em;
    margin-left: 0.25em;
    margin-right: 0.25em;
    cursor: pointer;
}

input.검색체크 {
    display: none;
}

label:has(> input.검색체크:checked)  {
    background-color: #333;
    color: #fff;
}

.긴옵션 {
    margin: 0.5em;
    text-align: center;
    height: 1.5em;
    border: 0;
    border-radius: .5em;
}

input[type='number'] {
    padding: 0;
}

/* 카드 리스트 표시 공간 디자인 */
#카드리스트 {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, calc(25% - calc(1.5em / 4)));
    margin: 1em .5em 1em .5em;
}

@media screen and (max-width: 768px) {
    #카드리스트 { grid-template-columns: repeat(3, calc(calc(calc(100%/3)) - calc(1.0em / 3)));}
}

@media screen and (max-width: 480px) {
    #카드리스트 { grid-template-columns: repeat(2, calc(50% - 0.25em)); }
}

.카드 {
    width: 100%;
    border-radius: .5em;
}

.카드정보 { padding: .5em .75em .5em .75em; }
.카드정보 > p { margin: 0; }
.카드명 { font-size: 1.2em; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.카드이미지 {
    position: relative;
}
.미발매 {
    position: absolute;
    top: 64%;
    right: 10%;
    font-size: 1.2em;
    color: red;
}