/* ============================================================
   Track BB — Interaction Layer Styles (additive only)
   ----------------------------------------------------------
   기존 style.css 비파괴. 모든 클래스는 .bb- prefix.
   prefers-reduced-motion 의무 존중.
   60fps: transform / opacity / backdrop-filter 만 사용.
   ============================================================ */

/* ---------- Easing tokens (Apple) ---------- */
:root {
  --bb-ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
  --bb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bb-purple: #5856d6;
  --bb-purple-soft: rgba(88, 86, 214, 0.16);
  --bb-blue: #0071e3;
  --bb-pink: #bf5af2;
  --bb-orange: #ff9f0a;
  --bb-mx: 0;
  --bb-my: 0;
  --bb-scroll: 0;
  /* 가볍게 폴리시: 모든 인터랙션 transition 200ms 통일 */
  --bb-transition-snap: 200ms var(--bb-ease-out);
}

/* ---------- prefers-reduced-motion 가드 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bb-magnetic, .bb-tilt-host, .bb-parallax,
  .bb-ripple-wave, .bb-confetti-canvas,
  .bb-cursor, .bb-swipe-dragging,
  .bb-dropzone-fade-in, .bb-pull-refresh, .bb-progress-bar,
  .bb-toast, .bb-diff-pop {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   1. 마그네틱 버튼
   ============================================================ */
.bb-magnetic {
  transition: transform 0.4s var(--bb-ease-spring);
  will-change: transform;
}

/* ============================================================
   2. 클릭 리플
   ============================================================ */
.bb-ripple-wave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* 가볍게 폴리시: opacity 0.42 → 0.20, scale 3 → 2 (스케일은 transform), 0.7s → 0.4s */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  animation: bb-ripple-anim 0.4s var(--bb-ease-out) forwards;
  z-index: 0;
}
.card .bb-ripple-wave,
.exam-card .bb-ripple-wave,
.hitl-card .bb-ripple-wave {
  background: radial-gradient(circle, rgba(88, 86, 214, 0.12) 0%, rgba(88, 86, 214, 0) 70%);
}
@keyframes bb-ripple-anim {
  /* 가볍게 폴리시: scale 끝값도 작게 (.bb-ripple-wave size 가 이미 1.6 배라 충분) */
  to { transform: scale(0.66); opacity: 0; }
}

/* ============================================================
   3. 카운터 (애니메이션 숫자)
   ============================================================ */
.bb-counter-running {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

/* ============================================================
   4. 컨페티
   ============================================================ */
.bb-confetti-canvas {
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   5. 멀티 라이브 커서
   ============================================================ */
.bb-cursor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}
.bb-cursor {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.18s var(--bb-ease-apple), opacity 0.4s;
  will-change: transform;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.bb-cursor svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.bb-cursor-label {
  margin-left: -4px;
  margin-top: 14px;
  padding: 2px 8px;
  border-radius: 6px;
  background: currentColor;
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.bb-cursor-label::first-letter { text-transform: uppercase; }
.bb-cursor-stale { opacity: 0.25; }

/* ============================================================
   6. HITL 스와이프 카드
   ============================================================ */
.hitl-card.bb-swipe-dragging {
  transition: none;
  cursor: grabbing;
  z-index: 5;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
}
.hitl-card[data-swipe-hint="right"]::after {
  content: "✓ 승인";
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 14px;
  background: var(--ok, #34c759);
  color: white;
  font-weight: 700;
  border-radius: 999px;
  pointer-events: none;
  font-size: 14px;
}
.hitl-card[data-swipe-hint="left"]::after {
  content: "✕ 거부";
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  background: var(--high, #ff3b30);
  color: white;
  font-weight: 700;
  border-radius: 999px;
  pointer-events: none;
  font-size: 14px;
}
.hitl-card.bb-swipe-exit-right {
  transform: translate3d(140%, 40px, 0) rotate(20deg) !important;
  opacity: 0;
  transition: transform 0.45s var(--bb-ease-apple), opacity 0.45s;
}
.hitl-card.bb-swipe-exit-left {
  transform: translate3d(-140%, 40px, 0) rotate(-20deg) !important;
  opacity: 0;
  transition: transform 0.45s var(--bb-ease-apple), opacity 0.45s;
}
.hitl-card.bb-swipe-skip {
  transform: translate3d(0, -60px, 0) scale(0.92) !important;
  opacity: 0;
  transition: transform 0.35s, opacity 0.35s;
}

/* ============================================================
   7. 드롭존
   ============================================================ */
.bb-dropzone {
  display: block;
  position: relative;
  padding: 28px 24px;
  border: 2px dashed var(--line, #e3e7ec);
  border-radius: var(--r-lg, 20px);
  background: linear-gradient(180deg, #fbfcfd, #f5f5f7);
  cursor: pointer;
  transition: border-color 0.25s var(--bb-ease-apple),
              box-shadow 0.25s var(--bb-ease-apple),
              transform 0.25s var(--bb-ease-apple),
              background 0.25s;
}
.bb-dropzone:hover {
  border-color: var(--bb-purple);
  background: linear-gradient(180deg, #fafaff, #f3f3fb);
}
.bb-dropzone-over {
  border-color: var(--bb-purple) !important;
  background: linear-gradient(180deg, #f5f3ff, #ece9fe) !important;
  box-shadow: 0 0 0 6px var(--bb-purple-soft), 0 12px 32px rgba(88, 86, 214, 0.18);
  transform: scale(1.01);
}
.bb-dropzone-over .bb-dropzone-primary::after {
  content: " — 여기에 놓으세요";
  color: var(--bb-purple);
}
.bb-dropzone-pop {
  animation: bb-dz-pop 0.6s var(--bb-ease-spring);
}
@keyframes bb-dz-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.02); box-shadow: 0 0 0 10px var(--bb-purple-soft); }
  100% { transform: scale(1); }
}
.bb-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bb-dropzone-icon {
  color: var(--bb-purple);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--bb-purple-soft);
}
.bb-dropzone-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bb-dropzone-primary {
  font-size: 15px;
  color: var(--dark, #1d1d1f);
  font-weight: 600;
}
.bb-dropzone-secondary {
  font-size: 12.5px;
  color: var(--gray, #6e6e73);
}
.bb-dropzone-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.bb-dropzone-filename {
  font-size: 13px;
  color: var(--bb-purple);
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
}
.bb-dropzone-fade-in {
  animation: bb-fade-up 0.5s var(--bb-ease-out) forwards;
}
@keyframes bb-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   8. 패널 리사이즈
   ============================================================ */
.bb-resize-split { display: flex; align-items: stretch; }
.bb-resize-divider {
  flex: 0 0 8px;
  cursor: col-resize;
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 0.2s;
}
.bb-resize-divider:hover,
.bb-resize-active {
  background: var(--bb-purple-soft);
}
.bb-resize-grip {
  width: 3px;
  height: 36px;
  background: var(--gray-soft, #98989d);
  border-radius: 2px;
  opacity: 0.4;
  transition: opacity 0.2s, background 0.2s;
}
.bb-resize-divider:hover .bb-resize-grip,
.bb-resize-active .bb-resize-grip {
  opacity: 1;
  background: var(--bb-purple);
}

/* ============================================================
   9. Sortable
   ============================================================ */
.bb-sortable-item {
  transition: transform 0.18s var(--bb-ease-apple), box-shadow 0.18s;
}
.bb-sort-dragging {
  opacity: 0.55;
  transform: scale(1.02) rotate(0.6deg);
  box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.18);
}
.bb-sort-handle {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--gray-soft, #98989d);
  cursor: grab;
  font-size: 14px;
  letter-spacing: -3px;
  padding: 4px 6px;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  user-select: none;
}
.bb-sortable-item:hover .bb-sort-handle { opacity: 1; }
.bb-sort-handle:hover { color: var(--bb-purple); }
.bb-sort-handle:active { cursor: grabbing; }

/* ============================================================
   10. 인라인 편집
   ============================================================ */
.bb-editable {
  position: relative;
  cursor: text;
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 -4px;
  transition: background 0.2s;
}
.bb-editable:hover { background: rgba(88, 86, 214, 0.06); }
.bb-editable-active {
  background: white;
  outline: 2px solid var(--bb-purple);
  outline-offset: 1px;
}
.bb-editable-pencil {
  position: absolute;
  top: -8px;
  right: -16px;
  font-size: 11px;
  color: var(--bb-purple);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.bb-editable:hover .bb-editable-pencil { opacity: 0.8; }
.bb-editable-active .bb-editable-pencil { display: none; }

/* ============================================================
   11. 툴팁
   ============================================================ */
.bb-tooltip {
  position: absolute;
  z-index: 9995;
  pointer-events: none;
  background: #1d1d1f;
  color: white;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s var(--bb-ease-apple);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
  max-width: 280px;
}
.bb-tooltip-show { opacity: 1; transform: translateY(0); }
.bb-tooltip-kbd {
  background: rgba(255, 255, 255, 0.18);
  color: white;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   12. 풀-투-리프레시
   ============================================================ */
.bb-pull-refresh {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 999px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
  z-index: 9990;
  transition: transform 0.4s var(--bb-ease-spring);
  pointer-events: none;
  font-size: 13px;
  font-weight: 600;
}
.bb-pull-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--bb-purple-soft);
  border-top-color: var(--bb-purple);
  border-radius: 50%;
  transition: transform 0.2s;
}
.bb-pull-armed .bb-pull-text::after { content: " · 놓으세요"; }
.bb-pull-armed .bb-pull-spinner { transform: rotate(180deg); }
.bb-pull-loading .bb-pull-spinner { animation: bb-spin 0.8s linear infinite; }
@keyframes bb-spin { to { transform: rotate(360deg); } }

/* ============================================================
   13. 스티키 nav 블러
   ============================================================ */
.bb-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(var(--bb-nav-blur, 0px)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--bb-nav-blur, 0px)) saturate(180%);
  background: rgba(245, 245, 247, var(--bb-nav-bg, 0));
  transition: box-shadow 0.3s;
}
.bb-sticky-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }

/* ============================================================
   14. 패럴랙스 — 가볍게 폴리시: 18px → 9px (강도 절반)
   ============================================================ */
.bb-hero::before {
  transform: translate3d(calc(var(--bb-mx) * 9px), calc(var(--bb-my) * 9px), 0);
  transition: transform 0.5s var(--bb-ease-out);
}
.bb-parallax { will-change: transform; transition: transform 0.2s var(--bb-ease-out); }

/* ============================================================
   15. 로딩 진행 바
   ============================================================ */
.bb-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.bb-progress-active { opacity: 1; }
.bb-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--bb-purple), var(--bb-pink), var(--bb-blue));
  background-size: 200% 100%;
  animation: bb-progress-shimmer 1.6s linear infinite;
  transition: width 0.2s var(--bb-ease-out);
  box-shadow: 0 0 8px rgba(88, 86, 214, 0.45);
}
@keyframes bb-progress-shimmer {
  to { background-position: -200% 0; }
}

/* ============================================================
   A. Card hover 3D tilt — 가볍게 폴리시: max 3deg, shine 제거
   ============================================================ */
.bb-tilt-host {
  transform-style: preserve-3d;
  transition: transform 0.35s var(--bb-ease-out);
  will-change: transform;
  position: relative;
}
/* shine pseudo-element 제거 (Tilt JS 에서 shine var 도 미설정) */

/* ============================================================
   B. Skeleton swap (지원 클래스)
   ============================================================ */
.bb-skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f7 50%, #eee 75%);
  background-size: 200% 100%;
  animation: bb-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent;
  user-select: none;
}
@keyframes bb-shimmer {
  to { background-position: -200% 0; }
}

/* ============================================================
   C. Toast 알림
   ============================================================ */
.bb-toast-host {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9997;
  max-width: 340px;
  pointer-events: none;
}
.bb-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dark, #1d1d1f);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s var(--bb-ease-spring), opacity 0.3s;
  pointer-events: auto;
}
.bb-toast-in { transform: translateX(0); opacity: 1; }
.bb-toast-out { transform: translateX(40%); opacity: 0; }
.bb-toast-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
}
.bb-toast-success .bb-toast-icon { background: var(--ok, #34c759); }
.bb-toast-error .bb-toast-icon { background: var(--high, #ff3b30); }
.bb-toast-warn .bb-toast-icon { background: var(--warn, #ff9f0a); }
.bb-toast-info .bb-toast-icon { background: var(--bb-blue); }
.bb-toast-msg { flex: 1; line-height: 1.4; }
.bb-toast-close {
  background: none;
  border: none;
  color: var(--gray, #6e6e73);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.bb-toast-close:hover { background: rgba(0, 0, 0, 0.06); }

/* ============================================================
   D. Diff pop animation
   ============================================================ */
.bb-diff-pop {
  position: absolute;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.4s var(--bb-ease-out), transform 0.9s var(--bb-ease-out);
  pointer-events: none;
  z-index: 9996;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.bb-diff-good { color: #1f8a3d; background: rgba(52, 199, 89, 0.16); }
.bb-diff-bad { color: #c92a20; background: rgba(255, 59, 48, 0.16); }
.bb-diff-arrow { font-size: 10px; }
.bb-diff-show { opacity: 1; transform: translateY(-30px); }

/* ============================================================
   E. Focus ring spring
   ============================================================ */
.bb-using-keyboard input:focus-visible,
.bb-using-keyboard textarea:focus-visible,
.bb-using-keyboard select:focus-visible,
.bb-using-keyboard button:focus-visible,
.bb-using-keyboard [tabindex]:focus-visible,
.bb-using-keyboard a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bb-purple-soft), 0 0 0 1px var(--bb-purple);
  border-radius: 6px;
  transition: box-shadow 0.3s var(--bb-ease-spring);
  animation: bb-focus-bounce 0.35s var(--bb-ease-spring);
}
@keyframes bb-focus-bounce {
  0%   { box-shadow: 0 0 0 0 var(--bb-purple-soft), 0 0 0 0 var(--bb-purple); }
  60%  { box-shadow: 0 0 0 6px var(--bb-purple-soft), 0 0 0 2px var(--bb-purple); }
  100% { box-shadow: 0 0 0 3px var(--bb-purple-soft), 0 0 0 1px var(--bb-purple); }
}

/* ============================================================
   F. 인터랙션 강도 — body class 별 override (가볍게 폴리시)
   ----------------------------------------------------------
   .interaction-minimal : 카드 hover lift 제거 / tilt off / parallax off
   .interaction-balanced (default) : 카드 hover lift 절반 / shimmer 약화
   .interaction-rich : 기존 Track BB 풀버전
   ============================================================ */

/* minimal: 거의 모든 transform-based 인터랙션 disable */
.interaction-minimal .bb-tilt-host,
html[data-interaction="minimal"] .bb-tilt-host { transform: none !important; }
.interaction-minimal .bb-hero::before,
html[data-interaction="minimal"] .bb-hero::before { transform: none !important; }
.interaction-minimal .bb-magnetic,
html[data-interaction="minimal"] .bb-magnetic { transform: none !important; }

/* balanced: 카드 hover lift -4px → -1px (subtle), border 진해짐만 */
.interaction-balanced .card:hover,
html[data-interaction="balanced"] .card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.06) !important;
}
.interaction-balanced .exam-card:hover,
html[data-interaction="balanced"] .exam-card:hover {
  transform: translateY(-1px) !important;
}
/* minimal: lift 도 제거 — border tone 변화만 */
.interaction-minimal .card:hover,
.interaction-minimal .exam-card:hover,
html[data-interaction="minimal"] .card:hover,
html[data-interaction="minimal"] .exam-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* card-icon hover scale 약화 (1.1→1.04, rotate 제거) */
.interaction-balanced .card:hover .card-icon,
.interaction-minimal .card:hover .card-icon,
html[data-interaction="balanced"] .card:hover .card-icon,
html[data-interaction="minimal"] .card:hover .card-icon {
  transform: scale(1.04) !important;
}

/* shimmer 약화: 2s → 4s, opacity ↓ */
.interaction-balanced .badge.solving::after,
.interaction-balanced .badge.auditing::after,
.interaction-balanced .badge.explaining::after,
.interaction-balanced .badge.preparing::after,
.interaction-minimal .badge.solving::after,
.interaction-minimal .badge.auditing::after,
.interaction-minimal .badge.explaining::after,
.interaction-minimal .badge.preparing::after,
html[data-interaction="balanced"] .badge.solving::after,
html[data-interaction="balanced"] .badge.auditing::after,
html[data-interaction="balanced"] .badge.explaining::after,
html[data-interaction="balanced"] .badge.preparing::after,
html[data-interaction="minimal"] .badge.solving::after,
html[data-interaction="minimal"] .badge.auditing::after,
html[data-interaction="minimal"] .badge.explaining::after,
html[data-interaction="minimal"] .badge.preparing::after {
  animation-duration: 4s !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent) !important;
}

/* mesh orb floating 30s → 60s (더 천천히, subtle) */
.interaction-balanced .mesh-orb,
.interaction-minimal .mesh-orb,
html[data-interaction="balanced"] .mesh-orb,
html[data-interaction="minimal"] .mesh-orb {
  animation-duration: 60s !important;
}
/* minimal: mesh orb 자체 거의 안 보이게 */
.interaction-minimal .mesh-orb,
html[data-interaction="minimal"] .mesh-orb { opacity: 0.5; }

/* 모든 transition 통일 (인터랙션 일관성) */
.interaction-balanced .card,
.interaction-balanced .exam-card,
.interaction-balanced .btn,
.interaction-balanced button.primary,
.interaction-minimal .card,
.interaction-minimal .exam-card,
.interaction-minimal .btn,
.interaction-minimal button.primary,
html[data-interaction="balanced"] .card,
html[data-interaction="balanced"] .exam-card,
html[data-interaction="balanced"] .btn,
html[data-interaction="balanced"] button.primary,
html[data-interaction="minimal"] .card,
html[data-interaction="minimal"] .exam-card,
html[data-interaction="minimal"] .btn,
html[data-interaction="minimal"] button.primary {
  transition: transform 200ms var(--bb-ease-out),
              border-color 200ms var(--bb-ease-out),
              box-shadow 200ms var(--bb-ease-out),
              background 200ms var(--bb-ease-out) !important;
}

/* 신규 (가벼움 강조): subtle hover preview — border 1px 진해짐 */
.interaction-balanced .card:hover,
.interaction-minimal .card:hover,
html[data-interaction="balanced"] .card:hover,
html[data-interaction="minimal"] .card:hover {
  border-color: var(--primary-line, rgba(0,113,227,0.25)) !important;
}