/* =============================================================================
 * swnm 첨부파일 컴포넌트 — .ui-attach  (사인오프 2026-06-23)
 * -----------------------------------------------------------------------------
 * 하나의 컴포넌트, 두 모드.
 *   --gallery : 사진형. 정사각 썸네일 그리드 + "+" 타일 (민원).
 *   --list    : 파일형. 썸네일 없는 한 줄 파일 행 목록 + "파일 추가" 버튼 (누수복구).
 *
 *   <div class="ui-attach ui-attach--gallery">
 *     <div class="ui-attach__grid" id="…List"></div>
 *     <label class="ui-attach__add" for="…Input">
 *       <i class="ui-ico ui-attach__add-ico" style="--ui-ico:url('…/ic_plus.svg')"></i>
 *     </label>
 *     <input type="file" id="…Input" class="ui-attach__input" multiple hidden>
 *   </div>
 *
 * 색·간격·타이포·radius는 토큰만. 고정 크기(px)는 이 파일의 로컬 변수로만 정의.
 * 업로드/삭제/미리보기 동작은 페이지 JS (공용 /api/attachments/* 사용).
 *
 * 변경: 2026-06-23 · jiwon · 민원(사진형)·누수복구(파일형) 첨부 공용화. 정의 19_attachment_component.
 * ============================================================================= */

.ui-attach {
  /* 고정 크기/오프셋은 토큰이 없는 컴포넌트 고유값 → 여기 로컬 변수로만 둔다(매직넘버 인라인 금지) */
  --attach-add-size: 88px;   /* gallery "+" 타일 */
  --attach-del-size: 18px;   /* 삭제 버튼 지름 */
  --attach-del-offset: 6px;  /* 삭제 버튼 모서리 돌출 */
  --attach-badge-offset: 7px;/* 배지 모서리 돌출 */
  --attach-icon: 16px;       /* list 행 파일 아이콘 */
  --attach-add-icon: 20px;   /* gallery "+" 아이콘 */
  --attach-row-h: 36px;      /* list 행 높이 */
  --attach-del-icon: 10px;   /* 삭제 버튼 안 X 아이콘 */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
}

/* 업로드 영역용 회색 패널 chrome (읽기전용 표시 목록엔 안 붙인다) */
.ui-attach--panel {
  background: var(--bg-surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

/* JS 렌더 타깃. display:contents 라 비우고 다시 그려도 형제인 __add 는 보존된다. */
.ui-attach__grid { display: contents; }

.ui-attach__input { display: none; }

/* ── 공통 항목 요소 ───────────────────────────────────────────────────────── */
.ui-attach__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ui-attach__thumb {
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

.ui-attach__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xs);
  font-weight: var(--fw-bold);
  background: var(--status-critical-bg);
  color: var(--status-critical);
}

.ui-attach__name {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.ui-attach__del {
  position: absolute;
  top: calc(-1 * var(--attach-del-offset));
  right: calc(-1 * var(--attach-del-offset));
  width: var(--attach-del-size);
  height: var(--attach-del-size);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--status-critical);
  color: #FFFFFF;                          /* 상태색 위 고정 대비 글자 (badges.css와 동일 예외) */
  font-size: var(--font-xs);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ui-attach__del .ui-ico { width: var(--attach-del-icon); height: var(--attach-del-icon); }

.ui-attach__badge {
  position: absolute;
  top: calc(-1 * var(--attach-badge-offset));
  right: calc(-1 * var(--attach-badge-offset));
  background: var(--primary);
  color: #FFFFFF;                          /* 색 위 고정 대비 글자 (badges.css와 동일 예외) */
  font-size: var(--font-xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
}

/* ── gallery 모드: 정사각 썸네일 + 타일형 추가 ───────────────────────────── */
.ui-attach--gallery {
  --attach-thumb-w: 80px;
  --attach-thumb-h: 80px;
}
.ui-attach--gallery .ui-attach__thumb {
  width: var(--attach-thumb-w);
  height: var(--attach-thumb-h);
}
.ui-attach--gallery .ui-attach__name {
  margin-top: var(--space-1);
  max-width: var(--attach-thumb-w);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ui-attach--gallery .ui-attach__item {
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.ui-attach--gallery .ui-attach__item:hover { background: var(--bg-hover); }

/* 파일명 숨김 옵션 (썸네일만 노출) */
.ui-attach--no-name .ui-attach__name { display: none; }

/* 읽기전용/연계 항목 표시 (예: 누수복구에 연계 민원 첨부) */
.ui-attach__item--ro .ui-attach__thumb { outline: 2px solid var(--primary); outline-offset: -2px; }

/* 썸네일 안에 링크가 감싸인 경우(anchor>img) 사이즈 유지 */
.ui-attach--gallery a > .ui-attach__thumb { display: block; }
.ui-attach--gallery .ui-attach__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--attach-add-size);
  height: var(--attach-add-size);
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
}
.ui-attach--gallery .ui-attach__add:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.ui-attach__add-ico { width: var(--attach-add-icon); height: var(--attach-add-icon); }

/* ── list 모드: 썸네일 없는 한 줄 파일 행 목록 ───────────────────────────── */
.ui-attach--list {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-1);
}
.ui-attach__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--attach-row-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
}
.ui-attach__row:hover { background: var(--bg-hover); }
.ui-attach__row-ico {
  width: var(--attach-icon);
  height: var(--attach-icon);
  flex: 0 0 var(--attach-icon);
}
.ui-attach--list .ui-attach__name {
  flex: 1 1 auto;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-attach__size {
  flex: 0 0 auto;
  font-size: var(--font-xs);
  color: var(--text-muted);
}
.ui-attach--list .ui-attach__del {
  position: static;
  flex: 0 0 var(--attach-del-size);
}
.ui-attach--list .ui-attach__badge {
  position: static;
  flex: 0 0 auto;
}
.ui-attach--list .ui-attach__add {
  margin-top: var(--space-2);
  align-self: flex-start;
}

/* 빈 상태 */
.ui-attach__empty {
  color: var(--text-muted);
  font-size: var(--font-xs);
}