/*
 * 침구 처방 추가·수정 모달 (PLAN 260920 만드는 자리 §12 W5). 침구 관리·어셋 두 화면이 같이 싣는다.
 * 틀(머리·입력란·하단·배경막)은 공용 ui-kit.css .ui-modal-* (PLAN 261005-2 W2). 이 모달만 다른 너비·오류 여백은 #acuModal 아래에 둔다.
 * 혈위 그룹·혈위 칩·시술 토글·미리보기(acu-*)는 침구 관리 화면 인라인 CSS 를 그대로 옮겼다.
 * 다크 짝 규칙이 clinical-catalog.dark.css 에 클래스로 있어 id 로 묶지 않는다(묶으면 다크 규칙을 이긴다).
 */

#acuModal .ui-modal-card { width: 600px; }

/* 단계가 없어 오류 문장이 본문 바로 아래에 붙는다 */
#acuModal .ui-modal-error { margin: 4px 24px 0; }

/* ── 혈위 그룹·혈위 칩·시술 토글·미리보기 (침구 관리 화면에서 옮김) ─────────────── */

/* 한 줄이 아니라 카드다 — 아래에 시술 토글이 한 줄 더 붙는다. */
.acu-group-row { border:1px solid #e6ecf4; border-radius:11px; padding:8px; margin-bottom:8px; background:#fbfdff; }
/* 첫 행은 분류 · 그룹명 · 삭제, 둘째 행은 혈위 입력란이 삭제 열 앞까지 차지한다.
   혈위 입력란이 그룹명 옆에 끼어 칩이 쌓이면 입력란 혼자 다음 행으로 내려가 공간이 비었다
   (261030 원장 「입력란이 한 행을 통째로 차지해야지」). 삭제 버튼은 오른쪽 열에 둔다. */
.acu-group-main { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:8px; align-items:center; }
.acu-group-row .acu-group-type { grid-area:1 / 1; }
.acu-group-row .acu-group-label { grid-area:1 / 2; }
.acu-group-row .acu-group-points { grid-area:2 / 1 / 3 / 3; min-width:0; position:relative; }
.acu-group-row .acu-group-del { grid-area:1 / 3; }
.acu-group-methods { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; padding-left:2px; }
.acu-method-toggle {
  font-size:0.78rem; border:1px solid #d7dee8; background:#fff; color:#64748b;
  border-radius:999px; padding:3px 10px; cursor:pointer;
}
.acu-method-toggle.is-on { border-color:#818cf8; background:#eef2ff; color:#3730a3; }
.acu-group-row input, .acu-group-row select {
  border:1px solid #d7dee8; border-radius:9px; padding:9px 11px; font-size:0.9rem;
}

/* 혈위 고르기 — 탕제 처방의 약재 검색(formula-management `.cat-herb-drop`)과 같은 모양이다.
   두 카탈로그 화면이 다른 모양으로 물으면 같은 일을 두 번 배우게 된다.
   다른 점 하나: 한 그룹이 혈위를 여럿 담으므로 고른 것이 칩으로 쌓인다. */
.acu-point-box {
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  border:1px solid #d7dee8; border-radius:9px; padding:5px 7px; background:#fff; min-height:40px;
}
.acu-point-box:focus-within { border-color:#94a3b8; }
.acu-point-chip {
  display:inline-flex; align-items:center; gap:4px; font-size:0.82rem;
  background:#f1f5f9; color:#1e293b; border-radius:999px; padding:3px 4px 3px 9px;
}
/* 목록에 없는 이름 — 저장은 되지만 코드가 없어 청구가 부위를 세지 못한다. 눈에 띄게 둔다. */
.acu-point-chip.is-free { background:#fff7ed; color:#9a3412; }
.acu-point-chip button { background:none; border:none; color:#94a3b8; cursor:pointer; padding:0 3px; font-size:0.72rem; }
/* 위의 `.acu-group-row input` 을 (0,2,1) 로 눌러 되찾는다 — !important 를 쓰지 않는다. */
.acu-group-row .acu-point-input {
  flex:1; min-width:92px; border:none; padding:4px 2px; font-size:0.9rem;
  outline:none; background:none;
}
.acu-point-drop {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:10;
  background:#fff; border:1px solid #d7dee8; border-radius:9px;
  max-height:220px; overflow-y:auto; box-shadow:0 8px 24px rgba(15,23,42,.12);
}
.acu-point-drop button {
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:8px 11px; font-size:0.88rem; color:#1e293b; cursor:pointer;
}
.acu-point-drop button:hover, .acu-point-drop button.is-active { background:#f8fafc; }
.acu-point-drop .drop-sub { color:#94a3b8; font-size:0.8rem; margin-left:6px; }
.acu-point-drop .drop-empty { padding:8px 11px; font-size:0.82rem; color:#94a3b8; }
/* 한 줄에 선 셋이 서로 다른 높이였다 — 분류 39 · 그룹명 37 · 혈위칸 40 (260910-5 실측).
   높이를 40 으로 못박아 그것부터 없앤다. `min-height` 라 혈위칸이 칩으로 자라는 것은
   막지 않는다. */
.acu-group-row select,
.acu-group-row .acu-group-label,
.acu-group-row .acu-point-box { min-height:40px; }
.acu-group-del {
  flex-shrink:0; background:none; border:none; color:#94a3b8; cursor:pointer;
  padding:6px; min-height:40px; display:flex; align-items:center;
}
.acu-group-add {
  margin-top:4px; background:none; border:1px dashed #cbd5e1; border-radius:9px;
  padding:8px 12px; font-size:0.84rem; color:#64748b; cursor:pointer;
}
.acu-preview { border:1px solid #e6ecf4; border-radius:11px; background:#f8fafc; padding:9px 11px; display:grid; gap:6px; }
.acu-preview-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:0.82rem; color:#94a3b8; padding-bottom:2px; }
.acu-preview-crumb i { font-style:normal; color:#cbd5e1; }
.acu-preview-crumb .is-leaf { color:#1e293b; font-weight:700; }
.acu-preview-row { display:flex; gap:7px; align-items:center; font-size:0.86rem; color:#1e293b; }
.acu-preview-methods { display:flex; gap:4px; flex-shrink:0; }
.acu-preview-method { font-size:0.74rem; border-radius:999px; padding:2px 7px; background:#eef2ff; color:#3730a3; }
.acu-preview-points { min-width:0; word-break:keep-all; }
.acu-preview-empty { font-size:0.82rem; color:#94a3b8; }
.acu-point-drop[hidden] { display:none; }