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

: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; /* 아주 큰 크기 */
    --icon-size-6xl: 80px; /* 아주 큰 크기 */
}

/* 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-scrap,
.scrapBtn {
    background-image: url('/static/image/svg/icon-scrap.svg');
}

.icon-scrap-solid,
.scrapped {
    background-image: url('/static/image/svg/icon-scrap-solid.svg');
}

.icon-scrap-circle {
    background-image: url("../../static/image/svg/icon-scrap-circle.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-trashbin-red {
    background-image: url('/static/image/svg/icon-trashbin-red-.svg');
}


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

.icon-update-folder {
    background-image: url('/static/image/svg/icon-update-folder.svg');
}

.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');
}

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

.three-dot-column {
    background-image: url('/static/image/svg/icon-three-dot-column.svg');
}

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

.icon-folder-gray {
    background-image: url('/static/image/svg/icon-folder-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');
}

.icon-search-gray {
    background-image: url('../../static/image/svg/icon-search-gray.svg');
}


/* 폴더 아이콘*/
.folder-plus-icon {
    background-image: url('../../static/image/svg/icon-folder-plus.svg');
}

.add-white-icon {
    background-image: url('../../static/image/svg/icon-add-white.svg');
}

.round-x-white-icon {
    background-image: url('../../static/image/svg/icon-round-x-white.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-close-b {
    background-image: url("../../static/image/svg/icon-close-black.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;
}

/* 주의표시 아이콘 */
.icon-caution {
    background-image: url('/static/image/svg/icon-caution.svg');
}


/* 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);
}

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

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