/* attachment.css — 첨부 조각 셋(fragments/attachment-list · multi-attachment-uploader · single-attachment-uploader).
   누리집과 관리자 화면이 같은 조각을 쓰므로 계통 CSS 밖에 둔다. 색·간격·글자 크기·라운드는 두 계통에 함께 있는 토큰만 쓴다.
   글자 크기는 관리자 화면의 작은 본문 크기(--fs-adm-sm)를 먼저 찾고, 그 토큰이 없는 누리집에서는 --fs-14로 떨어진다.
   모양은 관리자 admin.css의 첨부 목록(.file-list · .file-item)과 놓는 자리(.file-drop), 누리집 폼 카드의 파일 줄(.file-row)을 합친 것이다 —
   그 클래스들은 한쪽 계통에만 있어 두 계통이 함께 쓰는 조각에는 그대로 쓰지 못한다.
   줄 높이와 버튼 크기는 이 부품 안에서만 쓰는 치수라 숫자로 적는다. */

/* ── 첨부 줄 — 목록 조각과 다건 위젯이 함께 쓴다 ── */
.attachment-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
/* 이름·크기·버튼이 한 줄에 들지 않는 좁은 칸에서는 버튼을 다음 줄로 넘긴다 — 이름이 최소 폭을 지켜 낱자마다 꺾이지 않는다 */
.attachment-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 40px;
  padding: var(--sp-2) var(--sp-3); border: var(--bd-soft); border-radius: var(--r-sm); background: var(--c-gray-50);
  font-size: var(--fs-adm-sm, var(--fs-14));
}
.attachment-item__icon { flex-shrink: 0; color: var(--c-text-mute); }
.attachment-item__name {
  flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere;
  font-weight: var(--fw-medium); color: var(--c-text); text-decoration: none;
}
a.attachment-item__name:hover { color: var(--c-accent); text-decoration: underline; }
.attachment-item__size { flex-shrink: 0; color: var(--c-text-cap); font-size: var(--fs-12); white-space: nowrap; }
.attachment-item__actions { display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; margin-left: auto; }
.attachment-item__action {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--sp-2);
  border: var(--bd); border-radius: var(--r-xs); background: var(--c-white);
  color: var(--c-text-soft); font-size: var(--fs-12); text-decoration: none; white-space: nowrap;
}
.attachment-item__actions .attachment-item__action + .attachment-item__action { margin-left: var(--sp-1); }
.attachment-item__action:hover { border-color: var(--c-accent); color: var(--c-accent); }
.attachment-item__button {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: var(--r-xs); background: none; color: var(--c-text-mute); cursor: pointer;
}
.attachment-item__button[hidden] { display: none; }
.attachment-item__button:hover { background: var(--c-gray-200); color: var(--c-text); }
.attachment-item__button.is-remove:hover { color: var(--c-danger); }
.attachment-item__button:disabled { opacity: .35; cursor: default; background: none; }
.attachment-item__button:focus-visible,
.attachment-item__action:focus-visible,
a.attachment-item__name:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── 다건 위젯 ── */
.attachment-uploader { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.attachment-list[hidden] { display: none; }
.attachment-drop {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); position: relative;
  min-height: 48px; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-white); color: var(--c-text-mute); font-size: var(--fs-adm-sm, var(--fs-14));
  text-align: center; cursor: pointer;
}
.attachment-drop:hover,
.attachment-drop.is-dragover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-teal-50); }
.attachment-drop:focus-within { border-color: var(--c-accent); box-shadow: var(--shadow-focus); }
.attachment-help { margin: 0; }
/* 허용 형식과 권장 규격을 이름표·값 두 칸으로 맞춰 세운다 — 글자 크기·색은 .help를 따르고 값은 .help b처럼 짙게 굵힌다 */
.attachment-specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sp-3); margin: 0; }
.attachment-specs dt { margin: 0; }
.attachment-specs dd { margin: 0; color: var(--c-text-soft); font-weight: var(--fw-bold); overflow-wrap: anywhere; }

/* ── 단건 위젯 ── */
.attachment-single { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.attachment-single__row {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 0 0 0 var(--sp-3);
  border: var(--bd); border-radius: var(--r-sm); background: var(--c-white); overflow: hidden;
}
.attachment-single__row.is-dragover { border-color: var(--c-accent); background: var(--c-teal-50); }
.attachment-single__row:focus-within { border-color: var(--c-accent); box-shadow: var(--shadow-focus); }
.attachment-single__name {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
  color: var(--c-text); font-size: var(--fs-adm-sm, var(--fs-14)); font-weight: var(--fw-medium);
}
.attachment-single__name.is-empty { color: var(--c-text-cap); font-weight: inherit; }
.attachment-single__pick {
  display: flex; align-items: center; align-self: stretch; position: relative; padding: 0 var(--sp-4);
  border-left: var(--bd); color: var(--c-accent); font-size: var(--fs-adm-sm, var(--fs-14)); font-weight: var(--fw-semibold);
  white-space: nowrap; cursor: pointer;
}
.attachment-single__pick:hover { background: var(--c-teal-50); }