/*
 * 아이콘 스프라이트 사용 규칙 + 1px 이미지 대체 CSS.
 *
 *   <link rel="stylesheet" href="/assets/icons.css">
 *   <svg class="icon" aria-hidden="true"><use href="/assets/icons.svg#icon-next"/></svg>
 *
 * 주의: 외부 파일 <use href> 는 동일 출처에서만 동작한다. Vite dev/build 모두
 * 같은 출처로 서빙되므로 문제없지만, 스프라이트를 다른 도메인 CDN 에 올리면
 * 아이콘이 통째로 사라진다.
 */

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex: none;
}

/* 레거시가 _on.png 를 따로 두던 자리는 색만 바꾸면 된다. */
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-xl { width: 2em;   height: 2em; }


/* ------------------------------------------------------------------
 * 1px 짜리 배경 이미지들. SVG 조차 필요 없고 border 로 끝난다.
 * 괄호 안은 대체 대상 원본 파일.
 * ------------------------------------------------------------------ */

/* common/2dep_bar.png (8x1) */
.rule-2dep { border-top: 1px solid #8dc3ff; }

/* common/3dep_bar.png (1x21) — 세로 구분선 */
.rule-3dep { border-left: 1px solid #8dc3ff; }

/* common/page_line.png (1x28) — 페이지네이션 구분선 */
.rule-page { border-left: 1px solid #d2d8e0; }

/* user/board_s_bar.png (1x12) — 게시판 메타 구분선 */
.rule-board { border-left: 1px solid #a7a7a7; }

/* user/caption/cap_title_bar.png (37x1) — 제목 밑 짧은 강조선 */
.rule-cap-title { border-top: 3px solid #25c8a2; width: 37px; }

/* user/caption/nav_right_bg.png (1x24) */
.rule-nav-right { border-left: 1px solid #25c8a2; }


/* ------------------------------------------------------------------
 * 배지. 원본은 글자를 구워 넣은 PNG 라 SVG 로 옮길 대상이 아니다.
 * 실제 텍스트로 두고 CSS 로 칠하면 스크린리더도 읽는다.
 * ------------------------------------------------------------------ */

/* common/ico_new.png (22x11) — <span class="badge badge-new">NEW</span> */
.badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  vertical-align: middle;
}
.badge-new    { background: #465fff; }

/* common/btn_notice.png (27x16) — <span class="badge badge-notice">공지</span> */
.badge-notice { background: #0f5aad; }