/* ═══════════════════════════════════════════════════════════════════════
   실적상세 › 첨부파일 패널 (.ord-att-*) — 2026-10-10 리디자인
   마크업 = orders/_order_list_attachments_panel.html.erb · workspace/_db_list_attachments_panel.html.erb (DB상세 — 같은 클래스 공용; 통합뷰 카드·탭 모드·turbo_stream 교체 공용)
   · 업로드 대기 행(JS 가 만드는 것)은 패널 안 인라인 스타일 그대로 — 여기선 표시부만
   ═══════════════════════════════════════════════════════════════════════ */
.ord-att-panel { margin-top: 20px; }
.ord-unified-card .ord-att-panel,
.dbl-unified-card .ord-att-panel { margin-top: 0; padding: 14px; }
.ord-unified-card .ord-att-title,
.dbl-unified-card .ord-att-title { display: none; }   /* 카드 머리가 이미 «첨부파일» */

.ord-att-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ord-att-title { font-size: 13px; font-weight: 800; color: var(--ord-text); }
.ord-att-summary { flex: 1; min-width: 0; }
.ord-att-summary strong { display: block; font-size: 13px; font-weight: 800; color: var(--ord-text); }
.ord-att-summary small { display: block; margin-top: 1px; font-size: 11px; color: var(--ord-text-4); }
.ord-att-add { margin-left: auto; }

/* 업로드 대기 영역 — 열 때만 보인다(스크립트가 display 토글) */
.ord-att-upload-wrap {
  margin-bottom: 12px; padding: 12px;
  background: var(--ord-surface-2);
  border: 1px dashed var(--ord-line-2);
  border-radius: 10px;
}
.ord-att-file-select { cursor: pointer; }

.ord-att-empty {
  padding: 26px 16px; text-align: center;
  background: var(--ord-surface-2);
  border: 1px dashed var(--ord-line-2);
  border-radius: 10px;
  color: var(--ord-text-4); font-size: 12px; line-height: 1.7;
}

/* 그룹 라벨 */
.ord-att-group {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 0 8px; font-size: 11.5px; font-weight: 800; color: var(--ord-text-3);
}
.ord-att-group:first-of-type { margin-top: 2px; }
.ord-att-group em {
  font-style: normal; font-weight: 700; font-size: 10.5px;
  padding: 0 7px; border-radius: 999px;
  background: var(--ord-band); color: var(--ord-text-3);
}

/* 이미지·영상 — 썸네일 격자 */
.ord-att-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ord-att-media-tile {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--ord-line); border-radius: 10px;
  background: var(--ord-band);
}
.ord-att-media-link { display: block; width: 100%; height: 100%; }
.ord-att-media-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-att-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .25); color: var(--ord-on-solid);
}
.ord-att-media-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 6px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  color: var(--ord-on-solid); font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 삭제 × — 썸네일 모서리 원형 / 행 오른쪽 사각 */
.ord-att-del {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; cursor: pointer; line-height: 1;
  font-size: 13px;
  transition: background .12s, color .12s;
}
.ord-att-media-tile .ord-att-del {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: var(--ord-on-solid);
  opacity: .75;
}
.ord-att-media-tile:hover .ord-att-del { opacity: 1; background: var(--ord-solid-red); }
.ord-att-del.is-row {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--ord-line); background: var(--ord-surface); color: var(--ord-text-4);
}
.ord-att-del.is-row:hover { background: var(--ord-tint-red-bg); border-color: var(--ord-tint-red-line); color: var(--ord-tint-red-fg); }

/* 음성·문서 — 행 목록 */
.ord-att-list { display: flex; flex-direction: column; gap: 6px; }
.ord-att-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--ord-line); border-radius: 10px;
  background: var(--ord-surface);
  transition: background .12s;
}
.ord-att-row:hover { background: var(--ord-surface-2); }
.ord-att-icon {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.ord-att-icon.is-audio   { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); }
.ord-att-icon.is-archive { background: var(--ord-tint-amber-bg);  color: var(--ord-tint-amber-fg); }
.ord-att-icon.is-doc     { background: var(--ord-tint-cyan-bg);   color: var(--ord-tint-cyan-fg); }
.ord-att-main {
  flex: 1; min-width: 0; padding: 0; border: none; background: none;
  text-align: left; text-decoration: none; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.ord-att-name { font-size: 12.5px; font-weight: 700; color: var(--ord-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-att-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 10.5px; color: var(--ord-text-4); }
.ord-att-badge { padding: 0 6px; border-radius: 4px; font-weight: 700; }
.ord-att-badge.is-violet { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); }
.ord-att-badge.is-green  { background: var(--ord-tint-green-bg);  color: var(--ord-tint-green-fg); }
.ord-att-badge.is-blue   { background: var(--ord-tint-blue-bg);   color: var(--ord-tint-blue-fg); }