:root {

  --primary: #35415C;

  --primary-dark: #242C3F;

  --primary-light: #8993AA;

  --primary-bg: #F3F4F7;

  --secondary: #1E2536;

  --secondary-dark: #14192A;

  --secondary-light: #6B7690;

  --secondary-bg: #EFEFF3;

  --accent: #C9974C;

  --accent-dark: #A87B37;

  --accent-light: #E9D3A7;

  --primary-gradient: linear-gradient(135deg, #35415C 0%, #1E2536 100%);

  --secondary-gradient: linear-gradient(135deg, #6B7690 0%, #35415C 100%);

  --header-gradient: linear-gradient(to right, #35415C 0%, #1E2536 100%);

  --accent-gradient: linear-gradient(135deg, #C9974C 0%, #A87B37 100%);

  --gray-100: #FAF8F4;

}



body { background: var(--gray-100); }



.text-white,

.text-white h1, .text-white h2, .text-white h3, .text-white p {

  color: #ffffff !important;

}



h1, h2.section-title, .hero-title, .popup-title {

  font-family: 'Noto Serif KR', 'Noto Sans KR', serif;

  font-weight: 700;

  letter-spacing: -0.01em;

}



.btn { border-radius: 999px; font-weight: 500; letter-spacing: -0.01em; box-shadow: none !important; }

.btn-lg { padding: 12px 28px; }



.card { box-shadow: none; border: 1px solid var(--gray-200); border-radius: 16px; }

.card:hover { transform: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border-color: var(--primary-light); }



.hero-pattern { opacity: 0.25; }

.hero-section { padding-top: 4rem; padding-bottom: 4rem; }



#typingSection .card {

  background: #ffffff !important;

  border: 1px solid var(--gray-200) !important;

  border-left: 4px solid var(--accent) !important;

  border-radius: 12px !important;

}

#typingSection .card,

#typingSection .card h2,

#typingSection .card p {

  color: var(--primary) !important;

}

#typingSection .card .btn-white {

  background: var(--primary) !important;

  color: #ffffff !important;

  border: none !important;

}

#typingSection .card .btn-outline-primary {

  border: 1.5px solid var(--primary) !important;

  color: var(--primary) !important;

  background: transparent !important;

}



.ranking-item,

.ranking-item.top-rank {

  background: #ffffff !important;

  border: none !important;

  border-bottom: 1px solid var(--gray-200) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  padding: 14px 8px !important;

}

.ranking-item:hover { background: var(--primary-bg) !important; }

.ranking-item.top-rank { border-bottom: 1px solid var(--accent-light) !important; }



.rank-number {

  background: var(--gray-200) !important;

  color: var(--gray-700) !important;

  border-radius: 50% !important;

  font-weight: 700;

}

.ranking-item.top-rank .rank-number {

  background: var(--accent) !important;

  color: #ffffff !important;

}



.ranking-item .medal-icon,

.ranking-item img[src*="medal"],

.ranking-item .rank-badge {

  display: none !important;

}



.tab-button { border-radius: 999px; }

.mb-xl { margin-bottom: 3.5rem; }

.app-header { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }


/* 헤더 고정 + 모바일 토글 오작동 방지 */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
@media (min-width: 769px) {
  .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    max-height: none !important;
  }
  .mobile-menu-toggle {
    display: none !important;
  }
}



/* 페이지별 스크롤바 유무로 인한 컨테이너 폭 차이 방지 */

html {

  overflow-y: scroll;

}



/* 컨테이너 폭 점프 문제 근본 해결: 화면 크기와 상관없이 고정 최대 너비 사용 */

.container {


}




/* 페이지별 스크롤바 유무로 인한 컨테이너 폭 차이 방지 */

html {

  overflow-y: scroll;

}



/* 컨테이너 폭 점프 문제 근본 해결: 화면 크기와 상관없이 고정 최대 너비 사용 */

.container {

  max-width: 1100px !important;

}



/* 메뉴가 로그인 상태에 따라 움직이는 문제 해결: 3단 그리드로 고정 */

.app-header .container {

  display: grid !important;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  column-gap: 16px;

}

.app-logo {

  grid-column: 1;

}

.nav-menu {

  grid-column: 2;

  justify-content: center;

}

.auth-buttons,

.user-menu {

  grid-column: 3;

  justify-self: end;

}



/* 어두운 배경 위 텍스트 대비 문제 일괄 수정 */

.typing-header, .typing-header h1, .typing-header h2, .typing-header h3, .typing-header p {

  color: #ffffff !important;

}

.profile-header, .profile-header h1, .profile-header h2, .profile-header h3, .profile-header p,

.profile-header .user-name, .profile-header .user-church, .profile-header .profile-meta {

  color: #ffffff !important;

}

.hero-section .btn-outline-primary {

  color: #ffffff !important;

  border-color: #ffffff !important;

}

.hero-section .btn-outline-primary:hover {

  background: rgba(255, 255, 255, 0.1) !important;

}




/* 영어 역본 선택 시 라벨이 길어져 줄바꿈되는 문제 방지: 한 줄 유지 + 필요시 각 select 폭 축소 */

.typing-controls {

  flex-wrap: nowrap !important;

  overflow-x: auto;

}

.typing-controls .typing-select {

  min-width: 0;

  flex-shrink: 1;

  flex-basis: 0;

  flex-grow: 1;

}




/* 로그인/회원가입 페이지 어두운 배경 위 텍스트 대비 문제 수정 */

.auth-header, .auth-title, .auth-subtitle {

  color: #ffffff !important;

}




/* 로그인/회원가입 페이지 어두운 배경 위 텍스트 대비 문제 수정 */

.auth-header, .auth-title, .auth-subtitle {

  color: #ffffff !important;

}




/* 헤더(app-header) 안의 아웃라인 버튼도 어두운 배경 위에서 보이도록 수정 */

.app-header .btn-outline-primary {

  color: #ffffff !important;

  border-color: #ffffff !important;

}

.app-header .btn-outline-primary:hover {

  background: rgba(255, 255, 255, 0.1) !important;

}



/* 모바일에서 랭킹 아이템이 세로로 쌓이며 잘리는 문제 수정: 새 리스트형 디자인에 맞게 가로 유지 */

@media (max-width: 768px) {

  .ranking-item {

    flex-direction: row !important;

    text-align: left !important;

  }

  .rank-number {

    margin-right: 12px !important;

    margin-bottom: 0 !important;

    flex-shrink: 0;

  }

  .ranking-item .user-name,

  .ranking-item > div {

    min-width: 0;

  }

  .ranking-item span,

  .ranking-item div {

    overflow: hidden;

    text-overflow: ellipsis;

  }

}