/* 운영 사항 01 '수록 현황'(operations.html#map) — 자료 묶음 그림(BUILD:INTROSCENE · builders/intro.js · scripts/lib/intro-scene.js · 캔버스 assets/intro-scene.js)과
 * 묶음별 허브 카드(BUILD:SITEMAP). 2026-10-26 운영자 지시로 활용 방법 / 03 '자료실 지도'를 옮기고 이름을 바꿨다 — 규칙은 assets/intro.css 에서 글자 그대로 옮겼다.
 * 절 id 는 그대로 map — 모든 페이지의 경로 표시 묶음 링크(scripts/lib/breadcrumb.js MAP_HREF)가 가리킨다. 색은 토큰만(theme-ratchet 상한 0).
 * 규칙: .claude/rules/hubs/intro.md '운영 사항' */
/* 경로 표시의 묶음 링크(operations.html#map)로 들어올 때 절 머리가 내비 아래로 숨지 않게 */
#map{scroll-margin-top:96px}
/* 절 머리 — 운영 사항의 다른 절('02 · 만드는 방법' …)과 같은 번호 머리 꼴. 본문 칸(68ch) 밖 전체 폭 절이라 .ops-sec 을 쓰지 않는다(.ops-sec h3 가 허브 카드 h3 에 닿는다) */
.ops-holdings{margin-top:88px}
.ops-holdings>h2{margin:0 0 12px;font-size:clamp(24px,2.5vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--txt)}
.ops-holdings-lede{max-width:68ch;margin:0 0 28px;font-size:16px;line-height:1.9;color:var(--read)}
/* ===== 자료 묶음 그림(2026-10-25 첫 화면 E 에서 옮겨 옴, 2026-10-26 활용 방법 / 03 에서 운영 사항으로) =====
 * 수록 현황 제목과 묶음별 허브 카드 사이의 그림 띠. 히어로가 아닌 일반 절 그림이라 섬이 아니다 — 라이트에서는 라이트 토큰으로 그리고
 * 불투명한 바탕을 칠하지 않는다(프롬프트 절 그림과 같은 규칙). 그림 뒤에는 토큰 색 옅은 빛만(.hs-stage 와 같은 세기).
 * 정지 그림은 늘 보인다 — 탐색 빛 스크립트(assets/intro-scene.js, I2)는 그 위에 겹친 투명 캔버스에 빛·지나온 길·빛 번짐만 그리고
 * 닿은 묶음의 자료 이름 셋(.isc-pop)에 .is-on 을, 그 이름 셋이 덮는 선 위 수(data-covers)에 .is-under 를 단다(켜진 동안만 수를 감춘다).
 * 캔버스는 마우스를 가로채지 않는다 */
.isc-stage{width:100%;max-width:860px;margin:0 auto}
#map .isc-stage{position:relative;max-width:860px;margin:0 auto;background:radial-gradient(46% 50% at 50% 54%,rgba(var(--ember-rgb),.07),transparent 72%),radial-gradient(30% 32% at 54% 16%,rgba(var(--green-rgb),.05),transparent 70%)}
.isc-still{display:block;width:100%;height:auto;overflow:visible}
.isc-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none} /* inset 은 Chrome 87 미만에 없다 */
/* 점 하나 = 자료 하나: 0 길이 선분 + 둥근 끝. 굵기 3.4 는 scripts/lib/intro-scene.js DOT_R 의 두 배 */
.isc-dots{fill:none;stroke:var(--isc-c);stroke-width:3.4px;stroke-linecap:round}
/* 선 굵기는 연결 수에서 온 stroke-width 속성 — CSS 로 덮지 않는다. 이름 일치는 점선(지식 그래프 상황판 범례와 같은 표기) */
.isc-arc{fill:none;stroke:rgba(var(--ink-rgb),.3);stroke-linecap:round}
.isc-arc.isc-name{stroke:rgba(var(--ink-rgb),.4);stroke-dasharray:2 7}
/* 글 크기는 intro-scene.js FONT 와 같은 값(그림 단위) — 글 자리를 고를 때 이 크기로 폭을 어림한다 */
.isc-label,.isc-inner,.isc-num{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.isc-label{font:600 17px var(--font-sans);fill:var(--txt)}
.isc-inner{font:500 13px var(--font-sans);fill:var(--txt-dim)}
.isc-num{font:600 13px "Space Grotesk",var(--font-sans);fill:var(--read);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.isc-num.isc-name{fill:var(--txt-dim)}
.isc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;max-width:860px;margin:0 auto}
#map .isc-foot{max-width:860px;margin:14px auto 48px}
/* 범례 줄은 멈춤 단추(최소 높이 36px)와 같은 높이 — 장면이 켜져 단추가 나타나도 아래 '그림 내용 보기'가 밀리지 않는다 */
.isc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;min-height:36px;margin:0;font-size:12.5px;color:var(--txt-dim)}
/* 그림의 묶음 수와 바로 아래 자료실 지도의 수가 다른 까닭(운영자 결정 2026-10-25) — 범례 아래 한 줄 */
.isc-note{flex-basis:100%;margin:0;font-size:12px;line-height:1.6;color:var(--txt-faint);word-break:keep-all}
.isc-key{display:inline-flex;align-items:center;gap:8px}
.isc-key::before{content:"";width:26px;border-top:2px solid rgba(var(--ink-rgb),.45)}
.isc-key.isc-name::before{border-top-style:dashed}
/* 멈춤 단추 — 아이콘 36px 원, 범례 줄의 오른쪽 끝(2026-10-26 운영자 요청). 이름은 aria-label('멈춤'·'재생'), 보이는 아이콘은 그 이름으로 고른다 */
.isc-pause:not([hidden]){display:inline-grid;place-items:center;width:36px;height:36px;margin-left:auto;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}
.isc-pause:hover{border-color:rgba(var(--ember-rgb),.55);color:var(--txt)}
.isc-ico{width:14px;height:14px;fill:currentColor}
.isc-pause[aria-label="재생"] .isc-ico-pause,.isc-pause:not([aria-label="재생"]) .isc-ico-play{display:none}
.isc-pause:focus-visible,.isc-data>summary:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
/* 자료 이름 셋 — 글자는 글자 토큰, 묶음 색은 이름 앞 표시(●)만. --viz-1~4 는 막대·선 토큰이라 글자에 쓰면 라이트 바탕에서 대비가 4.5 에 못 미쳤다(2026-10-25) */
.isc-pop text{font:500 13px var(--font-sans);fill:var(--txt);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.isc-pop .isc-mark{fill:var(--isc-c)}
.isc-pop{opacity:0;transition:opacity .3s}
.isc-pop.is-on{opacity:1}
.isc-still .isc-num{transition:opacity .3s}
.isc-still .isc-num.is-under{opacity:0}
.isc-data{flex:1 1 100%}
.isc-data>summary{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:6px 14px;border:1px solid var(--glass-line);border-radius:100px;color:var(--txt);font:600 13px/1.2 var(--font-sans);cursor:pointer;list-style:none}
.isc-data>summary::-webkit-details-marker{display:none}
.isc-data>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.isc-data[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.isc-data[open]>summary{margin-bottom:14px}
.isc-table{width:100%;margin:0 0 18px;border-collapse:collapse;font-size:13px;color:var(--read)}
.isc-table caption{margin-bottom:8px;text-align:left;font-size:12.5px;font-weight:600;color:var(--txt-dim)}
.isc-table :is(th,td){padding:6px 10px;border-bottom:1px solid var(--glass-line);text-align:left;font-weight:400}
.isc-table thead th{font-size:12px;color:var(--txt-faint)}
.isc-table td{font-variant-numeric:tabular-nums}
.isc-table tbody th{color:var(--txt)}
.isc-outside{margin:0;font-size:12.5px;line-height:1.7;color:var(--txt-dim)}
/* 묶음 색 — 노선도·프롬프트 절 그림·첫 화면 I1(assets/intro.css)과 같은 값. 상황판 구역마다 하나 + 분류 축 */
.isc-still [data-zone="site"]{--isc-c:var(--viz-2)}
.isc-still [data-zone="reference"]{--isc-c:var(--viz-3)}
.isc-still [data-zone="trend"]{--isc-c:var(--viz-1)}
.isc-still [data-zone="study"]{--isc-c:var(--viz-4)}
.isc-still [data-zone="sources"]{--isc-c:var(--green)}
.isc-still [data-zone="usage"]{--isc-c:var(--ember)}
.isc-still [data-zone="axis"]{--isc-c:var(--txt)}
/* ===== 묶음별 허브 카드(BUILD:SITEMAP · builders/home.js renderSiteMap) — 다섯 묶음 × 허브 목록 ===== */
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.sgroup{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);backdrop-filter:blur(14px);padding:22px 22px 8px}
.sgroup h3{display:flex;flex-direction:column;gap:5px;font-family:"Space Grotesk";font-size:17px;font-weight:600;letter-spacing:-.01em;padding-bottom:13px;border-bottom:1px solid var(--glass-line)}
.sgroup h3 span{font-family:var(--font-sans);font-size:12px;font-weight:400;color:var(--txt-faint);letter-spacing:0}
.sgroup ul{list-style:none;margin:0;padding:0}
.sgroup li+li{border-top:1px solid rgba(var(--ink-rgb),.05)}
.sgroup a{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:14px 0;text-decoration:none;color:var(--txt)}
.sgroup b{font-size:14.5px;font-weight:600;transition:color .2s}
.sgroup a:hover b{color:var(--ember)}
.sgroup .n{align-self:center;font-family:"Space Grotesk";font-size:12px;color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums}
.sgroup .d{grid-column:1/-1;font-size:12.5px;color:var(--txt-dim);line-height:1.45;word-break:keep-all}
@media (max-width:1000px){.smap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.smap{grid-template-columns:1fr}}
/* 좁은 화면은 정지 그림만 — 캔버스를 쓰지 않는다 */
@media (max-width:860px){
  .isc-canvas{display:none}
}
/* 휴대폰: 자료 묶음 그림이 화면 폭의 0.4배 안팎으로 작아진다 — 이름·수는 키우고(intro-scene.js FONT_NARROW, 글 자리는 이 크기도 담게 잡았다)
 * 안쪽 연결 글은 숨긴다(같은 수는 '그림 내용 보기' 표에 있다) */
@media (max-width:600px){
  .isc-label{font-size:25px}
  .isc-num{font-size:19px}
  .isc-inner{display:none}
  .isc-table :is(th,td){padding:6px 6px}
}
@media print{
  .isc-canvas,.isc-pause{display:none}
}