/* ==========================================================================
   원본 디자인 커스텀 스타일시트 (style.css)
   ========================================================================== */

.custom-shadow {
  box-shadow: 0px 4px 20px rgba(26, 54, 93, 0.05);
}

.hover-shadow:hover {
  box-shadow: 0px 8px 30px rgba(26, 54, 93, 0.1);
  transform: translateY(-2px);
}

/* 5개 퀵 카드 전용 프리미엄 회색 그림자 */
.card-gray-shadow {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.card-gray-shadow:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* 5개 퀵 카드 넥타이 컬러(와인 버건디 #8B1E2D) 호버 & 클릭 인터랙션 */
.quick-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-card-icon-bg {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-card-icon {
  transition: color 0.25s ease, transform 0.25s ease;
}

.quick-card:hover .quick-card-icon-bg {
  background-color: rgba(139, 30, 45, 0.12);
  transform: scale(1.1);
}

.quick-card:hover .quick-card-icon {
  color: #8B1E2D; /* 변호사 넥타이 포인트 와인 버건디 */
  transform: scale(1.05);
}

.quick-card:hover h4 {
  color: #8B1E2D;
  transition: color 0.25s ease;
}

.quick-card:active {
  transform: scale(0.96);
}

.quick-card:active .quick-card-icon {
  color: #6E1422;
}

/* 변호사 이미지 자연스러운 배경 블렌딩 마스크 & 소프트 페이드 */
.hero-portrait-blend {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0.85) 88%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0.85) 88%, rgba(0, 0, 0, 0) 100%);
  filter: drop-shadow(0 15px 35px rgba(0, 20, 60, 0.3));
}

/* 주색상 네이비-블루 사선 배경 */
.clip-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 160px), 0 100%);
}

@media (min-width: 768px) {
  .clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 220px), 0 100%);
  }
}

/* 주색상 밑에 깔리는 반대 방향 회색 사선 레이어 (추가 5도 완화된 부드러운 각도) */
.clip-diagonal-sub {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 70px));
}

@media (min-width: 768px) {
  .clip-diagonal-sub {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 100px));
  }
}