/* BASIC css start */
.tab-wrapper { width: 100%; max-width: 1000px; margin: 0 auto; }

.tab-button-group { 
  line-height: 1.2;
  display: flex; 
  flex-wrap: wrap; 
  list-style: none; 
  padding: 0; 
  margin: 0 auto; 
  width: 100%; 
  
  
}

.tab-button { 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; 
  cursor: pointer; 
  background: #f8f8f8; 
  font-weight: bold;
  box-sizing: border-box; 
  word-break: keep-all;
  min-height: 50px;
  padding: 10px 5px;
  height: 70px;  

  /* 테두리 설정: 모든 면에 선을 주고 margin으로 겹침 */
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  
  /* 테두리 중첩 방지: 왼쪽으로 1px 밀어서 겹치게 함 */
  margin-left: -1px; 

  /* 기본 너비 (PC: 5개씩) */
  flex: 0 0 20%;
}

/* 첫 번째 버튼의 margin 초기화 (선택사항, 안 해도 무방함) */
.tab-button:first-child {
  /* margin-left: 0; */
}

/* --- 반응형 설정 --- */

/* 태블릿 (768px 이하): 3단 배열 */
@media screen and (max-width: 768px) {
  .tab-button {
    flex: 0 0 33.33%;
  }
}

/* 모바일 (480px 이하): 2단 배열 */
@media screen and (max-width: 480px) {
  .tab-button {
    flex: 0 0 50%;
    font-size: 14px;
    min-height: 40px;
  }
}

/* 활성화 상태 */
.tab-button.active { 
  background: #222222; 
  color: #fff; 
  z-index: 1; /* 활성화된 버튼의 테두리가 위로 오게 설정 */
}

/* 중첩 탭(inner-group2)은 기존 코드 유지 (둥근 버튼이라 영향 없음) */
.tab-button-group2 { 
  display: flex; 
  flex-wrap: wrap; 
  list-style: none; 
  padding: 0; 
  margin: 10px auto; 
  width: 95%;
  justify-content: center;
}
/* 중첩 탭 활성화 상태 */
.inner-group2 .tab-button.active {
    background: #555555;
    color: #fff;
}

.inner-group2 .tab-button {
    flex: 0 0 calc(25% - 10px);
    background: #ffffff;
    margin: 5px;
    font-weight: 400;
    min-height: 40px; 
    border: 1px solid #222; 
    border-radius: 90px; 
}

/* 애니메이션 효과 */
#red_color_t {
  animation: redToOrange 2s infinite alternate;
}

@keyframes redToOrange {
  0% { color: #ce020b; }
  100% { color: orange; }
}



.tab-content { display: none; padding: 20px 0; text-align: center; }
.tab-content.active { display: block; }
.tab-content img { max-width: 100%; height: auto; }






/* BASIC css end */