/* 사랑공장 관리자 — Sneat(core.css·theme-default.css) 위에 얹는 커스텀 오버레이.
   룩은 전부 Sneat 클래스가 담당한다. 여기는 한글 폰트·대시보드 v2 조각·모달/토스트만. */

/* 한글 본문 = Pretendard 폴백 (Public Sans는 숫자·영문용으로 유지) */
body {
  font-family: "Public Sans", "Pretendard Variable", Pretendard, "Malgun Gothic",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── 대시보드 v2 조각 (kiosk-jsp-admin templates/dashboard_v2.md 표준) ── */
.kpi-icon {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: .5rem; font-size: 1.4rem; flex: 0 0 auto;
}
.kpi-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #566a7f; }
.card-title-sm { font-size: .95rem; font-weight: 600; margin: 0; }
.summary-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid #f0f0f2; }
.summary-item:last-child { border-bottom: 0; }

/* 일자표 — 스크롤 + 헤더/합계 고정 */
.day-table { max-height: 220px; overflow: auto; }
.day-table thead th { position: sticky; top: 0; z-index: 1; }
.day-table tfoot td { position: sticky; bottom: 0; }

/* 저장 대기(수정됨) 버튼 상태 */
.btn.btn-dirty { background: #ffab00; border-color: #ffab00; color: #fff; }

/* extra JSON 접기 */
details.json-edit summary { font-size: 12px; color: #a1acb8; cursor: pointer; padding: 4px 0; }
details.json-edit summary:hover { color: #696cff; }
details.json-edit textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; min-height: 140px; }

/* 썸네일 */
.adm-thumb { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; background: #eceef1; display: inline-block; }
.adm-thumb-lg { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; background: #eceef1; }

/* 메인 배경 카드 */
.hero-thumb { aspect-ratio: 16 / 9; background: #eceef1; border-radius: .375rem .375rem 0 0; overflow: hidden; }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 표 행 드래그 정렬 (사례 노출 순서) */
.drag-handle { cursor: grab; color: #a1acb8; text-align: center; }
.drag-handle:active { cursor: grabbing; }
tr.dragging { opacity: .45; background: #f4f4ff; }

/* 이미지 업로드 드롭존 — 클릭 · 드래그 · Ctrl+V */
.adm-drop {
  border: 2px dashed #d9dee3; border-radius: .5rem; padding: 18px 16px; text-align: center;
  color: #697a8d; cursor: pointer; background: #fff; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.adm-drop:hover, .adm-drop:focus-visible, .adm-drop.drag { border-color: #696cff; background: #f4f4ff; outline: none; }
.adm-drop i { font-size: 26px; color: #a1acb8; display: block; margin-bottom: 4px; transition: color .15s; }
.adm-drop:hover i, .adm-drop.drag i { color: #696cff; }
.adm-drop small { display: block; margin-top: 3px; }

/* 모달 (Bootstrap .modal 과 충돌 방지용 자체 오버레이) */
.adm-modal {
  position: fixed; inset: 0; background: rgba(50, 71, 92, .5); z-index: 1090;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.adm-modal-box { width: 600px; max-width: 100%; }

/* 토스트 (Bootstrap .toast 와 충돌 방지) */
.adm-toast {
  position: fixed; bottom: 24px; right: 24px; background: #566a7f; color: #fff;
  padding: 12px 18px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  font-size: 13px; z-index: 1100; opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.adm-toast.show { opacity: 1; transform: none; }
.adm-toast.err { background: #ff3e1d; }

/* 로그인 (login.html) */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: #f5f5f9; }
.login-box { width: 400px; max-width: 100%; }

/* ── 얼굴형 매핑 (설계서 §6.1) ─────────────────────────────── */

/* 썸네일이 없는 제품 자리 — 빈 칸이 아니라 '아직 없음'으로 읽히게 */
.adm-thumb-empty {
  display: inline-flex; align-items: center; justify-content: center;
  color: #b4bdc6; background: #f1f2f4;
}
.adm-thumb-empty .bx { font-size: 18px; }
.adm-thumb-lg.adm-thumb-empty .bx { font-size: 32px; }

/* 슬롯 칸 — 대표추천 1 + 추천 4 */
.slot-cell {
  width: 100%; min-height: 132px; padding: 10px 8px; border: 1px dashed #d9dee3;
  border-radius: .5rem; background: #fff; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.slot-cell:hover { border-color: #696cff; background: #f7f7ff; }
.slot-cell.filled { border-style: solid; box-shadow: 0 1px 3px rgba(50, 71, 92, .07); }
.slot-cell.filled:hover { border-color: #696cff; }
.slot-label { font-size: 11px; color: #a1acb8; line-height: 1.3; }
.slot-thumb { width: 100%; height: 56px; object-fit: contain; border-radius: 4px; background: #f6f7f9; }
.slot-name { font-size: 12px; font-weight: 600; color: #566a7f; word-break: break-word; }
.slot-empty { color: #a1acb8; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 14px; }
.slot-empty .bx { font-size: 22px; }

/* 후보풀 칩 */
.pool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pool-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px;
  border: 1px solid #e4e6e8; border-radius: 999px; background: #fff; font-size: 13px; color: #566a7f;
}
.pool-chip.placed { border-color: #696cff; background: #f4f4ff; }
.chip-thumb { width: 26px; height: 20px; object-fit: contain; border-radius: 3px; background: #f6f7f9; }
.chip-slot { font-style: normal; font-size: 11px; color: #696cff; background: #ececff; padding: 1px 6px; border-radius: 999px; }
.chip-x { border: 0; background: transparent; color: #a1acb8; font-size: 17px; line-height: 1; padding: 0 3px; cursor: pointer; }
.chip-x:hover { color: #ff3e1d; }

/* 제품 선택 시트 그리드 */
.pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px;
}
.pick-cell {
  position: relative; border: 1px solid #e4e6e8; border-radius: .5rem; background: #fff;
  padding: 8px 6px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .12s, background .12s;
}
.pick-cell:hover { border-color: #696cff; }
.pick-cell.on { border-color: #696cff; background: #f4f4ff; }
.pick-thumb { width: 100%; height: 48px; object-fit: contain; border-radius: 4px; background: #f6f7f9; }
.pick-name { font-size: 12px; font-weight: 600; color: #566a7f; line-height: 1.25; word-break: break-word; }
.pick-meta { font-size: 10px; color: #a1acb8; }
.pick-on { position: absolute; top: 4px; right: 5px; color: #696cff; font-size: 16px; }

/* ── 제품 관리 (설계서 §6.2) ───────────────────────────────── */
.btn-thumb { border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0; }
.btn-thumb:hover .adm-thumb, .btn-thumb:hover .adm-thumb-empty { outline: 2px solid #696cff; outline-offset: 1px; }
/* 미기입 소재를 눈에 띄게 — 이 칸을 채우는 게 고객 할 일이다 */
select.is-blank { border-color: #ffab00; background: #fff8e6; color: #a1720a; }

/* ── 문구 관리 (설계서 §6.3) ───────────────────────────────── */
.copy-summary { padding: 14px 20px; cursor: pointer; list-style: none; }
.copy-summary::-webkit-details-marker { display: none; }
.copy-summary::before { content: "\25B8"; color: #a1acb8; margin-right: 8px; display: inline-block; }
details[open] > .copy-summary::before { transform: rotate(90deg); }
.copy-item { padding: 14px 0; border-top: 1px solid #f0f0f2; }
.copy-item:first-child { border-top: 0; padding-top: 4px; }
.copy-item textarea { font-size: 13px; }

/* 대시보드 얼굴형 현황 줄 */
.face-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 10px 0; border-bottom: 1px solid #f0f0f2; color: #566a7f;
}
.face-row:last-child { border-bottom: 0; }
.face-row:hover { color: #696cff; }

/* ── 계정 · 감사 ───────────────────────────────────────────── */
.issued-box { border: 1px solid #e4e6e8; border-radius: .5rem; padding: 14px; background: #f9fafb; }
.issued-pw { font-size: 15px; font-weight: 700; color: #0C1116; background: #fff; padding: 6px 10px; border-radius: 4px; border: 1px solid #e4e6e8; letter-spacing: .5px; }
.audit-val { font-size: 11px; color: #697a8d; word-break: break-all; }