/* 카드·본문은 고정하고 단계별 SVG 내부만 역동적으로 강조한다. */
#section-2 :is(.wagle-problem-piece,.wagle-problem-alert,.wagle-problem-cross,.wagle-problem-plus,.wagle-problem-missing){transform-box:fill-box;transform-origin:center;}
#section-2 .wagle-problem-playing .wagle-problem-piece{animation:problem-panel-open 3200ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--problem-piece-index,0)*160ms);}
#section-2 [data-problem-step="0"].wagle-problem-playing .wagle-problem-piece{animation-name:problem-document-diverge;}
#section-2 [data-problem-step="0"] .wagle-problem-piece:nth-of-type(2){--problem-direction:-1;}
#section-2 [data-problem-step="1"].wagle-problem-playing .wagle-problem-piece{animation-name:problem-purchase-focus;}
#section-2 [data-problem-step="2"].wagle-problem-playing .wagle-problem-piece{animation-name:problem-material-pass;}
#section-2 .wagle-problem-playing .wagle-problem-link{animation:problem-flow 3500ms ease-in-out both;}
#section-2 .wagle-problem-playing .wagle-problem-draw{stroke-dasharray:220;animation:problem-detail-draw 3100ms ease-in-out both;animation-delay:calc(var(--problem-line-index,0)*90ms);}
#section-2 .wagle-problem-playing .wagle-problem-alert{animation:problem-alert-pulse 3400ms ease-in-out both;}
#section-2 .wagle-problem-playing .wagle-problem-cross{animation:problem-mismatch 3400ms ease-in-out both;}
#section-2 .wagle-problem-playing .wagle-problem-missing{animation:problem-missing-pulse 3400ms ease-in-out both;}
#section-2 .wagle-problem-playing .wagle-problem-plus{animation:problem-plus-turn 3400ms cubic-bezier(.2,.7,.2,1) both;}
@keyframes problem-panel-open{0%,100%{transform:translate(0,0) scale(1)}18%{transform:translateY(9px) scale(.94)}46%{transform:translateY(-10px) scale(1.05)}72%{transform:translateY(-3px) scale(1.01)}}
@keyframes problem-document-diverge{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translateY(-9px) rotate(-3deg)}46%{transform:translate(calc(var(--problem-direction,1)*13px),-5px) rotate(2deg)}64%{transform:translate(calc(var(--problem-direction,1)*8px),0) rotate(-1deg)}82%{transform:translate(0,0) rotate(0)}}
@keyframes problem-purchase-focus{0%,100%{transform:translate(0,0) scale(1) rotate(0)}22%{transform:translateY(-10px) scale(1.04) rotate(-3deg)}48%{transform:translate(7px,-4px) scale(1.06) rotate(2deg)}72%{transform:translate(0,0) scale(1)}}
@keyframes problem-material-pass{0%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(-10px,4px) scale(.94)}48%{transform:translate(8px,-7px) scale(1.06)}76%{transform:translate(0,0) scale(1)}}
@keyframes problem-flow{0%{stroke-dashoffset:0;opacity:1}20%{opacity:.4}55%{stroke:var(--wagle-accent,#ef694e);opacity:1}100%{stroke-dashoffset:-44;opacity:1}}
@keyframes problem-detail-draw{0%,100%{stroke-dashoffset:0}14%{stroke-dashoffset:220;opacity:.35}54%,75%{stroke-dashoffset:0;stroke:var(--wagle-accent-soft,#ffb59d);opacity:1}}
@keyframes problem-alert-pulse{0%,100%{transform:scale(1)}24%{transform:scale(.8)}42%,68%{transform:scale(1.2);stroke:var(--wagle-accent,#ef694e);stroke-width:2.5}55%{transform:scale(1.04)}}
@keyframes problem-mismatch{0%,100%{transform:rotate(0);opacity:1}38%{transform:rotate(-13deg);stroke:var(--wagle-accent,#ef694e)}45%{transform:rotate(13deg)}52%{transform:rotate(-8deg)}64%{transform:rotate(0)}}
@keyframes problem-missing-pulse{0%,100%{stroke-dashoffset:0;stroke-opacity:1}32%{stroke-opacity:.3}58%{stroke:var(--wagle-accent,#ef694e);stroke-width:2;stroke-opacity:1}100%{stroke-dashoffset:-36}}
@keyframes problem-plus-turn{0%,100%{transform:rotate(0) scale(1)}34%{transform:rotate(-90deg) scale(.75)}58%,72%{transform:rotate(0) scale(1.2);stroke:var(--wagle-accent,#ef694e)}}
@media(prefers-reduced-motion:reduce){#section-2 .wagle-problem-playing svg *{animation:none!important;}}

/* 섹션 2에도 푸터와 동일한 우주·별 배경을 적용한다. */
body[data-view="frontend"] #section-2.recatch-reference {
  background: #06070b url("assets/ungrammerax/assets/design-system/cosmic/stars.svg") repeat;
}