/* /licenses/ only, loaded after /styles.css (its tokens, .table-scroll and
 * .license-group). The page lists every package the app ships -- 724 rows on
 * 2026-10-14 -- and 48 folded license texts, so two things matter here that no
 * other page has: how much the browser must lay out before the first paint, and
 * a five-column table on a phone.
 *
 * Wide screens keep the table, at a fixed layout: the column widths come from
 * the header row alone, so rows are drawn as they arrive instead of after all
 * of them have been measured, and the table never needs the 760px minimum that
 * pushed the fourth column out of a phone's view.
 *
 * Phones (700px and below, the site's phone breakpoint) get one card per
 * package: name and version, then license and source, then the copyright
 * lines, each value under its column's name. Every card skips layout and paint
 * until it is near the screen (content-visibility); its words stay in the page
 * for find-in-page and screen readers. Nothing scrolls sideways at 320px. */

.licenses-table { position: relative; }
.licenses-table table { table-layout: fixed; min-width: 0; }
.licenses-table thead th:nth-child(1) { width: 27%; }
.licenses-table thead th:nth-child(2) { width: 12%; }
.licenses-table thead th:nth-child(3) { width: 18%; }
.licenses-table thead th:nth-child(5) { width: 64px; }

/* A row's license link lands on its text below the sticky bar, and the text
 * it landed on is marked. */
.license-group { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
.license-group:target > summary { color: var(--accent); }
.license-group:target { border-bottom-color: var(--accent-border); }

@media (max-width: 700px) {
  .licenses-table { overflow: visible; }
  .licenses-table table,
  .licenses-table tbody { display: block; width: 100%; }
  /* The column names stay for screen readers; each card repeats them visibly. */
  .licenses-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .licenses-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-soft);
    content-visibility: auto;
    contain-intrinsic-size: auto 84px; /* the content box; a rendered card is about 110px */
  }
  .licenses-table tbody tr:last-child { border-bottom: 0; }
  .licenses-table td { display: block; min-width: 0; padding: 0; border: 0; font-size: var(--text-sm); line-height: 1.55; }
  .licenses-table td:nth-child(1) { grid-column: 1; grid-row: 1; color: var(--ink); font-size: var(--text-md); font-weight: 600; line-height: 1.45; }
  .licenses-table td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; }
  .licenses-table td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .licenses-table td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; }
  .licenses-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .licenses-table td:nth-child(2)::before,
  .licenses-table td:nth-child(3)::before,
  .licenses-table td:nth-child(4)::before {
    display: inline-block;
    margin-right: var(--space-2);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
  }
  .licenses-table td:nth-child(2)::before { content: "버전"; }
  .licenses-table td:nth-child(3)::before { content: "라이선스"; }
  .licenses-table td:nth-child(4)::before { content: "저작권 고지"; }
  /* The two links in a card take a taller touch area than their line, without
     making the card taller (padding on an inline box adds no line height). */
  .licenses-table td:nth-child(3) a,
  .licenses-table td:nth-child(5) a { padding: var(--space-2) 0; }
}