@charset "utf-8";
@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
:root {
--primary: #6d5dfc;
--white: #FFFFFF;
--greyLight-1: #E4EBF5;
--greyLight-2: #c8d0e7;
}

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body{
font-family: 'NEXON Lv1 Gothic OTF', 'Malgun Gothic', sans-serif;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
user-select: none;
margin: 0;
padding: 0;
background: var(--greyLight-1);
color:#344A67;
}
::-webkit-scrollbar{
width: 7px;
background-color: #FFF;
}
::-webkit-scrollbar-thumb{
background: linear-gradient(transparent, #FF8000, transparent);
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover{
background: linear-gradient(transparent, #6d5dfc, transparent);
}
a{
text-decoration-line: none !important;
}
#liveUserArea {
position:relative;
margin: 20px;
}
.stat-wrapper {
display: flex;
gap: 12px;
margin-bottom: 10px;
}
.stat-box {
flex: 1;
padding: 15px;
border-radius: 12px;
display: flex;
align-items: center;
grid-column: 2/3;
grid-row: 3/4;
justify-self: center;
width: 17rem;
height: 4rem;
border-radius: 1rem;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
display: flex;
justify-content: space-between;
align-items: center;
}
.stat-icon {
font-size: 36px;
margin-right: 15px;
width: 50px;
text-align: center;
}
.stat-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.stat-number {
font-size: 22px;
font-weight: 700;
color: #333;
line-height: 1.2;
text-shadow: 1px 1px 2px #FFF;
}
.stat-label {
font-size: 13px;
color: #777;
margin-top: 4px;
}
.user-list {
padding:10px;
margin-top:20px;
border-radius:10px;
align-items:center;
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}
.user-item {
padding:0;
margin:0;
display:flex;
align-items:center;
line-height:1.85rem;
}
#liveUserArea img {
width:20px !important;
height:20px !important;
margin-right: 5px !important;
padding: 0 !important;
border-radius:50%;
border:0;
object-fit:cover;
margin-right:12px;
}
#liveUserArea i {
color:#FF8000;
}
.count-hd {
position:relative;
top:15px;
font-weight:bold;
font-size:0.85rem;
}
.user-nick {
font-size:0.75rem;
cursor:pointer;
text-decoration-line: none !important;
}
.user-ip {
font-size:0.75rem;
cursor:pointer;
text-decoration-line: none !important;
text-shadow: 1px 1px 1px #FFF;
}
.user-ip i{
color: #344A67 !important;
}
#ipModal {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
justify-content:center;
align-items:center;
z-index:9999;
}
#ipModalContent {
background:rgba(0,0,0,0.7);
padding:20px;
border-radius:10px;
min-width:300px;
max-width:90%;
position:relative;
font-size:0.75rem;
color: #FFF;
}
#ipModalContent a {
color: #FFF;
}
#closeModal {
position:absolute;
top:5px;
right:7px;
cursor:pointer;
font-size:1.55rem;
color: #FFF;
}
.user-ip:hover,
.user-ip:hover i {
color:#FF8000 !important;
}
#load-more {
display:none;
padding:0;
border:0;
margin:-18px auto 0;
width:1rem;
}
i {
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff !important;
transition: color 0.4s ease;
}
.circle {
cursor:pointer;
grid-column: 2/3;
grid-row: 4/6;
justify-self: center;
border-radius: 1rem;
display: grid;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
}
.circle__btn {
grid-row: 1/2;
grid-column: 1/2;
width: 2rem;
height: 2rem;
display: flex;
margin: 0.2rem;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 1rem;
color: var(--primary);
z-index: 300;
background: var(--greyLight-1);
box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.066rem -0.066rem 0.166rem var(--white);
cursor: pointer;
position: relative;
}
.circle__btn:hover i {
color:#FF0080 !important;
}
.circle__btn.shadow {
box-shadow: inset 0.066rem 0.066rem 0.166rem var(--greyLight-2), inset -0.066rem -0.066rem 0.166rem var(--white);
}
.circle__back-1, .circle__back-2 {
grid-row: 1/2;
grid-column: 1/2;
width: 2rem;
height: 2rem;
border-radius: 50%;
filter: blur(0.33px);
z-index: 100;
}
.circle__back-1 {
box-shadow: 0.133rem 0.133rem 0.266rem var(--greyLight-2), -0.133rem -0.133rem 0.266rem var(--white);
background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);
animation: waves 4s linear infinite;
}
.circle__back-2 {
box-shadow: 0.133rem 0.133rem 0.266rem var(--greyLight-2), -0.133rem -0.133rem 0.266rem var(--white);
animation: waves 4s linear 2s infinite;
}
@keyframes waves {
0% {
transform: scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}