feat(sw): add SW Footer component and Storybook stories

2026-10-20 09:41:12 +09:00
1 parent 77a809baa3
commit 6cf885412e
@@ -0,0 +1,229 @@
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState, type HTMLAttributes, type ReactNode } from "react"
+import {
+  SWFooterAddSlot, SWFooterAuxGroup, SWFooterGuide, SWFooterMenu, SWFooterSideButton, SWFooterToolButton, moveFocus,
+  type SWFooterGuideContent,
+} from "./SWFooterParts"
+import type { SWFooterAuxItem, SWFooterCategory, SWFooterTool } from "./types"
+import "../../theme/sw-footer.css"
+
+/** Side button of the bar ends: texts and click. `false` hides it. */
+export interface SWFooterSideAction {
+  /** Default `보조기능` (start) / `명령어` (end). */
+  title?: string
+  /** Default `전체보기`. */
+  subtitle?: string
+  tooltip?: string
+  onClick?: () => void
+  /** aria-pressed (e.g. the full list is open). */
+  pressed?: boolean
+  disabled?: boolean
+}
+
+export interface SWFooterProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** Categories of the bottom row and their commands, in order (Figma 도형 수정 편집 …). */
+  categories: SWFooterCategory[]
+  /** Current category (controlled). */
+  categoryId?: string
+  /** Initial category when uncontrolled. Default: the first. */
+  defaultCategoryId?: string
+  onCategoryChange?: (categoryId: string) => void
+  /** Selected command (the running one) of the current category: orange (Figma Variant3). `null`: none. */
+  activeToolId?: string | null
+  /** A command was clicked. The host runs it and updates `activeToolId`. */
+  onToolSelect?: (toolId: string, categoryId: string, tool: SWFooterTool) => void
+  /**
+   * Slots of the command row (commands + empty + slots). Default 17 (Figma 1920px frame), shrinking to the bar width.
+   * With `command` the row keeps its own width: default commands + 2 empty slots.
+   */
+  slotCount?: number
+  /** An empty + slot was clicked (register a command). `slotIndex` is 0-based in the row. Omitted: the empty slots are inert. */
+  onSlotAdd?: (slotIndex: number, categoryId: string) => void
+  /** Guide over a hovered / focused empty slot. Default: the Figma guide (`명령어 등록` / `빠른사용`). `false`: none. */
+  slotGuide?: SWFooterGuideContent | false
+  /** Shows the + after the categories. */
+  onCategoryAdd?: () => void
+  /** 3 × 2 auxiliary toggles (객체스냅 …). Omitted or empty: no grid. */
+  auxItems?: SWFooterAuxItem[]
+  onAuxPressedChange?: (id: string, pressed: boolean) => void
+  onAuxItemClick?: (id: string) => void
+  /** Left button `보조기능 / 전체보기`. Default shown; `false` hides it. */
+  auxAll?: SWFooterSideAction | false
+  /** Button after the slots `명령어 / 전체보기`. Default shown; `false` hides it. */
+  commandAll?: SWFooterSideAction | false
+  /**
+   * Command line inside the bar, between the auxiliary grid and the command slots (usually `<SWFooterCommandLine>`,
+   * reference screen 2026-10-20). It takes the free width; the slots then sit right before 명령어 전체보기 at the end.
+   * Expanded, it grows upwards over the drawing area.
+   */
+  command?: ReactNode
+  /** Text above the bar, left (cursor coordinates …). */
+  status?: ReactNode
+  /** Layout tabs above the bar, right aligned (usually `<SWFooterLayoutTabs>`). */
+  layoutTabs?: ReactNode
+  /** Free content at the right end of the bar (status, coordinates …). */
+  trailing?: ReactNode
+  /** Accessible name of the bar. Default `명령 도구`. */
+  label?: string
+}
+
+const SLOT = 68
+
+/**
+ * HMDesign SW Footer (Figma "레이아웃 분리" 26:10097 bottom bar, 72px): 보조기능 button, auxiliary toggle grid,
+ * command slots over the category row, 명령어 전체보기 button and an optional layout tab row above. Data in, user
+ * actions out: the component never runs CAD commands. Has `hm-sw-theme` on its root (no <SWTheme> needed).
+ */
+export const SWFooter = forwardRef<HTMLElement, SWFooterProps>(function SWFooter({
+  categories, categoryId, defaultCategoryId, onCategoryChange, activeToolId = null, onToolSelect,
+  slotCount, onSlotAdd, slotGuide = {}, onCategoryAdd,
+  auxItems, onAuxPressedChange, onAuxItemClick, auxAll = {}, commandAll = {},
+  command, status, layoutTabs, trailing, label = "명령 도구", className, ...rest
+}, ref) {
+  const [ownCategory, setOwnCategory] = useState(defaultCategoryId ?? categories[0]?.id)
+  const requested = categoryId ?? ownCategory
+  const category = categories.find(item => item.id === requested) ?? categories[0]
+  const tools = category?.tools ?? []
+  const uid = useId()
+  const panelId = `${uid}panel`
+  const tabPrefix = `${uid}tab`
+
+  // Room for slots, measured (Figma 26:10097 has no narrow layout; the reference screens of 2026-10-20 do):
+  // empty slots go first, then the commands that do not fit move to the ▲ panel above the last slot.
+  const rootRef = useRef<HTMLElement | null>(null)
+  const groupRef = useRef<HTMLDivElement>(null)
+  const auxRef = useRef<HTMLDivElement>(null)
+  const embedded = command !== undefined && command !== null && command !== false
+  const [fit, setFit] = useState(Number.POSITIVE_INFINITY)
+  useLayoutEffect(() => {
+    const root = rootRef.current
+    const group = groupRef.current
+    if (!root || !group) return
+    const measure = () => {
+      const end = group.querySelector<HTMLElement>(":scope > .hm-sw-footer-side")?.offsetWidth ?? 0
+      let room = group.clientWidth - end
+      if (embedded) {
+        const aux = auxRef.current
+        const auxWidth = aux ? aux.offsetWidth + parseFloat(getComputedStyle(aux).marginRight || "0") : 0
+        const commandMin = parseFloat(getComputedStyle(root).getPropertyValue("--hm-sw-footer-command-min-width")) || 0
+        room = root.clientWidth - auxWidth - commandMin - 4 - end - 2
+      }
+      setFit(Math.max(1, Math.floor((room - 1) / SLOT)))
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(root)
+    observer.observe(group)
+    if (auxRef.current) observer.observe(auxRef.current)
+    return () => observer.disconnect()
+  }, [embedded])
+  const overflow = tools.length > fit
+  const visible = overflow ? tools.slice(0, Math.max(0, fit - 1)) : tools
+  const hidden = overflow ? tools.slice(visible.length) : []
+  const wanted = embedded ? slotCount ?? tools.length + 2 : slotCount ?? 17
+  const slots = overflow ? fit : Math.max(tools.length, Math.min(wanted, fit))
+
+  // ▲ panel of the commands that do not fit (ico_arrow 26:10023: ▲ closed, ▼ open).
+  const [moreOpen, setMoreOpen] = useState(false)
+  const moreRef = useRef<HTMLButtonElement>(null)
+  const morePanelRef = useRef<HTMLDivElement>(null)
+  const moreId = `${uid}more`
+  useEffect(() => { if (!overflow) setMoreOpen(false) }, [overflow])
+  useEffect(() => {
+    if (!moreOpen) return
+    const close = (event: PointerEvent) => {
+      const target = event.target as Node
+      if (!morePanelRef.current?.contains(target) && !moreRef.current?.contains(target)) setMoreOpen(false)
+    }
+    document.addEventListener("pointerdown", close)
+    morePanelRef.current?.querySelector<HTMLButtonElement>("button:not(:disabled)")?.focus()
+    return () => document.removeEventListener("pointerdown", close)
+  }, [moreOpen])
+
+  // The guide is placed on the bar (the slot row clips its children).
+  const [guideLeft, setGuideLeft] = useState<number | null>(null)
+  const guideId = `${uid}guide`
+  const guideOpenChange = (open: boolean, button: HTMLButtonElement) => {
+    const root = rootRef.current
+    if (!open || !root) { setGuideLeft(null); return }
+    const slot = button.getBoundingClientRect()
+    setGuideLeft(slot.left - root.getBoundingClientRect().left + slot.width / 2)
+  }
+
+  const selectCategory = (id: string) => { if (categoryId === undefined) setOwnCategory(id); onCategoryChange?.(id); setGuideLeft(null); setMoreOpen(false) }
+  const side = (action: SWFooterSideAction | false, position: "start" | "end") => action && (
+    <SWFooterSideButton side={position} title={action.title ?? (position === "start" ? "보조기능" : "명령어")} subtitle={action.subtitle ?? "전체보기"}
+      tooltip={action.tooltip} aria-pressed={action.pressed} disabled={action.disabled} onClick={action.onClick} />
+  )
+  const activeIndex = visible.findIndex(item => item.id === activeToolId)
+  const toolButton = (tool: SWFooterTool, tabIndex: number, after?: () => void) => category && (
+    <SWFooterToolButton key={`${category.id}:${tool.id}`} label={tool.label} icon={tool.icon} activeIcon={tool.activeIcon}
+      pressed={tool.id === activeToolId} disabled={tool.disabled || category.disabled} title={tool.title} aria-label={tool.ariaLabel}
+      tabIndex={tabIndex} onClick={() => { onToolSelect?.(tool.id, category.id, tool); after?.() }} />
+  )
+
+  return (
+    <footer ref={node => { rootRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node }}
+      aria-label={label} className={`hm-sw-theme hm-sw-footer${className ? ` ${className}` : ""}`} data-command={embedded ? "" : undefined} {...rest}>
+      {status !== undefined && status !== null && <div className="hm-sw-footer__status">{status}</div>}
+      {layoutTabs && <div className="hm-sw-footer__tabs">{layoutTabs}</div>}
+      {(auxAll || (auxItems && auxItems.length > 0)) && (
+        <div ref={auxRef} className="hm-sw-footer__aux-area">
+          {side(auxAll, "start")}
+          {auxItems && auxItems.length > 0 && <SWFooterAuxGroup items={auxItems} onPressedChange={onAuxPressedChange} onItemClick={onAuxItemClick} />}
+        </div>
+      )}
+      {embedded && <div className="hm-sw-footer__command">{command}</div>}
+      <div ref={groupRef} className="hm-sw-footer__group">
+        <div className="hm-sw-footer__scroll">
+          <div className="hm-sw-footer__panel" style={{ width: slots * SLOT + 1 }}>
+            <div className="hm-sw-footer__vacant" style={{ left: (visible.length + (overflow ? 1 : 0)) * SLOT }} aria-hidden="true" />
+            <div id={panelId} role="tabpanel" aria-labelledby={category ? `${tabPrefix}-${category.id}` : undefined}>
+              <div role="toolbar" aria-label={category?.label ?? label} className="hm-sw-footer__slots"
+                onKeyDown={event => moveFocus(event, ":scope > .hm-sw-footer-slot > :is(.hm-sw-footer-tool, .hm-sw-footer-add, .hm-sw-footer-more)")}>
+                {visible.map((tool, index) => toolButton(tool, index === Math.max(0, activeIndex) ? 0 : -1))}
+                {overflow && (
+                  <div className="hm-sw-footer-slot">
+                    <button ref={moreRef} type="button" className="hm-sw-footer-more" aria-expanded={moreOpen} aria-controls={moreOpen ? moreId : undefined}
+                      aria-label={`명령 더보기 (${hidden.length}개)`} title={`명령 더보기 (${hidden.length}개)`} tabIndex={visible.length === 0 ? 0 : -1}
+                      data-active={hidden.some(item => item.id === activeToolId) ? "" : undefined} onClick={() => setMoreOpen(open => !open)}>
+                      <span className="hm-sw-footer-more__icon" aria-hidden="true" />
+                    </button>
+                  </div>
+                )}
+                {!overflow && Array.from({ length: slots - visible.length }, (_, offset) => {
+                  const index = visible.length + offset
+                  if (!onSlotAdd) {
+                    return <div key={`empty:${index}`} className="hm-sw-footer-slot"><span className="hm-sw-footer-add" data-inert="" aria-hidden="true" /></div>
+                  }
+                  return (
+                    <SWFooterAddSlot key={`empty:${index}`} guide={false} disabled={category?.disabled}
+                      aria-label={`${slotGuide ? slotGuide.title ?? "명령어 등록" : "명령어 등록"} (${index + 1}번 칸)`}
+                      aria-describedby={guideLeft !== null && slotGuide ? guideId : undefined}
+                      tabIndex={visible.length === 0 && offset === 0 ? 0 : -1}
+                      onGuideOpenChange={slotGuide ? guideOpenChange : undefined}
+                      onClick={() => category && onSlotAdd?.(index, category.id)} />
+                  )
+                })}
+              </div>
+            </div>
+            <SWFooterMenu items={categories} value={category?.id ?? ""} onValueChange={selectCategory} onAdd={onCategoryAdd}
+              panelId={panelId} tabIdPrefix={tabPrefix} style={{ width: slots * SLOT + 1 }} />
+            {overflow && moreOpen && (
+              <div ref={morePanelRef} id={moreId} role="group" aria-label={`${category?.label ?? label} 더보기`} className="hm-sw-footer__more-panel"
+                style={{ width: Math.min(hidden.length, slots) * SLOT + 2 }}
+                onKeyDown={event => {
+                  if (event.key === "Escape") { event.preventDefault(); setMoreOpen(false); moreRef.current?.focus() }
+                  else moveFocus(event, ".hm-sw-footer-tool")
+                }}>
+                {hidden.map((tool, index) => toolButton(tool, index === 0 ? 0 : -1, () => setMoreOpen(false)))}
+              </div>
+            )}
+          </div>
+        </div>
+        {side(commandAll, "end")}
+        {(!embedded || trailing) && <div className="hm-sw-footer__trailing">{trailing}</div>}
+      </div>
+      {slotGuide && guideLeft !== null && <SWFooterGuide id={guideId} role="tooltip" className="hm-sw-footer__guide" style={{ left: guideLeft }} {...slotGuide} />}
+    </footer>
+  )
+})
@@ -0,0 +1,64 @@
+import { forwardRef, useEffect, useId, useRef, useState, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react"
+import "../../theme/sw-footer.css"
+
+export interface SWFooterCommandLineProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
+  /** Output lines, oldest first. Collapsed shows the last 3 (Figma 26:10048), expanded scrolls them all (26:10056). */
+  history: ReactNode[]
+  /** Input text (controlled). Omit for an uncontrolled input. */
+  value?: string
+  onValueChange?: (value: string) => void
+  /** Enter in the input. The host runs the command and appends to `history`; an uncontrolled input is cleared. */
+  onSubmit?: (command: string) => void
+  /** Prompt label before the input. Default `Command:`. */
+  prompt?: string
+  /** Expanded (270px) or collapsed (71px). Controlled with `onExpandedChange`. */
+  expanded?: boolean
+  defaultExpanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  /** Native input attributes (placeholder, autoFocus, …). */
+  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">
+  /** Accessible names. */
+  historyLabel?: string
+  expandLabel?: string
+  collapseLabel?: string
+}
+
+/**
+ * Command line window (Figma command 26:10048 collapsed / 26:10056 expanded, ico_arrow 26:10023): 566px, 12px text
+ * with 10% tracking, history above a 23px input well. The host places it (usually above the footer, left).
+ */
+export const SWFooterCommandLine = forwardRef<HTMLDivElement, SWFooterCommandLineProps>(function SWFooterCommandLine({
+  history, value, onValueChange, onSubmit, prompt = "Command:", expanded, defaultExpanded = false, onExpandedChange,
+  inputProps, historyLabel = "명령 기록", expandLabel = "명령 기록 펼치기", collapseLabel = "명령 기록 접기", className, ...rest
+}, ref) {
+  const [ownExpanded, setOwnExpanded] = useState(defaultExpanded)
+  const [ownValue, setOwnValue] = useState("")
+  const open = expanded ?? ownExpanded
+  const text = value ?? ownValue
+  const inputId = useId()
+  const historyRef = useRef<HTMLOListElement>(null)
+  // Newest line in view (collapsed: the last 3 lines; expanded: scrolled to the end).
+  useEffect(() => { const list = historyRef.current; if (list) list.scrollTop = list.scrollHeight }, [history.length, open])
+  const toggle = () => { const next = !open; if (expanded === undefined) setOwnExpanded(next); onExpandedChange?.(next) }
+  return (
+    <div ref={ref} className={`hm-sw-theme hm-sw-footer-command${className ? ` ${className}` : ""}`} data-expanded={open ? "" : undefined} {...rest}>
+      <ol ref={historyRef} className="hm-sw-footer-command__history" role="log" aria-label={historyLabel} aria-live="polite">
+        {/* Collapsed: the last 3 lines (Figma 26:10048); expanded: every line, scrolled to the newest. */}
+        {(open ? history : history.slice(-3)).map((line, index) => <li key={open ? index : history.length - 3 + index}>{line}</li>)}
+      </ol>
+      <button type="button" className="hm-sw-footer-command__toggle" aria-expanded={open} aria-label={open ? collapseLabel : expandLabel} title={open ? collapseLabel : expandLabel} onClick={toggle} />
+      <div className="hm-sw-footer-command__prompt">
+        <label className="hm-sw-footer-command__label" htmlFor={inputId}>{prompt}</label>
+        <input id={inputId} className="hm-sw-footer-command__input" autoComplete="off" spellCheck={false} {...inputProps} value={text}
+          onChange={event => { if (value === undefined) setOwnValue(event.target.value); onValueChange?.(event.target.value) }}
+          onKeyDown={event => {
+            inputProps?.onKeyDown?.(event)
+            if (event.defaultPrevented || event.key !== "Enter" || event.nativeEvent.isComposing) return
+            event.preventDefault()
+            onSubmit?.(text)
+            if (value === undefined) setOwnValue("")
+          }} />
+      </div>
+    </div>
+  )
+})
@@ -0,0 +1,112 @@
+import { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type KeyboardEvent } from "react"
+import { moveFocus } from "./SWFooterParts"
+import type { SWFooterLayout } from "./types"
+import "../../theme/sw-footer.css"
+
+/** `value` of the Model tab. */
+export const SW_FOOTER_MODEL = "model"
+
+export interface SWFooterLayoutTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Layout tabs, left to right (Figma 26:9942: `+`, Layout 03, Layout 02, Layout 01, Model). */
+  layouts: SWFooterLayout[]
+  /** Current space: a layout id or `SW_FOOTER_MODEL` (`"model"`). */
+  value: string
+  onValueChange?: (value: string) => void
+  /** Shows the + before the tabs (btn_add_layout 26:9776). */
+  onAdd?: () => void
+  /** Shows the × of the hovered tab (btn_delete / btn_close2) and enables the Delete key. */
+  onRemove?: (layoutId: string) => void
+  /** Double click or F2 edits the name (Figma Variant5 / Variant6: #0F0D0A, red text); Enter saves, Escape cancels. */
+  onRename?: (layoutId: string, label: string) => void
+  /** Layout whose name is being edited (controlled). Default: internal (double click / F2). */
+  editingId?: string | null
+  onEditingChange?: (layoutId: string | null) => void
+  /** Model tab text. Default `Model`. `false` hides the Model tab. */
+  modelLabel?: string | false
+  /** Accessible names. */
+  label?: string
+  addLabel?: string
+  removeLabel?: (layout: SWFooterLayout) => string
+}
+
+/**
+ * Drawing space tabs above the footer (Figma layout01 26:9794, layout02 26:9837, layout03 26:9885, model 26:9914,
+ * btn_add_layout 26:9776, btn_delete 26:9785, btn_close2 26:9931, 탭 상태변화 26:9942). The last tab (next to Model, or the
+ * right end without Model as in 26:10097) takes the slanted layout01 shape; the others the rounded layout02 / 03 shape. States: Default, Hover, On (current),
+ * On hover, editing name. Tablist: Arrow / Home / End select, Delete removes, F2 renames.
+ */
+export const SWFooterLayoutTabs = forwardRef<HTMLDivElement, SWFooterLayoutTabsProps>(function SWFooterLayoutTabs({
+  layouts, value, onValueChange, onAdd, onRemove, onRename, editingId, onEditingChange, modelLabel = "Model",
+  label = "도면 공간", addLabel = "레이아웃 추가", removeLabel = layout => `${layout.label} 삭제`, className, onKeyDown, ...rest
+}, ref) {
+  const [ownEditing, setOwnEditing] = useState<string | null>(null)
+  const editing = editingId !== undefined ? editingId : ownEditing
+  const setEditing = (next: string | null) => { if (editingId === undefined) setOwnEditing(next); onEditingChange?.(next) }
+  const [draft, setDraft] = useState("")
+  const inputRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (!editing) return
+    setDraft(layouts.find(layout => layout.id === editing)?.label ?? "")
+    inputRef.current?.select()
+    // Only when another tab starts editing (a renamed label must not reset the draft).
+  }, [editing])
+  useEffect(() => { if (editing && !layouts.some(layout => layout.id === editing)) setEditing(null) }, [editing, layouts])
+
+  const startEdit = (layout: SWFooterLayout) => { if (!onRename || layout.locked) return; setEditing(layout.id) }
+  const commit = (layout: SWFooterLayout, keep = true) => {
+    const next = draft.trim()
+    setEditing(null)
+    if (keep && next && next !== layout.label) onRename?.(layout.id, next)
+  }
+  const tabKeys = (event: KeyboardEvent<HTMLButtonElement>, layout: SWFooterLayout) => {
+    if (event.key === "F2") { event.preventDefault(); startEdit(layout) }
+    if (event.key === "Delete" && onRemove && !layout.locked) { event.preventDefault(); onRemove(layout.id) }
+  }
+
+  return (
+    <div ref={ref} className={`hm-sw-footer-tabs${className ? ` ${className}` : ""}`} {...rest}>
+      {onAdd && <button type="button" className="hm-sw-footer-tabs__add" aria-label={addLabel} title={addLabel} onClick={onAdd} />}
+      <div role="tablist" aria-label={label} className="hm-sw-footer-tabs__list"
+        onKeyDown={event => { onKeyDown?.(event); if (!event.defaultPrevented && !editing) moveFocus(event, '[role="tab"]', true) }}>
+        {layouts.map((layout, index) => {
+          const selected = layout.id === value
+          const isEditing = editing === layout.id
+          const shape = layout.shape ?? (index === layouts.length - 1 ? "slant" : "rounded")
+          const removable = !!onRemove && !layout.locked
+          return (
+            <div key={layout.id} className="hm-sw-footer-tab" data-shape={shape} data-state={isEditing ? "editing" : selected ? "on" : "off"}>
+              {isEditing ? (
+                <span className="hm-sw-footer-tab__select">
+                  <input ref={inputRef} className="hm-sw-footer-tab__input" value={draft} aria-label={`${layout.label} 이름`}
+                    onChange={event => setDraft(event.target.value)} onBlur={() => commit(layout)}
+                    onKeyDown={event => {
+                      event.stopPropagation()
+                      if (event.key === "Enter") { event.preventDefault(); commit(layout) }
+                      if (event.key === "Escape") { event.preventDefault(); commit(layout, false) }
+                    }} />
+                </span>
+              ) : (
+                <button type="button" role="tab" className="hm-sw-footer-tab__select" aria-selected={selected} tabIndex={selected ? 0 : -1}
+                  title={layout.label} aria-keyshortcuts={[removable && "Delete", onRename && !layout.locked && "F2"].filter(Boolean).join(" ") || undefined}
+                  onClick={() => { if (!selected) onValueChange?.(layout.id) }} onDoubleClick={() => startEdit(layout)} onKeyDown={event => tabKeys(event, layout)}>
+                  <span className="hm-sw-footer-tab__label">{layout.label}</span>
+                </button>
+              )}
+              {/* Figma keeps the × place in every state (opacity 0 until hover). Mouse only: the tab owns Delete. */}
+              <button type="button" className="hm-sw-footer-tab__remove" tabIndex={-1} aria-label={removeLabel(layout)} title={removable ? removeLabel(layout) : undefined}
+                disabled={!removable} aria-hidden={!removable || undefined} onClick={() => onRemove?.(layout.id)} />
+            </div>
+          )
+        })}
+        {modelLabel !== false && (
+          <div className="hm-sw-footer-tab hm-sw-footer-tab--model" data-state={value === SW_FOOTER_MODEL ? "on" : "off"}>
+            <button type="button" role="tab" className="hm-sw-footer-tab__select" aria-selected={value === SW_FOOTER_MODEL} tabIndex={value === SW_FOOTER_MODEL ? 0 : -1}
+              onClick={() => { if (value !== SW_FOOTER_MODEL) onValueChange?.(SW_FOOTER_MODEL) }}>
+              <span className="hm-sw-footer-tab__label">{modelLabel}</span>
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+})
@@ -0,0 +1,347 @@
+import {
+  forwardRef, useCallback, useId, useLayoutEffect, useRef, useState,
+  type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type ReactNode,
+} from "react"
+import type { SWFooterAuxItem } from "./types"
+import "../../theme/sw-footer.css"
+
+const cx = (...names: (string | false | undefined)[]) => names.filter(Boolean).join(" ")
+
+/** Arrow / Home / End focus move between the enabled buttons matching `selector` (roving focus). */
+export function moveFocus(event: KeyboardEvent<HTMLElement>, selector: string, select = false) {
+  const keys = ["ArrowRight", "ArrowLeft", "Home", "End"]
+  if (!keys.includes(event.key)) return
+  const items = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(selector)).filter(item => !item.disabled)
+  const index = items.indexOf(document.activeElement as HTMLButtonElement)
+  if (index < 0 || !items.length) return
+  event.preventDefault()
+  const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
+    : (index + (event.key === "ArrowRight" ? 1 : -1) + items.length) % items.length
+  items[next].focus()
+  if (select) items[next].click()
+}
+
+// ---------- Side button (보조기능 전체보기 / 명령어 전체보기) ----------
+
+export interface SWFooterSideButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+  /** First line, 14px with the black outline (e.g. `보조기능`, `명령어`). */
+  title: string
+  /** Second line, 14px (e.g. `전체보기`). */
+  subtitle?: string
+  /** `start` (left of the bar, shadow to the right) or `end` (shadow to the left). Default `start`. */
+  side?: "start" | "end"
+  /** Native tooltip. */
+  tooltip?: string
+}
+
+/** 74 × 71 button of the bar ends (Figma 26:10189 / 26:10192). */
+export const SWFooterSideButton = forwardRef<HTMLButtonElement, SWFooterSideButtonProps>(function SWFooterSideButton(
+  { title, subtitle, side = "start", tooltip, className, type = "button", ...rest }, ref,
+) {
+  return (
+    <button ref={ref} type={type} className={cx("hm-sw-footer-side", className)} data-side={side} title={tooltip} {...rest}>
+      <span className="hm-sw-footer-side__title">{title}</span>
+      {subtitle && <span className="hm-sw-footer-side__subtitle">{subtitle}</span>}
+    </button>
+  )
+})
+
+// ---------- Auxiliary toggles ----------
+
+export interface SWFooterAuxButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  label: string
+  icon?: ReactNode
+  /** On / off (aria-pressed). Omit for a plain button. */
+  pressed?: boolean
+}
+
+/** 104 × 33 auxiliary toggle (Figma btn_객체스냅 …). */
+export const SWFooterAuxButton = forwardRef<HTMLButtonElement, SWFooterAuxButtonProps>(function SWFooterAuxButton(
+  { label, icon, pressed, className, type = "button", ...rest }, ref,
+) {
+  return (
+    <button ref={ref} type={type} className={cx("hm-sw-footer-aux__button", className)} aria-pressed={pressed} {...rest}>
+      {icon !== undefined && <span className="hm-sw-footer-aux__icon" aria-hidden="true">{icon}</span>}
+      <span className="hm-sw-footer-aux__label">{label}</span>
+    </button>
+  )
+})
+
+export interface SWFooterAuxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  items: SWFooterAuxItem[]
+  /** A toggle (`pressed` defined) was clicked: the next state. The host updates `items`. */
+  onPressedChange?: (id: string, pressed: boolean) => void
+  /** Every click (toggles and plain buttons). */
+  onItemClick?: (id: string) => void
+  /** Columns of the grid. Default 3 (Figma 3 × 2). */
+  columns?: number
+  /** Accessible name. Default `보조 기능`. */
+  label?: string
+}
+
+/** The 3 × 2 auxiliary toggle grid (Figma 26:10104, gap 2px). */
+export const SWFooterAuxGroup = forwardRef<HTMLDivElement, SWFooterAuxGroupProps>(function SWFooterAuxGroup(
+  { items, onPressedChange, onItemClick, columns = 3, label = "보조 기능", className, style, ...rest }, ref,
+) {
+  return (
+    <div ref={ref} role="group" aria-label={label} className={cx("hm-sw-footer-aux", className)}
+      style={columns === 3 ? style : { ...style, ["--hm-sw-footer-aux-columns" as string]: columns }} {...rest}>
+      {items.map(item => (
+        <SWFooterAuxButton key={item.id} label={item.label} icon={item.icon} pressed={item.pressed} title={item.title} disabled={item.disabled}
+          onClick={() => { onItemClick?.(item.id); if (item.pressed !== undefined) onPressedChange?.(item.id, !item.pressed) }} />
+      ))}
+    </div>
+  )
+})
+
+// ---------- Command slot ----------
+
+export interface SWFooterToolButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  label: string
+  icon?: ReactNode
+  /** Hover / selected icon (orange). Default: `icon`. */
+  activeIcon?: ReactNode
+  /** Selected (the running command): aria-pressed and the orange look of Figma Variant3. */
+  pressed?: boolean
+}
+
+/** 68 × 47 command slot (Figma line / Pline / Arc …). Consecutive slots draw the 1px gold divider between them. */
+export const SWFooterToolButton = forwardRef<HTMLButtonElement, SWFooterToolButtonProps>(function SWFooterToolButton(
+  { label, icon, activeIcon, pressed, className, type = "button", ...rest }, ref,
+) {
+  return (
+    <div className="hm-sw-footer-slot">
+      <button ref={ref} type={type} className={cx("hm-sw-footer-tool", className)} aria-pressed={pressed ?? false}
+        data-active-icon={activeIcon !== undefined ? "" : undefined} {...rest}>
+        <span className="hm-sw-footer-tool__label">{label}</span>
+        {icon !== undefined && <span className="hm-sw-footer-tool__icon hm-sw-footer-tool__icon--default" aria-hidden="true">{icon}</span>}
+        {activeIcon !== undefined && <span className="hm-sw-footer-tool__icon hm-sw-footer-tool__icon--active" aria-hidden="true">{activeIcon}</span>}
+      </button>
+    </div>
+  )
+})
+
+// ---------- Guide (가이드 영상 보기 / 바로가기 등록) ----------
+
+export interface SWFooterGuideContent {
+  /** 14px title at the bottom left. Default `명령어 등록`. */
+  title?: string
+  /** 12px caption at the bottom right. Default `빠른사용`. */
+  caption?: string
+  /** 194 × 111 preview (guide video, image or any element). Default: an empty black well. */
+  media?: ReactNode
+}
+
+export interface SWFooterGuideProps extends SWFooterGuideContent, Omit<HTMLAttributes<HTMLDivElement>, "title"> {}
+
+/**
+ * 208 × 149 quick-use guide of an empty slot (Figma 26:9242 Variant2 / guide_바로가기 등록 26:9096). `SWFooter` and
+ * `SWFooterAddSlot` show it above the hovered (focused) empty slot; rendered alone it is a static card.
+ */
+export const SWFooterGuide = forwardRef<HTMLDivElement, SWFooterGuideProps>(function SWFooterGuide(
+  { title = "명령어 등록", caption = "빠른사용", media, className, ...rest }, ref,
+) {
+  return (
+    <div ref={ref} className={cx("hm-sw-footer-guide", className)} {...rest}>
+      <div className="hm-sw-footer-guide__media">{media}</div>
+      <span className="hm-sw-footer-guide__title">{title}</span>
+      <span className="hm-sw-footer-guide__caption">{caption}</span>
+    </div>
+  )
+})
+
+export interface SWFooterAddSlotProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * Guide shown above the slot while it is hovered or focused. Default: the Figma guide (`명령어 등록` / `빠른사용`,
+   * empty preview). `false`: no guide.
+   */
+  guide?: SWFooterGuideContent | false
+  /** Shows the guide (controlled). Default: while hovered or keyboard focused. */
+  guideOpen?: boolean
+  /** Hover / focus of the slot (SWFooter places its own guide with it). */
+  onGuideOpenChange?: (open: boolean, button: HTMLButtonElement) => void
+}
+
+/** 68 × 46 empty command slot (Figma btn_add_menu 26:9971): the + well; hover draws the orange dashed ring. */
+export const SWFooterAddSlot = forwardRef<HTMLButtonElement, SWFooterAddSlotProps>(function SWFooterAddSlot(
+  { guide = {}, guideOpen, onGuideOpenChange, className, type = "button", onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest }, ref,
+) {
+  const [hovered, setOpen] = useState(false)
+  const open = guideOpen ?? hovered
+  const guideId = useId()
+  const change = (next: boolean, button: HTMLButtonElement) => { setOpen(next); onGuideOpenChange?.(next, button) }
+  return (
+    <div className="hm-sw-footer-slot">
+      <button ref={ref} type={type} className={cx("hm-sw-footer-add", className)} aria-expanded={guide ? open : undefined} aria-label={rest["aria-label"] ?? (guide ? guide.title ?? "명령어 등록" : "명령어 등록")}
+        aria-describedby={guide && open ? guideId : rest["aria-describedby"]}
+        onMouseEnter={event => { onMouseEnter?.(event); change(true, event.currentTarget) }}
+        onMouseLeave={event => { onMouseLeave?.(event); change(false, event.currentTarget) }}
+        onFocus={event => { onFocus?.(event); if (event.currentTarget.matches(":focus-visible")) change(true, event.currentTarget) }}
+        onBlur={event => { onBlur?.(event); change(false, event.currentTarget) }}
+        {...rest} />
+      {guide && open && !rest.disabled && <SWFooterGuide id={guideId} role="tooltip" {...guide} />}
+    </div>
+  )
+})
+
+// ---------- Category row ----------
+
+export interface SWFooterMenuItem { id: string; label: string; disabled?: boolean }
+
+export interface SWFooterMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  items: SWFooterMenuItem[]
+  /** Current category (Figma Variant3, #FF5C00 in the open pocket). */
+  value: string
+  onValueChange?: (id: string) => void
+  /** Shows the + after the last tab (btn_add 26:9451). */
+  onAdd?: () => void
+  /** Accessible name of +. Default `카테고리 추가`. */
+  addLabel?: string
+  /** Accessible name of the tab list. Default `명령어 분류`. */
+  label?: string
+  /** Id of the panel the tabs control (the slots). */
+  panelId?: string
+  /** Id prefix of the tabs (`<prefix>-<item id>`), for `aria-labelledby` of the panel. */
+  tabIdPrefix?: string
+}
+
+/** Pocket outline of menu_bg (26:10127) around the current tab [a, a + w] of a row `width` wide (Figma path, offset). */
+function pocketPath(a: number, w: number, width: number) {
+  const r = a + w
+  return `M0 0H${a - 7}C${a - 3.135} 0.003 ${a} 8.956 ${a} 20V21C${a} 22.105 ${a + 0.895} 23 ${a + 2} 23H${r - 2}`
+    + `C${r - 0.895} 23 ${r} 22.105 ${r} 21V20C${r} 8.954 ${r + 3.134} 0 ${r + 7} 0H${width}V24H0Z`
+}
+function pocketEdge(a: number, w: number) {
+  const r = a + w
+  return `M${a - 7} 0C${a - 3.135} 0.003 ${a} 8.956 ${a} 20V21C${a} 22.105 ${a + 0.895} 23 ${a + 2} 23H${r - 2}`
+    + `C${r - 0.895} 23 ${r} 22.105 ${r} 21V20C${r} 8.954 ${r + 3.134} 0 ${r + 7} 0`
+}
+
+/**
+ * The 24px category row under the slots (Figma menu_bg 26:10127 + text_도형 … 26:9459–26:9522). The current tab
+ * is a pocket opened into the slots: 7px curved edges instead of the 1px dividers. Tablist: Arrow / Home / End select.
+ */
+export const SWFooterMenu = forwardRef<HTMLDivElement, SWFooterMenuProps>(function SWFooterMenu(
+  { items, value, onValueChange, onAdd, addLabel = "카테고리 추가", label = "명령어 분류", panelId, tabIdPrefix, className, onKeyDown, ...rest }, ref,
+) {
+  const rowRef = useRef<HTMLDivElement | null>(null)
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const [geometry, setGeometry] = useState<{ a: number; w: number; width: number } | null>(null)
+  const [steps, setSteps] = useState<{ prev: boolean; next: boolean } | null>(null)
+  const uid = useId()
+  const prefix = tabIdPrefix ?? `${uid}tab`
+  const current = value
+  const roving = items.some(item => item.id === value && !item.disabled) ? value : items.find(item => !item.disabled)?.id
+  const measure = useCallback(() => {
+    const row = rowRef.current
+    const viewport = viewportRef.current
+    if (!row || !viewport) return
+    const width = row.clientWidth
+    const tab = viewport.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')
+    const start = viewport.offsetLeft
+    const a = tab ? start + tab.offsetLeft - viewport.scrollLeft : -100
+    const w = tab ? tab.offsetWidth : 0
+    // The pocket is drawn only while its tab is fully inside the viewport (it never opens under ◀ ▶ or +).
+    const inside = tab && a >= start && a + w <= start + viewport.clientWidth + 0.5
+    setGeometry(previous => {
+      const next = inside ? { a, w, width } : { a: -100, w: 0, width }
+      return previous && previous.a === next.a && previous.w === next.w && previous.width === next.width ? previous : next
+    })
+    const overflow = viewport.scrollWidth > viewport.clientWidth + 1
+    const prev = viewport.scrollLeft > 0.5
+    const nextStep = viewport.scrollLeft + viewport.clientWidth < viewport.scrollWidth - 0.5
+    setSteps(previous => {
+      const next = overflow ? { prev, next: nextStep } : null
+      return previous?.prev === next?.prev && previous?.next === next?.next ? previous : next
+    })
+  }, [])
+  useLayoutEffect(() => {
+    const row = rowRef.current
+    const viewport = viewportRef.current
+    if (!row || !viewport) return
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(row)
+    viewport.querySelectorAll('[role="tab"]').forEach(tab => observer.observe(tab))
+    return () => observer.disconnect()
+  }, [current, items, measure])
+  // Width props (style) and font loading change the row without a resize of the observed boxes in some hosts.
+  useLayoutEffect(measure)
+  // Keeps the focused / current tab in view inside the viewport (no page scroll).
+  const reveal = (tab: HTMLElement) => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+    const left = tab.offsetLeft - 7
+    const right = tab.offsetLeft + tab.offsetWidth + 7
+    if (left < viewport.scrollLeft) viewport.scrollLeft = left
+    else if (right > viewport.scrollLeft + viewport.clientWidth) viewport.scrollLeft = right - viewport.clientWidth
+  }
+  useLayoutEffect(() => {
+    const tab = viewportRef.current?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')
+    if (tab) reveal(tab)
+  }, [current])
+  const step = (direction: 1 | -1) => {
+    const viewport = viewportRef.current
+    if (viewport) viewport.scrollBy({ left: direction * Math.max(43, viewport.clientWidth * 0.6), behavior: "smooth" })
+  }
+  const gradientId = `${uid}menu-fill`
+  const edgeId = `${uid}menu-edge`
+  const clipId = `${uid}menu-clip`
+  const shape = geometry ? pocketPath(geometry.a, geometry.w, geometry.width) : undefined
+  return (
+    <div ref={node => { rowRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node }}
+      className={cx("hm-sw-footer-menu", className)} {...rest}>
+      {shape && geometry && (
+        <svg className="hm-sw-footer-menu__surface" width={geometry.width} height={24} viewBox={`0 0 ${geometry.width} 24`} aria-hidden="true" focusable="false">
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="24" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+              <stop style={{ stopColor: "var(--hm-sw-footer-menu-bottom)" }} />
+              <stop offset="0.86" style={{ stopColor: "var(--hm-sw-footer-menu-bottom)" }} />
+              <stop offset="1" style={{ stopColor: "var(--hm-sw-footer-menu-top)" }} />
+            </linearGradient>
+            <linearGradient id={edgeId} x1="0" y1="24.5" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+              <stop style={{ stopColor: "var(--hm-sw-footer-menu-bottom)" }} />
+              <stop offset="1" style={{ stopColor: "var(--hm-sw-footer-menu-edge-top)" }} />
+            </linearGradient>
+            <clipPath id={clipId}><path d={shape} fillRule="evenodd" /></clipPath>
+          </defs>
+          <path d={shape} fill={`url(#${gradientId})`} fillRule="evenodd" />
+          {/* Inside strokes (Figma 2px stroke masked by the shape = 1px inside). */}
+          <path d={shape} fill="none" stroke={`url(#${edgeId})`} strokeWidth={2} clipPath={`url(#${clipId})`} />
+          {geometry.w > 0 && <path d={pocketEdge(geometry.a, geometry.w)} fill="none" style={{ stroke: "var(--hm-sw-footer-menu-pocket-edge)" }} strokeWidth={2} strokeLinejoin="round" clipPath={`url(#${clipId})`} />}
+        </svg>
+      )}
+      <div ref={viewportRef} className="hm-sw-footer-menu__viewport" onScroll={measure}>
+        {/* display: contents keeps the tabs and dividers in the viewport row; + stays outside the tablist. */}
+        <div role="tablist" aria-label={label} className="hm-sw-footer-menu__tabs"
+          onFocus={event => { if ((event.target as HTMLElement).getAttribute("role") === "tab") reveal(event.target as HTMLElement) }}
+          onKeyDown={event => { onKeyDown?.(event); if (!event.defaultPrevented) moveFocus(event, '[role="tab"]', true) }}>
+          {items.map((item, index) => {
+            const selected = item.id === current
+            const previousSelected = index > 0 && items[index - 1].id === current
+            return [
+              index > 0 && !selected && !previousSelected && <span key={`${item.id}:divider`} className="hm-sw-footer-menu__divider" aria-hidden="true" />,
+              <button key={item.id} type="button" role="tab" id={`${prefix}-${item.id}`} className="hm-sw-footer-menu__tab"
+                aria-selected={selected} aria-controls={panelId} tabIndex={item.id === roving ? 0 : -1} disabled={item.disabled}
+                onClick={() => { if (!selected) onValueChange?.(item.id) }}>
+                {item.label}
+              </button>,
+            ]
+          })}
+        </div>
+      </div>
+      {steps && [
+        <button key="prev" type="button" className="hm-sw-footer-menu__step" aria-label="이전 분류" title="이전 분류" tabIndex={-1} disabled={!steps.prev} onClick={() => step(-1)}>
+          <svg width="6" height="8" viewBox="0 0 6 8" aria-hidden="true"><path d="M6 0V8L0 4Z" fill="currentColor" /></svg>
+        </button>,
+        <button key="next" type="button" className="hm-sw-footer-menu__step" aria-label="다음 분류" title="다음 분류" tabIndex={-1} disabled={!steps.next} onClick={() => step(1)}>
+          <svg width="6" height="8" viewBox="0 0 6 8" aria-hidden="true"><path d="M0 0V8L6 4Z" fill="currentColor" /></svg>
+        </button>,
+      ]}
+      {onAdd && [
+        !steps && items.length > 0 && items[items.length - 1].id !== current && <span key="add:divider" className="hm-sw-footer-menu__divider" aria-hidden="true" />,
+        <button key="add" type="button" className="hm-sw-footer-menu__add" aria-label={addLabel} title={addLabel} onClick={onAdd} />,
+      ]}
+    </div>
+  )
+})
@@ -0,0 +1,30 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="inner" filter="url(#filter0_i_0_6)">
+<rect width="16" height="16" rx="1" fill="url(#paint0_linear_0_6)"/>
+<g id="outlined line (Stroke)">
+<use xlink:href="#stroke0_0_6" fill="#FF5C00"/>
+<mask id="stroke1_0_6" maskUnits="userSpaceOnUse" x="1.5" y="3.5" width="13" height="10" fill="black">
+<rect fill="white" x="1.5" y="3.5" width="13" height="10"/>
+<use xlink:href="#stroke0_0_6"/>
+</mask>
+<path d="M8 11.5L13.3536 6.14645C13.5488 5.95118 13.5488 5.6346 13.3536 5.43934C13.1583 5.24408 12.8417 5.24408 12.6464 5.43934L8 10.0858L3.35355 5.43934C3.15829 5.24408 2.84171 5.24408 2.64645 5.43934C2.45118 5.6346 2.45118 5.95118 2.64645 6.14645L8 11.5Z" stroke-width="2" stroke-linecap="round" stroke="black" mask="url(#stroke1_0_6)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_0_6" x="0" y="0" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_6"/>
+</filter>
+<linearGradient id="paint0_linear_0_6" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#281F16"/>
+<stop offset="1" stop-color="#352E25"/>
+</linearGradient>
+<path id="stroke0_0_6" d="M8 11.5L13.3536 6.14645C13.5488 5.95118 13.5488 5.6346 13.3536 5.43934C13.1583 5.24408 12.8417 5.24408 12.6464 5.43934L8 10.0858L3.35355 5.43934C3.15829 5.24408 2.84171 5.24408 2.64645 5.43934C2.45118 5.6346 2.45118 5.95118 2.64645 6.14645L8 11.5Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,31 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="inner" filter="url(#filter0_i_0_4)">
+<rect width="16" height="16" rx="1" fill="url(#paint0_linear_0_4)"/>
+<rect width="16" height="16" rx="1" fill="black" fill-opacity="0.2"/>
+<g id="outlined line (Stroke)">
+<use xlink:href="#stroke0_0_4" fill="#FF5C00"/>
+<mask id="stroke1_0_4" maskUnits="userSpaceOnUse" x="1.5" y="3.5" width="13" height="10" fill="black">
+<rect fill="white" x="1.5" y="3.5" width="13" height="10"/>
+<use xlink:href="#stroke0_0_4"/>
+</mask>
+<path d="M8 11.5L13.3536 6.14645C13.5488 5.95118 13.5488 5.6346 13.3536 5.43934C13.1583 5.24408 12.8417 5.24408 12.6464 5.43934L8 10.0858L3.35355 5.43934C3.15829 5.24408 2.84171 5.24408 2.64645 5.43934C2.45118 5.6346 2.45118 5.95118 2.64645 6.14645L8 11.5Z" stroke-width="2" stroke-linecap="round" stroke="black" mask="url(#stroke1_0_4)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_0_4" x="0" y="0" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_4"/>
+</filter>
+<linearGradient id="paint0_linear_0_4" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#281F16"/>
+<stop offset="1" stop-color="#352E25"/>
+</linearGradient>
+<path id="stroke0_0_4" d="M8 11.5L13.3536 6.14645C13.5488 5.95118 13.5488 5.6346 13.3536 5.43934C13.1583 5.24408 12.8417 5.24408 12.6464 5.43934L8 10.0858L3.35355 5.43934C3.15829 5.24408 2.84171 5.24408 2.64645 5.43934C2.45118 5.6346 2.45118 5.95118 2.64645 6.14645L8 11.5Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,30 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="inner" filter="url(#filter0_i_0_8)">
+<rect width="16" height="16" rx="1" fill="url(#paint0_linear_0_8)"/>
+<g id="outlined line (Stroke)">
+<use xlink:href="#stroke0_0_8" fill="#FF5C00"/>
+<mask id="stroke1_0_8" maskUnits="userSpaceOnUse" x="1.5" y="2.29297" width="13" height="10" fill="black">
+<rect fill="white" x="1.5" y="2.29297" width="13" height="10"/>
+<use xlink:href="#stroke0_0_8"/>
+</mask>
+<path d="M8 4.29297L13.3536 9.64652C13.5488 9.84178 13.5488 10.1584 13.3536 10.3536C13.1583 10.5489 12.8417 10.5489 12.6464 10.3536L8 5.70718L3.35355 10.3536C3.15829 10.5489 2.84171 10.5489 2.64645 10.3536C2.45118 10.1584 2.45118 9.84178 2.64645 9.64652L8 4.29297Z" stroke-width="2" stroke-linecap="round" stroke="black" mask="url(#stroke1_0_8)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_0_8" x="0" y="0" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_8"/>
+</filter>
+<linearGradient id="paint0_linear_0_8" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#281F16"/>
+<stop offset="1" stop-color="#352E25"/>
+</linearGradient>
+<path id="stroke0_0_8" d="M8 4.29297L13.3536 9.64652C13.5488 9.84178 13.5488 10.1584 13.3536 10.3536C13.1583 10.5489 12.8417 10.5489 12.6464 10.3536L8 5.70718L3.35355 10.3536C3.15829 10.5489 2.84171 10.5489 2.64645 10.3536C2.45118 10.1584 2.45118 9.84178 2.64645 9.64652L8 4.29297Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,30 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="inner" filter="url(#filter0_i_0_10)">
+<rect width="16" height="16" rx="1" fill="url(#paint0_linear_0_10)"/>
+<g id="outlined line (Stroke)">
+<use xlink:href="#stroke0_0_10" fill="#D4CBBD"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="1.5" y="2.29297" width="13" height="10" fill="black">
+<rect fill="white" x="1.5" y="2.29297" width="13" height="10"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M8 4.29297L13.3536 9.64652C13.5488 9.84178 13.5488 10.1584 13.3536 10.3536C13.1583 10.5489 12.8417 10.5489 12.6464 10.3536L8 5.70718L3.35355 10.3536C3.15829 10.5489 2.84171 10.5489 2.64645 10.3536C2.45118 10.1584 2.45118 9.84178 2.64645 9.64652L8 4.29297Z" stroke-width="2" stroke-linecap="round" stroke="black" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_0_10" x="0" y="0" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_10"/>
+</filter>
+<linearGradient id="paint0_linear_0_10" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#281F16"/>
+<stop offset="1" stop-color="#352E25"/>
+</linearGradient>
+<path id="stroke0_0_10" d="M8 4.29297L13.3536 9.64652C13.5488 9.84178 13.5488 10.1584 13.3536 10.3536C13.1583 10.5489 12.8417 10.5489 12.6464 10.3536L8 5.70718L3.35355 10.3536C3.15829 10.5489 2.84171 10.5489 2.64645 10.3536C2.45118 10.1584 2.45118 9.84178 2.64645 9.64652L8 4.29297Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,13 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="&#234;&#183;&#184;&#235;&#166;&#172;&#235;&#147;&#156;&#236;&#138;&#164;&#235;&#131;&#133;">
+<use xlink:href="#stroke0_0_121" fill="#F1EDE5"/>
+<mask id="stroke1_0_121" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16" fill="black">
+<rect fill="white" width="16" height="16"/>
+<use xlink:href="#stroke0_0_121"/>
+</mask>
+<path d="M1 1H3V3H1V1ZM1 5H3V7H1V5ZM3 9H1V11H3V9ZM1 13H3V15H1V13ZM7 1H5V3H7V1ZM5 5H7V7H5V5ZM7 9H5V11H7V9ZM5 13H7V15H5V13ZM11 1H9V3H11V1ZM9 5H11V7H9V5ZM11 9H9V11H11V9ZM9 13H11V15H9V13ZM15 1H13V3H15V1ZM13 5H15V7H13V5ZM15 9H13V11H15V9ZM13 13H15V15H13V13Z" stroke-width="2" stroke="black" stroke-opacity="0.9" mask="url(#stroke1_0_121)"/>
+</g>
+<defs>
+<path id="stroke0_0_121" d="M3 1H1V3H3V1ZM3 5H1V7H3V5ZM1 9H3V11H1V9ZM3 13H1V15H3V13ZM5 1H7V3H5V1ZM7 5H5V7H7V5ZM5 9H7V11H5V9ZM7 13H5V15H7V13ZM9 1H11V3H9V1ZM11 5H9V7H11V5ZM9 9H11V11H9V9ZM11 13H9V15H11V13ZM13 1H15V3H13V1ZM15 5H13V7H15V5ZM13 9H15V11H13V9ZM15 13H13V15H15V13Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,13 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="&#234;&#183;&#184;&#235;&#166;&#172;&#235;&#147;&#156;">
+<use xlink:href="#stroke0_0_149" fill="#F1EDE5"/>
+<mask id="stroke1_0_149" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17" fill="black">
+<rect fill="white" width="17" height="17"/>
+<use xlink:href="#stroke0_0_149"/>
+</mask>
+<path d="M3 1H4V3L8 3V1H9V3L13 3V1H14V3L16 3V4H14V8H16V9H14V13H16V14H14V16H13V14H9V16H8V14H4V16H3V14H1V13H3V9H1V8H3V4H1V3L3 3V1ZM13 13V9H9V13H13ZM8 13V9H4V13H8ZM4 8H8V4H4V8ZM9 8H13V4H9V8Z" stroke-width="2" stroke="black" stroke-opacity="0.9" mask="url(#stroke1_0_149)"/>
+</g>
+<defs>
+<path id="stroke0_0_149" d="M4 1H3V3L1 3V4H3V8H1V9H3V13H1V14H3V16H4V14H8V16H9V14H13V16H14V14H16V13H14V9H16V8H14V4H16V3L14 3V1H13V3L9 3V1H8V3L4 3V1ZM13 13V9H9V13H13ZM8 13V9H4V13H8ZM8 8H4V4H8V8ZM13 8H9V4H13V8Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="linewight">
+<path d="M1 1H15V3H1V1ZM1 5H15V8H1V5ZM15 10H1V14H15V10Z" fill-rule="evenodd" clip-rule="evenodd" fill="#F1EDE5"/>
+<mask id="stroke0_0_145" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="15" fill="black">
+<rect fill="white" width="16" height="15"/>
+<path d="M1 1H15V3H1V1ZM1 5H15V8H1V5ZM15 10H1V14H15V10Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M15 1H1V3H15V1ZM15 5H1V8H15V5ZM1 10H15V14H1V10Z" stroke-width="2" stroke="black" stroke-opacity="0.9" mask="url(#stroke0_0_145)"/>
+</g>
+</svg>
@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="object snap">
+<path d="M5 1H1V5H2V16H16V2H5V1ZM3 5H5V3H15V15H3V5Z" fill-rule="evenodd" clip-rule="evenodd" fill="#F1EDE5"/>
+<mask id="stroke0_0_187" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17" fill="black">
+<rect fill="white" width="17" height="17"/>
+<path d="M5 1H1V5H2V16H16V2H5V1ZM3 5H5V3H15V15H3V5Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M1 1H5V2H16V16H2V5H1V1ZM5 5H3V15H15V3H5V5Z" stroke-width="2" stroke="black" stroke-opacity="0.9" mask="url(#stroke0_0_187)"/>
+</g>
+</svg>
@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="orthogonal">
+<path d="M1 1H2V12H6V16H17V17H6H2H1V16V12V1Z" fill-rule="evenodd" clip-rule="evenodd" fill="#F1EDE5"/>
+<mask id="stroke0_0_159" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18" fill="black">
+<rect fill="white" width="18" height="18"/>
+<path d="M1 1H2V12H6V16H17V17H6H2H1V16V12V1Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M2 1H1V12V16V17H2H6H17V16H6V12H2V1Z" stroke-width="2" stroke="black" stroke-opacity="0.9" mask="url(#stroke0_0_159)"/>
+</g>
+</svg>
@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Union">
+<path d="M15 15V1H1V15H15ZM14 14H2V2.70718L9.29282 10H7V11H10H11V10V7H10V9.29297L2.70703 2H14V14Z" fill-rule="evenodd" clip-rule="evenodd" fill="#F1EDE5"/>
+<mask id="stroke0_0_163" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16" fill="black">
+<rect fill="white" width="16" height="16"/>
+<path d="M15 15V1H1V15H15ZM14 14H2V2.70718L9.29282 10H7V11H10H11V10V7H10V9.29297L2.70703 2H14V14Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M15 1V15H1V1H15ZM2 14H14V2H2.70703L10 9.29297V7H11V10V11H10H7V10H9.29282L2 2.70718V14Z" stroke-width="2" stroke="black" stroke-opacity="0.9" mask="url(#stroke0_0_163)"/>
+</g>
+</svg>
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="28" height="12" viewBox="0 0 28 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_add">
+<g id="Union">
+<path d="M15 5V1H13L13 5H9V7H13L13 11H15V7H19V5H15Z" fill-rule="evenodd" clip-rule="evenodd" fill="#D4CBBD"/>
+<mask id="stroke0_0_402" maskUnits="userSpaceOnUse" x="8" y="0" width="12" height="12" fill="black">
+<rect fill="white" x="8" width="12" height="12"/>
+<path d="M15 5V1H13L13 5H9V7H13L13 11H15V7H19V5H15Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M15 1V5H19V7H15V11H13L13 7H9V5H13L13 1H15Z" stroke-width="2" stroke="black" mask="url(#stroke0_0_402)"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,21 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="74" height="71" viewBox="0 0 74 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M0.5 0.5H73.5V70.5H0.5V0.5Z" fill-rule="evenodd" clip-rule="evenodd" fill="url(#paint0_linear_0_21)" stroke="url(#paint1_linear_0_21)"/>
+<defs>
+<linearGradient id="paint0_linear_0_21" x1="0" y1="71.0004" x2="-1.95986e-06" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B261C"/>
+<stop offset="0.12" stop-color="#15120C"/>
+<stop offset="0.28" stop-color="#282216"/>
+<stop offset="0.37" stop-color="#322B1D"/>
+<stop offset="0.51" stop-color="#3C3423"/>
+<stop offset="0.89" stop-color="#2B2417"/>
+<stop offset="1" stop-color="#433A25"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_21" x1="37" y1="0" x2="37" y2="71" gradientUnits="userSpaceOnUse">
+<stop stop-color="#886D35"/>
+<stop offset="0.0884568" stop-color="#423625"/>
+<stop offset="0.26169" stop-color="#F3DBA8"/>
+<stop offset="0.837918" stop-color="#0E0B06"/>
+<stop offset="1" stop-color="#574B30"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,24 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="68" height="46" viewBox="0 0 68 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_add_menu">
+<mask id="stroke0_0_10" fill="white">
+<path d="M0 0H68V46H0V0Z"/>
+</mask>
+<path id="Rectangle 7507" d="M0 0V-0.5C-0.276142 -0.5 -0.5 -0.276142 -0.5 0L0 0ZM68 0H68.5C68.5 -0.276142 68.2761 -0.5 68 -0.5V0ZM68 46V46.5C68.2761 46.5 68.5 46.2761 68.5 46H68ZM0 46H-0.5C-0.5 46.2761 -0.276142 46.5 0 46.5L0 46ZM0 0H-0.5V1.91667H0H0.5V0H0ZM0 5.75H-0.5V9.58333H0H0.5V5.75H0ZM0 13.4167H-0.5V17.25H0H0.5V13.4167H0ZM0 21.0833H-0.5V24.9167H0H0.5V21.0833H0ZM0 28.75H-0.5V32.5833H0H0.5V28.75H0ZM0 36.4167H-0.5V40.25H0H0.5V36.4167H0ZM0 44.0833H-0.5V46H0H0.5V44.0833H0ZM0 46V46.5H1.88889V46V45.5H0V46ZM5.66667 46V46.5H9.44444V46V45.5H5.66667V46ZM13.2222 46V46.5H17V46V45.5H13.2222V46ZM20.7778 46V46.5H24.5556V46V45.5H20.7778V46ZM28.3333 46V46.5H32.1111V46V45.5H28.3333V46ZM35.8889 46V46.5H39.6667V46V45.5H35.8889V46ZM43.4445 46V46.5H47.2222V46V45.5H43.4445V46ZM51 46V46.5H54.7778V46V45.5H51V46ZM58.5556 46V46.5H62.3333V46V45.5H58.5556V46ZM66.1111 46V46.5H68V46V45.5H66.1111V46ZM68 46H68.5V44.0833H68H67.5V46H68ZM68 40.25H68.5V36.4167H68H67.5V40.25H68ZM68 32.5833H68.5V28.75H68H67.5V32.5833H68ZM68 24.9167H68.5V21.0833H68H67.5V24.9167H68ZM68 17.25H68.5V13.4167H68H67.5V17.25H68ZM68 9.58333H68.5V5.75H68H67.5V9.58333H68ZM68 1.91667H68.5V0H68H67.5V1.91667H68ZM68 0V-0.5H66.1111V0V0.5H68V0ZM62.3333 0V-0.5H58.5556V0V0.5H62.3333V0ZM54.7778 0V-0.5H51V0V0.5H54.7778V0ZM47.2222 0V-0.5H43.4444V0V0.5H47.2222V0ZM39.6667 0V-0.5H35.8889V0V0.5H39.6667V0ZM32.1111 0V-0.5H28.3333V0V0.5H32.1111V0ZM24.5556 0V-0.5H20.7778V0V0.5H24.5556V0ZM17 0V-0.5H13.2222V0V0.5H17V0ZM9.44444 0V-0.5H5.66666V0V0.5H9.44444V0ZM1.88888 0V-0.5H0V0V0.5H1.88888V0ZM0 0V-1C-0.552285 -1 -1 -0.552285 -1 0L0 0ZM68 0H69C69 -0.552285 68.5523 -1 68 -1V0ZM68 46V47C68.5523 47 69 46.5523 69 46H68ZM0 46H-1C-1 46.5523 -0.552285 47 0 47L0 46ZM0 0H-1V1.91667H0H1V0H0ZM0 5.75H-1V9.58333H0H1V5.75H0ZM0 13.4167H-1V17.25H0H1V13.4167H0ZM0 21.0833H-1V24.9167H0H1V21.0833H0ZM0 28.75H-1V32.5833H0H1V28.75H0ZM0 36.4167H-1V40.25H0H1V36.4167H0ZM0 44.0833H-1V46H0H1V44.0833H0ZM0 46V47H1.88889V46V45H0V46ZM5.66667 46V47H9.44444V46V45H5.66667V46ZM13.2222 46V47H17V46V45H13.2222V46ZM20.7778 46V47H24.5556V46V45H20.7778V46ZM28.3333 46V47H32.1111V46V45H28.3333V46ZM35.8889 46V47H39.6667V46V45H35.8889V46ZM43.4445 46V47H47.2222V46V45H43.4445V46ZM51 46V47H54.7778V46V45H51V46ZM58.5556 46V47H62.3333V46V45H58.5556V46ZM66.1111 46V47H68V46V45H66.1111V46ZM68 46H69V44.0833H68H67V46H68ZM68 40.25H69V36.4167H68H67V40.25H68ZM68 32.5833H69V28.75H68H67V32.5833H68ZM68 24.9167H69V21.0833H68H67V24.9167H68ZM68 17.25H69V13.4167H68H67V17.25H68ZM68 9.58333H69V5.75H68H67V9.58333H68ZM68 1.91667H69V0H68H67V1.91667H68ZM68 0V-1H66.1111V0V1H68V0ZM62.3333 0V-1H58.5556V0V1H62.3333V0ZM54.7778 0V-1H51V0V1H54.7778V0ZM47.2222 0V-1H43.4444V0V1H47.2222V0ZM39.6667 0V-1H35.8889V0V1H39.6667V0ZM32.1111 0V-1H28.3333V0V1H32.1111V0ZM24.5556 0V-1H20.7778V0V1H24.5556V0ZM17 0V-1H13.2222V0V1H17V0ZM9.44444 0V-1H5.66666V0V1H9.44444V0ZM1.88888 0V-1H0V0V1H1.88888V0Z" fill="url(#paint0_linear_0_10)" mask="url(#stroke0_0_10)"/>
+<g id="Union">
+<path d="M35 21V17H33L33 21H29V23H33L33 27H35V23H39V21H35Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="28" y="16" width="12" height="12" fill="black">
+<rect fill="white" x="28" y="16" width="12" height="12"/>
+<path d="M35 21V17H33L33 21H29V23H33L33 27H35V23H39V21H35Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M35 17V21H39V23H35V27H33L33 23H29V21H33L33 17H35Z" stroke-width="2" stroke="black" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_10" x1="34" y1="0" x2="34" y2="46" gradientUnits="userSpaceOnUse">
+<stop offset="0.0852474" stop-color="#DA6813"/>
+<stop offset="0.379274" stop-color="#FFBB89"/>
+<stop offset="0.718536" stop-color="#E5690D"/>
+<stop offset="0.927747" stop-color="#AE3607"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="68" height="46" viewBox="0 0 68 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_add_menu">
+<g id="Union">
+<path d="M35 21V17H33L33 21H29V23H33L33 27H35V23H39V21H35Z" fill-rule="evenodd" clip-rule="evenodd" fill="#BEB5A6"/>
+<mask id="stroke0_0_411" maskUnits="userSpaceOnUse" x="28" y="16" width="12" height="12" fill="black">
+<rect fill="white" x="28" y="16" width="12" height="12"/>
+<path d="M35 21V17H33L33 21H29V23H33L33 27H35V23H39V21H35Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M35 17V21H39V23H35V27H33L33 23H29V21H33L33 17H35Z" stroke-width="2" stroke="black" mask="url(#stroke0_0_411)"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,32 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_add_layout" filter="url(#filter0_i_0_8)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V22H0V4Z" fill="#C3B79E"/>
+<path d="M4 0.5H20C21.933 0.5 23.5 2.067 23.5 4V21.5H0.5V4C0.5 2.12727 1.97083 0.598421 3.82031 0.504883L4 0.5Z" stroke="url(#paint0_linear_0_8)"/>
+<g id="Union">
+<path d="M13 7H11V10H8V12H11V15H13V12H16V10H13V7Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
+<mask id="stroke0_0_8" maskUnits="userSpaceOnUse" x="7" y="6" width="10" height="10" fill="black">
+<rect fill="white" x="7" y="6" width="10" height="10"/>
+<path d="M13 7H11V10H8V12H11V15H13V12H16V10H13V7Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M11 7H13V10H16V12H13V15H11V12H8V10H11V7Z" stroke-width="2" stroke="black" stroke-opacity="0.7" mask="url(#stroke0_0_8)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_0_8" x="0" y="-3" width="24" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_8"/>
+</filter>
+<linearGradient id="paint0_linear_0_8" x1="12" y1="0" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+<stop offset="0.0852474" stop-color="#DA6813"/>
+<stop offset="0.379274" stop-color="#FFBB89"/>
+<stop offset="0.718536" stop-color="#E5690D"/>
+<stop offset="0.927747" stop-color="#AE3607"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,23 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_add_layout" filter="url(#filter0_i_0_16)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V22H0V4Z" fill="#C3B79E"/>
+<path d="M4 0.5H20C21.933 0.5 23.5 2.067 23.5 4V21.5H0.5V4C0.5 2.12727 1.97083 0.598421 3.82031 0.504883L4 0.5Z" stroke="url(#paint0_linear_0_16)"/>
+<path id="Union" d="M13 7H11V10H8V12H11V15H13V12H16V10H13V7Z" fill-rule="evenodd" clip-rule="evenodd" fill="#161410"/>
+</g>
+<defs>
+<filter id="filter0_i_0_16" x="0" y="-3" width="24" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_16"/>
+</filter>
+<linearGradient id="paint0_linear_0_16" x1="12" y1="0" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8BA9C"/>
+<stop offset="1" stop-color="#918670"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,26 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="btn_close2">
+<g id="Rectangle 7506">
+<use xlink:href="#stroke0_0_9" fill="url(#paint0_linear_0_9)"/>
+<use xlink:href="#stroke0_0_9" fill="black" fill-opacity="0.2"/>
+</g>
+<g id="Union">
+<use xlink:href="#stroke1_0_9" fill="#FFC600"/>
+<mask id="stroke2_0_9" maskUnits="userSpaceOnUse" x="4" y="6.31798" width="10" height="10" fill="black">
+<rect fill="white" x="4" y="6.31798" width="10" height="10"/>
+<use xlink:href="#stroke1_0_9"/>
+</mask>
+<path d="M5.1472 8.17154C4.95194 7.97627 4.95194 7.65969 5.1472 7.46443C5.34246 7.26917 5.65905 7.26917 5.85431 7.46443L8.6824 10.2925L11.5104 7.4645C11.7057 7.26924 12.0223 7.26924 12.2175 7.4645C12.4128 7.65977 12.4128 7.97635 12.2175 8.17161L9.3895 10.9996L12.2183 13.8284C12.4135 14.0237 12.4135 14.3402 12.2183 14.5355C12.023 14.7308 11.7064 14.7308 11.5112 14.5355L8.6824 11.7067L5.85355 14.5356C5.65829 14.7308 5.34171 14.7308 5.14645 14.5356C4.95118 14.3403 4.95118 14.0237 5.14645 13.8285L7.97529 10.9996L5.1472 8.17154Z" stroke-width="2" stroke="black" stroke-opacity="0.7" mask="url(#stroke2_0_9)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_9" x1="14" y1="0" x2="14" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#700000"/>
+<stop offset="0.472245" stop-color="#BE0000"/>
+<stop offset="0.837245" stop-color="#620808"/>
+<stop offset="1" stop-color="#590000"/>
+</linearGradient>
+<path id="stroke0_0_9" d="M0 0H7.9262C10.4857 0 12.8907 1.22467 14.3961 3.29463L28 22H0V0Z"/>
+<path id="stroke1_0_9" d="M5.1472 7.46443C4.95194 7.65969 4.95194 7.97627 5.1472 8.17154L7.97529 10.9996L5.14645 13.8285C4.95118 14.0237 4.95118 14.3403 5.14645 14.5356C5.34171 14.7308 5.65829 14.7308 5.85355 14.5356L8.6824 11.7067L11.5112 14.5355C11.7064 14.7308 12.023 14.7308 12.2183 14.5355C12.4135 14.3402 12.4135 14.0237 12.2183 13.8284L9.3895 10.9996L12.2175 8.17161C12.4128 7.97635 12.4128 7.65977 12.2175 7.4645C12.0223 7.26924 11.7057 7.26924 11.5104 7.4645L8.6824 10.2925L5.85431 7.46443C5.65905 7.26917 5.34246 7.26917 5.1472 7.46443Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,22 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="btn_close2">
+<path id="Rectangle 7506" d="M0 0H7.9262C10.4857 0 12.8907 1.22467 14.3961 3.29463L28 22H0V0Z" fill="url(#paint0_linear_0_43)"/>
+<g id="Union">
+<use xlink:href="#stroke0_0_43" fill="white"/>
+<mask id="stroke1_0_43" maskUnits="userSpaceOnUse" x="4" y="6.31798" width="10" height="10" fill="black">
+<rect fill="white" x="4" y="6.31798" width="10" height="10"/>
+<use xlink:href="#stroke0_0_43"/>
+</mask>
+<path d="M5.1472 8.17154C4.95194 7.97627 4.95194 7.65969 5.1472 7.46443C5.34246 7.26917 5.65905 7.26917 5.85431 7.46443L8.6824 10.2925L11.5104 7.4645C11.7057 7.26924 12.0223 7.26924 12.2175 7.4645C12.4128 7.65977 12.4128 7.97635 12.2175 8.17161L9.3895 10.9996L12.2183 13.8284C12.4135 14.0237 12.4135 14.3402 12.2183 14.5355C12.023 14.7308 11.7064 14.7308 11.5112 14.5355L8.6824 11.7067L5.85355 14.5356C5.65829 14.7308 5.34171 14.7308 5.14645 14.5356C4.95118 14.3403 4.95118 14.0237 5.14645 13.8285L7.97529 10.9996L5.1472 8.17154Z" stroke-width="2" stroke="black" stroke-opacity="0.7" mask="url(#stroke1_0_43)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_43" x1="14" y1="0" x2="14" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#700000"/>
+<stop offset="0.472245" stop-color="#BE0000"/>
+<stop offset="0.837245" stop-color="#620808"/>
+<stop offset="1" stop-color="#590000"/>
+</linearGradient>
+<path id="stroke0_0_43" d="M5.1472 7.46443C4.95194 7.65969 4.95194 7.97627 5.1472 8.17154L7.97529 10.9996L5.14645 13.8285C4.95118 14.0237 4.95118 14.3403 5.14645 14.5356C5.34171 14.7308 5.65829 14.7308 5.85355 14.5356L8.6824 11.7067L11.5112 14.5355C11.7064 14.7308 12.023 14.7308 12.2183 14.5355C12.4135 14.3402 12.4135 14.0237 12.2183 13.8284L9.3895 10.9996L12.2175 8.17161C12.4128 7.97635 12.4128 7.65977 12.2175 7.4645C12.0223 7.26924 11.7057 7.26924 11.5104 7.4645L8.6824 10.2925L5.85431 7.46443C5.65905 7.26917 5.34246 7.26917 5.1472 7.46443Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,27 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="btn_delete">
+<mask id="path-1-inside-1_0_8" fill="white">
+<path d="M0 0H12C14.2091 0 16 1.79086 16 4V22H0V0Z"/>
+</mask>
+<path d="M0 0H12C14.2091 0 16 1.79086 16 4V22H0V0Z" fill="url(#paint0_linear_0_8)"/>
+<path d="M0 0H12C14.2091 0 16 1.79086 16 4V22H0V0Z" fill="black" fill-opacity="0.2"/>
+<path d="M0 0H16H0ZM16 22H0H16ZM-1 22V0H1V22H-1ZM16 0V22V0Z" fill="black" fill-opacity="0.4" mask="url(#path-1-inside-1_0_8)"/>
+<g id="Union">
+<use xlink:href="#stroke0_0_8" fill="#FFC600"/>
+<mask id="stroke1_0_8" maskUnits="userSpaceOnUse" x="3.31764" y="6.31798" width="10" height="10" fill="black">
+<rect fill="white" x="3.31764" y="6.31798" width="10" height="10"/>
+<use xlink:href="#stroke0_0_8"/>
+</mask>
+<path d="M4.46484 8.17154C4.26958 7.97627 4.26958 7.65969 4.46484 7.46443C4.66011 7.26917 4.97669 7.26917 5.17195 7.46443L8.00004 10.2925L10.828 7.4645C11.0233 7.26924 11.3399 7.26924 11.5352 7.4645C11.7304 7.65977 11.7304 7.97635 11.5352 8.17161L8.70714 10.9996L11.5359 13.8284C11.7312 14.0237 11.7312 14.3402 11.5359 14.5355C11.3406 14.7308 11.0241 14.7308 10.8288 14.5355L8.00004 11.7067L5.1712 14.5356C4.97593 14.7308 4.65935 14.7308 4.46409 14.5356C4.26883 14.3403 4.26883 14.0237 4.46409 13.8285L7.29293 10.9996L4.46484 8.17154Z" stroke-width="2" stroke="black" stroke-opacity="0.7" mask="url(#stroke1_0_8)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_8" x1="8" y1="0" x2="8" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#700000"/>
+<stop offset="0.472245" stop-color="#BE0000"/>
+<stop offset="0.837245" stop-color="#620808"/>
+<stop offset="1" stop-color="#590000"/>
+</linearGradient>
+<path id="stroke0_0_8" d="M4.46484 7.46443C4.26958 7.65969 4.26958 7.97627 4.46484 8.17154L7.29293 10.9996L4.46409 13.8285C4.26883 14.0237 4.26883 14.3403 4.46409 14.5356C4.65935 14.7308 4.97593 14.7308 5.1712 14.5356L8.00004 11.7067L10.8288 14.5355C11.0241 14.7308 11.3406 14.7308 11.5359 14.5355C11.7312 14.3402 11.7312 14.0237 11.5359 13.8284L8.70714 10.9996L11.5352 8.17161C11.7304 7.97635 11.7304 7.65977 11.5352 7.4645C11.3399 7.26924 11.0233 7.26924 10.828 7.4645L8.00004 10.2925L5.17195 7.46443C4.97669 7.26917 4.66011 7.26917 4.46484 7.46443Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,26 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="btn_delete">
+<mask id="path-1-inside-1_0_17" fill="white">
+<path d="M0 0H12C14.2091 0 16 1.79086 16 4V22H0V0Z"/>
+</mask>
+<path d="M0 0H12C14.2091 0 16 1.79086 16 4V22H0V0Z" fill="url(#paint0_linear_0_17)"/>
+<path d="M0 0H16H0ZM16 22H0H16ZM-1 22V0H1V22H-1ZM16 0V22V0Z" fill="black" fill-opacity="0.4" mask="url(#path-1-inside-1_0_17)"/>
+<g id="Union">
+<use xlink:href="#stroke0_0_17" fill="white"/>
+<mask id="stroke1_0_17" maskUnits="userSpaceOnUse" x="3.31764" y="6.31798" width="10" height="10" fill="black">
+<rect fill="white" x="3.31764" y="6.31798" width="10" height="10"/>
+<use xlink:href="#stroke0_0_17"/>
+</mask>
+<path d="M4.46484 8.17154C4.26958 7.97627 4.26958 7.65969 4.46484 7.46443C4.66011 7.26917 4.97669 7.26917 5.17195 7.46443L8.00004 10.2925L10.828 7.4645C11.0233 7.26924 11.3399 7.26924 11.5352 7.4645C11.7304 7.65977 11.7304 7.97635 11.5352 8.17161L8.70714 10.9996L11.5359 13.8284C11.7312 14.0237 11.7312 14.3402 11.5359 14.5355C11.3406 14.7308 11.0241 14.7308 10.8288 14.5355L8.00004 11.7067L5.1712 14.5356C4.97593 14.7308 4.65935 14.7308 4.46409 14.5356C4.26883 14.3403 4.26883 14.0237 4.46409 13.8285L7.29293 10.9996L4.46484 8.17154Z" stroke-width="2" stroke="black" stroke-opacity="0.7" mask="url(#stroke1_0_17)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_17" x1="8" y1="0" x2="8" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#700000"/>
+<stop offset="0.472245" stop-color="#BE0000"/>
+<stop offset="0.837245" stop-color="#620808"/>
+<stop offset="1" stop-color="#590000"/>
+</linearGradient>
+<path id="stroke0_0_17" d="M4.46484 7.46443C4.26958 7.65969 4.26958 7.97627 4.46484 8.17154L7.29293 10.9996L4.46409 13.8285C4.26883 14.0237 4.26883 14.3403 4.46409 14.5356C4.65935 14.7308 4.97593 14.7308 5.1712 14.5356L8.00004 11.7067L10.8288 14.5355C11.0241 14.7308 11.3406 14.7308 11.5359 14.5355C11.7312 14.3402 11.7312 14.0237 11.5359 13.8284L8.70714 10.9996L11.5352 8.17161C11.7304 7.97635 11.7304 7.65977 11.5352 7.4645C11.3399 7.26924 11.0233 7.26924 10.828 7.4645L8.00004 10.2925L5.17195 7.46443C4.97669 7.26917 4.66011 7.26917 4.46484 7.46443Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,30 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="73" height="22" viewBox="0 0 73 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg">
+<g filter="url(#filter0_i_0_4)">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H73V22H0L13.6039 3.29463Z" fill="#C3B79E"/>
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H73V22H0L13.6039 3.29463Z" fill="url(#paint0_linear_0_4)"/>
+</g>
+<path d="M20.0742 0.5H72.5V21.5H0.981445L14.0078 3.58887C15.4191 1.64829 17.6747 0.5 20.0742 0.5Z" stroke="url(#paint1_linear_0_4)"/>
+</g>
+<defs>
+<filter id="filter0_i_0_4" x="0" y="-3" width="73" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_4"/>
+</filter>
+<linearGradient id="paint0_linear_0_4" x1="0" y1="21.8948" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C6C4C"/>
+<stop offset="0.85" stop-color="#7C6C4C"/>
+<stop offset="1" stop-color="#A6946F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_4" x1="38.5" y1="0" x2="38.5" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.05"/>
+<stop offset="1" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,24 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="73" height="22" viewBox="0 0 73 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg">
+<g filter="url(#filter0_i_0_5)">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H73V22H0L13.6039 3.29463Z" fill="#C3B79E"/>
+</g>
+<path d="M20.0742 0.5H72.5V21.5H0.981445L14.0078 3.58887C15.4191 1.64829 17.6747 0.5 20.0742 0.5Z" stroke="url(#paint0_linear_0_5)"/>
+</g>
+<defs>
+<filter id="filter0_i_0_5" x="0" y="-3" width="73" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_5"/>
+</filter>
+<linearGradient id="paint0_linear_0_5" x1="38.5" y1="0" x2="38.5" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.05"/>
+<stop offset="1" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,17 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="97" height="22" viewBox="0 0 97 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg" filter="url(#filter0_i_0_58)">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H93C95.2091 0 97 1.79086 97 4V22H0L13.6039 3.29463Z" fill="#0F0D0A"/>
+</g>
+<defs>
+<filter id="filter0_i_0_58" x="0" y="-3" width="97" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_58"/>
+</filter>
+</defs>
+</svg>
@@ -0,0 +1,26 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="97" height="22" viewBox="0 0 97 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg">
+<g filter="url(#filter0_i_0_81)">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H93C95.2091 0 97 1.79086 97 4V22H0L13.6039 3.29463Z" fill="#0F0D0A"/>
+</g>
+<path d="M20.0742 0.5H93C94.933 0.5 96.5 2.067 96.5 4V21.5H0.981445L14.0078 3.58887C15.4191 1.64829 17.6747 0.5 20.0742 0.5Z" stroke="url(#paint0_linear_0_81)"/>
+</g>
+<defs>
+<filter id="filter0_i_0_81" x="0" y="-3" width="97" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_81"/>
+</filter>
+<linearGradient id="paint0_linear_0_81" x1="48.5" y1="0" x2="48.5" y2="22" gradientUnits="userSpaceOnUse">
+<stop offset="0.0852474" stop-color="#DA6813"/>
+<stop offset="0.379274" stop-color="#FFBB89"/>
+<stop offset="0.718536" stop-color="#E5690D"/>
+<stop offset="0.927747" stop-color="#AE3607"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,25 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="97" height="22" viewBox="0 0 97 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg">
+<g filter="url(#filter0_i_0_82)">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H93C95.2091 0 97 1.79086 97 4V22H0L13.6039 3.29463Z" fill="#FF5C00"/>
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H93C95.2091 0 97 1.79086 97 4V22H0L13.6039 3.29463Z" fill="black" fill-opacity="0.2"/>
+</g>
+<path d="M20.0742 0.5H93C94.933 0.5 96.5 2.067 96.5 4V21.5H0.981445L14.0078 3.58887C15.4191 1.64829 17.6747 0.5 20.0742 0.5Z" stroke="url(#paint0_linear_0_82)"/>
+</g>
+<defs>
+<filter id="filter0_i_0_82" x="0" y="-3" width="97" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_82"/>
+</filter>
+<linearGradient id="paint0_linear_0_82" x1="56" y1="0" x2="56" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.05"/>
+<stop offset="1" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,29 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="97" height="22" viewBox="0 0 97 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg">
+<g filter="url(#filter0_i_0_59)">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H93C95.2091 0 97 1.79086 97 4V22H0L13.6039 3.29463Z" fill="url(#paint0_linear_0_59)"/>
+</g>
+<path d="M20.0742 0.5H93C94.933 0.5 96.5 2.067 96.5 4V21.5H0.981445L14.0078 3.58887C15.4191 1.64829 17.6747 0.5 20.0742 0.5Z" stroke="url(#paint1_linear_0_59)"/>
+</g>
+<defs>
+<filter id="filter0_i_0_59" x="0" y="-3" width="97" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_59"/>
+</filter>
+<linearGradient id="paint0_linear_0_59" x1="2" y1="21.8948" x2="2" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C6C4C"/>
+<stop offset="0.85" stop-color="#7C6C4C"/>
+<stop offset="1" stop-color="#A6946F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_59" x1="56" y1="0" x2="56" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.05"/>
+<stop offset="1" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,14 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="97" height="22" viewBox="0 0 97 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="stroke0_0_60" fill="white">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H93C95.2091 0 97 1.79086 97 4V22H0L13.6039 3.29463Z"/>
+</mask>
+<path id="bg" d="M97 22V4C97 1.79086 95.2091 0 93 0H20.0738C17.5143 0 15.1093 1.22467 13.6039 3.29463L0 22H97Z" stroke-width="2" stroke="url(#paint0_linear_0_60)" mask="url(#stroke0_0_60)"/>
+<defs>
+<linearGradient id="paint0_linear_0_60" x1="48.5" y1="0" x2="48.5" y2="22" gradientUnits="userSpaceOnUse">
+<stop offset="0.0852474" stop-color="#DA6813"/>
+<stop offset="0.379274" stop-color="#FFBB89"/>
+<stop offset="0.718536" stop-color="#E5690D"/>
+<stop offset="0.927747" stop-color="#AE3607"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,24 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="97" height="22" viewBox="0 0 97 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg">
+<g filter="url(#filter0_i_0_83)">
+<path d="M13.6039 3.29463C15.1093 1.22467 17.5143 0 20.0738 0H93C95.2091 0 97 1.79086 97 4V22H0L13.6039 3.29463Z" fill="#C3B79E"/>
+</g>
+<path d="M20.0742 0.5H93C94.933 0.5 96.5 2.067 96.5 4V21.5H0.981445L14.0078 3.58887C15.4191 1.64829 17.6747 0.5 20.0742 0.5Z" stroke="url(#paint0_linear_0_83)"/>
+</g>
+<defs>
+<filter id="filter0_i_0_83" x="0" y="-3" width="97" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.219608 0 0 0 0 0.188235 0 0 0 0 0.121569 0 0 0 0.25 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_0_83"/>
+</filter>
+<linearGradient id="paint0_linear_0_83" x1="56" y1="0" x2="56" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.05"/>
+<stop offset="1" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319865">
+<g id="Union">
+<use xlink:href="#stroke0_0_10" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="0.373037" y="0.369787" width="17" height="18" fill="black">
+<rect fill="white" x="0.373037" y="0.369787" width="17" height="18"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M2 4.5C2 4.8109 2.09459 5.09972 2.25656 5.33923C1.9301 5.95091 1.68907 6.60669 1.54202 7.28832C1.30721 8.37679 1.3173 9.50407 1.57236 10.588C1.82743 11.6718 2.32093 12.6856 3.01645 13.5551C3.57402 14.252 4.25081 14.8424 5.01322 15.3C5.0045 15.3654 5 15.4322 5 15.5C5 16.3284 5.67157 17 6.5 17C7.32843 17 8 16.3284 8 15.5C8 14.6716 7.32843 14 6.5 14C6.10177 14 5.73978 14.1552 5.47121 14.4084C4.83335 14.0168 4.26638 13.5173 3.79687 12.9303C3.19412 12.1768 2.7667 11.2984 2.54563 10.3591C2.3246 9.41981 2.31585 8.44269 2.51928 7.49944C2.6365 6.95608 2.82255 6.43138 3.07174 5.93798C3.20745 5.97833 3.35119 6 3.5 6C4.32843 6 5 5.32843 5 4.5C5 4.24225 4.93499 3.99968 4.82047 3.7878C5.1619 3.51569 5.53092 3.27783 5.92231 3.07842C6.78221 2.64036 7.7293 2.39909 8.69398 2.37248C9.65852 2.3459 10.617 2.53388 11.4996 2.92377C12.0844 3.18213 12.6263 3.52477 13.1086 3.9392C13.0386 4.11262 13 4.30213 13 4.50065C13 5.32907 13.6716 6.00065 14.5 6.00065C15.3284 6.00065 16 5.32907 16 4.50065C16 3.67222 15.3284 3.00065 14.5 3.00065C14.2352 3.00065 13.9865 3.06923 13.7706 3.18961C13.2116 2.70755 12.583 2.30929 11.9041 2.00935C10.8856 1.5594 9.77952 1.34198 8.66651 1.37264C7.55342 1.40334 6.46075 1.68132 5.46856 2.18676C4.967 2.44227 4.4975 2.75275 4.06808 3.11131C3.89287 3.03956 3.70105 3 3.5 3C2.67157 3 2 3.67157 2 4.5Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_10" d="M2.25656 5.33923C2.09459 5.09972 2 4.8109 2 4.5C2 3.67157 2.67157 3 3.5 3C3.70105 3 3.89287 3.03956 4.06808 3.11131C4.4975 2.75275 4.967 2.44227 5.46856 2.18676C6.46075 1.68132 7.55342 1.40334 8.66651 1.37264C9.77952 1.34198 10.8856 1.5594 11.9041 2.00935C12.583 2.30929 13.2116 2.70755 13.7706 3.18961C13.9865 3.06923 14.2352 3.00065 14.5 3.00065C15.3284 3.00065 16 3.67222 16 4.50065C16 5.32907 15.3284 6.00065 14.5 6.00065C13.6716 6.00065 13 5.32907 13 4.50065C13 4.30213 13.0386 4.11262 13.1086 3.9392C12.6263 3.52477 12.0844 3.18213 11.4996 2.92377C10.617 2.53388 9.65852 2.3459 8.69398 2.37248C7.7293 2.39909 6.78221 2.64036 5.92231 3.07842C5.53092 3.27783 5.1619 3.51569 4.82047 3.7878C4.93499 3.99968 5 4.24225 5 4.5C5 5.32843 4.32843 6 3.5 6C3.35119 6 3.20745 5.97833 3.07174 5.93798C2.82255 6.43138 2.6365 6.95608 2.51928 7.49944C2.31585 8.44269 2.3246 9.41981 2.54563 10.3591C2.7667 11.2984 3.19412 12.1768 3.79687 12.9303C4.26638 13.5173 4.83335 14.0168 5.47121 14.4084C5.73978 14.1552 6.10177 14 6.5 14C7.32843 14 8 14.6716 8 15.5C8 16.3284 7.32843 17 6.5 17C5.67157 17 5 16.3284 5 15.5C5 15.4322 5.0045 15.3654 5.01322 15.3C4.25081 14.8424 3.57402 14.252 3.01645 13.5551C2.32093 12.6856 1.82743 11.6718 1.57236 10.588C1.3173 9.50407 1.30721 8.37679 1.54202 7.28832C1.68907 6.60669 1.9301 5.95091 2.25656 5.33923Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319865">
+<g id="Union">
+<use xlink:href="#stroke0_0_304" fill="#D4CBBD"/>
+<mask id="stroke1_0_304" maskUnits="userSpaceOnUse" x="0.373037" y="0.369787" width="17" height="18" fill="black">
+<rect fill="white" x="0.373037" y="0.369787" width="17" height="18"/>
+<use xlink:href="#stroke0_0_304"/>
+</mask>
+<path d="M2 4.5C2 4.8109 2.09459 5.09972 2.25656 5.33923C1.9301 5.95091 1.68907 6.60669 1.54202 7.28832C1.30721 8.37679 1.3173 9.50407 1.57236 10.588C1.82743 11.6718 2.32093 12.6856 3.01645 13.5551C3.57402 14.252 4.25081 14.8424 5.01322 15.3C5.0045 15.3654 5 15.4322 5 15.5C5 16.3284 5.67157 17 6.5 17C7.32843 17 8 16.3284 8 15.5C8 14.6716 7.32843 14 6.5 14C6.10177 14 5.73978 14.1552 5.47121 14.4084C4.83335 14.0168 4.26638 13.5173 3.79687 12.9303C3.19412 12.1768 2.7667 11.2984 2.54563 10.3591C2.3246 9.41981 2.31585 8.44269 2.51928 7.49944C2.6365 6.95608 2.82255 6.43138 3.07174 5.93798C3.20745 5.97833 3.35119 6 3.5 6C4.32843 6 5 5.32843 5 4.5C5 4.24225 4.93499 3.99968 4.82047 3.7878C5.1619 3.51569 5.53092 3.27783 5.92231 3.07842C6.78221 2.64036 7.7293 2.39909 8.69398 2.37248C9.65852 2.3459 10.617 2.53388 11.4996 2.92377C12.0844 3.18213 12.6263 3.52477 13.1086 3.9392C13.0386 4.11262 13 4.30213 13 4.50065C13 5.32907 13.6716 6.00065 14.5 6.00065C15.3284 6.00065 16 5.32907 16 4.50065C16 3.67222 15.3284 3.00065 14.5 3.00065C14.2352 3.00065 13.9865 3.06923 13.7706 3.18961C13.2116 2.70755 12.583 2.30929 11.9041 2.00935C10.8856 1.5594 9.77952 1.34198 8.66651 1.37264C7.55342 1.40334 6.46075 1.68132 5.46856 2.18676C4.967 2.44227 4.4975 2.75275 4.06808 3.11131C3.89287 3.03956 3.70105 3 3.5 3C2.67157 3 2 3.67157 2 4.5Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_304)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_304" d="M2.25656 5.33923C2.09459 5.09972 2 4.8109 2 4.5C2 3.67157 2.67157 3 3.5 3C3.70105 3 3.89287 3.03956 4.06808 3.11131C4.4975 2.75275 4.967 2.44227 5.46856 2.18676C6.46075 1.68132 7.55342 1.40334 8.66651 1.37264C9.77952 1.34198 10.8856 1.5594 11.9041 2.00935C12.583 2.30929 13.2116 2.70755 13.7706 3.18961C13.9865 3.06923 14.2352 3.00065 14.5 3.00065C15.3284 3.00065 16 3.67222 16 4.50065C16 5.32907 15.3284 6.00065 14.5 6.00065C13.6716 6.00065 13 5.32907 13 4.50065C13 4.30213 13.0386 4.11262 13.1086 3.9392C12.6263 3.52477 12.0844 3.18213 11.4996 2.92377C10.617 2.53388 9.65852 2.3459 8.69398 2.37248C7.7293 2.39909 6.78221 2.64036 5.92231 3.07842C5.53092 3.27783 5.1619 3.51569 4.82047 3.7878C4.93499 3.99968 5 4.24225 5 4.5C5 5.32843 4.32843 6 3.5 6C3.35119 6 3.20745 5.97833 3.07174 5.93798C2.82255 6.43138 2.6365 6.95608 2.51928 7.49944C2.31585 8.44269 2.3246 9.41981 2.54563 10.3591C2.7667 11.2984 3.19412 12.1768 3.79687 12.9303C4.26638 13.5173 4.83335 14.0168 5.47121 14.4084C5.73978 14.1552 6.10177 14 6.5 14C7.32843 14 8 14.6716 8 15.5C8 16.3284 7.32843 17 6.5 17C5.67157 17 5 16.3284 5 15.5C5 15.4322 5.0045 15.3654 5.01322 15.3C4.25081 14.8424 3.57402 14.252 3.01645 13.5551C2.32093 12.6856 1.82743 11.6718 1.57236 10.588C1.3173 9.50407 1.30721 8.37679 1.54202 7.28832C1.68907 6.60669 1.9301 5.95091 2.25656 5.33923Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319867">
+<g id="Union">
+<use xlink:href="#stroke0_0_10" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="0.5" y="2" width="17" height="14" fill="black">
+<rect fill="white" x="0.5" y="2" width="17" height="14"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M9.95101 4.11831C12.5065 4.54155 14.5482 6.06008 15.2435 8.01967C15.9561 8.13601 16.5 8.75449 16.5 9.5C16.5 10.2455 15.9561 10.864 15.2435 10.9803C14.4208 13.2989 11.7133 15 8.5 15C4.63401 15 1.5 12.5376 1.5 9.5C1.5 6.85332 3.8793 4.64328 7.04899 4.11831C7.21783 3.47475 7.80347 3 8.5 3C9.19653 3 9.78218 3.47475 9.95101 4.11831ZM9.86843 5.11524C12.0436 5.4914 13.6367 6.7438 14.2376 8.20795C13.7961 8.46903 13.5 8.94994 13.5 9.5C13.5 10.0501 13.7961 10.531 14.2376 10.7921C13.5168 12.5484 11.3683 14 8.5 14C4.9482 14 2.5 11.7741 2.5 9.5C2.5 7.53144 4.3346 5.59893 7.13157 5.11524C7.36645 5.63686 7.89082 6 8.5 6C9.10918 6 9.63355 5.63686 9.86843 5.11524ZM10 9H9V8H8V9H7V10H8V11H9V10H10V9Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_10" d="M15.2435 8.01967C14.5482 6.06008 12.5065 4.54155 9.95101 4.11831C9.78218 3.47475 9.19653 3 8.5 3C7.80347 3 7.21783 3.47475 7.04899 4.11831C3.8793 4.64328 1.5 6.85332 1.5 9.5C1.5 12.5376 4.63401 15 8.5 15C11.7133 15 14.4208 13.2989 15.2435 10.9803C15.9561 10.864 16.5 10.2455 16.5 9.5C16.5 8.75449 15.9561 8.13601 15.2435 8.01967ZM14.2376 8.20795C13.6367 6.7438 12.0436 5.4914 9.86843 5.11524C9.63355 5.63686 9.10918 6 8.5 6C7.89082 6 7.36645 5.63686 7.13157 5.11524C4.3346 5.59893 2.5 7.53144 2.5 9.5C2.5 11.7741 4.9482 14 8.5 14C11.3683 14 13.5168 12.5484 14.2376 10.7921C13.7961 10.531 13.5 10.0501 13.5 9.5C13.5 8.94994 13.7961 8.46903 14.2376 8.20795ZM9 9H10V10H9V11H8V10H7V9H8V8H9V9Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319867">
+<g id="Union">
+<use xlink:href="#stroke0_0_297" fill="#D4CBBD"/>
+<mask id="stroke1_0_297" maskUnits="userSpaceOnUse" x="0.5" y="2" width="17" height="14" fill="black">
+<rect fill="white" x="0.5" y="2" width="17" height="14"/>
+<use xlink:href="#stroke0_0_297"/>
+</mask>
+<path d="M9.95101 4.11831C12.5065 4.54155 14.5482 6.06008 15.2435 8.01967C15.9561 8.13601 16.5 8.75449 16.5 9.5C16.5 10.2455 15.9561 10.864 15.2435 10.9803C14.4208 13.2989 11.7133 15 8.5 15C4.63401 15 1.5 12.5376 1.5 9.5C1.5 6.85332 3.8793 4.64328 7.04899 4.11831C7.21783 3.47475 7.80347 3 8.5 3C9.19653 3 9.78218 3.47475 9.95101 4.11831ZM9.86843 5.11524C12.0436 5.4914 13.6367 6.7438 14.2376 8.20795C13.7961 8.46903 13.5 8.94994 13.5 9.5C13.5 10.0501 13.7961 10.531 14.2376 10.7921C13.5168 12.5484 11.3683 14 8.5 14C4.9482 14 2.5 11.7741 2.5 9.5C2.5 7.53144 4.3346 5.59893 7.13157 5.11524C7.36645 5.63686 7.89082 6 8.5 6C9.10918 6 9.63355 5.63686 9.86843 5.11524ZM10 9H9V8H8V9H7V10H8V11H9V10H10V9Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_297)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_297" d="M15.2435 8.01967C14.5482 6.06008 12.5065 4.54155 9.95101 4.11831C9.78218 3.47475 9.19653 3 8.5 3C7.80347 3 7.21783 3.47475 7.04899 4.11831C3.8793 4.64328 1.5 6.85332 1.5 9.5C1.5 12.5376 4.63401 15 8.5 15C11.7133 15 14.4208 13.2989 15.2435 10.9803C15.9561 10.864 16.5 10.2455 16.5 9.5C16.5 8.75449 15.9561 8.13601 15.2435 8.01967ZM14.2376 8.20795C13.6367 6.7438 12.0436 5.4914 9.86843 5.11524C9.63355 5.63686 9.10918 6 8.5 6C7.89082 6 7.36645 5.63686 7.13157 5.11524C4.3346 5.59893 2.5 7.53144 2.5 9.5C2.5 11.7741 4.9482 14 8.5 14C11.3683 14 13.5168 12.5484 14.2376 10.7921C13.7961 10.531 13.5 10.0501 13.5 9.5C13.5 8.94994 13.7961 8.46903 14.2376 8.20795ZM9 9H10V10H9V11H8V10H7V9H8V8H9V9Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,18 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319869" clip-path="url(#clip0_0_10)">
+<g id="Union">
+<use xlink:href="#stroke0_0_10" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="-2.31371" y="-2.31371" width="22.6274" height="22.6274" fill="black">
+<rect fill="white" x="-2.31371" y="-2.31371" width="22.6274" height="22.6274"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M13.5817 5.12543L10.3539 8.35325C10.6202 8.91081 10.5225 9.59884 10.0607 10.0607C9.47487 10.6464 8.52513 10.6464 7.93934 10.0607C7.35355 9.47487 7.35355 8.52513 7.93934 7.93934C8.40116 7.47752 9.08919 7.37979 9.64675 7.64614L12.8746 4.41833C10.5172 2.42026 6.98144 2.53327 4.75736 4.75736C2.41421 7.1005 2.41421 10.8995 4.75736 13.2426C7.1005 15.5858 10.8995 15.5858 13.2426 13.2426C15.4667 11.0186 15.5797 7.48282 13.5817 5.12543ZM4.05025 4.05025C1.31658 6.78392 1.31658 11.2161 4.05025 13.9497C6.78392 16.6834 11.2161 16.6834 13.9497 13.9497C16.6834 11.2161 16.6834 6.78392 13.9497 4.05025C11.2161 1.31658 6.78392 1.31658 4.05025 4.05025Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_0_10">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+<path id="stroke0_0_10" d="M13.5817 5.12543L10.3539 8.35325C10.6202 8.91081 10.5225 9.59884 10.0607 10.0607C9.47487 10.6464 8.52513 10.6464 7.93934 10.0607C7.35355 9.47487 7.35355 8.52513 7.93934 7.93934C8.40116 7.47752 9.08919 7.37979 9.64675 7.64614L12.8746 4.41833C10.5172 2.42026 6.98144 2.53327 4.75736 4.75736C2.41421 7.1005 2.41421 10.8995 4.75736 13.2426C7.1005 15.5858 10.8995 15.5858 13.2426 13.2426C15.4667 11.0186 15.5797 7.48282 13.5817 5.12543ZM4.05025 13.9497C1.31658 11.2161 1.31658 6.78392 4.05025 4.05025C6.78392 1.31658 11.2161 1.31658 13.9497 4.05025C16.6834 6.78392 16.6834 11.2161 13.9497 13.9497C11.2161 16.6834 6.78392 16.6834 4.05025 13.9497Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,18 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319869" clip-path="url(#clip0_0_332)">
+<g id="Union">
+<use xlink:href="#stroke0_0_332" fill="#D4CBBD"/>
+<mask id="stroke1_0_332" maskUnits="userSpaceOnUse" x="-2.31371" y="-2.31371" width="22.6274" height="22.6274" fill="black">
+<rect fill="white" x="-2.31371" y="-2.31371" width="22.6274" height="22.6274"/>
+<use xlink:href="#stroke0_0_332"/>
+</mask>
+<path d="M13.5817 5.12543L10.3539 8.35325C10.6202 8.91081 10.5225 9.59884 10.0607 10.0607C9.47487 10.6464 8.52513 10.6464 7.93934 10.0607C7.35355 9.47487 7.35355 8.52513 7.93934 7.93934C8.40116 7.47752 9.08919 7.37979 9.64675 7.64614L12.8746 4.41833C10.5172 2.42026 6.98144 2.53327 4.75736 4.75736C2.41421 7.1005 2.41421 10.8995 4.75736 13.2426C7.1005 15.5858 10.8995 15.5858 13.2426 13.2426C15.4667 11.0186 15.5797 7.48282 13.5817 5.12543ZM4.05025 4.05025C1.31658 6.78392 1.31658 11.2161 4.05025 13.9497C6.78392 16.6834 11.2161 16.6834 13.9497 13.9497C16.6834 11.2161 16.6834 6.78392 13.9497 4.05025C11.2161 1.31658 6.78392 1.31658 4.05025 4.05025Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_332)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_0_332">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+<path id="stroke0_0_332" d="M13.5817 5.12543L10.3539 8.35325C10.6202 8.91081 10.5225 9.59884 10.0607 10.0607C9.47487 10.6464 8.52513 10.6464 7.93934 10.0607C7.35355 9.47487 7.35355 8.52513 7.93934 7.93934C8.40116 7.47752 9.08919 7.37979 9.64675 7.64614L12.8746 4.41833C10.5172 2.42026 6.98144 2.53327 4.75736 4.75736C2.41421 7.1005 2.41421 10.8995 4.75736 13.2426C7.1005 15.5858 10.8995 15.5858 13.2426 13.2426C15.4667 11.0186 15.5797 7.48282 13.5817 5.12543ZM4.05025 13.9497C1.31658 11.2161 1.31658 6.78392 4.05025 4.05025C6.78392 1.31658 11.2161 1.31658 13.9497 4.05025C16.6834 6.78392 16.6834 11.2161 13.9497 13.9497C11.2161 16.6834 6.78392 16.6834 4.05025 13.9497Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319878">
+<g id="Union">
+<use xlink:href="#stroke0_0_10" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="2" y="2" width="14" height="14" fill="black">
+<rect fill="white" x="2" y="2" width="14" height="14"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M4 4L4 3H5V4H13V3H14V4H15V5H14L14 13H15V14H14V15H13V14H5V15H4L4 14H3V13H4L4 5H3V4H4ZM13 11.4904V13H11.4904L13 11.4904ZM13 10.0762L10.0762 13H7.41421L13 7.41422L13 10.0762ZM5 13H6L13 6.00001V5H11.4142L5 11.4142V13ZM5 10L9.99995 5H7.41419L5 7.41421L5 10ZM5.99998 5H5V5.99999L5.99998 5Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_10" d="M4 3L4 4H3V5H4L4 13H3V14H4L4 15H5V14H13V15H14V14H15V13H14L14 5H15V4H14V3H13V4H5V3H4ZM13 13V11.4904L11.4904 13H13ZM10.0762 13L13 10.0762L13 7.41422L7.41421 13H10.0762ZM6 13H5V11.4142L11.4142 5H13V6.00001L6 13ZM9.99995 5L5 10L5 7.41421L7.41419 5H9.99995ZM5.99998 5H5V5.99999L5.99998 5Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319878">
+<g id="Union">
+<use xlink:href="#stroke0_0_276" fill="#D9CFBB"/>
+<mask id="stroke1_0_276" maskUnits="userSpaceOnUse" x="2" y="2" width="14" height="14" fill="black">
+<rect fill="white" x="2" y="2" width="14" height="14"/>
+<use xlink:href="#stroke0_0_276"/>
+</mask>
+<path d="M4 4L4 3H5V4H13V3H14V4H15V5H14L14 13H15V14H14V15H13V14H5V15H4L4 14H3V13H4L4 5H3V4H4ZM13 11.4904V13H11.4904L13 11.4904ZM13 10.0762L10.0762 13H7.41421L13 7.41422L13 10.0762ZM5 13H6L13 6.00001V5H11.4142L5 11.4142V13ZM5 10L9.99995 5H7.41419L5 7.41421L5 10ZM5.99998 5H5V5.99999L5.99998 5Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_276)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_276" d="M4 3L4 4H3V5H4L4 13H3V14H4L4 15H5V14H13V15H14V14H15V13H14L14 5H15V4H14V3H13V4H5V3H4ZM13 13V11.4904L11.4904 13H13ZM10.0762 13L13 10.0762L13 7.41422L7.41421 13H10.0762ZM6 13H5V11.4142L11.4142 5H13V6.00001L6 13ZM9.99995 5L5 10L5 7.41421L7.41419 5H9.99995ZM5.99998 5H5V5.99999L5.99998 5Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319865">
+<g id="Union">
+<use xlink:href="#stroke0_0_10" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="0.585786" y="-0.849242" width="18.3848" height="18.3848" fill="black">
+<rect fill="white" x="0.585786" y="-0.849242" width="18.3848" height="18.3848"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M5.18198 15.0607C5.6438 14.5988 5.74153 13.9108 5.47518 13.3532L14.082 4.74644C14.6396 5.01279 15.3276 4.91506 15.7894 4.45324C16.3752 3.86745 16.3752 2.9177 15.7894 2.33192C15.2036 1.74613 14.2539 1.74613 13.6681 2.33192C13.2063 2.79374 13.1085 3.48177 13.3749 4.03933L4.76807 12.6461C4.21051 12.3798 3.52248 12.4775 3.06066 12.9393C2.47487 13.5251 2.47487 14.4749 3.06066 15.0607C3.64645 15.6464 4.59619 15.6464 5.18198 15.0607Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_10" d="M5.47518 13.3532C5.74153 13.9108 5.6438 14.5988 5.18198 15.0607C4.59619 15.6464 3.64645 15.6464 3.06066 15.0607C2.47487 14.4749 2.47487 13.5251 3.06066 12.9393C3.52248 12.4775 4.21051 12.3798 4.76807 12.6461L13.3749 4.03933C13.1085 3.48177 13.2063 2.79374 13.6681 2.33192C14.2539 1.74613 15.2036 1.74613 15.7894 2.33192C16.3752 2.9177 16.3752 3.86745 15.7894 4.45324C15.3276 4.91506 14.6396 5.01279 14.082 4.74644L5.47518 13.3532Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319865">
+<g id="Union">
+<use xlink:href="#stroke0_0_337" fill="#D4CBBD"/>
+<mask id="stroke1_0_337" maskUnits="userSpaceOnUse" x="0.585786" y="-0.849242" width="18.3848" height="18.3848" fill="black">
+<rect fill="white" x="0.585786" y="-0.849242" width="18.3848" height="18.3848"/>
+<use xlink:href="#stroke0_0_337"/>
+</mask>
+<path d="M5.18198 15.0607C5.6438 14.5988 5.74153 13.9108 5.47518 13.3532L14.082 4.74644C14.6396 5.01279 15.3276 4.91506 15.7894 4.45324C16.3752 3.86745 16.3752 2.9177 15.7894 2.33192C15.2036 1.74613 14.2539 1.74613 13.6681 2.33192C13.2063 2.79374 13.1085 3.48177 13.3749 4.03933L4.76807 12.6461C4.21051 12.3798 3.52248 12.4775 3.06066 12.9393C2.47487 13.5251 2.47487 14.4749 3.06066 15.0607C3.64645 15.6464 4.59619 15.6464 5.18198 15.0607Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_337)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_337" d="M5.47518 13.3532C5.74153 13.9108 5.6438 14.5988 5.18198 15.0607C4.59619 15.6464 3.64645 15.6464 3.06066 15.0607C2.47487 14.4749 2.47487 13.5251 3.06066 12.9393C3.52248 12.4775 4.21051 12.3798 4.76807 12.6461L13.3749 4.03933C13.1085 3.48177 13.2063 2.79374 13.6681 2.33192C14.2539 1.74613 15.2036 1.74613 15.7894 2.33192C16.3752 2.9177 16.3752 3.86745 15.7894 4.45324C15.3276 4.91506 14.6396 5.01279 14.082 4.74644L5.47518 13.3532Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 427319878">
+<path id="Rectangle 7565" d="M1.5 1.5H9.5V7.5H1.5V1.5Z" stroke="#FF5C00"/>
+<path id="Ellipse 438" d="M12.5 8C12.5 9.38071 11.3807 10.5 10 10.5C8.61929 10.5 7.5 9.38071 7.5 8C7.5 6.61929 8.61929 5.5 10 5.5C11.3807 5.5 12.5 6.61929 12.5 8Z" stroke="#FF5C00"/>
+<path id="Union" d="M5.66016 14.2334C6.0848 14.4093 6.54037 14.5 7 14.5H7.56537L7.08398 15.2227L7.91602 15.7773L8.91602 14.2773L9.10059 14L8.91602 13.7227L7.91602 12.2227L7.08398 12.7773L7.56537 13.5H7C6.67169 13.5 6.34628 13.4352 6.04297 13.3096C5.73978 13.1839 5.46449 12.9996 5.23242 12.7676C5.00036 12.5355 4.81606 12.2602 4.69043 11.957C4.56479 11.6537 4.5 11.3283 4.5 11H3.5C3.5 11.4596 3.59071 11.9152 3.7666 12.3398C3.94249 12.7643 4.2005 13.1497 4.52539 13.4746C4.85028 13.7995 5.23569 14.0575 5.66016 14.2334Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
+<path id="Union_2" d="M0 0H1H10H11V1V4.12602C12.7252 4.57006 14 6.13616 14 8C14 8.74455 13.7966 9.4416 13.4423 10.0386C13.6245 10.0131 13.8107 10 14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18C11.9331 18 10.2324 16.4324 10.0219 14.4213L8.19338 17.1641L5.69722 15.5L5.80495 15.3384C5.62607 15.2891 5.45005 15.2288 5.27792 15.1575C4.73196 14.9313 4.23588 14.5998 3.81802 14.182C3.40016 13.7641 3.06869 13.268 2.84254 12.7221C2.6164 12.1761 2.5 11.5909 2.5 11V10H5.5V11C5.5 11.197 5.5388 11.392 5.61418 11.574C5.68956 11.756 5.80005 11.9214 5.93934 12.0607C5.99624 12.1176 6.05749 12.1697 6.12245 12.2165L7.62208 11.2168C6.89569 10.6789 6.35788 9.90086 6.12602 9H1H0V8V1V0ZM8.85947 11.835L9.74808 13.1679L10.0219 13.5787C10.0833 12.9927 10.2711 12.4443 10.5577 11.9614C10.3755 11.9869 10.1893 12 10 12C9.60372 12 9.22091 11.9424 8.85947 11.835ZM10 5V4V2V1H9H2H1V2V7V8H2H6H7C7 9.65685 8.34315 11 10 11C11.6569 11 13 9.65685 13 8C13 6.34315 11.6569 5 10 5ZM8.26756 9C8.61337 9.5978 9.25972 10 10 10C11.1046 10 12 9.10457 12 8C12 7.25972 11.5978 6.61337 11 6.26756C10.7058 6.09739 10.3643 6 10 6V7V8H9H8C8 8.36429 8.09739 8.70583 8.26756 9ZM14 17C15.6569 17 17 15.6569 17 14C17 12.3431 15.6569 11 14 11C12.3431 11 11 12.3431 11 14C11 15.6569 12.3431 17 14 17ZM7.56574 13.5L7.08397 12.7774L7.91603 12.2227L9.10093 14L7.91603 15.7773L7.08397 15.2227L7.56574 14.5H7C6.79793 14.5 6.59672 14.4825 6.3986 14.4479C6.14608 14.4039 5.89856 14.3321 5.66061 14.2336C5.23597 14.0577 4.85013 13.7999 4.52513 13.4749C4.4845 13.4342 4.44492 13.3927 4.40643 13.3502C4.13695 13.0528 3.92033 12.711 3.76642 12.3394C3.72036 12.2282 3.68016 12.1149 3.6459 12C3.54933 11.6761 3.5 11.3393 3.5 11H4.5C4.5 11.3283 4.56466 11.6534 4.6903 11.9567C4.81594 12.26 5.00009 12.5356 5.23223 12.7678C5.46438 12.9999 5.73998 13.1841 6.04329 13.3097C6.12621 13.344 6.21076 13.3738 6.29655 13.399C6.52459 13.4659 6.76145 13.5 7 13.5H7.56574Z" fill-rule="evenodd" clip-rule="evenodd" fill="black" fill-opacity="0.3"/>
+<path id="Ellipse 440" d="M16.5 14C16.5 15.3807 15.3807 16.5 14 16.5C12.6193 16.5 11.5 15.3807 11.5 14C11.5 12.6193 12.6193 11.5 14 11.5C15.3807 11.5 16.5 12.6193 16.5 14Z" stroke="#FF5C00"/>
+</g>
+</svg>
@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 427319878">
+<path id="Rectangle 7565" d="M1.5 1.5H9.5V7.5H1.5V1.5Z" stroke="#D4CBBD"/>
+<path id="Ellipse 438" d="M12.5 8C12.5 9.38071 11.3807 10.5 10 10.5C8.61929 10.5 7.5 9.38071 7.5 8C7.5 6.61929 8.61929 5.5 10 5.5C11.3807 5.5 12.5 6.61929 12.5 8Z" stroke="#D4CBBD"/>
+<path id="Union" d="M5.66016 14.2334C6.0848 14.4093 6.54037 14.5 7 14.5H7.56537L7.08398 15.2227L7.91602 15.7773L8.91602 14.2773L9.10059 14L8.91602 13.7227L7.91602 12.2227L7.08398 12.7773L7.56537 13.5H7C6.67169 13.5 6.34628 13.4352 6.04297 13.3096C5.73978 13.1839 5.46449 12.9996 5.23242 12.7676C5.00036 12.5355 4.81606 12.2602 4.69043 11.957C4.56479 11.6537 4.5 11.3283 4.5 11H3.5C3.5 11.4596 3.59071 11.9152 3.7666 12.3398C3.94249 12.7643 4.2005 13.1497 4.52539 13.4746C4.85028 13.7995 5.23569 14.0575 5.66016 14.2334Z" fill-rule="evenodd" clip-rule="evenodd" fill="#D4CBBD"/>
+<path id="Union_2" d="M0 0H1H10H11V1V4.12602C12.7252 4.57006 14 6.13616 14 8C14 8.74455 13.7966 9.4416 13.4423 10.0386C13.6245 10.0131 13.8107 10 14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18C11.9331 18 10.2324 16.4324 10.0219 14.4213L8.19338 17.1641L5.69722 15.5L5.80495 15.3384C5.62607 15.2891 5.45005 15.2288 5.27792 15.1575C4.73196 14.9313 4.23588 14.5998 3.81802 14.182C3.40016 13.7641 3.06869 13.268 2.84254 12.7221C2.6164 12.1761 2.5 11.5909 2.5 11V10H5.5V11C5.5 11.197 5.5388 11.392 5.61418 11.574C5.68956 11.756 5.80005 11.9214 5.93934 12.0607C5.99624 12.1176 6.05749 12.1697 6.12245 12.2165L7.62208 11.2168C6.89569 10.6789 6.35788 9.90086 6.12602 9H1H0V8V1V0ZM8.85947 11.835L9.74808 13.1679L10.0219 13.5787C10.0833 12.9927 10.2711 12.4443 10.5577 11.9614C10.3755 11.9869 10.1893 12 10 12C9.60372 12 9.22091 11.9424 8.85947 11.835ZM10 5V4V2V1H9H2H1V2V7V8H2H6H7C7 9.65685 8.34315 11 10 11C11.6569 11 13 9.65685 13 8C13 6.34315 11.6569 5 10 5ZM8.26756 9C8.61337 9.5978 9.25972 10 10 10C11.1046 10 12 9.10457 12 8C12 7.25972 11.5978 6.61337 11 6.26756C10.7058 6.09739 10.3643 6 10 6V7V8H9H8C8 8.36429 8.09739 8.70583 8.26756 9ZM14 17C15.6569 17 17 15.6569 17 14C17 12.3431 15.6569 11 14 11C12.3431 11 11 12.3431 11 14C11 15.6569 12.3431 17 14 17ZM7.56574 13.5L7.08397 12.7774L7.91603 12.2227L9.10093 14L7.91603 15.7773L7.08397 15.2227L7.56574 14.5H7C6.79793 14.5 6.59672 14.4825 6.3986 14.4479C6.14608 14.4039 5.89856 14.3321 5.66061 14.2336C5.23597 14.0577 4.85013 13.7999 4.52513 13.4749C4.4845 13.4342 4.44492 13.3927 4.40643 13.3502C4.13695 13.0528 3.92033 12.711 3.76642 12.3394C3.72036 12.2282 3.68016 12.1149 3.6459 12C3.54933 11.6761 3.5 11.3393 3.5 11H4.5C4.5 11.3283 4.56466 11.6534 4.6903 11.9567C4.81594 12.26 5.00009 12.5356 5.23223 12.7678C5.46438 12.9999 5.73998 13.1841 6.04329 13.3097C6.12621 13.344 6.21076 13.3738 6.29655 13.399C6.52459 13.4659 6.76145 13.5 7 13.5H7.56574Z" fill-rule="evenodd" clip-rule="evenodd" fill="black" fill-opacity="0.3"/>
+<path id="Ellipse 440" d="M16.5 14C16.5 15.3807 15.3807 16.5 14 16.5C12.6193 16.5 11.5 15.3807 11.5 14C11.5 12.6193 12.6193 11.5 14 11.5C15.3807 11.5 16.5 12.6193 16.5 14Z" stroke="#D4CBBD"/>
+</g>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319865">
+<g id="Union">
+<use xlink:href="#stroke0_0_10" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="0.62132" y="1.5" width="17" height="15" fill="black">
+<rect fill="white" x="0.62132" y="1.5" width="17" height="15"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M12.182 5.06066C12.282 4.9606 12.365 4.84993 12.4309 4.73226C14.2147 5.33008 15.5 7.01494 15.5 9C15.5 10.9851 14.2147 12.6699 12.4309 13.2677C12.365 13.1501 12.282 13.0394 12.182 12.9393C11.5962 12.3536 10.6464 12.3536 10.0607 12.9393C9.89691 13.1031 9.77894 13.2953 9.70674 13.5H4.5359C4.4637 13.2953 4.34573 13.1031 4.18198 12.9393C3.59619 12.3536 2.64645 12.3536 2.06066 12.9393C1.47487 13.5251 1.47487 14.4749 2.06066 15.0607C2.64645 15.6464 3.59619 15.6464 4.18198 15.0607C4.34573 14.8969 4.4637 14.7047 4.5359 14.5H9.70674C9.77894 14.7047 9.89691 14.8969 10.0607 15.0607C10.6464 15.6464 11.5962 15.6464 12.182 15.0607C12.4074 14.8353 12.5461 14.556 12.598 14.2643C14.8562 13.5797 16.5 11.4818 16.5 9C16.5 6.5182 14.8562 4.42034 12.598 3.73574C12.5461 3.44403 12.4074 3.16474 12.182 2.93934C11.5962 2.35355 10.6464 2.35355 10.0607 2.93934C9.47487 3.52513 9.47487 4.47487 10.0607 5.06066C10.6464 5.64645 11.5962 5.64645 12.182 5.06066Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_10" d="M12.4309 4.73226C12.365 4.84993 12.282 4.9606 12.182 5.06066C11.5962 5.64645 10.6464 5.64645 10.0607 5.06066C9.47487 4.47487 9.47487 3.52513 10.0607 2.93934C10.6464 2.35355 11.5962 2.35355 12.182 2.93934C12.4074 3.16474 12.5461 3.44403 12.598 3.73574C14.8562 4.42034 16.5 6.5182 16.5 9C16.5 11.4818 14.8562 13.5797 12.598 14.2643C12.5461 14.556 12.4074 14.8353 12.182 15.0607C11.5962 15.6464 10.6464 15.6464 10.0607 15.0607C9.89691 14.8969 9.77894 14.7047 9.70674 14.5H4.5359C4.4637 14.7047 4.34573 14.8969 4.18198 15.0607C3.59619 15.6464 2.64645 15.6464 2.06066 15.0607C1.47487 14.4749 1.47487 13.5251 2.06066 12.9393C2.64645 12.3536 3.59619 12.3536 4.18198 12.9393C4.34573 13.1031 4.4637 13.2953 4.5359 13.5H9.70674C9.77894 13.2953 9.89691 13.1031 10.0607 12.9393C10.6464 12.3536 11.5962 12.3536 12.182 12.9393C12.282 13.0394 12.365 13.1501 12.4309 13.2677C14.2147 12.6699 15.5 10.9851 15.5 9C15.5 7.01494 14.2147 5.33008 12.4309 4.73226Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319865">
+<g id="Union">
+<use xlink:href="#stroke0_0_286" fill="#D4CBBD"/>
+<mask id="stroke1_0_286" maskUnits="userSpaceOnUse" x="0.62132" y="1.5" width="17" height="15" fill="black">
+<rect fill="white" x="0.62132" y="1.5" width="17" height="15"/>
+<use xlink:href="#stroke0_0_286"/>
+</mask>
+<path d="M12.182 5.06066C12.282 4.9606 12.365 4.84993 12.4309 4.73226C14.2147 5.33008 15.5 7.01494 15.5 9C15.5 10.9851 14.2147 12.6699 12.4309 13.2677C12.365 13.1501 12.282 13.0394 12.182 12.9393C11.5962 12.3536 10.6464 12.3536 10.0607 12.9393C9.89691 13.1031 9.77894 13.2953 9.70674 13.5H4.5359C4.4637 13.2953 4.34573 13.1031 4.18198 12.9393C3.59619 12.3536 2.64645 12.3536 2.06066 12.9393C1.47487 13.5251 1.47487 14.4749 2.06066 15.0607C2.64645 15.6464 3.59619 15.6464 4.18198 15.0607C4.34573 14.8969 4.4637 14.7047 4.5359 14.5H9.70674C9.77894 14.7047 9.89691 14.8969 10.0607 15.0607C10.6464 15.6464 11.5962 15.6464 12.182 15.0607C12.4074 14.8353 12.5461 14.556 12.598 14.2643C14.8562 13.5797 16.5 11.4818 16.5 9C16.5 6.5182 14.8562 4.42034 12.598 3.73574C12.5461 3.44403 12.4074 3.16474 12.182 2.93934C11.5962 2.35355 10.6464 2.35355 10.0607 2.93934C9.47487 3.52513 9.47487 4.47487 10.0607 5.06066C10.6464 5.64645 11.5962 5.64645 12.182 5.06066Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_286)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_286" d="M12.4309 4.73226C12.365 4.84993 12.282 4.9606 12.182 5.06066C11.5962 5.64645 10.6464 5.64645 10.0607 5.06066C9.47487 4.47487 9.47487 3.52513 10.0607 2.93934C10.6464 2.35355 11.5962 2.35355 12.182 2.93934C12.4074 3.16474 12.5461 3.44403 12.598 3.73574C14.8562 4.42034 16.5 6.5182 16.5 9C16.5 11.4818 14.8562 13.5797 12.598 14.2643C12.5461 14.556 12.4074 14.8353 12.182 15.0607C11.5962 15.6464 10.6464 15.6464 10.0607 15.0607C9.89691 14.8969 9.77894 14.7047 9.70674 14.5H4.5359C4.4637 14.7047 4.34573 14.8969 4.18198 15.0607C3.59619 15.6464 2.64645 15.6464 2.06066 15.0607C1.47487 14.4749 1.47487 13.5251 2.06066 12.9393C2.64645 12.3536 3.59619 12.3536 4.18198 12.9393C4.34573 13.1031 4.4637 13.2953 4.5359 13.5H9.70674C9.77894 13.2953 9.89691 13.1031 10.0607 12.9393C10.6464 12.3536 11.5962 12.3536 12.182 12.9393C12.282 13.0394 12.365 13.1501 12.4309 13.2677C14.2147 12.6699 15.5 10.9851 15.5 9C15.5 7.01494 14.2147 5.33008 12.4309 4.73226Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,8 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 427319876">
+<g id="Ellipse 437">
+<circle cx="9" cy="9" r="2" fill="#FF5C00"/>
+<circle cx="9" cy="9" r="2.5" stroke="black" stroke-opacity="0.3"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,8 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 427319876">
+<g id="Ellipse 437">
+<circle cx="9" cy="9" r="2" fill="#D4CBBD"/>
+<circle cx="9" cy="9" r="2.5" stroke="black" stroke-opacity="0.3"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 427319874">
+<path id="Polygon 353" d="M9 3L15.6574 7.83688L13.1145 15.6631H4.8855L2.3426 7.83688L9 3Z" stroke-width="3" stroke="black" stroke-opacity="0.3"/>
+<path id="Polygon 354" d="M9 3L15.6574 7.83688L13.1145 15.6631H4.8855L2.3426 7.83688L9 3Z" stroke="#FF5C00"/>
+</g>
+</svg>
@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 427319874">
+<path id="Polygon 353" d="M9 3L15.6574 7.83688L13.1145 15.6631H4.8855L2.3426 7.83688L9 3Z" stroke-width="3" stroke="black" stroke-opacity="0.3"/>
+<path id="Polygon 354" d="M9 3L15.6574 7.83688L13.1145 15.6631H4.8855L2.3426 7.83688L9 3Z" stroke="#D4CBBD"/>
+</g>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319871">
+<g id="Union">
+<use xlink:href="#stroke0_0_10" fill="#FF5C00"/>
+<mask id="stroke1_0_10" maskUnits="userSpaceOnUse" x="1" y="1" width="16" height="16" fill="black">
+<rect fill="white" x="1" y="1" width="16" height="16"/>
+<use xlink:href="#stroke0_0_10"/>
+</mask>
+<path d="M3 4.91465C2.4174 4.70873 2 4.15311 2 3.5C2 2.67157 2.67157 2 3.5 2C4.15311 2 4.70873 2.4174 4.91465 3H15V13.0854C15.5826 13.2913 16 13.8469 16 14.5C16 15.3284 15.3284 16 14.5 16C13.8469 16 13.2913 15.5826 13.0854 15H3V4.91465ZM14 13.0854V4H4.91465C4.764 4.42621 4.42621 4.764 4 4.91465V14H13.0854C13.236 13.5738 13.5738 13.236 14 13.0854Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_10)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_10" d="M2 3.5C2 4.15311 2.4174 4.70873 3 4.91465V15H13.0854C13.2913 15.5826 13.8469 16 14.5 16C15.3284 16 16 15.3284 16 14.5C16 13.8469 15.5826 13.2913 15 13.0854V3H4.91465C4.70873 2.4174 4.15311 2 3.5 2C2.67157 2 2 2.67157 2 3.5ZM14 13.0854V4H4.91465C4.764 4.42621 4.42621 4.764 4 4.91465V14H13.0854C13.236 13.5738 13.5738 13.236 14 13.0854Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Frame 427319871">
+<g id="Union">
+<use xlink:href="#stroke0_0_317" fill="#D4CBBD"/>
+<mask id="stroke1_0_317" maskUnits="userSpaceOnUse" x="1" y="1" width="16" height="16" fill="black">
+<rect fill="white" x="1" y="1" width="16" height="16"/>
+<use xlink:href="#stroke0_0_317"/>
+</mask>
+<path d="M3 4.91465C2.4174 4.70873 2 4.15311 2 3.5C2 2.67157 2.67157 2 3.5 2C4.15311 2 4.70873 2.4174 4.91465 3H15V13.0854C15.5826 13.2913 16 13.8469 16 14.5C16 15.3284 15.3284 16 14.5 16C13.8469 16 13.2913 15.5826 13.0854 15H3V4.91465ZM14 13.0854V4H4.91465C4.764 4.42621 4.42621 4.764 4 4.91465V14H13.0854C13.236 13.5738 13.5738 13.236 14 13.0854Z" stroke-width="2" stroke="black" stroke-opacity="0.3" mask="url(#stroke1_0_317)"/>
+</g>
+</g>
+<defs>
+<path id="stroke0_0_317" d="M2 3.5C2 4.15311 2.4174 4.70873 3 4.91465V15H13.0854C13.2913 15.5826 13.8469 16 14.5 16C15.3284 16 16 15.3284 16 14.5C16 13.8469 15.5826 13.2913 15 13.0854V3H4.91465C4.70873 2.4174 4.15311 2 3.5 2C2.67157 2 2 2.67157 2 3.5ZM14 13.0854V4H4.91465C4.764 4.42621 4.42621 4.764 4 4.91465V14H13.0854C13.236 13.5738 13.5738 13.236 14 13.0854Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</defs>
+</svg>
@@ -0,0 +1,60 @@
+import type { ReactElement } from "react"
+import line from "./assets/tool-line.svg"
+import lineOn from "./assets/tool-line-on.svg"
+import pline from "./assets/tool-pline.svg"
+import plineOn from "./assets/tool-pline-on.svg"
+import arc from "./assets/tool-arc.svg"
+import arcOn from "./assets/tool-arc-on.svg"
+import circle from "./assets/tool-circle.svg"
+import circleOn from "./assets/tool-circle-on.svg"
+import ellipse from "./assets/tool-ellipse.svg"
+import ellipseOn from "./assets/tool-ellipse-on.svg"
+import rect from "./assets/tool-rect.svg"
+import rectOn from "./assets/tool-rect-on.svg"
+import poly from "./assets/tool-poly.svg"
+import polyOn from "./assets/tool-poly-on.svg"
+import point from "./assets/tool-point.svg"
+import pointOn from "./assets/tool-point-on.svg"
+import hatch from "./assets/tool-hatch.svg"
+import hatchOn from "./assets/tool-hatch-on.svg"
+import ncopy from "./assets/tool-ncopy.svg"
+import ncopyOn from "./assets/tool-ncopy-on.svg"
+import objectSnap from "./assets/aux-object-snap.svg"
+import selectionEffect from "./assets/aux-selection.svg"
+import orthogonal from "./assets/aux-orthogonal.svg"
+import gridSnap from "./assets/aux-grid-snap.svg"
+import gridBackground from "./assets/aux-grid.svg"
+import lineWeight from "./assets/aux-lineweight.svg"
+
+const img = (src: string, width: number, height = width): ReactElement => <img src={src} width={width} height={height} alt="" draggable={false} />
+
+export type SWFooterToolIconName = "line" | "pline" | "arc" | "circle" | "ellipse" | "rect" | "poly" | "point" | "hatch" | "ncopy"
+
+/**
+ * Figma command icons (26:9529 … 26:9739): `icon` = Default (#D4CBBD), `activeIcon` = Variant2 / Variant3 (#FF5C00).
+ * 18 × 18. Spread into a `SWFooterTool`: `{ id: "line", label: "Line", ...swFooterToolIcons.line }`.
+ */
+export const swFooterToolIcons: Record<SWFooterToolIconName, { icon: ReactElement; activeIcon: ReactElement }> = {
+  line: { icon: img(line, 18), activeIcon: img(lineOn, 18) },
+  pline: { icon: img(pline, 18), activeIcon: img(plineOn, 18) },
+  arc: { icon: img(arc, 18), activeIcon: img(arcOn, 18) },
+  circle: { icon: img(circle, 18), activeIcon: img(circleOn, 18) },
+  ellipse: { icon: img(ellipse, 18), activeIcon: img(ellipseOn, 18) },
+  rect: { icon: img(rect, 18), activeIcon: img(rectOn, 18) },
+  poly: { icon: img(poly, 18), activeIcon: img(polyOn, 18) },
+  point: { icon: img(point, 18), activeIcon: img(pointOn, 18) },
+  hatch: { icon: img(hatch, 18), activeIcon: img(hatchOn, 18) },
+  ncopy: { icon: img(ncopy, 18), activeIcon: img(ncopyOn, 18) },
+}
+
+export type SWFooterAuxIconName = "objectSnap" | "selectionEffect" | "orthogonal" | "gridSnap" | "gridBackground" | "lineWeight"
+
+/** Figma auxiliary toggle icons (26:10104: 객체스냅, 선택효과, 직각교차, 격자스냅, 격자배경, 선가중치). */
+export const swFooterAuxIcons: Record<SWFooterAuxIconName, ReactElement> = {
+  objectSnap: img(objectSnap, 17),
+  selectionEffect: img(selectionEffect, 16),
+  orthogonal: img(orthogonal, 18),
+  gridSnap: img(gridSnap, 16),
+  gridBackground: img(gridBackground, 17),
+  lineWeight: img(lineWeight, 16, 15),
+}
@@ -0,0 +1,10 @@
+export { SWFooter, type SWFooterProps, type SWFooterSideAction } from "./SWFooter"
+export {
+  SWFooterSideButton, SWFooterAuxGroup, SWFooterAuxButton, SWFooterToolButton, SWFooterAddSlot, SWFooterGuide, SWFooterMenu,
+  type SWFooterSideButtonProps, type SWFooterAuxGroupProps, type SWFooterAuxButtonProps, type SWFooterToolButtonProps,
+  type SWFooterAddSlotProps, type SWFooterGuideProps, type SWFooterGuideContent, type SWFooterMenuProps, type SWFooterMenuItem,
+} from "./SWFooterParts"
+export { SWFooterLayoutTabs, SW_FOOTER_MODEL, type SWFooterLayoutTabsProps } from "./SWFooterLayoutTabs"
+export { SWFooterCommandLine, type SWFooterCommandLineProps } from "./SWFooterCommandLine"
+export { swFooterToolIcons, swFooterAuxIcons, type SWFooterToolIconName, type SWFooterAuxIconName } from "./icons"
+export type { SWFooterTool, SWFooterCategory, SWFooterAuxItem, SWFooterLayout } from "./types"
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react"
+
+/** One command button of the footer slots (Figma line / Pline / Arc … 68 × 47). */
+export interface SWFooterTool {
+  /** Unique within its category. Reported by `onToolSelect`. */
+  id: string
+  /** 14px label above the icon (e.g. `Line`, `Rect...`). Also the accessible name unless `ariaLabel` is set. */
+  label: string
+  /** 18 × 18 icon (Figma Default). Use `swFooterToolIcons` for the Figma draw tools, or any element. */
+  icon?: ReactNode
+  /** Icon shown on hover and while selected (Figma Variant2 / Variant3, orange). Default: `icon`. */
+  activeIcon?: ReactNode
+  /** Tooltip (native `title`). */
+  title?: string
+  /** Accessible name when the label is abbreviated (e.g. `Rectangle` for `Rect...`). */
+  ariaLabel?: string
+  /** 40% and not clickable. */
+  disabled?: boolean
+}
+
+/** One category of the bottom row (도형, 수정, 편집 …) and its commands. */
+export interface SWFooterCategory {
+  id: string
+  /** Tab text (14px). */
+  label: string
+  /** Commands of this category, in slot order. Slots after the last command are empty (+) slots. */
+  tools: SWFooterTool[]
+  disabled?: boolean
+}
+
+/** One auxiliary toggle of the 3 × 2 grid (객체스냅, 선택효과 … 104 × 33). */
+export interface SWFooterAuxItem {
+  id: string
+  label: string
+  /** Icon at the left (Figma 14–16px). Use `swFooterAuxIcons` or any element. */
+  icon?: ReactNode
+  /** On / off state (aria-pressed). Omit for a plain button. */
+  pressed?: boolean
+  title?: string
+  disabled?: boolean
+}
+
+/** One drawing space tab (Figma layout01 / layout02 / layout03). */
+export interface SWFooterLayout {
+  id: string
+  label: string
+  /** No × (remove) button and no rename. */
+  locked?: boolean
+  /** Tab shape. Default: `slant` (layout01) for the last tab, `rounded` (layout02 / 03) for the others. */
+  shape?: "rounded" | "slant"
+}
@@ -14,3 +14,6 @@ export * from "./components/sw-home-menu"

 // SW viewer mode (2026-10-19): viewer header, dropdown, popup panel and panel controls.
 export * from "./components/sw-viewer"
+
+// SW footer (2026-10-20): Figma 26:10097 bottom bar, command slots, category row, layout tabs and command line.
+export * from "./components/sw-footer"
@@ -0,0 +1,533 @@
+/* @hm-design/sw — SW Footer (Figma "레이아웃 분리" 26:10097 bottom bar, components 26:9459 … 26:10097, read
+   through the Figma Plugin API 2026-10-20). Footer-only tokens. Text keeps the SW typography of sw.css
+   (Noto Sans KR instead of Dotum, black OUTSIDE outline as 16 text-shadows, own-color 0.3 / 0.4px strokes removed
+   like the 2026-10-16 header fix). Never touches global selectors, SWHeader or SWPopup classes. */
+
+.hm-sw-header,
+.hm-sw-theme {
+  /* Bar (26:10098 background, 72px high, #060606) */
+  --hm-sw-footer-height: 72px;
+  --hm-sw-footer-background: #060606;
+  --hm-sw-footer-text: #f6f4f2;
+  --hm-sw-footer-muted: #d4cbbd;
+  --hm-sw-footer-accent: #ff5c00;
+  --hm-sw-footer-red: #e60403;
+  --hm-sw-footer-disabled-opacity: 0.4;
+
+  /* Side buttons 74 × 71 (26:10189 보조기능 / 26:10192 명령어 전체보기): side-bg.svg + 8px 60% black drop shadow
+     towards the bar content. */
+  --hm-sw-footer-side-width: 74px;
+  --hm-sw-footer-side-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  --hm-sw-footer-side-shadow-offset: 5px;
+
+  /* Auxiliary toggles 104 × 33 (26:10104, 3 × 2, gap 2px) */
+  --hm-sw-footer-aux-width: 104px;
+  --hm-sw-footer-aux-height: 33px;
+  --hm-sw-footer-aux-gap: 2px;
+  --hm-sw-footer-aux-background: linear-gradient(0deg, #262218 8%, #4a3c2b 34%, #594c31 55%, #312a1b 90%);
+  --hm-sw-footer-aux-border-color: #886d35;
+  --hm-sw-footer-aux-radius: 3px;
+  --hm-sw-footer-aux-font-size: 13px;
+  /* Not in Figma (Default only): the reference screen (2026-10-20) draws an ON toggle with an orange border and text. */
+  --hm-sw-footer-aux-pressed-border-color: #da6813;
+
+  /* Command group (26:10111 groop명령어): 68 × 47 slots over a 24px category row, 71px high */
+  --hm-sw-footer-slot-width: 68px;
+  --hm-sw-footer-slot-height: 47px;
+  --hm-sw-footer-group-background: linear-gradient(0deg, #2f281a 0%, #312a1b 5%, #332b1c 36%, #463c29 58%, #38301f 79%, #19160e 98%);
+  --hm-sw-footer-group-border-color: #886d35;
+  --hm-sw-footer-group-radius: 4px;
+  /* bg_vacant 26:10113: the darker surface after the last command (empty slots and the rest of the bar). */
+  --hm-sw-footer-vacant-background: linear-gradient(0deg, #18150e 28%, #262015 41%, #332b1c 58%, #38301f 81%, #18150e 100%);
+  --hm-sw-footer-divider: linear-gradient(0deg, #20190e 0.27%, #8a7a5b 45.15%, #f3dba8 70.08%, #423625 100%);
+  --hm-sw-footer-divider-shadow: -1px 0 1px #000;
+
+  /* Category row (menu_bg 26:10127): the active tab is a pocket opened into the slots above */
+  --hm-sw-footer-menu-height: 24px;
+  --hm-sw-footer-menu-top: #574b30;
+  --hm-sw-footer-menu-bottom: #282216;
+  --hm-sw-footer-menu-edge-top: #685a3b;
+  --hm-sw-footer-menu-pocket-edge: #675a3b;
+  --hm-sw-footer-menu-divider: #000;
+  --hm-sw-footer-menu-tab-min-width: 43px;
+
+  /* Empty-slot guide (26:9242 Variant2 / guide_바로가기 등록 26:9096): 208 × 149, 4px above the slot */
+  --hm-sw-footer-guide-width: 208px;
+  --hm-sw-footer-guide-height: 149px;
+  --hm-sw-footer-guide-background: #0e3c2e;
+  --hm-sw-footer-guide-border-color: #da6813;
+  --hm-sw-footer-guide-caption: #b6d0c9;
+
+  /* Layout tabs (26:9942 탭 상태변화, layout01 / layout02 / layout03 / model / btn_add_layout) */
+  --hm-sw-footer-tab-height: 22px;
+  --hm-sw-footer-tab-font-size: 12px;
+  --hm-sw-footer-tab-text: #161410;
+  --hm-sw-footer-tab-background: #c3b79e;
+  --hm-sw-footer-tab-hover-overlay: rgba(0, 0, 0, 0.2);
+  --hm-sw-footer-tab-on-background: linear-gradient(0deg, #7c6c4c 0.48%, #7c6c4c 85.07%, #a6946f 100%);
+  --hm-sw-footer-tab-editing-background: #0f0d0a;
+  --hm-sw-footer-tab-border-color: rgba(0, 0, 0, 0.05);
+  --hm-sw-footer-tab-hover-border-color: #da6813;
+  --hm-sw-footer-tab-inset-shadow: inset 0 -3px 4px rgba(56, 48, 31, 0.25);
+  /* 12px tab text: rgba(0, 0, 0, .7) 1.3px OUTSIDE stroke under the hover / on / editing text. */
+  --hm-sw-footer-tab-outline-color: rgba(0, 0, 0, 0.7);
+
+  /* Command line (26:10048 / 26:10056): 566px, 71px collapsed, 270px expanded */
+  --hm-sw-footer-command-width: 566px;
+  --hm-sw-footer-command-height: 71px;
+  --hm-sw-footer-command-expanded-height: 270px;
+  --hm-sw-footer-command-background: linear-gradient(180deg, #635537 0%, #262218 5%, #281f16 10%, #282216 100%);
+  --hm-sw-footer-command-expanded-background: #282216;
+  --hm-sw-footer-command-input-background: #16130d;
+  --hm-sw-footer-command-input-shadow: 0 -1px 2px rgba(255, 255, 255, 0.25), inset 0 1px 4px #000;
+  --hm-sw-footer-command-font-size: 12px;
+  --hm-sw-footer-command-line-height: 14px;
+  /* Not in Figma (reference screens 2026-10-20): the command line inside the bar keeps at least this width. */
+  --hm-sw-footer-command-min-width: 280px;
+  /* Not in Figma: below this bar width the auxiliary toggles show their icon only (reference screen 2026-10-20). */
+  --hm-sw-footer-aux-compact-width: 45px;
+}
+
+.hm-sw-footer-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* ---------- Bar ---------- */
+.hm-sw-footer {
+  container: hm-sw-footer / inline-size;
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  height: var(--hm-sw-footer-height);
+  background: var(--hm-sw-footer-background);
+  color: var(--hm-sw-footer-text);
+}
+/* Layout tabs sit on top of the bar, right aligned (26:10190 at 1823, 986 in the 1920 frame). */
+.hm-sw-footer__tabs { position: absolute; right: 0; bottom: 100%; z-index: 1; display: flex; }
+.hm-sw-footer__aux-area { flex: 0 0 auto; display: flex; gap: 2px; margin-right: 4px; }
+/* 26:10111 starts 1px below the bar top and ends at the bar bottom. */
+.hm-sw-footer__group {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  margin-top: 1px;
+  border: 1px solid var(--hm-sw-footer-group-border-color);
+  border-right: 0;
+  border-radius: var(--hm-sw-footer-group-radius) 0 0 0;
+  background: var(--hm-sw-footer-group-background);
+}
+.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; bottom: 0; background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
+.hm-sw-footer__scroll {
+  position: relative;
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: -1px 0 -1px -1px;
+}
+.hm-sw-footer__panel { position: relative; display: flex; flex-direction: column; width: max-content; }
+.hm-sw-footer__slots { display: flex; height: var(--hm-sw-footer-slot-height); }
+.hm-sw-footer__group > .hm-sw-footer-side { margin-top: -1px; }
+/* The rest of the bar is bg_vacant too (26:10113 runs to the frame edge and covers the bottom border). */
+.hm-sw-footer__trailing { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; margin-bottom: -1px; background: var(--hm-sw-footer-vacant-background); }
+/* Command line in the bar (reference screen 2026-10-20): free width between the auxiliary grid and the slots,
+   bottom aligned so an expanded line grows upwards. The slots keep their own width before 명령어 전체보기. */
+.hm-sw-footer__command { position: relative; z-index: 2; flex: 1 1 0; min-width: var(--hm-sw-footer-command-min-width); margin: 1px 4px 0 0; }
+.hm-sw-footer__command > .hm-sw-footer-command { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: none; }
+.hm-sw-footer[data-command] .hm-sw-footer__group { flex: 0 1 auto; }
+.hm-sw-footer[data-command] .hm-sw-footer__trailing { flex: 0 0 auto; }
+/* Status text above the bar, left (cursor coordinates in the reference screen). */
+.hm-sw-footer__status { position: absolute; left: 0; bottom: 100%; z-index: 1; padding: 0 0 3px 2px; font-size: 12px; line-height: 14px; color: var(--hm-sw-footer-text); white-space: nowrap; text-shadow: var(--hm-sw-header-label-outline); }
+/* Bar-level guide: 4px above the empty slot (which starts 2px below the bar top). */
+.hm-sw-footer > .hm-sw-footer__guide { bottom: calc(100% + 2px); }
+
+/* ---------- Side buttons (보조기능 / 명령어 전체보기) ---------- */
+.hm-sw-footer-side {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 var(--hm-sw-footer-side-width);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  width: var(--hm-sw-footer-side-width);
+  height: 71px;
+  padding-top: 18px;
+  background: url("../components/sw-footer/assets/side-bg.svg") 0 0 / 74px 71px no-repeat;
+  filter: drop-shadow(var(--hm-sw-footer-side-shadow-offset) 0 8px rgba(0, 0, 0, 0.6));
+  color: var(--hm-sw-footer-text);
+  font-size: 14px;
+  letter-spacing: 0.04em;
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
+}
+.hm-sw-footer-side[data-side="end"] { filter: drop-shadow(calc(-1 * var(--hm-sw-footer-side-shadow-offset)) 0 8px rgba(0, 0, 0, 0.6)); }
+.hm-sw-footer-side__title { text-shadow: var(--hm-sw-header-text-outline); }
+.hm-sw-footer-side__subtitle { text-shadow: var(--hm-sw-header-label-outline); }
+/* Not in Figma: hover / selected reuse the footer accent (#FF5C00) of the slot and category hover. */
+.hm-sw-footer-side:hover:not(:disabled) .hm-sw-footer-side__title,
+.hm-sw-footer-side[aria-pressed="true"] .hm-sw-footer-side__title,
+.hm-sw-footer-side[aria-expanded="true"] .hm-sw-footer-side__title { color: var(--hm-sw-footer-accent); }
+
+/* ---------- Auxiliary toggles (객체스냅 …) ---------- */
+.hm-sw-footer-aux {
+  display: grid;
+  grid-template-columns: repeat(var(--hm-sw-footer-aux-columns, 3), var(--hm-sw-footer-aux-width));
+  grid-auto-rows: var(--hm-sw-footer-aux-height);
+  align-content: center;
+  gap: var(--hm-sw-footer-aux-gap);
+}
+.hm-sw-footer-aux__button {
+  position: relative;
+  width: var(--hm-sw-footer-aux-width);
+  height: var(--hm-sw-footer-aux-height);
+  border: 1px solid var(--hm-sw-footer-aux-border-color);
+  border-radius: var(--hm-sw-footer-aux-radius);
+  background: var(--hm-sw-footer-aux-background);
+  color: var(--hm-sw-footer-text);
+  font-size: var(--hm-sw-footer-aux-font-size);
+  letter-spacing: 0.04em;
+}
+/* Icon box: Figma icons sit at 12px, 8–10px (14–16px boxes); a 17px box at 10, 7 inside the 1px border centers them. */
+.hm-sw-footer-aux__icon { position: absolute; left: 10px; top: 7px; display: grid; place-items: center; width: 17px; height: 17px; }
+.hm-sw-footer-aux__icon :is(img, svg) { display: block; flex: none; }
+.hm-sw-footer-aux__label {
+  position: absolute;
+  left: 35px;
+  right: 10px;
+  top: 7px;
+  overflow: hidden;
+  line-height: 17px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-shadow: var(--hm-sw-header-text-outline);
+}
+/* Not in Figma (only Default is drawn): hover = the footer accent text; pressed = accent text + orange border
+   (reference screen 2026-10-20). */
+.hm-sw-footer-aux__button:hover:not(:disabled) .hm-sw-footer-aux__label,
+.hm-sw-footer-aux__button[aria-pressed="true"] .hm-sw-footer-aux__label { color: var(--hm-sw-footer-accent); }
+.hm-sw-footer-aux__button[aria-pressed="true"] { border-color: var(--hm-sw-footer-aux-pressed-border-color); }
+
+/* ---------- Command slots (Line, PLine … / 빈 칸) ---------- */
+.hm-sw-footer-slot {
+  position: relative;
+  flex: 0 0 var(--hm-sw-footer-slot-width);
+  width: var(--hm-sw-footer-slot-width);
+  height: var(--hm-sw-footer-slot-height);
+}
+/* 1px divider between slots (Rectangle 7461 …: x = 68n, 5 → 42). */
+.hm-sw-footer-slot + .hm-sw-footer-slot::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 5px;
+  width: 1px;
+  height: 37px;
+  background: var(--hm-sw-footer-divider);
+  box-shadow: var(--hm-sw-footer-divider-shadow);
+  pointer-events: none;
+}
+.hm-sw-footer-tool {
+  position: absolute;
+  inset: 0;
+  color: var(--hm-sw-footer-text);
+  font-size: 14px;
+  letter-spacing: 0.04em;
+}
+.hm-sw-footer-tool__label {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: 6px;
+  overflow: hidden;
+  line-height: 16px;
+  text-align: center;
+  text-overflow: clip;
+  white-space: nowrap;
+  text-shadow: var(--hm-sw-header-text-outline);
+}
+.hm-sw-footer-tool__icon { position: absolute; left: 50%; top: 26px; display: grid; place-items: center; width: 18px; height: 18px; transform: translateX(-50%); }
+.hm-sw-footer-tool__icon :is(img, svg) { display: block; flex: none; }
+.hm-sw-footer-tool__icon--active { display: none; }
+/* Variant2 (hover) and Variant3 (selected) are the same in Figma: #FF5C00 text and the orange icon. */
+.hm-sw-footer-tool:is(:hover:not(:disabled), [aria-pressed="true"]) { color: var(--hm-sw-footer-accent); }
+.hm-sw-footer-tool[data-active-icon]:is(:hover:not(:disabled), [aria-pressed="true"]) .hm-sw-footer-tool__icon--default { display: none; }
+.hm-sw-footer-tool[data-active-icon]:is(:hover:not(:disabled), [aria-pressed="true"]) .hm-sw-footer-tool__icon--active { display: grid; }
+.hm-sw-footer-tool:disabled { opacity: var(--hm-sw-footer-disabled-opacity); }
+
+/* Last slot when the commands do not fit (reference screens 2026-10-20): ico_arrow 26:10023 ▲ opens the panel of
+   the other commands above the slots, ▼ while open. */
+.hm-sw-footer-more { position: absolute; inset: 0; }
+.hm-sw-footer-more__icon { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 2px; background: #000 url("../components/sw-footer/assets/arrow-up.svg") 1px 1px / 16px 16px no-repeat; }
+.hm-sw-footer-more:is(:hover, [data-active]) .hm-sw-footer-more__icon { background-image: url("../components/sw-footer/assets/arrow-up-hover.svg"); }
+.hm-sw-footer-more[aria-expanded="true"] .hm-sw-footer-more__icon { background-image: url("../components/sw-footer/assets/arrow-down.svg"); }
+.hm-sw-footer-more[aria-expanded="true"]:is(:hover, [data-active]) .hm-sw-footer-more__icon { background-image: url("../components/sw-footer/assets/arrow-down-hover.svg"); }
+.hm-sw-footer__more-panel {
+  position: absolute;
+  z-index: 4;
+  right: 0;
+  bottom: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  border: 1px solid var(--hm-sw-footer-group-border-color);
+  border-bottom: 0;
+  border-radius: var(--hm-sw-footer-group-radius) var(--hm-sw-footer-group-radius) 0 0;
+  background: var(--hm-sw-footer-group-background);
+}
+
+/* Empty slot (btn_add_menu 26:9971): 68 × 46 one pixel below the slot top; hover adds the orange dashed ring. */
+.hm-sw-footer-add {
+  position: absolute;
+  left: 0;
+  top: 1px;
+  width: var(--hm-sw-footer-slot-width);
+  height: 46px;
+  background: url("../components/sw-footer/assets/slot-add.svg") 0 0 / 68px 46px no-repeat;
+}
+.hm-sw-footer-add:is(:hover:not(:disabled), [aria-expanded="true"]) { background-image: url("../components/sw-footer/assets/slot-add-hover.svg"); }
+.hm-sw-footer-add:disabled { opacity: var(--hm-sw-footer-disabled-opacity); }
+/* Without onSlotAdd the + wells are drawn but inert (no ring, no guide). */
+.hm-sw-footer-add[data-inert] { pointer-events: none; }
+.hm-sw-footer-slot:has(.hm-sw-footer-add:hover:not(:disabled))::before { visibility: hidden; }
+
+/* Guide (가이드 영상 보기): centered over the slot, 4px above it. */
+.hm-sw-footer-guide {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  bottom: calc(100% + 3px);
+  width: var(--hm-sw-footer-guide-width);
+  height: var(--hm-sw-footer-guide-height);
+  overflow: hidden;
+  transform: translateX(-50%);
+  border: 1px solid var(--hm-sw-footer-guide-border-color);
+  border-radius: 2px;
+  background: var(--hm-sw-footer-guide-background);
+  pointer-events: none;
+}
+.hm-sw-footer-guide[data-standalone] { position: relative; left: auto; bottom: auto; transform: none; }
+.hm-sw-footer-guide__media { position: absolute; left: 5px; top: 5px; width: 194px; height: 111px; overflow: hidden; border: 1px solid #000; background: #000; }
+.hm-sw-footer-guide__media > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
+.hm-sw-footer-guide__title { position: absolute; left: 5px; top: 123px; font-size: 14px; letter-spacing: 0.04em; line-height: 16px; color: var(--hm-sw-footer-text); text-shadow: var(--hm-sw-header-text-outline); white-space: nowrap; }
+.hm-sw-footer-guide__caption { position: absolute; right: 6px; top: 124px; font-size: 12px; letter-spacing: 0.02em; line-height: 14px; color: var(--hm-sw-footer-guide-caption); text-shadow: var(--hm-sw-header-label-outline); white-space: nowrap; }
+
+/* Narrow bar (reference screen 2026-10-20): icon-only toggles, 45 × 33. The label stays as the accessible name. */
+@container hm-sw-footer (max-width: 1279px) {
+  .hm-sw-footer-aux { --hm-sw-footer-aux-width: var(--hm-sw-footer-aux-compact-width); }
+  .hm-sw-footer-aux__icon { left: 13px; }
+  .hm-sw-footer-aux__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+}
+
+/* ---------- Category row (도형 수정 편집 …) ---------- */
+.hm-sw-footer-menu { position: relative; display: flex; align-items: flex-start; height: var(--hm-sw-footer-menu-height); }
+/* Tabs that do not fit scroll inside the viewport with ◀ ▶ (reference screens 2026-10-20). */
+.hm-sw-footer-menu__viewport { position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: flex-start; height: 100%; padding-left: 7px; overflow: hidden; scrollbar-width: none; }
+.hm-sw-footer-menu__viewport::-webkit-scrollbar { display: none; }
+.hm-sw-footer-menu__step { position: relative; flex: 0 0 13px; display: grid; place-items: center; width: 13px; height: 16px; margin-top: 4px; color: var(--hm-sw-footer-text); }
+.hm-sw-footer-menu__step svg { display: block; filter: drop-shadow(0 0 1px #000); }
+.hm-sw-footer-menu__step:hover:not(:disabled) { color: var(--hm-sw-footer-accent); }
+.hm-sw-footer-menu__step:disabled { opacity: var(--hm-sw-footer-disabled-opacity); }
+.hm-sw-footer-menu__step + .hm-sw-footer-menu__step { margin-right: 4px; }
+.hm-sw-footer-menu__tabs { display: contents; }
+.hm-sw-footer-menu__surface { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
+.hm-sw-footer-menu__tab {
+  position: relative;
+  flex: 0 0 auto;
+  min-width: var(--hm-sw-footer-menu-tab-min-width);
+  height: 16px;
+  margin-top: 4px;
+  padding: 0 8px;
+  color: var(--hm-sw-footer-muted);
+  font-size: 14px;
+  /* Figma 1.4px (10%) on 레이어 … 구조/배근 (0.56px on the first four): with it the Noto widths meet the Figma
+     boxes (45 / 61 / 43 / 84px). */
+  letter-spacing: 0.1em;
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
+  text-shadow: var(--hm-sw-header-text-outline);
+}
+/* Variant2 (hover) and Variant3 (current) are #FF5C00 in Figma. */
+.hm-sw-footer-menu__tab:is(:hover:not(:disabled), [aria-selected="true"]) { color: var(--hm-sw-footer-accent); }
+/* 1px × 10px black divider (Rectangle 7480 …) between tabs; the current tab has its 7px pocket edges instead. */
+.hm-sw-footer-menu__divider { position: relative; flex: 0 0 1px; width: 1px; height: 10px; margin-top: 7px; background: var(--hm-sw-footer-menu-divider); }
+.hm-sw-footer-menu__tab[aria-selected="true"] { margin-right: 7px; }
+.hm-sw-footer-menu__tab[aria-selected="true"]:not(:first-of-type) { margin-left: 7px; }
+.hm-sw-footer-menu__add { position: relative; flex: 0 0 28px; width: 28px; height: 12px; margin-top: 6px; background: url("../components/sw-footer/assets/menu-add.svg") 0 0 / 28px 12px no-repeat; }
+/* Not in Figma: only Default of btn_add (26:9451) exists; hover keeps the asset (no invented look). */
+
+/* ---------- Layout tabs ---------- */
+.hm-sw-footer-tabs { display: flex; align-items: flex-end; gap: 1px; height: var(--hm-sw-footer-tab-height); font-size: var(--hm-sw-footer-tab-font-size); letter-spacing: 0.02em; }
+.hm-sw-footer-tabs__list { display: contents; }
+.hm-sw-footer-tabs__add { flex: 0 0 24px; width: 24px; height: 22px; background: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat; }
+.hm-sw-footer-tabs__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/tab-add-hover.svg"); }
+.hm-sw-footer-tab { position: relative; flex: 0 0 auto; display: flex; height: 22px; color: var(--hm-sw-footer-tab-text); }
+.hm-sw-footer-tab__select {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: 22px;
+  min-width: 69px;
+  padding: 0 4px 0 8px;
+  white-space: nowrap;
+  line-height: 14px;
+}
+.hm-sw-footer-tab__label { display: block; }
+.hm-sw-footer-tab__input {
+  width: 57px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+.hm-sw-footer-tab__remove { position: relative; z-index: 1; flex: 0 0 auto; height: 22px; opacity: 0; }
+.hm-sw-footer-tab__remove:focus-visible { opacity: 1; }
+
+/* Rounded tab (layout02 / layout03): 1px border, 4px top radius, -3px inset shadow. */
+/* The Figma border is an inside stroke drawn over the content (it does not widen the 85px tab): ::after. */
+.hm-sw-footer-tab[data-shape="rounded"] {
+  overflow: hidden;
+  border-radius: 4px 4px 0 0;
+  background: var(--hm-sw-footer-tab-background);
+}
+.hm-sw-footer-tab[data-shape="rounded"]::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  border: 1px solid var(--hm-sw-footer-tab-border-color);
+  border-radius: inherit;
+  box-shadow: var(--hm-sw-footer-tab-inset-shadow);
+  pointer-events: none;
+}
+.hm-sw-footer-tab[data-shape="rounded"] .hm-sw-footer-tab__label { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
+.hm-sw-footer-tab[data-shape="rounded"] .hm-sw-footer-tab__remove { width: 16px; background: url("../components/sw-footer/assets/tab-delete.svg") 0 0 / 16px 22px no-repeat; }
+.hm-sw-footer-tab[data-shape="rounded"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-delete-hover.svg"); }
+.hm-sw-footer-tab[data-shape="rounded"][data-state="on"] { background: var(--hm-sw-footer-tab-on-background); }
+.hm-sw-footer-tab[data-shape="rounded"][data-state="editing"] { background: var(--hm-sw-footer-tab-editing-background); }
+.hm-sw-footer-tab[data-shape="rounded"]:is(:hover, [data-state="editing"])::after { border-color: var(--hm-sw-footer-tab-hover-border-color); }
+.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: linear-gradient(var(--hm-sw-footer-tab-hover-overlay), var(--hm-sw-footer-tab-hover-overlay)), var(--hm-sw-footer-tab-background); }
+
+/* Slanted tab (layout01, next to Model): 97 × 22 mirrored bg asset + the 28px red close piece. */
+.hm-sw-footer-tab[data-shape="slant"] { width: 97px; }
+.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__label { width: 57px; overflow: hidden; text-overflow: ellipsis; }
+.hm-sw-footer-tab[data-shape="slant"]::before,
+.hm-sw-footer-tab[data-shape="slant"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: scaleX(-1);
+  background: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
+  pointer-events: none;
+}
+.hm-sw-footer-tab[data-shape="slant"]::after { z-index: 2; background-image: none; }
+.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove { width: 28px; background: url("../components/sw-footer/assets/tab-close.svg") 0 0 / 28px 22px no-repeat; }
+.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-close-hover.svg"); }
+.hm-sw-footer-tab[data-shape="slant"][data-state="on"]::before { background-image: url("../components/sw-footer/assets/tab-slant-on.svg"); }
+.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]::before { background-image: url("../components/sw-footer/assets/tab-slant-editing.svg"); }
+.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-hover.svg"); }
+.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
+/* layout01 Variant6 (editing + hover): the fill without its own ring and the orange ring on top. */
+.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-editing-fill.svg"); }
+.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
+.hm-sw-footer-tab[data-shape="slant"] + .hm-sw-footer-tab--model { margin-left: -9px; }
+
+/* Text per state (Figma layout01 / layout02 variants). */
+.hm-sw-footer-tab:is([data-state="on"], [data-state="editing"], :hover) .hm-sw-footer-tab__select {
+  text-shadow:
+    1.3px 0 0 var(--hm-sw-footer-tab-outline-color), 0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
+    0 1.3px 0 var(--hm-sw-footer-tab-outline-color), -0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
+    -1.3px 0 0 var(--hm-sw-footer-tab-outline-color), -0.92px -0.92px 0 var(--hm-sw-footer-tab-outline-color),
+    0 -1.3px 0 var(--hm-sw-footer-tab-outline-color), 0.92px -0.92px 0 var(--hm-sw-footer-tab-outline-color);
+}
+.hm-sw-footer-tab[data-state="on"] { color: var(--hm-sw-footer-text); }
+.hm-sw-footer-tab[data-state="editing"] { color: var(--hm-sw-footer-red); }
+.hm-sw-footer-tab[data-shape="rounded"]:not([data-state="editing"]):hover,
+.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover,
+.hm-sw-footer-tab--model:hover:not([data-state="on"]) { color: var(--hm-sw-footer-accent); }
+/* layout01 hover (not selected): orange tab, black text with the 70% outline. */
+.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover { color: #000; }
+.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover .hm-sw-footer-tab__select { text-shadow: none; }
+/* layout01 "on hover" draws the default beige surface under the orange text. */
+.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant.svg"); }
+/* The × appears on hover (all shapes) and in no other state (Figma opacity 0). */
+.hm-sw-footer-tab:hover .hm-sw-footer-tab__remove { opacity: 1; }
+.hm-sw-footer-tab .hm-sw-footer-tab__remove:disabled { opacity: 0; cursor: default; }
+
+/* Model (26:9914): 73 × 22 asset, label 22px from the left. */
+.hm-sw-footer-tab--model { width: 73px; background: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat; }
+.hm-sw-footer-tab--model[data-state="on"] { background-image: url("../components/sw-footer/assets/tab-model-on.svg"); }
+.hm-sw-footer-tab--model .hm-sw-footer-tab__select { min-width: 0; width: 100%; padding: 0 16px 0 22px; }
+
+/* ---------- Command line ---------- */
+.hm-sw-footer-command {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: var(--hm-sw-footer-command-width);
+  max-width: 100%;
+  height: var(--hm-sw-footer-command-height);
+  overflow: hidden;
+  border-radius: 4px 4px 0 0;
+  background: var(--hm-sw-footer-command-background) 0 0 / 100% var(--hm-sw-footer-command-height) no-repeat, var(--hm-sw-footer-command-expanded-background);
+  color: var(--hm-sw-footer-text);
+  font-size: var(--hm-sw-footer-command-font-size);
+  letter-spacing: 0.1em;
+  line-height: var(--hm-sw-footer-command-line-height);
+}
+.hm-sw-footer-command[data-expanded] { height: var(--hm-sw-footer-command-expanded-height); }
+.hm-sw-footer-command__history {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  padding: 4px 30px 2px 8px;
+  overflow-y: auto;
+  list-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: #574b30 transparent;
+  text-shadow: var(--hm-sw-header-label-outline);
+}
+.hm-sw-footer-command__history > li { white-space: pre; }
+.hm-sw-footer-command:not([data-expanded]) .hm-sw-footer-command__history { overflow: hidden; }
+.hm-sw-footer-command__history > li { overflow: hidden; text-overflow: ellipsis; }
+.hm-sw-footer-command__toggle { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 2px; background: #000 url("../components/sw-footer/assets/arrow-up.svg") 1px 1px / 16px 16px no-repeat; }
+.hm-sw-footer-command__toggle:hover { background-image: url("../components/sw-footer/assets/arrow-up-hover.svg"); }
+.hm-sw-footer-command__toggle[aria-expanded="true"] { background-image: url("../components/sw-footer/assets/arrow-down.svg"); }
+.hm-sw-footer-command__toggle[aria-expanded="true"]:hover { background-image: url("../components/sw-footer/assets/arrow-down-hover.svg"); }
+.hm-sw-footer-command__prompt {
+  flex: 0 0 23px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 23px;
+  margin: 0 4px;
+  padding: 0 6px;
+  background: var(--hm-sw-footer-command-input-background);
+  box-shadow: var(--hm-sw-footer-command-input-shadow);
+}
+.hm-sw-footer-command__label { flex: 0 0 auto; text-shadow: var(--hm-sw-header-label-outline); }
+.hm-sw-footer-command__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-shadow: var(--hm-sw-header-label-outline);
+  caret-color: var(--hm-sw-footer-text);
+}
+.hm-sw-footer-command__prompt:has(.hm-sw-footer-command__input:focus-visible) { outline: 1px solid var(--hm-sw-header-focus-color); outline-offset: -1px; }