/*
 * [2026.08.14][박규태] 공통 툴팁 제작
 */
.tool_tip_v2 {
    position: relative;
}

.tool_tip_v2:hover {
    cursor: pointer;
}

.tool_tip_v2::after {
    content: attr(data-tip);
    position: absolute;
    font-weight: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background-color: #fff;        /* 흰색 배경 */
    color: #000;                   /* 검정 글씨 */
    border: 2px solid #4ab8e0;    /* 파란 테두리 */
    padding: 6px 12px;
    border-radius: 6px;
    white-space: pre-line;
    font-size: attr(data-font px, 14px);
    z-index: 1000;
    width:  attr(data-width px, 330px);
    height: attr(data-height px, auto);
    text-align: center;
    line-height: normal;
}

.tool_tip_v2::before {
    content: '';
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    /*transition: opacity 0.2s ease 0.1s;*/
    border: 11px solid transparent;
    z-index: 999;
}

.tool_tip_v2:hover::after,
.tool_tip_v2:hover::before {
    opacity: 1;
}

/* 오른쪽 (기본) */
.tool_tip_v2[data-position="right"]::after {
    top: 50%; left: 100%; transform: translateY(-50%); margin-left: 10px;
}
.tool_tip_v2[data-position="right"]::before {
    top: 50%; left: 100%; transform: translateY(-50%); margin-left: -6px;
    border-right-color: #4ab8e0;
}

/* 왼쪽 */
.tool_tip_v2[data-position="left"]::after {
    top: 50%; right: 100%; transform: translateY(-50%); margin-right: 10px;
}
.tool_tip_v2[data-position="left"]::before {
    top: 50%; right: 100%; transform: translateY(-50%); margin-right: -6px;
    border-left-color: #4ab8e0;
}

/* 위쪽 */
.tool_tip_v2[data-position="top"]::after {
    bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px;
}
.tool_tip_v2[data-position="top"]::before {
    bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: -6px;
    border-top-color: #4ab8e0;
}

/* 아래쪽 */
.tool_tip_v2[data-position="bottom"]::after {
    top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px;
}
.tool_tip_v2[data-position="bottom"]::before {
    top: 100%; left: 50%; transform: translateX(-50%); margin-top: -6px;
    border-bottom-color: #4ab8e0;
}

.tool_tip_v2[data-align="left"]::after  { text-align: left; }
.tool_tip_v2[data-align="right"]::after { text-align: right; }