/* ============================================================ */
/* ★ 포인트 상세 내역 팝업 (오른쪽 슬라이드 패널) 스타일             */
/* 파일명 : css/point-detail.css                                */
/* 사용법 : index.html <head> 에 <link>로 연결                    */
/* 크기/동작은 streak-calendar.css 의 .streak-panel 과 동일함     */
/* ============================================================ */
 
/* ---------- 뒤 배경 어둡게 (오버레이) : 달력과 동일 ---------- */
.point-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:var(--color-container-overlay);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease;
    z-index:1900;
}
.point-overlay.is-open{
    opacity:1;
    visibility:visible;
}
 
/* ---------- 오른쪽 슬라이드 패널 : 달력 패널과 동일 크기(430px) ---------- */
.point-panel{
    position:fixed;
    top:0;
    right:0;
    width:calc(var(--spacing-gap-40) * 11 + var(--spacing-gap-24) + var(--spacing-gap-6));
    max-width:90vw;
    height:100vh;
    background:var(--color-container-base-primary);
    border-left:var(--border-width-default) solid var(--color-border-base-low);
    z-index:2000;
    padding:var(--spacing-component-y-28) var(--spacing-component-x-20) 0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .28s ease;
}
.point-panel.is-open{
    transform:translateX(0);
}
 
/* ---------- 상단 : 제목 + 닫기 (항상 고정) ---------- */
.point-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
    padding-bottom:var(--spacing-component-y-20);
}
.point-title{
    font-size:var(--font-size-18);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
    margin:0;
}
.point-close{
    width:var(--spacing-gap-32);
    height:var(--spacing-gap-32);
    flex-shrink:0;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-small);
}
.point-close:hover{
    background:var(--color-container-base-low);
}
.point-close img{
    width:calc(var(--spacing-gap-16) + var(--spacing-gap-2));
    height:calc(var(--spacing-gap-16) + var(--spacing-gap-2));
}
 
/* ---------- 본문 : 제목 아래 전부 스크롤 영역 (주의사항까지 포함) ---------- */
.point-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    padding-bottom:var(--spacing-component-y-28);
}
 
/* ---------- 총 보유 포인트 강조 박스 ---------- */
.point-summary{
    flex-shrink:0;
    background:var(--color-container-brand-secondary);
    border-radius:var(--radius-medium);
    padding:var(--spacing-component-y-20) var(--spacing-component-x-16);
    text-align:center;
}
.point-summary-label{
    margin:0;
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-secondary);
}
.point-summary-value{
    margin:var(--spacing-gap-6) 0 0;
    font-size:var(--font-size-36);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
    line-height:var(--line-height-tight);
}
.point-summary-unit{
    font-size:var(--font-size-20);
    font-weight:var(--font-weight-bold);
    margin-left:var(--spacing-gap-2);
}
 
/* ---------- 섹션 제목 ---------- */
.point-section-title{
    margin:0;
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
    flex-shrink:0;
}
 
/* ---------- 테이블 공통 ---------- */
.point-table-wrap{
    flex-shrink:0;
    overflow-x:auto;
}
.point-table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--font-size-12);
}
.point-table thead th{
    background:var(--color-container-base-low);
    color:var(--color-text-base-secondary);
    font-weight:var(--font-weight-bold);
    text-align:center;
    padding:var(--spacing-component-y-8) var(--spacing-component-x-8);
    white-space:nowrap;
}
.point-table tbody td{
    padding:var(--spacing-component-y-8) var(--spacing-component-x-8);
    border-bottom:var(--border-width-default) solid var(--color-border-base-low);
    color:var(--color-text-base-primary);
    text-align:center;
}
.point-table tbody tr:last-child td{
    border-bottom:none;
}
.point-table--history td:first-child,
.point-table--history td:nth-child(2){
    white-space:normal;
    word-break:keep-all;
}
 
/* 활동별 포인트 내역 : 활동명 강조 + 적립포인트 색상 */
.point-table--activity td:first-child{
    font-weight:var(--font-weight-bold);
    white-space:nowrap;
}
.point-table--activity td.point-value{
    font-weight:var(--font-weight-bold);
    font-size:var(--font-size-12);
    white-space:nowrap;
}
.point-table--activity td.point-value.c-login{ color:var(--color-text-brand-primary); }
.point-table--activity td.point-value.c-test{ color:var(--color-text-brand-primary); }
.point-table--activity td.point-value.c-rp{ color:var(--color-text-brand-primary); }
.point-table--activity td.point-value.c-study{ color:var(--color-text-brand-primary); }
 
/* 최근 획득 내역 : 획득 P 컬럼 강조 */
.point-table--history th:last-child,
.point-table--history td:last-child{
    text-align:right;
    white-space:nowrap;
}
.point-table--history td.point-gain{
    color:var(--color-text-brand-primary);
    font-weight:var(--font-weight-bold);
}
 
/* ---------- 페이지네이션 ---------- */
.point-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.point-page-nav{
    width:var(--spacing-gap-24);
    height:var(--spacing-gap-24);
    flex-shrink:0;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-small);
}
.point-page-nav:hover{
    background:var(--color-container-base-low);
}
.point-page-nav img{
    width:calc(var(--spacing-gap-12) - var(--border-width-default));
    height:calc(var(--spacing-gap-12) - var(--border-width-default));
}
.point-page-numbers{
    display:flex;
    align-items:center;
}
.point-page-btn{
    width:var(--spacing-gap-24);
    height:var(--spacing-gap-24);
    border:none;
    background:transparent;
    border-radius:var(--radius-small);
    font-size:var(--font-size-12);
    color:var(--color-text-base-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.point-page-btn:hover{
    background:var(--color-container-base-low);
}
.point-page-btn.is-active{
    border:var(--border-width-default) solid var(--color-border-brand-primary);
    color:var(--color-text-brand-primary);
    font-weight:var(--font-weight-bold);
}
 
/* ---------- 주의사항 : 본문 스크롤 맨 아래에 위치 ---------- */
.point-notice{
    flex-shrink:0;
    background:var(--color-container-base-low);
    border-radius:var(--radius-medium);
    padding:var(--spacing-component-y-14) var(--spacing-component-x-16);
}
.point-notice-title{
    display:flex;
    align-items:center;
    margin:0 0 var(--spacing-gap-8);
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-secondary);
}
.point-notice-icon{
    width:var(--spacing-gap-16);
    height:var(--spacing-gap-16);
    flex-shrink:0;
    border-radius:var(--radius-full);
    background:var(--color-border-base-high);
    color:var(--color-text-base-on-color);
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    display:flex;
    align-items:center;
    justify-content:center;
}
.point-notice-list{
    margin:0;
    padding-left:var(--spacing-component-x-16);
    font-size:var(--font-size-12);
    color:var(--color-text-base-secondary);
    line-height:var(--line-height-relaxed);
}
 
/* ---------- 모바일 대응 : 달력과 동일 기준 ---------- */
@media (max-width:768px){
    .point-panel{
        width:100%;
        max-width:100vw;
        padding:var(--spacing-component-y-20) var(--spacing-component-x-16) 0;
    }
}
.point-body > * + *{margin-top:var(--spacing-gap-16);
}
.point-pagination > * + *{margin-left:var(--spacing-gap-8);
}
.point-page-numbers > * + *{margin-left:var(--spacing-gap-4);
}
.point-notice-title > * + *{margin-left:var(--spacing-gap-6);
}
.point-close:focus-visible,.point-page-nav:focus-visible,.point-page-btn:focus-visible{outline:var(--border-width-focus) solid var(--color-border-brand-primary);outline-offset:var(--spacing-gap-2);
}
.point-close:active,.point-page-nav:active,.point-page-btn:active{background:var(--color-state-light-pressed);
}