/* ===========================================================================
   큰 숫자 콜아웃 · 기능 행 · 각주

   Apple 이 수치를 다루는 방식: 숫자를 문장 안에 넣지 않고 통째로 꺼내
   60~72px 로 세운 뒤, 그 아래 17px 로 무엇인지 적는다. 근거는 각주로 내린다.
   =========================================================================== */

/* ── 큰 숫자 ─────────────────────────────────────────────── */

.callouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nx-sp-12) var(--nx-sp-6);
}

.callouts--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.callouts--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.callout {
  min-width: 0;
}

.callout__value {
  font-size: var(--nx-fs-callout);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--nx-tracking-tight);
  font-variant-numeric: tabular-nums;
  /* '120,000' 과 '통/h' 가 줄바꿈으로 갈라지면 수치로 읽히지 않는다. */
  white-space: nowrap;
  color: inherit;
}

.callout__unit {
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-left: 3px;
}

.callout__label {
  margin-top: var(--nx-sp-3);
  font-size: var(--nx-fs-base);
  font-weight: 500;
  color: var(--nx-text);
  line-height: 1.35;
}

/* 수치가 성립하는 조건을 적는 자리다. 12px로 두면 숫자만 읽히고 조건은
   읽히지 않는다. div라 p에 건 pretty가 닿지 않는다. 한두 줄짜리 짧은
   글이라 줄 길이를 고르게 맞춰 끝말 하나만 남는 줄을 막는다. */
.callout__note {
  margin-top: var(--nx-sp-2);
  font-size: var(--nx-fs-sm);
  line-height: 1.5;
  color: var(--nx-text-2);
  text-wrap: balance;
}

.callouts--center .callout {
  text-align: center;
}

/* 4열일 때 1440px에서 '120,000통/h'가 322px인데 칸은 278px이다.
   4열이 펼쳐지는 폭에서만 숫자를 화면 폭에 맞춰 줄인다. */
@media (min-width: 1041px) {
  .callouts:not(.callouts--2):not(.callouts--3) .callout__value {
    font-size: clamp(40px, 4.2vw, 60px);
  }
}

/* 검은 구간의 큰 숫자만 빛나게 한다. 흰 구간의 숫자는 단색으로 둔다.
   inline-block 이라야 그라데이션이 칸 폭이 아니라 숫자 폭에 걸린다. */
.on-dark .callout__value {
  display: inline-block;
  vertical-align: top;
  background: linear-gradient(100deg, #2997ff 0%, #40c4f5 55%, #62e0c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 고대비 모드는 배경을 지운다. 글자가 투명한 채로 남지 않게 되돌린다. */
@media (forced-colors: active) {
  .on-dark .callout__value {
    color: CanvasText;
    background: none;
  }
}

/* ── 기능 행 ─────────────────────────────────────────────
   글 한 덩이와 그림 한 덩이를 좌우로 놓고, 다음 행에서 좌우를 바꾼다.
   상자를 두르지 않는다 — 여백이 경계다. */

.frow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nx-sp-16);
  align-items: center;
}

.frow + .frow {
  margin-top: var(--nx-sp-24);
}

.frow--flip .frow__text {
  order: 2;
}

/* 항목 라벨. 회색 두 단이 같은 색이 되었으니 크기와 굵기로 제목과 가른다. */
.frow__label {
  font-size: var(--nx-fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nx-text-2);
  margin-bottom: var(--nx-sp-3);
}

.on-dark .frow__label,
.section--dark .frow__label {
  color: var(--nx-text-invert-2);
}

.frow__title {
  font-size: var(--nx-fs-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--nx-tracking-tight);
  margin-bottom: var(--nx-sp-5);
}

.frow__body {
  font-size: var(--nx-fs-lg);
  line-height: 1.48;
  letter-spacing: -0.012em;
  color: var(--nx-text-2);
}

.frow__body + .frow__body {
  margin-top: var(--nx-sp-4);
}

.frow__aside {
  min-width: 0;
}

/* 그림 자리에 사진이 없을 때 쓰는 면 */
.frow__panel {
  border-radius: var(--nx-r-2xl);
  background: var(--nx-bg-sunken);
  padding: var(--nx-sp-10);
}

.section--sunken .frow__panel {
  background: var(--nx-bg-base);
}

.section--dark .frow__panel,
.on-dark .frow__panel {
  background: var(--nx-s-dark);
}

/* ── 각주 ─────────────────────────────────────────────────
   수치의 근거를 본문에서 떼어 페이지 아래로 내린다. Apple 이 모든 성능
   주장을 이렇게 처리한다. */

.footnotes {
  padding-block: var(--nx-sp-12);
  font-size: var(--nx-fs-xs);
  line-height: 1.5;
  color: var(--nx-text-muted);
}

/* 12px 글은 한 줄이 길면 다음 줄 첫머리를 놓친다. 읽는 폭으로 좁힌다. */
.footnotes__list {
  counter-reset: fn;
  display: grid;
  gap: var(--nx-sp-2);
  max-width: 720px;
}

.footnotes__list li {
  counter-increment: fn;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--nx-sp-1);
}

/* 건너온 각주만 진하게 해 어느 줄인지 바로 보이게 한다. */
.footnotes__list li:target {
  color: var(--nx-text);
}

.footnotes__list li::before {
  content: counter(fn) ".";
  font-variant-numeric: tabular-nums;
}

/* 본문 안에서 각주를 가리키는 위 첨자. 0.62em은 12px 글 옆에서 7px까지
   줄어 숫자가 보이지 않았다. */
.fn-ref {
  font-size: max(0.75em, 10px);
  vertical-align: super;
  line-height: 0;
  color: var(--nx-text-muted);
  margin-left: 1px;
}

/* 각주로 건너가는 링크일 때. 숫자 하나는 누르기 어려워 안쪽 여백으로
   누르는 자리를 넓히고, 음수 여백으로 글줄은 그대로 둔다. */
a.fn-ref {
  color: var(--nx-link);
  text-decoration: none;
  padding: 8px 5px;
  margin: -8px -3px;
}

.on-dark .fn-ref,
.section--dark .fn-ref {
  color: var(--nx-text-invert-2);
}

.on-dark a.fn-ref,
.section--dark a.fn-ref {
  color: var(--nx-accent-dark);
}

@media (max-width: 1040px) {
  .callouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frow {
    gap: var(--nx-sp-10);
  }
  .frow + .frow {
    margin-top: var(--nx-sp-16);
  }
}

@media (max-width: 720px) {
  .callouts,
  .callouts--3,
  .callouts--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-sp-8);
  }
  .frow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-sp-8);
  }
  /* 좁아지면 글이 항상 먼저다. 순서 바꾸기를 되돌린다. */
  .frow--flip .frow__text {
    order: 0;
  }
  .frow__panel {
    padding: var(--nx-sp-6);
  }
}