/* 기본 상태: 흑백 + 부드러운 트랜지션 준비 */
.mono {
  display: inline-block;              /* 이미지 주변 공백/정렬 안정화 */
  
  filter: grayscale(0%);
  transform: scale(1);                /* 기준 크기 */
  transition:
    filter 1.6s ease,                 /* 매우 천천히 */
    transform 1.6s ease,              /* 매우 천천히 */
    opacity 1.6s ease;
  will-change: filter, transform;     /* 성능 힌트 (선택) */
}

/* 호버 상태: 컬러 + 살짝 확대 */
.mono:hover {
  filter: grayscale(100%) contrast(105%);
  transform: scale(1.03);
}

/* (선택) 키보드 포커스 접근성도 동일하게 적용 */
.mono:focus {
  outline: none;
  filter: grayscale(0%);
  transform: scale(1.03);
}


/* 기본 상태: 흑백 + 부드러운 트랜지션 준비 */
.mono_fast {
  display: inline-block;              /* 이미지 주변 공백/정렬 안정화 */
  
  filter: grayscale(0%);
  transform: scale(1);                /* 기준 크기 */
  transition:
    filter 0.5s ease,                 /* 매우 천천히 */
    transform 0.5s ease,              /* 매우 천천히 */
    opacity 0.5s ease;
  will-change: filter, transform;     /* 성능 힌트 (선택) */
}

/* 호버 상태: 컬러 + 살짝 확대 */
.mono_fast:hover {
  filter: grayscale(100%) contrast(155%);
  transform: scale(1.05);
}

/* (선택) 키보드 포커스 접근성도 동일하게 적용 */
.mono_fast:focus {
  outline: none;
  filter: grayscale(0%);
  transform: scale(1.03);
}


.cloudy-soft {
  display:block;
  transition: filter .25s ease;
}
.cloudy-soft:hover {
  filter: brightness(0.92) contrast(0.92) saturate(0.9);
}

.cloudy-hover {
  display:block;              /* 밑줄간격 제거용 */
  transition: filter .55s ease;
}
.cloudy-hover:hover {
  transition: filter .55s ease;
  /* 밝기↓, 대비↓, 약간 흐림 */
  filter: brightness(1.1) contrast(1.2) saturate(0.95) blur(0.5px);
}