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

:root {
    /* 기본 크기 변수 정의
==================== */
    --icon-size-xs: 14px; /* 아주 작은 크기 */
    --icon-size-sm: 16px; /* 작은 크기 */
    --icon-size-md: 20px; /* 중간 크기 */
    --icon-size-lg: 24px; /* 큰 크기 */
    --icon-size-xl: 32px; /* 아주 큰 크기 */
    --icon-size-xxl: 40px; /* 아주 큰 크기 */
}

/* 1. 기본 아이콘 설정
==================== */
.icon {
    /*display: inline-block;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;

    cursor: pointer;
}



/* 2. 버튼 아이콘
==================== */

/* Scroll Top */
.icon-scroll-top{
    background-image: url('/static/image/svg/icon-scroll-top.svg');
}

/* 쪽지 아이콘 */
.icon-msg {
    background-image: url('/static/image/navibar/note_gray.png');
}

/* 3줄 아이콘 */
.icon-three_line {
    background-image: url('/static/image/navibar/three_line.svg');
    /*background-image: url('/static/image/navibar/three_line.png');*/
}

/* 메세지 없음 아이콘 */
.icon-no_msg {
    background-image: url('/static/image/navibar/no_message_icon.svg');
}

/* 메세지 있음 아이콘 */
.icon-new_msg {
    background-image: url('/static/image/navibar/new_message_icon.svg');
}

/* 하트 아이콘 */
.icon-heart,
.pickBtn{
    background-image: url('/static/image/svg/icon-heart-line.svg');
}

.icon-full_heart,
.pickBtn.pickOn{
    background-image: url('/static/image/svg/icon-heart-solid.svg');
}

/* 삭제 아이콘 */
.icon-delete {
    background-image: url('/static/image/web/delete.png');
}
.icon-gray-delete{
    background-image: url('/static/image/svg/icon-gray-delete.svg');
}

/* 수정 아이콘 */
.icon-update {
    background-image: url('/static/image/web/update.png');
}
.icon-pink-edit{
    background-image: url('/static/image/svg/icon-registration.svg');
}

/* 자물쇠 아이콘 */
.icon-lock {
    background-image: url('/static/image/svg/icon-lock.svg');
}


/* 체크 아이콘 */
.icon-check {
    background-image: url('/static/image/svg/textCheck_off.svg');
}

.icon-check.active {
    background-image: url('/static/image/svg/textCheck_on.svg');
}


/* 체크 박스 아이콘 */
.icon-checkbox {
    background-image: url('/static/image/web_v2/tick-square_off.png');
}

.icon-checkbox.active {
    background-image: url('/static/image/web_v2/tick-square_on.png');
}

.icon-write_alba {
    background-image: url('/static/image/write_alba_only.png');
}

/* 동그라미 안 체크 아이콘 */
.icon-check-round {
    background-image: url('/static/image/svg/icon-check-off.svg');
}

.icon-check-round.active {
    background-image: url('/static/image/svg/icon-check-on.svg');
}

.icon-circle-pink-del{
    background-image: url('/static/image/svg/icon-circle-pink-del.svg');
}

/* 필터 초기화 아이콘 */
.icon-reset{
    background-image: url('/static/image/svg/icon-rotate.svg');
}

/* select down arrow */
select{
    background-image: url('/static/image/svg/icon-select-down-gray.svg');
}

/* viewBox */
.viewBox .viewCount {
    background-image: url("../image/svg/icon-eye.svg");
}
.viewBox .comViewCount {
    background-image: url("../image/svg/icon-company.svg");
    background-size: auto 12px;
}
.viewBox .pickCount {
    background-image: url("../image/svg/icon-heart-line.svg");
}

/* 검색 아이콘 */
.icon-search,
.search-btn{
    background-image: url('../../static/image/svg/icon-search.svg');
}

/* pagination */
.page .leftPage {
    background-image: url("../../static/image/svg/icon-page-prev.svg");
}

.page .rightPage {
    background-image: url("../../static/image/svg/icon-page-next.svg");
}

.page .firstPage,
.page .leftPage10 {
    background-image: url("../../static/image/svg/icon-page-first.svg");
}
.page .lastPage,
.page .rightPage10 {
    background-image: url("../../static/image/svg/icon-page-end.svg");
}

.icon-filter-label-close,
.icon-close{
    background-image: url("../../static/image/svg/icon-filter-label-close.svg");
}
.icon-close-w{
    background-image: url("../../static/image/svg/icon-close-white.svg");
}

/* 프로필 상세 아이콘 */
.icon-circle-message{
    background-image: url("../../static/image/svg/icon-circle-message.svg");
}
.icon-circle-edit{
    background-image: url("../../static/image/svg/icon-circle-edit.svg");
}
.icon-circle-delete{
    background-image: url("../../static/image/svg/icon-circle-delete.svg");
}
.icon-circle-print{
    background-image: url("../../static/image/svg/icon-circle-print.svg");
}
.icon-circle-share{
    background-image: url("../../static/image/svg/icon-circle-share.svg");
}

.icon-instagram{
    background-image: url("../../static/image/svg/icon-instagram.svg");
}
.icon-youtube{
    background-image: url("../../static/image/svg/icon-youtube.svg");
}

/* swiper */
.icon-swiper-prev{
    background-image: url("../../static/image/svg/icon-swiper-prev.svg");
}
.icon-swiper-next{
    background-image: url("../../static/image/svg/icon-swiper-next.svg");
}


/* 메인 서브 링크 아이콘 */
.icon-sub-profile{
    background-image: url("../../static/image/svg/icon-sub-profile.svg");
    width: 77.907px;
}
.icon-sub-albapick{
    background-image: url("../../static/image/svg/icon-sub-albapick.svg");
    width: 45.727px;
}
.icon-sub-albapick-match{
    background-image: url("../../static/image/svg/icon-sub-albapick-match.svg");
    width: 50px;
}
.icon-sub-audition{
    background-image: url("../../static/image/svg/icon-sub-audition.svg");
    width: 65.431px;
}
.icon-sub-notice{
    background-image: url("../../static/image/svg/icon-sub-notice.svg");
    width: 46px;
}
.icon-sub-albapickview{
    background-image: url("../../static/image/svg/icon-sub-albapickview.svg");
    width: 46px;
}
.icon-sub-artistprofile{
    background-image: url("../../static/image/svg/icon-sub-artistprofile.svg");
    width: 46.127px;
}
.icon-sub-stepprofile{
    background-image: url("../../static/image/svg/icon-sub-stepprofile.svg");
    width: 57.142px;
}
.icon-sub-auditionview{
    background-image: url("../../static/image/svg/icon-sub-auditionview.svg");
    width: 70.865px;
}
.icon-sub-casting-request{
    background-image: url("../../static/image/svg/icon-sub-casting-request.svg");
    width: 59.518px;
}

/* 다운로드 아이콘 */
.icon-download {
    background-image: url("../../static/image/svg/icon-download.svg");
}

.icon-person {
    background-image: url("../image/svg/icon-person.svg");
}

.icon-alba-arrow-right{
    background-image: url("../../static/image/svg/icon-alba-arrow-right.svg");
    width: 19px;
    height: 7.363px;
}



/* 3. 상태 아이콘
==================== */

/* 4. 크기 변형
==================== */

/* 2. 크기별 클래스
==================== */
.icon-xs {  /* 14px */
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
}

.icon-sm {  /* 16px */
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.icon-md {  /* 20px - 기본 크기 */
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.icon-lg {  /* 24px */
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.icon-xl {  /* 32px */
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
}


.icon-xxl {  /* 36px */
    width: var(--icon-size-xxl);
    height: var(--icon-size-xxl);
}

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