@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: rgb(219, 219, 219);
}

.popup_12, .popup3 {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
}
.popup3:target { display: block; }

.popup_12_popi, .popup-content3 {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 30px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    text-align: left; /* generally better, but original used center. Let's stick with left and center titles */
}

.popup-content3 { text-align: center; }

.popup_12_popi h2, .popup-content3 h2 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: var(--text-main);
    text-align: center;
}
.popup_exe, .close3 {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: var(--text-main);
    color: white !important;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
}
.popup_exe:hover, .close3:hover { background: var(--primary); text-decoration: none; }

/* Floating Update Button */
.open-popup3 {
    position: fixed;
    bottom: 30px;
    right: 30px;
    left: auto;
    background: var(--primary-dark);
    color: white;
    padding: 14px 24px;
    border-radius: 30px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 100;
}
.open-popup3:hover {
    background: var(--primary);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

header{
    width: 100%; height: 200px;
    padding: 20px;
    margin: 0 10px;
    text-align: center;
    background-color: aqua;
    border-radius: 40px;
    margin-bottom: 10px;
}

.spq{
    width: 100%;
    display: flex;
}

/* 1. 랭킹보드 본체 (기존 테두리 등은 유지) */
.ranking-board {
    width: 20%;
    height: 500px;
    background-color: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(200, 255, 172, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

/* 상단 기간 탭 (보라색 밑줄) */
.rank-header-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); }
.rank-tab { flex: 1; text-align: center; padding: 12px 0; cursor: pointer; color: #888; position: relative; font-size: 13px; }
.rank-tab.active { color: white; font-weight: bold; }
.rank-tab.active::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 2px; background: #a29bfe; }

/* 하단 난이도 탭 */
.rank-diff-tabs { display: flex; justify-content: center; gap: 15px; padding: 8px 0; background: rgba(0,0,0,0.2); }
.diff-tab { font-size: 11px; color: #666; cursor: pointer; }
.diff-tab.active { color: #c8ffac; font-weight: bold; }
/* 랭킹 리스트 스크롤 영역 */
.rank-list-container {
    flex: 1;                /* 헤더 제외 나머지 공간 차지 */
    overflow-y: auto;       /* 랭킹 많아지면 스크롤 발생 */
    padding: 10px;
}

/* 랭킹 개별 아이템 스타일 */
.rank-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 13px;
}

.rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
    color: #9bd3fe;
}

.rank-score {
    color: #c8ffac;
    font-weight: bold;
}

/* 스크롤바 디자인 (크롬/엣지 전용) */
.rank-list-container::-webkit-scrollbar {
    width: 5px;
}
.rank-list-container::-webkit-scrollbar-thumb {
    background-color: #c8ffac;
    border-radius: 10px;
}

.sla{
    width: 100%; height: 500px;
    border: 1px solid black;
    overflow: hidden;
    position: relative;
}

.sla img{
    position: absolute; /* 이미지를 배경처럼 깔기 위해 absolute 사용 */
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    object-fit: cover;
    display: block;
    object-position: 50% -50px;
    filter: blur(4px) brightness(0.7);
}

.da{
    z-index: 10;
    width: 100%; height: 100%;
}

.da h2{
    text-align: center;
}

@media (max-width: 1000px) {
  .spq {
    flex-direction: column;
    padding: 10px;
  }

  .ranking-board {
    width: 100%;
    margin-top: 20px;
  }
}

.login-wrap {
    width: 170px;
    height: 60px;
    position: fixed;
    bottom: 120px;
    right: 30px;
    background-color: aquamarine;
    border: 1px solid black;
    border-radius: 100px;
    text-align: center;
    line-height: 60px;
    z-index: 1000;
}

.Logina {
    width: 100%; height: 100%;
    display: block;
}

.Select_Difficulty{
    width: 100px; height: 40px;
    background-color: blanchedalmond;
    border: 1px solid black;
    border-radius: 10px;
    text-align: center;
    line-height: 39px;
    cursor: pointer;
    margin: 10px 0;
}

.Difficulty{
    display: none;
}

.Difficulty button{
    width: 70px; height: 30px;
    background-color: aliceblue;
    border: 1px solid black;
    border-radius: 10px;
    cursor: pointer;
}

.Start_Btn{
    width: 120px; height: 50px;
    font-size: 20px;
    background-color: aquamarine;
    border: 1px solid black;
    border-radius: 10px;
    cursor: pointer;
}

.sdiff {
    position: absolute;
    bottom: 20px;
    left: 50%;
    /* [핵심] 요소를 자신의 너비 절반만큼 왼쪽으로 밀어서 정확히 중앙에 배치 */
    transform: translateX(-50%); 
    
    /* 자식 요소(버튼들)를 세로로 나열하고 중앙 정렬 */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.tab-content3 input[type="text"] {
    width: 80%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-sizing: border-box; /* 패딩이 너비를 넘지 않게 함 */
}

.diff-buttons {
    display: flex;
    gap: 10px;
    margin: 15px auto;
}

#answerInput {
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    border: none;
    width: 80%;
    max-width: 300px;
}

.diff-btn {
    padding: 10px 20px;
    border: 2px solid #4cd137;
    background: transparent;
    color: rgb(0, 0, 0);
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

/* 마우스를 올렸을 때 */
.diff-btn:hover {
    background: rgba(76, 209, 55, 0.2);
}

/* 클릭해서 선택되었을 때 (Active) */
.diff-btn.active {
    background: #4cd137;
    color: #000;
    font-weight: bold;
}

#questionDisplay{
    font-size: 20px;
    color: white;
    margin-bottom: 30px;
    min-height: 60px;
    line-height: 1.4;
    word-break: keep-all; 
    overflow-wrap: break-word;
}


#nicknameArea{
    padding:12px;
    border-radius:5px;
    border:none;
    width:180px;
    color:#333;
}