/* /css/common-icons.css */


/* =================================================================== */
/*  공통 아이콘 스타일 */
/* =================================================================== */


/* ❌ 닫기 아이콘 */
.icon-close {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  vertical-align: middle;
}
/* text-muted 보다 더 연한색으로 */
.icon-muted {
  color: #999;         /* 원하는 회색 */
  opacity: 0.8;        /* 살짝 연하게 */
  vertical-align: -2px;
}

/* 위치 아이콘을 부트스트랩보다 이쁘게 */
.icon-location {
  display: inline-block;
  width: 13px;   /* 아이콘 크기 */
  height: 13px;
  background: url("/assets/icons/location.svg") no-repeat center center;
  background-size: contain; /* 이미지 비율 유지 */
  vertical-align: -2px; /* 텍스트와 높이 맞추기 (조절 가능) */
  margin-right: -3px;
  opacity: 0.6; /* 전체 투명도 낮추기 */
}

.icon-image {
  display: inline-block;
  width: 16px;   /* 아이콘 크기 */
  height: 16px;
  background: url("/assets/icons/image.svg") no-repeat center center;
  background-size: contain; /* 이미지 비율 유지 */
  vertical-align: 0px; /* 텍스트와 높이 맞추기 (조절 가능) */
  margin-right: 0px;
  opacity: 0.6; /* 전체 투명도 낮추기 */
}






/* ✅ 상단 모든페이지 헤더용 아이콘 버튼 (예: ⋮, 전화 아이콘 등) */
.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #444;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.icon-button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #000 !important;
}
.icon-button:active {
  background-color: rgba(0,0,0,0.05); /* ✅ 카톡 같은 은은한 회색 */
}