.relationBox {
    display: none;
    text-align: center;
}

.relationText {
    font-size: 20px;
}

/* Renewal Design */

#돌아가기 {
    font-size: 2em;
    font-weight: 900;
}

#섹션1 {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - .5em));
    gap: 1em;
}

@media screen and (max-width: 768px) {
    #섹션1 {
        grid-template-columns: 100%;
    }
}

#카드 {
    border-radius: 1em;
}

#카드이미지:hover {
    cursor: pointer;
}
.overlayButton {
    position: relative;
}
.imageChange {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 10%;
    border: 0;
}
.미발매 {
    position: absolute;
    top: 64%;
    right: 10%;
    font-size: 1.5em;
    color: red;
}
.imageChange > img {
    width: 100%;
}

.카드정보 { padding: .5em .75em .5em .75em; }
.카드정보 > p { margin: 0; }
.카드명 { font-size: 1.2em; font-weight: 900; }

#기본정보 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5em;
}

#기본정보.공격 {
    grid-template-rows: repeat(3, 6em);
}
#기본정보.수비 {
    grid-template-rows: repeat(1, 6em);
}

#처리 {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: repeat(3, 1fr);
    gap: .25em;
}

.정보상자 {
    text-align: center;
    border-radius: .5em;
}

.정보상자 > div {
    height: 50%;
    text-align: center;
    padding: .5em;
    font-size: 1em;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

@media screen and (max-width: 1080px) {
    #기본정보.공격 {
        grid-template-rows: repeat(3, 4em);
    }
    #기본정보.수비 {
        grid-template-rows: repeat(1, 4em);
    }

    .정보상자 > div {
        padding: 0 .5em;
    }
}

.정보상자 > div:nth-child(1) {
    background-color: #F2F2F2;
    border-radius: 1em 1em 0 0;
    font-weight: 900;
}

.정보상자 > div:nth-child(2) {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-radius: 0 0 1em 1em;
    border-color: #D9D9D9;
}

.정보상자 > div > p {
    margin-top: auto;
    margin-bottom: auto;
}

#섹션2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: .5em;
}

#섹션2 > div {
    border-radius: 1em;
    padding: 1em;
}

#섹션2 > div > p:nth-child(1) {
    font-weight: 900;
    font-size: 1.2em;
    margin-right: .75em;
}

.카드텍스트헤더 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    margin-bottom: .5em;
}

.카드텍스트헤더 > p {
    margin: 0;
    font-weight: 900;
    font-size: 1.2em;
}

.카드텍스트헤더 .btn.is-active {
    background-color: #f2f2f2;
    color: #111111;
}

.카드상세정보 {
    grid-column: 1 / 3;
}

#효과 {
    grid-column: 1 / 3;
}

@media screen and (max-width: 768px) {
    #섹션2 {
        grid-template-columns: 1fr;
    }

    #효과 {
        grid-column: 1 / 2;
    }

    .카드상세정보 {
        grid-column: 1 / 2;
    }
}

.released {
    display: flex;
    flex-direction: row;
    padding: .25em;
    border: 1px solid #000;
}

.released > div:nth-child(1) {
    min-width: 100px;
}
.released > div:nth-child(2) {
    min-width: 120px;
}
.released > div:nth-child(3) {
    flex-grow: 1;
}
.released > div:nth-child(4) {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5em;
    min-width: 70px;
    text-align: center;
    padding: auto;
}

@media screen and (max-width: 768px) {
    .released > div:nth-child(1) {
        display: none;
    }
}

.N { background-color: #aaaaaa;}
.SR { background-color: skyblue; }
.EXR { background-color: plum; }
.AN { background-color: #444444; color: #ffffff; }
.AEX { background-color: purple; color: #ffffff; }
.SAEX { background-color: blue; color: #ffffff;}
.SKR { background-color: crimson; color: #ffffff;}

#관련카드목록 {
    font-size: 1.5em;
    font-weight: 900;
}

.관련상자 {
    display: none;
    grid-template-columns: repeat(5, calc(20% - .4em));
    gap: .5em;
}

@media screen and (max-width: 768px) {
    .관련상자 {
        grid-template-columns: repeat(2, calc(50% - .25em))
    }
}

.관련카드 { border-radius: 1em; }

.캐릭터명2 { 
    font-weight: 400;
    font-size: .6em; 
}

.카드명2 {
    font-size: .8em;
    font-weight: 900;
}

.hoverBig {
    z-index: 999;
}

.hoverBig > img {
    z-index: 1;
}

.hoverBig:hover > img {
    transform: scale(1.75);
    z-index: 2;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .hoverBig:hover > img {
        transform: scale(1);
    }
}

.질문답변 {
    border-radius: 1em;
    padding: 1em;
    margin-bottom: .5em;
}

.질문답변 > h4 {
    font-weight: 900;
}

#태그폼 {
    padding: 1em;
    border-radius: 1em;
}

#태그폼 > div {
    display: flex;
    flex-direction: column;
    margin-bottom: .5em;
}

#태그폼 > div > label {
    font-weight: 700;
    font-size: 1.2em;
}