/* ===================================================
   펀드용어사전 페이지 전용 스타일 (fund-glossary.html)
   클래스 접두사: glossary-
   =================================================== */

/* ── 색인 버튼 ── */
.glossary-index-panel {
  margin-bottom: 2.5rem;
  padding: 1.875rem;
  background-color: var(--color-offWhite);
  border-radius: 0.5rem;
}

.glossary-index-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.glossary-index-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: 1px solid var(--color-softGray);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  font-size: 0.875rem;
  transition:
    border-color 0.2s,
    color 0.2s,
    background-color 0.2s;
}

.glossary-index-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.glossary-index-btn:focus-visible {
  outline: 0.125rem solid var(--color-secondary);
  outline-offset: 0.125rem;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.glossary-index-btn--active {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary-bg);
  color: var(--color-secondary);
  font-weight: 600;
}

.glossary-index-btn--active:focus-visible {
  outline-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── 용어 목록 ── */
.glossary-term-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.glossary-term-item {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid var(--color-softGray);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  text-align: left;
  transition: all 0.2s;
}

.glossary-term-item:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.glossary-term-item:focus-visible {
  outline: 0.125rem solid var(--color-secondary);
  outline-offset: 0.125rem;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ── 용어 상세 모달 ── */
.glossary-modal-content {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}