/* root ----------------------- */
:root {
    /* background */
    --leeum-white: #FFFFFF;
    --leeum-gray100: #F9F9F9;
    --leeum-gray200: #F2F2F2;
    --leeum-gray300: #57575C;
    --leeum-gray400: #57575C;
    --leeum-gray500 : #2b2b2b;
    --leeum-black : #000000;

    /* line */
    --leeum-line200: #D2D2D2;
    --leeum-line100: #F2F2F2;

    /* text */
    --leeum-text400: #000000;
    --leeum-text300: #57575C;
    --leeum-text200: #D2D2D2;
    --leeum-text100: #FFFFFF;

    /* drag */
    --leeum-drag-bg: #000000;
    --leeum-drag-text: #FFFFFF;

    /* background, button text, icon */
    --hoam-white: #FFFFFF;
    --hoam-text-btn: #FFFFFF;

    /* solid color */
    --hoam-green: #00662E;
    --hoam-blue: #000F9F;
    --hoam-red: #FF7276;
    --hoam-gray: #F0ECE9;

    /* line */
    --hoam-line200: #D2CCC7;
    --hoam-line100: #F0ECE9;

    /* text */
    --hoam-text-green: #00662E;
    --hoam-text-gray: #5F574E;
    --hoam-text-black: #000000;
}

.svg-leeum-black {height: 2rem;}
.svg-leeum-black path {fill: var(--leeum-text400);}
.svg-leeum-white {height: 2rem;}
.svg-leeum-white path {fill: var(--leeum-text100);}
.svg-leeum-gray path {fill: #D2D2D2;}

.svg-ic-change {width: 1.3rem; height: 1.3rem;}
.svg-ic-change path {fill: var(--leeum-text300);}
.page-gnb-wrap .svg-ic-change path {fill: #000;}

body[data-museum="hoam"] .svg-ic-change {width: 1.3rem; height: 1.3rem;}
body[data-museum="hoam"] .svg-ic-change path {fill: var(--hoam-text-btn);}
body[data-museum="hoam"] .page-gnb-wrap .svg-ic-change path {fill: #fff;}

.svg-ic-arrow-up {width: .8rem; height: .8rem; enable-background: new 0 0 8 8;}
.svg-ic-arrow-up path {fill: none; stroke: var(--leeum-text100);}

.svg-ic-sns-instagram {width: 4rem; height: 4rem; cursor: pointer;}
.svg-ic-sns-instagram circle {fill: var(--leeum-gray200);}
.svg-ic-sns-instagram rect {fill: var(--hoam-green);}
.svg-ic-sns-instagram path {fill: var(--leeum-text300);}

.svg-ic-sns-youtube {width: 4rem; height: 4rem; cursor: pointer;}
.svg-ic-sns-youtube circle {fill: var(--leeum-gray200);}
.svg-ic-sns-youtube rect {fill: var(--hoam-green);}
.svg-ic-sns-youtube path {fill: var(--leeum-text300);}

.svg-ic-sns-facebook {width: 4rem; height: 4rem; cursor: pointer;}
.svg-ic-sns-facebook circle {fill: var(--leeum-gray200);}
.svg-ic-sns-facebook rect {fill: var(--hoam-green);}
.svg-ic-sns-facebook path {fill: var(--leeum-text300);}

body[data-museum="hoam"] .svg-ic-sns-instagram path {fill: var(--hoam-white);}
body[data-museum="hoam"] .svg-ic-sns-youtube path {fill: var(--hoam-white);}
body[data-museum="hoam"] .svg-ic-sns-facebook path {fill: var(--hoam-white);}

.svg-ic-close {width: 5rem; height: 5rem; cursor: pointer;}
.svg-ic-close circle {fill: var(--leeum-gray200);}
.svg-ic-close rect {fill: var(--leeum-text300);}

.svg-ic-prev, .svg-ic-next {position: absolute; width: 4rem; height: 4rem; cursor: pointer; top: 50%;}
.svg-ic-prev {left: 2.5rem;}
.svg-ic-next {right: 2.5rem;}
.svg-ic-prev circle, .svg-ic-next circle {fill: var(--leeum-gray200);}
.svg-ic-prev rect, .svg-ic-next rect {fill: var(--leeum-text300);}

body[data-museum="hoam"] .svg-ic-close {background-color: var(--hoam-green);}
body[data-museum="hoam"] .svg-ic-close circle {fill: var(--hoam-green);}
body[data-museum="hoam"] .svg-ic-close rect {fill: var(--hoam-white);}

.svg-ic-download {width: 1.2rem; height: 1.2rem;}
.svg-ic-download path {fill: var(--leeum-text300);}

body[data-museum="hoam"] .svg-ic-download path {fill: var(--hoam-white);}

.svg-ic-calendar {width: 1.4rem; height: 1.4rem;}
.svg-ic-calendar path {fill: var(--leeum-text300);}
body[data-museum="hoam"] .svg-ic-calendar path {fill: var(--hoam-text-gray);}

.svg-ic-expand {width: 4rem; height: 4rem;}
.svg-ic-expand circle {fill: var(--leeum-gray400);}
.svg-ic-expand line {fill: none; stroke: var(--leeum-gray200);}

.svg-ic-expand-light {width: 4rem; height: 4rem;}
.svg-ic-expand-light circle {fill: var(--leeum-gray200);}
.svg-ic-expand-light line {fill: none; stroke: var(--leeum-text300);}

.svg-ic-list {width: 1.4rem; height: 1.4rem;}
.svg-ic-list path {fill: var(--leeum-text300);}
body[data-museum="hoam"] .svg-ic-list path {fill: var(--hoam-text-gray);}

.svg-ic-archive {width: 1.8rem; height: 1.8rem;}
.svg-ic-archive path {fill: var(--leeum-text300);}

.svg-ic-minus {width: 1.2rem; height: 1.2rem;}
.svg-ic-minus line {fill:none; stroke: var(--leeum-gray200); stroke-width: 1.5;}

.svg-ic-delete {width: 1.4rem; height: 1.4rem;}
.svg-ic-delete circle {fill: #FFFFFF;}
.svg-ic-delete path {fill: var(--leeum-gray300);}

body[data-museum="hoam"] .svg-ic-delete-hoam {width: 1.4rem; height: 1.4rem;}
body[data-museum="hoam"] .svg-ic-delete-hoam rect {fill: var(--hoam-white);}
body[data-museum="hoam"] .svg-ic-delete-hoam g > g {fill: var(--hoam-white); stroke: var(--hoam-blue);}
body[data-museum="hoam"] .svg-ic-delete-hoam path {fill: var(--hoam-blue);}

.hoam-emblem {width: 11rem;}
.hoam-emblem path {fill: var(--hoam-text-black);}

.page-gnb-wrap .hoam-emblem path {fill: #ffffff;}

.svg-leeum-custom {width: 3.5em; height: 3.5rem;}
.svg-leeum-custom path {fill: var(--leeum-text300);}
.svg-leeum-custom rect {fill: var(--leeum-text300);}

@media screen and (max-width: 767px) {
    .svg-leeum-custom {width: 2.8rem; height: 2.8rem;}
}

.svg-hoam-custom {width: 3rem; height: 3rem;}
.svg-hoam-custom path {fill: var(--hoam-white);}

@media screen and (max-width: 767px) {
    .svg-hoam-custom {width: 2.8rem; height: 2.8rem;}
}