화살표·연결선 세트 9종

도식에서 항목을 잇거나 증감을 표시하는 얇은 선 세트. 연결선 6종(직선, 점선, 양방향, 꺾임, 갈래, 모임)과 증감 표시 3종. 한 도식 안에서는 선 굵기와 머리 모양을 한 가지로. 값 바꾸는 법: 연결선: svg.ar 의 첫 path 가 선, 뒤의 path 가 머리. 길이는 viewBox 폭(200)과 선의 끝 좌표(188)를 같이 바꿈. 점선은 stroke-dasharray="5 5". 증감: <p class="ch up|dn|eq"> 안의 삼각형 svg 와 숫자. 강조색은 증가에만(감소가 좋은 지표라면 class 를 서로 바꿔 씀). 선 색은 stroke 로 조절.

도식 작도 도구의 연결선 종류(직선, 꺾임, 갈래)와 지표 대시보드의 증감 삼각형 표기. 화살표 머리는 표식(marker) 없이 경로로 직접 그려 다른 조각과 id 가 겹치지 않게 함. 직접 제작.

<div class="dk dk-ica">
  <div class="c"><svg class="ar" viewBox="0 0 200 48"><path d="M12 24h176"/><path d="m181 18 7 6-7 6"/></svg><b>얇은 화살표</b><span>단계와 단계, 원인과 결과</span></div>
  <div class="c"><svg class="ar" viewBox="0 0 200 48"><path d="M12 24h176" stroke-dasharray="5 5"/><path d="m181 18 7 6-7 6"/></svg><b>점선 화살표</b><span>예정된 흐름, 간접 영향</span></div>
  <div class="c"><svg class="ar" viewBox="0 0 200 48"><path d="M12 24h176"/><path d="m181 18 7 6-7 6"/><path d="m19 18-7 6 7 6"/></svg><b>양방향</b><span>주고받는 관계, 상호 영향</span></div>
  <div class="c"><svg class="ar" viewBox="0 0 200 48"><path d="M12 10h88v28h88"/><path d="m181 32 7 6-7 6"/></svg><b>꺾인 연결선</b><span>높이가 다른 두 칸 연결</span></div>
  <div class="c"><svg class="ar" viewBox="0 0 200 48"><path d="M12 24h80M92 10v28M92 10h96M92 38h96"/><path d="m181 4 7 6-7 6"/><path d="m181 32 7 6-7 6"/></svg><b>갈래</b><span>하나에서 둘로 나뉘는 흐름</span></div>
  <div class="c"><svg class="ar" viewBox="0 0 200 48"><path d="M12 10h96M12 38h96M108 10v28M108 24h80"/><path d="m181 18 7 6-7 6"/></svg><b>모임</b><span>둘이 하나로 합쳐지는 흐름</span></div>
  <div class="c"><p class="ch up"><svg viewBox="0 0 14 12"><path d="M7 0l7 12H0z"/></svg><b class="num">12%</b></p><b>증가</b><span>전 기간 대비 오른 값</span></div>
  <div class="c"><p class="ch dn"><svg viewBox="0 0 14 12"><path d="M7 12 0 0h14z"/></svg><b class="num">8%</b></p><b>감소</b><span>전 기간 대비 내린 값</span></div>
  <div class="c"><p class="ch eq"><svg viewBox="0 0 14 12"><path d="M1 5h12v2.5H1z"/></svg><b class="num">0%</b></p><b>변화 없음</b><span>오차 범위 안의 변동</span></div>
</div>

.dk-ica{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line2)}
.dk-ica .c{display:flex;flex-direction:column;justify-content:center;min-height:128px;padding:10px 0;border-bottom:1px solid var(--line)}
.dk-ica .c:nth-last-child(-n+3){border-bottom-color:var(--line2)}
.dk-ica .ar{width:200px;height:48px;fill:none;stroke:var(--ink2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dk-ica .c>b{margin-top:6px;font-size:var(--f-body);font-weight:700}
.dk-ica .c>span{font-size:var(--f-cap);color:var(--mu)}
.dk-ica .ch{display:flex;align-items:center;gap:8px;height:48px;margin:0}
.dk-ica .ch svg{width:14px;height:12px;fill:var(--ink2)}
.dk-ica .ch b{font-size:var(--f-xl);font-weight:700;color:var(--ink)}
.dk-ica .ch.up svg{fill:var(--ac)}
.dk-ica .ch.up b{color:var(--ac)}
.dk-ica .ch.eq svg{fill:var(--g3)}
.dk-ica .ch.eq b{color:var(--mu)}