/* 기본 머티리얼 버튼 공통 스타일 */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 64px;
  height: 36px;
  padding: 0 16px;
  
  /* 폰트 및 텍스트 설정 */
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.25px;
  text-transform: uppercase; /* 대문자 변환 */
  
  /* 테두리 및 배경 초기화 */
  border: none;
  border-radius: 4px; /* 머티리얼 표준 둥근 모서리 */
  cursor: pointer;
  outline: none;
  overflow: hidden;
  
  /* 부드러운 상태 변화 애니메이션 */
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* 1. 채워진 버튼 (Filled Button) */
.md-btn-filled {
  background-color: #00AFF0; /* 머티리얼 기본 보라색 6200ee 를 이펍 글 리더 메인색 00AFF0 으로 변경 */
  color: #ffffff;
  /* 입체감을 주는 그림자 (Resting State) */
  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 
              0px 2px 2px 0px rgba(0,0,0,0.14), 
              0px 1px 5px 0px rgba(0,0,0,0.12);
}

.md-btn-filled:hover {
  background-color: #00AFF0; /* #5300e2 */
  /* 호버 시 그림자가 깊어지며 위로 뜨는 효과 */
  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 
              0px 4px 5px 0px rgba(0,0,0,0.14), 
              0px 1px 10px 0px rgba(0,0,0,0.12);
}

.md-btn-filled:active {
  background-color: #00AFF0; /* 4a00d2 */
  transform: scale(0.98); /* 눌리는 느낌 제공 */
}

/* 2. 테두리 버튼 (Outlined Button) */
.md-btn-outlined {
  background-color: transparent;
  color: #00AFF0;
  border: 1px solid #e0e0e0;
}

.md-btn-outlined:hover {
  background-color: rgba(98, 0, 238, 0.04); /* 아주 옅은 보라색 배경 */
  border-color: #00AFF0;
}

.md-btn-outlined:active {
  background-color: rgba(98, 0, 238, 0.12);
}

/* 3. 평면 버튼 (Text / Flat Button) */
.md-btn-flat {
  background-color: transparent;
  color: #00AFF0;
}

.md-btn-flat:hover {
  background-color: rgba(98, 0, 238, 0.04);
}

.md-btn-flat:active {
  background-color: rgba(98, 0, 238, 0.12);
}