+interface MonitorIconProps {

+  /** 표시 제어용 클래스 패스스루(예: 테마 CSS 변형자 `hidden theme-system:contents`).

+   * 디자인 값(색상·치수 등) 주입은 금지 — 색은 상위 요소의 currentColor를 상속한다. */

+  className?: string;

+}

+

+/**

+ * 시스템(OS) 테마를 상징하는 모니터 아이콘(화면 사각형 + 받침). 직접 작도한 인라인 SVG.

+ * `stroke="currentColor"`라 버튼 등 상위 요소의 text 색 토큰을 그대로 상속하며,

+ * 장식용이므로 `aria-hidden`을 부여한다 — 접근성 이름은 소비처(IconButton)가 책임진다.

+ */

+export function MonitorIcon({ className }: MonitorIconProps) {

+  return (

+    <svg

+      viewBox="0 0 24 24"

+      fill="none"

+      stroke="currentColor"

+      strokeWidth="2"

+      strokeLinecap="round"

+      strokeLinejoin="round"

+      aria-hidden="true"

+      className={`size-5 ${className ?? ""}`}

+    >

+      <rect x="3" y="4" width="18" height="13" rx="1.5" />

+      <path d="M8 21h8" />

+      <path d="M12 17v4" />

+    </svg>

+  );

+}

+interface MoonIconProps {

+  /** 표시 제어용 클래스 패스스루(예: 테마 CSS 변형자 `hidden theme-dark:contents`).

+   * 디자인 값(색상·치수 등) 주입은 금지 — 색은 상위 요소의 currentColor를 상속한다. */

+  className?: string;

+}

+

+/**

+ * 다크 테마를 상징하는 초승달 아이콘(단일 path). 직접 작도한 인라인 SVG — 큰 원호(외곽)와

+ * 작은 원호(안쪽 오려내기)를 이어 붙인 표준 초승달 구성법을 사용했다(외부 아이콘

+ * 저작물 복제 없음).

+ * `stroke="currentColor"`라 버튼 등 상위 요소의 text 색 토큰을 그대로 상속하며,

+ * 장식용이므로 `aria-hidden`을 부여한다 — 접근성 이름은 소비처(IconButton)가 책임진다.

+ */

+export function MoonIcon({ className }: MoonIconProps) {

+  return (

+    <svg

+      viewBox="0 0 24 24"

+      fill="none"

+      stroke="currentColor"

+      strokeWidth="2"

+      strokeLinecap="round"

+      strokeLinejoin="round"

+      aria-hidden="true"

+      className={`size-5 ${className ?? ""}`}

+    >

+      <path d="M20 14.5A8.5 8.5 0 1 1 9.5 4A6.5 6.5 0 0 0 20 14.5Z" />

+    </svg>

+  );

+}

+interface SunIconProps {

+  /** 표시 제어용 클래스 패스스루(예: 테마 CSS 변형자 `hidden theme-light:contents`).

+   * 디자인 값(색상·치수 등) 주입은 금지 — 색은 상위 요소의 currentColor를 상속한다. */

+  className?: string;

+}

+

+/**

+ * 라이트 테마를 상징하는 해 아이콘(중심 원 + 8방향 광선). 직접 작도한 인라인 SVG.

+ * `stroke="currentColor"`라 버튼 등 상위 요소의 text 색 토큰을 그대로 상속하며,

+ * 장식용이므로 `aria-hidden`을 부여한다 — 접근성 이름은 소비처(IconButton)가 책임진다.

+ */

+export function SunIcon({ className }: SunIconProps) {

+  return (

+    <svg

+      viewBox="0 0 24 24"

+      fill="none"

+      stroke="currentColor"

+      strokeWidth="2"

+      strokeLinecap="round"

+      strokeLinejoin="round"

+      aria-hidden="true"

+      className={`size-5 ${className ?? ""}`}

+    >

+      <circle cx="12" cy="12" r="4" />

+      <path d="M12 2v2.5" />

+      <path d="M12 19.5V22" />

+      <path d="M2 12h2.5" />

+      <path d="M19.5 12H22" />

+      <path d="M4.93 4.93l1.77 1.77" />

+      <path d="M17.3 17.3l1.77 1.77" />

+      <path d="M4.93 19.07l1.77-1.77" />

+      <path d="M17.3 6.7l1.77-1.77" />

+    </svg>

+  );

+}