/* ── gf-tip — v1 공용 툴팁 모양 (동작은 public/js/gf-tip.js) ───────────────────────────────────────────
   역할 세 가지 — 같은 토큰으로 모양만 나눈다.
     이름표 .gf-tip.gf-tip--label  핀 이름·재생 시각·짧은 상태·아이콘 버튼 이름. 글자색 토큰을 바탕으로 써서
                                    도면·영상·차트 위에서도 대비가 가장 크다.
     설명   .gf-tip.gf-tip--rich   문장. 두 줄을 넘으면 마우스 올림 대신 눌러 여는 안내(.gf-toggletip)로.
     데이터 .gf-tip (+ __head·__rows) 장비 수치·차트 값.
   색은 전부 site.css 토큰이라 다크·라이트·앰버·세이지가 따라온다. 화면 CSS 는 위치·보이기만 맡고 모양 선언을 두지 않는다
   (화면 CSS 가 이 파일보다 뒤에 실려 position·z-index 같은 자리 값은 화면 쪽이 이긴다).
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

.gf-tip {
    position: absolute;
    z-index: 1080;
    box-sizing: border-box;
    width: max-content;
    max-width: 280px;
    padding: 6px 10px;
    border: 1px solid var(--line-normal-strong);
    border-radius: 8px;
    background: var(--background-elevated-normal);
    color: var(--label-normal);
    box-shadow: 0 8px 24px var(--shadow-medium);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.gf-tip--rich { padding: 10px 12px; }

.gf-tip__title {
    display: block;
    margin-bottom: 2px;
    color: var(--label-strong);
    font-weight: 600;
}

.gf-tip__fig {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
    border: 1px solid var(--line-normal-normal);
    border-radius: 5px;
}

.gf-tip__head {
    display: block;
    margin-bottom: 4px;
    color: var(--label-alternative);
    font-size: 11px;
}

.gf-tip__rows {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 3px 8px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.gf-tip__rows b {
    color: var(--label-strong);
    font-weight: 600;
    text-align: right;
}

/* 이름표 — 한 줄. 긴 글(잘린 이름 원문 등)은 gf-tip.js 가 --wrap 을 붙인다.
   상태색이 필요하면 바탕·글자만 --gf-tip-bg·--gf-tip-fg 로 바꾼다(화살표가 같이 따라감 — 재생 타임라인의 이벤트 표시) */
.gf-tip--label {
    max-width: min(360px, calc(100vw - 16px));
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--gf-tip-bg, var(--label-normal));
    color: var(--gf-tip-fg, var(--background-normal-normal));
    box-shadow: 0 2px 8px var(--shadow-medium);
    font-weight: 600;
    white-space: nowrap;
}

.gf-tip--wrap { white-space: normal; }

/* 화살표 — data-side 를 준 이름표만. 가로 위치는 gf-tip.js 가 --gf-tip-arrow-x 로 대상 가운데에 맞춘다 */
.gf-tip--label[data-side]::after {
    content: "";
    position: absolute;
    left: var(--gf-tip-arrow-x, 50%);
    margin-left: -5px;
    border: 5px solid transparent;
}

.gf-tip--label[data-side="top"]::after {
    top: 100%;
    border-top-color: var(--gf-tip-bg, var(--label-normal));
}

.gf-tip--label[data-side="bottom"]::after {
    bottom: 100%;
    border-bottom-color: var(--gf-tip-bg, var(--label-normal));
}

/* gf-tip.js 가 body 에 하나 만들어 쓰는 떠 있는 툴팁 — 좌표는 스크립트가 left·top 으로 */
.gf-tip--float {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1090;
}

/* 눌러 여는 안내 — 트리거 [data-gf-toggletip] 의 aria-controls 가 가리키는 상자. 좌표는 gf-tip.js */
.gf-toggletip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1085;
    max-width: min(320px, calc(100vw - 16px));
    padding-right: 32px;
    pointer-events: auto;
}

.gf-toggletip__x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--label-alternative);
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
}

.gf-toggletip__x:hover,
.gf-toggletip__x:focus-visible {
    background: var(--fill-normal);
    color: var(--label-normal);
    outline: none;
}

/* ⓘ 트리거 버튼 — 글 옆에 두는 작은 둥근 버튼 */
.gf-tip-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--label-alternative);
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}

.gf-tip-btn:hover,
.gf-tip-btn:focus-visible,
.gf-tip-btn[aria-expanded="true"] {
    background: var(--fill-normal);
    color: var(--label-normal);
    outline: none;
}

@media print {
    .gf-tip,
    .gf-toggletip { display: none !important; } /* !important: 4 인쇄 */
}