/* CampusDown Repair · Legal — 2026-10-10 motion (그록 봇): 절제된 모션. CSS 먼저, transform/opacity 만 (레이아웃 변화 0).
   광고(.rp-ad) 안·근처는 애니메이션 없음. prefers-reduced-motion 이면 전부 끔. */
/* 감정 카드 (서버 HTML, 자리 고정 -> CLS 0) */
.rp-emo{display:flex;gap:14px;align-items:flex-start;margin:18px 0 6px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,#f3faf8 0%,#ffffff 70%);border:1px solid var(--bd);box-shadow:0 1px 2px rgba(23,43,53,.04),0 8px 24px -18px rgba(23,107,97,.35);position:relative;overflow:hidden}
.rp-emo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--p),#7cc6b6)}
.rp-emo__ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:#fff;border:1px solid var(--bd);box-shadow:0 2px 6px rgba(23,43,53,.06)}
.rp-emo__h{display:block;font-size:16px;line-height:1.35;color:var(--ink);margin:1px 0 3px}
.rp-emo p{margin:0;font-size:14.5px;line-height:1.6;color:#3d5260}
.rp-emo__by{display:block;margin-top:6px;font-size:12px;color:#7d8494;letter-spacing:.02em}
.rp-s-law .rp-emo{background:linear-gradient(135deg,#f3f5fb 0%,#ffffff 70%);box-shadow:0 1px 2px rgba(23,43,53,.04),0 8px 24px -18px rgba(33,63,104,.4)}
.rp-s-law .rp-emo::before{background:linear-gradient(180deg,var(--p),#8fa6cf)}
/* 히어로: 아주 옅은 빛 번짐 (배경 위 장식, 글자/LCP 와 무관) */
.rp-hero{position:relative;overflow:hidden;isolation:isolate}
.rp-hero::before{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;background:radial-gradient(38% 38% at 28% 32%,rgba(124,198,182,.20),transparent 70%),radial-gradient(34% 34% at 74% 70%,rgba(79,140,200,.12),transparent 70%)}
.rp-s-law .rp-hero::before{background:radial-gradient(38% 38% at 28% 32%,rgba(143,166,207,.22),transparent 70%),radial-gradient(34% 34% at 74% 70%,rgba(36,124,120,.10),transparent 70%)}
/* 카드·버튼 hover / press */
.rp-card,.rp-goal{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .18s ease,background-color .18s ease}
.rp-btn,.rp-help button,.rp-sbox button,.lw-state select{transition:transform .12s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.rp-btn:active,.rp-help button:active,.rp-sbox button:active,.rp-card:active,.rp-goal:active{transform:scale(.98)}
/* TOC · FAQ 펼침 */
.rp-faq__i summary{transition:color .15s ease}
.rp-toc[open]>ol,.rp-faq__i[open]>p{animation:mo-open .28s ease both}
@keyframes mo-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.rp-res__big{font-variant-numeric:tabular-nums}
/* 스크롤 등장 (JS 가 첫 화면 밖 요소에만 .mo-r 를 붙임 → JS 없으면 그냥 보임) */
.mo-r{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.mo-r.mo-in{opacity:1;transform:none}
@media (hover:hover){
  .rp-card:hover,.rp-goal:hover{transform:translateY(-3px);box-shadow:0 12px 26px -16px rgba(23,43,53,.35)}
  .rp-btn:hover{box-shadow:0 6px 16px -8px rgba(23,43,53,.45)}
  .rp-hero::before{animation:mo-drift 26s ease-in-out infinite alternate}
}
@keyframes mo-drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
/* 광고 주변은 항상 정지 */
.rp-ad,.rp-ad *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .rp-hero::before{animation:none!important}
  .mo-r{opacity:1!important;transform:none!important;transition:none!important}
  .rp-card,.rp-goal,.rp-btn,.rp-help button,.rp-sbox button{transition:none!important}
  .rp-card:hover,.rp-goal:hover,.rp-card:active,.rp-goal:active,.rp-btn:active{transform:none!important}
  .rp-toc[open]>ol,.rp-faq__i[open]>p{animation:none!important}
}
@media print{.mo-r{opacity:1!important;transform:none!important}.rp-hero::before{display:none}}