@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");

* {
    font-family: NanumSquare;
}

body {
    display: flex;
    justify-content: center;
    margin: 0;
}

main {
    width: 100%;
    max-width: 1062px;
    margin: 48px 0;
}

h1 {
    margin: 0;
    margin-bottom: 24px;
    font-weight: 600;
}

#archiveLogo {
    color: #ff3d3d;
    font-style: italic;
    font-size: 0.5em;
    font-weight: 900;
    margin-left: 2px;
}

h2 {
    font-weight: 600;
    text-align: center;
}

.mainBanner {
    background-image: url("https://playentry.org/img/BgSuggestionsBanner.svg");
    width: 1062px;
    height: 372px;
    max-width: 100%;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

input[type="search"] {
    height: 44px;
    padding: 0 8px;
    border: 0;
    outline: 0;
    border-radius: 22px;
    width: 100%;
    padding-left: 44px;
    padding-right: 16px;
    font-size: 1rem;
}

div:has(> input[type="search"]) > img {
    position: absolute;
    height: 28px;
    margin: 8px;
    filter: invert(1);
}

#bannerSearch {
    width: 60%;
    max-width: 350px;
}

#stepInfo {
    position: absolute;
    right: 0;
    top: 0;
    margin: 5px;
    margin-right: 0;
    height: 32px;
    border: 1px solid #dcdcdc;
    background-color: white;
    padding: 0 20px;
    border-radius: 4px;
    color: #444;
    cursor: pointer;
    transition: 0.2s ease-in-out border-color, 0.2s ease-in-out color;
    &:hover {
        border-color: #16d8a3;
        color: #10be8f;
    }
}

#title,
#menu,
#menu2 {
    position: relative;
}

#menu {
    margin-top: 24px;
    border-bottom: 1px solid #e7e7e7;
}

#menu2 {
    height: 44px;
}

#menu2 > div {
    position: absolute;
    right: 0;
}

#selectedBtn {
    border-color: #10be8f !important;
}

.opBtn {
    background-color: white;
    border: 0;
    font-size: 1.4rem;
    cursor: pointer;
    font-weight: 600;
    padding: 12px 0;
    margin-right: 12px;
    border-bottom: 5px solid #fff;
    transition: 0.2s border-color;
    &:hover {
        border-color: #10be8f;
    }
}

.opBtn2 {
    position: absolute;
    right: 0;
    height: 34px;
    padding: 0 26px;
    border-radius: 24px;
    border: 0;
    background: #b2b2b2;
    color: #565656;
    cursor: no-drop;
    margin-top: 11px;
}

.opBtn3 {
    padding: 8px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    transition: 0.2s ease-in-out background-color;
    margin-left: 4px;
    font-weight: 600;
    cursor: pointer;
    color: #222;
    font-size: 0.8rem;
    &,
    &::picker(select) {
        appearance: base-select;
    }
    &::picker(select) {
        margin: 6px 0;
        border: 1px solid #e9e9e9;
        background-color: #fff;
        padding: 4px;
        border-radius: 4px;
    }
    &:hover {
        background-color: #e9e9e9;
    }
}

option {
    font-weight: 500;
    background-color: #fff;
    &:hover {
        font-weight: 600;
        color: black;
    }
    &::checkmark {
        content: "";
    }
}

#loading {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    & > img {
        width: 25%;
    }
}

/* 누가 클래스 명 이렇게 해둠? */
/* 나였네~ */
.write {
    display: flex;
    padding: 24px 0;
    position: relative;
    cursor: pointer;
    transition: 0.2s ease-in-out background-color;
    & > div:first-child {
        display: flex;
        flex-direction: column;
        & > div:first-child {
            display: flex;
            flex-direction: row;
            margin-bottom: 12px;
            & > strong {
                color: #10be8f;
                margin-right: 6px;
            }
            & > p {
                font-weight: 600;
                margin: 0;
                color: black;
                /* 이건 왜 또 span이 아니라 p임? 누가 했냐 */
                /* 나였네~ */
            }
        }
        & > div:last-child {
            display: flex;
            & > p {
                margin: 0;
            }
            & > * {
                color: #888;
                font-size: 0.8rem;
            }
            & > a {
                text-decoration: none;
                margin: 0 4px;
                &:hover {
                    font-weight: 600;
                }
            }
        }
    }
    & > div:last-child {
        position: absolute;
        right: 0;
        height: 48px;
        display: flex;
        align-items: center;
        & > * {
            color: #333;
            font-size: 0.8rem;
        }
        & > strong {
            margin-right: 12px;
        }
        & > div {
            margin-left: 12px;
            & > span:last-child {
                color: #10be8f;
            }
        }
    }
    &:hover {
        background-color: #eee;
    }
}

.hide {
    display: none !important;
}

#realBannerSearch:focus {
    outline: 1px solid #16d8a3 !important;
}

.proceeding {
    color: #5a2cd6 !important;
}

.error {
    color: #f00 !important;
}

.delay {
    color: rgb(255, 174, 0) !important;
}

#menu3 {
    display: flex;
    justify-content: center;
    & > button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 3px;
        height: 30px;
        width: 30px;
        border-radius: 15px;
        border: 0;
        outline: 0;
        background-color: white;
        cursor: pointer;
        font-weight: 600;
        transition: 0.3s ease-in-out background-color, 0.3s ease-in-out color;
        &:hover {
            background-color: #16d8a3;
            color: white;
        }
    }
}

.prev,
.next {
    outline: 1px solid #e2e2e2 !important;
}

.selectBtn {
    background-color: #16d8a3 !important;
    color: white !important;
}

.notice {
    color: #a00;
    font-weight: 700;
    font-size: 0.8rem;
    opacity: 0.8;
}

.DontShow {
    display: none !important;
}

a:has(.write) {
    text-decoration: none;
}