/**
 * PullToRefresh (PTR) 전역 공통 스타일
 *
 * 앱쉘 구조 #cnt(클리핑) > .ptr-indicator(회색 영역) + #innerCnt(스크롤러) 순서
 * 인디케이터는 JS 로 #cnt 최상단에 주입되며 height 애니메이션으로 열림/닫힘
 * 색상/타이포는 Figma 기능정의서(1579:14421) 기준
 */

/* 당김 중에는 #cnt 로 밀려난 콘텐츠 하단을 잘라 회색 비침 방지 */
#cnt.ptr-active {
    overflow: hidden !important;
}

/* iOS 웹뷰 네이티브 바운스가 제스처와 겹치지 않도록 스크롤 체이닝 차단 */
#innerCnt {
    overscroll-behavior-y: contain;
}

/* 회색 영역 — 내부 그룹(아이콘+글씨)을 세로 중앙정렬 */
.ptr-indicator {
    height: 0;
    overflow: hidden;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-000); /* dolgo gray 000 #F5F7F9 */
    will-change: height;
}

/* 아이콘 + 글씨 그룹 — 드래그된 영역 중앙에 함께 노출 (gap 대신 라벨 margin 으로 접힘 가능하게) */
.ptr-indicator--inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 아이콘 슬롯 — refresh/check 를 겹쳐 배치해 전환 중 레이아웃 불변 */
.ptr-icon-stack {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
}

.ptr-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transform-box: border-box;  /* 회전 중심을 24x24 박스 중심(12,12)으로 고정 */
    transform-origin: center;
    will-change: transform, opacity;
}

/* 체크 draw-on — 선이 그어지듯 나타남 (스피너는 완료 시 즉시 제거) */
.ptr-icon--check {
    opacity: 0;
}

.ptr-check-path {
    stroke-dasharray: 22;   /* 체크 경로 길이 ≈ 19.7, 여유 있게 */
    stroke-dashoffset: 22;  /* 기본은 안 그려진 상태 */
}

.ptr-icon--check.drawing {
    opacity: 1;
    transition: opacity 120ms ease;
}

.ptr-icon--check.drawing .ptr-check-path {
    animation: ptr-check-draw 320ms ease forwards;
}

@keyframes ptr-check-draw {
    to { stroke-dashoffset: 0; }
}

/* 라벨 — 그룹 중앙정렬에 참여. 놓을 때 높이/마진을 함께 접어 아이콘이 진짜 중앙으로 부드럽게 이동 */
.ptr-label {
    margin-top: 10px;
    max-height: 20px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-400); /* #949BA8 */
    white-space: nowrap;
    transition: max-height 250ms ease, margin-top 250ms ease, transform 250ms ease, opacity 250ms ease;
}

.ptr-label.leaving {
    max-height: 0;
    margin-top: 0;
    transform: translateY(-8px);
    opacity: 0;
}

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