/*
* [모듈명]: 리프레시 UI 스타일
* [파일명]: refresh.css
* [역할]: Pull-to-Refresh 인디케이터의 Black & White 디자인을 정의합니다.
*/

:root {
    --ptr-bg: #000000;
    --ptr-color: #FFFFFF;
}

/* PullToRefresh 라이브러리 기본 클래스 튜닝 */
.ptr-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: var(--ptr-color);
    z-index: 9999;
    text-align: center;
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--ptr-bg);
    border-bottom: 1px solid #111;
    pointer-events: none;
    margin-top: calc(94px + var(--safe-top)); /* 고정 헤더 아래에 노출되도록 조정 */
    z-index: 1001; /* 헤더(100)보다 높게 설정 */
}

/* 스피너 컨테이너 */
.ptr-icon {
    width: 28px;
    height: 28px;
    margin-top: 15px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* [NEW] SVG 원형 스피너 스타일 */
.spinner-svg {
    width: 100%;
    height: 100%;
    stroke: var(--ptr-color);
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
}

.spinner-circle {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 0.1s linear;
}

/* 당기기 시작할 때 텍스트 숨김 (Zero-Bloat Vibe) */
.ptr-pull, .ptr-release, .ptr-refresh {
    display: none !important;
}

/* 로딩 중일 때 무한 회전 */
.ptr-loading .ptr-icon {
    animation: ptr-spin 0.8s linear infinite;
}

/* 당길 때 게이지가 차는 느낌 (임시 구현) */
.ptr-pull .spinner-circle {
    stroke-dashoffset: 40;
}

.ptr-release .spinner-circle {
    stroke-dashoffset: 0;
}

@keyframes ptr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 사파리 상단 여백 보정 (100dvh 대응) */
body {
    overscroll-behavior-y: contain; /* 바운스 효과 제어 */
}