/* @font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
} */

:root {
    --blk: rgb(20, 20, 20);
    --rgbBlk: 20, 20, 20;
    --dkgr: #404040;
    --ltgr: #c0c0c0;
    --wt: antiquewhite;
    --red: #fc4440;
    --green: #4fcc00;

    --point1: #00c26b;
    --point2: #14b5ff;
    --point3: #A240FC;
    --point4: #FFA600;
    --point5: #fc4440;
    --pointA: #202020;

    --normal: "Noto Sans JP", sans-serif;
    --highlight: "Dela Gothic One", sans-serif;
}

/* 스크롤바 없애기 */
/* 크롬, 사파리 */
::-webkit-scrollbar {
    display: none;
}

/* 파이어폭스 */
* {
    scrollbar-width: none;
}

/* IE, Edge 구버전 */
* {
    -ms-overflow-style: none;
}

body {
    user-select: none;
    background-color: var(--blk) !important;

    display: flex;
    flex-direction: column;

    margin: 0 40px;

    /* font-family: 'Pretendard-Regular', sans-serif; */
    /* font-family: "Noto Sans JP", sans-serif; */
    font-family: "Montserrat", sans-serif;
    /* font-weight: 900; */
    /* font-family: var(--zen); */
    /* font-weight: 400; */
    /* font-size: 16px; */
    color: var(--wt);
    /* letter-spacing: -1px; */
}

.hiddenTitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    /* 구형 브라우저 호환 */
    clip-path: inset(50%);
    /* 현대 브라우저 */
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}

header {
    /* background-color: rgb(9, 255, 104);
    width: calc(100vw - 20px);
    margin: 0 -10px;
    padding: 0 10px 10px 10px; */


    align-items: center;
    display: flex;

    /* white-space: nowrap; */
}

.wideheader {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - 80px);
    height: 60px;
    padding: 0px 40px;
    z-index: 100;
    /* background-color: inherit; */
    background: linear-gradient(to bottom,
            /* rgb(255, 166, 0, 0.1) 0%, */
            rgba(255, 166, 0, 0.05) 0%,
            rgba(255, 166, 0, 0) 100%);
}

.headerBg {
    z-index: 99;
    background-color: var(--blk);
}

main {
    text-align: center;
    margin: 40px 0;
}

.title {
    /* font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
    line-height: 16px; */

    /* width: 200px; */
    /* margin: 120px 0 60px 0; */
}

.title {
    /* background-color: aqua;
    color: blueviolet; */
    display: flex;
    align-items: center;
    margin: 8px 0;

    color: var(--wt);
}

.title .oshi {
    /* background-color: aqua; */
    font-size: 30px;

    /* letter-spacing: -2px; */
}

.title .grandPrix {
    /* background-color: aquamarine; */
    font-size: 18px;
    line-height: 0px;
}

.title .balanceGame {
    /* background-color: aquamarine; */
    font-family: var(--normal);
    font-size: 12px;
    padding-left: 2px;
}

.kanaTitle {

    font-family: "Dela Gothic One", sans-serif;
    /* color: rgb(25, 255, 83); */
    font-weight: 400;

    /* font-size: calc(100px*0.18);
    line-height: calc(100px*0.14); */

    /* font-size: 18vw;
    line-height: 14vw; */

    font-size: 20px;
    /* line-height: 117px; */
}

.engTitle {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 20px;

    word-spacing: -3px;
    /* margin-top: 4px; */
    /* font-size: 150px; */

    /* display: flex;
    margin: 0 auto; */

}

.medal {
    color: #222222;

    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: calc(100px*0.18);
    /* font-size: 18vw; */
    /* font-size: 150px; */

    display: flex;
    margin: 0 auto;
    text-align: center;
    line-height: calc(100px*0.1);
    margin-right: calc(100px*0.02);

    /* line-height: 10vw;
    margin-right: 2vw; */

    /* line-height: 84px;
        margin-right: 17px; */
}

.miniHeader {
    width: 340px;
    margin: 0 auto;
    margin-top: 30px;
}

.searchContainer {
    display: flex;
    align-items: center;
    margin: 0;

    padding: 0 10px;

    border: 1px solid var(--wt);
    border-radius: 20px;
}

.searchInput {
    background-color: transparent;
    width: 200px;

    border: none;

    padding: 5px 0;
    font-size: 14px;
    color: inherit;
}

.searchInput:focus {
    border: none;
}

.searchBtn {
    background-color: transparent;
    color: inherit;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.navBar {
    /* margin-bottom: 10px; */
    font-size: 14px;
    height: 30px;
    display: flex;
    gap: 10px;
}

/* .navs {
    display: flex;
    gap: 8px;
} */

.navGo {
    padding: 0 10px;
    display: flex;
    align-items: center;

    border: 1px solid var(--wt);
    border-radius: 20px;
}

.navGo svg {
    width: 20px;
    height: 20px;
}

.nowNav {
    padding: 0 5px;
    display: flex;
    align-items: center;
}

.nowNav.active {
    background-color: var(--blk);
    color: white;
    border: 0px solid #ffffff;
    border-radius: 5px 5px 5px 0;
}

.nav-logout {
    position: relative;
    display: none;
}

.navNickname {
    border: 1px solid var(--wt);
    border-radius: 20px;

    padding: 0 10px;

    display: flex;
    align-items: center;
    cursor: pointer;
}

.navNickname.show {
    min-width: 90px;

    border: 1px solid var(--wt);
    border-radius: 15px 15px 0 0;

    background-color: var(--wt);
    color: var(--blk);
}

.navEmoji {
    position: relative;
    right: 2px;
    bottom: 2px;
}

.lvCircleForNav {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 9px;
    height: 9px;

    background-color: white;
    font-size: 10px;
    font-weight: bold;
    color: var(--blk);

    position: absolute;
    top: 14px;
    left: 22px;
}

.dropdown {
    /* background-color: #2289ff; */
    width: 100%;
    /* height: 500px; */
    /* padding-top: 30px; */

    position: absolute;
    top: 30px;
    left: 0;

    display: none;
    flex-direction: column;

    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

.dropdown.show {
    display: flex;
}

.dropdown button {
    background-color: var(--dkgr);
    height: 30px;
    padding: 0 14px;

    text-align: left;
    color: white;

    border: none;
    border-top: 1px solid white;

    cursor: pointer;
    transition: all 0.2s ease-out;
}

.dropdown button:active {
    background-color: var(--wt);
    color: var(--blk);
}

.loginBtn {
    background-color: var(--wt);
    color: var(--blk);
    /* padding: 0 5px 2px 5px;
    border: 0px solid #ffffff;
    border-radius: 5px 5px 5px 0;

    font-size: 16px; */
    font-size: 14px;
    cursor: pointer;
}

button {
    font-family: inherit;
}

form {
    background-color: var(--wt);
    color: var(--blk);

    margin: 0 auto;
    padding: 35px 15px 0 15px;

    border-radius: 10px;
}

.wideForm {
    width: 600px;
}

.miniForm {
    width: 300px;
}

.pageTitle {
    font-family: var(--highlight);
    margin-bottom: 50px;
}

.subTitle {
    /* font-family: var(--highlight); */
    font-weight: 700;
    text-align: left;
    margin-bottom: 10px;
}

.inputArea {
    width: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.inputAreaWide {
    width: 600px;
    margin: 0 auto;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

input {
    background-color: var(--wt);
    width: 100%;

    border: none;
    border-bottom: 1px solid var(--ltgr);
    padding: 0 0 10px 0;

    font-family: inherit;
    font-size: 16px;

    transition: all 0.3s ease-out;
}

input::placeholder {
    color: var(--ltgr);
    opacity: 1;
}

input:focus {
    outline: none;
    border-bottom: 1px solid var(--blk);
}

textarea {
    background-color: var(--wt);
    font-family: inherit;
    color: inherit;

    width: 100%;
    resize: none;

    border: 1px solid var(--ltgr);
    padding: 10px 10px;

    font-size: 16px;

    transition: all 0.3s ease-out;
}

textarea::placeholder {
    color: var(--ltgr);
    opacity: 1;
}

textarea:focus {
    outline: none;
    border: 1px solid var(--blk);
}

.btn {
    background-color: white;
    width: 100%;
    padding: 10px 0;
    border: 1px solid var(--blk);

    border-radius: 5px;
    outline-offset: -1;
    font-size: 16px;

    transition: all 0.2s ease-out;
}

.btn:active {
    background-color: var(--blk);
    border: 1px solid var(--blk);

    color: white;
}

.submitBtn {
    background-color: var(--blk);

    color: white;
    /* border: 0px solid #ffffff; */

    margin: 50px 0 40px 0;

    transition: all 0.2s ease-out;
}

.submitBtn:active {
    background-color: var(--wt);
    /* border: 1px solid blueviolet; */
    color: var(--blk);
    /* font-weight: bold; */
}

.rankPageBtn {
    background-color: white;
    width: 50px;
    height: 50px;
    padding: 10px;
    border: none;
    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.rankPageBtn:active {
    background-color: var(--blk);

    color: white;
}

.tag {
    background-color: var(--blk);

    width: fit-content;

    padding: 2px 8px 4px 8px;
    border-radius: 6px;
    border: 0px solid;

    color: white;
    font-size: 12px;
}

.tabsBar {
    justify-content: center;
    position: fixed;
    top: 60px;
    left: 0;
    width: calc(100% - 80px);
    height: 80px;
    padding: 0 40px;
    z-index: 90;
    background-color: var(--blk);
    align-items: center;

    transition: box-shadow 0.3s ease;
}

.tabsBar.scrolled {
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.3); */
    box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.7);
}

.tabs {
    display: flex;
    gap: 5px;
}

.tabs button {
    /* font-family: "Montserrat", sans-serif; */
    font-weight: 700;
    /* font-family: "Dela Gothic One", sans-serif; */
    background-color: gray;
    color: var(--wt);
    font-size: 14px;

    padding: 4px 30px 5px 30px;
    border-radius: 5px;
    border: 0px solid;

    height: 40px;
    transition: all 0.2s ease;
}

.tabs button:hover {
    transform: scale(1.2);
    margin: 0 8px;
}

.tabs button.on {
    background-color: var(--wt);
    color: var(--blk);
}

.filterSelect {

    /* font-size: 28px; */
    /* margin-bottom: 3px; */
    height: 30px;
    outline: none;

    color: var(--wt);
    cursor: pointer;
}

.filterSelect option {
    background-color: var(--dkgr);
}

footer {
    text-align: center;
    align-items: center;

    display: flex;
    justify-content: space-between;

    color: var(--ltgr);
    font-size: 12px;

    width: calc(100% - 20px);
    height: 30px;
    z-index: 100;

    padding: 0 10px;

    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #202020;
}

.spaceBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cardWrap {
    display: grid;
    flex-wrap: wrap;

    margin-top: 10px;
    gap: 8px;

    grid-template-columns: repeat(auto-fill,
            minmax(min(40%, 250px), 1fr));
}

.noGameMsg {
    margin: 0 auto;
    padding-top: 50px;
}

p {
    margin: 0 auto;
}

.gameCard {
    background-color: var(--dkgr);
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.58;
    border-radius: 8px;
    margin-bottom: 20px;

    color: var(--wt);
    text-align: left;

    overflow: hidden;
    transition: transform 0.3s ease;
}

.gameCard:hover {
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
    z-index: 10
}

.thumbnail {
    width: 100%;
    height: 70%;

    border-radius: 0 0 8px 8px;
    /* border: 0px solid; */

    overflow: hidden;

    display: flex;
    justify-content: center;
}

.thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.details {
    width: 100%;
    height: 100%;
}

.detailsTop {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 16px);
    height: calc(70% - 16px);

    padding: 8px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.originalMark {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 20px;
}

.detailsBottom {
    /* background: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 20px,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.3) 80%,
            rgba(255, 255, 255, 1) 100%); */

    /* background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 20px,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.3) 80%,
            rgba(0, 0, 0, 1) 100%); */

    /* position: absolute;
    top: 0;
    left: 0; */
    width: calc(100% - 16px);
    height: calc(30% - 18px);

    padding: 8px;

    /* display: none; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nowNo1 {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 20px 0 rgba(120, 120, 120, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* background-color: rgb(255, 255, 255); */
    /* border: 2px solid rgb(255, 150, 0); */
    /* box-sizing: border-box; */

    /* max-width: 100%; */
    font-size: 16px;
    font-weight: normal;
    color: var(--blk);

    /* margin-bottom: 4px; */
}

.category {
    background-color: var(--blk);

    width: fit-content;

    padding: 2px 8px 4px 8px;
    border-radius: 6px;
    border: 0px solid;

    color: white;
    font-family: "Dela Gothic One", sans-serif;

    font-size: 14px;
}

.gameCard .gameTitle {
    /* font-weight: bold; */
    width: 100%;
    font-size: clamp(14px, 2vw, 18px);
    line-height: clamp(18px, 3vw, 24px);
    margin: 4px 0;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    display: box;
    box-orient: vertical;
    line-clamp: 2;

    overflow: hidden;
    /* font-weight: bold;
    color:rgb(55, 43, 226); */

    /* text-decoration: underline;
    text-decoration-color: #fc4440;
    text-decoration-thickness: 14px;
    text-underline-offset: -12px;
    text-decoration-skip-ink: none; */
}

.gameCard .gameDesc {
    font-size: 12px;
    margin: 0 0 6px 0;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    display: box;
    box-orient: vertical;
    line-clamp: 2;

    overflow: hidden;
}

.cardDropdown {
    position: absolute;
    top: 8px;
    right: -46px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    /* overflow: hidden; */
}

.cardDropdown button {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 20px 0 rgba(120, 120, 120, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    height: 40px;
    padding: 0 20px 0 6px;

    text-align: left;
    color: var(--wt);
    font-size: 14px;

    cursor: pointer;
    transition: all 0.2s ease-out;

    transform: translateX(0);
}

.cardDropdown button:hover {
    background-color: var(--wt);
    color: var(--blk);
    transform: translateX(-40px);
}

.icon {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.iconMini {
    width: 24px;
    height: 24px;

    position: relative;
    top: 2px;
}

.iconMicro {
    width: 16px;
    height: 16px;

    position: relative;
    top: 1px;
}

.basics {
    font-size: 12px;
}

.counts {
    display: flex;
    gap: 2px;

    align-items: center;
}

.userlv {
    font-family: "Dela Gothic One", sans-serif;
}

.lvCircle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 10px;
    margin: 0 4px;

    background-color: white;
    font-size: 12px;
    font-weight: bold;
    color: var(--blk);
}

.lv1 {
    border: 2px solid var(--point1);
}

.lv2 {
    border: 2px solid var(--point2);
}

.lv3 {
    border: 2px solid var(--point3);
}

.lv4 {
    border: 2px solid var(--point4);
}

.lv5 {
    border: 2px solid var(--point5);
}

.lvA {
    border: 2px solid var(--pointA);
    border-radius: 0 0 50% 50%;
    /* background-color: white; */
}

.lvX {
    border: 2px solid var(--blk);
}

.cardBtns {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 20px,
            rgba(0, 0, 0, 0.6) 60%,
            rgba(0, 0, 0, 1) 100%);

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none;
    /* display: flex; */
    flex-direction: column;
    justify-content: space-between;

    align-items: center;
}

.cardBtn {
    width: calc(100% - 20px);
    height: 40px;
    font-size: 16px;
    color: white;
    border: 0 solid;
    border-radius: 12px 12px 12px 0;
    cursor: pointer;
}

.playBtn {
    background-color: rgb(235, 0, 255);
    margin-top: 180px;
    width: 120px;
}

.oshiCard {
    background-color: rgb(24, 48, 255);

    width: 200px;
    height: calc(200px * 1.58);

    position: relative;

    border-radius: 12px;
    border: 0px solid;

    /* color: white; */
    overflow: hidden;

    display: flex;
    justify-content: center;

    box-shadow: 0 3px 6px rgba(var(--rgbBlk), 0.6);
}

.oshiThumbnail {
    width: 170px;
    height: 226px;

    width: 200px;
    height: calc(200px*1.58);

    display: flex;
    justify-content: center;

    /* margin-top: 50px; */
}

.oshiThumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.oshiDetails {
    /* background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 20px,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.3) 80%,
            rgba(0, 0, 0, 1) 100%); */

    font-weight: bold;

    position: absolute;
    top: 0;
    left: 0;
    width: 186px;
    height: 298px;

    margin-top: 2px;
    padding: 7px;

    /* display: none; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.oshiName {
    background-color: rgb(56, 255, 49);
    /* border-bottom: 5px solid rgb(30, 255, 0); */
    border-radius: 50px;
    /* box-sizing: border-box; */

    height: 32px;
    padding: 0 4px 0 8px;
    font-size: 16px;
    /* color: black; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trait {
    background-color: white;
    border-radius: 20px;
    padding: 2px 4px;
    font-size: 14px;
    letter-spacing: -2px;
}

.oshiCreator {
    font-size: 12px;
    /* margin: -10px 0 0 0; */
    /* padding-left: 2px; */
    /* width: 140px; */
    /* height: 20px; */
}

.lineLogo {
    font-family: var(--highlight);
    font-size: 12px;
    font-weight: 100;

    text-align: center;
    color: white;
}

.oshiSkillName {
    background-color: #d4f327;

    width: 150px;
    height: 26px;
    padding: 0 8px;

    display: flex;
    text-align: left;
    align-items: center;

    font-size: 14px;
}

.oshiPower {
    /* display: flex; */
    justify-items: right;
    margin-top: -38px;
}

.hexagon {
    background-color: #ffffff;
    width: 50px;
    height: 50px;
    padding: 0 auto;
    /* clip-path: polygon(25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%); */
    clip-path: polygon(50% 0%,
            6.7% 25%,
            6.7% 75%,
            50% 100%,
            93.3% 75%,
            93.3% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;

    position: relative;
    left: 4px;
}

.testTitle {
    /* width: 200px; */
    height: 140px;
    writing-mode: vertical-rl;
    font-family: var(--zen);
    font-size: 20px;
    line-height: 30px;
    text-align: left;
    /* font-size: clamp(12px, 100%, 50px); */
    color: white;
    text-shadow: 2px 0px 5px black;
}

.spinner {
    margin: 0 auto;
    margin-top: 50px;
    width: 40px;
    height: 40px;
    border: 6px solid var(--ltgr);
    border-top: 6px solid var(--blk);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}