@charset "utf-8";

/* 1. 부모 요소 설정 */
[data-tooltip] {
    position: relative;
    cursor: hand;
}

/* 2. 풍선 도움말 박스 (기본 숨김) */
[data-tooltip]::after {
    content: attr(data-tooltip); /* HTML의 data-tooltip 내용을 가져옴 */
    position: absolute;
    bottom: 180%; /* 위쪽으로 띄움 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(15, 23, 42, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
    pointer-events: none; /* 마우스 방해 금지 */
    border: 1px solid #222;
}

/* 3. 말풍선 꼬리 (삼각형) */
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 100;
}

/* 4. 마우스 오버 시 표시 */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* 아이콘에 툴팁을 박을 때 필수 설정 */
i[data-tooltip] {
    display: inline-block; /* 박스 모델 활성화 */
    vertical-align: middle; /* 텍스트랑 높이 맞춤 */
    line-height: 1; /* 아이콘 높이 정렬 */
}