/* Icon system -- same mask-based approach as admin's icons.css (one monochrome SVG per icon, tinted via background-color + CSS mask so it follows `color: currentColor`, no separate color-variant assets needed). Every SVG below now exists under design-handoffs/asportal-public/ icons/ (copied into images/base/icons/, renamed from the export's underscore convention -- e.g. ic_my_16_dark.svg -- to this app's own hyphenated kebab-case, same as admin's set uses). The export includes a "_dark"/"_bl" pair for every nav-category icon (and some others) -- confirmed by diffing them with color attributes stripped that the two are pixel-identical shapes, only the source stroke color differs (_dark = #585E6A, _bl = #101011, i.e. "black," not "blue" as an earlier pass here mistakenly guessed). Since CSS mask only reads alpha and tinting comes entirely from `color`/ `currentColor`, only ONE file per icon is needed -- the same Normal (#585E6A/--color-text-muted) vs Selected (#101011/ --color-text-primary) distinction admin's own `.nav-item-link`/ `.nav-item-link.active` already achieves purely via CSS `color`, no image-swapping. `_dark` is used as the canonical source throughout; the `_bl` duplicates were not copied in. Screen-specific assets NOT wired up here on purpose (SDK engine badges ic_android_56/ic_ios_56/ic_gs_40, and landing-page/feature icons -- ic_engineering_32, ic_environment_32, ic_shield_*, ic_sourcecode_32, ic_doc_24, ic_setting_24, ic_rok_emblem_40, ic_thunder_40_gra, ic_check_20_{blue,green,purple}) -- these belong to specific future screens (SDK download, home/landing), not the shared base library; per the "components first, screens after" build order, add them when those screens are actually built, not speculatively now. */ .icon { display: inline-block; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .icon-sm { width: 10px; height: 10px; } /* -- Portal-only, no admin equivalent -- */ .icon-menu { -webkit-mask-image: url('../../images/base/icons/ic-menu-left-16-wh.svg'); mask-image: url('../../images/base/icons/ic-menu-left-16-wh.svg'); } .icon-menu-right { -webkit-mask-image: url('../../images/base/icons/ic-menu-right-16-wh.svg'); mask-image: url('../../images/base/icons/ic-menu-right-16-wh.svg'); } .icon-my { -webkit-mask-image: url('../../images/base/icons/ic-my-16-dark.svg'); mask-image: url('../../images/base/icons/ic-my-16-dark.svg'); } .icon-logout { -webkit-mask-image: url('../../images/base/icons/ic-logout-16-dark.svg'); mask-image: url('../../images/base/icons/ic-logout-16-dark.svg'); } .icon-download { -webkit-mask-image: url('../../images/base/icons/ic-download-16-dark.svg'); mask-image: url('../../images/base/icons/ic-download-16-dark.svg'); } .icon-arrow-bottom { -webkit-mask-image: url('../../images/base/icons/ic-arrow-bottom-16-md.svg'); mask-image: url('../../images/base/icons/ic-arrow-bottom-16-md.svg'); } .icon-dot { -webkit-mask-image: url('../../images/base/icons/ic-dot-16-dark.svg'); mask-image: url('../../images/base/icons/ic-dot-16-dark.svg'); } /* -- Shared with admin's existing icon set (same filenames, confirmed identical) -- */ .icon-down { width: 12px; height: 12px; -webkit-mask-image: url('../../images/base/icons/ic-down-stroke-12-md.svg'); mask-image: url('../../images/base/icons/ic-down-stroke-12-md.svg'); } .icon-up { width: 12px; height: 12px; -webkit-mask-image: url('../../images/base/icons/ic-up-stroke-12-md.svg'); mask-image: url('../../images/base/icons/ic-up-stroke-12-md.svg'); } .icon-search { -webkit-mask-image: url('../../images/base/icons/ic-search-16-dark.svg'); mask-image: url('../../images/base/icons/ic-search-16-dark.svg'); } .icon-close { -webkit-mask-image: url('../../images/base/icons/ic-close-16-dark.svg'); mask-image: url('../../images/base/icons/ic-close-16-dark.svg'); } .icon-close-round { -webkit-mask-image: url('../../images/base/icons/ic-close-round-16-md.svg'); mask-image: url('../../images/base/icons/ic-close-round-16-md.svg'); } .icon-calendar { -webkit-mask-image: url('../../images/base/icons/ic-calendar-16-darker.svg'); mask-image: url('../../images/base/icons/ic-calendar-16-darker.svg'); } .icon-edit { -webkit-mask-image: url('../../images/base/icons/ic-edit-16-dark.svg'); mask-image: url('../../images/base/icons/ic-edit-16-dark.svg'); } .icon-trash { -webkit-mask-image: url('../../images/base/icons/ic-trash-16-dark.svg'); mask-image: url('../../images/base/icons/ic-trash-16-dark.svg'); } .icon-plus { -webkit-mask-image: url('../../images/base/icons/ic-plus-16-dark.svg'); mask-image: url('../../images/base/icons/ic-plus-16-dark.svg'); } .icon-minus { -webkit-mask-image: url('../../images/base/icons/ic-minus-16-dark.svg'); mask-image: url('../../images/base/icons/ic-minus-16-dark.svg'); } .icon-back { -webkit-mask-image: url('../../images/base/icons/ic-back-16-dark.svg'); mask-image: url('../../images/base/icons/ic-back-16-dark.svg'); } .icon-more { -webkit-mask-image: url('../../images/base/icons/ic-more-16-dark.svg'); mask-image: url('../../images/base/icons/ic-more-16-dark.svg'); } .icon-table-up { width: 12px; height: 12px; -webkit-mask-image: url('../../images/base/icons/ic-table-up-12-md.svg'); mask-image: url('../../images/base/icons/ic-table-up-12-md.svg'); } .icon-table-down { width: 12px; height: 12px; -webkit-mask-image: url('../../images/base/icons/ic-table-down-12-md.svg'); mask-image: url('../../images/base/icons/ic-table-down-12-md.svg'); } /* Solid filled arrowhead, distinct in shape from the outlined ic-down/ ic-up chevrons above (confirmed by inspecting the path data -- a filled triangle path, not a 2-stroke chevron) -- available for wherever a real screen needs this style specifically, not yet used by any base component (nav/select chevrons deliberately keep the outlined ic-down, matching admin's own choice). */ .icon-down-solid { width: 12px; height: 12px; -webkit-mask-image: url('../../images/base/icons/ic-down-12-md.svg'); mask-image: url('../../images/base/icons/ic-down-12-md.svg'); } .icon-up-solid { width: 12px; height: 12px; -webkit-mask-image: url('../../images/base/icons/ic-up-12-md.svg'); mask-image: url('../../images/base/icons/ic-up-12-md.svg'); } /* -- Nav-category icons, per Portal_Navigation.png's own generic example menu -- note several of these (대시보드/통계/사용자 관리/이용안내/고객지원) are master-spec §13 v2.x-deferred screens, not V1 scope; wired up since the assets exist, actual usage depends on which nav items a real base.html ends up needing. */ .icon-navi-dashboard { -webkit-mask-image: url('../../images/base/icons/ic-navi-dashboard-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-dashboard-16-dark.svg'); } .icon-navi-statistics { -webkit-mask-image: url('../../images/base/icons/ic-navi-statistics-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-statistics-16-dark.svg'); } .icon-navi-package { -webkit-mask-image: url('../../images/base/icons/ic-navi-package-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-package-16-dark.svg'); } .icon-navi-download { -webkit-mask-image: url('../../images/base/icons/ic-navi-download-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-download-16-dark.svg'); } .icon-navi-customer { -webkit-mask-image: url('../../images/base/icons/ic-navi-customer-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-customer-16-dark.svg'); } .icon-navi-info { -webkit-mask-image: url('../../images/base/icons/ic-navi-info-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-info-16-dark.svg'); } .icon-navi-support { -webkit-mask-image: url('../../images/base/icons/ic-navi-support-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-support-16-dark.svg'); } .icon-navi-contract { -webkit-mask-image: url('../../images/base/icons/ic-navi-contract-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-contract-16-dark.svg'); } .icon-navi-deploy { -webkit-mask-image: url('../../images/base/icons/ic-navi-deploy-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-deploy-16-dark.svg'); } .icon-navi-manager { -webkit-mask-image: url('../../images/base/icons/ic-navi-manager-16-dark.svg'); mask-image: url('../../images/base/icons/ic-navi-manager-16-dark.svg'); } /* Check/Radio's own checked/disabled states are pure CSS (forms.css ::after), not icon assets -- ic-check-s.svg/ic-check-disabled.svg/ ic-check-s-disabled.svg/ic-radio-s.svg/ic-radio-disabled.svg/ ic-radio-s-disabled.svg (also under images/base/icons/) are reference-only, confirming forms.css's colors match (#ED772F fill, #F2F3F5/#DDDFE2 disabled, white check/dot) -- same role as admin's own check-radio-extra-states/ folder, not url()'d anywhere. ic-menu-right-16-bl.svg was provided too but its purpose is unclear (three horizontal lines, similar to the hamburger but not a simple mirror of it) -- not wired up until a real screen clarifies what it's for; ic-menu-right-16-wh.svg (.icon-menu-right above) is wired since it's the more likely candidate (matches .icon-menu's own "-wh" convention). Confirmed 2026-07-24: it's the pre-login (unauthenticated) top bar's own hamburger, `Portal 로그인`'s real export -- deliberately a distinct icon from .icon-menu/ic-menu-left-16-wh.svg (the authenticated drawer's own hamburger), not a naming accident. */ .icon-close-wh { -webkit-mask-image: url('../../images/base/icons/ic-close-16-wh.svg'); mask-image: url('../../images/base/icons/ic-close-16-wh.svg'); }