/* 홈 / 03 'AI에게 주는 주소'의 설명 그림 I1(BUILD:INTROTRACE · builders/intro.js · scripts/lib/intro-trace.js) — 2026-10-26 기획 13절 3(운영자):
 * 옛 활용 방법 첫 화면 그림(질문 → kg/index.txt → 주제 묶음 파일 → 찾은 자료 여섯, 주제 셋을 번갈아)을 주소 바로 아래 설명 그림으로 옮기고,
 * 12절의 다섯 칸 '읽는 순서' 그림을 빼 그 내용을 왼쪽 다섯 단계 설명으로 합쳤다. 규칙은 옛 assets/intro.css 의 .itr-* 에서 옮겼다.
 * 섬이 아니다(옛 히어로의 다크 섬·글 뒤 바탕은 걷었다) — 유리 카드 위에 토큰 색으로 그려 라이트에서는 라이트 토큰이고, 그림 뒤에는 토큰 색 옅은 빛만 깐다.
 * 사용자 쪽(프롬프트·질문)은 --ember, AI가 읽는 파일 쪽은 --green, 찾은 자료는 그 종류의 묶음 색(--isc-c — 운영 사항 수록 현황 그림 holdings.css 와 같은 표).
 * 흐리게·자라게 하는 규칙은 .itr-stage[data-playing] 아래에만 — 스크립트가 없거나 멈추거나 움직임 줄이기면 다 그려진 그림이다. 멈춤 단추에는 :not([hidden]) 에만 display.
 * 색은 토큰만(theme-ratchet 0). 규칙: .claude/rules/hubs/intro.md '주소 설명 그림 I1' */

/* 틀 — 설명 → 단계(왼쪽) · 그림(오른쪽) → 한 줄 덧붙임. 1100px 이하는 한 칸(문서 순서).
 * 넓은 화면에서는 단계 칸이 그림보다 길어 그림 칸을 내비 아래에 붙여 둔다(sticky) — 단계를 읽어 내려가는 동안 그림이 화면에 남는다 */
.itr-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:22px 44px;margin:24px 0 0;padding:28px 32px 22px;border:1px solid var(--glass-line);border-radius:28px;
  background:radial-gradient(42% 56% at 74% 52%,rgba(var(--ember-rgb),.07),transparent 72%),radial-gradient(26% 34% at 64% 18%,rgba(var(--green-rgb),.05),transparent 70%),var(--glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);scroll-margin-top:96px}
.itr-cap{grid-column:1/-1;max-width:56em;margin:0;font-size:14.5px;line-height:1.75;color:var(--read);word-break:keep-all}
.itr-note{grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.7;color:var(--txt-faint);word-break:keep-all}
.itr-copy,.itr-pic{min-width:0}
@media (min-width:1101px){
  .itr-stage{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start}
  .itr-pic{position:sticky;top:104px}
}

/* ===== 다섯 단계 설명(.itr-steps) — 번호 원과 이어지는 세로 선. 옮긴 kg 글은 <q class="itr-quote">(입구·주제 파일 --green, 프롬프트 줄 --ember) ===== */
.itr-steps{display:grid;margin:0;padding:0;list-style:none}
.itr-step{position:relative;padding:0 0 18px 42px}
.itr-step:last-child{padding-bottom:0}
.itr-step::before{content:"";position:absolute;left:13px;top:32px;bottom:4px;width:1.5px;background:linear-gradient(rgba(var(--ember-rgb),.35),rgba(var(--green-rgb),.3))}
.itr-step:last-child::before{display:none}
.itr-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;font-size:15.5px;font-weight:700;line-height:1.45;letter-spacing:-.01em;color:var(--txt);transition:color .3s}
.itr-no{position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(var(--ember-rgb),.5);border-radius:50%;background:var(--bg);color:var(--ember);font:700 12.5px/1 "Space Grotesk",var(--font-sans);transition:background .3s,color .3s,box-shadow .3s}
.itr-h code{font:600 14.5px "JetBrains Mono",ui-monospace,monospace;color:var(--green)}
.itr-size{font:500 12px "Space Grotesk",var(--font-sans);color:var(--txt-faint);font-variant-numeric:tabular-nums}
.itr-d{margin:6px 0 0;font-size:13.5px;line-height:1.7;color:var(--txt-dim);word-break:keep-all}
.itr-quote{display:block;margin:8px 0 0;padding:8px 12px;border-left:2px solid rgba(var(--green-rgb),.55);border-radius:0 10px 10px 0;background:rgba(var(--green-rgb),.06);
  font-size:13px;line-height:1.65;color:var(--read);quotes:none;word-break:keep-all;overflow-wrap:anywhere}
.itr-step[data-step="0"] .itr-quote{border-left-color:rgba(var(--ember-rgb),.55);background:rgba(var(--ember-rgb),.06)}
.itr-quote code{font:500 12px "JetBrains Mono",ui-monospace,monospace;color:var(--ember);overflow-wrap:anywhere}
.itr-rows{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.itr-rows li{display:grid;gap:4px;min-width:0}
.itr-rows b{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--txt-dim)}
.itr-rows .itr-quote{margin:0}
.itr-rows span{font-size:13px;line-height:1.6;color:var(--read)}
.itr-fields{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.itr-fields span{padding:3px 11px;border:1px solid rgba(var(--green-rgb),.4);border-radius:999px;background:rgba(var(--green-rgb),.07);font-size:12.5px;font-weight:600;color:var(--read)}
/* 움직이는 동안 — 지금 단계(is-now)의 번호 원을 채우고 이름을 강조색으로. 다른 단계는 흐리게 하지 않는다(읽는 글을 흐리면 피로하다) */
.itr-stage[data-playing] .itr-step.is-now .itr-no{background:var(--ember);border-color:var(--ember);color:var(--on-accent);box-shadow:0 0 0 4px rgba(var(--ember-rgb),.16)}
.itr-stage[data-playing] .itr-step.is-now .itr-h{color:var(--ember)}

/* ===== 그림(.itr-still) — 첫 주제만 보인다(.is-on). 나머지 두 주제는 장면 스크립트가 번갈아 켠다. 빛 점(.itr-spark)은 움직일 때만 보인다.
 * 같은 내용은 좁은 화면 목록(.itr-list, 601px 이상에서는 화면에 안 보이고 화면 읽기 프로그램이 읽으며 600px 이하에서는 그림 대신 보이는 목록이다)이 글로 갖는다 ===== */
.itr-still{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}
.itr-topic:not(.is-on){display:none}
.itr-spark{opacity:0;--itr-spark:var(--ember);fill:var(--itr-spark);filter:drop-shadow(0 0 5px var(--itr-spark))}
.itr-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.itr-bubble{fill:rgba(var(--ember-rgb),.12);stroke:rgba(var(--ember-rgb),.55);stroke-width:1px}
.itr-beam{fill:none;stroke-width:2px;stroke-linecap:round}
.itr-ask-beam{stroke:var(--ember)}
.itr-read-beam{stroke:var(--green)}
.itr-node circle{fill:var(--green)}
.itr-fan{fill:none;stroke:var(--isc-c);stroke-width:1.6px;stroke-linecap:round;stroke-opacity:.8}
.itr-item circle{fill:var(--isc-c)}
/* 글 크기는 intro-trace.js TRACE_FONT 와 같은 값(그림 단위) — 글 자리와 줄임(…)을 이 크기로 어림한다 */
.itr-q{font:600 15px var(--font-sans);fill:var(--txt)}
.itr-file{font:500 12.5px "JetBrains Mono",ui-monospace,monospace;fill:var(--read)}
.itr-kind{font:600 11px var(--font-sans);fill:var(--isc-c);letter-spacing:.02em}
.itr-name{font:500 13.5px var(--font-sans);fill:var(--txt)}
.itr-count{font:600 13px var(--font-sans);fill:var(--txt-dim);font-variant-numeric:tabular-nums}
/* 그림 안 단계 번호 — 옆 단계 설명의 번호와 같은 꼴(번호 원). 움직이는 동안 지금 단계만 채운다 */
.itr-badge circle{fill:var(--bg);stroke:rgba(var(--ember-rgb),.55);stroke-width:1.2px}
.itr-badge text{font:700 11px "Space Grotesk",var(--font-sans);fill:var(--ember)}
.itr-stage[data-playing] .itr-badge.is-now circle{fill:var(--ember);stroke:var(--ember)}
.itr-stage[data-playing] .itr-badge.is-now text{fill:var(--on-accent)}
/* 움직이는 동안(장면 스크립트 assets/intro-trace.js 가 .itr-stage 에 data-playing 을 단다) — 선은 대시 끝으로 자라고(pathLength=1, 스크립트가
 * stroke-dashoffset 을 정한다) 빛 점이 자라는 선의 끝을 따라간다. 빛 점 색은 따라가는 선의 색: 질문에서 나가는 선 --ember(기본) · 읽는 선 --green ·
 * 갈래 선은 그 자료의 묶음 색(--isc-c, 스크립트가 data-zone 을 옮긴다) */
.itr-stage[data-playing] .itr-beam,.itr-stage[data-playing] .itr-fan{stroke-dasharray:1}
.itr-stage[data-playing] .itr-spark{opacity:1}
.itr-spark[data-beam="read"]{--itr-spark:var(--green)}
.itr-spark[data-beam="fan"]{--itr-spark:var(--isc-c)}
/* 아래 줄 — 멈춤 단추(빌드가 hidden 으로 쓰고 장면 스크립트가 움직이는 동안 연다). 아이콘 단추, 줄의 오른쪽 끝(2026-10-26 운영자).
 * 이름은 aria-label('멈춤'·'재생')이고 보이는 아이콘은 그 이름으로 고른다. 단추가 나타나도 그림이 밀리지 않게 줄 높이를 미리 둔다 */
.itr-foot{display:flex;align-items:center;justify-content:flex-end;min-height:36px}
.itr-pause:not([hidden]){display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--glass-line);border-radius:50%;background:var(--glass);color:var(--txt-dim);cursor:pointer;transition:color .2s,border-color .2s}
.itr-pause:hover{border-color:rgba(var(--ember-rgb),.55);color:var(--txt)}
.itr-ico{width:14px;height:14px;fill:currentColor}
.itr-pause[aria-label="재생"] .itr-ico-pause,.itr-pause:not([aria-label="재생"]) .itr-ico-play{display:none}
.itr-pause:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* 묶음 색 — 그림(.itr-still)과 좁은 화면 목록(.itr-list)이 쓴다. 운영 사항 수록 현황의 자료 묶음 그림(.isc-still)은 같은 값을 assets/holdings.css 에 둔다.
 * 상황판 구역(knowledge-graph.js ZONE_ORDER)마다 하나 + 분류 축 — 빠진 구역은 --isc-c 가 없어 그 묶음 점이 안 보인다(intro-trace-page.test.js 가 구역 목록과 견준다) */
:is(.itr-still,.itr-list) [data-zone="site"]{--isc-c:var(--viz-2)}
:is(.itr-still,.itr-list) [data-zone="reference"]{--isc-c:var(--viz-3)}
:is(.itr-still,.itr-list) [data-zone="trend"]{--isc-c:var(--viz-1)}
:is(.itr-still,.itr-list) [data-zone="study"]{--isc-c:var(--viz-4)}
:is(.itr-still,.itr-list) [data-zone="sources"]{--isc-c:var(--green)}
:is(.itr-still,.itr-list) [data-zone="usage"]{--isc-c:var(--ember)}
:is(.itr-still,.itr-list) [data-zone="axis"]{--isc-c:var(--txt)}

/* 860px 이하는 장면이 돌지 않아 멈춤 단추가 나오지 않는다 — 미리 둔 줄 높이를 걷는다 */
@media (max-width:860px){
  .itr-foot{min-height:0}
}
@media (max-width:620px){
  .itr-stage{padding:22px 18px 18px;border-radius:22px}
  .itr-step{padding-left:38px}
}
@media (max-width:600px){
  /* 720 폭 그림이 350px 안팎으로 줄면 글이 6.6px 가 된다 — 그림 대신 같은 내용을 보이는 글 목록으로 보인다 */
  .itr-still{display:none}
  .itr-list{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-size:14px;line-height:1.6;color:var(--txt)}
  .itr-list p{margin:0 0 12px}
  .itr-list-q{padding:10px 14px;border:1px solid rgba(var(--ember-rgb),.55);border-radius:12px;background:rgba(var(--ember-rgb),.12);font-weight:600}
  .itr-list-files{color:var(--txt-dim)}
  .itr-list code{font:500 14px "JetBrains Mono",ui-monospace,monospace;color:var(--read);overflow-wrap:anywhere} /* 긴 파일 이름은 - · / 뒤에서 먼저 줄을 바꾼다 */
  .itr-list-items{margin:0 0 12px;padding:0;list-style:none}
  .itr-list-items li{display:block;position:relative;padding:3px 0 3px 16px;font-size:14px;color:var(--txt);word-break:keep-all}
  .itr-list-items li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--isc-c)}
  .itr-list-kind{font-weight:600;color:var(--isc-c)}
  .itr-list .itr-list-count{margin:0;color:var(--txt-dim);font-weight:600;font-variant-numeric:tabular-nums} /* .itr-list p 보다 구체적이어야 아래 여백이 0 */
}
@media (prefers-reduced-motion:reduce){.itr-h,.itr-no{transition:none}}
@media print{
  .itr-pause,.itr-spark{display:none}
  /* I1 이 도는 중에 인쇄해도 선·점·자료·단계가 다 찍힌다(인라인 opacity 를 이긴다) */
  .itr-stage[data-playing] :is(.itr-topic,.itr-node,.itr-item,.itr-beam,.itr-fan){opacity:1!important}
  .itr-stage[data-playing] :is(.itr-beam,.itr-fan){stroke-dasharray:none}
}