/* 마일리지 아래 포인트 내역 팝오버 — .ph-* 범위에만 적용
   z-index 9000: 사무실 게임(4700)·도크(6200)·가이드(6600)보다 위 → 게임 중에도 가려지지 않음.
   위치(top/left/width/max-height)는 JS 가 anchor 기준으로 계산해 인라인으로 넣는다. */
.ph-pop {
    position: fixed; top: 72px; right: 12px; z-index: 9000;
    width: 360px; max-width: calc(100vw - 16px); box-sizing: border-box;
    display: flex; flex-direction: column; min-height: 0;
    background: var(--card-bg); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,.45), var(--shadow-md);
    font-family: 'Noto Sans KR', sans-serif; font-size: .85rem; line-height: 1.4; text-align: left;
    overflow: hidden; outline: none;
    animation: ph-in .16s ease-out;
}
.ph-pop[hidden] { display: none; }
@keyframes ph-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ph-pop { animation: none; } }

/* 머리: 제목 · 갱신 중 · 닫기 (스크롤돼도 항상 보임) */
.ph-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 16px; }
.ph-title { font-weight: 800; font-size: .92rem; }
.ph-sync { font-size: .7rem; color: var(--text-secondary); }
.ph-sync[hidden] { display: none; }
.ph-close {
    margin-left: auto; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%; border: none; background: none;
    color: var(--text-secondary); font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.ph-close:hover { background: var(--hover-bg); color: var(--text-primary); }
.ph-close:focus-visible { outline: 2px solid var(--accent-color); }

/* 잔액 */
.ph-summary {
    flex: 0 0 auto; margin: 0 12px 10px; padding: 10px 14px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    border-radius: var(--radius-md); background: var(--hover-bg);
}
.ph-sum-label { font-size: .75rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.ph-sum-value { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ph-sum-value.is-missing { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }

.ph-error {
    flex: 0 0 auto; margin: 0 12px 8px; padding: 7px 10px; border-radius: 8px;
    background: color-mix(in srgb, #f28b82 16%, transparent); color: #f28b82;
    font-size: .76rem; overflow-wrap: anywhere;
}
.ph-error[hidden] { display: none; }
.ph-error-msg { font-weight: 700; }
.ph-error-note { margin-top: 2px; font-size: .7rem; opacity: .9; }
.ph-error-note[hidden] { display: none; }

/* 내역: 이 영역만 스크롤 */
.ph-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px 12px;
}
.ph-list-label { padding: 2px 4px 4px; font-size: .72rem; font-weight: 700; color: var(--text-secondary); }
.ph-list { list-style: none; margin: 0; padding: 0; }
.ph-list[hidden] { display: none; }
.ph-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.ph-item:last-child { border-bottom: none; }

/* 적립=초록, 사용=빨강, 0=회색, 금액 미확인=빈 점선 원 */
.ph-dot {
    flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffffa0, transparent 55%), var(--ph-tone, #9aa0a6);
}
.ph-item[data-tone="plus"] { --ph-tone: #4cd07d; }
.ph-item[data-tone="minus"] { --ph-tone: #f0506e; }
.ph-item[data-tone="zero"] { --ph-tone: #9aa0a6; }
.ph-item[data-tone="unknown"] .ph-dot { background: none; border: 1.5px dashed var(--text-secondary); box-sizing: border-box; }

.ph-main { flex: 1 1 auto; min-width: 0; }
.ph-item-title {
    font-weight: 700; font-size: .84rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph-item-sub {
    margin-top: 1px; font-size: .74rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph-item-time { margin-top: 1px; font-size: .72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ph-item-title.is-missing, .ph-item-time.is-missing { font-style: italic; font-weight: 500; color: var(--text-secondary); opacity: .85; }

.ph-amount {
    flex: 0 0 auto; max-width: 45%; text-align: right;
    font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ph-item[data-tone="plus"] .ph-amount { color: #5fd08a; }
.ph-item[data-tone="minus"] .ph-amount { color: #f28b82; }
.ph-item[data-tone="zero"] .ph-amount { color: var(--text-secondary); }
.ph-item[data-tone="unknown"] .ph-amount { font-size: .74rem; font-weight: 600; font-style: italic; color: var(--text-secondary); }
[data-theme="light"] .ph-item[data-tone="plus"] .ph-amount { color: #188038; }
[data-theme="light"] .ph-item[data-tone="minus"] .ph-amount { color: #d93025; }

.ph-state { padding: 22px 8px; text-align: center; font-size: .8rem; color: var(--text-secondary); }
.ph-state[hidden] { display: none; }
.ph-state[data-kind="error"] { color: #f28b82; }

.ph-more {
    display: block; width: 100%; margin-top: 8px; padding: 8px 10px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: none; color: var(--accent-color); font: inherit; font-weight: 700; cursor: pointer;
}
.ph-more[hidden] { display: none; }
.ph-more:hover:not(:disabled) { background: var(--hover-bg); }
.ph-more:disabled { opacity: .6; cursor: default; }
.ph-more:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }

/* 팝오버가 열려 있는 동안 마일리지 알약 강조 */
.ph-anchor-open { box-shadow: 0 0 0 2px var(--accent-color); }

/* 작은 높이: 여백을 줄여 내역 칸을 조금이라도 더 확보 */
@media (max-height: 520px) {
    .ph-head { padding-top: 8px; padding-bottom: 4px; }
    .ph-summary { margin-bottom: 6px; padding: 6px 12px; }
    .ph-sum-value { font-size: 1.05rem; }
    .ph-item { padding: 6px 4px; }
}