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

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


/***** Main CSS *****/

body,
footer{
    background-color: #555; /* 배경 색상을 밝은 파란색으로 변경 */
    color: #fff; /* 글자 색상을 어두운 회색/파란색으로 변경 */
    font-family: 'Pretendard' !important;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    min-width:1024px;
}

.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 상단 메뉴에 그림자 추가 */
}

.navbar>.container {
    max-width:1800px;
    min-width:1024px;
}

.navbar .nav-link {
    color:#fff;
    transition: all 0.3s ease;
}

.navbar .nav-link:hover {
    text-decoration: none;
    color:#facb5b;
}

.navbar-brand {
    font-size: 1.8rem; /* 브랜드 이름 크기 조정 */
    font-weight: bold;
}
.nav-link {
    font-size: 1.2rem; /* 메뉴 링크 크기 조정 */
    margin-left: 15px; /* 링크 간 간격 조정 */
}
.nav-link:hover {
    text-decoration: underline; /* 링크에 마우스 올릴 때 밑줄 */
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color:#facb5b;
}



/*** Login ***/

/* 헤더는 고정 위치 */
header {
    width: 100%;
    background-color: #f8f9fa; /* 헤더 배경 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* 푸터 */
.footer-menu {
    color:#fff;
    font-size:15px;
}

.copyright {
    margin-top: 5px;
    font-size: 11.5px;
}

.table-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 30px;
    background-color: rgb(57, 58, 60);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size:14px;
}
.row-header {
    background-color: rgb(57, 58, 60);
    font-weight: bold;
    padding: 10px;
    border-bottom: 2px solid rgb(57, 58, 60);
}
.row-data {
    padding: 10px;
    border-bottom: 1px solid rgb(57, 58, 60);
}
.row:nth-child(even) {
    background-color: rgb(57, 58, 60);
}

.table-container .row {
    background-color:rgb(47 48 51);
}


/* 본문 영역을 중앙 정렬 */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px); /* 헤더 높이를 제외한 영역 */
    margin: 0;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color:rgb(57, 58, 60);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-header h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.form-label {
    font-weight: bold;
    color: #fff;
}

.btn.button {
    background-color: #facb5b;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn.button:hover {
    background-color: #facb5b;
}

.button,
.button:hover,
.button:active {
    color: #FFFFFF !important;
    background-color: #facb5b !important;
}

a {
    text-decoration: none;
}

/* 토스트 스타일 */
#toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 200px;
    padding: 15px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    z-index: 1050;
    display: none;
}

.nav-item.dropdown .userButton {
    background-color: rgb(57, 58, 60);
    color:#fff;
    padding:6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.nav-item.dropdown .dropdown-menu {
    right: 0;
    top: 45px;
    width: 120px;
    min-width: auto;
    background-color:rgb(57, 58, 60) ;
    border:1px solid #676678;
}

.nav-item.dropdown .dropdown-menu .dropdown-item {
    cursor: pointer;
    color:#fff;
    transition: all 0.3s ease;
}

.nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: transparent;
    color:#facb5b;
}


/*** Team ***/
.user-card {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    border: 1px solid #b0c4de; /* 카드 테두리 색상 추가 */
    border-radius: 10px; /* 카드 모서리 둥글게 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}

.card-title {
    font-size: 1.5rem;
    color: #4682b4; /* 카드 제목 색상 변경 */
}

.user-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.best-champions {
    margin-top: 40px;
}

#shuffle-teams,
.search-button,
.search-button:hover,
.search-button:active {
    background-color: #facb5b !important; /* 클릭 시 배경 색상 유지 */
    border-color: #facb5b !important; /* 클릭 시 테두리 색상 유지 */
    color: white !important; /* 클릭 시 텍스트 색상 유지 */
    background: linear-gradient(45deg, #facb5b, #fd986a);
    border:0;
    height:38px;
}

.champion-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.champion-icon {
    width: 55px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.champion-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.input-group {
    display: flex;
    align-items: center;
}

.input-group .form-control {
}

/* '라인'과 '티어' 항목에 간격을 추가 */
.select-group .form-select {
    margin-bottom: 15px;
}

.user-inputs-wrap {

}

.user-inputs-wrap .user-card {
    margin: 0;
    background-color: rgb(57, 58, 60);
    border-color: transparent;
}

.solo-rank-info,
.flex-rank-info,
.error_txt{
    color:#fff;
}

.champion-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.champion-icon {
    width: 55px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.champion-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*** 팀섞기 ***/
.champion-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
}

.champion-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card {
    background-color: rgb(57, 58, 60);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    margin-bottom: 20px;
    color:#fff;
}

.team-header {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.user-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-item {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #fff;
}

.user-item:last-child {
    margin-bottom: 0;
}

.user-item .line-img {
    width:30px;
}

.user-item .tier-img {
    width:40px;
}

.champion-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.champion-list li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #666;
}

.champion-list li strong {
    margin-right: 8px;
    color: #fff;
}

.champion-list li:last-child {
    margin-top: 10px;
}

.team-score {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #656565;
    border-radius: 5px;
}

.row {
    display: flex;
    justify-content: space-between;
}

.col-md-6 {
    width: 48%;
}

/* 툴팁 스타일 */
.tooltip-inner {
    background-color: #343a40;
    color: #fff;
}

/* 툴팁 화살표 색상 */
.tooltip.bs-tooltip-top .tooltip-arrow {
    border-top-color: #343a40;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow {
    border-bottom-color: #343a40;
}

/* 랭크 정보를 한 줄로 표시 */
.rank-info {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    font-size: 1rem;
    color: #666;
}

.rank-info img {
    width: 45px;
    height: 45px;
    /*margin-left: 5px;*/
}

.rank-info strong {
    color: #333;
}

#new-teams,
#new-teams:hover,
#new-teams:active {
    background-color: #facb5b !important;
    border-color: #facb5b !important;
    color: white !important; /* 클릭 시 텍스트 색상 유지 */
}

.shuffle_container > .row {
    max-width:1800px;
    margin:0 auto;
}

.shuffle_container > .row > .col-md-6 {
    width:49%;
}


/*** VS ***/
.vs-container {
    width:100%;
    max-width:1400px;
    min-width:1300px;
    display: flex;
    justify-content: space-between;
    margin:0 auto;
    padding:0 20px;
    align-items: center;
    position: relative;
    z-index: 9;
}

.vs-container .vs-tit {
    color:#ffde59;
    font-size:30px;
    font-weight: bold;
    margin:0 10px;
}

.vs-container .vs-box {
    width:47%;
    padding: 16px;
    background-color: rgb(57, 58, 60);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vs-container .vs-box .vsb-search {
    width:80%;
    margin:0 auto;
}

.vs-container .vs-box .vsb-gb {
    height:calc(100vh - 245px);
    overflow-y: scroll;
    position: relative;
}

.vs-container .vs-box .vsb-info {

}

#loading {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
}

.vs-container .vs-box .vsb-gb::-webkit-scrollbar {
    display: none;
}

.vs-container .vs-box .vsb-info .no-data {
    color:#fff;
    font-size:18px;
    font-weight: bold;
    text-align: center;
    margin:0;
    height:100%;
    line-height:calc(100vh - 245px);
}

.vs-container .vs-box .vsb-info .vs-player {
    display: flex;
    align-items: center;
    gap:20px;
}

.vs-container .vs-box .vsb-info .vs-player .vsp-icon {
    width:100px;
    height:100px;
    position: relative;
}

.vs-container .vs-box .vsb-info .vs-player .vsp-icon img {
    width: 100%;
    border-radius: 6px;
}

.vs-container .vs-box .vsb-info .vs-player .vsp-icon .vsp-level {
    position: absolute;
    bottom:-8px;
    left:50%;
    transform: translateX(-50%);
    padding: 0 8px;
    font-size: 12px;
    border-radius: 10px;
    color: #FFF;
    background-color: #202D37;
}

.vs-container .vs-box .vsb-info .vs-player .vsp-id {
    color:#fff;
    font-size:26px;
    font-weight: bold;
}

.vs-container .vs-box .vsb-info .vs-player .vsp-id .vsp-tag {
    color:rgb(158, 158, 177);
}

.vs-container .vs-box .vsb-info .vs-player .vsp-btn {
    margin-left:auto;
    background-color: #facb5b !important;
    border-color: #facb5b !important;
    color: white !important;
    background: linear-gradient(45deg, #facb5b, #fd986a);
    border: 0;
    height: 38px;
}

.vs-container .vs-box .vsb-info .vs-tier-box {
    display: flex;
}

.vs-container .vs-box .vsb-info .vs-tier {
    color:#fff;
    margin-top: 20px;
    width:50%;
}

.vs-container .vs-box .vsb-info .vs-tier .vst-box {
    display: flex;
    gap:12px;
    align-items: center;
}

.vs-container .vs-box .vsb-info .vst-tit {
    margin-bottom: 10px;
    font-size:20px;
    font-weight: bold;
    color:#fff;
}

.vs-container .vs-box .vsb-info .unrank {
    font-size:16px;
    font-weight: 600;
    color:#515163;
    text-align: center;
    height:72px;
    line-height:72px;
}

.vs-container .vs-box .vsb-info .vs-tier .vst-box .p-tier {
    background-color: #282830;
    border-radius: 50%;
    width: 72px;
    height: 72px;
}

.vs-container .vs-box .vsb-info .vs-tier .vst-box .p-tier img {
    width:100%;
}

.vs-container .vs-box .vsb-info .vs-tier .vst-box .p-tier-lp ,
.vs-container .vs-box .vsb-info .vs-tier .vst-box .p-tier-range ,
.vs-container .vs-box .vsb-info .vs-tier .vst-box .p-tier-wl {
    color:#7b7a8e;
    font-size:14px;
}

.vs-container .vs-box .vsb-info .vs-tier .vst-box .p-tier-right {
    margin-left:auto;
    margin-right: 12px;
}

.vs-container .vs-box .vsb-info .vs-game {
    margin-top: 20px;
}

.vs-container .vs-box .vsb-info .vs-game .vs-game-cont {
    display: flex;
    justify-content: space-between;
}

.vs-container .vs-box .vsb-info .vs-game .vs-game-cont .vs-game-box {
    width:49%;
}

.vs-container .vs-box .vsb-info .vs-game .vs-game-cont .vs-game-box .vs-most-list {
    padding:0;
    margin:0;
    display: flex;
    align-items: center;
    gap:6px;
    list-style: none;
}

.vs-container .vs-box .vsb-info .vs-game .vs-game-cont .vs-game-box .vs-most-list .vs-most {
    width: 48px;
    height: 48px;
    text-align: center;
}

.vs-container .vs-box .vsb-info .vs-game .vs-game-cont .vs-game-box .vs-most-list .vs-most img {
    width:100%;
    border-radius: 50%;
}

.vs-container .vs-box .vsb-info .vs-game .vs-game-cont .vs-game-box .vs-most-list .vs-most .vsm-level {
    display: inline-block;
    color: #FFF;
    font-size: 11px;
    line-height: 14px;
    min-width: 20px;
    padding: 0px 4px;
    border-radius: 12px;
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent {
    color:#fff;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent .vstg-tit {
    color:#9e9eb1;
    font-size:14px;
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent .vstg-bar {
    margin-top: 6px;
    width:175px;
    background-color:rgb(232, 64, 87);
    height:10px;
    border-radius: 4px;
    position: relative;
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent .vstg-bar .vstg-gage {
    position: absolute;
    display: block;
    height:10px;
    border-radius: 4px;
    background-color:rgb(83, 131, 232);
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent .vstg-kda {
    font-size:13px;
    color:#9e9eb1;
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent .vstg-kda .red {
    color:#e84057;
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent .vstg-killp {
    font-size:13px;
    color:#e84057;
}

.vs-container .vs-box .vsb-info .vs-game .vst-game-recent .vstg-per {
    font-weight: bold;
    font-size:18px;
}

.vs-container .vs-box .vst-game-box {
    margin-top:8px;
    display: flex;
    width: 100%;
    border-radius: 6px;
    padding: 4px 0px;
    gap: 10px;
    position: relative;
    align-items: center;
}

.vs-container .vs-box .vst-game-box.win {
    background-color:#28344e;
}

.vs-container .vs-box .vst-game-box .line {
    position: absolute;
    left:0;
    top:0;
    height:100%;
    width:6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.vs-container .vs-box .vst-game-box.win .line {
    background-color:#5383e8;
}

.vs-container .vs-box .vst-game-box.lose {
    background-color:#59343b;
}

.vs-container .vs-box .vst-game-box.lose .line {
    background-color:#e84057;
}

.vs-container .vs-box .vst-game-box:first-child {
    margin-top: 0;
}

.vs-container .vs-box .vst-game-box .left-txt {
    width:130px;
    padding-left:18px;
    font-size:12px;
    color:#9e9eb1;
}

.vs-container .vs-box .vst-game-box.win .left-txt .lt-tit {
    color:#5383e8;
    font-weight: 600;
}

.vs-container .vs-box .vst-game-box.lose .left-txt .lt-tit {
    color:#e84057;
    font-weight: 600;
}

.vs-container .vs-box .vst-game-box .left-txt .lt-ago {
    padding-bottom:8px;
    margin-bottom: 8px;
    border-bottom:1px solid #2f436e;
    display: inline-block;
}

.vs-container .vs-box .vst-game-box.lose .left-txt .lt-ago {
    border-color:#703c47;
}

.vs-container .vs-box .vst-game-box .mid-box {
    display: flex;
    gap:12px;
    align-items: center;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top {
    display: flex;
    align-items: center;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-champ {
    position: relative;
    width: 48px;
    height: 48px;
    margin-right: 6px;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-champ img {
    width:100%;
    border-radius: 50%;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-champ .mblc-level {
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: flex;
    width: 20px;
    height: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    color: rgb(255, 255, 255);
    background: rgb(32, 45, 55);
    border-radius: 50%;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-mid {
    display: flex;
    gap:2px;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-mid .mblml-top {
    margin-bottom: 2px;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-mid .mblmr-top {
    margin-bottom: 2px;
    background-color: #111;
    border-radius: 50%;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-kda {
    margin-left:10px;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-kda .mblk-kda {
    font-size:15px;
    font-weight: 600;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-kda .mblk-kda .red {
    color:#e84057;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-top .mbl-kda .mblk-score {
    font-size:12px;
    color:#9e9eb1;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-bot {
    display: flex;
    align-items: center;
    gap:3px;
    margin-top: 8px;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-bot .mblb-box {
    width: 22px;
    height: 22px;
    background-color:#333;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.vs-container .vs-box .vst-game-box.win .mid-box .mbl-bot .mblb-box {
    background-color: #2f436e;
}

.vs-container .vs-box .vst-game-box.lose .mid-box .mbl-bot .mblb-box {
    background-color: #703c47;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-bot .mblb-box img {
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.vs-container .vs-box .vst-game-box .mid-box .mbl-bot .mblb-box:last-child {
    border-radius: 50%;
    overflow: hidden;
}

.vs-container .vs-box .vst-game-box .mid-box .mb-right {
    font-size: 12px;
    color: #9e9eb1;
    padding-left:8px;
    border-left:1px solid #2f436e;
}

.vs-container .vs-box .vst-game-box.lose .mid-box .mb-right {
    border-color:#703c47;
}

.vs-container .vs-box .vst-game-box .mid-box .mb-right p {
    margin:0;
}

.vs-container .vs-box .vst-game-box .right-list {
    display: flex;
    gap:8px;
    margin-left:auto;
    margin-right: 10px;
}

.vs-container .vs-box .vst-game-box .right-list .list-id {
    display: flex;
    align-items: center;
    gap:4px;
    margin-top: 2px;
}

.vs-container .vs-box .vst-game-box .right-list .list-id:first-child {
    margin-top: 0;
}

.vs-container .vs-box .vst-game-box .right-list .list-id .lid-icon {
    height:16px;
}

.vs-container .vs-box .vst-game-box .right-list .list-id .lid-icon img {
    vertical-align: baseline;
}

.vs-container .vs-box .vst-game-box .right-list .list-id .lid-name {
    width:50px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    color: #9e9eb1;
}

.vs-body {
    position: relative;
}

.vs-body .vs-ad {
    position: absolute;
    background-color: #fff;
    width:200px;
    top:0;
    border-radius:10px;
    overflow: hidden;
    z-index: 8;
}

.vs-body .vs-ad.left {
    left:25px;
}

.vs-body .vs-ad.right {
    right:25px;
}

@media screen and (max-width:1620px){
    .vs-body .vs-ad {display: none;}
}