/* ══════════════════════════════════════════════════════════════════════
   가정용 — 뉴모피즘 결 (2026-09-10 · 대표님 「가정용으로 해 볼까요 → 네」)

   ■ 왜 가정용에만인가 (계산으로 정했습니다)
     전형적인 뉴모피즘은 **단추와 바탕이 같은 색**입니다 — 경계 **1.00 : 1**.
     깊이를 그림자로만 만드는데 그 그림자조차 **1.72 : 1** 로 WCAG 의 3:1 에 못 미칩니다.
     요양원 본화면은 **벽에 걸리고 밤에 보고 경보를 놓치면 안 되는** 화면이라
     거기엔 쓰지 않습니다(실측: 케어뷰는 이미 3.53→5.43 식으로 명암비를 올려 둔 이력이 있습니다).
     가정용은 조건이 다릅니다 — 손에 든 화면, 가까이서, 밝은 방,
     「경보」보다 「오늘 잘 주무셨나」를 보는 자리입니다.

   ■ 그래서 이렇게 나눴습니다 — **그림자는 느낌용, 선은 판정용**
     · 부드러운 두 겹 그림자로 «뉴모피즘» 의 결을 냅니다.
     · 그런데 **경계선을 지우지 않습니다.** 누를 수 있는 것에는 `#888988` 이상(3.02:1)
       의 선을 남깁니다. 그림자만으로 «누를 수 있음» 을 알리면 아무도 못 누릅니다.
     · **색으로 뜻을 나르는 것은 하나도 안 건드립니다** — 경보·상태 칩·글자 색은
       지금 값 그대로입니다(10~16:1). 결만 바뀌고 판정은 안 바뀝니다.

   ■ 끄는 자리
     · **다크 모드에서는 통째로 꺼집니다.** 어두운 바탕에서 뉴모피즘은 형태가 사라집니다.
     · `prefers-contrast: more` 인 분에게도 꺼집니다.
     · 움직임을 줄이신 분에게는 눌림 애니메이션을 안 씁니다.

   ■ 🔴 처음에 `.cv3home-wrap` 이라고 썼습니다 — **그런 클래스는 없습니다.**
     이름을 지어낸 것입니다. 실제는 `view.className='cv3home'` · `id='cv3HomeView'` 입니다.
     지어낸 이름은 조용히 «아무 데도 안 걸리는 CSS» 가 됩니다 — 화면은 그대로인데
     «했다» 고 믿게 되니 제일 나쁜 종류의 실수입니다.

   ■ 켜는 법 — `.cv3home`(가정용 화면, `#cv3HomeView`) 에 `is-neu` 를 붙입니다(가정용 설정에서 켭니다).
     이 파일은 **그 클래스 안에서만** 적용됩니다. 요양원 화면은 못 건드립니다.
   ══════════════════════════════════════════════════════════════════════ */

.cv3home.is-neu {
  /*  바탕을 카드와 **같은 색**으로 둡니다 — 이게 뉴모피즘의 전제입니다. */
  --neu-bg: #EDEEEC;
  --neu-hi: #FFFFFF;                 /* 밝은 쪽 그림자 */
  --neu-lo: #C9CBC7;                 /* 어두운 쪽 그림자 */
  /*  ⚠ 이 선이 **접근성의 마지노선**입니다. 바탕 대비 3.02:1 — 지우지 마십시오. */
  --neu-edge: #888988;
  --neu-edge-soft: rgba(136,137,136,.45);
  background: var(--neu-bg);
}

/* ── 카드 — 떠오른 결 ─────────────────────────────────────────────── */
.cv3home.is-neu .cv3home-card {
  background: var(--neu-bg);
  border: 1px solid var(--neu-edge-soft);
  box-shadow: 6px 6px 14px var(--neu-lo), -6px -6px 14px var(--neu-hi);
  border-radius: 16px;
}
/*  ⚠ 「지금 값이 오는 중」 같은 **뜻이 있는 테두리는 그대로 둡니다.**
    결을 바꾸느라 상태 표시를 흐리면 안 됩니다. */
.cv3home.is-neu .cv3home-card.is-live { border-color: var(--hx-mint); }
.cv3home.is-neu .cv3home-card.is-none {
  background: transparent; box-shadow: none; border-style: solid;
}

/* ── 단추 — 누를 수 있다는 것이 **선으로** 보여야 합니다 ──────────── */
.cv3home.is-neu .cv3home-btn {
  background: var(--neu-bg);
  /*  ⚠ 여기서 선을 지우면 «단추가 어디 있는지» 를 못 봅니다. 뉴모피즘이 흔히 실패하는 자리입니다. */
  border: 1px solid var(--neu-edge);
  color: var(--hx-txt);
  box-shadow: 3px 3px 7px var(--neu-lo), -3px -3px 7px var(--neu-hi);
}
.cv3home.is-neu .cv3home-btn:hover {
  background: var(--neu-bg);
  box-shadow: 4px 4px 9px var(--neu-lo), -4px -4px 9px var(--neu-hi);
}
/*  눌린 상태 — 그림자를 **안쪽으로** 뒤집습니다. 뉴모피즘의 유일한 진짜 장점입니다. */
.cv3home.is-neu .cv3home-btn:active,
.cv3home.is-neu .cv3home-btn[aria-pressed="true"] {
  box-shadow: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
  border-color: var(--hx-deepstone);
}
/*  ⚠ 초점 표시는 **더 굵게** 둡니다. 부드러운 배경에서는 얇은 초점선이 사라집니다. */
.cv3home.is-neu .cv3home-btn:focus-visible {
  outline: 3px solid var(--hx-deepstone); outline-offset: 2px;
}

/* ── 입력칸 — 안쪽으로 패인 결 ────────────────────────────────────── */
.cv3home.is-neu input[type="text"],
.cv3home.is-neu input[type="number"],
.cv3home.is-neu input[type="password"],
.cv3home.is-neu textarea,
.cv3home.is-neu select {
  background: var(--neu-bg);
  border: 1px solid var(--neu-edge);
  border-radius: 10px;
  box-shadow: inset 3px 3px 6px var(--neu-lo), inset -3px -3px 6px var(--neu-hi);
}

/* ── 손대지 않는 것 ───────────────────────────────────────────────
   경보·위험을 나르는 색은 **결과 무관하게 그대로**입니다.
   아래는 «혹시라도 위 규칙이 덮지 않게» 못을 박아 두는 것입니다. */
.cv3home.is-neu .is-crit,
.cv3home.is-neu .is-warn,
.cv3home.is-neu .cv3home-alert,
.cv3home.is-neu .chip { box-shadow: none; }

/* ── 끄는 자리 ────────────────────────────────────────────────────
   ⚠ 다크 모드: 어두운 바탕에서 뉴모피즘은 **형태가 사라집니다.**
      «그래도 예쁘니까» 로 남겨 두면 밤에 아무것도 안 보입니다. */
@media (prefers-color-scheme: dark) {
  .cv3home.is-neu {
    --neu-bg: initial; background: initial;
  }
  .cv3home.is-neu .cv3home-card,
  .cv3home.is-neu .cv3home-btn,
  .cv3home.is-neu input, .cv3home.is-neu textarea,
  .cv3home.is-neu select { box-shadow: none; background: var(--hx-fill); }
}
:root[data-theme="dark"] .cv3home.is-neu .cv3home-card,
:root[data-theme="dark"] .cv3home.is-neu .cv3home-btn,
:root[data-theme="dark"] .cv3home.is-neu input,
:root[data-theme="dark"] .cv3home.is-neu textarea,
:root[data-theme="dark"] .cv3home.is-neu select {
  box-shadow: none; background: var(--hx-fill);
}
/*  대비를 더 원하시는 분 — 부드러움보다 보이는 것이 먼저입니다. */
@media (prefers-contrast: more) {
  .cv3home.is-neu .cv3home-card,
  .cv3home.is-neu .cv3home-btn { box-shadow: none; border-color: var(--hx-txt); }
}
@media (prefers-reduced-motion: reduce) {
  .cv3home.is-neu .cv3home-btn { transition: none; }
}

/* ══ 빈 생체카드 틀 (2026-09-10 · 「기본화면을 생체카드 화면으로」) ══════════
   ⚠ 이건 **결(뉴모피즘)과 무관하게** 늘 적용됩니다 — 그래서 `.is-neu` 밖에 둡니다.
      값이 없다는 것이 한눈에 보여야 합니다. 진짜 카드처럼 보이면 «값이 0이구나» 로
      읽힙니다 — 그건 지어낸 값을 보이는 것과 같습니다. */
.cv3home-sig.is-blank {
  opacity: .72;
  border-style: solid;
  /*  ⚠ 처음엔 네 항목이 **한 줄씩** 차지해 카드가 화면을 다 먹었습니다(실측).
      진짜 카드는 «한 카드에 한 지표» 구조라 그대로 쓰면 이렇게 됩니다.
      빈 틀은 «무엇이 어디 나오는지» 만 보이면 되므로 **네 칸을 한 줄**로 눕힙니다. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 10px;
  align-items: end;
}
/*  머리글(생체카드 · 안내문)은 네 칸을 가로질러 한 줄로. */
.cv3home-sig.is-blank > .cv3home-sig-h:first-child,
.cv3home-sig.is-blank > .cv3home-sig-p { grid-column: 1 / -1; }
.cv3home-sig.is-blank .cv3home-sig-h { margin: 0; }
.cv3home-sig.is-blank .cv3home-sig-k { font-size: 11px; color: var(--hx-mut); font-weight: 700; }
.cv3home-sig.is-blank .cv3home-sig-v { margin: 0; }
.cv3home-sig.is-blank .cv3home-sig-v b {
  color: var(--hx-mut); font-weight: 700; font-size: 18px; letter-spacing: .04em;
}

/* ══ POBC 게이지 — 값이 없을 때 (2026-09-10 · 대표님이 그림으로 짚어 주심) ═══
   🔴 코드 주석에는 「값이 없으면 **바늘을 안 그립니다**」라고 적혀 있었는데,
      실제로는 **흐리게만** 하고 있었습니다(`is-empty { opacity:.5 }`).
      그래서 화면에는 가운데를 가리키는 **바늘**과 큰 **「0 점수」**가 그대로
      보였습니다 — 주석이 경고한 바로 그 «0점 = 정상» 오독입니다.
      주석과 코드가 어긋나면, 다음 사람은 코드가 아니라 주석을 믿습니다.
   ⚠ 이 규칙은 **결(뉴모피즘)과 무관하게** 늘 적용됩니다 — `.is-neu` 밖에 둡니다.
   ⚠ 눈금은 남깁니다. 「무엇이 채워질 자리인가」가 보여야 「쌓는 중」이 뜻을 갖습니다. */
.cv3home-gauge2.is-empty .cv-tick-needle,
.cv3home-gauge2.is-empty .cv-tick-score,
.cv3home-gauge2.is-empty .cv-tick-unit { display: none !important; }

/*  ⚠ 점선을 쓰지 않습니다 (2026-09-12 · 대표님). 이 파일에서도 2곳을 실선으로
    바꿨습니다 — `care-home.css` 만 고치고 «다 고쳤다» 고 할 뻔했습니다.
    화면에서 실제로 그려진 테두리를 재 보니 **이 파일의 `.is-blank`** 하나가
    남아 있었습니다. **파일이 둘이면 둘 다 봅니다.**
    되돌리실 곳은 `care-home-neu.css.bak-점선전` 에 있습니다. */