.tooltip{

    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.16);

    /* 레이어 */
    position:absolute;

    display: flex;
    padding: 12px var(--Spacing-16px, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-16px, 16px);

    border-radius: 6px;
    background: var(--Neutral-White, #FFF);

    /* transition: .1s; */
    opacity: 0;
    /* z-index: var(--layer-hide); */
    z-index: 99999999 !important;

}

.tooltip-black{
    background-color: black;
    color: white;
}

.tooltip-sm{
    padding: 4px 8px;
    font-size: 12px;
}
.tooltip-title{
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.tooltip-content{
    display: contents;
}

.tooltip.show{
    opacity: 1;
    z-index: var(--layer-tooltip);
}
.tooltip.hide{
    /* transition: .1s; */
    opacity: 0;
    z-index: -99999 !important;
    user-select: none;
    pointer-events: none;
}


.tooltip .arrow{

    /* 삼각형에 box shadow 못해서 안보이게 처리 */
    display: none;
    content: "";

    width: 20px;
    height: 20px;

    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.16);

    background-color: #FFF;

    transform: rotate(45deg);

    /* 레이어 */
    position: absolute;
    z-index: var(--layer-tooltip);


    /* 위치 */
    /* 이거는 방향에 따라 동적으로 면경 */
    left: -10px;
}