/* ======================   언더라인 텍스트 링크 버튼 CSS ====================== */

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

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


/*  두께, 간격, 색상 설정 */

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

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




/* ======================   블로그에서 보기 CSS ====================== */

.blog-link {
    padding: 50px 0 20px 0;
}

.blog-link a {
    display: block;
    width: 120px;
    height: 22px;
    margin: 0 auto;

    /* 1. 기본 색상을 SVG 원본 녹색(#2a8c2f)으로 설정 */
    background-color: #2a8c2f;

    /* 2. 평소에도 SVG 모양대로 마스크를 항상 적용 */
    -webkit-mask: url("/content/custom/files/images/blog_link.svg") center / contain no-repeat;
    mask: url("/content/custom/files/images/blog_link.svg") center / contain no-repeat;

    /* 3. 색상만 부드럽게 페이드 전환 (0.15초) */
    transition: background-color 0.15s ease;
}

/* PC 마우스 환경에서만 호버 시 오렌지색(#ff8400)으로 부드럽게 변경 */
@media (hover: hover) and (pointer: fine) {
    .blog-link a:hover {
        background-color: #ff8400;
    }
}

/* ======================   갤러리 페이지 HR 점선 CSS ====================== */

.gallery_dotline {
  border: 0;
  width: 15%;
  height: 2px; /* 점 높이 */
  margin: 40px auto;
  
  /* 가로 2px는 색상 채움, 나머지는 투명 */
  background-image: linear-gradient(to right, #bbbbbb 2px, transparent 2px);
  background-size: 5px 100%; /* 8px 주기로 반복 (점 2px + 공백 6px) */
  background-repeat: repeat-x;
}