@charset "UTF-8";
@font-face {
    font-family: "GmarketSansMedium";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
html {
    overflow-x: hidden;
}

body {
    font-family: "GmarketSansMedium", Helvetica, sans-serif !important;
    font-size: 0.85rem;
    overflow-x: hidden;
}

/* font-size utilities: 10px ~ 20px */
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-19 { font-size: 19px !important; }
.fs-20 { font-size: 20px !important; }

.text-gray-400 {
    color: #b4b4b4;
}
.text-gray-600 {
    color: #676767;
}
#content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 뷰포트의 높이에 맞춤 */
    width: 100%;
    background-color: #f5f6f8;
}

#content-wrapper .section-wrapper {
	padding:10px;
    width: 100%;
    max-width:550px;
}

.card {
    border-radius:20px;
}

.divider-text{
    position: relative;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #8392a5;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .5px;
    margin: 15px 0;
}

.divider-text::before, .divider-text::after {
content: '';
display: block;
flex: 1;
height: 1px;
background-color: #e5e9f2;
}
.divider-text::before, .divider-text::after {
content: '';
display: block;
flex: 1;
height: 1px;
background-color: #e5e9f2;
}

.error{
    color: #ff0000;
    font-size:13px;
}

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

/* 공통 버튼 스타일 */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background-image .25s ease, color .25s ease;
}
.social-icon-wrapper { margin-right: .5rem; }

/* ===== 브랜드별 ===== */

/* Google */
.social-btn.s-google {
  background-color: #4285F4; /* 단색 기본값 */
  background-image: linear-gradient(135deg, #4B74F3 0%, #1A59FF 100%);
}
.social-btn.s-google:hover {
  background-image: none; /* 단색만 보이게 */
}

/* Kakao */
.social-btn.s-kakao {
  background-color: #FEE500;
  background-image: linear-gradient(135deg, #FEE500 0%, #F7C600 100%);
  color: #111;
}
.social-btn.s-kakao:hover {
  background-image: none;
  color: #111;
}

/* Naver */
.social-btn.s-naver {
  background-color: #03C75A;
  background-image: linear-gradient(135deg, #03C75A 0%, #00B45A 100%);
}
.social-btn.s-naver:hover {
  background-image: none;
}

/* Microsoft */
.social-btn.s-micro {
  background-color: #00A4EF;
  background-image: linear-gradient(135deg, #00A4EF 0%, #0078D4 100%);
}
.social-btn.s-micro:hover {
  background-image: none;
}

.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/img/social_google.png");
    }

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

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

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