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

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

<section class="section band-inverse has-bg" aria-labelledby="type-h">
  <BgPhoto variant="paper" mode="drift" depth={0.25} opacity={1} />
  <p class="eyebrow reveal">{c.eyebrow}</p>
  <h2 id="type-h" class="reveal">{c.h2}</h2>
  <p class="lead type-lead reveal">{c.lead}</p>

  {/*
    주장을 글로 하지 않고 실물로 보여준다.

    한때 word-break 하나만 두 칼럼으로 비교했는데, 어절이 짧아 두 쪽이
    같은 자리에서 끊겼다 — 줄 수도 높이도 똑같았다. 차이가 0 인 비교는
    증명이 아니라 주장의 반증이다. 셋으로 늘리고, 잘리는 긴 어절을 넣고,
    폭을 좁혀 실제로 갈리게 만들었다.
  */}
  <div class="full demos reveal">
    {
      c.demos.map((d) => (
        <section class="demo" aria-label={d.title}>
          <h3 class="demo-title">{d.title}</h3>
          <div class="demo-pair">
            <div class="demo-side">
              <p class="demo-tag mono is-bad">{d.badLabel}</p>
              <p lang="ko" class:list={["demo-text", `bad-${d.id}`]}>{c.sample}</p>
            </div>
            <div class="demo-side">
              <p class="demo-tag mono is-good">{d.goodLabel}</p>
              <p lang="ko" class:list={["demo-text", `good-${d.id}`]}>{c.sample}</p>
            </div>
          </div>
          <p class="demo-note muted">{d.note}</p>
        </section>
      ))
    }
  </div>

  <ul class="type-rules reveal">
    {c.rules.map((r) => (<li>{r}</li>))}
  </ul>
</section>

<style>
  .type-lead { margin-bottom: var(--space-6); max-width: var(--measure); }

  .demos {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--space-6);
  }

  .demo-title {
    font-size: var(--step-1);
    margin-bottom: var(--space-3);
  }

  .demo-pair {
    display: grid;
    /* 폭을 좁게 고정한다. 넓으면 두 쪽이 같은 자리에서 끊겨 차이가 사라진다 */
    grid-template-columns: repeat(2, minmax(0, 15rem));
    gap: var(--space-5);
    align-items: start;
  }

  .demo-side { min-width: 0; }

  .demo-tag {
    font-size: var(--step--1);
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--line);
  }
  .is-bad  { color: var(--ink-muted); }
  .is-good { color: var(--accent); border-bottom-color: var(--accent); }

  .demo-text {
    margin: 0;
    font-size: var(--step-0);
    line-height: var(--leading-normal);
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* ---- 셋의 실제 차이 ------------------------------------- */
  /* 1) 줄바꿈 — 기본값은 어절 한가운데를 끊는다 */
  .bad-break  { word-break: break-all; }
  .good-break { word-break: keep-all; }

  /* 2) 행간 — 라틴 표준을 그대로 쓰면 받침이 붙어 보인다 */
  .bad-leading  { line-height: 1.45; }
  .good-leading { line-height: 1.75; }

  /* 3) 크기 — 라틴의 라벨 크기는 한글에서 획이 뭉갠다 */
  .bad-size  { font-size: 11px; }
  .good-size { font-size: 15px; }

  .demo-note {
    margin: var(--space-3) 0 0;
    font-size: var(--step-0);
    max-width: var(--measure);
  }

  .type-rules {
    list-style: none;
    margin: var(--space-7) 0 0;
    padding: 0;
    display: grid;
    gap: 0;
  }
  .type-rules li {
    padding-block: var(--space-3);
    border-top: 1px solid var(--line);
  }

  @media (max-width: 760px) {
    .demo-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  }
</style>
