:root {
    /* 825x1661(px) */
    --blankphoneheight-raw: calc(100vmin - 24px);
    --blankphoneheight: min(var(--blankphoneheight-raw), 829px);
    --resizeRatio: 0.4966887;
    --blankphonewidth: calc(var(--blankphoneheight) * var(--resizeRatio));
    --innerareaCoefficient: 87.16%;
    --desktopleftimgpad: calc(276 / 1920);
    --desktopimgpadRatio-left: calc(51 / 826);
    --desktopimgpadRatio-right: calc(57 / 826);
    --desktopimgpadRatio-bottom: calc(167 / 1658);
    --desktopimgpadRatio-top: calc(176 / 1658);
    /* 826px일 때 51px left pad, 57px right pad (*** 물리버튼 이미지 컴포넌트 위치로 인해 차이 발생), 167px bottom pad (소프트버튼 고려), 176px top pad(노치 및 펀치홀 고려) */

    /* custom paletter */
    --ink: #0f172a;
    --muted: #64748b;
    --bg: #ffffff;
    --brand: #6C4CF5;
    --surface: #f7f8fb;
    --card: #ffffff;
    --radius: 18px;
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .18);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, .10);
}

*,
*::before,
*::after {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    text-decoration: none;
    user-select: none;
}

.stage {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    background: #fff;
}
/* *** 변수값 재대입으로 인한 width 대입값 0 간주 발생하지 않도록 유의할 것 */


.peachpeachy_mobilephoneskeleton_fakenavtoolbar {
    position: absolute;
    display: none;
    left: 0;
    width: 100%;
    padding-left: calc(var(--blankphonewidth) * var(--desktopimgpadRatio-left) + 2px);
    padding-right: calc(var(--blankphonewidth) * var(--desktopimgpadRatio-right) + 2px);
}
#peachpeachy_mobilephoneskeleton_fakeheader {
    background-color: #ff111148;
    top: 0;
    padding-top: calc(var(--blankphonewidth) * var(--desktopimgpadRatio-left) + 2px);
    height: calc(var(--blankphoneheight) * var(--desktopimgpadRatio-top) + 2px);
    
}
#peachpeachy_mobilephoneskeleton_fakefooter {
    background-color: #1111ff48;
    bottom: 0;
    padding-bottom: calc(var(--blankphonewidth) * var(--desktopimgpadRatio-left) + 2px);
    height: calc(var(--blankphoneheight) * var(--desktopimgpadRatio-bottom) + 2px);
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

#peachpeachy_mobilephoneskeleton_fakeheader-navcomponent-backbttn {
    background-color: #11ff1148;
    position: relative;
    margin-top: 3px;
    margin-left: 3px;
    height: calc(100% - 6px);
    width: 3.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    border-radius: 6px;
}
.peachpeachy_mobilephoneskeleton_fakefooter-navcomponent-bttn {
    position: relative;
    width: 30%;
    height: calc(100% - 8px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}
#peachpeachy_mobilephoneskeleton_fakefooter-navcomponent-menubttn {
    background-color: #118cff48;
}
#peachpeachy_mobilephoneskeleton_fakefooter-navcomponent-homebttn {
    background-color: #ff11d748;
}
#peachpeachy_mobilephoneskeleton_fakefooter-navcomponent-backbttn {
    background-color: #11ff1148;
}




/* App Root */
.app {
    /* padding: max(env(safe-area-inset-top), 12px) max(env(safe-area-inset-right), 12px) max(env(safe-area-inset-bottom), 12px) max(env(safe-area-inset-left), 12px); */
    /* padding-left: 12px; */
    /* padding-right: 12px; */
    /* padding-top: 0; */
    /* padding-bottom: 0; */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, #6C4CF5, #5840d7);
    color: #fff;
    box-shadow: var(--shadow-md);
    z-index: 5;
}

.app-title {
    font-weight: 800;
    letter-spacing: .02em;
    font-size: 1.25rem;
}

.tabbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tab {
    text-align: center;
    font-size: 13px;
    padding: 10px 8px;
    border-radius: 12px;
    background: #fff;
    color: #111;
}

.card {
    background: var(--card);
    border: 1px solid #eef2f7;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 12px;
}

.row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.row+.row {
    margin-top: 8px
}

.label {
    font-weight: 700;
    font-size: 14px
}

.sub {
    color: var(--muted);
    font-size: 12px
}

.controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

select,
.btn {
    font: inherit;
    padding: 10px 12px;
    /* border: 1px solid #e5e7eb; */
    /* background: #fff; */
    border-radius: 12px;
}

.btn.primary {
    background: var(--brand);
    border-color: transparent;
    color: #fff
}

.pill-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.pill {
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca
}



#peachpeachy_mobilephoneskeleton_iconNavbarSidenav {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#peachpeachy_mobilephoneskeleton_iconNavbarSidenav .sidenav-toggler-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 100%;
}
#peachpeachy_mobilephoneskeleton_iconNavbarSidenav .sidenav-toggler-line {
    position: relative;
    transition: all 0.15s ease;
    background: #67748e;
    border-radius: 6px;
    position: relative;
    display: block;
    height: 2px;
    width: 100%;
}
#peachpeachy_mobilephoneskeleton_iconNavbarSidenav .sidenav-toggler-inner .sidenav-toggler-line {
    position: relative;
    width: 16px;
    /* transform: translateX(5px); */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#peachpeachy_mobilephoneskeleton_iconNavbarSidenav .sidenav-toggler-inner .sidenav-toggler-word {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    line-height: 0.2;
    font-size: 11px;
}







html, body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* height: 100vh; */
    height: 100dvh;     /* 가변뷰포트 기준 */
    overflow: hidden;
}
.peachpeachy_responsive_largescreen_background_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* height: 100vh; */
    height: 100dvh;     /* 가변뷰포트 기준 */
    /* background-color: #d1d2d4; */
    overflow: hidden;
    z-index: 0;
}

.peachpeachy_responsive_largescreen_background_stick {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: calc(var(--desktopleftimgpad) * 55dvh - 1px);
    /* background-color: #818286; */
    background-color: #868699;
    background-image: url("../images/illustrations/colorful-2721468_1920.jpg");
    background-position: bottom;
    filter: grayscale(0.25);
    border: 0;
    border-right: 2px solid #868699;
    z-index: 0;
}
.peachpeachy_responsive_largescreen_background_focusedimage {
    position: absolute;
    bottom: 0;
    left: -1px;
    /* left: calc(var(--desktopleftimgpad) * 65vh); */
    height: 55dvh;
    max-height: 55dvh;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    z-index: 1;
}
.peachpeachy_responsive_largescreen_background_focusedimage > img {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
}
.peachpeachy_responsive_largescreen_background_focusedtext {
    position: absolute;
    /* top: 10%; */
    top: 24px;
    left: calc(var(--desktopleftimgpad) * 55dvh + 24px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

@keyframes lightingshadowtitle {
    0% {
        color: hsl(230, 40%, 80%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.2),
            0 0 0.125em hsla(320, 100%, 60%, 0.3),
            -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
            1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }

    30% {
        color: hsl(230, 80%, 90%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 60%, 0.5),
            -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
            0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    40% {
        color: hsl(230, 100%, 95%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 90%, 0.5),
            -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
            0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }

    70% {
        color: hsl(230, 80%, 90%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 60%, 0.5),
            0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
            -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    100% {
        color: hsl(230, 40%, 80%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.2),
            0 0 0.125em hsla(320, 100%, 60%, 0.3),
            1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
            -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }

}

.peachpeachy_responsive_largescreen_background_description-title {
    text-decoration: none;
    cursor: default;
    z-index: 1;
}
.peachpeachy_responsive_largescreen_background_description-title > span:last-child {
    /* margin: auto; */
    font-size: 6.0rem;
    font-weight: 900;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: start;
    text-decoration: none;
    cursor: default;
    animation: lightingshadowtitle 5s 750ms linear infinite;
}
.peachpeachy_responsive_largescreen_background_description-title > span:first-child {
    /* margin: auto; */
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    cursor: default;
    text-align: start;
}
.peachpeachy_responsive_largescreen_background_description-paragraph {
    text-decoration: none;
    cursor: default;
    font-size: 1.3rem;
    font-weight: 300;
    color: #ffffff;
}
.peachpeachy_responsive_largescreen_background_description-flowtextcontainer {
    position: absolute;
    background: transparant;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    font-weight: bold;
    font-size: 36px;
    text-decoration: none;
    cursor: default;
    overflow: hidden;
    z-index: 0;
}
.peachpeachy_responsive_largescreen_background_description-flowtextcontainer > div {
    position: absolute;
    animation: come2life linear 10s infinite;
    transform-origin: center center;
    opacity: 0;
    width: 250px;
    height: 200px;
    border: 0;
    color: #747474d3;
    word-break: keep-all;
    backface-visibility: hidden;
    text-decoration: none;
    cursor: default;
}
.peachpeachy_responsive_largescreen_background_description-flowtextcontainer > div:nth-child(1) {
    left: 30vw;
    top: 30dvh;
    animation-delay: 0s;
}
.peachpeachy_responsive_largescreen_background_description-flowtextcontainer > div:nth-child(2) {
    left: 70vw;
    top: 30dvh;
    animation-delay: 4s;
}
.peachpeachy_responsive_largescreen_background_description-flowtextcontainer > div:nth-child(3) {
    left: 50vw;
    top: 50dvh;
    animation-delay: 8s;
}
.peachpeachy_responsive_largescreen_background_description-flowtextcontainer > div:nth-child(4) {
    left: 30vw;
    top: 70dvh;
    animation-delay: 6s;
}
.peachpeachy_responsive_largescreen_background_description-flowtextcontainer > div:nth-child(5) {
    left: 70vw;
    top: 70dvh;
    animation-delay: 2s;
}
@keyframes come2life {
    0% {
        transform: scale3d(0,0,1) rotate(0.02deg);
        opacity: 0;
        filter: blur(10px);
    }
    25% {
        transform: scale3d(1,1,1) rotate(0.02deg);
        opacity: 1;
        filter: blur(0px);
    }
    40% {
        opacity: 1;
        filter: blur(0px);
    }

    80% {
      opacity: 0;
    }
  
    100% {
        transform: scale3d(4,4,1) rotate(0.02deg);
        filter: blur(10px);
    }
}



.peachpeachy_mobilephoneskeleton_container {
    position: absolute;
    display: flex;
    overflow: hidden;
    /* display: none; */
    /* width: var(--blankphonewidth); */
    /* height: var(--blankphoneheight); */
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.peachpeachy_mobilephoneskeleton_photo {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0;
}


/* Phone mock (desktop only) */
.notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 18px;
    background: #111;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.screen {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-radius: 28px; */
    background: var(--surface);
    overflow: hidden;
}
#app-phone {
    /* max-height: calc(100% - 340px); */
    height: 100%;
    overflow: hidden;
}
#xencosmecc_compcheck_contentviewarea {
    position: relative;
    max-height: calc(100% - 70px + 20px + 12px);
    height: calc(100% - 70px + 20px + 12px);
    transition: max-height 260ms ease, height 260ms ease; /* 애니메이션 */
    overflow-x: hidden;
    overflow-y: auto;
}
#xencosmecc_compcheck_contentviewarea.navbaractivated {
    max-height: calc(100% - 70px - 120px + 20px + 12px);
    height: calc(100% - 70px - 120px + 20px + 12px);
}

.peachpeachy_mobilephoneskeleton_container .phone {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
    /* width: calc(var(--innerareaCoefficient) * 100%); */
    /* height: calc(var(--innerareaCoefficient) * 100%); */
    /* margin: 0;
    padding: 0;
    padding-top: 32px; */
    /* z-index: 1; */
}

@media (min-width: 1024px) {
    .peachpeachy_responsive_largescreen_background_container {
        display: flex;
        background: url("../images/backgrounds/gradient-7258997_1920.png");
        background-repeat: no-repeat;
        /* background-size: contain; */
        background-size: cover;
    }

    .peachpeachy_mobilephoneskeleton_fakenavtoolbar {
        display: flex;
    }

    .peachpeachy_mobilephoneskeleton_container {
        position: absolute;
        box-sizing: border-box !important;
        right: 120px;
        bottom: 42px;
        width: var(--blankphonewidth);
        height: var(--blankphoneheight);
        max-width: 413px;
        max-height: 829px;
        filter: drop-shadow(0 9px 46px rgba(0, 0, 0, 0.12))
                drop-shadow(0 11px 15px rgba(0, 0, 0, 0.14))
                drop-shadow(0 24px 38px rgba(0, 0, 0, 0.12))
                drop-shadow(0 -3px 5px rgba(0, 0, 0, 0.1));
        padding-left: calc(var(--blankphonewidth) * var(--desktopimgpadRatio-left) + 2px);
        padding-right: calc(var(--blankphonewidth) * var(--desktopimgpadRatio-right) + 2px);
        padding-bottom: calc(var(--blankphoneheight) * var(--desktopimgpadRatio-bottom) + 2px);
        padding-top: calc(var(--blankphoneheight) * var(--desktopimgpadRatio-top) + 2px);
        z-index: 1;
    }
    .peachpeachy_mobilephoneskeleton_container::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(-1 * var(--shadow-offset, 16px));
        transform: translate(-50%, -20%);        /* 엘리먼트 아래로 약간 떨어뜨림 */
        width: clamp(70%, 520px, 120%);
        height: var(--shadow-height, 18px);     /* 엘리먼트 폭 대비 가로 크기 */
        pointer-events: none;

        /* 타원형 그라디언트로 퍼지는 바닥 그림자 */
        background: radial-gradient(ellipse at center,
                rgba(0, 0, 0, 0.35) 0%,
                rgba(0, 0, 0, 0.25) 35%,
                rgba(0, 0, 0, 0.12) 60%,
                rgba(0, 0, 0, 0) 75%);
        filter: blur(0.5px);        /* 약간 더 부드럽게 */
        z-index: -1;
    }

    .peachpeachy_mobilephoneskeleton_photo {
        display: flex;
    }
    .peachpeachy_mobilephoneskeleton_container .phone {
        display: flex;
        /* width: min(430px, 42vmin); */
        /* border-radius: 40px; */
        background: linear-gradient(145deg, #18181b, #0a0a0a);
        box-shadow: var(--shadow-lg);
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /* padding-top: 32px; */
    }
}
@media (max-width: 1023px) {
    .peachpeachy_responsive_largescreen_background_container {
        display: none;
        background-color: #fefeff;
    }
    .peachpeachy_mobilephoneskeleton_container {
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        filter: none !important;
        z-index: 0;
    }
    .peachpeachy_mobilephoneskeleton_container::after {
        display: none !important;
    }
    .peachpeachy_mobilephoneskeleton_photo {
        display: none;
    }
    .peachpeachy_mobilephoneskeleton_container .phone {
        display: flex;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        background: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
        padding-top: 0px;
    }
}


.peachpeachy_mobilephoneskeleton_container .phone .screen {
    background: transparent !important;
}


/* 화장품 카테고리 선택부 */
.peachpeachy_ingredientcards_categorycardpicker_gradientbox {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
    overflow: hidden;
}
.peachpeachy_ingredientcards_categorycardpicker_gradientbox > img {
    position: absolute;
    top: 0;
    /* left: 0; */
    left: -20px;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
}
.gradient--0 {
  --gradient-start: #6DE195;
  --gradient-start-text: '#6DE195';
  --gradient-end: #C4E759;
  --gradient-end-text: '#C4E759';
}
.gradient--1 {
  --gradient-start: #41C7AF;
  --gradient-start-text: '#41C7AF';
  --gradient-end: #54E38E;
  --gradient-end-text: '#54E38E';
}
.gradient--2 {
  --gradient-start: #99E5A2;
  --gradient-start-text: '#99E5A2';
  --gradient-end: #D4FC78;
  --gradient-end-text: '#D4FC78';
}
.gradient--3 {
  --gradient-start: #ABC7FF;
  --gradient-start-text: '#ABC7FF';
  --gradient-end: #C1E3FF;
  --gradient-end-text: '#C1E3FF';
}
.gradient--4 {
  --gradient-start: #6CACFF;
  --gradient-start-text: '#6CACFF';
  --gradient-end: #8DEBFF;
  --gradient-end-text: '#8DEBFF';
}
.gradient--5 {
  --gradient-start: #5583EE;
  --gradient-start-text: '#5583EE';
  --gradient-end: #41D8DD;
  --gradient-end-text: '#41D8DD';
}
.gradient--6 {
  --gradient-start: #A16BFE;
  --gradient-start-text: '#A16BFE';
  --gradient-end: #DEB0DF;
  --gradient-end-text: '#DEB0DF';
}
.gradient--7 {
  --gradient-start: #D279EE;
  --gradient-start-text: '#D279EE';
  --gradient-end: #F8C390;
  --gradient-end-text: '#F8C390';
}
.gradient--8 {
  --gradient-start: #F78FAD;
  --gradient-start-text: '#F78FAD';
  --gradient-end: #FDEB82;
  --gradient-end-text: '#FDEB82';
}
.gradient--9 {
  --gradient-start: #BC3D2F;
  --gradient-start-text: '#BC3D2F';
  --gradient-end: #A16BFE;
  --gradient-end-text: '#A16BFE';
}
.gradient--10 {
  --gradient-start: #A43AB2;
  --gradient-start-text: '#A43AB2';
  --gradient-end: #E13680;
  --gradient-end-text: '#E13680';
}
.gradient--11 {
  --gradient-start: #9D2E7D;
  --gradient-start-text: '#9D2E7D';
  --gradient-end: #E16E93;
  --gradient-end-text: '#E16E93';
}
.gradient--12 {
  --gradient-start: #F5CCF6;
  --gradient-start-text: '#F5CCF6';
  --gradient-end: #F1EEF9;
  --gradient-end-text: '#F1EEF9';
}
.gradient--13 {
  --gradient-start: #F0EFF0;
  --gradient-start-text: '#F0EFF0';
  --gradient-end: #FAF8F9;
  --gradient-end-text: '#FAF8F9';
}
.gradient--14 {
  --gradient-start: #121317;
  --gradient-start-text: '#121317';
  --gradient-end: #323B42;
  --gradient-end-text: '#323B42';
}

.peachpeachy_ingredientcards_categorycardpicker_gradientdef {
    display: inline-block;
    height: 100%;
    width: 100%;
    background: linear-gradient(33deg, var(--gradient-start), var(--gradient-end));
    /* border-radius: 20px; */
    border-radius: 12px;
    /* box-shadow: 0 5px 10px #0002; */
}

#peachpeachy_ingredientcards_categorycardpicker_container .card {
    padding: 0.625rem;
    background: #fff;
    /* border-radius: 1.2rem; */
    /* border-radius: 2rem; */
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}


#peachpeachy_ingredientcards_categorycardpicker_container .card-inner {
    position: relative;
    width: inherit;
    /* height: 12rem; */
    height: 84px;
    background: var(--categorycard-clr);
    border-bottom-right-radius: 0;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box {
    width: 100%;
    height: 100%;
    background: #fff;
    /* border-radius: 1.6rem; */
    border-radius: 6px;
    overflow: hidden;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .imgBox {
    position: absolute;
    inset: 0;
}

/* #peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
} */

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon {
    position: absolute;
    bottom: -0.375rem;
    right: 0;
    width: 100%;
    height: 2.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    pointer-events: none;
}


#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon {
    width: 18rem;
    max-width: 70%;
    border-top-left-radius: 1rem;
    right: -0.375rem;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon::before {
    position: absolute;
    content: "";
    bottom: 0.375rem;
    left: -1.25rem;
    background: transparent;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom-right-radius: 1rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--categorycard-clr);
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon::after {
    position: absolute;
    content: "";
    top: -1.25rem;
    right: 0.375rem;
    background: transparent;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--categorycard-clr);
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon h3 {
    margin-left: 0.3em;
    text-transform: uppercase;
    font-size: 1.1rem;
    /* color: #c8c8c8; */
    color: #6e6e6e;
    margin-left: 1em;
    font-weight: 400;
}


#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon .checkmark {
    position: absolute;
    top: 0.938rem;
    right: 1.25rem;
    height: 1.063rem;
    width: 1.063rem;
    background-color: transparent;
    border: 0.063rem solid #c8c8c8;
    border-radius: 0.438rem;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 0.375rem;
    top: 0.188rem;
    width: 0.188rem;
    height: 0.438rem;
    border: solid white;
    border-width: 0 0.125rem 0.125rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon input:checked~.checkmark {
    background-color: #111;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card-inner .box .icon input:checked~.checkmark:after {
    display: block;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card.active h3 {
    color: #111 !important;
}

#peachpeachy_ingredientcards_categorycardpicker_container .card.active .checkmark {
    border: 0.063rem solid #111;
}




/* 화이트 리플 확산효과 버튼. 블링블링 리플 확산효과 버튼과 중복사용할 수 없음 */
.whiteripplebutton {
    position: relative;
    user-select: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;      /* for Safari */
}
.whiteripplebutton:hover {
    transition-duration: 0.1s;
}
.whiteripplebutton:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 4em;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    box-shadow: 0 0 10px 40px white;
}
.whiteripplebutton:active:after {
    box-shadow: 0 0 0 0 white;
    position: absolute;
    border-radius: 4em;
    left: 0;
    top: 0;
    opacity: 1;
    transition: 0s;
}
.whiteripplebutton:active {
    top: 1px;
}




/* 개별 화장품 품목선택 */

.peachpeachy_ingredientcards_individualitempicker_eachcard {
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 32px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    box-sizing: content-box;
    /* box-shadow: 2px 3px 4px 2px #44444463; */
    box-shadow: 3px 4px 28px -17px rgba(0,0,0,0.5);
    -webkit-box-shadow: 3px 4px 28px -17px rgba(0,0,0,0.5);
    -moz-box-shadow: 3px 4px 28px -17px rgba(0,0,0,0.5);
    overflow: hidden;
}

    .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox {
        position: absolute;
        top: -25px;
        left: -16px;
        padding: 0;
        padding-top: 18px;
        padding-left: 20px;
        padding-right: 10px;
        width: 96px;
        height: 96px;
        box-shadow: 0px 2px 3px 1px #00000070;
        box-sizing: border-box;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
        .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryicon {
            position: relative;
            height: 36px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryicon > svg,
            .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryicon > img {
                position: relative;
                width: 100%;
                height: 100%;
                filter: brightness(0) contrast(100) invert(1);
                object-fit: cover;
            }
        .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryname {
            position: relative;
            font-size: 12px;
            font-weight: 600;
            color: #ffffff;
            /* color: #303036fd; */
        }


    .peachpeachy_ingredientcards_individualitempicker_eachcard-productinfobox {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: calc(100% - 86px);
            height: 100%;
    }
    .peachpeachy_ingredientcards_individualitempicker_eachcard-productinfobox * {
        font-size: 10px;
    }
        .peachpeachy_ingredientcards_individualitempicker_eachcard-productinfobox > div:last-child {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 72px;
            height: 100%;
            padding-right: 6px;
            z-index: 0;
        }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-productthumbnail {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                height: calc(100% - 20px);
                /* width: 100%; */
                width: 60px;
                max-height: 60px;

            }
                .peachpeachy_ingredientcards_individualitempicker_eachcard-productthumbnail > svg,
                .peachpeachy_ingredientcards_individualitempicker_eachcard-productthumbnail > img {
                    position: relative;
                    height: 100%;
                    object-fit: cover;
                }

            .peachpeachy_ingredientcards_individualitempicker_eachcard-providername {
                /* position: relative; */
                position: absolute;
                bottom: 0px;
                left: 6px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                font-size: 13px;
                font-weight: 700;
                color: #2d302f;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                /* width: 100%; */
                /* width: 80px; */
                /* height: 20px; */
                height: 22px;
                z-index: 1;
            }

            .peachpeachy_ingredientcards_individualitempicker_eachcard-productprice {
                position: relative;
                /* position: absolute;
                bottom: 0px;
                left: 0px; */
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: flex-end;
                border-top: 1px solid #0f172a1a;
                width: 100%;
                /* width: 80px; */
                /* height: 22px; */
                height: 20px;
                font-size: 12px;
                font-weight: 700;
                color: #0980af;
                overflow: hidden;
            }
                .peachpeachy_ingredientcards_individualitempicker_eachcard-productprice::after {
                    content: " 원";
                    color: #303039;
                }

            .peachpeachy_ingredientcards_individualitempicker_eachcard-productname-textbox {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;
                width: calc(100% - 72px);
                height: 100%;   
            }
                .peachpeachy_ingredientcards_individualitempicker_eachcard-productname {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: flex-start;
                    font-size: 14px;
                    overflow: hidden;
                    word-break: break-all;
                    /* text-overflow: ellipsis; */
                    /* white-space: nowrap; */
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                }

            /* 추가기능 토글 설정 */
            .peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                opacity: 0.0;
                border-radius: 8px;
                /* background: transparent; */
                background-color: #a3a8a833;
                transition: transform ease-in 0.0s, box-shadow ease-in 0.25s;
                /* -webkit-appearance: none; */
                /* appearance: none; */
                box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
                flex-direction: row;
                justify-content: center;
                align-items: center;
                z-index: 2;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-productselectbttn {
                position: absolute;
                top: 100%;
                left: -120px;
                width: 120px;
                height: 80px;
                padding-left: 20px;
                padding-bottom: 30px;
                text-decoration: none;
                user-select: none;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                font-weight: 600;
                color: #ffffff;
                background-color: #1cced4cb;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-productresetbttn {
                position: absolute;
                top: -100%;
                left: calc(30% - 40px);
                width: 120px;
                height: 80px;
                padding-top: 30px;
                text-decoration: none;
                user-select: none;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                font-weight: 600;
                color: #ffffff;
                background-color: #b51cd4cb;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-productlinkbttn {
                position: absolute;
                top: 100%;
                left: 100%;
                width: 160px;
                height: 80px;
                padding-right: 35px;
                padding-bottom: 35px;
                text-decoration: none;
                user-select: none;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                font-weight: 600;
                color: #ffffff;
                background-color: #1c57d4cb;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:not(:checked)+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside {        /* 표준 '+' 선택자는 오직 바로 "다음"의 형제 객체만을 인식함에 유의 */
                /* transform: translate(0%, 0%) scale(0.0); */
                /* border-top-left-radius: 25%; */
                backdrop-filter: blur(8px);
                transition: all 0.3s ease-in-out;
                opacity: 0.0;
                /* display: none; */
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:not(:checked)+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside .peachpeachy_ingredientcards_individualitempicker_eachcard-productselectbttn,
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:not(:checked)+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside .peachpeachy_ingredientcards_individualitempicker_eachcard-productresetbttn,
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:not(:checked)+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside .peachpeachy_ingredientcards_individualitempicker_eachcard-productlinkbttn {
                transform: translate(0%, 0%) scale(0.0);
                transition: all 0.2s ease-in-out;
                border-radius: 0%;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:checked+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside {
                /* transform: translate(-100%, -100%) scale(1.0); */
                /* border-radius: 8px; */
                backdrop-filter: blur(1px);
                transition: all 0.3s ease-in-out;
                opacity: 1.0;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:checked+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside .peachpeachy_ingredientcards_individualitempicker_eachcard-productselectbttn {
                /*transform: translate(calc(150% + 90px), -50%) scale(1.0);*/     /* left, top */
                transform: translate(90px, -45px) scale(1.0);
                transition: all 0.3s ease-in-out;
                border-radius: 50%;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:checked+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside .peachpeachy_ingredientcards_individualitempicker_eachcard-productresetbttn {
                transform: translate(0%, calc(50% + 20px)) scale(1.0);
                transition: all 0.3s ease-in-out;
                border-radius: 50%;
            }
            .peachpeachy_ingredientcards_individualitempicker_eachcard-functiontoggler:checked+.peachpeachy_ingredientcards_individualitempicker_eachcard-ripplebackside .peachpeachy_ingredientcards_individualitempicker_eachcard-productlinkbttn {
                transform: translate(-75%, -50%) scale(1.0);
                transition: all 0.3s ease-in-out;
                border-radius: 50%;
            }

/* 화장품 카테고리별 버튼 테두리 및 배경색 지정 */

/* #xencosmecc_compcheck_component-cosmeticsapplybutton-toner { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-essence { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-lotion { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-primer { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-sunblock { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-makeupbase { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-foundation { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-concealer { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-blusher { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-highlighter { border: 2px solid #c22a2abd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-makeupfixer { border: 2px solid #c22a2abd; } */
#xencosmecc_compcheck_component-cosmeticsapplybutton-toner .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-essence .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-lotion .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-primer .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-sunblock .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-makeupbase .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-foundation .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-concealer .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-blusher .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-highlighter .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-makeupfixer .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ed5d3c87; }

/* #xencosmecc_compcheck_component-cosmeticsapplybutton-eyeprimer { border: 2px solid #4338cabd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-eyecream { border: 2px solid #4338cabd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-eyeshadow { border: 2px solid #4338cabd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-eyeliner { border: 2px solid #4338cabd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-mascara { border: 2px solid #4338cabd; } */
#xencosmecc_compcheck_component-cosmeticsapplybutton-eyeprimer .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #4338cabd; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-eyecream .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #4338cabd; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-eyeshadow .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #4338cabd; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-eyeliner .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #4338cabd; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-mascara .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #4338cabd; }

/* #xencosmecc_compcheck_component-cosmeticsapplybutton-lipbalm { border: 2px solid #ca3881bd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-lipliner { border: 2px solid #ca3881bd; } */
/* #xencosmecc_compcheck_component-cosmeticsapplybutton-lipstick { border: 2px solid #ca3881bd; } */
#xencosmecc_compcheck_component-cosmeticsapplybutton-lipbalm .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ca3881bd; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-lipliner .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ca3881bd; }
#xencosmecc_compcheck_component-cosmeticsapplybutton-lipstick .peachpeachy_ingredientcards_individualitempicker_eachcard-categoryinfoimgbox { background-color: #ca3881bd; }