/* 09-fluid — 유동 골격 유틸. **전역 1회 정의**(함정 34): .fl-wrap/.fl-sec/.ph/.sr-only 는 여기뿐. */
@layer fluid {
  .fl-wrap { inline-size: var(--fl-content); margin-inline: auto; }
  .fl-sec { position: relative; overflow-x: clip; }

  /* 문서 기본 글꼴 — 임계 CSS 로 인라인되는 이 파일에 둔다(함정 77) */
  html { font-family: var(--df-font); }
  body { background: var(--df-white); color: var(--df-ink); }
  body.df-dark { background: var(--df-navy); color: var(--df-white); }

  /* 자산 자리표시자 — 자산이 오면 background-image / <img> 로 교체 */
  .ph {
    position: relative; display: block;
    background-color: var(--df-ph);
    background-repeat: no-repeat; background-position: 50% 50%;
    background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 5%) 0 2px, rgb(255 255 255 / 0%) 2px 8px);
  }
  .ph.is-loaded { background-image: none; }

  .sr-only {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .sr-only.sr-focusable:focus-visible {
    position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 1000;
    inline-size: auto; block-size: auto; padding: .5em .9em; margin: 0;
    overflow: visible; clip-path: none;
    background: var(--df-white); color: var(--df-ink);
    outline: 2px solid var(--df-focus); outline-offset: 2px;
  }
  :focus-visible { outline: 2px solid var(--df-focus); outline-offset: 2px; }

  /* 모션 캐리어(veil) — 진입 연출 전용, **페인트 없음**(F8 안전). 각 페이지 히어로가 쓴다 */
  .hero__veil,[class*="__veil"] { position: absolute; inset: 0; pointer-events: none; background: none; }

  /* 상호작용 전이 — GSAP 채널(transform/opacity)은 여기서 전이하지 않는다 */
  a, button, input, textarea, select,
  .df-btn, .df-card, .ph,
  /* 카드/칩/아이콘 판 — hover 레시피와 짝을 이루는 색·그림자 전이(비 GSAP 채널) */
  [class*="__card"], [class*="-card"], [class*="__chip"], [class*="__tag"],
  [class*="__ic"], [class*="__pill"], [class*="row"] > li {
    transition: background-color .28s var(--ease-out-quart), color .28s var(--ease-out-quart),
      border-color .28s var(--ease-out-quart), box-shadow .34s var(--ease-out-quart),
      outline-color .18s ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    a, button, input, textarea, select, .df-btn, .df-card, .ph,
    [class*="__card"], [class*="-card"], [class*="__chip"], [class*="__tag"],
    [class*="__ic"], [class*="__pill"], [class*="row"] > li { transition: none; }
  }
}