/*
 * 트렌드 화면 그래프의 호버 표시와 말풍선 (기간별 · 키워드별 · 자가 진단 공통)
 * 그래프 모양은 각 JSP 의 스타일이 그리고, 여기서는 가리킬 때의 표시만 얹는다.
 * 값은 insight-chart.js 가 data-* 속성을 읽어 채운다.
 */

[data-chart] { outline: none; }
[data-chart]:focus-visible { outline: 2px solid var(--main-color, #26288e); outline-offset: 4px; border-radius: 4px; }

/* ------------------------------------------------------------ 막대 추이 */
.spark[data-chart] { position: relative; cursor: crosshair; touch-action: pan-y; }
.spark[data-chart] .col { transition: opacity .12s ease, background-color .12s ease; }
.spark[data-chart].is-hovering .col { opacity: .4; }
.spark[data-chart] .col.is-active { opacity: 1; background: var(--main-color, #26288e); }
.spark[data-chart] .chart-guide {
    position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none;
    border-left: 1px dashed var(--main-color, #26288e); opacity: 0; transition: opacity .12s ease;
}
.spark[data-chart].is-hovering .chart-guide { opacity: .6; }

/* ------------------------------------------------------------ 비율 막대 */
[data-chart="share"] .bar-row {
    margin-inline: -6px; padding: 3px 6px; border-radius: 6px; cursor: default;
    transition: background-color .12s ease;
}
[data-chart="share"] .bar-row .fill { transition: opacity .12s ease; }
[data-chart="share"].is-hovering .bar-row .fill { opacity: .4; }
[data-chart="share"] .bar-row.is-active { background: #f1f3f8; }
[data-chart="share"] .bar-row.is-active .fill { opacity: 1; }
[data-chart="share"] .bar-row.is-active .label,
[data-chart="share"] .bar-row.is-active .value { color: #1c1e3b; font-weight: 600; }

/* ------------------------------------------------------------ 순위 변화 */
.weeks[data-chart] .w { border-radius: 6px; padding-top: 6px; cursor: default; transition: background-color .12s ease; }
.weeks[data-chart] .w .b { transition: opacity .12s ease, background-color .12s ease; }
.weeks[data-chart].is-hovering .w .b { opacity: .4; }
.weeks[data-chart] .w.is-active { background: #f1f3f8; }
.weeks[data-chart] .w.is-active .b { opacity: 1; background: var(--main-color, #26288e); }

/* ------------------------------------------------------ 표의 지수 막대 행 */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: #f7f8fc; }
tr[data-href]:hover .idx .fill { background: #1c1e6e; }

/* ------------------------------------------------------------ 말풍선 */
.ti-tip {
    position: fixed; z-index: 1000; left: 0; top: 0; pointer-events: none;
    min-width: 176px; max-width: 250px; padding: 10px 12px;
    background: #1c1e3b; color: #fff; border-radius: 8px;
    font-size: 12.5px; line-height: 1.55; word-break: keep-all;
    box-shadow: 0 10px 28px rgba(18, 20, 58, .24);
    opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease;
}
.ti-tip.is-on { opacity: 1; transform: none; }
.ti-tip .t-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                   font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ti-tip .t-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px;
                   background: rgba(255, 255, 255, .16); color: #fff; }
.ti-tip .t-badge.hi { background: #3d41c2; }
.ti-tip .t-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ti-tip .t-row + .t-row { margin-top: 2px; }
.ti-tip .t-row .k { color: #b9bde2; }
.ti-tip .t-row .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ti-tip .t-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .14);
                  color: #b9bde2; font-size: 11.5px; }
/* 어두운 말풍선 위라 화면의 초록·빨강보다 밝게 쓴다. 상승 초록 · 하락 빨강은 화면과 같다 */
.ti-tip .up { color: #6fe3a1; }
.ti-tip .down { color: #ff9e94; }
.ti-tip .flat { color: #b9bde2; }

@media (prefers-reduced-motion: reduce) {
    .ti-tip, .spark[data-chart] .col, .spark[data-chart] .chart-guide,
    [data-chart="share"] .bar-row, [data-chart="share"] .bar-row .fill,
    .weeks[data-chart] .w, .weeks[data-chart] .w .b { transition: none; }
}