/* feedback-attach.css — 요청사항 캡처 첨부 칸.  (2026-09-23 신설)
 *
 * ⚠ 호스트(css/app.css)의 전역 `button{width:100%;margin-top:8px}`이 상속된다 —
 *   이 저장소가 .fb-x·.sheet-back에서 되풀이해 겪은 함정이다. 모든 button에 width:auto;margin:0.
 * ⚠ 이 칸은 feedback-board의 모달(.fb-pop) 안과 member-auth의 답장 칸(.ma-req-re) 안,
 *   두 곳에 들어간다 — 둘 다 폭이 달라 **고정 폭을 쓰지 않는다**(썸네일만 고정).
 */

.fa-box { display: flex; flex-direction: column; gap: 5px; }

.fa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fa-lab { font-size: 11.5px; color: var(--text-secondary, #475569); }
.fa-n { font-size: 11px; color: var(--text-tertiary, #64748b); }

.fa-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }

/* ── 붙인 캡처 ──────────────────────────────────────────────────── */
.fa-thumb {
  width: 116px; flex: none;
  border: 1px solid var(--border-medium, #cbd5e1); border-radius: 9px;
  overflow: hidden; background: var(--bg-sunken, #f6f8fa);
}
.fa-thumb img {
  display: block; width: 100%; height: 56px;
  object-fit: cover;                       /* 비율이 제각각이라 잘라서 맞춘다 — 원본은 눌러서 본다 */
  background: #dbe3ec;
}
.fa-tfoot { padding: 3px 5px 3px 7px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.fa-tname { font-size: 10px; color: var(--text-secondary, #475569); }

.fa-x {
  width: auto; margin: 0; flex: none;       /* 전역 button 상속을 끊는다 */
  min-width: 24px; min-height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--text-tertiary, #64748b); cursor: pointer;
}
.fa-x:hover { color: var(--status-danger, #c2261f); }

/* ── 붙이는 단추 ────────────────────────────────────────────────── */
.fa-pick {
  width: auto; margin: 0;                   /* 전역 button 상속 */
  flex: 1 1 150px; min-width: 150px; min-height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px dashed var(--border-strong, #a9bbd0); border-radius: 9px;
  background: var(--bg-surface, #f9fbfd); color: var(--text-secondary, #475569);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.fa-pick:hover, .fa-pick.is-over {
  border-color: var(--accent-blue, #1d4ed8);
  background: var(--accent-blue-bg, #eef4ff);
  color: var(--accent-blue, #1d4ed8);
}
.fa-pick:disabled { opacity: .6; cursor: default; }
.fa-ptop { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.fa-phint { font-size: 11px; color: var(--text-tertiary, #64748b); }

.fa-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.fa-err {
  font-size: 11.5px; padding: 6px 9px; border-radius: 7px;
  background: var(--status-danger-bg, #fde8e6); color: var(--status-danger, #c2261f);
}
.fa-note {
  margin: 2px 0 0; font-size: 11px; line-height: 1.55;
  color: var(--text-tertiary, #64748b);
  word-break: keep-all; overflow-wrap: anywhere;   /* 한글을 단어 중간에서 끊지 않는다 */
}

/* ── 붙은 캡처 «보기» (요청 상세·관리자 답변 화면) ───────────────────
 * ⚠ 이 규칙은 member-auth(.ma-req-*)와 admin-feedback(.afd-*) 안에서 함께 쓴다 —
 *   두 모듈이 각자 베끼지 않도록 첨부에 관한 모양은 이 파일 한 곳에 둔다.
 * ⛔ 그림 주소는 /member/feedback/file/<id> 다(서버가 자격을 보고 내준다). 정적 경로가 아니다. */
.ma-att, .afd-att { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.ma-att-i, .afd-att-i {
  width: 132px; display: block; text-decoration: none;
  border: 1px solid var(--border-medium, #cbd5e1); border-radius: 9px;
  overflow: hidden; background: var(--bg-surface-elevated, #fff);
}
.ma-att-i img, .afd-att-i img {
  display: block; width: 100%; height: 76px; object-fit: cover; background: #dbe3ec;
}
.ma-att-i span, .afd-att-i span {
  display: block; padding: 4px 7px; font-size: 10.5px;
  color: var(--text-secondary, #475569);
}
.ma-att-i:hover, .afd-att-i:hover { border-color: var(--accent-blue, #1d4ed8); }

/* 좁은 화면 — 손끝 크기로 키운다(iOS는 16px 미만 입력칸에서 화면을 확대해 배치가 어긋난다). */
@media (max-width: 640px) {
  .fa-pick { min-height: 92px; }
  .fa-x { min-width: 32px; min-height: 32px; }
  .fa-thumb { width: 104px; }
}