/* v4 두 장면(대응 속도 · 자동화) 전용 CSS.
   3판의 가로 핀 트랙(.au-track)은 09-10 사장 반려로 없앴다 — 카드는 보통 격자다. 핀 없음.
   색·글꼴·간격은 tokens.css 변수만 쓴다. 숨기는 규칙은 전부 html.js 아래에만 둔다. */

/* ============================================================
   공통
   ============================================================ */
.au-sec, .sp-sec { overflow: visible; }

/* ============================================================
   #auto — 자동화 (보통 격자. 핀도 가로 스크롤도 없다)
   ============================================================ */
.au-head { margin-bottom: var(--gap-12); }

.au-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-6);
}
/* 태블릿 2열 → 데스크톱 3열(3 + 2). 마지막 줄 두 장은 왼쪽부터 채운다. */
@media (min-width: 700px)  { .au-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .au-grid { grid-template-columns: repeat(3, 1fr); } }

.au-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--gap-6);
}
.au-card-title { font-size: var(--t-lead); }
.au-card-desc { margin-top: var(--gap-2); color: var(--muted); font-size: var(--t-body); }
.au-anim { margin-top: var(--gap-6); width: 100%; height: auto; color: var(--accent); }
.au-box, .au-cell { fill: none; stroke: var(--border); stroke-width: 2; }
.au-line { stroke: var(--border); stroke-width: 3; stroke-linecap: round; }
.au-bell { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform-origin: 70px 22px; }
.au-check { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; opacity: .35; }
.au-dot { fill: var(--accent); opacity: 0; }
.au-ping { fill: var(--accent); opacity: 0; transform-origin: 92px 16px; }
.au-cell { fill: var(--surface-2); stroke: var(--border); opacity: .5; }
.au-grow { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transform-origin: 0 0; transform: scaleX(.3); opacity: .55; } /* 쉬는 상태에서도 줄이 보이게(0 이면 카드가 빈 칸으로 보였다) */

.au-principle { margin-top: var(--gap-12); }

/* 카드 3초 루프 — 기본은 정지. hover 또는 is-playing(뷰포트에 들어왔을 때 JS 가 붙임) 일 때만 돈다 */
.au-card:hover .au-dot-a,
.au-card.is-playing .au-dot-a { animation: auFlow 3s linear infinite; }
.au-card:hover .au-dot-b,
.au-card.is-playing .au-dot-b { animation: auFlow 3s linear infinite; animation-delay: .6s; }
.au-card:hover .au-dot-c,
.au-card.is-playing .au-dot-c { animation: auFlow 3s linear infinite; animation-delay: 1.2s; }

.au-card:hover .au-grow-1, .au-card.is-playing .au-grow-1 { animation: auGrow 3s ease-in-out infinite; }
.au-card:hover .au-grow-2, .au-card.is-playing .au-grow-2 { animation: auGrow 3s ease-in-out infinite; animation-delay: .2s; }
.au-card:hover .au-grow-3, .au-card.is-playing .au-grow-3 { animation: auGrow 3s ease-in-out infinite; animation-delay: .4s; }
.au-card:hover .au-grow-4, .au-card.is-playing .au-grow-4 { animation: auGrow 3s ease-in-out infinite; animation-delay: .6s; }

.au-card:hover .au-bell, .au-card.is-playing .au-bell { animation: auRing 3s ease-in-out infinite; }
.au-card:hover .au-ping, .au-card.is-playing .au-ping { animation: auPing 3s ease-in-out infinite; }

.au-card:hover .au-cell-1, .au-card.is-playing .au-cell-1 { animation: auFade 3s steps(1) infinite; }
.au-card:hover .au-cell-2, .au-card.is-playing .au-cell-2 { animation: auFade 3s steps(1) infinite; animation-delay: .1s; }
.au-card:hover .au-cell-3, .au-card.is-playing .au-cell-3 { animation: auFade 3s steps(1) infinite; animation-delay: .2s; }
.au-card:hover .au-cell-4, .au-card.is-playing .au-cell-4 { animation: auFade 3s steps(1) infinite; animation-delay: .3s; }
.au-card:hover .au-cell-5, .au-card.is-playing .au-cell-5 { animation: auFade 3s steps(1) infinite; animation-delay: .4s; }
.au-card:hover .au-cell-6, .au-card.is-playing .au-cell-6 { animation: auFade 3s steps(1) infinite; animation-delay: .5s; }
.au-card:hover .au-cell-7, .au-card.is-playing .au-cell-7 { animation: auFade 3s steps(1) infinite; animation-delay: .6s; }
.au-card:hover .au-cell-8, .au-card.is-playing .au-cell-8 { animation: auFade 3s steps(1) infinite; animation-delay: .7s; }
.au-card:hover .au-cell-9, .au-card.is-playing .au-cell-9 { animation: auFade 3s steps(1) infinite; animation-delay: .8s; }

.au-card:hover .au-check, .au-card.is-playing .au-check { animation: auWrite 3s ease-in-out infinite; }

@keyframes auFlow {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 1; }
  82%  { transform: translateX(70px); opacity: 0; }
  100% { transform: translateX(70px); opacity: 0; }
}
@keyframes auGrow {
  0%   { transform: scaleX(0); opacity: .5; }
  40%  { transform: scaleX(1); opacity: 1; }
  90%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: .5; }
}
@keyframes auRing {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-8deg); }
  20% { transform: rotate(7deg); }
  30% { transform: rotate(-5deg); }
  40% { transform: rotate(3deg); }
  50% { transform: rotate(0deg); }
}
@keyframes auPing {
  0%, 45% { transform: scale(0); opacity: 0; }
  55% { transform: scale(1.3); opacity: 1; }
  70% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes auFade {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}
@keyframes auWrite {
  0%, 20% { stroke-dashoffset: 30; opacity: .35; }
  70%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ============================================================
   #speed — 대응 속도 압축 막대
   ============================================================ */
.sp-rows { margin-top: var(--gap-12); display: flex; flex-direction: column; gap: var(--gap-12); }
.sp-row-title { font-size: var(--t-body); color: var(--text); margin-bottom: var(--gap-3); font-weight: 700; }
.sp-vs { color: var(--faint); font-weight: 400; font-size: var(--t-small); }

.sp-bar-line {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: var(--gap-4);
  margin-bottom: var(--gap-2);
}
.sp-bar-tag { font-family: var(--font-mono); font-size: var(--t-tiny); color: var(--muted); }
.sp-bar {
  position: relative;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.sp-bar-fill {
  position: absolute; inset: 0;
  transform-origin: 0 50%;
  border-radius: var(--r-pill);
  background: var(--faint);
}
.sp-bar--us .sp-bar-fill {
  background: var(--accent);
  transform: scaleX(var(--sp-final, 0.18)); /* 기본값: 이미 압축된 최종 상태 (reduced/no-gsap 도 이 상태로 보인다) */
}
.sp-bar-value { font-size: var(--t-small); color: var(--muted); white-space: nowrap; }
.sp-note-inline { display: block; font-size: var(--t-tiny); color: var(--faint); white-space: normal; margin-top: 2px; }

.sp-source { margin-top: var(--gap-8); }