/* ==========================================
   Buttons 컴포넌트 스타일
   MAIC-Flask CSS 모듈화 Phase 2
   ========================================== */

/* 질문하기 버튼 */
.ask-button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid var(--border-light, rgb(255 255 255 / 10%));
  background: var(--bg-input, rgb(255 255 255 / 5%));
  color: var(--text-primary, #e0e0e0);
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal, 0.3s ease);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.user-mode .ask-button {
  width: clamp(52px, 6vw, 56px);
  height: clamp(52px, 6vw, 56px);
  border-radius: 8px;
  font-size: clamp(20px, 2.5vw, 24px);
}

.ask-button:hover {
  border-color: var(--border-focus, var(--primary-color, #8b9cf7));
  background: var(--bg-input, rgb(255 255 255 / 8%));
  box-shadow: 0 0 15px rgb(139 156 247 / 20%);
  transform: translateY(-1px);
}

.ask-button:active {
  transform: translateY(0);
}

.ask-button.stop-button {
  background-color: rgb(255 59 48 / 10%);
  border-color: rgb(255 59 48 / 30%);
  color: #ff3b30;
}

.ask-button.stop-button:hover {
  background-color: rgb(255 59 48 / 15%);
  border-color: rgb(255 59 48 / 40%);
  color: #ff3b30;
}

/* 로그인 버튼들 */
.floating-login-buttons {
  position: fixed;
  top: var(--spacing-lg, 2rem);
  right: var(--spacing-lg, 2rem);
  display: flex;
  gap: var(--spacing-sm, 1rem);
  z-index: var(--z-header, 800);
}

.student-login-btn {
  background: var(--gradient-button, linear-gradient(135deg, #6366f1, #8b5cf6));
  border: none;
  border-radius: var(--border-radius-button, 15px);
  color: white;
  padding: 2px 6px; /* 준비완료 칩과 비슷한 크기로 조정 */
  font-weight: var(--font-weight-semibold, 600);
  font-size: 0.719rem; /* 준비완료 칩 텍스트와 동일한 크기 */
  cursor: pointer;
  transition: all var(--transition-normal, 0.3s ease);
  font-family: var(--font-family, "Poppins", sans-serif);
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%));
  height: auto; /* 내용에 맞게 높이 조정 */
  line-height: 1.2; /* 텍스트와 버튼 높이 맞추기 */
}

.student-login-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-hover-light, 6px 6px 12px rgb(0 0 0 / 40%)),
    var(--shadow-hover-dark, -6px -6px 12px rgb(255 255 255 / 15%));
}

/* 질문 모드 칩 버튼 - 반 투명 심플 디자인 */
#question-mode-chip-btn {
  background: rgb(255 255 255 / 8%) !important;
  border: 1px solid rgb(255 255 255 / 15%) !important;
  border-radius: 20px !important;
  color: var(--text-secondary, #c1c3e0) !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

#question-mode-chip-btn:hover {
  background: rgb(255 255 255 / 12%) !important;
  border-color: rgb(255 255 255 / 25%) !important;
  color: var(--text-primary, #e0e0e0) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
}

/* 관리자 패널 칩 버튼 - 질문 모드 칩 버튼과 동일한 스타일 */
#admin-panel-chip-btn {
  background: rgb(255 255 255 / 8%) !important;
  border: 1px solid rgb(255 255 255 / 15%) !important;
  border-radius: 20px !important;
  color: var(--text-secondary, #c1c3e0) !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

#admin-panel-chip-btn:hover {
  background: rgb(255 255 255 / 12%) !important;
  border-color: rgb(255 255 255 / 25%) !important;
  color: var(--text-primary, #e0e0e0) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
}

.admin-login-btn {
  background: var(--bg-card, rgb(44 47 72 / 80%));
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%)); /* border 두께 줄임 (2px → 1px) */
  border-radius: 50%;
  width: 12px; /* 준비완료 칩과 비슷한 크기 (dot 5.2px + 텍스트 높이 고려) */
  height: 12px; /* 준비완료 칩과 비슷한 크기 */
  color: #ff9800;
  font-size: 0.5rem; /* 준비완료 칩과 비슷한 크기로 조정 */
  cursor: pointer;
  transition: all var(--transition-normal, 0.3s ease);
  backdrop-filter: blur(10px);
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%));
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login-btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color, #8b9cf7);
  box-shadow:
    var(--shadow-hover-light, 6px 6px 12px rgb(0 0 0 / 40%)),
    var(--shadow-hover-dark, -6px -6px 12px rgb(255 255 255 / 15%));
  color: #ffa726; /* 살짝 밝은 주황 */
}

/* 플로팅 버튼 (탭 전환용) */
.floating-btn {
  padding: 6px 16px;
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
  background: var(--bg-card, rgb(44 47 72 / 80%));
  border-radius: 20px;
  cursor: pointer;
  color: var(--text-secondary, #a0a3bd);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 6px;
}

.floating-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
  background: rgb(44 47 72 / 90%);
  border-color: rgb(255 255 255 / 20%);
}

.floating-btn.active {
  background: rgb(44 47 72 / 95%);
  color: #8b9cf7;
  border-color: rgb(139 156 247 / 50%);
  box-shadow: 0 4px 12px rgb(139 156 247 / 20%);
}

@media (width <= 768px) {
  .floating-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* 모달 버튼들 */
.modal-btn {
  border: none;
  border-radius: var(--border-radius-button, 15px);
  padding: 12px 24px;
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  transition: all var(--transition-normal, 0.3s ease);
  font-family: var(--font-family, "Poppins", sans-serif);
  margin: 0 var(--spacing-xs, 0.5rem);
}

.modal-btn-primary {
  background: var(--gradient-button, linear-gradient(135deg, #6366f1, #8b5cf6));
  color: white;
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%));
}

.modal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-hover-light, 6px 6px 12px rgb(0 0 0 / 40%)),
    var(--shadow-hover-dark, -6px -6px 12px rgb(255 255 255 / 15%));
}

.modal-btn-secondary {
  background: var(--bg-card, rgb(44 47 72 / 80%));
  color: var(--text-primary, #e0e0e0);
  border: 2px solid var(--border-light, rgb(255 255 255 / 10%));
  backdrop-filter: blur(10px);
}

.modal-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color, #8b9cf7);
  background: rgb(139 156 247 / 10%);
}

.user-mode .mode-selection-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.4rem);
  align-items: center; /* 가운데 정렬 */
  width: 100%;
  margin-top: -2rem; /* 위로 올리기 (헤더와의 간격 줄임) */
}

.user-mode .mode-selection-container .section-title,
.user-mode #mode-selector-title {
  text-align: center; /* 제목 가운데 정렬 */
  width: 100%;
}

.user-mode .mode-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5열 그리드 (어휘, 문법, 문장, 지문, 인강) */
  gap: var(--spacing-xs, 0.4rem);
  place-items: stretch stretch;
  width: 100%;
  max-width: 100%;
}

.user-mode .mode-selector-group {
  display: contents; /* 그리드 아이템으로 직접 포함 */
}

/* 모드 선택 버튼 */
.user-mode .mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: var(--bg-card, rgb(44 47 72 / 80%));
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
  border-radius: var(--border-radius-button, 14px);
  color: var(--text-secondary, #c1c3e0);
  padding: 8px 18px;
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--font-size-sm, 0.9rem);
  cursor: pointer;
  transition: all var(--transition-normal, 0.3s ease);
  font-family: var(--font-family, "Poppins", sans-serif);
  backdrop-filter: blur(10px);
  width: 100%; /* 그리드 아이템으로 전체 너비 사용 */
}

.user-mode .mode-btn-link {
  background: rgb(139 156 247 / 20%); /* 보라 계열 (톤앤톤 통일) */
  border: 1px solid rgb(139 156 247 / 30%); /* 보라 계열 */
  color: #8b9cf7; /* 보라 계열 */
  text-decoration: none;
  padding: 8px 18px;
  width: 100%; /* 그리드 아이템으로 전체 너비 사용 (모드 버튼과 동일) */
  display: inline-flex; /* 모드 버튼과 동일한 display */
  align-items: center; /* 모드 버튼과 동일 */
  justify-content: center; /* 모드 버튼과 동일 */
  font-weight: var(--font-weight-medium, 500); /* 모드 버튼과 동일 */
  font-size: var(--font-size-sm, 0.9rem); /* 모드 버튼과 동일 */
  border-radius: var(--border-radius-button, 14px); /* 모드 버튼과 동일 */
  cursor: pointer;
  transition: all var(--transition-normal, 0.3s ease);
  font-family: var(--font-family, "Poppins", sans-serif);
  backdrop-filter: blur(10px);
}

.user-mode .mode-btn-link:hover {
  color: #fff;
  background: rgb(139 156 247 / 35%); /* 보라 계열 (톤앤톤 통일) */
}

/* 텍스트 투명화 방지: 어떤 출처의 gradient/text-fill 규칙도 무력화 */
.user-mode .mode-btn,
.user-mode .mode-btn * {
  -webkit-text-fill-color: currentcolor !important;
}

.user-mode .mode-btn:hover {
  border-color: var(--primary-color, #8b9cf7);
  color: var(--text-primary, #e0e0e0);
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%));
}

.user-mode .mode-btn.active {
  background: rgb(44 47 72 / 80%) !important;
  border: 2px solid #8b9cf7 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 모드 상태 칩 스타일 (준비완료 칩과 동일) */
.user-mode .mode-status-chip {
  background: rgb(76 175 80 / 15%);
  border: 1px solid rgb(76 175 80 / 30%);
  color: #4caf50;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  position: relative;
  z-index: 10;
  grid-column: 1 / -1;
  justify-self: center;
}

.user-mode .mode-status-chip.classic {
  background: rgb(52 168 83 / 15%);
  border: 1px solid rgb(52 168 83 / 30%);
  color: #34a853;
}

.user-mode .mode-status-chip.structured {
  background: rgb(66 133 244 / 15%);
  border: 1px solid rgb(66 133 244 / 30%);
  color: #4285f4;
}

/* 데스크탑 최적화 */
@media (width >= 1024px) {
  .user-mode .mode-selector {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .user-mode .mode-btn,
  .user-mode .mode-btn-link {
    padding: 8px 14px;
    font-size: 0.9rem;
  }

  .user-mode .mode-btn {
    max-width: 320px;
  }
}

/* 반응형 버튼 */
@media (width <= 768px) {
  .floating-login-buttons {
    top: var(--spacing-sm, 1rem);
    right: var(--spacing-sm, 1rem);
  }

  .ask-button {
    width: clamp(52px, 6vw, 56px);
    height: clamp(52px, 6vw, 56px);
    font-size: clamp(20px, 2.5vw, 24px);
  }

  .user-mode .mode-btn,
  .user-mode .mode-btn-link {
    padding: 8px 14px;
    font-size: var(--font-size-sm, 0.82rem);
  }

  .user-mode .mode-btn {
    margin: 0 var(--spacing-xs, 0.25rem);
  }

  /* 모바일에서 모드 버튼 가운데 정렬 */
  .user-mode .mode-selection-container {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 가운데 정렬 */
    width: 100%;
  }

  .user-mode .mode-selector {
    justify-items: center; /* 각 버튼을 가운데 정렬 */
    width: fit-content; /* 내용에 맞게 너비 조정 */
    margin: 0 auto; /* 가운데 정렬 */
    max-width: 100%; /* 최대 너비 제한 */
  }

  .modal-btn {
    padding: 10px 20px;
    font-size: var(--font-size-sm, 0.9rem);
  }
}