/* 초기에는 내용을 숨김 */
#protected-content { display: none; }

/* 암호 입력 화면 스타일 */
#auth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}
.password-input {
    background: #1a1a1a;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 15px;
    font-size: 1.5rem;
    text-align: center;
    width: 200px;
    border-radius: 8px;
    margin-top: 20px;
    letter-spacing: 10px;
}
.auth-msg { color: #555; margin-top: 15px; font-size: 0.8rem; }

/* 비밀번호 표시 점(Dot) 스타일 */
.pass-display {
    display: flex;
    gap: 15px;
    margin: 30px 0;
}
.dot {
    width: 15px;
    height: 15px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    transition: background 0.2s;
}
.dot.filled {
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
}

/* 키패드 레이아웃 (3x4 그리드) */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-gap: 15px;
    justify-content: center;
}
.keypad button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #333;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s;
    touch-action: manipulation; /* 더블 탭 확대 방지 및 클릭 지연 제거 */
    user-select: none;          /* 텍스트 선택 방지 */
    -webkit-user-select: none;  /* iOS Safari용 */
}
.keypad button:active {
    background: var(--primary-color);
    color: #000;
    transform: scale(0.9);
}