@charset "utf-8";

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.addItem {
    display: grid;
    gap: 0.7rem;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 2.3rem;
    margin-top: 2.3rem;
}

.addInItem {
    display: flex;
    letter-spacing: -0.7px;
    font: 400 1.4rem "Noto Sans KR";
}

.addItem p {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 4.2rem;
    color: rgb(128, 128, 128);
    background-color: rgb(244, 244, 244);
    border-radius: 5px;
    cursor: pointer;
}

.addItem p.active {
    color: white;
    background-color: #4FC1E9;
}

.addItem p.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.addDetail {
}

.addInDetail {
    display: none;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.addInDetail.active {
    display: flex;
}

.addInDetail > img {
    margin-bottom: 1.8rem;
}

.addInDetail .title {
    letter-spacing: -1.3px;
    font: 500 2.6rem "Noto Sans KR";
}

.addInDetail .summary {
    letter-spacing: -0.8px;
    font: 400 1.6rem "Noto Sans KR";
}

.addInDetail p.size {
    color: rgb(82, 82, 82);
    margin: 0.4rem 0px 2.3rem;
}

.addInDetail .price {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    margin-bottom: 1rem;
}

.addInDetail .price > div {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 5rem;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 0.5rem;
    padding: 1.5rem 2rem;
    cursor: pointer;
}

.addInDetail .price > div p {
    display: flex;
    letter-spacing: -0.7px;
    font: 400 1.4rem "Noto Sans KR";
}