/* ===== VIEWS STYLES ===== */
/**
 * @file: views/shared/township.css
 * @description: 카테고리 선택기 스타일
 * @components: 선택기 레이아웃, 그룹, 드롭다운
 * @usage: 카테고리 선택기 요소의 스타일링
 */
.township-button:hover,
.township-button.selected {
  background-color: #1a73e8;
  color: white;
  border-color: #1a73e8;
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/shared/township.css
 * @description: 읍면동 버튼 컨테이너 스타일
 * @components: 읍면동 버튼 컨테이너
 * @usage: 읍면동 버튼 컨테이너 스타일링
 */
.township-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 12px;
  padding: 8px;
  min-height: 50px;
  max-height: none;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/shared/township.css
 * @description: 확장된 상태의 읍면동 버튼 컨테이너 스타일
 * @components: 확장된 상태의 읍면동 버튼 컨테이너
 * @usage: 확장된 상태의 읍면동 버튼 컨테이너 스타일링
 */
.township-buttons-container.expanded {
  max-height: none;
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/shared/township.css
 * @description: 그라데이션 오버레이 효과
 * @components: 그라데이션 오버레이
 * @usage: 그라데이션 오버레이 효과 스타일링
 */
.township-buttons-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/**
 * @file: shared/township.css
 * @description: 읍면동 버튼 스타일
 * @components: 읍면동 버튼
 * @usage: 읍면동 버튼 스타일링
 */
.township-button {
  margin: 0;
  padding: 6px 16px;
  border-radius: 0 0 8px 8px;
  border: 1px solid #e0e0e0;
  background-color: white;
  color: #333;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  border-top: none;
}

.township-button.selected:hover {
  background-color: #1557b0;
}