/* ══════════════════════════════════════════════════════════════════════
   도표(fig) — 캔슬박스 몫. <b>만들어지는 파일이다</b>(손으로 고치지 마라).
   만드는 것: tools/scripts/make_cb_figcss.py · 원본: infra/landing/site/luxsystem.css

   🔴 2026-09-08 — 도표 30개를 14쪽에 넣을 때 캔슬박스 12쪽에는 <b>그림만 들어가고
      꾸밀 규칙이 안 들어갔다.</b> 그 12쪽은 배포되지도 않아 어긋남 검사에 걸렸다.
      그대로 냈으면 선 없는 회색 그림이 손님에게 나갔을 것이다.

   🔴 색은 <b>캔슬박스가 이미 가진 이름에 이어 붙인다.</b> 값을 베껴 적으면
      어두운 화면에서 흰 바탕에 흰 글자가 된다 — 캔슬박스는 양쪽을 다 쓴다.
      이어 붙이면 @media (prefers-color-scheme: dark) 가 알아서 같이 바꿔 준다.
   ══════════════════════════════════════════════════════════════════════ */

/* 🔴 :root 가 아니라 <b>.figbox 안에서만</b> 정한다.
      :root 에 적으면 --line 같은 이름이 <b>쪽 전체</b>를 바꿔 버린다.

   🔴 <b>캔슬박스 안에서도 쪽마다 색 이름이 다르다</b>(2026-09-08 실측).
      첫 쪽은 --surface·--teal-deep·--hint 를 갖고 있는데 /for/<업종>/ 열 쪽은 <b>없다.</b>
      이름만 이어 붙이면 그 쪽에서 값이 <b>빈 문자열</b>이 되고, 빈 값은 폴백도 안 쓴다 —
      선언이 통째로 무효가 되어 <b>엉뚱한 색을 물려받는다.</b>
      그래서 이름마다 <b>literal 폴백</b>을 함께 적는다. */
.figbox {
  /* 🔴 --hint 가 아니라 --muted 다. 재 보니 --hint 는 <b>대비 4.25</b> 로 AA(4.5)에 못 미쳤다.
     도표의 설명·캡션은 힌트가 아니라 <b>읽으라고 쓴 글</b>이다. --muted 는 8.9 다. */
  --sub: var(--muted, #5B554E);      /* 곁글자 — 캡션·설명 */
  --soft: var(--surface2, #F1EFEA);  /* 막대 바탕·마디 바탕 */
  --line: var(--line2, #D6D1CB);     /* 도표 안 선은 본문 선보다 진해야 보인다 */

  /* 🔴 강조색만은 <b>쪽 색을 안 쓴다.</b> 흰 숫자가 이 색 <b>위에</b> 얹히는데,
     /for/ 쪽의 --teal(#0E8A7E)에 흰 글자를 얹으면 <b>대비 4.24</b> 로 AA 미달이다.
     도표 안에서만 한 칸 진한 값을 쓴다 — 6.03 이 된다. */
  --t-accent-t: #0B6F66;
  --t-on-accent: #FFFFFF;

  --t-ok-t: var(--teal-deep, #1E6644);
  --t-warn-t: var(--coral, #8F5A1A);
  --t-bad-t: var(--err, #B92A2A);
}

/* 어두운 화면에서는 강조를 밝게 뒤집고 그 위 글자를 어둡게 한다(대비 8.1). */
@media (prefers-color-scheme: dark) {
  .figbox {
    --t-accent-t: #5FC9BC;
    --t-on-accent: #0B2521;
    --sub: var(--muted, #B7B1A8);
    --soft: var(--surface2, #232524);
    --line: var(--line2, rgba(241, 241, 239, .22));
  }
}

/* ══════════════════════════════════════════════════════════════════════
   도표(fig) — 글 대신 그림으로 말하는 자리
   2026-09-07. 사장님 지적 「너무 텍스트 위주야. 그림이 많아야 한다」.
   재 보니 135쪽 중 110쪽에 도표가 0개였고, 도표 하나가 6,880자를 감당했다.

   🔴 <b>기본 상태가 「다 그려진 것」이다.</b> 자바스크립트가 없거나 늦어도
      그림은 보인다. 숨기는 것은 html.figjs 가 붙었을 때뿐인데, 그 클래스는
      스크립트가 스스로 붙인다. 위 .mline 은 반대로 되어 있어서
      스크립트가 안 돌면 히어로 선이 영영 안 보인다 — 그 함정을 안 되풀이한다.

   생성기는 infra/landing/figures.py, 관문은 test_figures.py 다.
   ⚠️ SVG 에 style·fill·stroke 를 직접 적지 않는다. 적으면 여기가 진다.
   ══════════════════════════════════════════════════════════════════════ */
.figbox {
  margin: var(--sp-6, 32px) 0;
  /* 🔴 격자·플렉스 칸 안에서는 min-width:auto 라 <b>안 줄어든다.</b>
     그러면 아래 min-width 가 칸을 밀어 <b>쪽 전체가 넘친다.</b> */
  min-width: 0;
  max-width: 100%;
  /* 🔴 폰에서 도표를 그릇 폭에 맞춰 줄이면 <b>글자가 6~8px 로 그려진다.</b>
     getComputedStyle 이 주는 14px 은 사용자 단위지 화면 크기가 아니다.
     그래서 줄어드는 데 바닥을 두고, 모자라면 <b>도표 안에서만</b> 가로로 민다.
     쪽 전체가 넘치는 것과 다르다 — 표를 감싸는 것과 같은 수법이다. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* 🔴 <b>도표를 품은 칸도 줄어들 수 있어야 한다</b> (2026-09-08).
   .figbox 자신에게는 min-width:0 을 줬는데, 격자·플렉스의 <b>칸</b>이 도표를 한 겹
   감싸고 있으면 그 칸이 min-width:auto 라 <b>안 줄어든다.</b> 그러면 도표의 바닥
   560px 이 칸을 밀고, 칸이 쪽을 밀어 <b>쪽 전체가 가로로 넘친다.</b>
   캔슬박스 내려받기 쪽이 폰 375px 에서 정확히 그렇게 넘쳤다 — 문서 620px.
   도표를 바로 품은 것만 골라 줄어들게 한다. */
*:has(> .figbox) { min-width: 0; }
svg.fig {
  width: 100%;
  min-width: 560px;          /* 640 viewBox 의 0.875 배 — 14 단위 글자가 12.25px 로 그려진다 */
  height: auto;
  display: block;
  font: inherit;
}
svg.fig text { fill: var(--ink, #1F1E1C); }
.fig-title { font-size: 17px; font-weight: 700; }
svg.fig text.fig-cap   { font-size: 14px; fill: var(--sub, #6B655C); }
/* 단계도 */
.fig-rail   { stroke: var(--line, #E3DFD8); stroke-width: 2; fill: none; }
.fig-dot    { fill: var(--t-accent-t, #0B6F66); }
svg.fig text.fig-num    { fill: var(--t-on-accent, #FFFFFF); font-size: 14px; font-weight: 700; }
.fig-step-t { font-size: 18px; font-weight: 600; }
svg.fig text.fig-step-d { font-size: 14px; fill: var(--sub, #6B655C); }
/* 측정선 */
.fig-grid     { stroke: var(--line, #E3DFD8); stroke-width: 1; fill: none; }
.fig-line     { fill: none; stroke: var(--t-accent-t, #0B6F66); stroke-width: 2.5;
                stroke-linecap: round; stroke-linejoin: round; }
.fig-line-end { fill: var(--t-accent-t, #0B6F66); }
/* 가로막대 */
.fig-bar-bg { fill: var(--soft, #F3F1ED); }
.fig-bar    { fill: var(--line, #E3DFD8); }
.fig-bar-on { fill: var(--t-accent-t, #0B6F66); }
.fig-bar-n  { font-size: 14px; }
.fig-bar-v  { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 🔴 긴 막대는 값을 <b>막대 안쪽</b>에 넣는다 — 바깥에 두면 뷰박스 밖으로 잘린다.
      안쪽이니 글자색은 막대 색 위에서 읽히는 것이어야 한다. */
svg.fig text.fig-bar-vin { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
                        fill: var(--t-on-accent, #FFFFFF); }
/* 갈라나무 */
.fig-node      { fill: var(--soft, #F3F1ED); stroke: var(--line, #E3DFD8); stroke-width: 1.5; }
.fig-node-q    { stroke: var(--t-accent-t, #0B6F66); }
.fig-node-ok   { stroke: var(--t-ok-t, #1E6644); }
.fig-node-warn { stroke: var(--t-warn-t, #8F5A1A); }
.fig-node-bad  { stroke: var(--t-bad-t, #B92A2A); }
.fig-node-t    { font-size: 16px; }
.fig-edge      { fill: none; stroke: var(--line, #E3DFD8); stroke-width: 1.5; }
svg.fig text.fig-edge-t    { font-size: 14px; fill: var(--sub, #6B655C); }
/* 센값판 */
.fig-big   { font-size: 46px; font-weight: 800; letter-spacing: -.02em;
             font-variant-numeric: tabular-nums; }
.fig-big-u { font-size: 22px; font-weight: 600; fill: var(--sub, #6B655C); }
svg.fig text.fig-unit  { font-size: 14px; fill: var(--sub, #6B655C); }
.fig-sep   { stroke: var(--line, #E3DFD8); stroke-width: 1; }
/* ── 움직임 — 값만 움직인다. 한 번 그려지고 멈춘다 ────────────────────
   🔴 html.figjs 는 스크립트가 스스로 붙인다. 스크립트가 없으면 아래 규칙이
      통째로 안 걸리고 그림은 처음부터 다 그려진 채다. */
html.figjs .figbox:not(.fig-seen) .fig-line {
  stroke-dasharray: 1;            /* path 에 pathLength="1" 이 있어 길이를 몰라도 된다 */
  stroke-dashoffset: 1;
}
html.figjs .figbox:not(.fig-seen) .fig-line-end { opacity: 0; }
html.figjs .figbox:not(.fig-seen) .fig-bar { transform: scaleX(0); }
html.figjs .fig-line {
  transition: stroke-dashoffset var(--dur-draw, 1.4s) var(--ease-out, ease-out);
}
html.figjs .fig-line-end { transition: opacity 300ms ease-out .9s; }
html.figjs .fig-bar {
  /* ⚠️ transform-box 가 없으면 원점이 <b>막대 왼쪽이 아니라 뷰박스 왼쪽</b>이라
     막대가 엉뚱한 곳에서 자라난다. 스웜 초안이 이걸 빠뜨렸다. */
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 600ms var(--ease-out, ease-out);
}
html.figjs .figbox:not(.fig-seen) .fig-line { stroke-dashoffset: 0; }
html.figjs .figbox:not(.fig-seen) .fig-line-end { opacity: 1; }
html.figjs .figbox:not(.fig-seen) .fig-bar { transform: none; }
html.figjs .fig-line,
  html.figjs .fig-line-end,
  html.figjs .fig-bar { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html.figjs .figbox:not(.fig-seen) .fig-line { stroke-dashoffset: 0; }
  html.figjs .figbox:not(.fig-seen) .fig-line-end { opacity: 1; }
  html.figjs .figbox:not(.fig-seen) .fig-bar { transform: none; }
  html.figjs .fig-line,
  html.figjs .fig-line-end,
  html.figjs .fig-bar { transition: none; }
}