/* 큐록 · features/sticky-header/sticky-header.css
   슬림 56px 고정 헤더. prototype A6+A18 v2 (reward-A6-A18-zen-tap.html) 의
   .sticky-header 디자인을 실 앱 layout 에 맞춰 통합 (2026-05-07).
   안의 cube counter / tier / streak / progress 는 모두 .sb 에서 이전. */

/* Sentinel — sticky 바로 위 1px element, IntersectionObserver 로 stuck 감지. */
.sticky-sentinel {
  height: 1px;
  margin: 0;
  visibility: hidden;
}

.sticky-header {
  /* 합쳐+분리 패턴 (2026-05-08 v2):
       rest  — .sb 와 시각적으로 한 카드 (좌우 14px margin, top corners flat)
       stuck — 풀 너비로 *확장* (margin 0, corners 0, 강한 그림자) */
  position: sticky;
  top: 0;
  margin: 0 var(--space-3h) var(--space-3);
  background: linear-gradient(180deg, rgba(15, 15, 20, 0.94), rgba(15, 15, 20, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  /* .sb 와 합쳐진 카드처럼 보이도록 top corners flat / top border invisible */
  border-top: 1px solid transparent;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 30;
  overflow: hidden;
  /* CWV: layout-bound transition 회피. margin / border-radius / box-shadow / opacity 만. */
  transition:
    margin 0.28s cubic-bezier(.32, 1, .42, 1),
    border-radius 0.28s cubic-bezier(.32, 1, .42, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

/* Stuck 상태 — viewport 상단 도달 시. 풀-블리드 + sharp corners + 강 그림자. */
.sticky-header.is-stuck {
  margin: 0 0 var(--space-3);
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

.sh-top {
  display: flex;
  align-items: center;
  gap: var(--space-2h);
  padding: var(--space-2h) var(--space-3h) var(--space-2);
}

.sh-tier {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.sh-tier-icon { font-size: 14px; }
.sh-tier-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sh-streak {
  font-size: 11px;
  color: #ffb84d;
  font-weight: 700;
  margin-left: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.sh-cubes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.sh-cube-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sh-cube-dot {
  width: 9px;
  height: 9px;
  border-radius: 1.5px;
  border: 0.5px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.35s cubic-bezier(.32, 1.6, .42, 1), box-shadow 0.35s ease;
  flex-shrink: 0;
}
.sh-cube-dot.gold   { background: linear-gradient(135deg, #fff1a8, #ffd54a 50%, #c48c1a); }
.sh-cube-dot.silver { background: linear-gradient(135deg, #f2f4f7, #b5c0cc 50%, #6d7682); }
.sh-cube-dot.red    { background: linear-gradient(135deg, #ff8080, #ff4d4d 50%, #8b1515); }
.sh-cube-dot.bumped {
  transform: scale(1.5);
  box-shadow: 0 0 12px var(--bump);
}
.sh-cube-dot.gold.bumped   { --bump: rgba(255, 213, 74, 0.9); }
.sh-cube-dot.silver.bumped { --bump: rgba(221, 225, 230, 0.9); }
.sh-cube-dot.red.bumped    { --bump: rgba(255, 77, 77, 1); }

.sh-cube-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}
.sh-cube-num.tweening      { color: #ffd54a; }
.sh-cube-num.tweening-loss { color: #ff8080; }

/* 우측 column — 다음 티어까지 +N 명료하게 (2026-05-08 사용자 피드백 반영).
   "다음 레벨업까지 필요 갯수" 가 직관적이도록 +N 큰 숫자 + arrow + 다음 티어 이름. */
.sh-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.sh-next-count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #ffd54a;
  line-height: 1;
}
.sh-next-tier {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text3);
  line-height: 1;
}

/* Progress bar — sticky 상단 (rounded corners 와 매끈히 결합).
   gold portion (메인) + silver portion (가산). 두께 6px 로 가시성 ↑.
   (2026-05-08 사용자 피드백 — 둥근 corner 에 가려져 잘 안 보였던 문제 해결) */
.sh-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  /* 위쪽만 둥글게 — sticky-header 의 top-radius (16px) 와 정렬. */
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  /* sh-top 과 시각적으로 분리되도록 살짝 inset shadow */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.sh-bar-gold {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #ffd54a, #fff1a8 60%, #ffd54a);
  transition: width 0.55s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 0 8px rgba(255, 213, 74, 0.6);
  border-top-left-radius: var(--radius-xl);
}
.sh-bar-silver {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #b5c0cc, #dde1e6);
  transition: left 0.55s cubic-bezier(.4, 0, .2, 1), width 0.55s cubic-bezier(.4, 0, .2, 1);
  opacity: 0.9;
}

/* Red collapse FX (다음 단계 — 본 파일에 자리만 잡아둠) */
.sticky-header.shaking { animation: stickyShake 0.45s ease; }
@keyframes stickyShake {
  0%, 100% { transform: translateX(-50%); }
  15%      { transform: translate(calc(-50% - 7px), 0); }
  30%      { transform: translate(calc(-50% + 7px), 0); }
  45%      { transform: translate(calc(-50% - 5px), 0); }
  60%      { transform: translate(calc(-50% + 4px), 0); }
  80%      { transform: translate(calc(-50% - 2px), 0); }
}
.sticky-header.red-burn { animation: stickyBurn 0.9s ease; }
@keyframes stickyBurn {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
  30%      {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.4),
      inset 0 0 0 2px rgba(255, 77, 77, 0.7),
      inset 0 -3px 0 rgba(255, 77, 77, 0.9);
  }
}

/* sticky-header 가 .sb 아래 in-flow 로 배치 (position:sticky) — #app-screen
   padding-top 보정 더 이상 필요 없음. (2026-05-08 합쳐+분리 패턴) */

/* .sb (Status Band) 룰 → src/features/status-band/status-band.css */