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

.tab-button-group { 
  display: flex; 
  flex-wrap: wrap; /* [추가] 자식이 너비를 넘치면 다음 줄로 넘어가게 함 */tab-button-group
  list-style: none; 
  padding: 0; 
  margin: 0 auto; 
  width: 100%; 
}

.tab-button { 
  flex: 0 0 20%; /* [변경] 너비를 정확히 20%(5개)로 고정 */
  text-align: center; 
  padding: 15px; 
  cursor: pointer; 
  background: #f8f8f8; 
  border: 1px solid #222; /* 기본 테두리 */
  font-weight: bold;
  box-sizing: border-box; /* 테두리가 너비에 포함되도록 설정 */
  height:50px;
}

/* --- 테두리 중복 방지 로직 --- */

/* 1. 왼쪽 테두리 중복 제거: 각 줄의 첫 번째 요소(1번, 6번...)가 아니면 왼쪽 테두리 제거 */
.tab-button:not(:nth-child(5n+1)) {
  border-left: 0;
}

/* 2. 상단 테두리 중복 제거: 두 번째 줄(6번~10번) 요소들은 상단 테두리 제거 */
.tab-button:nth-child(n+6) {
  border-top: 0;
}

/* 활성화 상태 */
.tab-button.active { 
  background: #222222; 
  color: #fff; 
  /* border는 기본적으로 유지되므로 별도 수정 불필요 */
}

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

.tab-button { 
  flex: 0 0 20%; 
  /* --- 높이 통일을 위한 추가 속성 --- */
  display: flex;            /* 내부 내용을 flex로 제어 */
  align-items: center;      /* 세로 중앙 정렬 */
  justify-content: center;  /* 가로 중앙 정렬 */
 
  min-height: 60px;   /* [중요] 원하는 최소 높이 지정 (내용에 따라 조절) */
  /* ------------------------------ */
  
  text-align: center; 
  padding: 10px 5px;        /* 상하 패딩은 줄이고 좌우 여백 확보 */
  cursor: pointer; 
  background: #f8f8f8; 

  border: 1px solid #222; 
  
  font-weight: none;
  box-sizing: border-box; 
  word-break: keep-all;     /* 한글 단어가 중간에 잘리지 않게 설정 */
}




.tab-button-group2 { 
  display: flex; 
  flex-wrap: wrap; 
  list-style: none; 
  padding: 0; 
  margin: 0 auto; 
  width: 80%; 
}





/* 중첩 탭 그룹을 위한 스타일 */
.inner-group2 .tab-button {
    flex: 0 0 20%; /* 4개이므로 20% */
    background: #ffffff;
    margin:1% 2.5%;
    font-weight: 400;
    min-height: 40px; 
    border: 1px solid #222; 
    border-radius: 90px; 
}



/* 중첩 탭 활성화 상태 */
.inner-group2 .tab-button.active {
    background: #555555;
    color: #fff;
}
#red_color_t{
animation: redToOrange 2s infinite alternate;
}



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





/* BASIC css end */