/* ============================================================ */
/* ★ 연속 로그인 현황 팝업 (달력) 스타일                            */
/* 파일명 : css/streak-calendar.css                             */
/* 사용법 : index.html <head> 에 <link>로 연결                    */
/* ============================================================ */
 
/* ---------- 뒤 배경 어둡게 (오버레이) ---------- */
.streak-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;
}
.streak-overlay.is-open{
    opacity:1;
    visibility:visible;
}
 
/* ---------- 오른쪽 슬라이드 패널 ---------- */
.streak-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) var(--spacing-component-y-28);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .28s ease;
    overflow-y:auto;
}
.streak-panel.is-open{
    transform:translateX(0);
}
 
/* ---------- 상단 : 제목 + 닫기 ---------- */
.streak-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
}
.streak-title{
    font-size:var(--font-size-18);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
    margin:0;
}
.streak-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);
}
.streak-close:hover{
    background:var(--color-container-base-low);
}
.streak-close img{
    width:calc(var(--spacing-gap-16) + var(--spacing-gap-2));
    height:calc(var(--spacing-gap-16) + var(--spacing-gap-2));
}
 
/* ---------- 누적 로그인 강조 박스 ---------- */
.streak-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;
}
.streak-summary-count{
    margin: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);
}
.streak-summary-label{
    margin:var(--spacing-gap-4) 0 0;
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
}
.streak-summary-desc{
    margin:var(--spacing-gap-6) 0 0;
    font-size:var(--font-size-12);
    color:var(--color-text-base-secondary);
}
 
/* ---------- 달력 : 월 이동 헤더 ---------- */
.streak-cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
}
.streak-cal-month{
    margin:0;
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
}
.streak-cal-nav{
    width:calc(var(--spacing-gap-24) + var(--spacing-gap-4));
    height:calc(var(--spacing-gap-24) + var(--spacing-gap-4));
    flex-shrink:0;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-small);
}
.streak-cal-nav:hover{
    background:var(--color-container-base-low);
}
.streak-cal-nav img{
    width:calc(var(--spacing-gap-12) + var(--spacing-gap-2));
    height:calc(var(--spacing-gap-12) + var(--spacing-gap-2));
}
 
/* ---------- 달력 : 요일 줄 ---------- */
.streak-cal-weekdays{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    text-align:center;
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-secondary);
    flex-shrink:0;
}
.streak-cal-weekdays .is-sun{
    color:var(--color-text-brand-primary);
}
 
/* ---------- 달력 : 날짜 그리드 ---------- */
.streak-cal-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    row-gap:var(--spacing-gap-6);
    flex-shrink:0;
}
 
/* 날짜 한 칸 */
.streak-day{
    position:relative;
    height:calc(var(--spacing-gap-32) + var(--spacing-gap-6));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--font-size-14);
    color:var(--color-text-base-primary);
}
.streak-day.is-other-month{
    color:var(--color-text-base-disabled);
}
.streak-day.is-sun{
    color:var(--color-text-brand-primary);
}
 
/* 연속 로그인 구간 : 분홍 배경 + 좌우 연결선 */
.streak-day.is-streak::before{
    content:"";
    position:absolute;
    top:var(--spacing-gap-2);
    right:0;
    bottom:var(--spacing-gap-2);
    left:0;
    background:var(--color-container-brand-secondary);
    z-index:0;
}
.streak-day.is-streak.is-streak-start::before{
    border-radius:var(--radius-full) 0 0 var(--radius-full);
}
.streak-day.is-streak.is-streak-end::before{
    border-radius:0 var(--radius-full) var(--radius-full) 0;
}
.streak-day.is-streak.is-streak-single::before{
    border-radius:var(--radius-full);
    left:var(--spacing-gap-6);
    right:var(--spacing-gap-6);
}
.streak-day span{
    position:relative;
    z-index:1;
}
 
/* 오늘/선택된 날짜 : 분홍 원 테두리 */
.streak-day.is-today span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--spacing-gap-32);
    height:var(--spacing-gap-32);
    border:var(--border-width-default) solid var(--color-border-brand-primary);
    border-radius:var(--radius-full);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
    background:var(--color-container-base-primary);
}
 
/* ---------- 하단 : 이달의 통계 ---------- */
.streak-stats{
    margin-top:auto;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    padding-top:var(--spacing-component-y-16);
    border-top:var(--border-width-default) solid var(--color-border-base-low);
}
.streak-stat-row{
    display:flex;
    align-items:center;
}
.streak-stat-icon{
    width:var(--spacing-gap-6);
    height:var(--spacing-gap-6);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.streak-stat-icon img{
    width:var(--spacing-gap-6);
    height:var(--spacing-gap-6);
}
.streak-stat-label{
    font-size:var(--font-size-14);
    color:var(--color-text-base-secondary);
}
.streak-stat-value{
    margin-left:auto;
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
}
 
/* ---------- 모바일 대응 ---------- */
@media (max-width:768px){
    .streak-panel{
        width:100%;
        max-width:100vw;
        padding:var(--spacing-component-y-20) var(--spacing-component-x-16) var(--spacing-component-y-24);
    }
}
.streak-panel > * + *{margin-top:var(--spacing-gap-20);
}
.streak-stats > * + *{margin-top:var(--spacing-gap-12);
}
.streak-stat-row > * + *{margin-left:var(--spacing-gap-10);
}
.streak-close:focus-visible,.streak-cal-nav:focus-visible{outline:var(--border-width-focus) solid var(--color-border-brand-primary);outline-offset:var(--spacing-gap-2);
}
.streak-close:active,.streak-cal-nav:active{background:var(--color-state-light-pressed);
}