/* 아이콘 — CSS mask 기반 자족 아이콘셋 (스토리보드 목업 원본) */
/* ── 아이콘 렌더(CSS mask) — 스크립트가 실행되지 않는 미리보기 환경에서도 ph-* 아이콘이 보이도록 ── */
[class^="ph-"],[class*=" ph-"]{display:inline-block;width:1em;height:1em;flex-shrink:0;background:currentColor;vertical-align:-.13em;-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l10 10-10 10L2 12z'/></svg>")}
[class^="ph-"]:has(svg),[class*=" ph-"]:has(svg){background:none;-webkit-mask:none;mask:none}
[class^="ph-"]>svg,[class*=" ph-"]>svg{width:1em;height:1em}
[class*="ph-circle"],[class*="ph-info"],[class*="ph-question"],[class*="ph-heart"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/></svg>")}
[class*="ph-house"],[class*="ph-home"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 2 11.5h3V22h5v-6h4v6h5V11.5h3z'/></svg>")}
[class*="ph-book"],[class*="ph-backpack"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h7v18H4zm9 0h7v18h-7z'/></svg>")}
[class*="ph-bookmark"],[class*="ph-flag"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h12v20l-6-4-6 4z'/></svg>")}
[class*="ph-cal"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 1h2v2h6V1h2v2h3v4H4V3h3zM4 9h16v12H4z'/></svg>")}
[class*="ph-chart"],[class*="ph-trend"],[class*="ph-pulse"],[class*="ph-percent"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 20h18v2H3zM5 11h3v8H5zm5-5h3v13h-3zm5 3h3v10h-3z'/></svg>")}
[class*="ph-dots"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.5 10.5h3v3h-3zm7 0h3v3h-3zm7 0h3v3h-3z'/></svg>")}
[class*="ph-list"],[class*="ph-align"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v2.6H3zm0 5.7h18v2.6H3zm0 5.7h18V19H3z'/></svg>")}
[class*="ph-file"],[class*="ph-note"],[class*="ph-article"],[class*="ph-clipboard"],[class*="ph-exam"],[class*="ph-receipt"],[class*="ph-folder"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h8v7h7v13H6zM15 2l6 6h-6z'/></svg>")}
[class*="ph-bell"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a6 6 0 0 0-6 6c0 5-2 7-2 7h16s-2-2-2-7a6 6 0 0 0-6-6zm-2.5 15a2.5 2.5 0 0 0 5 0z'/></svg>")}
[class*="ph-check"],[class*="ph-seal"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.5 18.5 3 12l2.2-2.2 4.3 4.3L18.8 5l2.2 2.2z'/></svg>")}
[class*="ph-x"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 6.6 6.6 5 12 10.4 17.4 5 19 6.6 13.6 12 19 17.4 17.4 19 12 13.6 6.6 19 5 17.4 10.4 12z'/></svg>")}
[class*="ph-caret"],[class*="ph-play"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 3l10 9-10 9z'/></svg>")}
[class*="ph-caret-left"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 3 6 12l10 9z'/></svg>")}
[class*="ph-caret-down"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8h18l-9 9z'/></svg>")}
[class*="ph-caret-up"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 16h18l-9-9z'/></svg>")}
[class*="ph-arrow"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 3l9 9-9 9v-5H2v-8h11z'/></svg>")}
[class*="ph-arrow-left"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3 2 12l9 9v-5h11V8H11z'/></svg>")}
[class*="ph-arrow-up"],[class*="ph-upload"],[class*="ph-export"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l9 9h-5v11H8V11H3z'/></svg>")}
[class*="ph-arrow-down"],[class*="ph-download"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22l9-9h-5V2H8v11H3z'/></svg>")}
[class*="ph-clockwise"],[class*="ph-repeat"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5V1L6 6l6 5V8a5 5 0 1 1-5 5H4a8 8 0 1 0 8-8z'/></svg>")}
[class*="ph-plus"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.5 3h3v7.5H21v3h-7.5V21h-3v-7.5H3v-3h7.5z'/></svg>")}
[class*="ph-minus"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10.5h18v3H3z'/></svg>")}
[class*="ph-magnif"],[class*="ph-search"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.5 3a7.5 7.5 0 1 0 4.4 13.6l4.6 4.6 2.1-2.1-4.6-4.6A7.5 7.5 0 0 0 10.5 3zm0 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z'/></svg>")}
[class*="ph-user"],[class*="ph-student"],[class*="ph-graduation"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zM3.5 21c.7-4.4 4.3-7 8.5-7s7.8 2.6 8.5 7z'/></svg>")}
[class*="ph-chat"],[class*="ph-message"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 4h18v13h-9l-6 4v-4H3z'/></svg>")}
[class*="ph-megaphone"],[class*="ph-broadcast"],[class*="ph-wifi"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9h4l10-5v16L7 15H3zm16-1a4 4 0 0 1 0 8z'/></svg>")}
/* ph-wifi-slash 는 반드시 위의 ph-wifi 규칙 «뒤에» 와야 한다 — 두 선택자의 우선순위가
   같아서 순서로만 갈린다. 앞에 두면 '연결 끊김'에 확성기 글리프가 그려진다.
   연결 실패 화면·오프라인 배너·출결 센서 오프라인 배너가 모두 이 아이콘을 쓴다. */
[class*="ph-wifi-slash"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 4.5c3.9 0 7.4 1.5 10 3.9L12 20 2 8.4C4.6 6 8.1 4.5 12 4.5zM2.9 1.5 1.4 3 21.1 22.7l1.5-1.5z'/></svg>")}
[class*="ph-clock"],[class*="ph-timer"],[class*="ph-alarm"],[class*="ph-hourglass"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2.6A7.4 7.4 0 1 1 4.6 12 7.4 7.4 0 0 1 12 4.6zM11 6.5h2v6l4.2 2.4-1 1.8L11 13.8z'/></svg>")}
[class*="ph-gear"],[class*="ph-slider"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM10.5 1h3v5h-3zm0 17h3v5h-3zM1 10.5h5v3H1zm17 0h5v3h-5z'/></svg>")}
[class*="ph-pen"],[class*="ph-eraser"],[class*="ph-highlighter"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17.2 14.4 5.8l4 4L6 21H3zM16 4.2 17.9 2.3l4 4L20 8.2z'/></svg>")}
[class*="ph-star"],[class*="ph-sparkle"],[class*="ph-magic"],[class*="ph-trophy"],[class*="ph-medal"],[class*="ph-crown"],[class*="ph-lightbulb"],[class*="ph-fire"],[class*="ph-target"],[class*="ph-brain"],[class*="ph-robot"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.4 7 .8-5.2 4.7 1.4 6.9L12 17.2 5.9 20.8l1.4-6.9L2.1 9.2l7-.8z'/></svg>")}
[class*="ph-eye"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5C6 5 2 12 2 12s4 7 10 7 10-7 10-7-4-7-10-7zm0 3.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z'/></svg>")}
[class*="ph-lock"],[class*="ph-key"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V8a5 5 0 0 1 10 0h-3a2 2 0 0 0-4 0v2h9v12H5V10z'/></svg>")}
[class*="ph-credit"],[class*="ph-money"],[class*="ph-wallet"],[class*="ph-coin"],[class*="ph-currency"],[class*="ph-bank"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5h20v4H2zm0 6h20v8H2z'/></svg>")}
[class*="ph-monitor"],[class*="ph-desktop"],[class*="ph-laptop"],[class*="ph-chalkboard"],[class*="ph-device"],[class*="ph-keyboard"],[class*="ph-projector"],[class*="ph-presentation"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 3h20v13H2zm7.5 15h5l.5 3h-6z'/></svg>")}
[class*="ph-square"],[class*="ph-grid"],[class*="ph-cube"],[class*="ph-buildings"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z'/></svg>")}
[class*="ph-warning"],[class*="ph-bug"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 23 21H1z'/></svg>")}
[class*="ph-trash"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 2h6l1 2h5v3H3V4h5zM5 9h14l-1 13H6z'/></svg>")}
[class*="ph-phone"],[class*="ph-envelope"],[class*="ph-sms"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2l4 5-2.6 2.6a14 14 0 0 0 7 7L17 14l5 4-3 4C10 22 2 14 2 5z'/></svg>")}
[class*="ph-camera"],[class*="ph-image"],[class*="ph-qr"],[class*="ph-scan"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3h6l1.5 2H22v14H2V5h5.5zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/></svg>")}

/* 폴백(다이아)으로 새던 아이콘 보강 — 목업 아이콘셋과 같은 mask 방식 */
[class*="ph-paper-plane"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21l20-9L2 3v7l13 2-13 2z'/></svg>")}
[class*="ph-paperclip"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.5 6.5v9a4.5 4.5 0 1 1-9 0V6a3 3 0 0 1 6 0v9a1.5 1.5 0 0 1-3 0V6.5H9V15a3 3 0 0 0 6 0V6a4.5 4.5 0 0 0-9 0v9.5a6 6 0 0 0 12 0v-9z'/></svg>")}
[class*="ph-translate"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4h9v2H8.6c-.4 2.4-1.4 4.4-2.8 6 .8.8 1.7 1.5 2.7 2l-.9 1.9c-1.2-.6-2.3-1.4-3.3-2.4-1 1-2.1 1.8-3.3 2.4L0 14c1-.5 1.9-1.2 2.7-2C1.7 10.8 1 9.5.6 8h2.1c.3 1 .8 1.9 1.5 2.7 1-1.2 1.7-2.8 2-4.7H2zm11.5 5h3l4.5 11h-2.2l-1-2.6h-5.6L11.2 20H9zm1.5 2.8-1.9 4.8h3.8z'/></svg>")}
[class*="ph-lightning"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4 14h6l-1 8 9-12h-6z'/></svg>")}
[class*="ph-shuffle"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 3l5 4-5 4V8.5h-2.3L5 19H2v-2h2l8.7-10.5H16zM2 5h3l3 3.6-1.4 1.6L4 7H2zm14 8 5 4-5 4v-2.5h-2.6l-3-3.6 1.4-1.6 2.4 2.7H16z'/></svg>")}
[class*="ph-ticket"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 6h20v4a2 2 0 0 0 0 4v4H2v-4a2 2 0 0 0 0-4zm7 2v8h2V8z'/></svg>")}
[class*="ph-identification"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4h20v16H2zm7 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm-4 9c.5-2 2.1-3 4-3s3.5 1 4 3zm10-8h5v2h-5zm0 4h5v2h-5z'/></svg>")}
[class*="ph-hand"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 11V4.5a1.5 1.5 0 0 1 3 0V10h1V3.5a1.5 1.5 0 0 1 3 0V10h1V5.5a1.5 1.5 0 0 1 3 0V15a7 7 0 0 1-7 7c-3 0-4.6-1.6-6.3-4.2L2 13.6l1.3-1.2c.7-.6 1.7-.5 2.3.2z'/></svg>")}
[class*="ph-cursor"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3l13 7-5.5 1.6L11 21z'/></svg>")}
[class*="ph-selection"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h6v2H5v4H3zm12 0h6v6h-2V5h-4zM3 15h2v4h4v2H3zm16 0h2v6h-6v-2h4zM11 8h2v3h3v2h-3v3h-2v-3H8v-2h3z'/></svg>")}
[class*="ph-cloud-slash"],[class*="ph-link-break"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.3 2 22 20.7 20.6 22 16 17.4V19H7a5 5 0 0 1-.9-9.9L1.9 3.4zM7 8c.3-2.8 2.7-5 5.6-5 2.6 0 4.8 1.8 5.4 4.2A4.5 4.5 0 0 1 20 15.6L9.4 5A5.6 5.6 0 0 0 7 8z'/></svg>")}
[class*="ph-apple-logo"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.4 12.6c0-2.4 2-3.6 2.1-3.6-1.1-1.7-2.9-1.9-3.6-1.9-1.5-.2-3 .9-3.8.9s-2-.9-3.3-.9C6.1 7.1 4.5 8 3.6 9.6c-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8 2.2-1.2 3.1-2.4c1-1.4 1.4-2.7 1.4-2.8-.1 0-2.8-1.1-2.8-4.5zM14 5.4c.7-.9 1.2-2.1 1.1-3.4-1 0-2.3.7-3 1.6-.7.8-1.3 2-1.1 3.2 1.1.1 2.3-.6 3-1.4z'/></svg>")}
[class*="ph-tray"]{--g:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h18v18H3zm2 2v9h4l1 2h4l1-2h4V5z'/></svg>")}