/* ===================================================
   수업문의 바로가기 CSS
   
   1. 이 페이지에서 .custom-link에 대한 X3 기본 효과 무력화
   =================================================== */

/* 마우스 오버 시 뜨는 X3 고유의 오렌지색 배경 박스 강제 제거 */
.custom-link::after,
.custom-link:hover::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* X3가 마우스 오버 시 글자색을 흰색(#fff)으로 바꾸고 밑줄 없애는 대형 그물망 무력화 */
.custom-link,
.custom-link:hover,
.custom-link:active {
  text-decoration: none !important;
  color: inherit !important; /* 사이트 원래 텍스트 컬러 유지 */
  background: none !important;
  border: none !important;
}


/* ===================================================
   2. 우리가 원하는 고유 디자인 적용 (3px 두께, 5px 간격)
   =================================================== */

/* 기본 상태 */
.custom-link .link-text {
  font-size: 0.9rem !important;           /* 폰트 크기 1em 고정 */
  font-weight: bold !important;
  color: inherit !important;           /* 기본 텍스트 컬러 추종 */
  display: inline-block !important;
  
  /* 하단 테두리로 3px 두께, 5px 간격 밑줄 구현 */
  border-bottom: 2px solid #888888 !important; 
  padding-bottom: 6px !important; 
}

/* 마우스 오버 상태 */
.custom-link:hover .link-text {
  color: #ff5400 !important;           /* 글자색 오렌지 변환 */
  border-bottom-color: #ff5400 !important; /* 밑줄색 오렌지 변환 */
}



/* ======  ====== */