/* ------------------------------------
   기본
   section : 페이지링크로 이동하였을 때 위에 메뉴때문에 가려져서 100px의 여유를 준다.
------------------------------------- */
html {
    overflow-x: hidden;
}

@media (max-width: 575px) {
  .container-sm, .container {
    max-width: 100%;
  }
}

section {
    scroll-margin-top: 100px;
}

img {
    max-width: 100%;
}

video {
    width: 100%;
}

/* 숫자 입력에서 스핀 버튼 제거  */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ------------------------------------
   데이터 없음 보여주는 카드
------------------------------------- */
.card-empty {
    grid-column: 1 / -1; /* 그리드 전체 너비를 차지 */
    background-color: #f8f9fa;
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    border-radius: 0.5rem;
}

/* ------------------------------------
  쇼핑
------------------------------------- */

.btn-red {
    background-color: #e2626b !important;
    color: #fff !important;
}


/* 소셜로그인 디자인 */

.social-btn {
    display: flex;
    align-items: center; /* 세로 방향 중앙 정렬 */
    justify-content: center; /* 가로 방향 중앙 정렬 */
    width: 100%;
    border-radius: 5px;
    background-color: #fff; /* 배경색 */
    color: #000; /* 텍스트 색상 */
    border: 1px solid #e0e0e0; /* 테두리 */
    cursor: pointer;
    text-decoration: none; /* 텍스트 밑줄 제거 */
    padding: 10px 15px; /* 패딩으로 버튼 내부 공간을 조정 */
    transition: background-color 0.3s; /* 0.3초 동안 배경색 변경 효과 */
    text-align: left; /* 텍스트를 왼쪽으로 정렬합니다. */
}
.social-btn:hover {
    color: #fff;
}
.social-btn.s-google:hover {
    background: #4175df;
}
.social-btn.s-naver:hover {
    background: #03c75a;
}
.social-btn.s-micro:hover {
    background: #00a4ef;
}
.social-btn.s-kakao:hover {
    background: #d9ca11;
}

.social-group {
    width: 155px;
    display: flex;
}

.social-icon-wrapper {
    flex-shrink: 0; /* 아이콘이 축소되지 않도록 설정합니다. */
    display: flex;
    justify-content: center; /* 가로 방향 중앙 정렬 */
    align-items: center; /* 세로 방향 중앙 정렬 */
    margin-right: 10px; /* 아이콘과 텍스트 사이의 여백 */
    width: 20px;
    height: 20px;
    background-size: cover;
}
.social-google-bg {
    background-image: url("/assets/images/social_google.png");
}

.social-naver-bg {
    background-image: url("/assets/images/social_naver.png");
}

.social-kakao-bg {
    background-image: url("/assets/images/social_kakao.png");
}

.social-icon {
    width: 25px; /* 아이콘 크기 */
    height: 25px; /* 아이콘 크기 */
}

footer .widget img {
    max-width: 200px;
    max-height: 50px;
}

/* 카카오톡 아이콘용 추가 스타일 */
.share-dropdown .dropdown-menu .dropdown-item[data-id="kakaotalk"] svg {
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

/* ------------------------------------
   H1~H6 까지 이미지 배경 글씨를 만들기 위한 클래스(2025.07.03)
------------------------------------- */ 
.image-mask {
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: cover;
	background-position: center center !important;
    background-image:url(/assets/photos/배경/CK_psxtg0871956.jpg);
}

/* ------------------------------------
   무료사용자용 배너
------------------------------------- */ 
.tibo-banner {
  position: fixed;
  top: 0;
  width: 100%;
  height: 20px;
  background-color: white;
  color: black;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  opacity:0.8;
}

.tibo-banner a {
  color: inherit;
  text-decoration: none;
  font-size:12px;
  color:#888;
}