/* =========================================================================
   report-postit.css — 리포트 섹션 "포스트잇 탁 붙는" 스크롤 리빌 모션
   -------------------------------------------------------------------------
   - 인라인 <style> 뒤에 로드되어 소스 순서로 이김. 모두 .report- 스코프.
   - 규칙 #4: 콘텐츠를 CSS 기본값으로 숨기지 않는다.
     숨김/오프셋(초기) 상태는 report-postit.js가 .postit-ready(섹션) +
     .memo-prep / .memo-in(메모)으로만 부여한다.
     → JS가 실패하면 .postit-ready 자체가 없으므로 메모는 항상 보인다.
   - 인라인의 `.report-section.is-visible .report-memo`(특정도 0,3,0)를
     넘기 위해 prep/in 규칙은 .postit-ready로 특정도(0,4,0)를 확보한다.
   - transform/opacity만 애니메이션(60fps). prefers-reduced-motion 존중.
   ========================================================================= */

/* 0) 기본 상태 = 항상 보임 (인라인 `.report-memo{opacity:0}` 기본값을 덮어씀) */
.report-section .report-memo {
  opacity: 1;
  transform: rotate(var(--memo-settle, 0deg));
  transition: none;
}

/* 메모별 최종 정착 각도 — 서로 달라야 포스트잇 콜라주 느낌 ↑ */
.report-section .report-cycle:nth-child(1) .report-memo:nth-child(1) { --memo-settle: -3deg; }
.report-section .report-cycle:nth-child(1) .report-memo:nth-child(2) { --memo-settle:  2deg; }
.report-section .report-cycle:nth-child(1) .report-memo:nth-child(3) { --memo-settle: -1.5deg; }
.report-section .report-cycle:nth-child(2) .report-memo:nth-child(1) { --memo-settle:  2.5deg; }
.report-section .report-cycle:nth-child(2) .report-memo:nth-child(2) { --memo-settle: -2deg; }
.report-section .report-cycle:nth-child(2) .report-memo:nth-child(3) { --memo-settle:  1.5deg; }

/* 1) JS 준비(.postit-ready) 후 초기 오프셋 = 위에서 떨어질 준비 (숨김) */
.report-section.postit-ready .report-memo.memo-prep {
  opacity: 0;
  transform: translateY(-30px) rotate(calc(var(--memo-settle, 0deg) - 5deg)) scale(1.06);
  transition: none;
  will-change: transform, opacity;
}
.report-section.postit-ready .report-memo.memo-prep::before {
  opacity: 0;
}

/* 2) 착지 = 사장님이 메모지를 벽에 "탁" 붙이는 슬랩.
      cubic-bezier(.2,.8,.2,1.2)의 y=1.2가 끝에서 살짝 넘겼다 되돌아오는
      overshoot(바운스)를 만들어 준다. 스태거 지연은 JS가 inline으로 부여. */
.report-section.postit-ready .report-memo.memo-in {
  animation: report-memo-slap .52s cubic-bezier(.2, .8, .2, 1.2) both;
  will-change: transform, opacity;
}
/* 테이프(::before)는 착지에 맞춰 눌리듯 나타남. memo의 animation-delay 상속. */
.report-section.postit-ready .report-memo.memo-in::before {
  transform-origin: 50% 0;
  animation: report-tape-press .34s ease-out both;
  animation-delay: inherit;
}

@keyframes report-memo-slap {
  from {
    opacity: 0;
    transform: translateY(-30px) rotate(calc(var(--memo-settle, 0deg) - 5deg)) scale(1.06);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--memo-settle, 0deg)) scale(1);
  }
}

@keyframes report-tape-press {
  0%   { opacity: 0; transform: rotate(35deg) scaleY(.4); }
  70%  { opacity: 1; transform: rotate(35deg) scaleY(1.08); }
  100% { opacity: 1; transform: rotate(35deg) scaleY(1); }
}

/* 3) 모션 최소화 선호 — 이동/회전 변화 없이 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  .report-section .report-memo,
  .report-section.postit-ready .report-memo.memo-prep,
  .report-section.postit-ready .report-memo.memo-in {
    opacity: 1;
    transform: rotate(var(--memo-settle, 0deg));
    animation: none;
    transition: none;
    will-change: auto;
  }
  .report-section.postit-ready .report-memo.memo-prep::before,
  .report-section.postit-ready .report-memo.memo-in::before {
    opacity: 1;
    animation: none;
  }
}

/* ===== 4불릿 리포트 문서형 재정의 (marketer: 주간/월간 4불릿 리포트 UI) =====
   기존 postit 지그재그 → 풀폭 체크리스트 행. 슬랩 리빌(report-postit.js)은 유지. */
.report-paper-head{
  justify-content:flex-start !important;
  gap:10px !important;
  font-size:20px !important; min-height:auto !important;
  padding:22px 26px 14px !important;
}
.report-paper-head::after{top:auto !important; bottom:0 !important; left:26px !important; right:26px !important; background:rgba(17,17,17,.1) !important;}
.report-paper-week{margin-left:auto; color:#8b95a1; font-size:13px; font-weight:700; letter-spacing:-.2px;}
.report-paper-lead{margin:16px 26px 0; color:#17181c; font-size:15.5px; font-weight:800; letter-spacing:-.3px; line-height:1.45;}
.report-memo-list{padding:14px 26px 26px !important; gap:10px !important;}
.report-memo{
  width:100% !important; min-height:auto !important;
  justify-self:stretch !important;
  border-radius:12px !important; padding:14px 16px !important;
  --memo-rotate:0deg !important; --memo-settle:0deg !important;
  box-shadow:0 8px 20px rgba(17,17,17,.08) !important;
}
.report-memo::before{display:none !important;}
.report-memo p{
  margin:0 !important; display:flex; gap:9px; align-items:flex-start;
  color:#3d4650 !important; font-size:14px !important; font-weight:600 !important; line-height:1.5 !important;
}
.rm-check{flex:0 0 auto; color:var(--orange,#f97316); font-weight:900;}