@charset "UTF-8";
.card {
  display: inline-flex;
  justify-content: stretch;
  align-items: center;
  flex-direction: row;
  width: 100%;
  max-width: calc(100% - 20px - 20px);
  margin: 20px;
  background: var(--background);
  border-radius: var(--rounded);
  overflow: hidden;
  box-shadow: var(--shadow);
  vertical-align: top;
  /* 부드러운 애니메이션 효과를 위해 필수 추가 */
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* 카드 모서리 둥글게 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card .card-image {
  flex: 0 0 40%; /* 이미지 너비를 전체 카드의 40%로 고정 (원하는 비율로 조절 가능) */
  max-width: 40%;
  display: block;
}

.card[data-style=small] {
  width: 250px;
}

.card-image img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 이미지 비율 유지하며 채우기 */
  display: block;
}

.card-text {
  display: inline-flex;
  justify-content: flex-start;
  align-items: left;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
  padding: 20px;
}

.card-text > * {
  margin: 0 !important;
}

.card-title {
  font-size: 1.5rem; /* 폰트 크기 (예: 24px 상당,원하는 크기로 조절 가능) */
  color: rgb(183, 38, 84); /* 폰트 색상 (예: 구글 블루 색상,원하는 색상코드 입력) */
  font-family: var(--heading);
}

.card-subtitle {
  margin-top: -10px !important;
  font-style: italic;
}

.card-subtitle-list {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  list-style: disc;
}

.card-subtitle-list li {
  margin: 0.1rem 0;
  line-height: 1.3;
}

/* 반응형 처리: 화면이 좁아지면 다시 위아래(1컬럼)로 배치 */
@media (max-width: 768px) {
  .card {
    flex-direction: column;
    align-items: stretch;
  }
  .card .card-image {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* 1. 카드가 살짝 위로 떠오르고 은은한 그림자가 생기는 효과 */
.card:hover {
  transform: translateY(-5px); /* 위로 5px 이동 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* 부드러운 그림자 생성 */
}

/* 2. 이미지 영역 안에서 이미지만 부드럽게 살짝 확대되는 효과 (돋보기 효과) */
.card:hover .card-image img {
  transform: scale(1.05); /* 5% 확대 */
}

/* 3. 카드의 아무 곳에나 마우스를 올려도 타이틀 색상이 강조되는 효과 */
.card:hover .card-text .card-title {
  color: rgb(183, 38, 84); /* 마우스를 올렸을 때 더 짙고 신뢰감 주는 블루로 변경 */
  text-decoration: none; /* 밑줄이 생기면 지저분할 수 있으므로 제거 */
}

/*# sourceMappingURL=card.css.map */