/* ============================================================
   공통 아이콘 — 모든 공개 페이지가 이 파일 하나만 쓴다.
   <link rel="stylesheet" href="/components/icons.css"> 한 줄.

   ArrowRight (Ant Design AiOutlineArrowRight) — 우측 이동(Next) 성격의
   CTA는 예외 없이 이 화살표를 쓴다. 무료 상담 신청하기 · 전체보기 ·
   사례 보기 · 더 보기 … 전부 같은 모양·같은 hover.

   ★ SVG 경로는 이 파일에 한 번만 있다.
     각 페이지는 <i class="icoar"></i> 만 쓴다 — 마크업에 SVG를 복사하면
     그때부터 페이지마다 조금씩 달라지기 시작한다(그래서 이렇게 모았다).

   색   : 부모의 currentColor 를 그대로 따른다(마스크 방식)
   크기 : font-size 로 정한다. 기본 1em — 부모 글자 크기에 자동으로 맞는다.
          고정 크기가 필요하면 .icoar{font-size:16px} 처럼 지정.
   hover: 부모(a/button)에 마우스를 올리면 오른쪽으로 3px.
   ============================================================ */
:root{
  --ico-arrow-right: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22%3E%3Cpath fill=%22black%22 d=%22M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z%22/%3E%3C/svg%3E");
}
.icoar{
  display:inline-block;flex:none;vertical-align:-.1em;
  width:1em;height:1em;
  background-color:currentColor;
  -webkit-mask:var(--ico-arrow-right) center/contain no-repeat;
          mask:var(--ico-arrow-right) center/contain no-repeat;
  transition:transform .16s ease;
}
a:hover > .icoar,
button:hover > .icoar{ transform:translateX(3px); }
@media(prefers-reduced-motion:reduce){
  .icoar{transition:none;}
  a:hover > .icoar,button:hover > .icoar{transform:none;}
}
