/* =============================================================================
   * [CSS_Login.html] 로그인 화면 전용 스타일
   * =============================================================================
   * - #login-screen   : 전체 화면을 덮는 로그인 컨테이너
   * - .login-card     : 중앙 카드 박스
   * - .login-input    : ID / PW 입력 필드
   * - .login-btn      : 로그인 버튼
   * - .login-error    : 에러 메시지 영역
   * ============================================================================= */

  /* ── 전체 화면 배경 ── */
  #login-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #111;                          /* 어두운 체육관 느낌 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;                            /* 최상단: 대시보드·보드 위에 올라옴 */
    flex-direction: column;
    gap: 24px;
  }

  /* ── 상단 로고 텍스트 ── */
  .login-logo {
    text-align: center;
    color: #fff;
  }

  .login-logo .logo-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 8px;
  }

  .login-logo .logo-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #00ff88;                            /* 네온 그린 포인트 */
  }

  .login-logo .logo-sub {
    font-size: 13px;
    color: #555;
    letter-spacing: 2px;
    margin-top: 4px;
  }

  /* ── 로그인 카드 ── */
  .login-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 36px 40px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  }

  .login-card h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 6px 0;
    text-align: center;
  }

  .login-card p {
    color: #555;
    font-size: 13px;
    text-align: center;
    margin: 0 0 28px 0;
  }

  /* ── 입력 그룹 ── */
  .login-field {
    margin-bottom: 16px;
  }

  .login-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 7px;
  }

  .login-input {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 16px;
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s;
    outline: none;
  }

  .login-input:focus {
    border-color: #00ff88;                     /* 포커스 시 네온 그린 테두리 */
  }

  .login-input::placeholder {
    color: #444;
  }

  /* ── 로그인 버튼 ── */
  .login-btn {
    width: 100%;
    background: linear-gradient(135deg, #00ff88, #00c97a);
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.5px;
  }

  .login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 255, 136, 0.35);
  }

  .login-btn:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* 로딩 중 상태 */
  .login-btn.loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  /* ── 에러 메시지 ── */
  .login-error {
    display: none;                             /* JS에서 show/hide */
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid #ff5252;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 14px;
    color: #ff5252;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
  }

  /* ── 하단 버전 표기 ── */
  .login-footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    letter-spacing: 1px;
  }

  /* ── 위치 확인 중 안내 메시지 ── */
  .login-geo-notice {
    display: none;                             /* JS에서 show/hide */
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid #00d2ff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 14px;
    color: #00d2ff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    animation: geo-pulse 1.5s ease-in-out infinite;
  }

  @keyframes geo-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
  }

  /* ── 모바일 최적화 ── */
  @media (max-width: 480px) {
    .login-card {
      padding: 28px 20px;
      border-radius: 16px;
      margin: 0 12px;
    }
    .login-logo .logo-icon { font-size: 44px; }
    .login-logo .logo-title { font-size: 22px; }
  }


  /* =============================================================================
   * [추가] 전체화면 로딩 오버레이 스타일
   * =============================================================================
   * 로그인 성공 후 대시보드 데이터를 불러오는 동안 표시되는 전체화면 로딩 UI
   * - #app-loading-overlay : 전체 화면을 덮는 검은 배경 오버레이
   * - .loading-spinner-wrap : 스피너 + 아이콘 래퍼 (중앙 정렬)
   * - .loading-glove-icon   : 복싱 글러브 이모지 (펄스 애니메이션)
   * - .loading-ring          : 회전하는 링 스피너
   * - .loading-status-text   : 상태 텍스트
   * - .loading-sub-text      : 하단 브랜드 텍스트
   * ============================================================================= */

  /* ── 전체화면 오버레이 배경 ── */
  #app-loading-overlay {
    position: fixed;                              /* 뷰포트 전체를 덮음 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;                             /* 완전한 검은 배경 */
    z-index: 999999;                              /* 로그인 화면(99999)보다 위 */
    display: flex;                                /* 내부 요소 중앙 정렬 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition: opacity 0.5s ease;                /* fadeOut 효과용 */
  }

  /* fadeOut 시 적용할 클래스 */
  #app-loading-overlay.fade-out {
    opacity: 0;                                   /* 투명하게 사라짐 */
    pointer-events: none;                         /* 클릭 방지 */
  }

  /* ── 스피너 래퍼 (글러브 아이콘 + 링 스피너를 겹쳐 배치) ── */
  .loading-spinner-wrap {
    position: relative;                           /* 자식 요소 absolute 기준 */
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── 복싱 글러브 아이콘 (중앙, 펄스 애니메이션) ── */
  .loading-glove-icon {
    font-size: 42px;                              /* 글러브 이모지 크기 */
    animation: glove-pulse 1.5s ease-in-out infinite; /* 크기 펄스 */
    z-index: 2;                                   /* 링 스피너 위에 표시 */
  }

  /* 글러브 아이콘 펄스 애니메이션 */
  @keyframes glove-pulse {
    0%, 100% {
      transform: scale(1);                        /* 원래 크기 */
    }
    50% {
      transform: scale(1.15);                     /* 15% 확대 */
    }
  }

  /* ── 회전하는 링 스피너 (글러브 아이콘을 감싸는 원형) ── */
  .loading-ring {
    position: absolute;                           /* 부모 기준 절대 위치 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.1);  /* 기본 원형 테두리 (어두운) */
    border-top-color: #00ff88;                    /* 상단만 네온 그린 */
    border-radius: 50%;                           /* 원형 */
    animation: ring-spin 1s linear infinite;      /* 360도 회전 */
    z-index: 1;                                   /* 글러브 아이콘 아래 */
  }

  /* 링 스피너 회전 애니메이션 */
  @keyframes ring-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* ── 상태 메시지 텍스트 ── */
  .loading-status-text {
    color: #fff;                                  /* 흰색 텍스트 */
    font-size: 16px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0.5px;
    text-align: center;
    animation: text-fade 2s ease-in-out infinite; /* 부드러운 깜빡임 */
  }

  /* 상태 텍스트 깜빡임 애니메이션 */
  @keyframes text-fade {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
  }

  /* ── 하단 브랜드 서브 텍스트 ── */
  .loading-sub-text {
    color: #333;                                  /* 매우 어두운 회색 (은은하게) */
    font-size: 11px;
    letter-spacing: 2px;
    text-align: center;
    position: absolute;                           /* 하단 고정 */
    bottom: 40px;
    left: 0;
    right: 0;
  }

  /* ── 로딩 오버레이 태블릿 반응형 ── */
  @media (max-width: 768px) {
    .loading-spinner-wrap {
      width: 80px;                                /* 태블릿에서 약간 축소 */
      height: 80px;
    }
    .loading-glove-icon {
      font-size: 36px;
    }
    .loading-status-text {
      font-size: 14px;
    }
  }

  /* ── 로딩 오버레이 모바일 반응형 ── */
  @media (max-width: 480px) {
    .loading-spinner-wrap {
      width: 70px;                                /* 모바일에서 더 축소 */
      height: 70px;
    }
    .loading-glove-icon {
      font-size: 30px;
    }
    .loading-status-text {
      font-size: 13px;
      padding: 0 20px;
    }
    .loading-sub-text {
      bottom: 24px;
    }
  }