/* 움직임 페이지(effects.html) 전용 — 묶음·카드 격자와 무대. 움직임 자체는 확장
 * (font-kku-motion.css·font-kku-fx.js)이 맡고, 카드에 따로 필요한 CSS만 effects.html의
 * <style data-fx-css>에 있다('코드 복사'가 그 글을 그대로 담는다). */

.fx-axes {
  white-space: nowrap;
}

.fx-axes strong {
  color: var(--k-red);
}

.fx-ways {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  color: var(--k-ink-2);
  font-size: 0.95rem;
}

.fx-ways code {
  font-size: 0.86em;
}

.fx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.fx-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-inline-size: 0;
}

.fx-index a {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  color: var(--k-ink-2);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.fx-index a:hover,
.fx-index a:focus-visible {
  border-color: var(--k-ink);
  color: var(--k-ink);
}

.fx-toolbar [data-fx-pause][aria-pressed="true"] {
  background: var(--k-ink);
  color: #fff;
}

/* ── 묶음 ─────────────────────────────────────────────── */
.fx-group {
  padding-block: 1.5rem 3.5rem;
  scroll-margin-top: 80px;
}

.fx-group-head {
  display: grid;
  gap: 0.4rem;
  max-inline-size: 72ch;
  margin-block-end: 1.25rem;
}

.fx-group-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.25;
}

.fx-group-head h2 code {
  margin-inline-start: 0.35rem;
  font-size: 0.6em;
  vertical-align: 0.2em;
}

.fx-group-head p {
  margin: 0;
  color: var(--k-ink-2);
  line-height: 1.7;
}

/* ── 카드 ─────────────────────────────────────────────── */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 1.5rem;
}

.fx-card {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-inline-size: 0;
  padding: 1.25rem;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-paper);
  scroll-margin-top: 80px;
}

.fx-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fx-card-head h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

/* 붙이는 법 — 속성 한 단어 */
.fx-how {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: -0.35rem 0 0;
  color: var(--k-muted);
  font-size: 0.86rem;
}

.fx-how code {
  font-size: 0.92em;
}

/* 원고지 칸 안의 번호 */
.fx-no {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  border: 1.5px solid var(--k-red);
  color: var(--k-red);
  font-size: 0.85rem;
  font-weight: 800;
  background-image:
    linear-gradient(var(--k-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--k-grid) 1px, transparent 1px);
  background-size: 50% 50%;
}

.fx-why {
  margin: 0;
  color: var(--k-ink-2);
  font-size: 0.93rem;
  line-height: 1.7;
}

.fx-why strong {
  color: var(--k-red);
}

/* 견본 무대 — 흩어지고 떨어지는 자모가 들어갈 여백을 둔다. overflow: hidden은 스크롤
 * 컨테이너가 되어 스크롤 조립의 보기 타임라인(view-timeline)이 화면 대신 무대를 기준으로
 * 잡으므로, 잘라내기만 하는 clip을 쓴다. */
.fx-stage {
  min-block-size: 11rem;
  padding: 1.75rem 1.25rem;
  overflow: clip;
}

.fx-stage--tall {
  min-block-size: 13rem;
}

.fx-stage--start {
  justify-content: flex-start;
  min-block-size: 9.5rem;
}

.fx-stage--column {
  flex-direction: column;
  gap: 0.25rem;
}

/* 글자 단위 여섯 — 견본 여섯을 두 줄로 */
.fx-stage--grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 1rem 1.75rem;
}

.fx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.fx-hint {
  color: var(--k-muted);
  font-size: 0.85rem;
}

.fx-code summary {
  inline-size: fit-content;
  color: var(--k-ink-2);
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
}

.fx-code[open] summary {
  margin-block-end: 0.6rem;
}

.fx-code pre {
  max-block-size: 26rem;
  font-size: 0.8rem;
}

/* 씨앗 섞기 카드의 조작 단추(견본 마크업 안에 있어 가져간 코드에도 들어간다) */
.fx-stage .seed-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
  margin: 0.6rem 0 0;
  color: var(--k-ink-2);
  font-size: 0.88rem;
}

.fx-stage .seed-controls button {
  min-block-size: 2rem;
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--k-ink);
  border-radius: 999px;
  background: var(--k-paper);
  color: var(--k-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.fx-stage .seed-controls output {
  font-family: var(--k-mono);
  font-weight: 700;
}

.fx-stage :is(font-kku, .font-kku):focus-visible {
  outline: 3px solid var(--k-yellow);
  outline-offset: 6px;
  border-radius: 6px;
}

/* 움직임 멈추기 · 화면 밖 카드 — 반복 움직임을 그 자리에 세운다. 확장의 움직임은
 * data-kku-paused를 스스로 보지만, 조리법 카드와 커서 깜빡임도 함께 세운다.
 * 스크롤 조립은 스크롤 위치가 진행도라 세우지 않는다 */
[data-kku-paused] .fx-card:not([data-fx="scroll"]) .fx-stage *,
[data-kku-paused] .fx-card:not([data-fx="scroll"]) .fx-stage *::after,
[data-fx-offscreen]:not([data-fx="scroll"]) .fx-stage *,
[data-fx-offscreen]:not([data-fx="scroll"]) .fx-stage *::after {
  animation-play-state: paused !important;
}

@media (max-width: 560px) {
  .fx-card {
    padding: 1rem;
  }

  .fx-stage {
    padding-inline: 0.75rem;
  }

  .fx-stage--grid {
    grid-template-columns: repeat(2, auto);
  }
}

/* 좁은 화면의 머리말은 두 줄(약 97px)이다 — 카드 앵커(#fx-*)가 그 밑으로 숨지 않게 */
@media (max-width: 720px) {
  .fx-group,
  .fx-card {
    scroll-margin-top: 108px;
  }
}

/* 제자원리 보기 카드의 역할 견본 — 무대의 획과 같은 색 */
.fx-role { font-weight: 700; }
.fx-role[data-role="base"] { color: #1d3557; }
.fx-role[data-role="added"] { color: #e63946; }
.fx-role[data-role="variant"] { color: #7b4fa8; }
.fx-role[data-role="heaven"] { color: #b07c00; }
.fx-role[data-role="earth"] { color: #1f7a6f; }
.fx-role[data-role="person"] { color: #3a6ea5; }