---
import type { Content } from "../i18n/content";

interface Props { c: Content["rules"]; }
const { c } = Astro.props;
---

{/*
  레이아웃 패밀리: 어긋난 목록.
  규칙은 왼쪽 정렬선에, 근거는 오른쪽으로 밀어 흘린다.
  카드도 상자도 없다. 어긋남 자체가 두 층위를 구분한다.
*/}
<section class="section rules" aria-labelledby="rules-h">
  <h2 id="rules-h" class="reveal">{c.h2}</h2>
  <p class="lead rules-lead reveal">{c.lead}</p>

  <dl class="full rule-list">
    {
      c.items.map((r, i) => (
        <div class="rule reveal" style={`--reveal-delay:${i * 45}ms`}>
          <dt>{r.rule}</dt>
          <dd class="muted">{r.why}</dd>
        </div>
      ))
    }
  </dl>
</section>

<style>
  .rules-lead { margin-block: var(--space-4) var(--space-7); max-width: 30em; }

  .rule-list {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: var(--gutter);
  }
  .rule {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-5);
    border-top: 1px solid var(--line);
    align-items: baseline;
  }
  .rule:last-child { border-bottom: 1px solid var(--line); }

  /* 홀수 규칙은 근거가 한 칸 더 밀려난다. 목록이 일정하게 흐르지 않는다 */
  .rule:nth-child(odd) dd { padding-left: var(--space-6); }

  dt {
    font-size: var(--step-2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
  }
  dd { margin: 0; font-size: var(--step-0); max-width: 34em; }

  @media (max-width: 800px) {
    .rule { grid-template-columns: 1fr; gap: var(--space-2); }
    .rule:nth-child(odd) dd { padding-left: 0; }
  }
</style>
