/* saju-imgph.css — 공용 이미지 플레이스홀더(X 박스 + 이미지 ID 표기)
   명명체계 SoT: docs/saju/이미지_ID_명명체계.md
   사용: <div class="imgph"><span class="imgph__id">saju-sjb-card</span></div>
   에셋 준비 시 이 div를 <img>로 교체. 다크 배경엔 .imgph--dark 추가. */

.imgph { position: relative; background: var(--md-sys-color-surface-variant, #EDE8E0);
  border: 1px dashed var(--color-steel, #5C6670); border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 48px; }
.imgph::before { content: ""; position: absolute; inset: 0; opacity: .40;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.9px), var(--color-steel, #5C6670) 50%, transparent calc(50% + 0.9px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.9px), var(--color-steel, #5C6670) 50%, transparent calc(50% + 0.9px)); }
.imgph__id { position: relative; z-index: 1; max-width: calc(100% - 16px);
  font-family: 'SFMono-Regular', ui-monospace, Consolas, 'D2Coding', monospace;
  font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px;
  color: var(--color-steel, #5C6670); background: rgba(255,255,255,.92);
  padding: 3px 8px; border-radius: 6px; text-align: center; word-break: break-all; }
.imgph__id::before { content: "IMG "; opacity: .6; font-weight: 700; }

/* 다크 배경용 */
.imgph--dark { background: rgba(242,237,227,.06); border-color: rgba(242,237,227,.35); }
.imgph--dark::before {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.9px), rgba(242,237,227,.45) 50%, transparent calc(50% + 0.9px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.9px), rgba(242,237,227,.45) 50%, transparent calc(50% + 0.9px)); }
.imgph--dark .imgph__id { color: var(--color-bg-base, #F2EDE3); background: rgba(26,31,46,.6); }