/* ─────────────────────────────────────────────────────────────────────────
 * 첨부파일 — 두 가지 화면의 옷.
 *
 *   .sjmk-attach     글쓰기 화면의 «첨부 판넬»  (wwwroot/js/editor/sjmk-attach-panel.js 가 그린다)
 *   .sjmk-attachbox  글 상세 화면의 «첨부 상자» (Views/Shared/_AttachmentBox.cshtml 이 그린다)
 *
 * 색은 사이트 토큰(css/common/tokens.css)에서 받아 쓴다 — 첨부만 색이 따로 놀지 않게.
 * 값을 :root 에 새로 만들지 않는다(홈페이지 전체 색이 바뀐다 — editor.css 머리말과 같은 이유).
 *
 * 손가락 화면(pointer: coarse)에서는 줄 높이와 단추를 키운다(마스터 지시 — 누르기 쉬워야 한다).
 * 좁은 화면에서는 «이름 / 단추» 가 두 줄로 접힌다.
 * 바깥 라이브러리 0개.
 * ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   1. 글쓰기 화면 — 첨부 판넬
   ═══════════════════════════════════════════════════════════════════════ */
.sjmk-attach {
  border: 1px solid var(--border, #D7DEE8);
  border-radius: var(--radius-sm, 10px);
  background: #F8FAFD;
  padding: 12px 14px 14px;
  margin-bottom: 16px;
}

.sjmk-attach.is-dragover {
  border-color: var(--primary, #2563EB);
  border-style: dashed;
  background: rgba(37, 99, 235, .06);
}

.sjmk-attach__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}

.sjmk-attach__title { font-size: 14px; font-weight: 700; color: var(--text, #0F172A); }

/* «3 / 5 개 · 7.2MB / 25MB» — 남은 여유 */
.sjmk-attach__gauge {
  font-size: 12px; font-weight: 600; color: var(--text-2, #475569);
  background: #EEF3FA; border: 1px solid var(--border, #D7DEE8);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.sjmk-attach__gauge.is-full { color: var(--warning, #D97706); border-color: #FCD9A8; background: #FEF6E9; }

.sjmk-attach__desc { font-size: 11.5px; color: var(--text-3, #94A3B8); margin-top: 4px; }

.sjmk-attach__tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px;
}

.sjmk-attach__add {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--primary, #2563EB);
  background: var(--surface, #FFFFFF); color: var(--primary, #2563EB);
  transition: background .15s, color .15s, opacity .15s;
}
.sjmk-attach__add:hover:not(:disabled) { background: var(--primary, #2563EB); color: #fff; }
.sjmk-attach__add:disabled { opacity: .45; cursor: not-allowed; }

.sjmk-attach__rule { font-size: 11.5px; color: var(--text-3, #94A3B8); }

/* 안내·오류 한 줄 */
.sjmk-attach__msg { display: none; font-size: 12px; margin-top: 8px; color: var(--text-2, #475569); }
.sjmk-attach__msg.is-on { display: block; }
.sjmk-attach__msg.is-error { color: var(--error, #DC2626); font-weight: 600; }

.sjmk-attach__file { display: none; }

.sjmk-attach__empty { font-size: 12px; color: var(--text-3, #94A3B8); margin-top: 9px; }

.sjmk-attach__list { list-style: none; margin: 9px 0 0; padding: 0; }

.sjmk-attach__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid #E7EDF5;
}
.sjmk-attach__row:first-child { border-top: 0; }

/* 사진이면 작은 미리보기, 파일이면 종류 그림글자 — «한눈에» 구분되게 (마스터 지시) */
.sjmk-attach__thumb {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #EEF3FA; border: 1px solid var(--border, #D7DEE8);
}
.sjmk-attach__thumb.is-image { background: #fff; }
.sjmk-attach__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sjmk-attach__ico { font-size: 19px; line-height: 1; }

.sjmk-attach__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.sjmk-attach__name {
  font-size: 13.5px; font-weight: 600; color: var(--text, #0F172A);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sjmk-attach__sub { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3, #94A3B8); }

.sjmk-attach__kind {
  font-weight: 700; border-radius: 999px; padding: 1px 8px; font-size: 11px;
}
.sjmk-attach__kind.is-image { background: #EFF6FF; color: var(--primary, #2563EB); }
.sjmk-attach__kind.is-file { background: #F1F5F9; color: var(--text-2, #475569); }

.sjmk-attach__acts { flex: 0 0 auto; display: flex; gap: 6px; }

.sjmk-attach__btn {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border, #D7DEE8);
  background: var(--surface, #FFFFFF); color: var(--text-2, #475569);
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.sjmk-attach__btn:hover { border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); }
.sjmk-attach__btn.is-danger:hover { border-color: var(--error, #DC2626); color: var(--error, #DC2626); }

/* ═══════════════════════════════════════════════════════════════════════
   2. 글 상세 화면 — 첨부 상자 (읽는 사람 몫)
   ═══════════════════════════════════════════════════════════════════════ */
.sjmk-attachbox {
  margin-top: 18px;
  border: 1px solid var(--border, #D7DEE8);
  border-radius: var(--radius-sm, 10px);
  background: #F8FAFD;
  padding: 12px 14px;
}

.sjmk-attachbox__head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 700; color: var(--text, #0F172A);
  margin-bottom: 2px;
}
.sjmk-attachbox__count { font-size: 12px; font-weight: 600; color: var(--text-3, #94A3B8); }
.sjmk-attachbox__desc { font-size: 11.5px; color: var(--text-3, #94A3B8); margin-bottom: 8px; }

.sjmk-attachbox__list { list-style: none; margin: 0; padding: 0; }

.sjmk-attachbox__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid #E7EDF5;
}
.sjmk-attachbox__row:first-child { border-top: 0; }

.sjmk-attachbox__thumb {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #EEF3FA; border: 1px solid var(--border, #D7DEE8);
}
.sjmk-attachbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sjmk-attachbox__ico { font-size: 19px; line-height: 1; }

.sjmk-attachbox__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sjmk-attachbox__name {
  font-size: 13.5px; font-weight: 600; color: var(--text, #0F172A);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sjmk-attachbox__sub { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3, #94A3B8); }
.sjmk-attachbox__kind { font-weight: 700; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.sjmk-attachbox__kind.is-image { background: #EFF6FF; color: var(--primary, #2563EB); }
.sjmk-attachbox__kind.is-file { background: #F1F5F9; color: var(--text-2, #475569); }

.sjmk-attachbox__acts { flex: 0 0 auto; display: flex; gap: 6px; }

.sjmk-attachbox__btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border, #D7DEE8);
  background: var(--surface, #FFFFFF); color: var(--text-2, #475569);
  transition: border-color .15s, color .15s;
}
.sjmk-attachbox__btn:hover { border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); }
.sjmk-attachbox__btn.is-main {
  border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); font-weight: 700;
}
.sjmk-attachbox__btn.is-main:hover { background: var(--primary, #2563EB); color: #fff; }
/* 받을 권한이 없는 사람에게 보이는 자리 — 단추가 아니라 «잠김» 표시다.
   눌러도 403 이 되는 죽은 단추를 그리지 않으려고 상자가 이것으로 바꿔 그린다
   (Views/Shared/_AttachmentBox.cshtml — canDownload 가 false 일 때). */
.sjmk-attachbox__deny {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px;
  border: 1px dashed var(--border, #D7DEE8);
  background: #F1F5F9; color: var(--text-3, #94A3B8);
}


/* ═══════════════════════════════════════════════════════════════════════
   3. 좁은 화면 · 손가락 화면
   ═══════════════════════════════════════════════════════════════════════ */

/* 모바일 본문(.m-content) 안에서는 글자를 조금 줄이고 여백을 좁힌다 */
.m-content .sjmk-attach,
.m-content .sjmk-attachbox { padding: 11px 12px; }
.m-content .sjmk-attach__rule { display: none; }   /* 규칙 줄은 판넬 설명과 겹친다 — 좁은 화면에선 뺀다 */

/* 480px 아래 — 이름 줄과 단추 줄을 나눈다(단추가 눌리지 않고 잘리는 것을 막는다) */
@media (max-width: 480px) {
  .sjmk-attach__row,
  .sjmk-attachbox__row { flex-wrap: wrap; }
  .sjmk-attach__acts,
  .sjmk-attachbox__acts { width: 100%; padding-left: 50px; }
  .sjmk-attach__btn,
  .sjmk-attachbox__btn { flex: 1 1 0; justify-content: center; }
}

/* 손가락으로 누르는 화면 — 줄과 단추를 키운다 */
@media (pointer: coarse) {
  .sjmk-attach__row,
  .sjmk-attachbox__row { padding: 11px 0; }
  .sjmk-attach__thumb,
  .sjmk-attachbox__thumb { width: 46px; height: 46px; }
  .sjmk-attach__btn,
  .sjmk-attachbox__btn,
  .sjmk-attachbox__deny { padding: 10px 13px; font-size: 13px; min-height: 44px; }
  .sjmk-attach__add { padding: 11px 16px; font-size: 14px; min-height: 44px; }
  .sjmk-attach__name,
  .sjmk-attachbox__name { font-size: 14.5px; }
}