@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

/*Noto Sans KR import 하는거*/
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}


/* <link rel="stylesheet" href="/public/css/common/common.css"> */

/*폰트 이걸로 갑시다?*/
body {
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.fs-7 {
    font-size: 0.9em;
}

.fs-8 {
    font-size: 0.8em;
}


/*구글 머테리얼 아이콘에 적용하면 색상을 채워줌*/
.fill-on {
    font-variation-settings: 'FILL' 1;
}

/*구글 머테리얼 아이콘에 사용하는 클래스 둥근 배경을 만들어줌 border랑 같이 써야함*/
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em; /* 원하는 크기로 변경 가능 */
    height: 1em; /* 원하는 크기로 변경 가능 */
    border-radius: 50%; /* 둥근 원형을 만들기 위해 50%로 설정 */
}

/*프로필 이미지를 둥근 모양으로 만들어줌*/
.profile-image img {
    aspect-ratio: 1/1;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

/*달력과 관련된 css*/
/*지정 할 수 없는 날짜 회색으로 바꾸는 css*/
.disabled {
    color: #cccccc !important;
}
/*범위 내에 기간 배경 주는 css*/
.selected {
    background-color: #d0e7ff;
}
/*선택한 날짜 배경주는 css*/
.choiced {
    color: white !important;
    background-color: #1769ff;
}

.choiced-city {
    border-bottom: #041d7a solid 4px;
}

.choiced-room-type {
    border-bottom: #041d7a solid 4px;
}

/*none-scroll 클래스의 스크롤 바를 없앰*/
.none-scroll::-webkit-scrollbar {
    display: none;
}

/*6줄 truncate*/
.six-line-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; /* 원하는 줄 수 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 6); /* 대략적으로 줄 높이를 계산하여 설정 */
    min-height: calc(1.5em * 6); /* 최소 높이 설정 */
    line-height: 1.5; /* 줄 높이 */
}

/*5줄 truncate*/
.five-line-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* 원하는 줄 수 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 5); /* 대략적으로 줄 높이를 계산하여 설정 */
    min-height: calc(1.5em * 5); /* 최소 높이 설정 */
    line-height: 1.5; /* 줄 높이 */
}

/*4줄 truncate*/
.four-line-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 원하는 줄 수 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 4); /* 대략적으로 줄 높이를 계산하여 설정 */
    min-height: calc(1.5em * 4); /* 최소 높이 설정 */
    line-height: 1.5; /* 줄 높이 */
}

/*3줄 truncate*/
.three-line-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 원하는 줄 수 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.1em * 3); /* 대략적으로 줄 높이를 계산하여 설정 */
    min-height: calc(1.1em * 3); /* 최소 높이 설정 */
    line-height: 1.1; /* 줄 높이 */
}

/*2줄 truncate*/
.two-line-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 원하는 줄 수 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 2); /* 대략적으로 줄 높이를 계산하여 설정 */
    min-height: calc(1.5em * 2); /* 최소 높이 설정 */
    line-height: 1.5; /* 줄 높이 */
}

/* 테마 컬러 */
.bg-primary-0 {
    background-color: #ecf3ff;
}
.bg-primary-1 {
    background-color: #d0e7ff;
}
.bg-primary-2 {
    background-color: #a2cdff;
}
.bg-primary-3 {
    background-color: #73afff;
}
.bg-primary-4 {
    background-color: #5194ff;
}
.bg-primary-5 {
    background-color: #1769ff;
}
.bg-primary-6 {
    background-color: #1051db;
}
.bg-primary-7 {
    background-color: #0b3bb7;
}
.bg-primary-8 {
    background-color: #072993;
}
.bg-primary-9 {
    background-color: #041d7a;
}
.text-primary-0 {
    color: #ecf3ff;
}
.text-primary-1 {
    color: #d0e7ff;
}
.text-primary-2 {
    color: #a2cdff;
}
.text-primary-3 {
    color: #73afff;
}
.text-primary-4 {
    color: #5194ff;
}
.text-primary-5 {
    color: #1769ff;
}
.text-primary-6 {
    color: #1051db;
}
.text-primary-7 {
    color: #0b3bb7;
}
.text-primary-8 {
    color: #072993;
}
.text-primary-9 {
    color: #041d7a;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1769ff;
    --bs-btn-border-color: #1769ff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1769ff;
    --bs-btn-hover-border-color: #1769ff;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1769ff;
    --bs-btn-active-border-color: #1769ff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1769ff;
    --bs-btn-disabled-border-color: #5194ff;
}
.btn-outline-primary {
    --bs-btn-color: #1769ff;
    --bs-btn-border-color: #1769ff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1769ff;
    --bs-btn-hover-border-color: #1769ff;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1769ff;
    --bs-btn-active-border-color: #1769ff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1769ff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1769ff;
    --bs-gradient: none;
}
.bg-secondary-0 {
    background-color: #ffffff;
}
.bg-secondary-1 {
    background-color: #f8f8f8;
}
.bg-secondary-2 {
    background-color: #f3f3f3;
}
.bg-secondary-3 {
    background-color: #eeeeee;
}
.bg-secondary-4 {
    background-color: #e8e8e8;
}
.bg-secondary-5 {
    background-color: #dddddd;
}
.bg-secondary-6 {
    background-color: #cccccc;
}
.bg-secondary-7 {
    background-color: #999999;
}
.bg-secondary-8 {
    background-color: #666666;
}
.bg-secondary-9 {
    background-color: #1c1c1e;
}
.text-secondary-0 {
    color: #ffffff;
}
.text-secondary-1 {
    color: #f8f8f8;
}
.text-secondary-2 {
    color: #f3f3f3;
}
.text-secondary-3 {
    color: #eeeeee;
}
.text-secondary-4 {
    color: #e8e8e8;
}
.text-secondary-5 {
    color: #dddddd;
}
.text-secondary-6 {
    color: #cccccc;
}
.text-secondary-7 {
    color: #999999;
}
.text-secondary-8 {
    color: #666666;
}
.text-secondary-9 {
    color: #1c1c1e;
}
.text-danger-0 {
    color: #ffefee;
}
.text-danger-1 {
    color: #ffe4d5;
}
.text-danger-2 {
    color: #ffc2ab;
}
.text-danger-3 {
    color: #ff9981;
}
.text-danger-4 {
    color: #ff7262;
}
.text-danger-5 {
    color: #ff322e;
}
.text-danger-6 {
    color: #db212d;
}
.text-danger-7 {
    color: #b7172f;
}
.text-danger-8 {
    color: #930e2e;
}
.text-danger-9 {
    color: #7a082d;
}
.text-success-0 {
    color: #e6f7e6;
}
.text-success-1 {
    color: #c3e6c3;
}
.text-success-2 {
    color: #9fd69f;
}
.text-success-3 {
    color: #7bc77b;
}
.text-success-4 {
    color: #57b757;
}
.text-success-5 {
    color: #33a733;
}
.text-success-6 {
    color: #2d932d;
}
.text-success-7 {
    color: #267e26;
}
.text-success-8 {
    color: #206a20;
}
.text-success-9 {
    color: #195519;
}
.bg-danger-0 {
    background-color: #ffefee;
}
.bg-danger-1 {
    background-color: #ffe4d5;
}
.bg-danger-2 {
    background-color: #ffc2ab;
}
.bg-danger-3 {
    background-color: #ff9981;
}
.bg-danger-4 {
    background-color: #ff7262;
}
.bg-danger-5 {
    background-color: #ff322e;
}
.bg-danger-6 {
    background-color: #db212d;
}
.bg-danger-7 {
    background-color: #b7172f;
}
.bg-danger-8 {
    background-color: #930e2e;
}
.bg-danger-9 {
    background-color: #7a082d;
}
.text-purple-0 {
    color: #f6f0fd;
}
.text-purple-1 {
    color: #f0d9fd;
}
.text-purple-2 {
    color: #dfb4fc;
}
.text-purple-3 {
    color: #c88ef7;
}
.text-purple-4 {
    color: #b070f0;
}
.text-purple-5 {
    color: #8e43e7;
}
.text-purple-6 {
    color: #6e30c6;
}
.text-purple-7 {
    color: #5221a6;
}
.text-purple-8 {
    color: #391585;
}
.text-purple-9 {
    color: #270c6e;
}
.bg-purple-0 {
    background-color: #f6f0fd;
}
.bg-purple-1 {
    background-color: #f0d9fd;
}
.bg-purple-2 {
    background-color: #dfb4fc;
}
.bg-purple-3 {
    background-color: #c88ef7;
}
.bg-purple-4 {
    background-color: #b070f0;
}
.bg-purple-5 {
    background-color: #8e43e7;
}
.bg-purple-6 {
    background-color: #6e30c6;
}
.bg-purple-7 {
    background-color: #5221a6;
}
.bg-purple-8 {
    background-color: #391585;
}
.bg-purple-9 {
    background-color: #270c6e;
}
.text-warning-1 {
    color: #ffa701;
}

/*히트맵에서 쓸거에용*/
.data-none {
    background-color: #FFFFFF;
}

.data-under-100 {
    background-color: rgba(220, 234, 244, 0.7)
}

.data-under-200 {
    background-color: rgba(184, 213, 232, 0.7)
}

.data-under-300 {
    background-color: rgba(148, 193, 220, 0.7)
}

.data-under-400 {
    background-color: rgba(112, 173, 208, 0.7)
}

.data-over-400 {
    background-color: rgba(92, 157, 203, 0.7)
}