.category-area {
 background: var(--color-gray);
  overflow: hidden;
  position: relative;
  margin-top:20px;margin-bottom:60px;
  padding-top:20px;padding-bottom:30px;
}

/*
    categories shop card css
*/

/* col 대신 owl-item에 테두리를 줌 
  .main_box .col {
    border-right: 1px solid #d2d8dd;padding:10px 0px 10px 1px;;
  }

/* col 대신 owl-item에 테두리를 줌 
  .main_box .owl-item {
    border-right: 1px solid #d2d8dd;
  }

  /* 마지막 owl-item의 테두리만 제거 
  .main_box .owl-item:last-child {
    border-right: none;
  }*/



/*카데고리 css*/

.categories__thumbnail--img {
  height:90px;width:auto;margin-bottom:5px;
}


.categories__shop--card__link {
    text-align: center;
    display: block; /* 영역 전체를 클릭 가능하게 만듭니다 */
    text-decoration: none; /* 링크 기본 밑줄 제거 */
}

/* 기본 상태: 아이콘과 제목 모두 동일한 색상 지정 */
.categories__thumbnail i, 
.categories__content--title {
    transition: color 0.3s ease; /* 색상이 부드럽게 변하도록 애니메이션 추가 */
}

.categories__thumbnail i {
  font-size:42px;margin-bottom:0px;/*color: #666;*/color:#121212;
}
.categories__content--title {
    font-size:1.125rem;
    margin-top:0px; /* 아이콘과의 간격 조절 */
    display: block;/*color: #666;*/color: #121212;
}


/*아이콘들 중 크기가 작게 표시되는 경우가 있을 때*/
.icon-small-1
/*,.icon-small-2,
.icon-small-3*/ {
  display: inline-block; /* transform을 적용하기 위해 필수 */
  transform: scale(1.3); /* 1.4배 확대 */
  transform-origin: center; /* 중심을 기준으로 확대 */
 
}

/*아이콘들 중 조금만 크게*/
.icon-small-2 {
  display: inline-block; /* transform을 적용하기 위해 필수 */
  transform: scale(1.1); /* 1.1배 확대 */
  transform-origin: center; /* 중심을 기준으로 확대 */
 
}


/*아이콘들 중 크기가 너무 큰 거 좀 작게 표시*/
.icon-small-3 {
  display: inline-block; /* transform을 적용하기 위해 필수 */
  transform: scale(0.9); /* 축소 */
  transform-origin: center; /* 중심을 기준으로 확대 */
 
}


/*. vertical-align 및 정렬 보정
아이콘이 작은 게 아니라 위쪽이나 아래쪽으로 치우쳐 있어서 작게 느껴지는 경우. 이럴 때는 위치 보정을 함께 해주는 것이 좋습니다.
.icon-small-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  position: relative;
  top: -1px; /* 미세하게 위로 올림 
}
*/

/* 핵심: 부모(.categories__shop--card__link)에 호버 시 내부 i와 title 색상 변경 */
.categories__shop--card__link:hover .categories__thumbnail i,
.categories__shop--card__link:hover .categories__content--title,
.categories__shop--card__link:focus .categories__thumbnail i,
.categories__shop--card__link:focus .categories__content--title {
    color: #e12121;
}




@media (max-width: 767px) {



}