/* Phosphor Regular follows the paired label: <=16px ->16px,
   >16px through 20px ->20px, larger labels ->24px maximum.
   Keep em unresolved in this inherited token so each icon uses its own label. */
:root { --icon-size: clamp(16px, round(up, 1em, 4px), 24px); }

.ui-icon,
img[src^="/assets/icons/"]:not(.solution-phone-icon),
.figma-layout #new .prompt-send img,
.footer .footer-social-icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  object-fit: contain;
  font-size: inherit;
}
.ui-icon { fill: currentColor; stroke: none; }
.site-header .site-cases-toggle .ui-icon,
.site-header .site-menu-toggle .ui-icon,
.c-note-icon .ui-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
  stroke: none;
}
.site-header .site-case-links a > .ui-icon { color: var(--secondary, #46a4ff); }
.faq-list summary > .ui-icon { color: var(--muted); transition: transform 160ms ease; }
.faq-list details[open] summary > .ui-icon { transform: rotate(45deg); }
.back-top,
.legal-footer-bottom a:has(.ui-icon) { display: inline-flex; align-items: center; gap: 6px; }
.index-arrow, .flow-arrow, .path-arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* These wrappers previously had decorative font sizes of their own. */
.cases-index .index-arrow { font-size: 17px; }
.case-flow .flow-arrow { font-size: 18px; }
.creator-path .path-arrow { font-size: inherit; }
.dialog-heading .dialog-close { min-height: 40px; }
.c-field select {
  background-image: url('/assets/icons/ui/caret-down.svg');
  background-size: var(--icon-size) var(--icon-size);
}

/* Use the text-only image preview hint instead of duplicate pseudo-elements. */
[data-image-preview]::after,
.figma-layout #features button.feature-media::after { content: none; }
.image-preview-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 1000px;
  background: rgb(29 33 42 / 85%);
  color: var(--white);
  font: 500 12px/1.4 Pretendard, sans-serif;
  pointer-events: none;
}

/* The phone is a scaled product illustration: its small labels use 16px icons.
   System status marks and the Android bar retain their authored geometry. */
.solution-phone { --phone-icon-size: calc(var(--icon-size) * .655405); }
.solution-phone :is(.solution-phone-header, .solution-phone-search-rail, .solution-phone-content) .solution-phone-icon:not(.solution-phone-notification) {
  width: var(--phone-icon-size);
  height: var(--phone-icon-size);
  flex: 0 0 var(--phone-icon-size);
}
.solution-phone-menu > span { width: var(--phone-icon-size); height: var(--phone-icon-size); }
.solution-phone-menu .solution-phone-icon { transform: none; }
.solution-task-chip .solution-phone-icon { width: var(--icon-size); height: var(--icon-size); }
/* The poster's 32px labels render at 16px at half scale; match that icon size. */
.tools-poster-canvas { --icon-size: 32px; }

@media (width <= 960px) {
  .cases-index .index-arrow { font-size: 15px; }
}

@media (width <= 720px) {
  .figma-layout #new .prompt-send { width: 32px; height: 32px; flex-basis: 32px; }
  .figma-layout #features .image-preview-hint { right: 4px; bottom: 4px; padding: 2px 6px; font-size: 10px; }
  .solution-laptop-preview .image-preview-hint { right: 4px; bottom: 4px; padding: 2px 6px; font-size: 10px; }
  .case-flow .flow-arrow { height: var(--icon-size); }
  .case-flow .flow-arrow { font-size: 16px; }
  .cases-index .index-arrow { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list summary > .ui-icon { transition: none; }
}