/* ============================================================
   UNITY 통합 아이콘 시스템
   = Material Symbols 스타일 SVG (24x24 viewBox, 단색 fill)
   = 모든 페이지에서 emoji 대신 .nm-ico 사용
   ============================================================ */

.nm-ico{
  display:inline-block;
  width:18px;height:18px;
  vertical-align:-3.5px;        /* 텍스트 baseline 정렬 */
  flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:contain;
          mask-size:contain;
  transition:filter .12s ease;
}

/* 크기 변형 */
.nm-ico.xs{width:14px;height:14px;vertical-align:-2.5px}
.nm-ico.sm{width:16px;height:16px;vertical-align:-3px}
.nm-ico.md{width:18px;height:18px;vertical-align:-3.5px}
.nm-ico.lg{width:22px;height:22px;vertical-align:-5px}
.nm-ico.xl{width:28px;height:28px;vertical-align:-7px}

/* 색상 변형 (currentColor 기본 — 부모 color 따라감) */
.nm-ico.muted   {opacity:.55}
.nm-ico.accent  {color:#ed207c}
.nm-ico.brand   {color:#06519F}
.nm-ico.success {color:#15803d}
.nm-ico.warn    {color:#c2410c}
.nm-ico.danger  {color:#dc2626}

/* ============================================================
   아이콘 mask-image — 파일은 /static/image/<name>.svg
   추가하려면 SVG 추가 후 여기에 한 줄 등록.
   ============================================================ */
.nm-ico-chat       {-webkit-mask-image:url(/static/image/chat.svg);       mask-image:url(/static/image/chat.svg)}
.nm-ico-lock       {-webkit-mask-image:url(/static/image/lock.svg);       mask-image:url(/static/image/lock.svg)}
.nm-ico-verified   {-webkit-mask-image:url(/static/image/verified.svg);   mask-image:url(/static/image/verified.svg)}
.nm-ico-search     {-webkit-mask-image:url(/static/image/search.svg);     mask-image:url(/static/image/search.svg)}
.nm-ico-edit       {-webkit-mask-image:url(/static/image/edit.svg);       mask-image:url(/static/image/edit.svg)}
.nm-ico-doc        {-webkit-mask-image:url(/static/image/doc.svg);        mask-image:url(/static/image/doc.svg)}
.nm-ico-money      {-webkit-mask-image:url(/static/image/money.svg);      mask-image:url(/static/image/money.svg)}
.nm-ico-handshake  {-webkit-mask-image:url(/static/image/handshake.svg);  mask-image:url(/static/image/handshake.svg)}
.nm-ico-robot      {-webkit-mask-image:url(/static/image/robot.svg);      mask-image:url(/static/image/robot.svg)}
.nm-ico-ai         {-webkit-mask-image:url(/static/image/autoawesome.svg);mask-image:url(/static/image/autoawesome.svg)}
.nm-ico-hide       {-webkit-mask-image:url(/static/image/hide.svg);       mask-image:url(/static/image/hide.svg)}
.nm-ico-eye-off    {-webkit-mask-image:url(/static/image/visibilityoff.svg);mask-image:url(/static/image/visibilityoff.svg)}
.nm-ico-arrow-fwd  {-webkit-mask-image:url(/static/image/arrowforward.svg);mask-image:url(/static/image/arrowforward.svg)}
.nm-ico-arrow-back {-webkit-mask-image:url(/static/image/arrowback.svg);  mask-image:url(/static/image/arrowback.svg)}
.nm-ico-close      {-webkit-mask-image:url(/static/image/close.svg);      mask-image:url(/static/image/close.svg)}
.nm-ico-check      {-webkit-mask-image:url(/static/image/check.svg);      mask-image:url(/static/image/check.svg)}
.nm-ico-place      {-webkit-mask-image:url(/static/image/place.svg);      mask-image:url(/static/image/place.svg)}
.nm-ico-refresh    {-webkit-mask-image:url(/static/image/refresh.svg);    mask-image:url(/static/image/refresh.svg)}
.nm-ico-photo      {-webkit-mask-image:url(/static/image/photo.svg);      mask-image:url(/static/image/photo.svg)}
.nm-ico-cart       {-webkit-mask-image:url(/static/image/cart.svg);       mask-image:url(/static/image/cart.svg)}
.nm-ico-bag        {-webkit-mask-image:url(/static/image/shoppingbag.svg);mask-image:url(/static/image/shoppingbag.svg)}
.nm-ico-broken     {-webkit-mask-image:url(/static/image/brokenimage.svg);mask-image:url(/static/image/brokenimage.svg)}
.nm-ico-chev-l     {-webkit-mask-image:url(/static/image/chevronleft.svg);mask-image:url(/static/image/chevronleft.svg)}
.nm-ico-chev-r     {-webkit-mask-image:url(/static/image/chevronright.svg);mask-image:url(/static/image/chevronright.svg)}
.nm-ico-delete     {-webkit-mask-image:url(/static/image/delete.svg);     mask-image:url(/static/image/delete.svg)}
.nm-ico-add        {-webkit-mask-image:url(/static/image/add.svg);        mask-image:url(/static/image/add.svg)}
.nm-ico-minus      {-webkit-mask-image:url(/static/image/remove.svg);     mask-image:url(/static/image/remove.svg)}

/* ============================================================
   매물 썸네일 없을 때 placeholder — 통일된 사진 아이콘 (흐림)
   사용:
     <div class="nm-no-thumb"></div>          기본 (정사각형 fluid)
     <div class="nm-no-thumb sm"></div>       매칭 셀 등 작은 사이즈
     <div class="nm-no-thumb lg"></div>       상세페이지 hero 등 큰 사이즈
   ============================================================ */
.nm-no-thumb{
  background:#eef2f7;
  border:1px solid #e6e8ee;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:48px;
  color:#cbd5e1;
  overflow:hidden;
}
.nm-no-thumb::before{
  content:"";
  display:block;
  width:56%;height:56%;
  max-width:64px;max-height:64px;
  background-color:currentColor;
  -webkit-mask-image:url(/static/image/photo.svg);
          mask-image:url(/static/image/photo.svg);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-size:contain;
          mask-size:contain;
  opacity:.7;
}
.nm-no-thumb.sm::before{max-width:28px;max-height:28px}
.nm-no-thumb.lg::before{max-width:96px;max-height:96px}
.nm-no-thumb.circle{border-radius:50%}