.ui-header {
    display: flex;
    flex-direction: column;
    row-gap: 0.8rem;
}

.ui-heading {
    font-size: var(--text-7xl);
    line-height: 1.4;
    font-family: var(--font-en);
    letter-spacing: -0.01em;
    color: var(--primary);
}

.ui-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    padding:0 1.4732rem;
    height: 1.8em;
    font-size: var(--text-2xl);
    font-weight: 600;
    background-color: var(--primary);
    color: #fff;
    border-radius:2rem;
}

/* =====================================================
   점 텍스트
   ===================================================== */

.ui-dot {
    position: relative; 
    padding-left: 0.75em;
    color: var(--color);
    --color : var(--dark)
}

.ui-dot:before {
    content:'';
    position: absolute;    
    top: 0.5em;
    left: 0;
    width: 0.334em;
    height: 0.334em;
    border-radius:50%;    
    background-color: var(--color);
}

@media(hover:hover){
    .ui-dot:hover {
        --color : var(--primary)
    }
}

/* =====================================================
   필드
   ===================================================== */
.ui-input {
    display: flex;
    align-items: center;
    height: 3.556em;
    padding: .75em 0.6667em;
    border: 1px solid var(--gray-400);
    border-radius: 0.5rem;
    font-size: var(--text-base);
    background-color: #fff;
    font-size: var(--text-xl);
    transition: all 0.2s;
}

.ui-input--date {
    width: 39.7591%;
    cursor: pointer;
}

.ui-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: var(--shadow-3);
}

.ui-input:read-only {
    border-color: var(--gray-200);
    box-shadow:none;
}

.ui-input:disabled {
    background: var(--gray-100);
    color: var(--gray-500);
}


.ui-input::placeholder {
    color: var(--gray-400);
}

@media (max-width: 1024px) {
    .ui-input--date {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .ui-input--date {
        width: 75%;
    }
}

@media (max-width: 500px) {
    .ui-input--date {
        width: 100%;
    }
}

/* =====================================================
   필드
   ===================================================== */
.ui-date {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.75rem;
    padding: 0.5rem 3.5rem 0.5rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.25rem;
    font-size: var(--text-base);
    background-color: #fff;
    cursor:pointer;
    transition: all 0.2s;
    background: url('../img/icon/calender_icon_default.svg') no-repeat right 1rem center / 1.5rem;
}

.ui-date:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: var(--shadow-3);
}

/* =====================================================
   체크박스
   ===================================================== */

.ui-check {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;  
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--gray-600);
  border-radius: 0.5rem;
  transition: 0.3s;  
  position: relative;
  cursor: inherit;
  flex-shrink: 0;
}

.ui-check:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.ui-check:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 0.35rem;
  height: 0.6rem;
  border: 2px solid white;
  border-top: none;
  border-left: none;
}

.ui-check:disabled {
  background: var(--gray-100);
  border-color: var(--gray-300);
  cursor: not-allowed;
}


/* =====================================================
   버튼
   ===================================================== */
.ui-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.25rem;
    font-size: var(--text-lg);
    font-weight: 600;
    min-width: 10.4445em;
    min-height: 3.1667em;
    padding: 0.25em 0.5em;;
    background-color: var(--gray-200);
    border-radius:500px;
    color: var(--gray-600);
    transition: 0.3s;
}

.ui-btn--outline {
    border:1px solid var(--gray-200);
    background-color: #fff;
}

.ui-btn--opacity {
    background-color: #e5e5e560;
    backdrop-filter: blur(8px);
}

@media(hover:hover){
    .ui-btn:hover {
        background-color: var(--primary);
        color: #fff;
    }
}

.ui-btn--primary {
    background-color: var(--primary);
    color: #fff;
}

@media(hover:hover){
    .ui-btn--primary:hover {
        background-color: var(--secondary);
        color: #fff;
    }
}

.ui-btn--ghost {
    background-color: #f9f9f9;
}


.ui-btn2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.625rem;
    max-width: 17.5rem;
    width: 100%;
    font-size: var(--text-xl);
    font-weight: 700;
    min-height: 3.4rem;
    border-radius: 60px;
    border:1px solid transparent;    
    transition: 0.3s;
}

.ui-btn2--primary {
    color: var(--primary);
    border-color : var(--primary)
}

.ui-btn2--secondary {
    color: var(--secondary);
    border-color : var(--secondary)
}

.ui-btn2--third {
    color: var(--third);
    border-color : var(--third)
}

.ui-btn2--white {
    color: #fff;
    border-color : #fff
}

.ui-btn2:after {
    content:'';
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: 0.3s;
}

.ui-btn2--primary:after {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

.ui-btn2--secondary:after {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.ui-btn2--third:after {
    background-image: url(../img/icon/hamburger_icon_third.svg);
}

.ui-btn2--white:after {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.ui-btn2--third:hover {
    border-color:#fff;
    background-color: #fff;
    color: var(--primary);    
}

.ui-btn2--third:hover:after {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

@media(hover:hover){
    .ui-btn2--primary:hover {
        background-color: var(--primary);
        color: #fff;
    }

    .ui-btn2--primary:hover:after {
        background-image: url(../img/icon/hamburger_icon_white.svg);
    }
}


/* =====================================================
   텍스트 에어리어
   ===================================================== */

.ui-textarea {
    display: flex;
    align-items: center;
    height: 8em;
    padding: .75em 0.6667em;
    border: 1px solid var(--gray-400);
    border-radius: 0.5rem;
    font-size: var(--text-base);
    background-color: #fff;
    font-size: var(--text-xl);
    transition: all 0.2s;
}

.ui-textarea--terms {
    height: 20rem;
}

.ui-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232, 37, 40, 0.1);
}

.ui-textarea::placeholder {
    color: var(--gray-400);
}

.ui-textarea:read-only {
	border-color: var(--gray-400);
	box-shadow:none;
}

/* =====================================================
   라디오
   ===================================================== */

.ui-radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--gray-500);
    border-radius: 50%;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
    cursor: inherit;
}

.ui-radio:checked {
    border-color: var(--primary);
}

.ui-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.625rem;
    background: var(--primary);
    border-radius: 50%;
}

.ui-radio:disabled {
    background: var(--gray-100);
    border-color: var(--gray-300);
    cursor: not-allowed;
}

/* =====================================================
   셀렉트
   ===================================================== */

.ui-select {
    display: flex;
    align-items: center;
    height: 3.556em;
    padding: .75em 0.6667em;
    border: 1px solid var(--gray-400);
    border-radius: 0.5rem;
    font-size: var(--text-base);
    background-color: #fff;
    font-size: var(--text-xl);
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('../img/icon/arrow_down_icon_default.svg') no-repeat right 1rem center / 1.5rem #fff;
}

.ui-select--auto {
    width: auto;
}

.ui-select:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-3);
}

/* =====================================================
   라디오 / 체크박스 부모 label
   ===================================================== */

.ui-choice {
    max-width:100%;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
}

.ui-choice--check {
    
}

.ui-choice--radio {

}

.ui-choice:hover .ui-check,
.ui-choice:hover .ui-radio {
  border-color: var(--primary);
}

/* =====================================================
   뱃지
   ===================================================== */
.ui-badge {
    display: inline-flex;
    padding:0.5rem 1rem;
    border-radius:0.25rem;
}

.ui-badge--crt {
    background-color: var(--primary);
    color: #fff;
}

.ui-badge--progress {
    background-color: var(--primary);
    color: #fff;
}

.ui-badge--done {
    background-color: var(--gray-200);
    color: #fff;
}

/* =====================================================
   필수 사항
   ===================================================== */
.ui-required {
    color: var(--alert);
}

/* =====================================================
   에러 메세지
   ===================================================== */

.ui-error {
    font-size: var(--text-sm);
    color:var(--alert); 
    padding-top: 0.25rem;
}


/* =====================================================
   아이콘 시스템 - 기본 설정
   ===================================================== */

[data-icon] {
    position: relative;
    display: inline-block;
    min-width: var(--icon-size);
    min-height: var(--icon-size);
    transition: 0.3s;
    cursor: pointer;
    vertical-align: middle;
    --icon-size: var(--text-base);
}

[data-icon]:before,
[data-icon]:after {
    position: absolute;
    inset: 0;
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all 0.4s;
}

[data-icon]:after {
    opacity: 0;
}


/* 아이콘 - 사이즈 변형 */
[data-icon*="-5xs"] {
    --icon-size: calc(var(--text-base) * 0.25);
}

[data-icon*="-4xs"] {
    --icon-size: calc(var(--text-base) * 0.375);
}

[data-icon*="-3xs"] {
    --icon-size: calc(var(--text-base) * 0.5);
}

[data-icon*="-2xs"] {
    --icon-size: calc(var(--text-base) * 0.625);
}

[data-icon*="-xs"] {
    --icon-size: calc(var(--text-base) * 0.75);
}

[data-icon*="-sm"] {
    --icon-size: calc(var(--text-base) * 0.875);
}

[data-icon*="-lg"] {
    --icon-size: calc(var(--text-base) * 1.125);
}

[data-icon*="-xl"] {
    --icon-size: calc(var(--text-base) * 1.25);
}

[data-icon*="-2xl"] {
    --icon-size: calc(var(--text-base) * 1.375);
}

[data-icon*="-3xl"] {
    --icon-size: calc(var(--text-base) * 1.5);
}

[data-icon*="-4xl"] {
    --icon-size: calc(var(--text-base) * 1.75);
}

[data-icon*="-5xl"] {
    --icon-size: calc(var(--text-base) * 2);
}

[data-icon*="-6xl"] {
    --icon-size: calc(var(--text-base) * 2.25);
}

[data-icon*="-7xl"] {
    --icon-size: calc(var(--text-base) * 2.5);
}

[data-icon*="-8xl"] {
    --icon-size: calc(var(--text-base) * 2.75);
}

[data-icon*="-9xl"] {
    --icon-size: calc(var(--text-base) * 3);
}

[data-icon*="-10xl"] {
    --icon-size: calc(var(--text-base) * 3.25);
}


/* 아이콘 - 확장 상태 */
[aria-expanded="true"] [data-icon]:before {
    opacity: 0;
}

[aria-expanded="true"] [data-icon]:after {
    opacity: 1;
}


/* =====================================================
   아이콘 시스템 - 화살표 왼쪽
   ===================================================== */

.icon-arr--left[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_left_icon_default.svg);
}

.icon-arr--left[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_left_icon_primary.svg);
}

.icon-arr--left[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_left_icon_default.svg);
}

.icon-arr--left[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_left_icon_white.svg);
}

.icon-arr--left[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_left_icon_primary.svg);
}

.icon-arr--left[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_left_icon_default.svg);
}

.icon-arr--left[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_left_icon_primary.svg);
}

.icon-arr--left[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_left_icon_white.svg);
}

.icon-arr--left[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_left_icon_white.svg);
}

.icon-arr--left[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_left_icon_default.svg);
}

.icon-arr--left[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_left_icon_white.svg);
}

.icon-arr--left[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_left_icon_primary.svg);
}

.icon-arr--left2[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_left_icon2_default.svg);
}

.icon-arr--left2[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_left_icon2_primary.svg);
}

.icon-arr--left2[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_left_icon2_default.svg);
}

.icon-arr--left2[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_left_icon2_white.svg);
}

.icon-arr--left2[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_left_icon2_primary.svg);
}

.icon-arr--left2[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_left_icon2_default.svg);
}

.icon-arr--left2[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_left_icon2_primary.svg);
}

.icon-arr--left2[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_left_icon2_white.svg);
}

.icon-arr--left2[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_left_icon2_white.svg);
}

.icon-arr--left2[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_left_icon2_default.svg);
}

.icon-arr--left2[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_left_icon2_white.svg);
}

.icon-arr--left2[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_left_icon2_primary.svg);
}

/* =====================================================
   아이콘 시스템 - 화살표 오른쪽
   ===================================================== */

.icon-arr--right[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_right_icon_default.svg);
}

.icon-arr--right[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_right_icon_primary.svg);
}

.icon-arr--right[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_right_icon_default.svg);
}

.icon-arr--right[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_right_icon_white.svg);
}

.icon-arr--right[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_right_icon_primary.svg);
}

.icon-arr--right[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_right_icon_default.svg);
}

.icon-arr--right[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_right_icon_primary.svg);
}

.icon-arr--right[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_right_icon_white.svg);
}

.icon-arr--right[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_right_icon_white.svg);
}

.icon-arr--right[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_right_icon_default.svg);
}

.icon-arr--right[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_right_icon_white.svg);
}

.icon-arr--right[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_right_icon_primary.svg);
}

.icon-arr--right2[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_right_icon2_default.svg);
}

.icon-arr--right2[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_right_icon2_primary.svg);
}

.icon-arr--right2[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_right_icon2_default.svg);
}

.icon-arr--right2[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_right_icon2_white.svg);
}

.icon-arr--right2[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_right_icon2_primary.svg);
}

.icon-arr--right2[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_right_icon2_default.svg);
}

.icon-arr--right2[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_right_icon2_primary.svg);
}

.icon-arr--right2[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_right_icon2_white.svg);
}

.icon-arr--right2[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_right_icon2_white.svg);
}

.icon-arr--right2[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_right_icon2_default.svg);
}

.icon-arr--right2[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_right_icon2_white.svg);
}

.icon-arr--right2[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_right_icon2_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 화살표 아래
   ===================================================== */

.icon-arr--down[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_down_icon_default.svg);
}

.icon-arr--down[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_down_icon_primary.svg);
}

.icon-arr--down[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_down_icon_default.svg);
}

.icon-arr--down[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_down_icon_white.svg);
}

.icon-arr--down[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_down_icon_primary.svg);
}

.icon-arr--down[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_down_icon_default.svg);
}

.icon-arr--down[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_down_icon_primary.svg);
}

.icon-arr--down[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_down_icon_white.svg);
}

.icon-arr--down[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_down_icon_white.svg);
}

.icon-arr--down[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_down_icon_default.svg);
}

.icon-arr--down[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_down_icon_white.svg);
}

.icon-arr--down[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_down_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 화살표 위
   ===================================================== */

.icon-arr--up[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_up_icon_default.svg);
}

.icon-arr--up[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_up_icon_primary.svg);
}

.icon-arr--up[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_up_icon_default.svg);
}

.icon-arr--up[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_up_icon_white.svg);
}

.icon-arr--up[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_up_icon_primary.svg);
}

.icon-arr--up[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_up_icon_default.svg);
}

.icon-arr--up[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_up_icon_primary.svg);
}

.icon-arr--up[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_up_icon_white.svg);
}

.icon-arr--up[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_up_icon_white.svg);
}

.icon-arr--up[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_up_icon_default.svg);
}

.icon-arr--up[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_up_icon_white.svg);
}

.icon-arr--up[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_up_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 화살표 처음
   ===================================================== */

.icon-arr--first[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_first_icon_default.svg);
}

.icon-arr--first[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_first_icon_primary.svg);
}

.icon-arr--first[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_first_icon_default.svg);
}

.icon-arr--first[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_first_icon_white.svg);
}

.icon-arr--first[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_first_icon_primary.svg);
}

.icon-arr--first[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_first_icon_default.svg);
}

.icon-arr--first[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_first_icon_primary.svg);
}

.icon-arr--first[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_first_icon_white.svg);
}

.icon-arr--first[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_first_icon_white.svg);
}

.icon-arr--first[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_first_icon_default.svg);
}

.icon-arr--first[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_first_icon_white.svg);
}

.icon-arr--first[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_first_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 화살표 마지막
   ===================================================== */

.icon-arr--last[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/arrow_last_icon_default.svg);
}

.icon-arr--last[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/arrow_last_icon_primary.svg);
}

.icon-arr--last[data-icon^="def-white"]:before {
    background-image: url(../img/icon/arrow_last_icon_default.svg);
}

.icon-arr--last[data-icon^="def-white"]:after {
    background-image: url(../img/icon/arrow_last_icon_white.svg);
}

.icon-arr--last[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/arrow_last_icon_primary.svg);
}

.icon-arr--last[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/arrow_last_icon_default.svg);
}

.icon-arr--last[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/arrow_last_icon_primary.svg);
}

.icon-arr--last[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/arrow_last_icon_white.svg);
}

.icon-arr--last[data-icon^="white-def"]:before {
    background-image: url(../img/icon/arrow_last_icon_white.svg);
}

.icon-arr--last[data-icon^="white-def"]:after {
    background-image: url(../img/icon/arrow_last_icon_default.svg);
}

.icon-arr--last[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/arrow_last_icon_white.svg);
}

.icon-arr--last[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/arrow_last_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 검색
   ===================================================== */

.icon-search[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/search_icon_default.svg);
}

.icon-search[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/search_icon_primary.svg);
}

.icon-search[data-icon^="def-white"]:before {
    background-image: url(../img/icon/search_icon_default.svg);
}

.icon-search[data-icon^="def-white"]:after {
    background-image: url(../img/icon/search_icon_white.svg);
}

.icon-search[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/search_icon_primary.svg);
}

.icon-search[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/search_icon_default.svg);
}

.icon-search[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/search_icon_primary.svg);
}

.icon-search[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/search_icon_white.svg);
}

.icon-search[data-icon^="white-def"]:before {
    background-image: url(../img/icon/search_icon_white.svg);
}

.icon-search[data-icon^="white-def"]:after {
    background-image: url(../img/icon/search_icon_default.svg);
}

.icon-search[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/search_icon_white.svg);
}

.icon-search[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/search_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 홈
   ===================================================== */

.icon-home[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/home_icon_default.svg);
}

.icon-home[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/home_icon_primary.svg);
}

.icon-home[data-icon^="def-white"]:before {
    background-image: url(../img/icon/home_icon_default.svg);
}

.icon-home[data-icon^="def-white"]:after {
    background-image: url(../img/icon/home_icon_white.svg);
}

.icon-home[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/home_icon_primary.svg);
}

.icon-home[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/home_icon_default.svg);
}

.icon-home[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/home_icon_primary.svg);
}

.icon-home[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/home_icon_white.svg);
}

.icon-home[data-icon^="white-def"]:before {
    background-image: url(../img/icon/home_icon_white.svg);
}

.icon-home[data-icon^="white-def"]:after {
    background-image: url(../img/icon/home_icon_default.svg);
}

.icon-home[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/home_icon_white.svg);
}

.icon-home[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/home_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 플러스
   ===================================================== */

.icon-plus[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/plus_icon_default.svg);
}

.icon-plus[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/plus_icon_primary.svg);
}

.icon-plus[data-icon^="def-white"]:before {
    background-image: url(../img/icon/plus_icon_default.svg);
}

.icon-plus[data-icon^="def-white"]:after {
    background-image: url(../img/icon/plus_icon_white.svg);
}

.icon-plus[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/plus_icon_primary.svg);
}

.icon-plus[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/plus_icon_default.svg);
}

.icon-plus[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/plus_icon_primary.svg);
}

.icon-plus[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/plus_icon_white.svg);
}

.icon-plus[data-icon^="white-def"]:before {
    background-image: url(../img/icon/plus_icon_white.svg);
}

.icon-plus[data-icon^="white-def"]:after {
    background-image: url(../img/icon/plus_icon_default.svg);
}

.icon-plus[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/plus_icon_white.svg);
}

.icon-plus[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/plus_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 마이너스
   ===================================================== */

.icon-minus[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/minus_icon_default.svg);
}

.icon-minus[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/minus_icon_primary.svg);
}

.icon-minus[data-icon^="def-white"]:before {
    background-image: url(../img/icon/minus_icon_default.svg);
}

.icon-minus[data-icon^="def-white"]:after {
    background-image: url(../img/icon/minus_icon_white.svg);
}

.icon-minus[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/minus_icon_primary.svg);
}

.icon-minus[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/minus_icon_default.svg);
}

.icon-minus[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/minus_icon_primary.svg);
}

.icon-minus[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/minus_icon_white.svg);
}

.icon-minus[data-icon^="white-def"]:before {
    background-image: url(../img/icon/minus_icon_white.svg);
}

.icon-minus[data-icon^="white-def"]:after {
    background-image: url(../img/icon/minus_icon_default.svg);
}

.icon-minus[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/minus_icon_white.svg);
}

.icon-minus[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/minus_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 지구본
   ===================================================== */

.icon-earth[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/earth_icon_default.svg);
}

.icon-earth[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/earth_icon_primary.svg);
}

.icon-earth[data-icon^="def-white"]:before {
    background-image: url(../img/icon/earth_icon_default.svg);
}

.icon-earth[data-icon^="def-white"]:after {
    background-image: url(../img/icon/earth_icon_white.svg);
}

.icon-earth[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/earth_icon_primary.svg);
}

.icon-earth[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/earth_icon_default.svg);
}

.icon-earth[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/earth_icon_primary.svg);
}

.icon-earth[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/earth_icon_white.svg);
}

.icon-earth[data-icon^="white-def"]:before {
    background-image: url(../img/icon/earth_icon_white.svg);
}

.icon-earth[data-icon^="white-def"]:after {
    background-image: url(../img/icon/earth_icon_default.svg);
}

.icon-earth[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/earth_icon_white.svg);
}

.icon-earth[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/earth_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 링크
   ===================================================== */

.icon-link[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/link_icon_default.svg);
}

.icon-link[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/link_icon_primary.svg);
}

.icon-link[data-icon^="def-white"]:before {
    background-image: url(../img/icon/link_icon_default.svg);
}

.icon-link[data-icon^="def-white"]:after {
    background-image: url(../img/icon/link_icon_white.svg);
}

.icon-link[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/link_icon_primary.svg);
}

.icon-link[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/link_icon_default.svg);
}

.icon-link[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/link_icon_primary.svg);
}

.icon-link[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/link_icon_white.svg);
}

.icon-link[data-icon^="white-def"]:before {
    background-image: url(../img/icon/link_icon_white.svg);
}

.icon-link[data-icon^="white-def"]:after {
    background-image: url(../img/icon/link_icon_default.svg);
}

.icon-link[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/link_icon_white.svg);
}

.icon-link[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/link_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 클립
   ===================================================== */

.icon-clip[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/clip_icon_default.svg);
}

.icon-clip[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/clip_icon_primary.svg);
}

.icon-clip[data-icon^="def-white"]:before {
    background-image: url(../img/icon/clip_icon_default.svg);
}

.icon-clip[data-icon^="def-white"]:after {
    background-image: url(../img/icon/clip_icon_white.svg);
}

.icon-clip[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/clip_icon_primary.svg);
}

.icon-clip[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/clip_icon_default.svg);
}

.icon-clip[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/clip_icon_primary.svg);
}

.icon-clip[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/clip_icon_white.svg);
}

.icon-clip[data-icon^="white-def"]:before {
    background-image: url(../img/icon/clip_icon_white.svg);
}

.icon-clip[data-icon^="white-def"]:after {
    background-image: url(../img/icon/clip_icon_default.svg);
}

.icon-clip[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/clip_icon_white.svg);
}

.icon-clip[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/clip_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 다운로드
   ===================================================== */

.icon-download[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/download_icon_default.svg);
}

.icon-download[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/download_icon_primary.svg);
}

.icon-download[data-icon^="def-white"]:before {
    background-image: url(../img/icon/download_icon_default.svg);
}

.icon-download[data-icon^="def-white"]:after {
    background-image: url(../img/icon/download_icon_white.svg);
}

.icon-download[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/download_icon_primary.svg);
}

.icon-download[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/download_icon_default.svg);
}

.icon-download[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/download_icon_primary.svg);
}

.icon-download[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/download_icon_white.svg);
}

.icon-download[data-icon^="white-def"]:before {
    background-image: url(../img/icon/download_icon_white.svg);
}

.icon-download[data-icon^="white-def"]:after {
    background-image: url(../img/icon/download_icon_default.svg);
}

.icon-download[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/download_icon_white.svg);
}

.icon-download[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/download_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 햄버거
   ===================================================== */

.icon-ham[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-ham[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

.icon-ham[data-icon^="def-white"]:before {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-ham[data-icon^="def-white"]:after {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-ham[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

.icon-ham[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-ham[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

.icon-ham[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-ham[data-icon^="white-def"]:before {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-ham[data-icon^="white-def"]:after {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-ham[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-ham[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 닫기
   ===================================================== */

.icon-close[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/close_icon_default.svg);
}

.icon-close[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/close_icon_primary.svg);
}

.icon-close[data-icon^="def-white"]:before {
    background-image: url(../img/icon/close_icon_default.svg);
}

.icon-close[data-icon^="def-white"]:after {
    background-image: url(../img/icon/close_icon_white.svg);
}

.icon-close[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/close_icon_primary.svg);
}

.icon-close[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/close_icon_default.svg);
}

.icon-close[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/close_icon_primary.svg);
}

.icon-close[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/close_icon_white.svg);
}

.icon-close[data-icon^="white-def"]:before {
    background-image: url(../img/icon/close_icon_white.svg);
}

.icon-close[data-icon^="white-def"]:after {
    background-image: url(../img/icon/close_icon_default.svg);
}

.icon-close[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/close_icon_white.svg);
}

.icon-close[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/close_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 체크
   ===================================================== */

.icon-check[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/check_icon_default.svg);
}

.icon-check[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/check_icon_primary.svg);
}

.icon-check[data-icon^="def-white"]:before {
    background-image: url(../img/icon/check_icon_default.svg);
}

.icon-check[data-icon^="def-white"]:after {
    background-image: url(../img/icon/check_icon_white.svg);
}

.icon-check[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/check_icon_primary.svg);
}

.icon-check[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/check_icon_default.svg);
}

.icon-check[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/check_icon_primary.svg);
}

.icon-check[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/check_icon_white.svg);
}

.icon-check[data-icon^="white-def"]:before {
    background-image: url(../img/icon/check_icon_white.svg);
}

.icon-check[data-icon^="white-def"]:after {
    background-image: url(../img/icon/check_icon_default.svg);
}

.icon-check[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/check_icon_white.svg);
}

.icon-check[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/check_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 재생
   ===================================================== */

.icon-play[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/play_icon_default.svg);
}

.icon-play[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/play_icon_primary.svg);
}

.icon-play[data-icon^="def-white"]:before {
    background-image: url(../img/icon/play_icon_default.svg);
}

.icon-play[data-icon^="def-white"]:after {
    background-image: url(../img/icon/play_icon_white.svg);
}

.icon-play[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/play_icon_primary.svg);
}

.icon-play[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/play_icon_default.svg);
}

.icon-play[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/play_icon_primary.svg);
}

.icon-play[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/play_icon_white.svg);
}

.icon-play[data-icon^="white-def"]:before {
    background-image: url(../img/icon/play_icon_white.svg);
}

.icon-play[data-icon^="white-def"]:after {
    background-image: url(../img/icon/play_icon_default.svg);
}

.icon-play[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/play_icon_white.svg);
}

.icon-play[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/play_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - 좋아요
   ===================================================== */

.icon-good[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/good_icon_default.svg);
}

.icon-good[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/good_icon_primary.svg);
}

.icon-good[data-icon^="def-white"]:before {
    background-image: url(../img/icon/good_icon_default.svg);
}

.icon-good[data-icon^="def-white"]:after {
    background-image: url(../img/icon/good_icon_white.svg);
}

.icon-good[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/good_icon_primary.svg);
}

.icon-good[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/good_icon_default.svg);
}

.icon-good[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/good_icon_primary.svg);
}

.icon-good[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/good_icon_white.svg);
}

.icon-good[data-icon^="white-def"]:before {
    background-image: url(../img/icon/good_icon_white.svg);
}

.icon-good[data-icon^="white-def"]:after {
    background-image: url(../img/icon/good_icon_default.svg);
}

.icon-good[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/good_icon_white.svg);
}

.icon-good[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/good_icon_primary.svg);
}

/* =====================================================
   아이콘 시스템 - 잠금
   ===================================================== */

.icon-lock[data-icon^="def"]:before {
    background-image: url(../img/icon/lock_icon_default.svg);
}
.icon-lock[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/lock_icon_default.svg);
}

.icon-lock[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/lock_icon_primary.svg);
}

.icon-lock[data-icon^="def-white"]:before {
    background-image: url(../img/icon/lock_icon_default.svg);
}

.icon-lock[data-icon^="def-white"]:after {
    background-image: url(../img/icon/lock_icon_white.svg);
}

.icon-lock[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/lock_icon_primary.svg);
}

.icon-lock[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/lock_icon_default.svg);
}

.icon-lock[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/lock_icon_primary.svg);
}

.icon-lock[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/lock_icon_white.svg);
}

.icon-lock[data-icon^="white-def"]:before {
    background-image: url(../img/icon/lock_icon_white.svg);
}

.icon-lock[data-icon^="white-def"]:after {
    background-image: url(../img/icon/lock_icon_default.svg);
}

.icon-lock[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/lock_icon_white.svg);
}

.icon-lock[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/lock_icon_primary.svg);
}

/* =====================================================
   아이콘 시스템 - 사운드
   ===================================================== */

.icon-sound[data-icon^="def"]:before {
    background-image: url(../img/icon/sound_icon_default.svg);
}
.icon-sound[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/sound_icon_default.svg);
}

.icon-sound[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/sound_icon_primary.svg);
}

.icon-sound[data-icon^="def-white"]:before {
    background-image: url(../img/icon/sound_icon_default.svg);
}

.icon-sound[data-icon^="def-white"]:after {
    background-image: url(../img/icon/sound_icon_white.svg);
}

.icon-sound[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/sound_icon_primary.svg);
}

.icon-sound[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/sound_icon_default.svg);
}

.icon-sound[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/sound_icon_primary.svg);
}

.icon-sound[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/sound_icon_white.svg);
}

.icon-sound[data-icon^="white-def"]:before {
    background-image: url(../img/icon/sound_icon_white.svg);
}

.icon-sound[data-icon^="white-def"]:after {
    background-image: url(../img/icon/sound_icon_default.svg);
}

.icon-sound[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/sound_icon_white.svg);
}

.icon-sound[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/sound_icon_primary.svg);
}

/* =====================================================
   아이콘 시스템 - 새로고침
   ===================================================== */

.icon-refresh[data-icon^="def"]:before {
    background-image: url(../img/icon/refresh_icon_default.svg);
}
.icon-refresh[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/refresh_icon_default.svg);
}

.icon-refresh[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/refresh_icon_primary.svg);
}

.icon-refresh[data-icon^="def-white"]:before {
    background-image: url(../img/icon/refresh_icon_default.svg);
}

.icon-refresh[data-icon^="def-white"]:after {
    background-image: url(../img/icon/refresh_icon_white.svg);
}

.icon-refresh[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/refresh_icon_primary.svg);
}

.icon-refresh[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/refresh_icon_default.svg);
}

.icon-refresh[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/refresh_icon_primary.svg);
}

.icon-refresh[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/refresh_icon_white.svg);
}

.icon-refresh[data-icon^="white-def"]:before {
    background-image: url(../img/icon/refresh_icon_white.svg);
}

.icon-refresh[data-icon^="white-def"]:after {
    background-image: url(../img/icon/refresh_icon_default.svg);
}

.icon-refresh[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/refresh_icon_white.svg);
}

.icon-refresh[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/refresh_icon_primary.svg);
}

/* =====================================================
   아이콘 시스템 - 햄버거
   ===================================================== */

.icon-hamburger[data-icon^="def"]:before {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}
.icon-hamburger[data-icon^="def-primary"]:before {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-hamburger[data-icon^="def-primary"]:after {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

.icon-hamburger[data-icon^="def-white"]:before {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-hamburger[data-icon^="def-white"]:after {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-hamburger[data-icon^="primary-def"]:before {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

.icon-hamburger[data-icon^="primary-def"]:after {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-hamburger[data-icon^="primary-white"]:before {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}

.icon-hamburger[data-icon^="primary-white"]:after {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-hamburger[data-icon^="white-def"]:before {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-hamburger[data-icon^="white-def"]:after {
    background-image: url(../img/icon/hamburger_icon_default.svg);
}

.icon-hamburger[data-icon^="white-primary"]:before {
    background-image: url(../img/icon/hamburger_icon_white.svg);
}

.icon-hamburger[data-icon^="white-primary"]:after {
    background-image: url(../img/icon/hamburger_icon_primary.svg);
}


/* =====================================================
   아이콘 시스템 - SNS
   ===================================================== */


.icon-sns--bg {
    background: var(--sns-bg);
}

/* 페이스북 */
.icon-sns--facebook {
    --sns-bg : #3a5494
}
.icon-sns--facebook[data-icon^="white-color"]:before {
    background-image: url(../img/icon/facebook_icon_white.svg);
}

.icon-sns--facebook[data-icon^="white-color"]:after {
    background-image: url(../img/icon/facebook_icon_color.svg);
}

.icon-sns--facebook[data-icon^="color-white"]:before {
    background-image: url(../img/icon/facebook_icon_color.svg);
}

.icon-sns--facebook[data-icon^="color-white"]:after {
    background-image: url(../img/icon/facebook_icon_white.svg);
}

/* 엑스 */
.icon-sns--x {
    --sns-bg : #000
}
.icon-sns--x[data-icon^="white-color"]:before {
    background-image: url(../img/icon/x_icon_white.svg);
}

.icon-sns--x[data-icon^="white-color"]:after {
    background-image: url(../img/icon/x_icon_color.svg);
}

.icon-sns--x[data-icon^="color-white"]:before {
    background-image: url(../img/icon/x_icon_color.svg);
}

.icon-sns--x[data-icon^="color-white"]:after {
    background-image: url(../img/icon/x_icon_white.svg);
}

/* 구글 플러스 */
.icon-sns--google-plus {
    --sns-bg : #e43d29
}
.icon-sns--google-plus[data-icon^="white-color"]:before {
    background-image: url(../img/icon/google_plus_icon_white.svg);
}

.icon-sns--google-plus[data-icon^="white-color"]:after {
    background-image: url(../img/icon/google_plus_icon_color.svg);
}

.icon-sns--google-plus[data-icon^="color-white"]:before {
    background-image: url(../img/icon/google_plus_icon_color.svg);
}

.icon-sns--google-plus[data-icon^="color-white"]:after {
    background-image: url(../img/icon/google_plus_icon_white.svg);
}

/* 카카오 */
.icon-sns--kakao {
    --sns-bg : #fae100
}
.icon-sns--kakao[data-icon^="white-color"]:before {
    background-image: url(../img/icon/kakao_icon_color.svg);
}

.icon-sns--kakao[data-icon^="white-color"]:after {
    background-image: url(../img/icon/kakao_icon_color.svg);
}

.icon-sns--kakao[data-icon^="color-white"]:before {
    background-image: url(../img/icon/kakao_icon_color.svg);
}

.icon-sns--kakao[data-icon^="color-white"]:after {
    background-image: url(../img/icon/kakao_icon_color.svg);
}

/* 인스타그램 */
.icon-sns--instagram {
    --sns-bg : linear-gradient(
		45deg,
		#feda75,
		#fa7e1e,
		#d62976,
		#962fbf,
		#4f5bd5
	);
}
.icon-sns--instagram[data-icon^="white-color"]:before {
    background-image: url(../img/icon/instagram_icon_white.svg);
}

.icon-sns--instagram[data-icon^="white-color"]:after {
    background-image: url(../img/icon/instagram_icon_color.svg);
}

.icon-sns--instagram[data-icon^="color-white"]:before {
    background-image: url(../img/icon/instagram_icon_color.svg);
}

.icon-sns--instagram[data-icon^="color-white"]:after {
    background-image: url(../img/icon/instagram_icon_white.svg);
}

/* 유튜브 */
.icon-sns--youtube {
    --sns-bg : #d4191f
}
.icon-sns--youtube[data-icon^="white-color"]:before {
    background-image: url(../img/icon/youtube_icon_white.svg);
}

.icon-sns--youtube[data-icon^="white-color"]:after {
    background-image: url(../img/icon/youtube_icon_color.svg);
}

.icon-sns--youtube[data-icon^="color-white"]:before {
    background-image: url(../img/icon/youtube_icon_color.svg);
}

.icon-sns--youtube[data-icon^="color-white"]:after {
    background-image: url(../img/icon/youtube_icon_white.svg);
}

/* 네이버 */
.icon-sns--naver {
    --sns-bg : #1ec800
}
.icon-sns--naver[data-icon^="white-color"]:before {
    background-image: url(../img/icon/naver_icon_white.svg);
}

.icon-sns--naver[data-icon^="white-color"]:after {
    background-image: url(../img/icon/naver_icon_color.svg);
}

.icon-sns--naver[data-icon^="color-white"]:before {
    background-image: url(../img/icon/naver_icon_color.svg);
}

.icon-sns--naver[data-icon^="color-white"]:after {
    background-image: url(../img/icon/naver_icon_white.svg);
}

/* 틱톡 */
.icon-sns--tiktok {
    --sns-bg : #13130a
}
.icon-sns--tiktok[data-icon^="white-color"]:before {
    background-image: url(../img/icon/tiktok_icon_white.svg);
}

.icon-sns--tiktok[data-icon^="white-color"]:after {
    background-image: url(../img/icon/tiktok_icon_color.svg);
}

.icon-sns--tiktok[data-icon^="color-white"]:before {
    background-image: url(../img/icon/tiktok_icon_color.svg);
}

.icon-sns--tiktok[data-icon^="color-white"]:after {
    background-image: url(../img/icon/tiktok_icon_white.svg);
}

/* 구글 */
.icon-sns--google {
    --sns-bg : linear-gradient(
		90deg,
		#4285f4,
		#34a853,
		#fbbc05,
		#ea4335
	);
}
.icon-sns--google[data-icon^="white-color"]:before {
    background-image: url(../img/icon/google_icon_white.svg);
}

.icon-sns--google[data-icon^="white-color"]:after {
    background-image: url(../img/icon/google_icon_color.svg);
}

.icon-sns--google[data-icon^="color-white"]:before {
    background-image: url(../img/icon/google_icon_color.svg);
}

.icon-sns--google[data-icon^="color-white"]:after {
    background-image: url(../img/icon/google_icon_white.svg);
}



/* =====================================================
   아이콘 시스템 - 호버 효과
   ===================================================== */

@media (hover: hover) {
    [data-icon]:hover:before,
    a:hover [data-icon]:before,
    button:hover [data-icon]:before {
        opacity: 0;
    }

    [data-icon]:hover:after,
    a:hover [data-icon]:after,
    button:hover [data-icon]:after {
        opacity: 1;
    }

    .icon-sns[data-icon^="white-color"]:hover {
        background: #fff;
    }

    .icon-sns[data-icon^="color-white"]:hover {
        background: var(--sns-bg);
    }   
}

.ui-order {
    border:1px solid var(--gray-200);
    width: 3rem;
    height: 2rem;
    text-align: center;
    background-color: #fff;
}


/* =====================================================
   빈 이미지 플레이스홀더
   ===================================================== */

[data-empty="img"] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gray-100);
}

[data-empty="img"] img {
    width: 50%;
    opacity: 0.25;
}

[data-empty="img"] span {
    font-size: var(--heading-xl);
    font-weight: 700;
    opacity: 0.25;
}

.ui-label {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xl);
    gap:.25rem;
}