/* COPIED from ~/Desktop/Design System/components/object.css on 2026-10-20 by selfprint/tools/build_zds.py.
   Do not edit here — change the Design System, then re-run the script. */
/* =============================================================================
   Zigu — Object icon  (components/object.css)
   Multicolor icons from Figma page "Icon object" (5:1637): work types and file types.
   Requires tokens.css + components/object-glyphs.css (GENERATED by tools/build-objects.py).
   Spec: components/object.md

   <i class="zg-object zg-object--work-chat zg-object--lg" role="img" aria-label="채팅 WORK"></i>
   <i class="zg-object zg-object--file-pdf" aria-hidden="true"></i>

   Unlike zg-icon (one color, a CSS mask), these keep their own colors and can't be tinted.
   The artboard scales as a whole, like icons.
   ========================================================================== */
.zg-object {
  --zg-object-size: var(--icon-md);                 /* 20 */
  display: inline-block;
  flex: none;
  width: var(--zg-object-size);
  height: var(--zg-object-size);
  background: var(--zg-object-svg) center / 100% 100% no-repeat;
  vertical-align: middle;
  font-style: normal;
}
.zg-object--xs { --zg-object-size: var(--icon-xs); } /* 12 */
.zg-object--sm { --zg-object-size: var(--icon-sm); } /* 16 */
.zg-object--md { --zg-object-size: var(--icon-md); } /* 20 */
.zg-object--lg { --zg-object-size: var(--icon-lg); } /* 24 — work icons in lists */
.zg-object--xl { --zg-object-size: var(--icon-xl); } /* 32 */
/* grayscale drawing (Figma grayscale=true); objects without one keep their color */
.zg-object--gray { background-image: var(--zg-object-svg-gray, var(--zg-object-svg)); }

/* ---- a file's name beside its file-type icon (product rule, user v0.5.64) ----
   When the name is longer than the space, only the stem shortens with "…"; the extension always shows.
   <span class="zg-file-row">
     <i class="zg-object zg-object--file-html" aria-hidden="true"></i>
     <span class="zg-file-name" title="AI 요약 리포트 — 3분기 고객 인터뷰.html">
       <span class="zg-file-name__stem">AI 요약 리포트 — 3분기 고객 인터뷰</span><span class="zg-file-name__ext">.html</span>
     </span>
   </span> */
.zg-file-row { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.zg-file-name { display: inline-flex; min-width: 0; max-width: 100%; white-space: nowrap; }
.zg-file-name__stem { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zg-file-name__ext { flex: none; }