/* ============================================================================
 *  케어뷰.3DX_v1.0 — 「가정용」
 *
 *  2026-09-03 대표님:
 *    「3DX_v1.0에 가정용 케어뷰 2.0을 직접 빌드를 해주세요.」
 *    「아니면 3DX_v1.0 스타일에 맞춰서 다시 디자인해서 빌드하는건 어떤가요?」
 *    「케어뷰 3DX_v1.0 디자인 스타일로 동일하게 변경해서 빌드해 주세요.」
 *
 *  ■ 제 눈으로 «비슷하게» 만들지 않았습니다 — 본체 값을 **재서** 맞췄습니다
 *     첫 판은 글자를 13~22px 로 크게 그렸는데, 3DX 본체를 세어 보니
 *     실제로 가장 많이 쓰는 크기는 **10.5px(49회) · 11.5px(44회) · 11px(40회) ·
 *     12px(23회)** 였습니다. 훨씬 촘촘한 화면입니다. 그래서 다시 맞췄습니다.
 *
 *     본체에서 그대로 가져온 규격:
 *       `.cv3-panel`  border 1px var(--hx-line) · radius **12px** · padding 11px 12px
 *                     · background var(--hx-fill)
 *       `.cv3-panel .ph`  제목 **12.5px/800** · 곁말 10.5px/600 var(--hx-mut)
 *       `.cv3-kpi`    radius **11px** · padding **9px 11px**
 *       `.cv3-kpi .v` 숫자 **24px/800 · letter-spacing -.6px · line-height 1.25**
 *       `.cv3-kpi .k` 라벨 **10.5px** var(--hx-mut)
 *       `.cv3-kpi .s` 곁말 **10px**
 *       `.cv3-nav-btn` 단추 **30×26 · radius 7px**
 *       칸 사이 gap **8px** · 아래 여백 **10px**
 *
 *  ■ 색은 제가 만들지 않습니다
 *     `--hx-*` 토큰만 씁니다. 3DX v1.0 은 **밝은 화면**입니다
 *     (`--hx-bg #EDEEEC` · 글자 `--hx-txt`).
 *     어제 「연결」 창을 얹을 때 이걸 놓쳐 글자가 안 보였습니다(실측 2026-09-02).
 *
 *  ■ 이름표는 전부 `cv3home-`
 *     케어뷰 2.0 과 겹치는 10개(`.warn` `.crit` `.live` `.open` …)를 피합니다.
 * ========================================================================== */

/*  ⚠ 열기 전에는 그리지 않습니다. **CSS 로** 감춥니다 — 자바스크립트로 감추면
    첫 그리기에 한 번 번쩍입니다(어제 세 번 겪었습니다). */
#cv3HomeView[hidden] { display: none !important; }

/*  ⚠ **레일(52px)을 덮지 않습니다** (2026-09-03 대표님 「레일 패널 3DX와
    동일하게 빌드해주세요」).
    앞서 `inset: 0` 으로 두었더니 `.cv3-body` 전체를 덮어 **레일까지 가렸습니다**
    (실측: 레일 자리에서 `elementFromPoint` 가 `cv3home-hd` 를 돌려줬습니다).
    레일은 3DX 의 «다른 화면으로 갈 길» 입니다 — 가리면 안 됩니다.
    그래서 왼쪽 52px 을 비우고 그 오른쪽부터 우리 칸입니다. */
.cv3home {
  position: absolute; top: 0; right: 0; bottom: 0; left: 52px; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--hx-bg); color: var(--hx-txt);
  overflow: hidden;
}

/* ── 머리 — 본체 `.cv3-bar` 와 같은 규격 (padding 7px 12px · gap 6px) ──── */
.cv3home-hd {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-bottom: 1px solid var(--hx-line);
  background: var(--hx-fill); color: var(--hx-txt);
}
.cv3home-hd h2 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.cv3home-sub { font-size: 11px; font-weight: 600; color: var(--hx-mut); margin-left: 2px; }
.cv3home-sp { margin-left: auto; }

/*  단추 — 본체 `.cv3-nav-btn`(30×26 · radius 7px) 을 글자용으로 늘린 것 */
.cv3home-btn {
  height: 26px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--hx-line); background: transparent; color: var(--hx-txt2);
  font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.cv3home-btn:hover { background: var(--hx-fill2); color: var(--hx-txt); }
.cv3home-btn.is-key { border-color: var(--hx-deepstone); color: var(--hx-deepstone); }
.cv3home-btn:focus-visible { outline: 2px solid var(--hx-deepstone); outline-offset: 1px; }

/* ── 몸 ───────────────────────────────────────────────────────────────── */
/*  ⚠ 아주 넓은 화면(대표님 2000px)에서 안내 문장이 한 줄로 끝없이 늘어나면
    눈이 줄을 따라가기 어렵습니다. 읽는 폭을 제한합니다. */
.cv3home-bd {
  flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 14px;
}
.cv3home-in-w { max-width: 1280px; }

/* ── 요약 — 본체 `.cv3-kpis` / `.cv3-kpi` 그대로 ───────────────────────── */
/*  ⚠ `auto-fit` + `1fr` 은 넓은 화면에서 칸을 **끝없이 늘립니다** — 1400px 에서
    네 칸이 각각 340px 이 되어 숫자 하나에 손바닥만 한 칸이 생겼습니다.
    최대 폭을 정해 그 이상은 안 늘어나게 합니다(2026-09-03 「지금 뒤 섞여 있어요」). */
.cv3home-sum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 200px));
  gap: 8px; margin: 2px 0 10px; justify-content: start;
}
.cv3home-stat {
  border: 1px solid var(--hx-line); border-radius: 10px; padding: 9px 11px;
  background: var(--hx-fill);
}
.cv3home-stat b {
  display: block; font-size: 28px; font-weight: 800;
  letter-spacing: -.6px; line-height: 1.25; color: var(--hx-txt);
  font-variant-numeric: tabular-nums;
}
.cv3home-stat span { display: block; font-size: 11px; color: var(--hx-mut); }
.cv3home-stat.is-none b { color: var(--hx-mut2); }
.cv3home-stat.is-live b { color: var(--hx-mint-deep); }

/* ── 이름 카드 — 본체 `.cv3-panel` 규격 ───────────────────────────────── */
/*  `auto-fill` 이라 빈 칸이 생겨도 카드가 안 늘어납니다 — 이름이 하나여도
    카드 하나가 화면을 가로지르지 않습니다. */
.cv3home-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 300px));
  justify-content: start;
}
.cv3home-card {
  border: 1px solid var(--hx-line); border-radius: 14px; padding: 11px 12px;
  background: var(--hx-fill); position: relative;
}
/*  ⚠ 값이 오는 카드만 테두리가 살아납니다. **색만으로 말하지 않습니다** —
    아래 배지에 글자가 함께 붙습니다. */
.cv3home-card.is-live { border-color: var(--hx-mint); }
.cv3home-card.is-none { background: transparent; }

.cv3home-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cv3home-av {
  width: 20px; height: 20px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--hx-eggshell); color: var(--hx-moss);
}
.cv3home-card.is-live .cv3home-av { background: var(--hx-mint-bg); color: var(--hx-mint-deep); }
.cv3home-nm { font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home-badge {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px;
  white-space: nowrap; background: #E3E2DD; color: var(--hx-txt2);
}
.cv3home-badge.is-live { background: var(--hx-mint-bg); color: var(--hx-mint-deep); }
.cv3home-badge.is-agg  { background: var(--hx-champagne); color: var(--hx-flame); }

/*  값 — 본체 `.cv3-kpi .v` 와 같은 24px/800/-.6px */
.cv3home-vals { display: flex; gap: 12px; align-items: baseline; margin: 4px 0 2px; }
.cv3home-v { display: flex; align-items: baseline; gap: 6px; }
.cv3home-v b {
  font-size: 28px; font-weight: 800; letter-spacing: -.6px; line-height: 1.25;
  color: var(--hx-txt); font-variant-numeric: tabular-nums;
}
.cv3home-v em {
  font-style: normal; font-size: 12px; font-weight: 700; margin-left: 2px;
  color: var(--hx-mut);
}
.cv3home-v.is-none b { color: var(--hx-mut2); }

.cv3home-src {
  margin: 2px 0 0; font-size: 11px; color: var(--hx-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3home-act {
  margin-top: 6px; height: 24px; padding: 0 9px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700;
  border: 1px solid var(--hx-line); background: transparent; color: var(--hx-mut);
}
.cv3home-act:hover { border-style: solid; color: var(--hx-txt); }

/* ── 빈 화면 ──────────────────────────────────────────────────────────── */
.cv3home-empty {
  border: 1px solid var(--hx-line); border-radius: 14px;
  padding: 20px 14px; text-align: center; color: var(--hx-mut);
  font-size: 12px; line-height: 1.75;
}
.cv3home-empty b { display: block; color: var(--hx-txt); font-size: 12px; margin-bottom: 4px; }

.cv3home-note { margin: 10px 0 0; font-size: 11px; color: var(--hx-mut); line-height: 1.7; }

/* ── 이름 만들기 · 가져오기 ───────────────────────────────────────────── */
.cv3home-add {
  margin-top: 10px; border: 1px solid var(--hx-line); border-radius: 14px;
  padding: 11px 12px; background: var(--hx-fill);
}
.cv3home-add-l { display: block; font-size: 12px; font-weight: 800;
  color: var(--hx-txt); margin-bottom: 6px; }
.cv3home-add-r { display: flex; gap: 6px; align-items: stretch; }
.cv3home-in {
  flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 9px;
  border: 1px solid var(--hx-line); border-radius: 10px;
  background: var(--hx-bg2); color: var(--hx-txt);
  font: inherit; font-size: 12px;
}
.cv3home-in:focus { outline: none; border-color: var(--hx-deepstone); }
.cv3home-add-h { display: block; margin-top: 6px; font-size: 11px;
  color: var(--hx-mut); line-height: 1.6; }

.cv3home-import {
  margin-top: 8px; border: 1px solid var(--hx-line); border-radius: 14px;
  padding: 11px 12px;
}
.cv3home-imp-t { margin: 0 0 2px; font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home-imp-s { margin: 0 0 8px; font-size: 11px; color: var(--hx-mut); line-height: 1.6; }
.cv3home-imp-s em { font-style: normal; font-size: 11px; color: var(--hx-mut2); }
.cv3home-import small { display: block; margin-top: 6px; font-size: 11px;
  color: var(--hx-mut); line-height: 1.6; }

/*  알림 한 줄 — 브라우저 `alert` 을 쓰지 않습니다(맨 위에 주소가 찍혀
    브라우저가 말하는 것처럼 보입니다 · 어제 대표님이 잡아 주신 것). */
.cv3home-say {
  margin: 0 0 8px; padding: 7px 10px; border-radius: 10px;
  background: var(--hx-mint-bg); color: var(--hx-mint-deep);
  font-size: 11px; font-weight: 800; line-height: 1.5;
}
.cv3home-say[hidden] { display: none !important; }

@media (max-width: 560px) {
  .cv3home-grid { grid-template-columns: 1fr; }
  .cv3home-bd { padding: 10px; }
}

/* ── 기능 칩 — 재실 · 낙상 · 움직임 · 거리 · 자세 ──────────────────────
   2026-09-03 대표님 「기능도 가져와서 붙여주세요.」
   ⚠ 규격을 제가 짓지 않았습니다. 본체 `.cv3-bed .chip` 을 그대로 씁니다:
      10px / 800 · line-height 1.6 · padding 0 6px · radius 999px
      색도 본체 값: c-crit #AD5024/#fff · c-warn var(--hx-saffron)/var(--hx-jet)
                    c-na #E3E2DD/var(--hx-txt2)
   ⚠ 색만으로 말하지 않습니다 — 칩 안에 늘 글자가 있습니다
      (「낙상 못 잼」·「움직임 24 · 생체신호 어려움」). */
.cv3home-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.cv3home-chip {
  display: inline-block; font-size: 11px; font-weight: 800; line-height: 1.6;
  padding: 0 6px; border-radius: 999px; white-space: nowrap;
  background: var(--hx-fill2); color: var(--hx-mut);
}
.cv3home-chip.is-ok   { background: var(--hx-mint-bg); color: var(--hx-mint-deep); }
.cv3home-chip.is-warn { background: var(--hx-saffron); color: var(--hx-jet); }
.cv3home-chip.is-crit { background: #AD5024; color: #fff; }
.cv3home-chip.is-na   { background: #E3E2DD; color: var(--hx-txt2); }
.cv3home-chip.is-off  { background: transparent; color: var(--hx-mut2);
  border: 1px solid var(--hx-line); }

/*  왜 못 재는지 — 「낙상 못 잼」 옆에 이유를 답니다.
    이유 없이 「못 잼」만 있으면 고장으로 읽힙니다. */
.cv3home-why {
  margin: 4px 0 0; font-size: 11px; line-height: 1.55; color: var(--hx-mut);
}


/* ══ 생체신호 카드 — 케어뷰 2.0 구조 · 3DX 색 ═══════════════════════════
 *  2026-09-03 대표님: 「첨부 스타일 카드를 3DX_v1.0 색깔톤에 맞춰서
 *  올려주세요.」 (첨부: 재실·움직임·호흡·심박·수면·스트레스 카드 / POBC 게이지)
 *
 *  ■ 구조는 2.0, 색은 3DX
 *     2.0 카드의 뼈대를 그대로 씁니다 —
 *       ① 아이콘 배지(둥근 사각) ② 제목 ③ 오른쪽 상태 알약
 *       ④ 큰 값 + 단위 ⑤ 곁말 줄 ⑥ 추세선 ⑦ 바닥 **최소·평균·최대** 3칸
 *     색만 3DX 의 `--hx-*` 로 바꿉니다. 2.0 은 어두운 화면(#121212)이라
 *     그대로 가져오면 밝은 3DX 안에서 «검은 상자» 가 됩니다.
 *
 *  ■ 지표마다 다른 색 (3DX 팔레트 안에서)
 *     호흡 moonstone #7AA6B3 · 심박 claret #7C1F31 · 움직임 flame #D3622C
 *     재실 mint #69A481 · 낙상 claret · 거리/높이 deepstone #35596B
 *     ⚠ 색만으로 말하지 않습니다 — 알약과 곁말에 늘 글자가 함께 있습니다.
 * ═══════════════════════════════════════════════════════════════════════ */
.cv3home-sec { margin-top: 12px; }
.cv3home-sec-t {
  margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--hx-txt);
}
.cv3home-sec-t span { margin-left: 7px; font-weight: 600; font-size: 11px; color: var(--hx-mut); }

/*  카드 배치 — **줄이 비지 않게** (2026-09-03 「디자인이 너무 성의가 없어요」)
 *  ⚠ 열 수를 4로 못 박았더니 카드가 1~2장인 묶음(휴식·분석)에서 **줄의 2/3 가
 *     빈 채로** 남았습니다. 화면이 «만들다 만 것» 으로 보입니다.
 *  ⚠ `auto-fit` + `1fr` 이면 남는 자리를 카드가 **나눠 갖습니다** — 1장이면
 *     한 줄을 채우고, 3장이면 3등분입니다. 줄이 비지 않습니다.
 *  ⚠ 대신 `minmax` 의 **아래쪽**을 260px 로 잡아 한 줄에 5장 이상 안 들어가게
 *     합니다(대표님이 「3~4개」라 하셨습니다. 880px 본문 = 3열).
 *  ⚠ 카드 높이는 **줄 안에서 맞춥니다**(`align-items: stretch` 는 기본).
 *     안쪽을 `flex` 로 두어 바닥 줄(최소·평균·최대)이 **아래에 붙습니다** —
 *     그래야 옆 카드와 바닥선이 맞습니다.
 */
.cv3home-sigs {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (max-width: 700px) { .cv3home-sigs { grid-template-columns: 1fr; } }

.cv3home-sig {
  --c: var(--hx-mut);
  --c-bg: var(--hx-fill2);
  border: 1px solid var(--hx-line); border-radius: 14px;
  padding: 13px 14px 12px; background: var(--hx-fill);
  display: flex; flex-direction: column; min-height: 148px;
  transition: border-color .15s, box-shadow .15s;
}
/*  ⚠ 바닥 줄(최소·평균·최대)을 **아래에 붙입니다.** 안 붙이면 카드마다
    높이가 달라 바닥선이 들쭉날쭉합니다 — 첨부에서 그렇게 보였습니다. */
.cv3home-sig .cv3home-foot { margin-top: auto; }
.cv3home-sig .cv3home-more { margin-top: 7px; }
.cv3home-sig.is-br   { --c: var(--hx-lake);      --c-bg: #E3EAF6; }   /* 2026-09-04 팔레트: Lake Blue (Moonstone 은 2.3:1) */
.cv3home-sig.is-hr   { --c: var(--hx-claret);    --c-bg: #F5E7EA; }
.cv3home-sig.is-mv   { --c: var(--hx-flame);     --c-bg: #FBEADF; }
.cv3home-sig.is-pres { --c: var(--hx-moss);      --c-bg: var(--hx-mint-bg); }   /* Moss 선 · Mint 면 */
.cv3home-sig.is-fall { --c: var(--hx-claret);    --c-bg: #F5E7EA; }
.cv3home-sig.is-dist { --c: var(--hx-royal);     --c-bg: var(--hx-powder); }   /* Royal Blue · Powder */

/* ── 머리: 배지 · 제목 · 알약 ─────────────────────────────────────────── */
.cv3home-sig-h { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.cv3home-ico {
  width: 26px; height: 26px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: var(--c-bg); color: var(--c);
}
.cv3home-sig-k { margin: 0; font-size: 12px; font-weight: 750; color: var(--hx-txt); }
.cv3home-sig-p {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: #E3E2DD; color: var(--hx-txt2); white-space: nowrap;
}
.cv3home-sig-p i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cv3home-sig-p.is-ok   { background: var(--hx-mint-bg);   color: var(--hx-mint-deep); }
.cv3home-sig-p.is-warn { background: var(--hx-champagne); color: var(--hx-flame); }
.cv3home-sig-p.is-crit { background: #F3DDE1;             color: var(--hx-claret); }

/* ── 값 ───────────────────────────────────────────────────────────────── */
.cv3home-sig-v { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.cv3home-sig-v b {
  font-size: 28px; font-weight: 850; letter-spacing: -.8px; line-height: 1;
  color: var(--hx-txt); font-variant-numeric: tabular-nums;
}
.cv3home-sig-v small { font-size: 12px; font-weight: 700; color: var(--hx-mut); }
.cv3home-sig.is-none .cv3home-sig-v b { color: var(--hx-mut2); }
.cv3home-sig-s {
  margin: 5px 0 0; font-size: 11px; font-weight: 650; color: var(--hx-mut);
  line-height: 1.5;
}

/* ── 추세선 ───────────────────────────────────────────────────────────── */
.cv3home-spark {
  display: block; width: 100%; height: 34px; margin-top: 8px;
  color: var(--c); overflow: visible;
}
.cv3home-sig-nospark {
  margin: 8px 0 0; padding: 9px 0; font-size: 11px; color: var(--hx-mut2);
  line-height: 1.5; border-top: 1px solid var(--hx-line2);
}

/* ── 바닥 3칸: 최소 · 평균 · 최대 (2.0 의 `.br-foot-col`) ──────────────── */
.cv3home-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hx-line2);
}
/*  2026-09-04 재실·위치를 합치며 칸 수가 2~4 로 달라졌습니다.
    ⚠ 3칸 격자에 4개를 넣으면 넷째가 **혼자 다음 줄**로 내려가 카드가 삐뚤어집니다. */
.cv3home-foot.n2 { grid-template-columns: repeat(2, 1fr); }
.cv3home-foot.n4 { grid-template-columns: repeat(4, 1fr); }
.cv3home-foot.n4 b { font-size: 12px; }
.cv3home-foot.n4 span { font-size: 11px; }
.cv3home-foot div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cv3home-foot b {
  font-size: 12px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums;
}
.cv3home-foot span { font-size: 11px; color: var(--hx-mut2); }

/* ── 움직임 막대 (첨부의 계단 막대) ───────────────────────────────────── */
.cv3home-bars { display: flex; align-items: flex-end; gap: 6px; height: 34px; margin-top: 8px; }
.cv3home-bars i {
  flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0;
  background: var(--hx-line); display: block;
}
.cv3home-bars i.on { background: var(--c); }

/* ── 재실 링 (첨부의 원형 표시) ───────────────────────────────────────── */
.cv3home-ring {
  width: 58px; height: 58px; border-radius: 50%; margin: 4px auto 2px;
  display: grid; place-items: center;
  border: 3px solid var(--hx-line);
}
.cv3home-ring.on { border-color: var(--c); background: var(--c-bg); }
.cv3home-ring i { width: 12px; height: 12px; border-radius: 50%; background: var(--hx-line); }
.cv3home-ring.on i { background: var(--c); }

/* ── 반원 게이지 · «쌓는 중» 막대 ─────────────────────────────────────
   2026-09-03 대표님이 ①을 고르셨습니다:
   「껍데기를 만들고 「기록 3일 / 7일」처럼 채워지는 과정을 보여준다」
   ⚠ 값이 없을 때 **바늘을 안 그립니다.** 가운데를 가리키는 바늘은 «0점»
      으로 읽혀 «정상» 이라는 뜻이 됩니다 — 그게 어제 걷어낸 거짓입니다. */
.cv3home-gauge {
  display: block; width: 112px; height: 62px; margin: 2px auto 0;
  color: var(--c);
}
.cv3home-prog {
  height: 5px; border-radius: 999px; background: var(--hx-line);
  overflow: hidden; margin-top: 9px;
}
.cv3home-prog i { display: block; height: 100%; background: var(--c); transition: width .3s; }

/* ── 카드 클릭 → 세부 추세 팝업 (2026-09-03) ──────────────────────────
   대표님: 「케어뷰 2.0에서 있던 카드 클릭 세부 추세 팝업 기능도 추가해 주세요.」
   ⚠ 누를 수 있는 카드는 `<button>` 입니다. 브라우저 기본 옷을 벗겨
      옆의 `<div>` 카드와 똑같아 보이게 맞춥니다. */
button.cv3home-sig {
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.cv3home-sig.is-tap:hover { border-color: var(--c); }
.cv3home-sig.is-tap:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.cv3home-more {
  display: block; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--c);
}

.cv3pop {
  position: fixed; inset: 0; z-index: 9700; display: none;
  background: rgba(20,22,22,.42); padding: 6vh 16px; overflow-y: auto;
}
.cv3pop.is-open { display: block; }
.cv3pop-in {
  --c: var(--hx-deepstone);
  max-width: 620px; margin: 0 auto; background: var(--hx-fill);
  border: 1px solid var(--hx-line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(40,43,43,.22); overflow: hidden;
}
.cv3pop-in.is-br { --c: var(--hx-moonstone); }
.cv3pop-in.is-hr { --c: var(--hx-claret); }
.cv3pop-in.is-mv { --c: var(--hx-flame); }

.cv3pop-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--hx-line);
}
.cv3pop-h b { font-size: 13px; font-weight: 800; color: var(--hx-txt); }
.cv3pop-h span { font-size: 11px; color: var(--hx-mut); }
.cv3pop-x {
  margin-left: auto; width: 26px; height: 26px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--hx-line); background: transparent; color: var(--hx-txt2);
  font: inherit; font-size: 12px;
}
.cv3pop-x:hover { background: var(--hx-fill2); }

.cv3pop-tabs { display: flex; gap: 6px; padding: 9px 14px 0; }
.cv3pop-tab {
  height: 26px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--hx-mut);
  font: inherit; font-size: 12px; font-weight: 700;
}
.cv3pop-tab:hover { background: var(--hx-fill2); }
.cv3pop-tab.is-on { border-color: var(--c); color: var(--c); background: var(--hx-fill2); }

.cv3pop-b { padding: 12px 14px 4px; color: var(--c); }
.cv3pop-chart { display: block; width: 100%; height: 150px; }
.cv3pop-foot {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hx-line2);
}
.cv3pop-foot div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cv3pop-foot b { font-size: 13px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums; }
.cv3pop-foot span { font-size: 11px; color: var(--hx-mut2); }

/*  ⚠ 기록이 모자라면 **빈 그래프를 그리지 않습니다.** 얼마나 모였는지 적습니다. */
.cv3pop-empty {
  border: 1px solid var(--hx-line); border-radius: 14px; padding: 18px 14px;
  text-align: center; color: var(--hx-mut); font-size: 12px; line-height: 1.7;
}
.cv3pop-empty b { display: block; color: var(--hx-txt); font-size: 12px; margin-bottom: 4px; }
.cv3pop-note {
  margin: 0; padding: 10px 14px 13px; font-size: 11px;
  color: var(--hx-mut); line-height: 1.6;
}

/* ── 히어로 (방 사진 + 상태) · 카드 꼬리말 (2026-09-03 「다 해주세요」) ──
   첨부의 «방 사진 위에 상태 칩» 자리입니다.
   ⚠ 사진이 없으면 3DX 의 은은한 바탕으로 둡니다 — 검은 상자를 만들지 않습니다.
   ⚠ 사진 위 글자는 어떤 사진이 와도 읽혀야 하므로 **그늘막**을 깝니다. */
.cv3home-hero {
  position: relative; overflow: hidden; margin-bottom: 10px;
  border: 1px solid var(--hx-line); border-radius: 14px;
  background: linear-gradient(135deg, var(--hx-eggshell), var(--hx-fill));
  min-height: 132px;
}
.cv3home-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cv3home-hero.has-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,22,22,.72), rgba(20,22,22,.28) 62%, transparent);
}
.cv3home-hero-in { position: relative; z-index: 1; padding: 14px 16px; }
.cv3home-hero-k { margin: 0; font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home-hero-t {
  margin: 3px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.4px;
  color: var(--hx-txt);
}
.cv3home-hero.has-img .cv3home-hero-k { color: rgba(255,255,255,.78); }
.cv3home-hero.has-img .cv3home-hero-t { color: #fff; }
.cv3home-hero.has-img .cv3home-hero-s { color: rgba(255,255,255,.72); }
.cv3home-hero.has-img .cv3home-btn {
  border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.12);
}
.cv3home-hero .cv3home-chips { margin-top: 8px; }
.cv3home-hero-act { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cv3home-hero-act label { cursor: pointer; }
.cv3home-hero-s { margin: 8px 0 0; font-size: 11px; color: var(--hx-mut); }

/*  카드 꼬리말 — 「수면 단계는 재지 않습니다」 같은 한계 표시.
    ⚠ 한계를 작게라도 **반드시** 적습니다. 안 적으면 재는 줄 아십니다. */
.cv3home-note-s {
  margin: 7px 0 0; padding-top: 6px; border-top: 1px solid var(--hx-line2);
  font-size: 11px; color: var(--hx-mut2); line-height: 1.5;
}

/* ══ 좌측 패널 · 본문 · 우측 패널 — 3DX 격자 그대로 ═══════════════════
 *  2026-09-03 대표님: 「좌측 레일+패널/우측 패널도 3DX_v1.0 같이 적용해주세요.」
 *  본체 `.cv3-body` 는 `52px | 208px | 6px | 1fr | 6px | 286px` 입니다.
 *  ⚠ 레일(52px)은 **본체 것을 그대로 씁니다** — 우리 칸이 레일 오른쪽에서
 *     시작하므로 아이콘이 두 줄로 겹치지 않습니다.
 * ═══════════════════════════════════════════════════════════════════ */
/*  ⚠ 좌·우 폭은 **3DX 와 같은 변수**를 씁니다(`--cv-lw` / `--cv-rw`).
    대표님이 3DX 에서 경계를 끌어 바꾸시면 가정용도 **같이** 움직입니다.
    여기에 208·286 을 박아 두면 두 화면의 칸이 어긋납니다. */
/*  ⚠ 손잡이 두 칸(6px)이 들어갑니다 — 본체 `.cv3-body` 와 같은 짜임입니다
    (`52px | lw | 6px | 1fr | 6px | rw`). 레일은 본체 것을 쓰므로 여기선 뺍니다. */
.cv3home-grid3 {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: var(--cv-lw, 208px) 6px 1fr 6px var(--cv-rw, 286px);
}

/*  경계 손잡이 — 본체 `.cv3-split` 와 같은 폭·같은 조작.
    ⚠ 닿는 자리를 **양옆 5px 씩 넓힙니다**(`::before`). 6px 만으로는
       마우스로 집기 어렵습니다 — 본체도 같은 방법을 씁니다. */
.cv3home-split {
  position: relative; cursor: col-resize; background: var(--hx-line);
  touch-action: none;
}
.cv3home-split::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px;
}
/*  가운데 손잡이 자국 — 끌 수 있다는 걸 보이게 합니다. */
.cv3home-split::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 2px; height: 26px; margin: -13px 0 0 -1px; border-radius: 2px;
  background: var(--hx-mut2);
}
.cv3home-split:hover { background: var(--hx-moonstone); }
.cv3home-split.on { background: var(--hx-moonstone); }
.cv3home-split.on::after { background: var(--hx-jet); }
.cv3home-split:focus-visible { outline: 2px solid var(--hx-jet); outline-offset: -1px; }
/*  끄는 동안 글자가 잡히면 파랗게 선택됩니다 — 본체도 같은 클래스를 씁니다. */
body.cv3-resizing { user-select: none; cursor: col-resize; }
/*  ⚠ **패널 색 = 머스터드 `#FFD95D`** (2026-09-03 대표님 첨부 지정).
    처음엔 3DX 본체의 파란 패널(`#637FB8 → #32497A`)을 그대로 가져왔는데,
    대표님이 머스터드를 지정하셨습니다.

    ⚠ **파랑 → 머스터드는 «색만» 바뀌는 일이 아닙니다.**
      파랑은 어두워서 글자를 흰색으로 뒀습니다. 머스터드는 **밝은 색**이라
      흰 글자를 그대로 두면 하나도 안 보입니다. 패널 안 글자·테두리·배지를
      **전부 어두운 쪽으로 되돌립니다**(아래).
      어제 「연결」 창에서 바탕만 바꾸고 글자를 안 바꿔 겪은 일입니다.

    빛의 방향은 본체 규칙 그대로 — 좌 **156°**, 우 **204°**.
    본체 주석: 「거울처럼 반대쪽에서 빛이 들어온다. 좌우가 같은 방향이면
    화면이 한쪽으로 기울어 보인다」 */
.cv3home-side, .cv3home-right {
  --p-ink: #2A2410;             /* 머스터드 위 글자 — 대비 11:1 넘습니다 */
  --p-ink2: #5A4E22;            /* 곁말 */
  --p-line: rgba(42,36,16,.24);
  --p-fill: rgba(255,255,255,.5);
  min-height: 0; overflow-y: auto; padding: 10px;
  overscroll-behavior: contain; color: var(--p-ink);
}
.cv3home-side {
  border-right: 1px solid var(--hx-line);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(156deg, #FFE79A 0%, #FFDF77 26%, #FFD95D 54%, #F2C63F 80%, #E0B12C 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(0,0,0,.10);
}
.cv3home-right {
  border-left: 1px solid var(--hx-line);
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(204deg, #FFE79A 0%, #FFDF77 26%, #FFD95D 54%, #F2C63F 80%, #E0B12C 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 1px 0 0 rgba(0,0,0,.10);
}

/* 이름 목록 */
.cv3home-side-l { display: flex; flex-direction: column; gap: 6px; }
.cv3home-side-i {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--hx-txt);
  font: inherit; text-align: left;
}
.cv3home-side-i:hover { background: var(--hx-fill2); }
.cv3home-side-i.is-on { border-color: var(--hx-deepstone); background: var(--hx-fill2); }
.cv3home-side-i b { font-size: 12px; font-weight: 800; }
.cv3home-side-i i {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: #E3E2DD; color: var(--hx-txt2); white-space: nowrap;
}
.cv3home-side-i.has-v i { background: var(--hx-mint-bg); color: var(--hx-mint-deep); }

/* 우측 — 요약 + 확인 필요 */
.cv3home-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cv3home-kpi {
  border: 1px solid var(--hx-line); border-radius: 10px; padding: 8px 10px;
}
.cv3home-kpi b {
  display: block; font-size: 20px; font-weight: 800; letter-spacing: -.5px;
  line-height: 1.2; color: var(--hx-txt); font-variant-numeric: tabular-nums;
}
.cv3home-kpi span { display: block; font-size: 11px; color: var(--hx-mut); }
.cv3home-kpi.is-live b { color: var(--hx-mint-deep); }
.cv3home-needs { display: flex; flex-direction: column; gap: 6px; }
.cv3home-need {
  border: 1px solid var(--hx-line); border-left: 3px solid var(--hx-mut2);
  border-radius: 10px; padding: 7px 9px;
}
.cv3home-need.is-warn { border-left-color: var(--hx-flame); }
.cv3home-need.is-crit { border-left-color: var(--hx-claret); background: #F9EFF1; }
.cv3home-need b { display: block; font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home-need span { display: block; margin-top: 1px; font-size: 11px; color: var(--hx-mut); line-height: 1.5; }
.cv3home-none {
  margin: 0; padding: 14px 10px; text-align: center; font-size: 11px;
  color: var(--hx-mut); line-height: 1.7;
  border: 1px solid var(--hx-line); border-radius: 10px;
}
.cv3home-none small { font-size: 11px; color: var(--hx-mut2); }

/* ── 카테고리 ─────────────────────────────────────────────────────── */
.cv3home-cats { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cv3home-cat { }
.cv3home-cat-t {
  margin: 0 0 7px; font-size: 12px; font-weight: 800; color: var(--hx-txt);
  display: flex; align-items: baseline; gap: 6px;
  padding-bottom: 5px; border-bottom: 1px solid var(--hx-line2);
}
.cv3home-cat-t span { font-size: 11px; font-weight: 600; color: var(--hx-mut); }

/* ── 팝업 추가 부품 ───────────────────────────────────────────────── */
.cv3pop-h .cv3home-ico { width: 22px; height: 22px; border-radius: 10px; font-size: 11px;
  background: var(--hx-fill2); color: var(--c); }
.cv3pop-now {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px 0;
}
.cv3pop-now-v { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.cv3pop-now-v b {
  font-size: 38px; font-weight: 850; letter-spacing: -1px; line-height: 1;
  color: var(--hx-txt); font-variant-numeric: tabular-nums;
}
.cv3pop-now-v small { font-size: 13px; font-weight: 700; color: var(--hx-mut); }
.cv3pop-now-s { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 3px; }
.cv3pop-vs {
  font-size: 11px; font-weight: 700; color: var(--hx-mut);
  padding: 2px 8px; border-radius: 999px; background: var(--hx-fill2);
}
.cv3pop-vs.is-off { background: var(--hx-champagne); color: var(--hx-flame); }
.cv3pop-vs.is-none { color: var(--hx-mut2); }

.cv3pop-tabs { padding: 10px 14px 0; }
.cv3pop-tab { flex-direction: column; align-items: flex-start; height: auto; padding: 5px 12px; gap: 0; display: flex; }
.cv3pop-tab b { font-size: 12px; font-weight: 800; }
.cv3pop-tab span { font-size: 11px; color: var(--hx-mut2); font-weight: 600; }
.cv3pop-tab.is-on span { color: var(--c); }

.cv3pop-band-l { margin: 5px 0 0; font-size: 11px; color: var(--hx-mut2); line-height: 1.5; }
.cv3pop-sec {
  margin: 14px 0 6px; font-size: 12px; font-weight: 800; color: var(--hx-txt);
  display: flex; align-items: baseline; gap: 6px;
}
.cv3pop-sec span { font-size: 11px; font-weight: 600; color: var(--hx-mut2); }
.cv3pop-hours { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.cv3pop-hb { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cv3pop-hb i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: currentColor; opacity: .55; }
.cv3pop-hb span { font-size: 11px; color: var(--hx-mut2); }
.cv3pop-rows { display: flex; flex-direction: column; gap: 6px; }
.cv3pop-row {
  display: flex; align-items: baseline; gap: 6px; padding: 5px 8px;
  border-radius: 10px; background: var(--hx-fill2); font-size: 11px;
}
.cv3pop-row span { color: var(--hx-mut); font-variant-numeric: tabular-nums; min-width: 44px; }
.cv3pop-row b { font-size: 13px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums; }
.cv3pop-row em { font-style: normal; font-size: 11px; color: var(--hx-mut2); }
.cv3pop-row i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--hx-mut2); }

/*  좁아지면 오른쪽부터 접습니다 — 손잡이도 함께 숨깁니다.
    ⚠ 손잡이만 남으면 «끌 수 있을 것 같은데 아무 일도 안 나는» 선이 됩니다. */
@media (max-width: 1100px) {
  .cv3home-grid3 { grid-template-columns: var(--cv-lw, 176px) 6px 1fr; }
  .cv3home-right, #cv3HomeSplitR { display: none; }
}
@media (max-width: 760px) {
  .cv3home-grid3 { grid-template-columns: 1fr; }
  .cv3home-side, #cv3HomeSplitL { display: none; }
}

/* ══ 맨 위 줄 — 왼쪽 케어 미디어 · 오른쪽 POBC ═══════════════════════
 *  2026-09-03 대표님: 「POBC 카드 제일 상단으로 좌측에는 첨부 카드 추가해 주세요.」
 * ═══════════════════════════════════════════════════════════════════ */
.cv3home-top {
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 8px; align-items: stretch;
}
.cv3home-top .cv3home-hero { margin-bottom: 0; min-height: 244px; }
.cv3home-top-r { display: flex; }
.cv3home-top-r .cv3home-sig { flex: 1 1 auto; }

/*  ⚠ 1180px 에서 한 줄로 접었더니, 960px 화면에서 POBC 카드가 **655px 폭에
    게이지 260px** 만 놓여 세로로 306px 이나 되는 빈 카드가 됐습니다(실측).
    본문이 좁아지는 것은 좌우 패널 때문이지 화면 폭 때문이 아닙니다.
    → 접는 기준을 **본문 실제 폭**으로 바꿉니다(container query).
      못 쓰는 브라우저를 위해 아주 좁을 때(760px)만 매체 질의로 접습니다. */
.cv3home-bd { container-type: inline-size; container-name: cvhome; }
/*  ── 좁을 때 POBC 를 위로 (2026-09-10 · 대표님 「좁을때도 POBC 위로 올려주세요」) ──
    한 줄로 접히면 원래 순서는 **히어로(사진·세 칸) → POBC** 였습니다.
    실측: 본문 568px 에서 POBC 카드 윗변이 `top 1056` — 화면 밖입니다.
    넓을 때는 POBC 가 오른쪽 위, 즉 **한눈에 보이는 자리**인데 좁아지는 순간
    스크롤해야 보이는 자리로 떨어졌습니다. 같은 카드가 폭에 따라 «제일 먼저»
    였다가 «제일 나중» 이 되는 것이라 앞뒤가 안 맞습니다.
    → 접히는 폭에서만 `order` 로 POBC 를 앞에 둡니다.
    ⚠ **넓은 화면은 그대로입니다** — 이 규칙은 접힌 상태 안에만 있습니다.
    ⚠ `order` 는 **보이는 차례만** 바꿉니다. 탭 순서(키보드)는 원문 차례를 따르므로
      화면과 어긋납니다. 여기 두 칸은 서로 독립된 정보 카드라 순서가 뜻을
      나르지 않아 괜찮습니다. 폼이었다면 쓰면 안 되는 기법입니다. */
@container cvhome (max-width: 620px) {
  .cv3home-top { grid-template-columns: minmax(0, 1fr); }
  .cv3home-top > .cv3home-top-r { order: -1; }
  .cv3home-top > .cv3home-hero { order: 0; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 760px) {
    .cv3home-top { grid-template-columns: minmax(0, 1fr); }
    .cv3home-top > .cv3home-top-r { order: -1; }
    .cv3home-top > .cv3home-hero { order: 0; }
  }
}

/*  한 줄로 접혔을 때 — 게이지가 가운데 덩그러니 놓이지 않게 **가로로** 폅니다.
    ⚠ 넓은 카드에 작은 그림 하나는 «만들다 만 것» 으로 보입니다. */
@container cvhome (max-width: 620px) {
  .cv3home-top-r .cv3home-sig { min-height: 0; }
  .cv3home-top-r .cv3home-sig > .cv3home-gauge2 {
    max-width: 220px; margin: 0;
  }
  .cv3home-top-r .cv3home-sig { display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: 'h h' 'g v' 'g s' 'g a' 'g b';
    align-items: center; column-gap: 12px; }
  .cv3home-top-r .cv3home-sig-h { grid-area: h; }
  .cv3home-top-r .cv3home-gauge2 { grid-area: g; }
  .cv3home-top-r .cv3home-sig-v { grid-area: v; justify-content: flex-start !important; }
  .cv3home-top-r .cv3home-sig-s { grid-area: s; margin-top: 0; }
  .cv3home-top-r .cv3home-prog,
  .cv3home-top-r .cv3home-note-s { grid-area: a; }
  /*  ⚠ 진행 라벨은 곁말과 같은 `.cv3home-sig-s` 입니다 — 같은 칸(s)에 두면
      겹쳐 찍힙니다(실측 2026-09-04). 제 칸(b)을 줍니다. */
  .cv3home-top-r .cv3home-prog-s { grid-area: b; margin-top: 2px; }
}

/* 히어로 안쪽 — 첨부 배치 */
.cv3home-hero-in { display: flex; flex-direction: column; height: 100%; }
.cv3home-hero-d { margin: 2px 0 0; font-size: 11px; color: var(--hx-mut); }
.cv3home-hero.has-img .cv3home-hero-d { color: rgba(255,255,255,.75); }

/*  세 칸 — 재실 · 낙상 · 스트레스 (첨부의 아래쪽 칸) */
.cv3home-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: auto; padding-top: 12px;
}
.cv3home-tile {
  border: 1px solid var(--hx-line); border-radius: 10px; padding: 8px 10px;
  background: var(--hx-fill); display: grid;
  grid-template-columns: 20px 1fr; grid-template-rows: auto auto auto; gap: 1px 7px;
}
.cv3home-hero.has-img .cv3home-tile {
  background: rgba(20,22,22,.55); border-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cv3home-tile-i { grid-row: 1 / span 2; font-size: 13px; line-height: 1; }
.cv3home-tile-k { font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home-tile-v { font-size: 15px; font-weight: 800; color: var(--hx-txt); line-height: 1.15; }
.cv3home-tile-s { grid-column: 1 / -1; font-size: 11px; color: var(--hx-mut2); }
.cv3home-hero.has-img .cv3home-tile-k { color: rgba(255,255,255,.7); }
.cv3home-hero.has-img .cv3home-tile-v { color: #fff; }
.cv3home-hero.has-img .cv3home-tile-s { color: rgba(255,255,255,.6); }
.cv3home-tile.is-ok   { border-left: 3px solid var(--hx-mint); }
.cv3home-tile.is-crit { border-left: 3px solid var(--hx-claret); }
.cv3home-tile.is-na   { opacity: .78; }

/*  「감지영역 보기」 — 첨부의 연두 단추 */
.cv3home-zone {
  height: 28px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hx-mint); background: var(--hx-mint-bg);
  color: var(--hx-mint-deep); font: inherit; font-size: 12px; font-weight: 800;
}
.cv3home-zone:disabled { opacity: .45; cursor: not-allowed; }
.cv3home-hero.has-img .cv3home-zone {
  background: rgba(105,164,129,.9); color: #fff; border-color: transparent;
}

/*  미디어 넘기기 줄 */
.cv3home-media { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.cv3home-mbtn {
  height: 24px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--hx-line); background: var(--hx-fill); color: var(--hx-txt2);
  font: inherit; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center;
}
.cv3home-mbtn:hover { color: var(--hx-txt); }
.cv3home-hero.has-img .cv3home-mbtn {
  background: rgba(20,22,22,.55); border-color: rgba(255,255,255,.22); color: #fff;
}
.cv3home-mno { font-size: 11px; font-weight: 700; color: var(--hx-mut);
  font-variant-numeric: tabular-nums; }
.cv3home-hero.has-img .cv3home-mno { color: rgba(255,255,255,.8); }

/*  감지영역 지도 */
.cv3home-zonemap { display: block; width: 100%; max-width: 260px; margin: 0 auto; }

/* ══ 머스터드 위 — 글자·부품을 **어두운 쪽**으로 ═══════════════════════
 *  ⚠ 파란 판에서는 이 자리가 전부 **흰색**이었습니다. 머스터드로 바꾸면서
 *     하나라도 흰색을 남기면 그 글자만 사라집니다. 패널 안에서 쓰는 것을
 *     빠뜨리지 않고 다시 잡습니다(어제 「연결」 창에서 겪은 그대로).
 *  ⚠ 제목 배지는 흰 반투명 — 머스터드 위에서 «올라온 칸» 으로 읽힙니다.
 * ═══════════════════════════════════════════════════════════════════ */
.cv3home-side .cv3home-side-t,
.cv3home-right .cv3home-side-t {
  color: var(--p-ink); background: rgba(255,255,255,.58);
  border-radius: 10px; padding: 4px 8px; margin-bottom: 7px;
}
.cv3home-side .cv3home-side-t span,
.cv3home-right .cv3home-side-t span {
  background: rgba(42,36,16,.14); color: var(--p-ink);
}

/* 이름 목록 */
.cv3home-side .cv3home-side-i { color: var(--p-ink); }
.cv3home-side .cv3home-side-i:hover { background: rgba(255,255,255,.45); }
.cv3home-side .cv3home-side-i.is-on {
  border-color: rgba(42,36,16,.4); background: rgba(255,255,255,.62);
}
.cv3home-side .cv3home-av { background: rgba(42,36,16,.14); color: var(--p-ink); }
.cv3home-side .cv3home-side-i i {
  background: rgba(255,255,255,.62); color: var(--p-ink2);
}
/*  값이 오는 사람은 초록 배지 — 머스터드 위에서도 또렷합니다. */
.cv3home-side .cv3home-side-i.has-v i { background: #2F6B4B; color: #fff; }

/* 이름 만들기 칸 */
.cv3home-side .cv3home-add {
  background: rgba(255,255,255,.5); border-color: var(--p-line);
}
.cv3home-side .cv3home-add-l { color: var(--p-ink); }
.cv3home-side .cv3home-in {
  background: #fff; border-color: var(--p-line); color: var(--p-ink);
}
.cv3home-side .cv3home-in:focus { border-color: #2A2410; }
.cv3home-side .cv3home-add-h { color: var(--p-ink2); }
.cv3home-side .cv3home-btn {
  border-color: var(--p-line); color: var(--p-ink); background: rgba(255,255,255,.55);
}
.cv3home-side .cv3home-btn:hover { background: #fff; }
.cv3home-side .cv3home-btn.is-key { border-color: #2A2410; }

/* 우측 요약 · 확인 필요 */
.cv3home-right .cv3home-kpi {
  border-color: var(--p-line); background: rgba(255,255,255,.5);
}
.cv3home-right .cv3home-kpi b { color: var(--p-ink); }
.cv3home-right .cv3home-kpi span { color: var(--p-ink2); }
.cv3home-right .cv3home-kpi.is-live b { color: #2F6B4B; }
.cv3home-right .cv3home-need {
  border-color: var(--p-line); background: rgba(255,255,255,.5);
  border-left-color: rgba(42,36,16,.45);
}
.cv3home-right .cv3home-need b { color: var(--p-ink); }
.cv3home-right .cv3home-need span { color: var(--p-ink2); }
/*  ⚠ 주의·위험은 **머스터드와 안 섞이는 색**이라야 합니다. 노란 바탕에
    노란 경고는 안 보입니다 — 주황이 아니라 진한 벽돌·자주로 갑니다. */
.cv3home-right .cv3home-need.is-warn {
  border-left-color: #A9560F; background: rgba(169,86,15,.14);
}
.cv3home-right .cv3home-need.is-crit {
  border-left-color: #7C1F31; background: rgba(124,31,49,.16);
}
.cv3home-right .cv3home-none {
  border-color: var(--p-line); color: var(--p-ink2);
}
.cv3home-right .cv3home-none small { color: var(--p-ink2); opacity: .8; }

/*  ── 우측 패널로 올린 카드 — 「지켜보는 것」·「오늘 있었던 일」 ──────────
    (2026-09-12 · 대표님 「우측 패널에서 표시되도록 올려주세요」)
    ⚠ 이 패널은 **좁습니다**. 본문 카드의 `min-height:148px` 을 그대로 두면
      규칙 5줄이 든 카드 아래에 빈 자리가 남습니다 — 내용이 높이를 정하게
      풀어 줍니다. 폭은 두 장이 **같아야** 하므로 한 칸짜리 격자로 세웁니다. */
.cv3home-rtcards {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 8px; margin-top: 12px;
}
.cv3home-rtcards .cv3home-sig {
  min-height: 0; padding: 11px 12px 10px;
  background: var(--p-fill); border-color: var(--p-line);
}
/*  글자는 이 패널의 잉크를 씁니다 — 본문 색을 그대로 쓰면 머스터드 위에서
    대비가 무너집니다(실측 기준 4.5:1 이상). */
.cv3home-rtcards .cv3home-sig-k,
.cv3home-rtcards .cv3home-rules b { color: var(--p-ink); }
.cv3home-rtcards .cv3home-rules li { border-bottom-color: var(--p-line); }
.cv3home-rtcards .cv3home-wfoot span,
.cv3home-rtcards .cv3home-tl p span { color: var(--p-ink2); }

/* ══ 파형 — 케어뷰 2.0 의 ECG/호흡파 애니메이션 ═══════════════════════
 *  2026-09-03 대표님: 「카드 파형/스코어/그래프를 케어뷰 2.0 스타일 적용해
 *  주세요.」
 *  ⚠ 2.0 의 `dash.css` 를 통째로 부르지 않습니다(클래스 10개 충돌).
 *     `charts.js` 가 쓰는 **애니메이션 두 줄만** 옮깁니다.
 *  ⚠ `prefers-reduced-motion` 을 지킵니다 — 흔들림에 약하신 분이 계십니다.
 * ═══════════════════════════════════════════════════════════════════ */
.cv-ecg { display: block; width: 100%; height: 100%; }
.cv-ecg-scroll {
  animation-name: cvEcgScroll; animation-timing-function: linear;
  animation-iteration-count: infinite; will-change: transform;
}
@keyframes cvEcgScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cv-ecg-scroll { animation: none; }
}

/*  파형 자리 — 카드 안에서 그림이 들어가는 칸 */
.cv3home-wave {
  height: 54px; margin-top: 8px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--hx-line2); background: var(--hx-fill2);
}
.cv3home-wave.is-live { border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.cv3home-wave svg { display: block; width: 100%; height: 100%; }

/*  스코어 게이지 자리 (tickSemiGauge) */
.cv3home-gauge2 { display: block; width: 100%; max-width: 260px; margin: 2px auto 0; }
.cv3home-gauge2 svg { display: block; width: 100%; height: auto; }

/*  ⚠ 값이 없을 때 — **눈금만** 흐리게 보이고 «채워진» 부분·바늘은 감춥니다.
    2.0 의 `tickSemiGauge` 는 값에 따라 눈금 일부를 진하게 칠하는데,
    값이 없는데 칠해져 있으면 «점수가 있다» 로 읽힙니다. */
.cv3home-gauge2.is-empty { opacity: .5; }
.cv3home-gauge2.is-empty svg [fill]:not([fill="none"]) { fill: var(--hx-line) !important; }
.cv3home-gauge2.is-empty svg [stroke]:not([stroke="none"]) { stroke: var(--hx-line) !important; }

/* ══ 파형 선 굵기 — 늘어나도 2px 을 지킵니다 ═══════════════════════════
 *  2026-09-03 대표님: 「파형과 선들이 둔탁하고 이상합니다.」
 *
 *  ⚠ **실측으로 원인을 찾았습니다.** `preserveAspectRatio="none"` 로 그린
 *     SVG 를 카드 폭에 늘이면 비늘이 방향마다 달라집니다:
 *       스파크라인  가로 **3.68배** · 세로 **1.00배**  → 2px 선이 가로 7.4px
 *       ECG        가로 0.70배 · 세로 0.96배        → 가로 1.41px · 세로 1.93px
 *     굵기가 방향마다 다르니 «뭉개진» 것처럼 보입니다. 색이나 모양 문제가
 *     아니었습니다.
 *
 *  ⚠ 2.0 의 `charts.js` 는 **고치지 않습니다** — 2.0 도 함께 바뀝니다.
 *     우리가 감싸는 칸에서 CSS 로 잡습니다. `vector-effect` 는 CSS 속성으로도
 *     먹습니다(SVG 2).
 *
 *  규격(dataviz): 선 **2px 라운드** · 면 **10%** · 격자 **실선 hairline**
 * ═══════════════════════════════════════════════════════════════════ */
.cv3home-wave svg path,
.cv3home-wave svg polyline,
.cv3home-wave svg line,
.cv3home-gauge2 svg path,
.cv3home-gauge2 svg line,
.cv3pop-chart path,
.cv3pop-chart polyline,
.cv3pop-chart line,
.cv3pop-chart circle {
  vector-effect: non-scaling-stroke;
}
/*  ECG·호흡파는 선을 조금 굵게 — 카드 안에서 얇으면 흐릿해 보입니다.
    ⚠ 2px 을 넘기지 않습니다. 굵은 선은 «데이터가 아닌 잉크» 입니다. */
.cv3home-wave svg path,
.cv3home-wave svg polyline {
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/*  파형 칸 — 바탕을 아주 옅게. 선이 주인공입니다. */
.cv3home-wave {
  background: color-mix(in srgb, var(--c) 5%, var(--hx-fill));
  border-color: color-mix(in srgb, var(--c) 18%, transparent);
}

/* ══ 툴팁 — **밝게** (2026-09-03 「왜 블랙으로 해놨죠?」) ═══════════════
 *  ⚠ 검은색은 제가 **정한 것이 아니라 물려받은 것**입니다. 3DX 툴팁이
 *     어두워서 우리 것도 어둡게 뒀습니다. 밝은 화면·머스터드 패널 위에
 *     검은 상자는 겉돕니다.
 *  ⚠ 3DX 툴팁은 **91곳 공용**이라 통째로 못 바꿉니다. 우리 것에만 `.cvh`
 *     표시를 넣고 `:has(.cvh)` 로 골라 밝게 그립니다.
 *  ⚠ 카드와 같은 옷을 입힙니다 — 흰 바탕 · `--hx-line` 테두리 · 14px 모서리.
 *     툴팁이 «화면의 일부» 로 보여야지 «다른 프로그램» 처럼 보이면 안 됩니다.
 * ═══════════════════════════════════════════════════════════════════ */
.cv3-tip:has(.cvh) {
  max-width: 288px;
  background: var(--hx-fill, #fff);
  border: 1px solid var(--hx-line, rgba(40,43,43,.12));
  border-radius: 14px;
  padding: 12px 13px;
  box-shadow: 0 12px 34px rgba(40,43,43,.14), 0 2px 6px rgba(40,43,43,.06);
  font-size: 11px; line-height: 1.6; color: var(--hx-mut, #6B6F63);
}
.cvh { display: block; }
.cvh .ttl {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--hx-mut);
}
.cvh .key { width: 14px; height: 2px; border-radius: 2px; flex: 0 0 auto; background: var(--k, #9AA3B2); }
.cvh.k-br   { --k: #6D8EC5; }
.cvh.k-hr   { --k: #7C1F31; }
.cvh.k-mv   { --k: #D3622C; }
.cvh.k-pres { --k: #576238; }
.cvh.k-fall { --k: #7C1F31; }
.cvh.k-dist { --k: #162660; }
.cvh .val { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.cvh .v {
  font-size: 28px; font-weight: 850; letter-spacing: -.8px; line-height: 1.1;
  color: var(--hx-txt, #282B2B); font-variant-numeric: tabular-nums;
}
.cvh .v.is-none { color: var(--hx-mut2, #93968C); font-size: 28px; }
.cvh .u { font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cvh .st {
  font-style: normal; font-size: 11px; font-weight: 700; margin-left: auto;
  padding: 2px 7px; border-radius: 999px;
  background: var(--hx-fill2); color: var(--hx-mut);
}

/*  «어디쯤인가» 한 줄 — 툴팁이 실제로 해야 하는 말입니다. */
.cv3-tip:has(.cvh) .wh {
  display: block; margin-top: 9px; padding: 8px 10px; border-radius: 10px;
  background: var(--hx-fill2); color: var(--hx-txt);
  font-size: 12px; font-weight: 800; line-height: 1.5;
}
.cv3-tip:has(.cvh) .wh em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 11px; font-weight: 600; color: var(--hx-mut);
}
.cv3-tip:has(.cvh) .wh.is-ok   { background: var(--hx-mint-bg); color: var(--hx-mint-deep); }
.cv3-tip:has(.cvh) .wh.is-ok em { color: var(--hx-mint-deep); opacity: .8; }
.cv3-tip:has(.cvh) .wh.is-warn { background: #FBEADF; color: #A9560F; }
.cv3-tip:has(.cvh) .wh.is-warn em { color: #A9560F; opacity: .8; }

.cv3-tip:has(.cvh) .rows {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px;
  margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hx-line2);
}
.cv3-tip:has(.cvh) .row { display: flex; align-items: baseline; gap: 6px; }
.cv3-tip:has(.cvh) .rk { font-size: 11px; color: var(--hx-mut2); }
.cv3-tip:has(.cvh) .rv {
  margin-left: auto; font-size: 12px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums;
}
/*  근거 — 값이 무슨 뜻인지. 이게 툴팁의 본문입니다. */
.cv3-tip:has(.cvh) .src {
  display: block; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--hx-line2);
  font-size: 11px; line-height: 1.6; color: var(--hx-mut);
}
/*  주의 — **판단이 달라질 때만** 씁니다. 매번 뜨는 면책 문구가 아닙니다. */
.cv3-tip:has(.cvh) .warn {
  display: block; margin-top: 8px; padding: 7px 9px; border-radius: 10px;
  background: #FBEADF; color: #A9560F;
  font-size: 11px; line-height: 1.55; font-weight: 700;
}
.cv3-tip:has(.cvh) b { color: var(--hx-txt); font-weight: 800; }

/* ══ 카드 새 부품 ═══════════════════════════════════════════════════ */
/*  곁줄 — 2.0 의 `.br-meta` 자리(상태 · 추세 · 언제) */
.cv3home-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px;
  margin: 5px 0 0; font-size: 11px; font-weight: 700; color: var(--hx-mut);
}
.cv3home-meta i { font-style: normal; color: var(--hx-mut2); opacity: .6; }
.cv3home-meta .is-up { color: var(--hx-flame); }
.cv3home-meta .is-dn { color: var(--hx-royal); }

/*  재실 · 위치 — 2026-09-04 대표님: 「거리와 재실 카드를 하나로 합쳐주세요.」
    **왼쪽은 «계신가», 오른쪽은 «어디쯤».** 한 줄로 읽히게 둡니다. */
.cv3home-presrow { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
.cv3home-presrow .cv3home-ring { margin: 0; flex: 0 0 auto; width: 46px; height: 46px; }
/*  ⚠ `min-width` 이 없으면 flex 자식이 끝없이 줄어, 패널을 넓히셨을 때
    「계심」이 두 줄로 접힙니다. 120px 아래로는 안 줄이고 **평면도를 아래로
    내립니다**(`.has-map` 의 `flex-wrap`). */
.cv3home-presv { flex: 1 1 120px; min-width: 120px; }
.cv3home-presv .cv3home-sig-v b { font-size: 28px; }
.cv3home-presd { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--hx-mut); }
/*  거리 — «계심» 바로 아래. 같은 사람의 같은 순간이라 붙여 둡니다. */
.cv3home-presdist {
  margin: 5px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.cv3home-presdist b {
  font-size: 20px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.cv3home-presdist span { font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home-presdist i {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--hx-mut2);
  margin-left: 4px; padding-left: 7px; border-left: 1px solid var(--hx-line2);
}
.cv3home-presmap { flex: 0 0 auto; margin-left: auto; }

/*  거리 — 카드 안 작은 평면도 */
.cv3home-mini {
  display: block; width: 84px; height: 84px; margin: 8px auto 0; color: var(--c);
}
/*  합친 카드 안에서는 위아래 여백 없이 오른쪽에 붙습니다. */
.cv3home-presmap .cv3home-mini { margin: 0; width: 74px; height: 74px; }
/*  카드가 좁아지면 평면도가 «계심» 을 밀어냅니다 — 그때는 아래로 내립니다.
    ⚠ `@container` 를 쓰지 않습니다. 컨테이너는 지금 **본문**(`.cv3home-bd`)이라
       카드 폭을 못 재고, 카드에 `container-type` 을 새로 걸면 그 안의
       `position:fixed` 툴팁이 카드 안에 갇힙니다(v2 에서 이미 겪었습니다).
       `flex-wrap` 은 **카드가 실제로 좁아진 그 순간** 스스로 접힙니다. */
.cv3home-presrow.has-map { flex-wrap: wrap; }
.cv3home-presrow.has-map .cv3home-presmap { margin-left: auto; }

/*  높이 — 눕기·앉기·서기 눈금 */
.cv3home-scale {
  position: relative; height: 30px; margin-top: 10px;
  border-top: 1px solid var(--hx-line2);
}
.cv3home-scale i {
  position: absolute; top: -4px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--hx-fill);
}
.cv3home-scale span {
  position: absolute; top: 8px; transform: translateX(-50%);
  font-size: 11px; color: var(--hx-mut2); white-space: nowrap;
}

/*  비상음향 — 소리 크기 막대 */
.cv3home-level {
  position: relative; height: 6px; border-radius: 999px;
  background: var(--hx-line2); margin: 10px 0 16px; overflow: visible;
}
.cv3home-level i {
  display: block; height: 100%; border-radius: 999px; background: var(--c);
  transition: width .25s;
}
.cv3home-level span {
  position: absolute; top: 9px; transform: translateX(-50%);
  font-size: 11px; color: var(--hx-mut2);
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-04 「케어뷰 2.0 참고 디자인 강화 — 시각화 · 정보 체계 · 친밀함 · 반응성」
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 반응성 ① 호버 리프트 — 2.0 의 `.bento-card[data-metric]:hover` 를 밝은 옷으로 ── */
.cv3home-sig {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cv3home-sig:hover {
  transform: translateY(-2px);
  border-color: var(--hx-line2);
  box-shadow: 0 10px 26px -14px rgba(20, 22, 22, .28), 0 0 0 1px rgba(20, 22, 22, .03);
}
.cv3home-sig.is-tap:hover { box-shadow: 0 12px 30px -14px rgba(20, 22, 22, .34), 0 0 0 1px var(--c); }

/* ── 반응성 ② 값 플래시 — 바뀐 숫자만 잠깐 (2.0 `hx-flash`) ───────────────── */
@keyframes cvhFlash {
  0%   { color: var(--c); transform: scale(1.05); }
  100% { transform: scale(1); }
}
.is-flash { animation: cvhFlash .7s ease; display: inline-block; transform-origin: left center; }

/* ── 반응성 ③ 라이브 점 — 알약의 점이 숨 쉽니다 (값이 20초 안) ─────────────── */
@keyframes cvhLive {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.7); opacity: .45; }
}
.cv3home-sig-p.is-fresh i { animation: cvhLive 1.6s ease-in-out infinite; }

/* ── 반응성 ④ 막대·진행률이 «점프» 하지 않고 움직입니다 ─────────────────── */
.cv3home-bars { position: relative; }
.cv3home-bars i { transition: height .35s ease, background-color .2s; }
.cv3home-bars i.over { background: var(--hx-flame); opacity: .85; }
/*  한계선 — 이 위로 올라간 막대에서는 호흡·심박이 빕니다 */
.cv3home-bars b.lim {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--hx-flame); opacity: .55; pointer-events: none;
}

/* ── 시각화 — 파형 아래 실제 기록 스파크 ─────────────────────────────────── */
.cv3home-wave + .cv3home-spark { height: 26px; margin-top: 5px; }

/* ── 친밀함 — 사람 문장 ───────────────────────────────────────────────── */
.cv3home-hero-t {
  font-size: 20px; line-height: 1.32; text-wrap: balance; max-width: 36ch;
}
.cv3home-hero-k { display: flex; align-items: center; gap: 8px; }
.cv3home-hero-k em {
  font-style: normal; font-weight: 700; font-size: 11px; color: var(--hx-mut2);
  padding-left: 8px; border-left: 1px solid var(--hx-line2);
}
.cv3home-hero.has-img .cv3home-hero-k em { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.3); }

/* ── 정보 체계 — 묶음 상태 한 마디 ────────────────────────────────────── */
.cv3home-cat-t { display: flex; align-items: baseline; gap: 8px; }
.cv3home-cat-st {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; color: var(--hx-mut); white-space: nowrap;
}
.cv3home-cat-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cv3home-cat-st.is-ok   { color: var(--hx-mint-deep); }
.cv3home-cat-st.is-warn { color: var(--hx-flame); }
.cv3home-cat-st.is-crit { color: var(--hx-claret); }
.cv3home-cat-st.is-na   { color: var(--hx-mut2); }

/* ── 레이더 감시 규칙 카드 ────────────────────────────────────────────── */
.cv3home-sig.is-watch { --c: var(--hx-royal); --c-bg: var(--hx-powder); }
.cv3home-sig.is-log   { --c: var(--hx-mut);       --c-bg: var(--hx-fill2); }
.cv3home-rules { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; }
.cv3home-rules li {
  display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--hx-line2); font-size: 11px;
}
.cv3home-rules li:last-child { border-bottom: 0; }
.cv3home-rules i { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-line); }
.cv3home-rules b { font-weight: 700; color: var(--hx-txt); }
.cv3home-rules span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3home-rules li.is-ok i   { background: var(--hx-mint); }
.cv3home-rules li.is-ok span { color: var(--hx-mint-deep); }
.cv3home-rules li.is-acc i  { background: var(--hx-champagne); box-shadow: 0 0 0 2px var(--hx-champagne); }
.cv3home-rules li.is-acc span { color: var(--hx-flame); }
.cv3home-rules li.is-warn i { background: var(--hx-flame); animation: cvhLive 1.4s ease-in-out infinite; }
.cv3home-rules li.is-warn span, .cv3home-rules li.is-warn b { color: var(--hx-flame); }
.cv3home-rules li.is-crit i { background: var(--hx-claret); animation: cvhLive 1s ease-in-out infinite; }
.cv3home-rules li.is-crit span, .cv3home-rules li.is-crit b { color: var(--hx-claret); }
.cv3home-rules li.is-note i { background: var(--hx-royal); }
.cv3home-rules li.is-na b, .cv3home-rules li.is-na span { color: var(--hx-mut2); font-weight: 600; }
.cv3home-wfoot {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--hx-line2);
  display: flex; align-items: center; gap: 8px;
}
.cv3home-wfoot span { font-size: 11px; color: var(--hx-mut2); line-height: 1.4; flex: 1 1 auto; }
.cv3home-wfoot .cv3home-btn { flex: 0 0 auto; font-size: 11px; padding: 4px 10px; }

/* ── 오늘 있었던 일 — 시간표 ───────────────────────────────────────────── */
.cv3home-ev { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; }
.cv3home-ev li {
  display: grid; grid-template-columns: 34px 8px 1fr; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 11px; position: relative;
}
/*  세로 실 — 점들을 잇습니다. 시간의 흐름이 보이게. */
.cv3home-ev li::before {
  content: ''; position: absolute; left: 45px; top: 0; bottom: 0; width: 1px; background: var(--hx-line2);
}
.cv3home-ev li:first-child::before { top: 50%; }
.cv3home-ev li:last-child::before { bottom: 50%; }
.cv3home-ev time { font-size: 11px; font-weight: 700; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3home-ev i { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-royal); position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--hx-fill); }
.cv3home-ev li.is-ok i   { background: var(--hx-mint); }
.cv3home-ev li.is-warn i { background: var(--hx-flame); }
.cv3home-ev li.is-crit i { background: var(--hx-claret); }
.cv3home-ev span { color: var(--hx-txt); font-weight: 600; }
.cv3home-ev li.is-crit span { color: var(--hx-claret); font-weight: 800; }
.cv3home-ev li.more { grid-template-columns: 1fr; font-size: 11px; color: var(--hx-mut2); }
.cv3home-ev li.more::before { display: none; }
.cv3home-ev-none { margin: 8px 0 0; font-size: 11px; color: var(--hx-mut); line-height: 1.55; }

/* ── 감시 설정 창 ─────────────────────────────────────────────────────── */
/*  🔴 2026-09-14 — **머리줄 규칙이 한 갈래에만 걸려 있었습니다.**
    `.cv3pop-top`(제목 + ✕)의 배치가 `.cv3sp .cv3pop-top` 으로만 적혀 있어,
    `.cv3sp` 가 아닌 **감시 설정 창은 배치를 못 받았습니다.**
    그래서 ✕ 가 오른쪽으로 안 가고 **제목 아래 왼쪽으로 떨어졌고**, 머리줄이
    혼자 **107px** 을 먹어 그만큼 내용이 밀려났습니다(실측).
    ⇒ 배치를 **밑바탕**으로 내립니다. 앞으로 만드는 팝업도 저절로 받습니다.
    ⚠ `.cv3sp .cv3pop-top`(0,2,0)이 더 세서 그쪽 여백은 그대로입니다 — 안 건드립니다. */
.cv3pop-top { display: flex; align-items: flex-start; gap: 10px; }
.cv3pop-top > div { flex: 1 1 auto; min-width: 0; }
.cv3pop-k { margin: 0; font-size: 11px; font-weight: 800; color: var(--hx-mut2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv3pop-t { margin: 1px 0 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--hx-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*  🔴 2026-09-14 · 대표님 「팝업 사이즈가 너무 작아서 **내용들이 짤려요.**」
    ■ 실측으로 재현했습니다 — 창 높이 **560px** 에서 「저장」·「기본값으로」 단추가
      **화면 밖(y=565~608)** 으로 나갔습니다. **49px 잘립니다.**
    ■ 까닭이 셋이었습니다:
        ① `.cv3pop-in` 에 **`max-height` 가 없습니다** — 내용만큼 계속 길어집니다.
        ② 그러면서 **`overflow: hidden`** 이라 넘친 부분이 **그냥 잘립니다.**
           (바깥 `.cv3pop` 은 스크롤되지만, 굴릴 수 있다는 표가 안 납니다.)
        ③ 폭이 **520px** 인데 칸이 11개 2줄짜리 격자라 세로로 길어집니다.
           게다가 안쪽 **여백이 0** 이라 글자가 모서리에 붙습니다.
    ⇒ ① 화면 높이를 넘지 않게 **가둡니다**  ② 안에서 **굴러가게** 합니다
      ③ 넓히고 칸을 **자동으로 나눠** 세로를 줄입니다  ④ 「저장」은 **늘 보이게** 붙입니다.
    ⚠ 다른 팝업은 안 건드립니다 — `.cv3home-wpop` 에만 겁니다. */
.cv3pop-in.cv3home-wpop {
  box-sizing: border-box;
  max-width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
  padding: 14px 16px 0;
}
.cv3pop-in.cv3home-wpop .cv3pop-top { flex: 0 0 auto; }
.cv3pop-in.cv3home-wpop .cv3home-wform {
  /*  ⚠ `min-height: 0` 이 **없으면** flex 자식이 안 줄어들어 스크롤이 안 생깁니다.
      («overflow 를 줬는데 안 굴러간다» 의 단골 원인입니다.) */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
  /*  넓어지면 칸을 **세 줄로** 나눠 세로를 줄입니다 — 좁아지면 한 줄. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/*  「저장」은 굴려 내려가도 **바닥에 붙어 늘 보입니다.** */
.cv3pop-in.cv3home-wpop .cv3home-wact {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--hx-fill);
  padding: 10px 0 12px;
  margin-top: 2px;
}
/*  짧은 화면에서는 바깥 여백을 줄입니다 — 위아래 67px 가 그대로 사라지는 높이입니다. */
@media (max-height: 760px) {
  .cv3pop { padding-top: 14px; padding-bottom: 14px; }
}
.cv3home-wform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.cv3home-wform label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home-wform input {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--hx-txt);
  padding: 6px 9px; border: 1px solid var(--hx-line); border-radius: 10px; background: var(--hx-fill);
  font-variant-numeric: tabular-nums;
}
.cv3home-wform input:focus { outline: 2px solid var(--hx-moonstone); outline-offset: 1px; }
.cv3home-wnote { grid-column: 1 / -1; margin: 4px 0 0; font-size: 11px; color: var(--hx-mut); line-height: 1.55; }
.cv3home-wact { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 560px) { .cv3home-wform { grid-template-columns: 1fr; } }

/* ── 흔들림에 약하신 분 — 전부 끕니다 ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cv3home-sig, .cv3home-sig:hover { transform: none; transition: none; }
  .is-flash, .cv3home-sig-p.is-fresh i, .cv3home-rules li i { animation: none; }
  .cv3home-bars i { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-04 「2.0 생체 카드 시각 요소·팝업 흡수」 + 「실시간 표현이 단조롭다」
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 실시간 ① 아이콘이 실제 박자로 뜁니다 (`--beat` = 한 박, 초) ─────────── */
@keyframes cvhBeat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.18); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.08); }
  50%      { transform: scale(1); }
}
@keyframes cvhBreathe {
  0%, 100% { transform: scale(.94); opacity: .8; }
  50%      { transform: scale(1.1); opacity: 1; }
}
.cv3home-sig.is-beat .cv3home-ico svg { transform-origin: center; }
.cv3home-sig.is-hr.is-beat .cv3home-ico svg { animation: cvhBeat var(--beat, 1s) ease-in-out infinite; }
.cv3home-sig.is-br.is-beat .cv3home-ico svg { animation: cvhBreathe var(--beat, 4s) ease-in-out infinite; }

/* ── 실시간 ② 직전과의 차이 — 큰 값 옆에 작게 ─────────────────────────── */
.cv3home-delta {
  margin-left: 8px; align-self: center; display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--hx-fill2); color: var(--hx-mut); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cv3home-delta i { font-style: normal; font-weight: 600; font-size: 11px; color: var(--hx-mut2); }
.cv3home-delta.is-up { color: var(--hx-flame); background: #FBEADF; }
.cv3home-delta.is-dn { color: var(--hx-royal); background: var(--hx-powder); }
.cv3home-delta.is-flat { font-weight: 700; }

/* ── 실시간 ③ 재실 링 레이더 스윕 · 평면도 점 맥동 ─────────────────────── */
@keyframes cvhSweep { to { transform: rotate(360deg); } }
.cv3home-ring { position: relative; overflow: hidden; }
.cv3home-ring.on::before {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 300deg, var(--c) 360deg);
  opacity: .28; animation: cvhSweep 2.6s linear infinite;
}
.cv3home-ring i { position: relative; z-index: 1; }
@keyframes cvhDot { 0%, 100% { stroke-width: 8; } 50% { stroke-width: 11; } }
.cv3home-mini line:last-child { animation: cvhDot 1.6s ease-in-out infinite; }

/* ── 심박 4 구간 (2.0 hr-zones) ───────────────────────────────────────── */
/*  ⚠ `.cv3home-zone` 은 히어로 「감지영역 보기」 단추의 이름입니다 — 여기선 `hz`. */
.cv3home-hzs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.cv3home-hz {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 2px; border-radius: 10px; border: 1px solid var(--hx-line2); background: var(--hx-fill);
  transition: background-color .25s, border-color .25s;
}
.cv3home-hz span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-hz b { font-size: 11px; font-weight: 800; color: var(--hx-mut); font-variant-numeric: tabular-nums; }
.cv3home-hz.is-cur { background: var(--c-bg); border-color: var(--c); }
.cv3home-hz.is-cur span, .cv3home-hz.is-cur b { color: var(--c); }

/* ── 구간별 최소–최대 막대 (2.0 rangeBars) · 시간대별 스트레스 (stress-tod) ── */
.cv3home-range, .cv3home-tod { margin-top: 8px; color: var(--c); }
.cv3home-range svg, .cv3home-tod svg { display: block; width: 100%; height: 40px; }
.cv3home-tod svg { height: 36px; }
.cv3home-range svg rect[data-tip], .cv3home-tod svg rect[data-tip] { cursor: help; }
.cv3home-range p, .cv3home-tod p, .cv3home-night-ax {
  margin: 2px 0 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--hx-mut2);
}

/* ── 움직임으로 본 밤 (2.0 hypnogram 자리) ────────────────────────────── */
.cv3home-night { margin-top: 8px; color: var(--c); }
.cv3home-night svg { display: block; width: 100%; height: 34px; }
.cv3home-night rect.is-quiet    { fill: var(--hx-mint); }
.cv3home-night rect.is-restless { fill: var(--hx-flame); opacity: .8; }
.cv3home-night rect.is-awake    { fill: var(--hx-claret); }
.cv3home-night rect.is-away     { fill: var(--hx-mut2); }
.cv3home-night-lg {
  margin: 5px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  font-size: 11px; font-weight: 700; color: var(--hx-mut);
}
.cv3home-night-lg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 2px; }
.cv3home-night-lg i.is-quiet { background: var(--hx-mint); }
.cv3home-night-lg i.is-restless { background: var(--hx-flame); }
.cv3home-night-lg i.is-awake { background: var(--hx-claret); }
.cv3home-night-lg i.is-away { background: var(--hx-mut2); }
.cv3home-night-lg em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--hx-mut2); }

/* ── 툴팁 안 미니 추세 (2.0 helix-viz 오버레이) ───────────────────────── */
.cv3-tip:has(.cvh) .sp { display: block; width: 220px; max-width: 100%; height: 44px; margin: 6px 0 4px; }
.cv3-tip:has(.cvh) .sp.k-br { color: var(--hx-lake); }
.cv3-tip:has(.cvh) .sp.k-hr { color: var(--hx-claret); }
.cv3-tip:has(.cvh) .sp.k-mv { color: var(--hx-flame); }
.cv3-tip:has(.cvh) .sts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 4px; }
.cv3-tip:has(.cvh) .sts i {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-style: normal; font-size: 11px; color: var(--hx-mut2);
}
.cv3-tip:has(.cvh) .sts b { font-size: 12px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; }

/* ── 팝업 업그레이드 — 탭 4개 · 십자선 칸 · 읽히는 것 · 재실 띠 ─────────── */
.cv3pop-tabs.n4 .cv3pop-tab { flex: 1 1 0; min-width: 0; }
.cv3pop-tabs.n4 .cv3pop-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cv3pop-chart rect.hit { cursor: crosshair; }
.cv3pop-chart rect.hit:hover { fill: currentColor; fill-opacity: .06; }
.cv3pop-ins { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.cv3pop-ins li { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--hx-line2); }
.cv3pop-ins li span { flex: 0 0 52px; font-size: 11px; font-weight: 800; color: var(--hx-mut2); }
.cv3pop-ins li b { font-weight: 700; color: var(--hx-txt); }
.cv3pop-ins li.is-up b { color: var(--hx-flame); }
.cv3pop-ins li.is-dn b { color: var(--hx-royal); }
@media (max-width: 560px) { .cv3pop-ins { grid-template-columns: 1fr; } }
.cv3pop-strip { display: grid; grid-template-columns: repeat(144, 1fr); gap: 6px; height: 28px; margin-top: 6px; color: var(--hx-moss); }
.cv3pop-strip i { display: block; background: currentColor; border-radius: 1px; cursor: help; }
.cv3pop-strip i.none { background: var(--hx-line2); opacity: .5; }
.cv3pop-strip-ax { margin: 3px 0 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--hx-mut2); }

@media (prefers-reduced-motion: reduce) {
  .cv3home-sig.is-beat .cv3home-ico svg, .cv3home-ring.on::before, .cv3home-mini line:last-child { animation: none; }
}

/* ═══ 2026-09-04 첨부(2.0 실화면) 대조 — 카드 안 부속 요소 ═══════════════════ */

/* 비상음향 — 통계 3칸 · 파형 · 주파수 6칸 */
.cv3home-sstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.cv3home-sstats div, .cv3home-sgrid div {
  display: flex; flex-direction: column; gap: 6px; padding: 5px 7px;
  border: 1px solid var(--hx-line2); border-radius: 10px; background: var(--hx-fill);
}
.cv3home-sstats span, .cv3home-sgrid span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-sstats b, .cv3home-sgrid b { font-size: 12px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; }
.cv3home-sstats b.is-na { color: var(--hx-mut2); font-size: 11px; }
.cv3home-swave { display: block; width: 100%; height: 26px; margin-top: 7px; color: var(--c); }
.cv3home-sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }

/* POBC — 감시 요약 막대 · 기준선 줄 · 오늘의 흐름 */
.cv3home-wbar { margin-top: 9px; padding: 8px 10px; border-radius: 10px; background: var(--hx-fill2); }
.cv3home-wbar.is-warn { background: #FBEADF; }
.cv3home-wbar.is-crit { background: #F5E7EA; }
.cv3home-wbar-h { display: flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home-wbar-h b { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--hx-mint-deep); }
.cv3home-wbar.is-warn .cv3home-wbar-h b { color: var(--hx-flame); }
.cv3home-wbar.is-crit .cv3home-wbar-h b { color: var(--hx-claret); }
.cv3home-wbar-b { display: flex; gap: 6px; margin-top: 6px; }
.cv3home-wbar-b i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--hx-mint); opacity: .75; cursor: help; }
.cv3home-wbar-b i.is-warn { background: var(--hx-flame); opacity: 1; }
.cv3home-wbar-b i.is-crit { background: var(--hx-claret); opacity: 1; animation: cvhLive 1s ease-in-out infinite; }
.cv3home-wbar-b i.is-note { background: var(--hx-royal); }
.cv3home-blline { margin: 8px 0 0; font-size: 11px; color: var(--hx-mut); font-variant-numeric: tabular-nums; }
.cv3home-blline b { color: var(--hx-txt); font-weight: 800; }
.cv3home-daily { margin-top: 8px; color: var(--c); }
.cv3home-daily svg { display: block; width: 100%; height: 40px; }
.cv3home-daily p { margin: 2px 0 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--hx-mut2); }

/* 움직임 — 알약 칸 (2.0 pillSegments) */
.cv3home-pills { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--hx-mut2); }
.cv3home-pills div { flex: 1 1 auto; display: flex; gap: 6px; }
.cv3home-pills div i { flex: 1 1 0; height: 12px; border-radius: 4px; background: var(--hx-line); transition: background-color .25s; }
.cv3home-pills div i.on { background: var(--c); }
.cv3home-pills div i.on.over { background: var(--hx-claret); }
.cv3home-pills div i:nth-child(6) { margin-right: 4px; box-shadow: 3px 0 0 -1px var(--hx-line2); }
.cv3home-pills em { font-style: normal; }

/* 수면 — 세 칸 (수면 시간 · 조용 비율 · 전일 대비) */
.cv3home-sleep3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 4px; }
.cv3home-sleep3 div { display: flex; flex-direction: column; gap: 6px; }
.cv3home-sleep3 b { font-size: 20px; font-weight: 850; letter-spacing: -.4px; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cv3home-sleep3 b.is-up { color: var(--hx-mint-deep); }
.cv3home-sleep3 b.is-dn { color: var(--hx-flame); }
.cv3home-sleep3 span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-night rect[data-tip] { cursor: help; }

/* 스트레스 시간대별 — 높이 늘림(말풍선·눈금) */
.cv3home-tod svg { height: 52px; }

/* 팝업 — 여섯 타일 · 시간대별 평균 */
.cv3pop-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.cv3pop-tiles div { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hx-line2); background: var(--hx-fill2); }
.cv3pop-tiles span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3pop-tiles b { font-size: 20px; font-weight: 850; letter-spacing: -.3px; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.15; }
.cv3pop-tiles b small { font-size: 11px; font-weight: 700; color: var(--hx-mut); margin-left: 3px; }
.cv3pop-tiles b.is-up { color: var(--hx-flame); }
.cv3pop-tiles b.is-dn { color: var(--hx-royal); }
.cv3pop-hours.is-val .cv3pop-hb.is-now i { background: var(--c, var(--hx-txt)); opacity: 1; }
.cv3pop-hours.is-val .cv3pop-hb i.none { opacity: .25; }
.cv3pop-hours.is-val .cv3pop-hb[data-tip] { cursor: help; }
@media (max-width: 560px) { .cv3pop-tiles { grid-template-columns: repeat(2, 1fr); } }

/* 히어로 미디어 점 (첨부 「● ● ● ● 4 / 4」) */
.cv3home-mdots { display: inline-flex; gap: 6px; align-items: center; margin-right: 2px; }
.cv3home-mdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-line); }
.cv3home-mdots i.on { width: 16px; border-radius: 3px; background: var(--hx-mint); }
.cv3home-hero.has-img .cv3home-mdots i { background: rgba(255,255,255,.35); }
.cv3home-hero.has-img .cv3home-mdots i.on { background: #FFD95D; }
.cv3pop-in.is-fall { --c: var(--hx-claret); }
.cv3pop-now-v b.is-crit { color: var(--hx-claret); }
.cv3pop-tabs-in { display: flex; gap: 6px; width: 100%; }
.cv3pop-ins.is-1 { grid-template-columns: 1fr; }

/* ═══ 2026-09-04 「막대 말고」 — 자리마다 맞는 형태 ═══════════════════════ */

/* 호 게이지(심박 구간) */
.cv3home-hzg { margin-top: 8px; color: var(--c); }
.cv3home-hzg svg { display: block; width: 100%; max-width: 250px; margin: 0 auto; height: auto; }
.cv3home-hzg path[data-tip] { cursor: help; transition: opacity .25s, stroke-width .25s; }

/* 강 띠(최소–최대) */
.cv3home-range svg rect.hit { cursor: help; }
.cv3home-range svg rect.hit:hover { fill: currentColor; fill-opacity: .06; }

/* 시계 링 */
.cv3home-clock { display: block; width: 100%; max-width: 190px; margin: 0 auto; height: auto; }
.cv3home-clock path[data-tip] { cursor: help; transition: opacity .25s; }
.cv3home-tod svg.cv3home-clock { height: auto; }
.cv3pop-clock { margin-top: 12px; color: var(--c, var(--hx-mint)); }
.cv3pop-clock .cv3home-clock { max-width: 230px; }
.cv3pop-clock p { margin: 4px 0 0; text-align: center; font-size: 11px; color: var(--hx-mut2); }
.cv3pop-clock.is-pres { color: var(--hx-moss); }

/* 활동 링(움직임 vs 한계) */
.cv3home-ring2 { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--c); }
.cv3home-ring2 svg { width: 64px; height: 64px; flex: 0 0 auto; }
.cv3home-ring2 .p1 { transition: stroke-dasharray .4s ease; }
.cv3home-ring2 div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cv3home-ring2 b { font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home-ring2 span { font-size: 11px; color: var(--hx-mut2); }

/* 도넛 · 밤 범례 */
.cv3home-donut { flex: 0 0 auto; color: var(--c); }
.cv3home-donut circle.is-quiet { stroke: var(--hx-mint); }
.cv3home-donut circle.is-restless { stroke: var(--hx-flame); }
.cv3home-donut circle.is-awake { stroke: var(--hx-claret); }
.cv3home-donut circle.is-away { stroke: var(--hx-mut2); }
.cv3home-night-lg { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cv3home-night-lg p { margin: 0; display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; font-weight: 700; color: var(--hx-mut); flex: 1 1 auto; }
.cv3home-night-lg p span { display: inline-flex; align-items: center; gap: 6px; }

/* 100% 비율 띠(소리 저·중·고) */
.cv3home-prop { margin-top: 6px; }
.cv3home-prop-b { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 6px; background: var(--hx-fill2); }
.cv3home-prop-b i { display: block; height: 100%; cursor: help; transition: width .4s ease; }
.cv3home-prop i.is-lo { background: var(--hx-royal); }
.cv3home-prop i.is-mid { background: var(--hx-lake); }
.cv3home-prop i.is-hi { background: var(--hx-flame); }
.cv3home-prop p { margin: 4px 0 0; display: flex; gap: 8px; font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home-prop p i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 3px; vertical-align: -1px; }

/* 열 리본(팝업 시간별 평균) */
.cv3pop-heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 6px; margin-top: 6px; color: var(--c, var(--hx-txt)); }
.cv3pop-heat i { display: grid; place-items: center; height: 30px; border-radius: 4px; background: currentColor; cursor: help; position: relative; }
.cv3pop-heat i b { font-size: 11px; font-weight: 800; color: var(--hx-fill); mix-blend-mode: difference; }
.cv3pop-heat i.none { background: var(--hx-line2); opacity: .5; cursor: default; }
.cv3pop-heat i.is-now { outline: 2px solid var(--hx-txt); outline-offset: 1px; }
.cv3pop-heat-ax { margin: 3px 0 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--hx-mut2); }
.cv3pop-in.is-br .cv3pop-heat { color: var(--hx-lake); }
.cv3pop-in.is-hr .cv3pop-heat { color: var(--hx-claret); }
.cv3pop-in.is-mv .cv3pop-heat { color: var(--hx-flame); }

/* ═══ 2026-09-04 「애니메이션 효과들도 넣어 주세요」 ══════════════════════════
   원칙: 움직임은 **뜻이 있을 때만** — 값이 바뀌었다(플래시·바늘), 지금 살아 있다
   (박자·맥동·스윕), 새로 나타났다(등장·그리기). 장식으로 흔들지 않습니다.
   흔들림 줄임 설정이면 전부 멈춥니다(맨 아래).                                    */

/* 바늘이 미끄러져 가리킵니다 */
.cv3home-hzg .ndl { transform-box: view-box; transform-origin: 50px 52px; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }

/* 선이 그려지며 나타납니다 (첫 그리기 때만 — 이후엔 값만 바뀝니다) */
/*  ⚠ 처음엔 `stroke-dasharray:100` + `pathLength` 로 그렸습니다. 그런데 이 선들은
    `vector-effect="non-scaling-stroke"` 라 **대시 길이가 화면 픽셀**로 해석됩니다 —
    좁은 창에선 100px 대시 하나가 선을 다 덮어 멀쩡해 보였고, 1000px 카드에서는
    100px 마다 끊겨 점선이 됐습니다(대표님 첨부, 2026-09-04). 대시를 버리고
    **그림 자체를 왼쪽에서 오른쪽으로 걷어 올리는(clip) 방식**으로 바꿉니다. */
@keyframes cvhWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.draw { stroke-dasharray: none; }
.cv3home-spark, .cv3home-range svg, .cv3home-daily svg, .cv3-tip .sp { animation: cvhWipe 1s cubic-bezier(.3, .7, .3, 1) both; }

/* 카드가 차례로 떠오릅니다 */
@keyframes cvhCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/*  ⚠ 사고(2026-09-05 실측): `both` 로 두면 애니메이션이 끝난 **뒤에도**
    `to { transform: none }` 이 계속 걸려 있습니다. CSS 애니메이션은 일반 선언을
    이기므로 **호버의 `translateY` 가 영영 안 먹었습니다** — 브라우저에 물어보니
    호버는 걸렸는데 `transform: matrix(1,0,0,1,0,0)` 이었습니다.
    `backwards` 로 바꿉니다: 시작 전에만 붙들고, 끝나면 손을 뗍니다. */
.cv3home-sig, .cv3home-hero, .cv3home-cat-t { animation: cvhCardIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.cv3home-sigs > :nth-child(2) { animation-delay: .06s; }
.cv3home-sigs > :nth-child(3) { animation-delay: .12s; }
.cv3home-sigs > :nth-child(4) { animation-delay: .18s; }
.cv3home-cats > :nth-child(2) .cv3home-sig { animation-delay: .1s; }
.cv3home-cats > :nth-child(3) .cv3home-sig { animation-delay: .2s; }
.cv3home-cats > :nth-child(4) .cv3home-sig { animation-delay: .3s; }
.cv3home-cats > :nth-child(5) .cv3home-sig { animation-delay: .4s; }
/*  ⚠ 호버 리프트의 transform 과 등장 애니메이션의 transform 이 겹치면 리프트가
    먹지 않습니다 — 등장이 끝나면(`both`) 마지막 프레임이 `none` 이라 괜찮습니다. */

/* 팝업 — 열릴 때 떠오르고, 탭을 바꾸면 본문이 크로스페이드 */
@keyframes cvhPopIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
/*  ⚠ `to{opacity:1}` 을 두면 `both` 가 끝값 1 을 하기편으로 남겸 SVG 의 opacity=".16" 을 덮어써
    강 띠가 진한 단색이 됐습니다(실쳡 2026-09-04). 시작값만 주고 끝은 자기 값으로. */
@keyframes cvhFade { from { opacity: 0; } }
.cv3pop.is-open .cv3pop-in { animation: cvhPopIn .34s cubic-bezier(.2, .8, .2, 1) both; }
.cv3pop-b { animation: cvhFade .28s ease both; }
.cv3pop-tab { transition: background-color .18s, border-color .18s, color .18s; }

/* 값 플래시의 변주 — 델타 칩은 «팝», 사람 문장은 «페이드» */
@keyframes cvhPop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.cv3home-delta.is-flash { animation: cvhPop .45s cubic-bezier(.2, .8, .2, 1); }
.cv3home-hero-t.is-flash { display: block; animation: cvhFade .7s ease; transform: none; }
.cv3pop-now-v b.is-flash, .cv3home-sleep3 b.is-flash { animation: cvhFlash .7s ease; }

/* 시계 링 — «지금» 부채꼴이 숨 쉬고, 부채꼴은 자라나며 나타납니다 */
@keyframes cvhPulseOp { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.cv3home-clock path[stroke] { animation: cvhPulseOp 1.8s ease-in-out infinite; }
@keyframes cvhGrow { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cv3home-clock { transform-box: fill-box; }
.cv3home-clock path[data-tip] { transform-box: view-box; transform-origin: 50px 50px; animation: cvhGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
/*  ⚠ «지금» 부채꼴은 위 규칙이 덮어써 맥동이 안 돌았습니다(실측: cvhGrow 만) —
    자라난 뒤 맥동으로 잇습니다. */
.cv3home-clock path[data-tip][stroke] { animation: cvhGrow .7s cubic-bezier(.2, .8, .2, 1) both, cvhPulseOp 1.8s ease-in-out .7s infinite; }

/* 활동 링 · 도넛 · 비율 띠 · 감시 막대 — 값이 바뀌면 흘러갑니다 */
.cv3home-ring2 .p1, .cv3home-ring2 .p2 { transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1); }
.cv3home-donut circle { transition: stroke-dasharray .6s ease, stroke-dashoffset .6s ease; }
.cv3home-wbar-b i { transition: background-color .3s; }
.cv3home-level i { transition: width .35s ease; }

/* 밤 띠 칸 — 아래에서 자라나며 */
@keyframes cvhGrowY { from { transform: scaleY(.1); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.cv3home-night rect[class] { transform-box: fill-box; transform-origin: center; animation: cvhGrowY .5s ease both; }

/* 열 리본 — 왼쪽부터 물결처럼 */
.cv3pop-heat i { animation: cvhFade .4s ease both; animation-delay: calc(var(--i, 0) * 18ms); }

/* 강 띠·오늘의 흐름 면 — 서서히 */
.cv3home-range path, .cv3home-daily rect, .cv3home-spark path { animation: cvhFade .9s ease both; }

/* 툴팁 안 미니 추세의 끝점은 SVG <animate> 로 뜁니다 (CSS 밖) */

@media (prefers-reduced-motion: reduce) {
  .cv3home-hzg .ndl { transition: none; }
  .draw, .cv3home-spark, .cv3home-range svg, .cv3home-daily svg, .cv3-tip .sp, .cv3home-sig, .cv3home-hero, .cv3home-cat-t, .cv3pop.is-open .cv3pop-in, .cv3pop-b,
  .cv3home-clock path, .cv3home-night rect[class], .cv3pop-heat i, .cv3home-range path, .cv3home-daily rect, .cv3home-spark path,
  .cv3home-delta.is-flash, .cv3home-hero-t.is-flash { animation: none !important; }
  .cv3home-ring2 .p1, .cv3home-ring2 .p2, .cv3home-donut circle, .cv3home-level i { transition: none; }
}

/* ── 넓은 창 — 본문 폭 상한 (대표님 첨부 2026-09-04: 카드 하나가 1000px 로 늘어나
   파형이 늘어지고 아래가 텅 빔). 3DX 좌우 패널을 뺀 본문이 1480px 을 넘으면
   가운데 모읍니다. 그래도 넓으면 생체 2장을 3열 폭으로 그립니다. ───────────── */
/*  🔴 2026-09-12 대표님 「움직임 감지, 실내환경 카드는 폭이 그대로 입니다」
       「카드가 너무 넓다」 — 실측(창 2400 · 본문 2016)으로 원인이 나왔습니다.
       이 목록에 든 것만 1480 에서 멈추고, **나중에 만든 네 줄이 목록에 없어서**
       본문 끝까지(1984) 퍼졌습니다. 호흡·심박은 734, 센서 카드만 987 이었습니다.
       ⇒ 규칙이 틀린 게 아니라 **명단에 이름이 빠진 것**이었습니다.
          `senrow`(센서 두 장) · `risk`(위험도) · `strip`(지금 대응) 을 넣습니다.
       ⚠ 이 목록은 «본문에 바로 놓이는 줄» 을 전부 적는 자리입니다 —
          새 줄을 만들면 **여기에도 이름을 올리십시오.** 안 올리면 이 화면에서만
          혼자 넓어지고, 좁은 화면에서는 멀쩡해 보여 한참 못 찾습니다. */
.cv3home-top, .cv3home-cats, .cv3home-say, .cv3home-empty, .cv3home-import { max-width: 1480px; margin-left: auto; margin-right: auto; }
/*  ⚠ 아래 넷은 **자기 규칙에서 `margin: 0 0 10px` 를 다시 정합니다**(파일 뒤쪽).
    그래서 위 목록에 이름만 넣으면 상한은 걸려도 좌우 `auto` 가 덮여 **왼쪽에 붙습니다.**
    순서에 휘둘리지 않게 `.cv3home-bd >` 를 붙여 한 급 높입니다(0,2,0 > 0,1,0). */
.cv3home-bd > .cv3home-senrow,
.cv3home-bd > .cv3home-risk,
.cv3home-bd > .cv3home-strip,
.cv3home-bd > .cv3home-strip-h { max-width: 1480px; margin-left: auto; margin-right: auto; }
/*  (3열로 나누면 셋째 칸이 구멍으로 남습니다 — 1480px 상한만으로 카드가 730px 이 되어 충분합니다.) */

/* ═══ 2026-09-04 「뭘 그려 놓은 건지」 「하얀 백지」 — 차트 해부 + 화면 구조 ═══════ */

/* ── 차트 틀: 머리(제목·단위·범례) · y 눈금 · 그림 · x 라벨 ───────────────── */
.cv3home-ch { margin-top: 10px; color: var(--c); }
.cv3home-ch-h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.cv3home-ch-h b { font-size: 11px; font-weight: 800; color: var(--hx-txt); }
.cv3home-ch-h span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-ch-h em { margin-left: auto; display: inline-flex; gap: 8px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--hx-mut); white-space: nowrap; }
.cv3home-ch-h em i { display: inline-block; width: 12px; height: 2px; vertical-align: 3px; margin-right: 4px; background: currentColor; border-radius: 1px; }
.cv3home-ch-h em i.k-band { height: 7px; vertical-align: 0; opacity: .25; border-radius: 2px; }
.cv3home-ch-h em i.k-bar { width: 7px; height: 9px; vertical-align: -1px; opacity: .6; border-radius: 1px; }
.cv3home-ch-h em i.k-lim { background: var(--hx-flame); }
.cv3home-ch-g { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
.cv3home-ch-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--hx-mut2); font-variant-numeric: tabular-nums; text-align: right; min-width: 22px; line-height: 1; }
.cv3home-ch-y i { font-style: normal; }
.cv3home-ch-g svg { display: block; width: 100%; border-left: 1px solid var(--hx-line2); border-bottom: 1px solid var(--hx-line2); }
.cv3home-ch-x { display: flex; justify-content: space-between; margin: 3px 0 0 28px; font-size: 11px; color: var(--hx-mut2); }
.cv3home-ch-n { margin: 5px 0 0; font-size: 11px; color: var(--hx-mut2); line-height: 1.5; }
.cv3home-ch.is-empty .cv3home-ch-g svg { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(40,43,43,.025) 6px 7px); }

/* 파형 이름표 — «재현» 임을 그림 위에 적습니다 */
.cv3home-wave { position: relative; }
.cv3home-wave-cap { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--hx-mut); }
.cv3home-wave-cap b { font-size: 11px; font-weight: 800; color: var(--hx-txt); }
.cv3home-wave-cap em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--hx-mut2); white-space: nowrap; }

/* 두 그림 나란히 — 각각 제목 */
.cv3home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.cv3home-duo > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--hx-line2); border-radius: 10px; }
.cv3home-duo-t { margin: 0; font-size: 11px; font-weight: 800; color: var(--hx-txt); display: flex; gap: 6px; align-items: baseline; }
.cv3home-duo-t span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-duo .cv3home-hzg, .cv3home-duo .cv3home-range { margin-top: 4px; }
@media (max-width: 480px) { .cv3home-duo { grid-template-columns: 1fr; } }

/* ── 백지 탈출: 본문 바탕 · 카드 머리 물들임 · 묶음 머리띠 ─────────────────── */
.cv3home-bd { background: #F3F1EA; }
.cv3home-sig {
  border-color: color-mix(in srgb, var(--c) 28%, var(--hx-line));
  box-shadow: 0 1px 0 rgba(40,43,43,.03), 0 6px 18px -14px color-mix(in srgb, var(--c) 40%, transparent);
  padding-top: 0;
}
.cv3home-sig-h {
  margin: 0 -14px 10px; padding: 9px 14px;
  background: color-mix(in srgb, var(--c) 8%, var(--hx-fill));
  border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--hx-line2));
  border-radius: 13px 13px 0 0;
}
.cv3home-cat-t {
  padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--hx-txt) 5%, transparent);
  border-left: 3px solid var(--hx-txt);
}
.cv3home-cat-t span { opacity: .9; }
.cv3home-hero { box-shadow: 0 8px 22px -16px rgba(40,43,43,.35); }
.cv3home-ring2.is-empty b { color: var(--hx-mut2); }
.cv3home-tod.is-empty .cv3home-clock, .cv3home-night.is-empty { opacity: .75; }
.cv3home-meta .is-up { color: var(--hx-flame); }
/*  ⚠ `.cv3home-wave` 가 flex 행이라 이름표가 세로로 찌그러졌습니다(실측: 「심전도 모양」이
    한 글자씩 줄바꿈). 이름표는 한 줄을 통째로 씁니다. */
.cv3home-wave { flex-wrap: wrap; }
.cv3home-wave .cv3home-wave-cap { flex: 1 1 100%; width: 100%; }
/*  차트 머리 — 제목은 안 접고, 범례가 길면 다음 줄로 */
.cv3home-ch-h { flex-wrap: wrap; row-gap: 6px; }
.cv3home-ch-h b { white-space: nowrap; }
.cv3home-ch-h em { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
.cv3home-wave-cap { margin-top: 8px; }
.cv3home-wave-cap + .cv3home-wave { margin-top: 3px; }

/* ═══ 2026-09-04 「퀀텀 파레트도 적용」 — 어두운 테마 (v49-home `--q-*`) ═══════════
   라이브러리 테마가 기본. `.cv3home[data-cvtheme="quantum"]` 안에서 3DX 토큰을 퀀텀 값으로
   바꿉니다. 카드·그림·글은 전부 토큰을 쓰므로 여기서만 바뀝니다. 툴팁·팝업은 body 에
   달려 있어 `body[data-cvtheme="quantum"]` 로 같이 고릅니다. ─────────────────────── */
.cv3home[data-cvtheme="quantum"], body[data-cvtheme="quantum"] .cv3pop, body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) {
  --hx-fill: #0f0f24; --hx-fill2: #12122a; --hx-bg: #0a0a1a; --hx-eggshell: #0a0a1a;
  --hx-line: rgba(0,240,255,.16); --hx-line2: rgba(0,240,255,.10);
  --hx-txt: #ffffff; --hx-txt2: rgba(255,255,255,.85); --hx-mut: rgba(255,255,255,.7); --hx-mut2: rgba(255,255,255,.5);
  --hx-mint: #00e5a0; --hx-mint-deep: #00e5a0; --hx-mint-bg: rgba(0,229,160,.14);
  --hx-champagne: rgba(255,215,0,.16); --hx-flame: #ffd700; --hx-claret: #ff00a0;
  --hx-lake: #00f0ff; --hx-moss: #00e5a0; --hx-royal: #8b5cf6; --hx-powder: rgba(139,92,246,.18);
  --hx-moonstone: #00f0ff; --hx-deepstone: #8b5cf6;
  --q-cyan: #00f0ff; --q-violet: #8b5cf6; --q-magenta: #ff00a0; --q-emerald: #00e5a0; --q-gold: #ffd700; --q-orange: #ff6b35;
  color-scheme: dark;
}
/* 마크 색 — 호흡 시안 · 심박 마젠타 · 움직임·스트레스 오렌지 · 재실·밤 에메랄드 · 위치·감시 바이올렛 */
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-br   { --c: var(--q-cyan);    --c-bg: rgba(0,240,255,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-hr   { --c: var(--q-magenta); --c-bg: rgba(255,0,160,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-mv   { --c: var(--q-orange);  --c-bg: rgba(255,107,53,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-pres { --c: var(--q-emerald); --c-bg: rgba(0,229,160,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-fall { --c: var(--q-magenta); --c-bg: rgba(255,0,160,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-dist,
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-watch { --c: var(--q-violet); --c-bg: rgba(139,92,246,.14); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig.is-log  { --c: rgba(255,255,255,.6); --c-bg: rgba(255,255,255,.06); }
/* 바탕 · 헤더 · 패널 (머스터드 → 딥 네이비 유리) */
.cv3home[data-cvtheme="quantum"] { background: #050510; color: var(--hx-txt); }
.cv3home[data-cvtheme="quantum"] .cv3home-bd { background: #0a0a1a; }
.cv3home[data-cvtheme="quantum"] .cv3home-hd { background: rgba(15,15,36,.85); border-color: rgba(0,240,255,.15); color: #fff; }
.cv3home[data-cvtheme="quantum"] .cv3home-hd h2, .cv3home[data-cvtheme="quantum"] .cv3home-sub { color: #fff; }
.cv3home[data-cvtheme="quantum"] .cv3home-side,
.cv3home[data-cvtheme="quantum"] .cv3home-right {
  background: linear-gradient(180deg, #12122a 0%, #0f0f24 60%, #0a0a1a 100%);
  border-color: rgba(0,240,255,.15); color: var(--hx-txt);
  box-shadow: inset 0 0 0 1px rgba(0,240,255,.06), 0 0 40px rgba(0,240,255,.05);
}
.cv3home[data-cvtheme="quantum"] .cv3home-split { background: rgba(0,240,255,.12); }
/* 카드 — 유리 + 시안 테두리, 머리는 계열색 글로우 */
.cv3home[data-cvtheme="quantum"] .cv3home-sig {
  background: var(--hx-card, var(--hx-fill)); border-color: color-mix(in srgb, var(--c) 35%, rgba(0,240,255,.15));
  box-shadow: 0 0 0 1px rgba(0,240,255,.04), 0 10px 30px -18px color-mix(in srgb, var(--c) 60%, transparent);
}
.cv3home[data-cvtheme="quantum"] .cv3home-sig-h { background: color-mix(in srgb, var(--c) 14%, var(--hx-card, var(--hx-fill))); border-bottom-color: color-mix(in srgb, var(--c) 28%, transparent); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--c) 25%, transparent), 0 0 60px color-mix(in srgb, var(--c) 10%, transparent); }
.cv3home[data-cvtheme="quantum"] .cv3home-ico { background: color-mix(in srgb, var(--c) 22%, var(--hx-fill)); color: var(--c); }
.cv3home[data-cvtheme="quantum"] .cv3home-cat-t { background: rgba(0,240,255,.06); border-left-color: var(--q-cyan); color: #fff; }
.cv3home[data-cvtheme="quantum"] .cv3home-hero { background: linear-gradient(135deg, #12122a, #0f0f24); border-color: rgba(0,240,255,.18); }
.cv3home[data-cvtheme="quantum"] .cv3home-hero-t, .cv3home[data-cvtheme="quantum"] .cv3home-hero-k { color: #fff; }
.cv3home[data-cvtheme="quantum"] .cv3home-tile { background: rgba(15,15,36,.85); border-color: rgba(0,240,255,.15); color: #fff; }
.cv3home[data-cvtheme="quantum"] .cv3home-tile.is-ok { border-color: rgba(0,229,160,.5); }
.cv3home[data-cvtheme="quantum"] .cv3home-tile.is-crit { border-color: rgba(255,0,160,.5); }
.cv3home[data-cvtheme="quantum"] .cv3home-zone { background: var(--q-emerald); color: #0a0a1a; border-color: transparent; }
/* 알약 · 칩 · 상태 */
.cv3home[data-cvtheme="quantum"] .cv3home-sig-p { background: rgba(255,255,255,.08); color: var(--hx-txt2); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig-p.is-ok   { background: rgba(0,229,160,.16); color: var(--q-emerald); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig-p.is-warn { background: rgba(255,215,0,.16); color: var(--q-gold); }
.cv3home[data-cvtheme="quantum"] .cv3home-sig-p.is-crit { background: rgba(255,0,160,.16); color: var(--q-magenta); }
.cv3home[data-cvtheme="quantum"] .cv3home-delta { background: rgba(255,255,255,.08); color: var(--hx-mut); }
.cv3home[data-cvtheme="quantum"] .cv3home-delta.is-up { background: rgba(255,107,53,.18); color: var(--q-orange); }
.cv3home[data-cvtheme="quantum"] .cv3home-delta.is-dn { background: rgba(139,92,246,.18); color: #c3b6ff; }
.cv3home[data-cvtheme="quantum"] .cv3home-meta .is-up { color: var(--q-gold); }
.cv3home[data-cvtheme="quantum"] .cv3home-meta .is-dn { color: #c3b6ff; }
.cv3home[data-cvtheme="quantum"] .cv3home-cat-st.is-ok { color: var(--q-emerald); }
.cv3home[data-cvtheme="quantum"] .cv3home-cat-st.is-warn { color: var(--q-gold); }
.cv3home[data-cvtheme="quantum"] .cv3home-cat-st.is-crit { color: var(--q-magenta); }
.cv3home[data-cvtheme="quantum"] .cv3home-wbar { background: rgba(255,255,255,.05); }
.cv3home[data-cvtheme="quantum"] .cv3home-wbar.is-warn { background: rgba(255,215,0,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-wbar.is-crit { background: rgba(255,0,160,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-need { background: rgba(255,255,255,.04); }
.cv3home[data-cvtheme="quantum"] .cv3home-need.is-crit { background: rgba(255,0,160,.10); }
.cv3home[data-cvtheme="quantum"] .cv3home-kpi { background: rgba(255,255,255,.05); }
/* 그림 상자 · 파형 */
.cv3home[data-cvtheme="quantum"] .cv3home-wave { background: rgba(255,255,255,.03); border-color: rgba(0,240,255,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-wave.is-live { border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); }
.cv3home[data-cvtheme="quantum"] .cv3home-ch.is-empty .cv3home-ch-g svg { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.03) 6px 7px); }
.cv3home[data-cvtheme="quantum"] .cv3home-duo > div, .cv3home[data-cvtheme="quantum"] .cv3home-hz, .cv3home[data-cvtheme="quantum"] .cv3home-sstats div, .cv3home[data-cvtheme="quantum"] .cv3home-sgrid div { background: rgba(255,255,255,.03); border-color: rgba(0,240,255,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-night rect.is-quiet { fill: var(--q-emerald); }
.cv3home[data-cvtheme="quantum"] .cv3home-night rect.is-restless { fill: var(--q-orange); }
.cv3home[data-cvtheme="quantum"] .cv3home-night rect.is-awake { fill: var(--q-magenta); }
.cv3home[data-cvtheme="quantum"] .cv3home-bars i.over { background: var(--q-gold); }
.cv3home[data-cvtheme="quantum"] .cv3home-prop i.is-lo { background: var(--q-violet); }
.cv3home[data-cvtheme="quantum"] .cv3home-prop i.is-mid { background: var(--q-cyan); }
.cv3home[data-cvtheme="quantum"] .cv3home-prop i.is-hi { background: var(--q-orange); }
.cv3home[data-cvtheme="quantum"] .cv3home-btn { background: rgba(255,255,255,.06); border-color: rgba(0,240,255,.2); color: #fff; }
.cv3home[data-cvtheme="quantum"] .cv3home-btn.is-key { background: linear-gradient(135deg, #00f0ff, #0066ff); color: #0a0a1a; border-color: transparent; }
.cv3home[data-cvtheme="quantum"] .cv3home-theme { border-color: rgba(139,92,246,.5); color: #c3b6ff; }
.cv3home[data-cvtheme="quantum"] input, .cv3home[data-cvtheme="quantum"] .cv3home-wform input { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(0,240,255,.2); }
/* 툴팁 · 팝업 (body 스코프) */
body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) { background: rgba(15,15,36,.96); border-color: rgba(0,240,255,.25); box-shadow: 0 0 20px rgba(0,240,255,.15), 0 12px 34px rgba(0,0,0,.5); color: var(--hx-mut); }
body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) .wh { background: rgba(255,255,255,.06); color: #fff; }
body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) .wh.is-ok { background: rgba(0,229,160,.14); color: var(--q-emerald); }
body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) .wh.is-warn { background: rgba(255,215,0,.14); color: var(--q-gold); }
body[data-cvtheme="quantum"] .cvh.k-br { --k: #00f0ff; } body[data-cvtheme="quantum"] .cvh.k-hr { --k: #ff00a0; } body[data-cvtheme="quantum"] .cvh.k-mv { --k: #ff6b35; } body[data-cvtheme="quantum"] .cvh.k-pres { --k: #00e5a0; } body[data-cvtheme="quantum"] .cvh.k-dist { --k: #8b5cf6; }
body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) .sp.k-br { color: #00f0ff; } body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) .sp.k-hr { color: #ff00a0; } body[data-cvtheme="quantum"] .cv3-tip:has(.cvh) .sp.k-mv { color: #ff6b35; }
body[data-cvtheme="quantum"] .cv3pop-in { background: #0f0f24; border-color: rgba(0,240,255,.2); color: var(--hx-txt); box-shadow: 0 0 40px rgba(0,240,255,.12), 0 30px 80px rgba(0,0,0,.6); }
body[data-cvtheme="quantum"] .cv3pop-in.is-br { --c: #00f0ff; } body[data-cvtheme="quantum"] .cv3pop-in.is-hr { --c: #ff00a0; } body[data-cvtheme="quantum"] .cv3pop-in.is-mv { --c: #ff6b35; } body[data-cvtheme="quantum"] .cv3pop-in.is-pres { --c: #00e5a0; } body[data-cvtheme="quantum"] .cv3pop-in.is-fall { --c: #ff00a0; }
body[data-cvtheme="quantum"] .cv3pop-tiles div, body[data-cvtheme="quantum"] .cv3pop-tab { background: rgba(255,255,255,.05); border-color: rgba(0,240,255,.12); color: var(--hx-txt); }
body[data-cvtheme="quantum"] .cv3pop-tab.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
body[data-cvtheme="quantum"] .cv3pop-heat i { color: var(--c); }

/* ═══ 2026-09-04 로드맵 A~F — 호흡 게이지 · 달력 · 타임라인 · 타이포 ═══════════════ */
/* 호흡 게이지 — 5 띠는 심박 호보다 라벨이 많아 반지름 여유 */
.cv3home-brg svg { max-width: 300px; }

/* 월 탭 달력 히트맵 */
.cv3pop-cal { margin: 4px 0 6px; color: var(--c, var(--hx-txt)); }
.cv3pop-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px; }
.cv3pop-cal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3pop-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cv3pop-cal-g i { display: grid; place-items: center; height: 34px; border-radius: 10px; background: currentColor; cursor: help; position: relative; }
.cv3pop-cal-g i b { font-size: 11px; font-weight: 800; color: var(--hx-fill); mix-blend-mode: difference; }
.cv3pop-cal-g i.none { background: var(--hx-fill2); cursor: default; }
.cv3pop-cal-g i.none b { color: var(--hx-mut2); mix-blend-mode: normal; font-weight: 600; }
.cv3pop-cal-g i.is-now { outline: 2px solid var(--hx-txt); outline-offset: 1px; }
.cv3pop-cal-g i.is-m1 b::after { content: '일'; font-size: 11px; margin-left: 1px; }

/* 이벤트 타임라인 (오늘 있었던 일 위) */
.cv3home-tl { margin: 2px 0 6px; color: var(--c); }
.cv3home-tl svg { display: block; width: 100%; height: 26px; }
.cv3home-tl circle, .cv3home-tl rect { fill: var(--hx-royal); cursor: help; }
.cv3home-tl .is-ok { fill: var(--hx-moss); } .cv3home-tl .is-warn { fill: var(--hx-flame); } .cv3home-tl .is-crit { fill: var(--hx-claret); } .cv3home-tl .is-note { fill: var(--hx-royal); }
.cv3home-tl p { margin: 1px 0 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--hx-mut2); }
.cv3home[data-cvtheme="quantum"] .cv3home-tl .is-ok { fill: var(--q-emerald); } .cv3home[data-cvtheme="quantum"] .cv3home-tl .is-warn { fill: var(--q-gold); } .cv3home[data-cvtheme="quantum"] .cv3home-tl .is-crit { fill: var(--q-magenta); } .cv3home[data-cvtheme="quantum"] .cv3home-tl .is-note { fill: var(--q-violet); }

/* 타이포 단계 통일 (로드맵 F) — 값 850 tabular · 단위 12/700 · 상태 11/700 · 캡션 9.5 · 축 9 */
.cv3home-sig-v b, .cv3home-foot b, .cv3home-kpi b, .cv3pop-tiles b, .cv3pop-now-v b, .cv3home-sleep3 b, .cv3home-presdist b, .cv3home-tile-v { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cv3home-sig-v small, .cv3pop-now-v small { font-size: 12px; font-weight: 700; color: var(--hx-mut); }
.cv3home-meta { font-size: 11px; }
.cv3home-note-s, .cv3home-ch-n, .cv3home-ev-none { font-size: 11px; }
.cv3home-foot span, .cv3home-ch-x, .cv3home-ch-y, .cv3home-range p, .cv3home-tod p, .cv3home-night-ax, .cv3home-daily p, .cv3home-tl p { font-size: 11px; }
.cv3home-sig-k { font-size: 12px; font-weight: 800; }
/* 주 탭 — 요일 칸 7개 */
.cv3pop-week { margin: 4px 0 6px; color: var(--c, var(--hx-txt)); }
.cv3pop-week-g { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.cv3pop-week-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--hx-mut2); text-align: right; min-width: 22px; font-variant-numeric: tabular-nums; }
.cv3pop-week-y i { font-style: normal; }
.cv3pop-week-g svg { display: block; width: 100%; height: 120px; border-left: 1px solid var(--hx-line2); border-bottom: 1px solid var(--hx-line2); }
.cv3pop-week-g svg line[data-tip] { cursor: help; }
.cv3pop-week-x { display: grid; grid-template-columns: repeat(7, 1fr); margin: 4px 0 0 28px; }
.cv3pop-week-x span { text-align: center; font-size: 11px; color: var(--hx-mut2); display: flex; flex-direction: column; }
.cv3pop-week-x span b { font-size: 11px; font-weight: 800; color: var(--hx-mut); }
.cv3pop-week-x span.is-now b { color: var(--hx-txt); text-decoration: underline; text-underline-offset: 2px; }

/* ── 아주 좁은 본문(<420px · 패널을 넓히셨거나 작은 창) — 2026-09-05 실측: POBC 격자의
   글 칸이 몇 px 로 눌려 한 글자씩 세로로 늘어졌고, 히어로 세 칸도 글자가 세로로 섰습니다.
   이 폭에서는 격자를 풀고 세로로 쌓습니다. ─────────────────────────────────── */
@container cvhome (max-width: 419px) {
  .cv3home-top-r .cv3home-sig { display: flex; flex-direction: column; }
  .cv3home-top-r .cv3home-sig > .cv3home-gauge2 { max-width: 220px; margin: 0 auto; }
  .cv3home-top-r .cv3home-sig-v { justify-content: center !important; }
  .cv3home-tiles { grid-template-columns: 1fr; gap: 6px; }
  .cv3home-tile { flex-direction: row; align-items: center; gap: 8px; padding: 7px 10px; }
  .cv3home-tile .cv3home-tile-k { flex: 0 0 auto; }
  .cv3home-tile .cv3home-tile-v { margin-left: auto; }
  .cv3home-tile .cv3home-tile-s { flex: 1 1 100%; }
  .cv3home-duo { grid-template-columns: 1fr; }
  .cv3home-hd h2 { white-space: nowrap; }
}

/* ═══ 2026-09-05 1440px 실제 렌더 검토에서 잡힌 것 ═══════════════════════════ */
/* ① 「지금 값의 자리」 제목이 두 줄로 접힘 → 제목은 안 접고 설명이 다음 줄로 */
.cv3home-duo-t { flex-wrap: wrap; row-gap: 6px; }
.cv3home-duo-t > :first-child { white-space: nowrap; }
/* ② 심박 카드 아래 빈 공간 — 두 그림을 세로로 채우고, 호흡 게이지는 조금 작게 */
.cv3home-duo { flex: 1 1 auto; align-items: stretch; }
.cv3home-duo > div { display: flex; flex-direction: column; }
.cv3home-duo > div > .cv3home-hzg, .cv3home-duo > div > .cv3home-range { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.cv3home-duo .cv3home-range svg { height: 56px; }
.cv3home-brg svg { max-width: 270px; }
/* ③ 재실·위치 빈 틀 */
.cv3home-mini.is-empty { color: var(--hx-mut2); }
.cv3home-presdist.is-none b { color: var(--hx-mut2); }
.cv3home-presdist.is-none i { font-weight: 600; }
/* ⑥ 히어로 사진 자리 — 넓을 때 오른쪽 절반, 좁을 때는 아래 띠 */
.cv3home-hero { display: flex; align-items: stretch; }
.cv3home-hero-in { flex: 1 1 auto; min-width: 0; }
.cv3home-hero-ph {
  flex: 0 0 38%; margin: 12px 12px 12px 0; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--hx-line); background: color-mix(in srgb, var(--hx-fill) 60%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  color: var(--hx-mut2); transition: border-color .2s, background-color .2s;
}
.cv3home-hero-ph:hover { border-color: var(--hx-mint); background: var(--hx-mint-bg); color: var(--hx-mint-deep); }
.cv3home-hero-ph-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--hx-fill2); display: grid; place-items: center; }
.cv3home-hero-ph-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.cv3home-hero-ph b { font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home-hero-ph > span:last-of-type { font-size: 11px; line-height: 1.5; }
@container cvhome (max-width: 620px) {
  .cv3home-hero { flex-direction: column; }
  .cv3home-hero-ph { flex: 0 0 auto; margin: 0 12px 12px; padding: 12px; flex-direction: row; text-align: left; gap: 8px; }
  .cv3home-hero-ph br { display: none; }
}
.cv3home[data-cvtheme="quantum"] .cv3home-hero-ph { border-color: rgba(0,240,255,.25); background: rgba(255,255,255,.03); }
.cv3home[data-cvtheme="quantum"] .cv3home-hero-ph b { color: #fff; }
/* ② 심박 두 그림 — 게이지 칸을 조금 넓게 */
.cv3home-sig.is-hr .cv3home-duo { grid-template-columns: 1.35fr 1fr; }
/* 수면 도넛이 `.cv3home-night svg{width:100%}` 에 걸려 한 줄을 통째로 차지했습니다(1440 실측) */
.cv3home-night .cv3home-donut, .cv3home-night-lg .cv3home-donut { width: 34px; height: 34px; flex: 0 0 34px; }
/* 오늘 재실 리본 (재실·위치 카드) */
.cv3home-pribbon { margin-top: 10px; color: var(--c); }
.cv3home-pribbon .cv3home-ch-h em { display: inline; }
.cv3home-pribbon-b { display: grid; grid-template-columns: repeat(144, 1fr); gap: 6px; height: 14px; }
.cv3home-pribbon-b i { display: block; border-radius: 1px; background: currentColor; }
.cv3home-pribbon-b i.none { background: var(--hx-line2); }
.cv3home-pribbon-b i.fut { background: transparent; border-bottom: 1px solid var(--hx-line2); }
.cv3home-pribbon .cv3home-ch-x { margin-left: 0; }
/* 강 띠 캡션 — 가운데 글이 길면 잘라서 한 줄 (1440 실측: 두 줄로 어색하게 접힘) */
.cv3home-range p span:nth-child(2) { flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 6px; }
/* 적응 기준선 총알 차트 */
.cv3home-blbars { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cv3home-blbar p:first-child { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--hx-mut); }
.cv3home-blbar p:first-child b { font-weight: 800; color: var(--hx-txt); }
.cv3home-blbar p:first-child em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--hx-mut2); }
.cv3home-blbar-t { position: relative; height: 14px; border-radius: 10px; background: var(--hx-fill2); overflow: visible; }
.cv3home-blbar-t i { position: absolute; top: 0; height: 100%; display: block; }
.cv3home-blbar-t i.ref { background: color-mix(in srgb, var(--c) 18%, transparent); border-radius: 10px; }
.cv3home-blbar-t i.usual { background: var(--c); opacity: .75; border-radius: 4px; cursor: help; top: 3px; height: 8px; }
.cv3home-blbar-t i.mean { width: 2px; margin-left: -1px; background: var(--hx-txt); top: -3px; height: 20px; border-radius: 1px; }
.cv3home-blbar .cv3home-ch-x { margin-left: 0; margin-top: 2px; }
.cv3home-blbar[data-key="blbar:hr"] { --c: var(--hx-claret); }
.cv3home-blbar[data-key="blbar:br"] { --c: var(--hx-lake); }
.cv3home[data-cvtheme="quantum"] .cv3home-blbar[data-key="blbar:hr"] { --c: var(--q-magenta); }
.cv3home[data-cvtheme="quantum"] .cv3home-blbar[data-key="blbar:br"] { --c: var(--q-cyan); }

/* ═══ 2026-09-05 「데이터 출력을 끊김 없이」 — 출처·신선도 띠 / 5분 창 채우기 ═══ */
.cv3home-src {
  margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--hx-line2);
}
.cv3home-src > p {
  margin: 0; display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--hx-mut2);
}
.cv3home-src > p b { font-size: 11px; font-weight: 800; color: var(--hx-mut); }
.cv3home-src > p em {
  margin-left: auto; font-style: normal; font-weight: 700; color: var(--hx-mut);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cv3home-src.is-held > p em { color: var(--hx-flame); }
/* 5분 창 — 10초마다 눈금이 새겨진 띠가 초 단위로 찹니다 */
.cv3home-win-t {
  position: relative; height: 8px; margin-top: 5px; border-radius: 4px; overflow: hidden;
  background: var(--hx-fill2);
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(3.3333% - 1px),
    color-mix(in srgb, var(--hx-line) 70%, transparent) calc(3.3333% - 1px),
    color-mix(in srgb, var(--hx-line) 70%, transparent) 3.3333%);
}
.cv3home-win-t i {
  display: block; height: 100%; border-radius: 4px;
  background: color-mix(in srgb, var(--c) 55%, transparent);
  transition: width .9s linear;
}
.cv3home-win-x {
  margin: 3px 0 0; display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums;
}
.cv3home-win-x em {
  margin-left: auto; margin-right: auto; font-style: normal; font-weight: 700;
  color: var(--c); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .cv3home-win-t i { transition: none; } }
.cv3home[data-cvtheme="quantum"] .cv3home-src { border-top-color: rgba(0,240,255,.12); }
.cv3home[data-cvtheme="quantum"] .cv3home-win-t { background: rgba(255,255,255,.06); }
/* 창을 지나 다음 값을 기다리는 중 — 다 찬 막대가 서 있지 않고 결이 흐릅니다 */
@keyframes cvhWait { to { background-position: 22px 0; } }
.cv3home-win-t.is-wait i {
  background-image: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--c) 62%, transparent) 0 8px,
    color-mix(in srgb, var(--c) 34%, transparent) 8px 11px);
  animation: cvhWait 1.1s linear infinite;
}
.cv3home-win-t.is-wait + .cv3home-win-x em { color: var(--hx-mut); }
@media (prefers-reduced-motion: reduce) { .cv3home-win-t.is-wait i { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-05 대표님: 「차트와 그래프의 색상에 네온 팔레트를 적용해주세요」
   출처: Shutterstock 「시선을 사로잡는 네온 컬러 팔레트 25가지」(2019-03-25)
         hex 는 그 글의 견본 이미지에서 그대로 읽은 값입니다 — 지어내지 않았습니다.
            13. 빛나는 선   #01FFC3 · #01FFFF · #FFB3FD · #9D72FF
             8. 톡톡 튀는 핑크 #FFDEF3 · #FF61BE · #3B55CE · #35212A
             4. 비비드한 양치식물 #FDC7D7 · #FF9DE6 · #A5D8F3 · #E8E500
            11. 빛나는 산호  #79FFFE · #FEA0FE · #FF8B8B · #F85125

   ⚠ 왜 «네온 테마» 인가 — 네온은 **어두운 바탕에서만** 읽힙니다(실측):
        흰 카드 위: 시안 1.25 · 옐로 1.34 · 민트 1.30 → 선이 사라집니다
        #35212A 위: 시안 11.94 · 옐로 11.15 · 민트 11.48 · 핑크 5.49 · 퍼플 4.48
     그래서 밝은 테마를 네온으로 칠하지 않고, 네온이 실제로 사는 자리를 만들었습니다.
   ⚠ 검증기(dataviz): 색각 이상 분리 ΔE 13.6(protan) · 정상 시각 18.5 · 바탕 대비 5/5 통과.
     «명도 띠» 만 실패인데, 그 검사는 중간 밝기 바탕을 전제로 합니다 — 어두운 바탕에서
     밝은 마크는 옳습니다. 예외로 기록합니다.
   ⚠ 바탕(#35212A)은 «차트 색» 이 아니라 UI 입니다. 같은 글 8번 팔레트의 어두운 짝을 썼습니다.
   ═══════════════════════════════════════════════════════════════════════ */
.cv3home[data-cvtheme="neon"],
body[data-cvtheme="neon"] .cv3pop,
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) {
  --n-cyan: #01FFFF; --n-mint: #01FFC3; --n-pink: #FF61BE; --n-yellow: #E8E500;
  --n-purple: #9D72FF; --n-lilac: #FFB3FD; --n-aqua: #79FFFE;
  --n-salmon: #FF8B8B; --n-coral: #F85125; --n-ink: #282B2B;   /* Jet — 중립 검정 */

  --hx-fill: #2F3232; --hx-fill2: #383B3B; --hx-bg: #1C1E1E; --hx-eggshell: #1C1E1E;
  --hx-line: rgba(1, 255, 255, .16); --hx-line2: rgba(255, 255, 255, .10);
  --hx-txt: #FFFFFF; --hx-txt2: rgba(255,255,255,.86);
  --hx-mut: rgba(255,255,255,.72); --hx-mut2: rgba(255,255,255,.52);
  --hx-mint: var(--n-mint); --hx-mint-deep: var(--n-mint); --hx-mint-bg: rgba(1,255,195,.14);
  --hx-champagne: rgba(255,139,139,.18); --hx-flame: var(--n-salmon); --hx-claret: var(--n-coral);
  --hx-lake: var(--n-cyan); --hx-moss: var(--n-mint); --hx-royal: var(--n-purple);
  --hx-powder: rgba(157,114,255,.18); --hx-moonstone: var(--n-cyan); --hx-deepstone: var(--n-purple);
  color-scheme: dark;
}
/* ── 차트·그래프 마크 (이 요청의 본체) ─────────────────────────────────── */
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-br    { --c: var(--n-cyan);   --c-bg: rgba(1,255,255,.12); }
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-hr    { --c: var(--n-pink);   --c-bg: rgba(255,97,190,.12); }
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-mv    { --c: var(--n-yellow); --c-bg: rgba(232,229,0,.12); }
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-pres  { --c: var(--n-mint);   --c-bg: rgba(1,255,195,.12); }
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-fall  { --c: var(--n-coral);  --c-bg: rgba(248,81,37,.14); }
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-dist,
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-watch { --c: var(--n-purple); --c-bg: rgba(157,114,255,.14); }
.cv3home[data-cvtheme="neon"] .cv3home-sig.is-log   { --c: var(--n-lilac);  --c-bg: rgba(255,179,253,.10); }
.cv3home[data-cvtheme="neon"] .cv3home-blbar[data-key="blbar:hr"] { --c: var(--n-pink); }
.cv3home[data-cvtheme="neon"] .cv3home-blbar[data-key="blbar:br"] { --c: var(--n-cyan); }
/* 밤 띠 · 비율 띠 · 타임라인 */
.cv3home[data-cvtheme="neon"] .cv3home-night rect.is-quiet    { fill: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-night rect.is-restless { fill: var(--n-yellow); }
.cv3home[data-cvtheme="neon"] .cv3home-night rect.is-awake    { fill: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-donut circle.is-quiet    { stroke: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-donut circle.is-restless { stroke: var(--n-yellow); }
.cv3home[data-cvtheme="neon"] .cv3home-donut circle.is-awake    { stroke: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-prop i.is-lo  { background: var(--n-purple); }
.cv3home[data-cvtheme="neon"] .cv3home-prop i.is-mid { background: var(--n-cyan); }
.cv3home[data-cvtheme="neon"] .cv3home-prop i.is-hi  { background: var(--n-yellow); }
.cv3home[data-cvtheme="neon"] .cv3home-bars i.over   { background: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-tl .is-ok   { fill: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-tl .is-warn { fill: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-tl .is-crit { fill: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-tl .is-note { fill: var(--n-purple); }
/* 상태색 — 예약 (낱말·아이콘과 늘 함께 갑니다) */
.cv3home[data-cvtheme="neon"] .cv3home-sig-p.is-ok   { background: rgba(1,255,195,.16); color: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-sig-p.is-warn { background: rgba(255,139,139,.18); color: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-sig-p.is-crit { background: rgba(248,81,37,.20); color: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-cat-st.is-ok   { color: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-cat-st.is-warn { color: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-cat-st.is-crit { color: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-rules li.is-ok i   { background: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-rules li.is-acc i  { background: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-rules li.is-warn i { background: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-rules li.is-crit i { background: var(--n-coral); }
/* ── 껍데기 (UI · 차트 색이 아닙니다) ──────────────────────────────────── */
.cv3home[data-cvtheme="neon"] { background: var(--n-ink); color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-bd { background: #1C1E1E; }
.cv3home[data-cvtheme="neon"] .cv3home-hd { background: rgba(47,50,50,.94); border-color: rgba(1,255,255,.20); color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-hd h2, .cv3home[data-cvtheme="neon"] .cv3home-sub { color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-side,
.cv3home[data-cvtheme="neon"] .cv3home-right {
  background: linear-gradient(180deg, #363939 0%, #2C2F2F 60%, #1F2222 100%);
  border-color: rgba(1,255,255,.16); color: var(--hx-txt);
  box-shadow: inset 0 0 0 1px rgba(1,255,255,.06), 0 0 40px rgba(1,255,255,.05);
}
.cv3home[data-cvtheme="neon"] .cv3home-split { background: rgba(1,255,255,.16); }
.cv3home[data-cvtheme="neon"] .cv3home-sig {
  background: var(--hx-card, var(--hx-fill)); border-color: color-mix(in srgb, var(--c) 34%, rgba(255,179,253,.18));
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--c) 55%, transparent);
}
.cv3home[data-cvtheme="neon"] .cv3home-sig-h { background: color-mix(in srgb, var(--c) 13%, var(--hx-card, var(--hx-fill))); border-bottom-color: color-mix(in srgb, var(--c) 26%, transparent); }
.cv3home[data-cvtheme="neon"] .cv3home-sig:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--c) 28%, transparent), 0 0 60px color-mix(in srgb, var(--c) 12%, transparent); }
.cv3home[data-cvtheme="neon"] .cv3home-ico { background: color-mix(in srgb, var(--c) 20%, var(--hx-fill)); color: var(--c); }
.cv3home[data-cvtheme="neon"] .cv3home-cat-t { background: rgba(1,255,255,.07); border-left-color: var(--n-cyan); color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-hero { background: linear-gradient(135deg, #363939, #2A2D2D); border-color: rgba(1,255,255,.18); }
.cv3home[data-cvtheme="neon"] .cv3home-hero-t, .cv3home[data-cvtheme="neon"] .cv3home-hero-k { color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-hero-ph { border-color: rgba(1,255,255,.26); background: rgba(255,255,255,.03); }
.cv3home[data-cvtheme="neon"] .cv3home-hero-ph b { color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-tile { background: rgba(40,43,43,.88); border-color: rgba(1,255,255,.16); color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-zone { background: var(--n-mint); color: var(--n-ink); border-color: transparent; }
.cv3home[data-cvtheme="neon"] .cv3home-duo > div,
.cv3home[data-cvtheme="neon"] .cv3home-hz,
.cv3home[data-cvtheme="neon"] .cv3home-sstats div,
.cv3home[data-cvtheme="neon"] .cv3home-sgrid div,
.cv3home[data-cvtheme="neon"] .cv3home-need,
.cv3home[data-cvtheme="neon"] .cv3home-kpi { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.cv3home[data-cvtheme="neon"] .cv3home-wave { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
.cv3home[data-cvtheme="neon"] .cv3home-wave.is-live { border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 20%, transparent); }
.cv3home[data-cvtheme="neon"] .cv3home-btn { background: rgba(255,255,255,.06); border-color: rgba(1,255,255,.26); color: #fff; }
.cv3home[data-cvtheme="neon"] .cv3home-btn.is-key { background: linear-gradient(135deg, var(--n-cyan), var(--n-purple)); color: var(--n-ink); border-color: transparent; }
.cv3home[data-cvtheme="neon"] .cv3home-theme { border-color: rgba(1,255,195,.55); color: var(--n-mint); }
.cv3home[data-cvtheme="neon"] input, .cv3home[data-cvtheme="neon"] .cv3home-wform input { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(1,255,255,.24); }
.cv3home[data-cvtheme="neon"] .cv3home-src { border-top-color: rgba(255,255,255,.14); }
.cv3home[data-cvtheme="neon"] .cv3home-win-t { background: rgba(255,255,255,.07); }
/* 툴팁 · 팝업 (body 스코프) */
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) { background: rgba(40,43,43,.97); border-color: rgba(1,255,255,.30); box-shadow: 0 0 22px rgba(255,97,190,.16), 0 12px 34px rgba(0,0,0,.5); color: var(--hx-mut); }
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) .wh { background: rgba(255,255,255,.07); color: #fff; }
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) .wh.is-ok { background: rgba(1,255,195,.14); color: var(--n-mint); }
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) .wh.is-warn { background: rgba(255,139,139,.16); color: var(--n-salmon); }
body[data-cvtheme="neon"] .cvh.k-br { --k: #01FFFF; } body[data-cvtheme="neon"] .cvh.k-hr { --k: #FF61BE; }
body[data-cvtheme="neon"] .cvh.k-mv { --k: #E8E500; } body[data-cvtheme="neon"] .cvh.k-pres { --k: #01FFC3; }
body[data-cvtheme="neon"] .cvh.k-dist { --k: #9D72FF; }
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) .sp.k-br { color: #01FFFF; }
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) .sp.k-hr { color: #FF61BE; }
body[data-cvtheme="neon"] .cv3-tip:has(.cvh) .sp.k-mv { color: #E8E500; }
body[data-cvtheme="neon"] .cv3pop-in { background: #2F3232; border-color: rgba(1,255,255,.24); color: var(--hx-txt); box-shadow: 0 0 40px rgba(255,97,190,.14), 0 30px 80px rgba(0,0,0,.6); }
body[data-cvtheme="neon"] .cv3pop-in.is-br { --c: #01FFFF; } body[data-cvtheme="neon"] .cv3pop-in.is-hr { --c: #FF61BE; }
body[data-cvtheme="neon"] .cv3pop-in.is-mv { --c: #E8E500; } body[data-cvtheme="neon"] .cv3pop-in.is-pres { --c: #01FFC3; }
body[data-cvtheme="neon"] .cv3pop-in.is-fall { --c: #F85125; }
body[data-cvtheme="neon"] .cv3pop-tiles div, body[data-cvtheme="neon"] .cv3pop-tab { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--hx-txt); }
body[data-cvtheme="neon"] .cv3pop-tab.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
body[data-cvtheme="neon"] .cv3pop-heat i { color: var(--c); }

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-05 대표님: 「카드 배경색을 첨부 팔레트로 적용해 주세요」 (Platinum #E8E7E3)
   HELIX 색상 팔레트 라이브러리 · 6. Terracotta 의 Platinum 입니다.

   ⚠ 그냥 칠하면 두 곳이 깨집니다(실측, 흰 카드 → Platinum):
        호흡선 Lake Blue  3.32 → **2.68** (3:1 미달 — 2px 선이 묻힙니다)
        흐린 글씨 #93968C 3.01 → **2.43**
     그래서 두 가지를 함께 합니다:
        ① **그림 칸은 흰 판**으로 둡니다 → 마크는 검증된 흰 바탕 대비를 그대로 지킵니다
           (그림 판이 카드 위에 1.24:1 로 떠 보여 «그리는 자리» 가 분명해집니다 — dataviz 규격)
        ② 흐린 글씨를 어둡게: --hx-mut #6B6F63→#4E5148(6.54) · --hx-mut2 #93968C→#63665C(4.73)
           위계는 지킵니다: 글 11.54 > 보조 6.54 > 흐림 4.73
   ⚠ 어두운 테마(퀀텀·네온)는 속성 선택자라 우선순위가 높아 그대로 자기 색을 씁니다.
   ═══════════════════════════════════════════════════════════════════════ */
/*  ⚠ 처음엔 `--hx-fill` 자체를 Platinum 으로 바꿨습니다 — **잘못이었습니다.**
    `--hx-fill` 은 카드만 쓰는 토큰이 아닙니다. 헤더 바(.cv3home-hd)·히어로 세 칸
    (.cv3home-tile)·구간 칸까지 함께 회색이 됐습니다(실측 2026-09-05: 헤더 배경
    rgb(232,231,227)). 카드 전용 토큰 `--hx-card` 를 따로 둡니다. */
.cv3home {
  --hx-card: #FFFFFF;          /* 카드 배경 = 흰색 (2026-09-05 대표님 지시) */
  --hx-plot: #FFFFFF;          /* 그림 칸(선·면이 놓이는 흰 판) */
  --hx-line: #CFCEC8;
  --hx-line2: #DCDBD6;
  --hx-mut: #4E5148;
  --hx-mut2: #63665C;
}
.cv3home[data-cvtheme="quantum"] { --hx-card: #0f0f24; }
.cv3home[data-cvtheme="neon"]    { --hx-card: #282B2B; }   /* Jet 그대로 */
.cv3home-sig { background: var(--hx-card, var(--hx-fill)); }
.cv3home-sig-h { background: color-mix(in srgb, var(--c) 8%, var(--hx-card, var(--hx-fill))); }
.cv3home-ev i { box-shadow: 0 0 0 2px var(--hx-card, var(--hx-fill)); }
/* 그림 칸 — 흰 판. 선 굵기가 얇은 것들만 올립니다. */
.cv3home-ch-g svg,
.cv3home-range svg,
.cv3home-daily svg,
.cv3home-night svg,
.cv3home-tod svg,
.cv3home-hzg svg,
.cv3home-spark {
  background: var(--hx-plot, transparent);
  border-radius: 10px;
}
.cv3home-ch-g svg { border-radius: 0 8px 0 0; }
.cv3home-wave { background: var(--hx-plot, var(--hx-fill2)); }
.cv3home-pribbon-b, .cv3home-win-t, .cv3home-bars { background-color: var(--hx-plot, transparent); }
.cv3home-bars { border-radius: 10px; padding: 0 4px; box-sizing: border-box; }
/* 어두운 테마에서는 흰 판을 쓰지 않습니다 — 어두운 판입니다 */
.cv3home[data-cvtheme="quantum"] { --hx-plot: rgba(255,255,255,.04); }
.cv3home[data-cvtheme="neon"]    { --hx-plot: rgba(255,255,255,.05); }
body[data-cvtheme="quantum"] .cv3pop, body[data-cvtheme="neon"] .cv3pop { --hx-plot: rgba(255,255,255,.04); }
/* 팝업·툴팁도 같은 판을 씁니다(밝은 테마 기본) */
.cv3pop-in { --hx-plot: #FFFFFF; }
.cv3pop-chart, .cv3pop-week-g svg { background: var(--hx-plot); border-radius: 10px; }
/* 네온 — 밝은 바탕이 박혀 있던 칩·줄을 마저 덮습니다
   (실측 2026-09-05: 「▲ 2 직전보다」 칩이 연한 복숭아 바탕에 살몬 글씨로 안 보였습니다) */
.cv3home[data-cvtheme="neon"] .cv3home-delta { background: rgba(255,255,255,.08); color: var(--hx-mut); }
.cv3home[data-cvtheme="neon"] .cv3home-delta i { color: rgba(255,255,255,.62); }
.cv3home[data-cvtheme="neon"] .cv3home-delta.is-up { background: rgba(255,139,139,.20); color: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-delta.is-up i { color: var(--n-salmon); opacity: .8; }
.cv3home[data-cvtheme="neon"] .cv3home-delta.is-dn { background: rgba(157,114,255,.20); color: #C9B4FF; }
.cv3home[data-cvtheme="neon"] .cv3home-delta.is-dn i { color: #C9B4FF; opacity: .8; }
.cv3home[data-cvtheme="neon"] .cv3home-meta .is-up { color: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-meta .is-dn { color: #C9B4FF; }
.cv3home[data-cvtheme="neon"] .cv3home-wbar { background: rgba(255,255,255,.06); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar.is-warn { background: rgba(255,139,139,.14); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar.is-crit { background: rgba(248,81,37,.16); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar-h b { color: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar.is-warn .cv3home-wbar-h b { color: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar.is-crit .cv3home-wbar-h b { color: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar-b i { background: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar-b i.is-warn { background: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar-b i.is-crit { background: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-wbar-b i.is-note { background: var(--n-purple); }
.cv3home[data-cvtheme="neon"] .cv3home-need.is-crit { background: rgba(248,81,37,.12); }
.cv3home[data-cvtheme="neon"] .cv3home-need.is-warn { border-left-color: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-need.is-crit { border-left-color: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-ev li.is-ok i   { background: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-ev li.is-warn i { background: var(--n-salmon); }
.cv3home[data-cvtheme="neon"] .cv3home-ev li.is-crit i { background: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-ev li.is-crit span { color: var(--n-coral); }
.cv3home[data-cvtheme="neon"] .cv3home-ev i { box-shadow: 0 0 0 2px var(--hx-fill); }
.cv3home[data-cvtheme="neon"] .cv3home-kpi.is-live b { color: var(--n-mint); }
.cv3home[data-cvtheme="neon"] .cv3home-hz.is-cur { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); }
.cv3home[data-cvtheme="neon"] .cv3home-src.is-held > p em { color: var(--n-salmon); }

/*  2026-09-05 — 「차트·그래프만 네온」을 어두운 판(Jet)으로 시도했다가 **되돌렸습니다.**
    대표님: 「갑자기 검은색 바탕이 들어 갔어요.」 그림 칸을 검게 깐 것이 원인입니다.
    네온 마크는 밝은 바탕에서 1.25:1(시안)이라 못 읽혀 판을 어둡게 했던 것인데,
    검은 판 자체가 원치 않는 변화였습니다. 흰 판 + 검증된 라이브러리 색으로 복귀합니다.
    카드 종류별 `--neon` 값은 남겨 둡니다 — 다시 쓰실 때 그대로 씁니다(R0-6). */
.cv3home-sig.is-br    { --neon: #01FFFF; }
.cv3home-sig.is-hr    { --neon: #FF61BE; }
.cv3home-sig.is-mv    { --neon: #E8E500; }
.cv3home-sig.is-pres  { --neon: #01FFC3; }
.cv3home-sig.is-dist  { --neon: #9D72FF; }
.cv3home-sig.is-fall  { --neon: #F85125; }
.cv3home-sig.is-watch { --neon: #9D72FF; }
.cv3home-sig.is-log   { --neon: #FFB3FD; }

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-05 대표님 선택: 「네온을 진하게 조정해 흰 판에」
   Shutterstock 네온의 **색조는 살리고 명도만 내려** 흰 판에서 읽히게 했습니다.
   (원색 그대로는 흰 바탕에서 시안 1.25:1 — 선이 사라집니다. 검은 판은 빼기로 했습니다.)

        지표      네온 원색(글)              → 진하게 조정   흰 판 / Platinum
        호흡      #01FFFF 13.빛나는 선        #088AB6        3.92 / 3.16
        심박      #FF61BE  8.톡톡 튀는 핑크    #DD3311        5.45 / 4.40
        움직임    #E8E500  4.비비드한 양치식물  #A27304        4.25 / 3.43
        재실      #01FFC3 13.빛나는 선        #007747        7.42 / 6.00
        위치      #9D72FF 13.빛나는 선        #0D4AC6        8.43 / 6.81

   ⚠ 다섯을 **같은 명도**로 진하게 하면 서로 붙습니다(민트↔라임 ΔE 10.5 · 핑크↔산호 11.7).
     명도를 벌리고 움직임을 산호→앰버로 옮겨 풀었습니다.
   ⚠ 검증기 통과: 명도 띠 ✓ · 채도 ✓ · 색각 이상 ΔE 8.8(deutan) ✓ · 정상 시각 20.4 ✓ · 대비 5/5 ✓
     한 그림에 같이 놓이는 조합(기준선 {호흡,심박} · 밤 띠 {재실,움직임,심박})도 따로 통과.
   ⚠ 상태색(좋음·주의·경보)은 **건드리지 않습니다** — 예약된 색입니다.
   ═══════════════════════════════════════════════════════════════════════ */
/*  2026-09-05 대표님 첨부 6장(플랫 차트 시트 2 · 파스텔 버블 · 스펙트럼 램프 2 · 시안/주황 시트)
    → 공통 계열인 **시안 · 코랄 · 앰버 · 초록 · 네이비** 로 다시 잡았습니다.
    ⚠ hex 는 그림에서 읽을 수 없어(첨부는 이미지입니다) **계열만 참고**해 계산으로 뽑았습니다.
       정확한 hex 를 주시면 그대로 바꿔 넣겠습니다.
    ⚠ 첨부 팔레트는 **채운 도형**(막대·파이) 용이라 얇은 선에는 연합니다. 흰 카드에서
       2px 선이 읽히는 지점까지 명도를 내렸습니다(3.9~7.5:1).
    ⚠ 다섯을 같은 명도로 두면 붙습니다 — 명도를 벌렸습니다.
       검증기: 명도 띠 ✓ · 채도 ✓ · 대비 5/5 ✓ · 한 그림에 같이 놓이는 {호흡,심박} ΔE 32.3 ✓
    ⚠ 첨부의 코랄↔앰버는 적록색각에서 ΔE 0.9 로 구분이 안 됩니다. 그래서 **한 그림 안에는
       같이 두지 않습니다** — 밤 띠는 색이 아니라 **순서 척도**(한 색의 밝기 3단)로 바꿨습니다. */
.cv3home {
  --nb-br: #088AB6;   /* 호흡 · 시안 */
  --nb-hr: #DD3311;   /* 심박 · 코랄 */
  --nb-mv: #A27304;   /* 움직임 · 앰버 */
  --nb-pres: #007747; /* 재실 · 초록 */
  --nb-pos: #0D4AC6;  /* 위치 · 네이비 */
}
.cv3home[data-cvtheme="library"] .cv3home-sig.is-br   { --c: var(--nb-br);   --c-bg: #E1F1F7; }
.cv3home[data-cvtheme="library"] .cv3home-sig.is-hr   { --c: var(--nb-hr);   --c-bg: #FCE6E1; }
.cv3home[data-cvtheme="library"] .cv3home-sig.is-mv   { --c: var(--nb-mv);   --c-bg: #F7EFD9; }
.cv3home[data-cvtheme="library"] .cv3home-sig.is-pres { --c: var(--nb-pres); --c-bg: #DEEFE7; }
.cv3home[data-cvtheme="library"] .cv3home-sig.is-fall { --c: var(--nb-hr);   --c-bg: #FCE6E1; }
.cv3home[data-cvtheme="library"] .cv3home-sig.is-dist,
.cv3home[data-cvtheme="library"] .cv3home-sig.is-watch { --c: var(--nb-pos); --c-bg: #DFE6F8; }
.cv3home[data-cvtheme="library"] .cv3home-blbar[data-key="blbar:hr"] { --c: var(--nb-hr); }
.cv3home[data-cvtheme="library"] .cv3home-blbar[data-key="blbar:br"] { --c: var(--nb-br); }
/*  밤(조용→뒤척임→깸)은 **범주가 아니라 순서**입니다. 세 가지 색을 쓰면 적록색각에서
    코랄↔앰버가 붙습니다(ΔE 0.9). 한 색의 **밝기 3단**으로 바꿉니다 — 순서가 눈에 읽힙니다. */
/*  ⚠ 여기가 «같은 계열» 의 진짜 출처였습니다(2026-09-05 실측).
    앞서 저는 조용→뒤척임→깨어 가 **순서**라는 이유로 초록 한 색의 농담
    (#9BD3B7 → #2E9E6B → #00563A)으로 만들어 뒀습니다. 순서로는 맞지만
    **9px 짜리 점으로 줄이면 셋이 구별되지 않습니다** — 대표님 지적대로
    파형(레벨)이 바뀌어도 표시가 안 납니다.
    ⇒ 순서보다 **구별**을 택합니다. 뜻이 다른 넷이 서로 다른 색을 갖습니다.
    ⚠ 그리고 이 규칙이 `[data-cvtheme="library"]`(0,3,0)라서, 뒤에 덧쓴 제
       규칙(0,2,0)을 **이기고 있었습니다.** 덧쓰지 않고 여기서 고칩니다.
    실측: 색약 최저 ΔE 12.9 · 정상 최저 20.0 · 대비 넷 다 3:1 이상. */
.cv3home[data-cvtheme="library"] .cv3home-night rect.is-quiet    { fill: #2E9E8F; }
.cv3home[data-cvtheme="library"] .cv3home-night rect.is-restless { fill: #B58A00; }
.cv3home[data-cvtheme="library"] .cv3home-night rect.is-awake    { fill: #A3200A; }
.cv3home[data-cvtheme="library"] .cv3home-night rect.is-away     { fill: #B9BFC5; }
.cv3home[data-cvtheme="library"] .cv3home-donut circle.is-quiet    { stroke: #2E9E8F; }
.cv3home[data-cvtheme="library"] .cv3home-donut circle.is-restless { stroke: #B58A00; }
.cv3home[data-cvtheme="library"] .cv3home-donut circle.is-awake    { stroke: #A3200A; }
.cv3home[data-cvtheme="library"] .cv3home-donut circle.is-away     { stroke: #B9BFC5; }
.cv3home[data-cvtheme="library"] .cv3home-night-lg i.is-quiet    { background: #2E9E8F; }
.cv3home[data-cvtheme="library"] .cv3home-night-lg i.is-restless { background: #B58A00; }
.cv3home[data-cvtheme="library"] .cv3home-night-lg i.is-awake    { background: #A3200A; }
.cv3home[data-cvtheme="library"] .cv3home-night-lg i.is-away     { background: #B9BFC5; }
.cv3home[data-cvtheme="library"] .cv3home-prop i.is-lo  { background: var(--nb-pos); }
.cv3home[data-cvtheme="library"] .cv3home-prop i.is-mid { background: var(--nb-br); }
.cv3home[data-cvtheme="library"] .cv3home-prop i.is-hi  { background: var(--nb-mv); }
.cv3home[data-cvtheme="library"] .cv3home-tl .is-ok   { fill: var(--nb-pres); }
.cv3home[data-cvtheme="library"] .cv3home-tl .is-note { fill: var(--nb-pos); }
/* 툴팁 선 키 · 미니 추세 */
body:not([data-cvtheme="quantum"]) .cvh.k-br   { --k: #088AB6; }
body:not([data-cvtheme="quantum"]) .cvh.k-hr   { --k: #DD3311; }
body:not([data-cvtheme="quantum"]) .cvh.k-mv   { --k: #A27304; }
body:not([data-cvtheme="quantum"]) .cvh.k-pres { --k: #007747; }
body:not([data-cvtheme="quantum"]) .cvh.k-dist { --k: #0D4AC6; }
body:not([data-cvtheme="quantum"]) .cv3-tip:has(.cvh) .sp.k-br { color: #088AB6; }
body:not([data-cvtheme="quantum"]) .cv3-tip:has(.cvh) .sp.k-hr { color: #DD3311; }
body:not([data-cvtheme="quantum"]) .cv3-tip:has(.cvh) .sp.k-mv { color: #A27304; }
/* 팝업 */
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-br { --c: #088AB6; }
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-hr { --c: #DD3311; }
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-mv { --c: #A27304; }
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-pres { --c: #007747; }
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-fall { --c: #DD3311; }
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-br .cv3pop-heat { color: #088AB6; }
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-hr .cv3pop-heat { color: #DD3311; }
body:not([data-cvtheme="quantum"]) .cv3pop-in.is-mv .cv3pop-heat { color: #A27304; }
/* 숨결파는 지표색을 따릅니다(그라데이션이 currentColor 를 씁니다) */
.cv3home-wave { color: var(--c); }

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-05 대표님: 「차트, 그래프, 바, 텍스트, 스코어 등의 디자인도 참고 적용」
                     「B2C 타겟으로 디자인이 매우 중요합니다」
   첨부 7장에서 공통으로 읽히는 형태 언어를 옮깁니다:
     ① 끝이 **둥근** 막대·호 (첨부 전부)   ② 굵고 시원한 마크
     ③ **값을 그림에 직접** 적기(축을 안 읽어도 되게)  ④ 넉넉한 여백·부드러운 모서리
     ⑤ 큰 숫자 하나가 지배 — B2C 는 «한눈에» 가 전부입니다
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ① 둥근 끝 ─────────────────────────────────────────────────────── */
.cv3home-hzg path, .cv3home-brg path { stroke-linecap: round; }
.cv3home-bars i { border-radius: 999px; }
.cv3home-blbar-t i.ref, .cv3home-blbar-t i.usual { border-radius: 999px; }
.cv3home-prop-b { border-radius: 999px; }
.cv3home-prop-b i:first-child { border-radius: 999px 0 0 999px; }
.cv3home-prop-b i:last-child { border-radius: 0 999px 999px 0; }
.cv3home-win-t, .cv3home-win-t i { border-radius: 999px; }
.cv3home-pribbon-b i { border-radius: 2px; }
.cv3home-night rect { rx: 2; }

/* ── ② 굵고 시원하게 (B2C — 멀리서도 읽히게) ──────────────────────────── */
.cv3home-ch-g svg { height: 74px; }
.cv3home-bars { height: 40px; gap: 6px; }
.cv3home-prop-b { height: 13px; }
.cv3home-blbar-t { height: 16px; }
.cv3home-blbar-t i.usual { top: 3px; height: 10px; }
.cv3home-pribbon-b { height: 16px; }
.cv3home-win-t { height: 9px; }

/* ── ③ 큰 숫자·상태 낱말 (스코어) ─────────────────────────────────────── */
.cv3home-sig-v b { font-size: 40px; letter-spacing: -.03em; }
.cv3home-sig-v small { font-size: 13px; }
.cv3home-meta { font-size: 12px; font-weight: 700; }
.cv3home-meta > span:first-child { font-weight: 800; color: var(--hx-txt); }
.cv3home-delta { font-size: 12px; padding: 3px 9px; }
.cv3home-foot b { font-size: 15px; }
.cv3home-foot span { font-size: 11px; }
.cv3home-sig-k { font-size: 13px; }
.cv3home-sig-p { font-size: 11px; padding: 3px 9px; }
.cv3home-ch-h b { font-size: 11px; }
.cv3home-hero-t { font-size: 20px; }

/* ── ④ 부드러운 모서리 · 여백 · 들림 ──────────────────────────────────── */
.cv3home-sig {
  border-radius: 18px; padding: 0 16px 14px;
  box-shadow: 0 1px 2px rgba(40,43,43,.04), 0 8px 24px -18px rgba(40,43,43,.30);
}
.cv3home-sig-h { margin: 0 -16px 12px; padding: 11px 16px; border-radius: 17px 17px 0 0; }
.cv3home-hero { border-radius: 18px; }
.cv3home-ico { width: 30px; height: 30px; border-radius: 10px; }
.cv3home-ico svg { width: 17px; height: 17px; }
.cv3home-duo > div { border-radius: 14px; padding: 10px 12px; }
.cv3home-sigs { gap: 12px; }
.cv3home-cat { margin-bottom: 4px; }

/* ── ⑤ 범례를 알약으로 (첨부의 둥근 칩) ───────────────────────────────── */
.cv3home-night-lg p span {
  padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--hx-fill2);
  font-size: 11px;
}
.cv3home-night-lg i { width: 9px; height: 9px; border-radius: 999px; }
.cv3home-prop p span { padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--hx-fill2); }
.cv3home-prop p i { border-radius: 999px; }
.cv3home-ch-h em i { border-radius: 999px; }

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-05 대표님: 「풍부하고 간결하게 … 시각화와 가독성 … 접근성이 좋게」
   B2C 가정용은 **보호자·어르신**이 봅니다. 아래는 지키는 방법입니다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ① 키보드로 다닐 수 있게 — 어디에 있는지 늘 보이게 */
.cv3home button:focus-visible,
.cv3home a:focus-visible,
.cv3home input:focus-visible,
.cv3home label:focus-within,
.cv3home [tabindex]:focus-visible,
.cv3pop button:focus-visible,
.cv3pop input:focus-visible {
  outline: 3px solid var(--nb-pos, #0D4AC6);
  outline-offset: 2px;
  border-radius: 10px;
}
/* 카드 자체가 단추입니다 — 초점이 오면 확실히 들립니다 */
.cv3home-sig.is-tap:focus-visible {
  outline: 3px solid var(--c); outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent);
}

/* ② 손가락으로 누를 수 있게 — 최소 44px (WCAG 2.2 Target Size) */
.cv3home-btn, .cv3home-act, .cv3home-mbtn, .cv3home-zone,
.cv3pop-tab, .cv3pop-x, .cv3home-wfoot .cv3home-btn {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cv3home-mbtn { min-width: 44px; }
.cv3pop-x { min-width: 44px; }
/* 카드 안 작은 단추는 44 를 다 쓰면 답답합니다 — 눌리는 넓이만 넓힙니다 */
.cv3home-wfoot .cv3home-btn { min-height: 36px; padding: 6px 14px; }

/* ③ 색만으로 말하지 않기 — 상태 알약은 늘 «점 + 낱말» 입니다(이미 그렇습니다).
      추세 화살표도 낱말과 함께 갑니다: 「상승 ▲」 「하강 ▼」 「안정 →」 */
.cv3home-meta .is-up::after, .cv3home-meta .is-dn::after { content: ''; }

/* ④ 대비를 더 원하시는 분(운영체제 설정) — 선을 굵게, 회색을 진하게 */
@media (prefers-contrast: more) {
  .cv3home { --hx-mut: #3A3D35; --hx-mut2: #4E5148; --hx-line: #A8A79F; --hx-line2: #C2C1B9; }
  .cv3home-sig { border-width: 2px; }
  .cv3home-ch-g svg, .cv3home-range svg, .cv3home-daily svg { filter: contrast(1.15); }
  .cv3home-sig-p, .cv3home-delta { outline: 1px solid currentColor; }
}

/* ⑤ 글자를 키우셔도 무너지지 않게 — 고정 높이 대신 최소 높이 */
.cv3home-sig { min-height: 0; }
.cv3home-foot div, .cv3home-kpi { min-width: 0; }
.cv3home-meta { flex-wrap: wrap; row-gap: 6px; }

/* ⑥ 「5분마다 폭」 처럼 좁은 칸의 캡션이 한 글자씩 접히지 않게 */
.cv3home-range p, .cv3home-tod p, .cv3home-daily p {
  flex-wrap: nowrap; gap: 6px;
}
.cv3home-range p span, .cv3home-tod p span, .cv3home-daily p span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ══ 어두운 참고를 «밝은 판» 으로 (2026-09-05 · 대표님 지시) ═══════════════
   대표님: 「참고 해서 카드 디자인에 적용해 주세요.」
           「어두운걸 밝게 변경하는 스타일로 접근해 주세요.」
   첨부는 전부 어두운 대시보드였습니다. 바탕은 흰색을 유지하고(앞선 지시),
   **구조** 만 가져옵니다 — 세그먼트 진행바, 최고점 강조 + 값 말풍선,
   평균 점선 라벨, 채운 아이콘 배지, 알약 상태칩.
   ⚠ 어두운 판에서 «빛나 보이던» 것을 흰 판에서 흉내 내면 흐려집니다.
      빛(glow) 대신 **면적과 굵기** 로 같은 강조를 만듭니다. */

/* ── ① 세그먼트 진행 막대 (첨부 Health Score) ────────────────────────── */
.cv3home-prog.is-seg {
  height: 8px; background: none; overflow: visible;
  display: flex; gap: 6px;
}
.cv3home-prog.is-seg i {
  flex: 1 1 0; height: 100%; border-radius: 3px;
  background: var(--hx-line2); transition: background .3s;
}
.cv3home-prog.is-seg i.on { background: var(--c); }
.cv3home-prog.is-seg i.on:last-of-type { box-shadow: none; }
.cv3home-prog-s { display: flex; align-items: baseline; gap: 6px; }
.cv3home-prog-s b { font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; }
.cv3home-prog-s span { color: var(--hx-mut2); }

/* ── ② 최고점 말풍선 · 평균 점선 라벨 ────────────────────────────────── */
.cv3home-ch-p { position: relative; min-width: 0; }
.cv3home-ch-peak {
  position: absolute; top: -2px; transform: translate(-50%, -100%);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 800; line-height: 1.3;
  font-variant-numeric: tabular-nums;
  /*  ⚠ 흰 글씨를 얹으려면 판이 충분히 진해야 합니다. 원색 그대로면
         호흡 3.95:1 · 움직임 4.21:1 로 AA(4.5) 미달입니다. 12% 어둡게 섞어
         다섯 색 모두 4.94~8.82:1 로 올렸습니다(실측 2026-09-05). */
  background: color-mix(in srgb, var(--c) 88%, #000); color: #fff;
  box-shadow: 0 2px 6px -2px rgba(40, 43, 43, .35);
}
.cv3home-ch-peak::after {                       /* 말풍선 꼬리 */
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 3px solid transparent; border-top-color: color-mix(in srgb, var(--c) 88%, #000);
}
.cv3home-ch-avg {
  position: absolute; right: 2px; transform: translateY(-50%);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--hx-mut); background: var(--hx-card, var(--hx-fill));
  border: 1px solid var(--hx-line2);
}
/*  말풍선이 칸 밖으로 나가지 않게 그림 위쪽에 자리를 냅니다 */
.cv3home-ch:not(.is-empty) .cv3home-ch-g { padding-top: 14px; }
.cv3home-ch:not(.is-empty) .cv3home-ch-y { padding-top: 14px; }

/* ── ③ 아이콘 배지를 «채운» 배지로 (첨부의 빛나는 원형 배지) ─────────── */
.cv3home-ico {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--c) 20%, #fff),
    color-mix(in srgb, var(--c) 10%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
}
.cv3home-sig-h { border-bottom: 1px solid var(--hx-line2); }

/* ── ④ 상태 칩을 알약으로 (첨부 「Normal」·「Very Healthy」) ──────────── */
.cv3home-sig-p {
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: -.01em;
  background: color-mix(in srgb, var(--c) 13%, #fff);
  /*  78% 로는 호흡이 4.47:1 (AA 미달). 72% 로 낮춰 다섯 색 4.85~7.50:1. */
  color: color-mix(in srgb, var(--c) 72%, var(--hx-txt));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent);
}

/* ── ⑤ 짙은 판을 쓰는 테마에서는 위 «흰색 섞기» 를 되돌립니다 ────────── */
.cv3home[data-cvtheme="quantum"] .cv3home-ico {
  background: color-mix(in srgb, var(--c) 22%, var(--hx-fill));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
}
.cv3home[data-cvtheme="quantum"] .cv3home-sig-p {
  background: color-mix(in srgb, var(--c) 18%, var(--hx-fill));
  color: color-mix(in srgb, var(--c) 82%, #fff);
}
.cv3home[data-cvtheme="quantum"] .cv3home-ch-peak { color: #0f0f24; }
.cv3home[data-cvtheme="quantum"] .cv3home-prog.is-seg i { background: rgba(255, 255, 255, .14); }

@media (prefers-reduced-motion: reduce) {
  .cv3home-prog.is-seg i { transition: none; }
}

/* ══ 「PPT 가 아니라 대시보드」 (2026-09-05 · 대표님 지시) ═══════════════════
   대표님: 「PPT 느낌이 아니라 대시보드 디자인이 부각 되어야 합니다.」
           「데이터를 얼마나 사용자 친화적으로 동적 시각화 하는가가 굉장히 중요합니다.」
   맞는 지적입니다. 실측해 보면 PPT 로 읽히던 이유는 셋이었습니다 —
     ① 좌·우 레일이 **머스터드 그라데이션 전면** 이라 판이 데이터보다 셌다
     ② 칸마다 여백이 같아서 «슬라이드 목록» 처럼 보였다
     ③ 멈춰 있었다 — 지금이 어디인지 화면이 말하지 않았다
   ⚠ 머스터드는 브랜드입니다. **지우지 않고 강조로 내립니다** (R0-6) —
      레일 위 4px 띠와 활성 이름표에 그대로 남습니다. */

/* ── ① 판을 조용하게 · 브랜드는 띠로 남긴다 ──────────────────────────── */
.cv3home-side,
.cv3home-right {
  background: #EFEDE6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.cv3home-side { border-right: 1px solid var(--hx-line); }
.cv3home-right { border-left: 1px solid var(--hx-line); }
.cv3home-side::before,
.cv3home-right::before {          /* 브랜드 머스터드 — 전면이 아니라 띠로 */
  content: ''; position: sticky; top: 0; z-index: 2;
  display: block; height: 3px; margin: -10px -10px 8px;
  background: linear-gradient(90deg, #FFD95D, #E0B12C);
}
.cv3home-side { --p-ink: #2A2410; --p-ink2: #55503F; --p-line: rgba(42,36,16,.16); --p-fill: #fff; }
.cv3home-right { --p-ink: #2A2410; --p-ink2: #55503F; --p-line: rgba(42,36,16,.16); --p-fill: #fff; }

/* ── ② 밀도 — 대시보드는 문서보다 촘촘합니다 ────────────────────────── */
.cv3home-sig { padding: 0 13px 11px; border-radius: 14px; }
.cv3home-sig-h { margin: 0 -13px 9px; padding: 9px 13px; border-radius: 13px 13px 0 0; }
.cv3home-sigs { gap: 8px; }
.cv3home-bd { padding: 8px 10px 12px; }
.cv3home-ch-n { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.cv3home-sig-s { line-height: 1.45; }
/*  구역 제목은 «슬라이드 표제» 가 아니라 라벨입니다 */
.cv3home-cat { margin-bottom: 3px; }
.cv3home-cat > b { font-size: 11px; letter-spacing: .04em; text-transform: none; }

/* ── ③ 살아 있는 끝점 — 「지금은 여기」 ─────────────────────────────── */
.cv3home-ch-live {
  transform-box: fill-box; transform-origin: center;
  animation: cvhLive 2.2s ease-out infinite;
}
.cv3home-ch-live.is-held { animation: none; opacity: .35; }
@keyframes cvhLive {
  0%   { stroke-width: 5.5; opacity: .55; }
  70%  { stroke-width: 16;  opacity: 0; }
  100% { stroke-width: 16;  opacity: 0; }
}
/*  세그먼트가 «차오르는» 느낌 — 켜진 칸만 순서대로 */
.cv3home-prog.is-seg i.on { animation: cvhSegIn .34s ease-out backwards; }
.cv3home-prog.is-seg i.on:nth-of-type(2) { animation-delay: .04s; }
.cv3home-prog.is-seg i.on:nth-of-type(3) { animation-delay: .08s; }
.cv3home-prog.is-seg i.on:nth-of-type(4) { animation-delay: .12s; }
.cv3home-prog.is-seg i.on:nth-of-type(5) { animation-delay: .16s; }
.cv3home-prog.is-seg i.on:nth-of-type(6) { animation-delay: .20s; }
.cv3home-prog.is-seg i.on:nth-of-type(7) { animation-delay: .24s; }
.cv3home-prog.is-seg i.on:nth-of-type(8) { animation-delay: .28s; }
.cv3home-prog.is-seg i.on:nth-of-type(9) { animation-delay: .32s; }
.cv3home-prog.is-seg i.on:nth-of-type(10) { animation-delay: .36s; }
@keyframes cvhSegIn { from { transform: scaleX(.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cv3home-ch-live { animation: none; opacity: .6; }
  .cv3home-prog.is-seg i.on { animation: none; }
}

/*  짙은 테마에서는 레일을 다시 짙게 */
.cv3home[data-cvtheme="quantum"] .cv3home-side,
.cv3home[data-cvtheme="quantum"] .cv3home-right { background: #0d0d20; }
.cv3home[data-cvtheme="quantum"] .cv3home-side,
.cv3home[data-cvtheme="quantum"] .cv3home-right { --p-ink: #fff; --p-ink2: rgba(255,255,255,.72); --p-line: rgba(255,255,255,.14); --p-fill: rgba(255,255,255,.05); }

/* ── ④ 빈 자리는 «칸» 이 아니라 «줄» 로 (2026-09-05) ─────────────────────
   1440 렌더 실측: 사진이 없을 때 히어로 오른쪽 절반이 세로 380px 짜리
   점선 상자였습니다 — 화면에서 가장 큰 덩어리가 «아직 없는 것» 이었습니다.
   그건 슬라이드의 자리표시자이지 대시보드가 아닙니다. 자리는 남기되 줄로 눕힙니다. */
/*  ⚠ `flex: 0 0 auto` 로 두면 안 됩니다 — `br` 을 지운 순간 안내 문장이 한 줄이
       되어 자리표시자가 히어로를 통째로 밀어냅니다(1440 실측 2026-09-05,
       왼쪽 글이 한 글자 폭으로 눌렸습니다). **폭은 그대로 두고 키만 줄입니다.** */
.cv3home-hero-ph {
  flex: 0 0 38%; align-self: flex-start;
  flex-direction: row; align-items: center; text-align: left;
  gap: 8px; padding: 10px 12px; margin: 12px 12px 12px 0;
  max-height: 60px; overflow: hidden;
}
.cv3home-hero-ph br { display: none; }
.cv3home-hero-ph > span:last-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-hero-ph-ic { width: 28px; height: 28px; border-radius: 10px; flex: 0 0 auto; }
.cv3home-hero-ph b { white-space: nowrap; }

/* ══ 링 게이지 + 테두리 없는 카드 (2026-09-05 · 대표님 지시) ══════════════
   대표님: 「촌스럽지 않나요?」 「최고의 디자인을 해주세요」 「카드들 테두리도
           제거해주세요.」 「색상 조합이 하나도 없어요.」
   ── 색 조합의 뼈대 (실측으로 고른 값입니다) ───────────────────────────
   구간마다 다른 색을 칠하려다 **버렸습니다** — dataviz 검증기 실측:
     · 코랄 4단 램프  → 인접 ΔE 12.3 (정상 시력으로도 «보통»과 «활동» 구별 불가)
     · 청록→호박→산호→적 → 호박↔산호가 적록색약에서 ΔE 4.1
   그래서 참고 디자인처럼 **한 번에 한 색만** 씁니다. 아래 네 색은
   `validate_palette.js` 전 항목 통과(정상 최저 ΔE 16.7 · 색약 9.8 · 대비 전부 3:1↑). */
.cv3home {
  --gz-track: #E7E5DE;                 /* 중립 트랙 */
  --gz-card:  var(--hx-card, #fff);    /* 점 테두리 = 카드색 */
  --gz-ink:   var(--hx-txt);
  --st-calm:  #1B6B33;   /* 안정        4.79:1 */
  --st-ok:    #088AB6;   /* 보통        3.95:1 */
  --st-warn:  #A97400;   /* 빠른 편·활동 4.06:1 */
  --st-alert: #B3200A;   /* 가쁜 숨·높음 6.55:1 */
}
.cv3home-gring { --st: var(--gz-ink); margin: 2px 0 0; }
.cv3home-gring.st-calm  { --st: var(--st-calm); }
.cv3home-gring.st-ok    { --st: var(--st-ok); }
.cv3home-gring.st-warn  { --st: var(--st-warn); }
.cv3home-gring.st-alert { --st: var(--st-alert); }
.cv3home-gring svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.cv3home-gring .gz-f { transition: d .8s cubic-bezier(.2,.8,.2,1), stroke .4s; }
.cv3home-gring .gz-dot { transition: cx .8s cubic-bezier(.2,.8,.2,1), cy .8s cubic-bezier(.2,.8,.2,1), fill .4s; }
.cv3home-gring .gz-t { cursor: help; transition: stroke .2s; }
.cv3home-gring .gz-t:hover { stroke: #D8D5CC; }
/*  가운데 큰 숫자 — 참고 디자인의 초점 */
.cv3home-gring .gz-v {
  font-size: 20px; font-weight: 800; letter-spacing: -.045em;
  fill: var(--gz-ink); font-variant-numeric: tabular-nums;
}
.cv3home-gring .gz-u { font-size: 11px; font-weight: 700; fill: var(--hx-mut2); letter-spacing: .06em; }
.cv3home-gring .gz-w { font-size: 11px; font-weight: 800; fill: var(--st); letter-spacing: -.01em; }
.cv3home-gring .gz-b { font-size: 11px; font-weight: 700; fill: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3home-gring .gz-b.is-on { fill: var(--gz-ink); }
.cv3home-gring .gz-b.is-end { font-size: 11px; opacity: .7; }

/* ── 카드 테두리 제거 — 경계는 «선» 이 아니라 «면과 그림자» 로 ───────────
   ⚠ 테두리를 그냥 지우면 흰 카드가 흰 배경에 녹습니다. 본문 바닥을 한 단
      낮추고(#F1EFE8) 그림자를 세워 경계를 남깁니다. */
.cv3home-bd { background: #F1EFE8; }
.cv3home-sig,
.cv3home-hero,
.cv3home-pobc {
  border: 0;
  box-shadow: 0 1px 2px rgba(40, 43, 43, .05), 0 10px 26px -20px rgba(40, 43, 43, .38);
}
.cv3home-sig-h { border-bottom: 0; }
.cv3home-duo > div { border: 0; background: color-mix(in srgb, var(--hx-txt) 3.5%, transparent); }
.cv3home-ch-g svg { border-left: 0; border-bottom: 1px solid var(--hx-line2); }

@media (prefers-reduced-motion: reduce) {
  .cv3home-gring .gz-f, .cv3home-gring .gz-dot { transition: none; }
}

/* ── 안쪽 패널 테두리도 제거 (2026-09-05) ────────────────────────────────
   대표님 「카드들 테두리도 제거해주세요.」— 바깥 카드만 지우면 안쪽
   숨결·심전도 칸의 선이 남아 오히려 더 눈에 띕니다. 선 대신 옅은 면. */
.cv3home-wave {
  border: 0; background: color-mix(in srgb, var(--c) 6%, transparent);
}
.cv3home-wave.is-live { border: 0; background: color-mix(in srgb, var(--c) 9%, transparent); }
.cv3home-gring { background: color-mix(in srgb, var(--hx-txt) 3%, transparent); border-radius: 14px; padding: 4px 0 2px; }
.cv3home-duo > div { border-radius: 14px; }

/* ── 레일에 머스터드를 «옅게» 되돌립니다 (2026-09-05) ────────────────────
   대표님 「패널 값만 빠지고…」 — 제가 레일의 머스터드를 통째로 빼서
   패널이 비어 보이게 만들었습니다. 전면 그라데이션으로 되돌리면 다시 PPT 가
   되므로, **옅은 물빛으로** 남깁니다: 브랜드는 있고 데이터가 더 셉니다. */
.cv3home-side,
.cv3home-right {
  background: linear-gradient(180deg, #FBF3DC 0%, #F4EFE3 42%, #EFEDE6 100%);
}

/*  ⚠ 이름 충돌 사고(2026-09-05): 새 게이지에 `.cv3home-ring2` 를 썼는데
       움직임 카드의 활동 링(`pillsHtml`)이 **이미 그 이름을 쓰고 있었습니다.**
       내 규칙(max-width 175px · 배경 · 패딩)이 남의 링에 걸려 오른쪽 설명이
       잘렸습니다(실측: 「이 위면 호흡·심박이 빕」). 내 것만 `.cv3home-gring`
       으로 뗐습니다 — 남의 것은 건드리지 않습니다(R0-6). */
/* ⚠ 1440 실측: 호흡 링 아래 옅은 칸이 세로 200px 늘어났습니다 —
   `.cv3home-duo > div` 가 카드 높이를 채우려 늘어나기 때문입니다.
   칸은 내용만큼만 차지하게 두고, 남는 자리는 카드가 갖습니다. */
.cv3home-duo > div > .cv3home-gring { flex: 0 0 auto; }
.cv3home-duo:has(> div > .cv3home-gring) > div { flex: 0 0 auto; }
.cv3home-gring svg { max-width: 236px; }

/* ── 링을 줄입니다 (2026-09-05 · 대표님 「게이지 차트가 너무 커요.」) ─────
   ⚠ 그냥 max-width 만 줄이면 안 됩니다. viewBox 가 110 단위이므로 폭을 줄이면
      글자도 같은 비율로 작아집니다 — 236px 에서 8.3px 이던 경계 숫자가
      170px 에서는 6.0px 이 됩니다(읽을 수 없음). **폭을 줄인 만큼 글자를
      viewBox 단위로 키웁니다.** 아래는 175px 기준 실제 px 을 적어 둡니다. */
.cv3home-gring { padding: 2px 0 0; }
.cv3home-gring svg { max-width: 175px; }          /* 배율 175/110 = 1.59 */
.cv3home-gring .gz-v { font-size: 20px; }        /* → 33px */
.cv3home-gring .gz-u { font-size: 11px; }         /* → 10.5px */
.cv3home-gring .gz-w { font-size: 11px; }         /* → 13px */
.cv3home-gring .gz-b { font-size: 11px; }         /* → 10.3px */
.cv3home-gring .gz-b.is-end { font-size: 11px; }    /* → 9.5px */

/* ══ 오늘 재실 · 부재 모니터링 (2026-09-05 · 대표님 지시) ═══════════════
   대표님 「진할수록이..」 — 농담(opacity)으로 뜻을 싣던 것을 버리고
   **세 상태 색**으로 바꿉니다. 셋은 서로 붙지 않아야 합니다(실측 대비 병기). */
.cv3home-pribbon-w { position: relative; }
.cv3home-pribbon-b { gap: 0; height: 18px; border-radius: 3px; overflow: hidden; }
.cv3home-pribbon-b i { border-radius: 0; }
.cv3home-pribbon-b i.in   { background: #17794E; }   /* 계심      4.85:1 */
.cv3home-pribbon-b i.away { background: #C2680A; }   /* 자리 비움 3.42:1 */
.cv3home-pribbon-b i.none { background: #E4E2DA; }   /* 기록 없음 */
.cv3home-pribbon-b i.fut  { background: #F4F2EC; border: 0; }
.cv3home-pribbon-b i[title] { cursor: help; }
/*  6시간 눈금 — 「어느 시간대」를 답하려면 축이 있어야 합니다 */
.cv3home-prb-grid { position: absolute; inset: 0; display: flex; pointer-events: none; z-index: 1; }
.cv3home-prb-grid i { flex: 1 1 0; border-right: 1px solid rgba(255, 255, 255, .55); }
.cv3home-ch-x.is-6 { justify-content: space-between; }

/*  ── 「몇 번 · 얼마나」 넉 칸 ───────────────────────────────────────── */
.cv3home-prb-k {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px;
}
.cv3home-prb-k > div {
  background: color-mix(in srgb, var(--hx-txt) 3.5%, transparent);
  border-radius: 10px; padding: 7px 8px; min-width: 0;
}
.cv3home-prb-k b {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--hx-txt); font-variant-numeric: tabular-nums;
}
.cv3home-prb-k span {
  display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--hx-mut2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*  ── 「언제 비우셨나」 목록 ────────────────────────────────────────── */
.cv3home-prb-l { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv3home-prb-l li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 9px; border-radius: 10px;
  background: color-mix(in srgb, #C2680A 8%, transparent);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.cv3home-prb-l li span { color: var(--hx-mut); font-weight: 700; }
.cv3home-prb-l li b { margin-left: auto; font-weight: 800; color: #8A4906; }
.cv3home-prb-l li.is-now { background: color-mix(in srgb, #C2680A 16%, transparent); }
.cv3home-prb-l li.is-now em {
  font-style: normal; font-size: 11px; font-weight: 800; color: #fff;
  background: #A3550A; padding: 1px 6px; border-radius: 999px;
}

/* ── 움직임의 성격 (2026-09-05) ─────────────────────────────────────── */
.cv3home-mvc { margin-top: 10px; }
.cv3home-mvc-w {
  display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0;
  padding: 8px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--c) 9%, transparent);
}
.cv3home-mvc-w b { font-size: 13px; font-weight: 800; letter-spacing: -.02em; color: var(--hx-txt); }
.cv3home-mvc-w span { font-size: 11px; font-weight: 600; color: var(--hx-mut); }
.cv3home-mvc .cv3home-prb-k { margin-top: 6px; }

/* ── 카드 상단 띠를 하나로 (2026-09-05 · 대표님 「상단 띠 색상은 통일해 주세요.」)
   지금까지 띠는 카드마다 제 계열색으로 물들었습니다(시안·코랄·앰버·초록…).
   ⚠ 색을 없애는 게 아니라 **자리를 옮기는** 것입니다 — 어느 카드인지는
      아이콘 배지와 그림이 계속 말합니다. 띠는 중립으로 두어 카드가 한 벌로
      보이게 합니다. */
.cv3home-sig-h { background: #F4F2EC; }
.cv3home[data-cvtheme="quantum"] .cv3home-sig-h { background: rgba(255, 255, 255, .05); }

/* ══ 지금 움직임 크기 — 반응형 계기 (2026-09-05 · 대표님 지시) ═══════════
   「현재 감지되고 있는 움직임의 크기도 반응형으로 시각화」
   ⚠ 반응 = **값이 올 때 움직이는 것**. 값 사이를 스스로 흔들면 그건 반응이
      아니라 연출입니다. transition 만 씁니다 — 자체 애니메이션은 문턱을
      넘었을 때의 숨결 하나뿐이고, 그것도 크기를 값(`--lv`)에 매답니다. */
.cv3home-mvl { margin-top: 10px; }
.cv3home-mvl-m {
  position: relative; height: 16px; margin-top: 6px;
  border-radius: 999px; background: var(--gz-track); overflow: hidden;
}
.cv3home-mvl-f {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--st-calm);
  transition: width .55s cubic-bezier(.2, .8, .2, 1), background-color .35s;
}
.cv3home-mvl.st-on   .cv3home-mvl-f { background: var(--st-warn); }
.cv3home-mvl.st-over .cv3home-mvl-f { background: var(--st-alert); }
.cv3home-mvl.st-none .cv3home-mvl-f { background: var(--hx-line); }
/*  문턱 · 한계 · 최근 5분 최고점 */
.cv3home-mvl-t, .cv3home-mvl-l, .cv3home-mvl-p { position: absolute; top: 0; bottom: 0; width: 2px; }
.cv3home-mvl-t { background: rgba(40, 43, 43, .28); }
.cv3home-mvl-l { background: rgba(40, 43, 43, .55); }
.cv3home-mvl-p {
  width: 3px; background: var(--hx-txt); border-radius: 2px;
  transition: left .55s cubic-bezier(.2, .8, .2, 1);
}
.cv3home-mvl-t, .cv3home-mvl-l, .cv3home-mvl-p { cursor: help; }
.cv3home-mvl-x {
  display: flex; justify-content: space-between; margin: 3px 0 0;
  font-size: 11px; font-weight: 700; color: var(--hx-mut2); font-variant-numeric: tabular-nums;
}
/*  ② 흐르는 띠 — 오른쪽 끝이 «지금» */
.cv3home-mvl-s {
  display: grid; grid-template-columns: repeat(30, 1fr); gap: 6px;
  align-items: end; height: 46px; margin-top: 8px;
}
.cv3home-mvl-s i {
  display: block; border-radius: 2px 2px 1px 1px; min-height: 3px;
  background: var(--st-calm); transition: height .45s cubic-bezier(.2, .8, .2, 1);
}
.cv3home-mvl-s i.on   { background: var(--st-warn); }
.cv3home-mvl-s i.over { background: var(--st-alert); }
.cv3home-mvl-s i.pad  { background: var(--gz-track); height: 3px; }
.cv3home-mvl-s i:last-child { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hx-txt) 16%, transparent); }
/*  문턱을 넘고 있을 때만 계기가 숨을 쉽니다 — 세기는 지금 값(`--lv`)에 비례 */
.cv3home-mvl.st-on .cv3home-mvl-m,
.cv3home-mvl.st-over .cv3home-mvl-m { animation: cvhMvBreathe 1.6s ease-in-out infinite; }
@keyframes cvhMvBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(169, 116, 0, 0); }
  50% { box-shadow: 0 0 0 calc(3px * var(--lv, 0)) rgba(169, 116, 0, .30); }
}
@media (prefers-reduced-motion: reduce) {
  .cv3home-mvl-f, .cv3home-mvl-p, .cv3home-mvl-s i { transition: none; }
  .cv3home-mvl .cv3home-mvl-m { animation: none; }
}

/*  ⚠ 실측(1440): 문턱 아래 칸을 초록으로 뒀더니 띠 바닥에 **초록 점선**이
    생겨서, 움직임이 없는 것이 «좋다» 는 뜻처럼 읽혔습니다. 그런 뜻이 아닙니다 —
    문턱 아래는 «셀 만한 움직임이 아니다» 일 뿐입니다. 중립으로 내립니다. */
.cv3home-mvl-s i { background: #C9C7BF; }
.cv3home-mvl-f { background: #A9A79E; }
.cv3home-mvl.st-low .cv3home-mvl-f { background: #A9A79E; }

/* ══ 카드 호버 — 선이 아니라 «떠오름» (2026-09-05 · 대표님 지시) ═════════
   대표님: 「카드에 호버하면 테두리를 치는게 아니라 앞으로 그림자 효과로
           앞으로 나오는듯한 느낌으로 해주세요.」
   ⚠ 앞의 규칙들은 `border-color` 와 `box-shadow: … 0 0 0 1px var(--c)` 로
      **테두리를 그리고 있었습니다** — 링(ring) 그림자도 눈에는 테두리입니다.
      전부 지우고 «높이» 만 남깁니다: 위로 3px + 아래로 퍼지는 그림자 두 겹
      (가까운 그림자 = 접지, 먼 그림자 = 높이). 누를 수 있는 카드는 더 높이.
   ⚠ `transform` 은 `will-change` 없이 씁니다 — 카드가 수십 장이라
      레이어를 미리 만들면 메모리만 먹습니다. */
.cv3home-sig {
  transition: box-shadow .22s cubic-bezier(.2, .8, .2, 1),
              transform .22s cubic-bezier(.2, .8, .2, 1);
}
.cv3home-sig:hover,
.cv3home-sig.is-tap:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow:
    0 2px 6px rgba(40, 43, 43, .07),
    0 18px 38px -16px rgba(40, 43, 43, .30);
}
.cv3home-sig.is-tap:hover {
  transform: translateY(-5px);
  box-shadow:
    0 3px 8px rgba(40, 43, 43, .08),
    0 26px 50px -18px rgba(40, 43, 43, .34);
}
.cv3home-sig.is-tap:active { transform: translateY(-1px); transition-duration: .08s; }
/*  ⚠ 초점 링은 **지우지 않습니다.** 그건 장식이 아니라 키보드로 쓰는 분의
    유일한 위치 표시입니다(접근성). 호버만 선을 뺍니다. */
.cv3home-sig.is-tap:focus-visible { outline: 3px solid var(--nb-pos); outline-offset: 2px; }
/*  짙은 테마도 같은 «떠오름» 으로 — 계열색 발광은 테두리처럼 읽힙니다 */
.cv3home[data-cvtheme="quantum"] .cv3home-sig:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 26px 50px -18px rgba(0, 0, 0, .65);
}
@media (prefers-reduced-motion: reduce) {
  .cv3home-sig:hover, .cv3home-sig.is-tap:hover,
  .cv3home-sig.is-tap:active { transform: none; }
}
/*  네온 테마는 지금 순환에서 빠져 있지만(R0-6 로 보존), 되살릴 때 계열색
    발광이 다시 «테두리» 처럼 보이지 않게 같은 떠오름으로 맞춰 둡니다. */
.cv3home[data-cvtheme="neon"] .cv3home-sig:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), 0 26px 50px -18px rgba(0, 0, 0, .7);
}

/* ══ 움직임 바를 «사운드 바» 로 (2026-09-05 · 대표님 지시) ═══════════════
   대표님: 「움직임 바는 움직임의 크기따라 좌우로 작은 크기로 왔다갔다 하다가
           움직임이 커지면 쭉 올라가는 형태이며 칼라를 섞은 스타일로
           사운드 바처럼 해주세요.」
   ── 어떻게 «섞»느냐 ────────────────────────────────────────────────
   막대마다 색을 정하지 않습니다. **띠 전체 높이에 고정된 색 사다리**를 깔고
   막대가 그 위로 자랍니다(`background-size: 100% <띠 높이>`, 바닥 기준).
   그래서 낮은 막대는 아래쪽 회록만, 높은 막대는 호박을 지나 진홍까지
   드러냅니다 — **키가 곧 색**입니다. 이퀄라이저가 그렇게 생겼습니다.
   ── 「좌우로 왔다갔다」 ────────────────────────────────────────────
   ⚠ 막대 **높이는 절대 흔들지 않습니다.** 그건 잰 값입니다(R0-2).
      대신 조용할 때 **빛이 좌우로 훑고 지나갑니다** — 「기다리는 중」이라는
      뜻이지 값이 아닙니다. 문턱을 넘으면 훑기는 멈추고 막대가 올라갑니다. */
.cv3home-mvl-s { position: relative; height: 54px; gap: 6px; overflow: hidden; border-radius: 4px; }
.cv3home-mvl-s i,
.cv3home-mvl-s i.on,
.cv3home-mvl-s i.over {
  background-image: linear-gradient(to top,
    #7E8A80 0%, #4E8F63 22%, #A97400 58%, #C4470F 82%, #B3200A 100%);
  background-repeat: no-repeat;
  background-size: 100% 54px;      /* 띠 높이에 고정 — 막대가 이 사다리를 «드러냅니다» */
  background-position: 0 bottom;
  background-color: transparent;
  border-radius: 2px 2px 0 0;
  transition: height .42s cubic-bezier(.18, .9, .25, 1.12);   /* 커질 때 살짝 튕겨 오릅니다 */
}
.cv3home-mvl-s i.pad { background-image: none; background-color: var(--gz-track); }
.cv3home-mvl-s i:last-child { box-shadow: none; outline: 2px solid color-mix(in srgb, var(--hx-txt) 18%, transparent); outline-offset: 0; }
/*  조용할 때만 빛이 좌우로 훑습니다 — 값이 아니라 «대기 중» 표시 */
.cv3home-mvl-s::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.62) 45%, transparent 90%);
  width: 34%; transform: translateX(-40%); opacity: 0;
}
.cv3home-mvl.st-low .cv3home-mvl-s::after,
.cv3home-mvl.st-none .cv3home-mvl-s::after { opacity: 1; animation: cvhMvSweep 2.6s linear infinite; }
@keyframes cvhMvSweep { from { transform: translateX(-40%); } to { transform: translateX(330%); } }

/*  ① 가로 계기도 같은 사다리로 — 차오를수록 색이 섞입니다 */
.cv3home-mvl-f,
.cv3home-mvl.st-on .cv3home-mvl-f,
.cv3home-mvl.st-over .cv3home-mvl-f,
.cv3home-mvl.st-low .cv3home-mvl-f,
.cv3home-mvl.st-none .cv3home-mvl-f {
  inset: 0;                       /* 폭은 늘 100% — 사다리를 붙들어 둡니다 */
  width: auto;
  background-color: transparent;
  background-image: linear-gradient(90deg,
    #7E8A80 0%, #4E8F63 26%, #A97400 62%, #C4470F 84%, #B3200A 100%);
  clip-path: inset(0 calc(100% - var(--w, 0%)) 0 0 round 999px);
  transition: clip-path .55s cubic-bezier(.2, .8, .2, 1);
}
.cv3home-mvl.st-none .cv3home-mvl-f { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .cv3home-mvl-s::after { animation: none; opacity: 0; }
  .cv3home-mvl-s i { transition: none; }
}

/* ── 재실 바둑판 — 첨부 파스텔 · 오래된 것과 반복을 강조 (2026-09-05) ──
   ⚠ 색이 뜻을 «혼자» 지지 않게 합니다: 범례 · 시 축 · 칸마다 툴팁 · 아래 요약
      문장을 함께 둡니다. 파스텔은 흰 판에서 대비가 낮습니다(가장 밝은 칸
      1.73:1). 실측으로 고른 값 — 인접 ΔE 15.1 / 16.7, 명도 단조 감소. */
.cv3home-pgrid { margin-top: 12px; }
.cv3home-pgrid-g {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 6px;
  margin-top: 6px; padding: 4px 4px 7px; border-radius: 10px;
  background: color-mix(in srgb, var(--hx-txt) 3.5%, transparent);
}
.cv3home-pgrid-c {
  display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px;
  position: relative; padding-bottom: 4px;
}
.cv3home-pgrid-c.is-mark { box-shadow: -1px 0 0 rgba(40, 43, 43, .16); }
.cv3home-pgrid-c > i { display: block; aspect-ratio: 1 / 1; border-radius: 3px; }
.cv3home-pgrid-c > i.in    { background: #6BC4A6; }   /* 계심 — 민트 */
.cv3home-pgrid-c > i.s1    { background: #F0BE45; }   /* 비움 ~20분 */
.cv3home-pgrid-c > i.s2    { background: #DE8236; }   /* ~1시간 */
.cv3home-pgrid-c > i.s3    { background: #BE4040; }   /* 1시간 넘음 */
.cv3home-pgrid-c > i.away  { background: #F0BE45; }
.cv3home-pgrid-c > i.none  { background: #E4E2DA; }
.cv3home-pgrid-c > i.fut   { background: #F6F4EF; }
/*  1시간 넘게 비운 칸 — 테두리까지 둘러 «오래됨» 을 한 번 더 말합니다 */
.cv3home-pgrid-c > i.is-long { box-shadow: inset 0 0 0 1.5px rgba(122, 24, 24, .55); }
/*  반복된 시 — 칸 아래 라벤더 막대 + 시 숫자도 라벤더 */
.cv3home-pgrid-c.is-rep::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px; background: #9B7AD4;
}
.cv3home-pgrid-c.is-rep { cursor: help; }
.cv3home-pgrid-x {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 6px;
  margin: 3px 4px 0; font-size: 11px; font-weight: 700; color: var(--hx-mut2);
  font-variant-numeric: tabular-nums;
}
.cv3home-pgrid-x span.is-rep { color: #6B48B0; font-weight: 800; }
/*  범례 — 색만으로 뜻을 지지 않게 하는 «구제책» 입니다 */
.cv3home-pgrid-lg {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 7px 0 0;
  font-size: 11px; font-weight: 700; color: var(--hx-mut);
}
.cv3home-pgrid-lg span { display: inline-flex; align-items: center; gap: 6px; }
.cv3home-pgrid-lg span::before {
  content: ''; width: 9px; height: 9px; border-radius: 3px; background: currentColor;
}
.cv3home-pgrid-lg .k-in::before   { background: #6BC4A6; }
.cv3home-pgrid-lg .k-s1::before   { background: #F0BE45; }
.cv3home-pgrid-lg .k-s2::before   { background: #DE8236; }
.cv3home-pgrid-lg .k-s3::before   { background: #BE4040; }
.cv3home-pgrid-lg .k-rep::before  { background: #9B7AD4; }
.cv3home-pgrid-lg .k-none::before { background: #E4E2DA; }
.cv3home-pgrid-n { margin: 6px 0 0; font-size: 11px; color: var(--hx-mut); }
.cv3home-pgrid-n b { font-weight: 800; color: #8A2B2B; }


/* ── XK300 하루 수면 분석 · 하루 드나듦 (2026-09-05) ─────────────────── */
.cv3home-xksleep, .cv3home-xkaway { margin-top: 10px; }
.cv3home-xks-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px;
}
.cv3home-xks-hero > div {
  padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--hx-txt) 4%, transparent);
}
.cv3home-xks-hero b {
  display: block; font-size: 28px; font-weight: 800; letter-spacing: -.03em;
  color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cv3home-xks-hero span {
  display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--hx-mut2);
}
.cv3home-xks-hero.st-calm  > div:nth-child(2) b { color: #1B6B33; }
.cv3home-xks-hero.st-warn  > div:nth-child(2) b { color: #A97400; }
.cv3home-xks-hero.st-alert > div:nth-child(2) b { color: #B3200A; }
.cv3home-xksleep .cv3home-prb-k, .cv3home-xkaway .cv3home-prb-k { margin-top: 6px; }

/* ── 움직임 사다리를 «아주 약한 회색» 에서 시작 (2026-09-05 · 대표님 지시)
   「움직임 차트는 아주 약한 회색에서 스타트 하게 해주세요.」
   바닥(움직임 거의 없음)이 회록이라 여전히 «색» 으로 읽혔습니다.
   맨 아래를 옅은 회색으로 내리고 거기서부터 색이 올라오게 합니다. */
.cv3home-mvl-s i,
.cv3home-mvl-s i.on,
.cv3home-mvl-s i.over {
  background-image: linear-gradient(to top,
    #DCDAD3 0%, #C3C6BE 14%, #8FB79C 34%, #C9A23A 58%, #D4713A 80%, #B3200A 100%);
}
.cv3home-mvl-f,
.cv3home-mvl.st-on .cv3home-mvl-f,
.cv3home-mvl.st-over .cv3home-mvl-f,
.cv3home-mvl.st-low .cv3home-mvl-f {
  background-image: linear-gradient(90deg,
    #DCDAD3 0%, #C3C6BE 12%, #8FB79C 34%, #C9A23A 60%, #D4713A 82%, #B3200A 100%);
}

/* ── 수면 깊이 차트 (2026-09-05 · 대표님 지시) ──────────────────────────
   첨부(케어뷰 2.0) 형태 — 네 단계 계단 + 색 범례 + 시간축.
   ⚠ 이름만 다릅니다: 첨부는 REM·코어·깊은수면, 우리는 **각성도** 네 칸입니다.
      XK300 이 단계를 주지 않기 때문입니다. 화면에도 그렇게 적었습니다. */
.cv3home-slp { margin-top: 10px; }
.cv3home-slp-y {
  display: grid; grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: repeat(4, 1fr);
  margin-top: 6px; padding: 6px 8px 6px 0; border-radius: 14px;
  background: color-mix(in srgb, var(--hx-txt) 3.5%, transparent);
}
.cv3home-slp-y > i {
  grid-column: 1; font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--hx-mut2); display: flex; align-items: center; padding-left: 8px;
  white-space: nowrap;
}
.cv3home-slp-y > svg {
  grid-column: 2; grid-row: 1 / -1; display: block; width: 100%; height: 84px;
}
.cv3home-slp .cv3home-ch-x { margin-left: 48px; }
.cv3home-slp-lg {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 7px 0 0;
  font-size: 11px; font-weight: 700; color: var(--hx-mut);
}
.cv3home-slp-lg span { display: inline-flex; align-items: center; gap: 6px; }
.cv3home-slp-lg i { width: 9px; height: 9px; border-radius: 999px; display: block; }
.cv3home-slp-lg b { color: var(--hx-txt); font-weight: 800; font-variant-numeric: tabular-nums; }
.cv3home-slp .cv3home-ch-n b { color: var(--hx-txt); font-weight: 800; }
.cv3home-slp .cv3home-ch-h span b { color: #8A2B2B; font-weight: 800; }

/* ── 사운드 바가 «살짝씩» 움직입니다 (2026-09-05 · 대표님 지시) ──────────
   「움직임 바는 살짝식 움직임에 따라서 움직이게 해주세요.」
   ⚠ 앞서 저는 «높이를 흔들면 거짓» 이라 말씀드렸고, 지금도 **높이는 그대로**
      둡니다. 흔드는 것은 그 위에 얹은 `scaleY` 배율입니다 — 읽는 값은
      안 바뀌고, **흔들리는 폭이 지금 움직임(`--lv`)에 비례**합니다.
      움직임이 0 이면 진폭도 0 이라 완전히 멈춥니다. 그래서 이 흔들림 자체가
      «지금 얼마나 움직이시는가» 를 말합니다 — 연출이 아니라 표시입니다. */
.cv3home-mvl-s i {
  transform-origin: bottom center;
  animation: cvhMvJiggle calc(1.15s * var(--r, 1)) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.06s);
}
@keyframes cvhMvJiggle {
  0%, 100% { transform: scaleY(calc(1 - 0.07 * var(--bl, 0))); }
  50%      { transform: scaleY(calc(1 + 0.16 * var(--bl, 0))); }
}
/*  값이 아예 없을 때는 흔들지 않습니다 — 멈춘 것을 살아 있는 척하지 않습니다 */
.cv3home-mvl.st-none .cv3home-mvl-s i { animation: none; }
.cv3home-mvl-s i.pad { animation: none; }
/*  계기 막대도 같은 박자로 아주 조금 — 끝만 숨 쉽니다 */
.cv3home-mvl-f { animation: cvhMvTip 1.5s ease-in-out infinite; }
@keyframes cvhMvTip {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(calc(1 + 0.10 * var(--lv, 0))); }
}
.cv3home-mvl.st-none .cv3home-mvl-f { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cv3home-mvl-s i, .cv3home-mvl-f { animation: none; }
}

/* ══ 「센서가 연결되면 아주 작은 움직임」 (2026-09-05 · 대표님 지시) ═══════
   대표님: 「모든 차트는 센서가 연결이 되면 아주 작은 움직임을 갖습니다.
           하지만 실제 데이터 출력 값에는 영향을 주지 않습니다.」
   ── 지키는 방법 ────────────────────────────────────────────────────
   움직이는 것은 **그림 통 전체의 `transform`·`opacity`** 뿐입니다.
   값을 지는 것 — 막대 높이, 선의 y, 호의 각도, 칸의 색 — 은 **하나도**
   건드리지 않습니다. 확대·이동 폭이 0.4% 미만이라 눈금과 어긋나지 않습니다.
   ⚠ 붙들고 있는 값이거나 값이 없으면 `is-linked` 가 안 붙어 **멈춥니다.**
   ⚠ 그림마다 박자를 어긋나게 둡니다 — 다 같이 뛰면 화면이 심장처럼 보입니다. */
.cv3home.is-linked .cv3home-wave svg,
.cv3home.is-linked .cv3home-gring svg,
.cv3home.is-linked .cv3home-ch-p svg,
.cv3home.is-linked .cv3home-slp-y svg,
.cv3home.is-linked .cv3home-pribbon-b,
.cv3home.is-linked .cv3home-pgrid-g,
.cv3home.is-linked .cv3home-night svg,
.cv3home.is-linked .cv3home-range svg,
.cv3home.is-linked .cv3home-daily svg {
  animation: cvhAlive 3.4s ease-in-out infinite;
  will-change: transform;
}
.cv3home.is-linked .cv3home-gring svg   { animation-duration: 4.1s; animation-delay: -.6s; }
.cv3home.is-linked .cv3home-ch-p svg    { animation-duration: 3.8s; animation-delay: -1.2s; }
.cv3home.is-linked .cv3home-slp-y svg   { animation-duration: 4.6s; animation-delay: -2.0s; }
.cv3home.is-linked .cv3home-pribbon-b   { animation-duration: 5.2s; animation-delay: -.9s; }
.cv3home.is-linked .cv3home-pgrid-g     { animation-duration: 5.8s; animation-delay: -2.6s; }
@keyframes cvhAlive {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50%      { transform: translateY(-0.35px) scale(1.0025); opacity: .965; }
}
@media (prefers-reduced-motion: reduce) {
  .cv3home.is-linked .cv3home-wave svg,
  .cv3home.is-linked .cv3home-gring svg,
  .cv3home.is-linked .cv3home-ch-p svg,
  .cv3home.is-linked .cv3home-slp-y svg,
  .cv3home.is-linked .cv3home-pribbon-b,
  .cv3home.is-linked .cv3home-pgrid-g,
  .cv3home.is-linked .cv3home-night svg,
  .cv3home.is-linked .cv3home-range svg,
  .cv3home.is-linked .cv3home-daily svg { animation: none; }
}

/* ══ 좌·우 패널 색상 (2026-09-05 · 대표님 첨부 #6E7F90) ═══════════════════
   ⚠ 실측: `#6E7F90` 위의 **흰 글씨는 4.12:1** 로 AA(4.5) 에 살짝 못 미칩니다.
      그래서 작은 글씨는 전부 **흰 카드 위**로 올리고, 판 위에 직접 놓이는
      것은 굵은 제목만 남깁니다. AA 를 꼭 맞추시려면 판을 `#5F7080`(5.10:1)
      으로 한 칸만 내리면 됩니다 — 말씀만 주십시오. */
.cv3home-side,
.cv3home-right {
  background: #6E7F90;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  --p-ink: #FFFFFF;
  --p-ink2: rgba(255, 255, 255, .84);
  --p-line: rgba(255, 255, 255, .26);
  --p-fill: rgba(255, 255, 255, .94);
}
.cv3home-side { border-right: 1px solid rgba(255, 255, 255, .18); }
.cv3home-right { border-left: 1px solid rgba(255, 255, 255, .18); }
/*  브랜드 머스터드 띠는 남깁니다 — 짙은 판 위에서 오히려 또렷합니다 */
.cv3home-side::before,
.cv3home-right::before { background: linear-gradient(90deg, #FFD95D, #E0B12C); }

/* ══ 게이지도 «살짝» 움직입니다 (2026-09-05 · 대표님 지시) ═══════════════
   「그럼 게이지도 살짝씩은 움직임이 있어야 하지 않나요?」
   ⚠ 링 전체의 `cvhAlive` 는 0.25% 라 거의 안 보였습니다(실측 −0.252px).
      **지금 값을 가리키는 점**만 숨쉬게 합니다 — 자리는 그대로이고
      크기만 바뀝니다. 값을 지는 것(호의 각도·점의 좌표)은 안 건드립니다. */
.cv3home.is-linked .cv3home-gring .gz-dot {
  transform-box: fill-box; transform-origin: center;
  animation: cvhGzDot 2.2s ease-in-out infinite;
}
@keyframes cvhGzDot {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.28); opacity: .82; }
}
/*  채운 호는 밝기만 아주 조금 — 길이는 값이라 건드리지 않습니다 */
.cv3home.is-linked .cv3home-gring .gz-f {
  animation: cvhGzArc 3.0s ease-in-out infinite;
}
@keyframes cvhGzArc {
  0%, 100% { opacity: 1; }
  50%      { opacity: .88; }
}
@media (prefers-reduced-motion: reduce) {
  .cv3home.is-linked .cv3home-gring .gz-dot,
  .cv3home.is-linked .cv3home-gring .gz-f { animation: none; }
}

/* ══ 패널: 바탕은 그대로, 「텍스트 칸」은 흰색으로 (2026-09-05 · 대표님 지시)
   「패널 좌우 바탕색은 그대로 두고 텍스트 칸들은 흰색으로 변경해주세요.」
   ⚠ 실측으로 확인한 진짜 문제: 칸들이 **반투명 흰색(0.50~0.62)** 이라 슬레이트가
      비쳐 옅은 청회색으로 보였고, 그 위에 **글씨까지 흰색**이었습니다
      (`color: rgb(255,255,255)`). 읽히지 않는 조합이었습니다.
      칸은 **불투명 흰색**, 글씨는 **진한 잉크**로 되돌립니다.
   ⚠ 판 위에 직접 놓이는 것(구역 제목)만 흰 글씨로 남깁니다. */
.cv3home-side .cv3home-side-t,
.cv3home-right .cv3home-side-t {
  background: transparent; color: #FFFFFF; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.cv3home-side .cv3home-side-i,
.cv3home-side .cv3home-add,
.cv3home-side .cv3home-in,
.cv3home-right .cv3home-kpi,
.cv3home-right .cv3home-need {
  background: #FFFFFF;
  border-color: rgba(40, 43, 43, .12);
  color: var(--hx-jet, #282B2B);
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12), 0 6px 16px -12px rgba(20, 24, 28, .40);
}
/*  칸 **안쪽** 글씨는 전부 진한 잉크 계열로 되돌립니다 */
.cv3home-side .cv3home-side-i,
.cv3home-side .cv3home-side-i *,
.cv3home-side .cv3home-add,
.cv3home-side .cv3home-add *,
.cv3home-right .cv3home-kpi,
.cv3home-right .cv3home-kpi *,
.cv3home-right .cv3home-need,
.cv3home-right .cv3home-need * {
  color: var(--hx-jet, #282B2B);
}
.cv3home-side .cv3home-side-i small,
.cv3home-side .cv3home-add small,
.cv3home-side .cv3home-add p,
.cv3home-right .cv3home-kpi span,
.cv3home-right .cv3home-need p:last-child { color: #4E5148; }
/*  안내 문장은 판 위에 놓입니다 — 흰 글씨 유지 */
.cv3home-side .cv3home-add + p,
.cv3home-side > p:not(.cv3home-side-t),
.cv3home-right > p:not(.cv3home-side-t) { color: rgba(255, 255, 255, .90); }
/*  칸 위의 배지·아바타는 다시 색을 갖습니다 */
.cv3home-side .cv3home-av { background: rgba(40, 43, 43, .10); color: var(--hx-jet, #282B2B); }
.cv3home-side .cv3home-side-i.is-on { box-shadow: 0 0 0 2px #FFD95D, 0 2px 6px rgba(20,24,28,.2); }
.cv3home-side .cv3home-btn.is-key {
  background: #FFFFFF; color: var(--hx-jet, #282B2B); border-color: rgba(40, 43, 43, .22);
}
.cv3home-side .cv3home-btn.is-key:hover { background: #F4F2EC; }

/* ══ 잉크를 근본에서 되돌립니다 (2026-09-05) ═══════════════════════════
   ⚠ 사고: 제가 패널에 `--p-ink: #FFFFFF` 를 걸어 뒀습니다. 칸을 흰색으로
      바꾸자 **칸 안 글씨까지 흰색**이 되어 숫자 세 개와 「확인 필요」 내용이
      사라졌습니다(실측: `.cv3home-kpi b` 가 `rgb(255,255,255)`).
      자손을 하나씩 덮어쓰는 대신 **변수 자체를 되돌립니다** — 그래야
      아직 못 본 칸들도 함께 낫습니다.
   ⚠ 판 위에 직접 놓이는 구역 제목만 따로 흰색으로 씁니다. */
.cv3home-side,
.cv3home-right {
  --p-ink: #282B2B;
  --p-ink2: #4E5148;
  --p-line: rgba(40, 43, 43, .14);
  --p-fill: #FFFFFF;
}
.cv3home-side > .cv3home-side-t,
.cv3home-right > .cv3home-side-t,
.cv3home-side > p:not(.cv3home-side-t),
.cv3home-right > p:not(.cv3home-side-t),
.cv3home-side > small,
.cv3home-right > small {
  color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .20);
}
.cv3home-side .cv3home-add + p { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* ── 노란 띠 제거 (2026-09-05 · 대표님 「노란선 제거요」) ─────────────── */
.cv3home-side::before,
.cv3home-right::before { display: none; }

/* ══ 좌 상단 로고 칸 (2026-09-05 · 대표님 지시) ═══════════════════════════
   「좌 상단에는 로고 입력 창 올려주세요.」
   ⚠ 방 사진과 같은 규칙 — 이 브라우저 안에만 둡니다. 서버로 안 보냅니다. */
.cv3home-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin-bottom: 10px; border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12), 0 6px 16px -12px rgba(20, 24, 28, .40);
}
.cv3home-logo-b {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; overflow: hidden;
  border: 1.5px solid rgba(40, 43, 43, .28); background: #F6F5F1;
  transition: border-color .18s, background-color .18s;
}
.cv3home-logo-b:hover { border-color: #6E7F90; background: #EDF0F3; }
.cv3home-logo.has-img .cv3home-logo-b { border-style: solid; border-color: rgba(40,43,43,.14); background: #fff; }
.cv3home-logo-b img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cv3home-logo-ph { display: grid; place-items: center; line-height: 1; color: #6B6E66; }
.cv3home-logo-ph b { font-size: 15px; font-weight: 800; }
.cv3home-logo-ph i { font-style: normal; font-size: 11px; font-weight: 700; margin-top: 1px; }
.cv3home-logo-x { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cv3home-logo-n {
  width: 100%; min-width: 0; font: inherit; font-size: 12px; font-weight: 800;
  color: #282B2B; background: transparent; border: 0; border-bottom: 1px solid rgba(40,43,43,.16);
  padding: 2px 0; border-radius: 0;
}
.cv3home-logo-n:focus { outline: none; border-bottom-color: #6E7F90; }
.cv3home-logo-n::placeholder { color: #9A9C94; font-weight: 600; }
.cv3home-logo-d {
  align-self: flex-start; font: inherit; font-size: 11px; font-weight: 700;
  color: #8A2B2B; background: none; border: 0; padding: 0; cursor: pointer;
}
.cv3home-logo-d:hover { text-decoration: underline; }

/* ══ 트리 — 기관 → 층 → 호실 → 자리 → 사람 (2026-09-05 · 대표님 지시) ════
   「요양원 병원처럼 트리 구조 만들어 주세요.」
   ⚠ `<details>` 로 짭니다 — 키보드로 열고 닫히고, JS 없이도 동작합니다. */
.cv3home-tree { margin-bottom: 12px; }
.cv3home-tr-z, .cv3home-tr-r { margin: 0; }
.cv3home-tr-z > summary,
.cv3home-tr-r > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  border-radius: 10px; padding: 5px 8px; min-height: 30px;
}
.cv3home-tr-z > summary::-webkit-details-marker,
.cv3home-tr-r > summary::-webkit-details-marker { display: none; }
.cv3home-tr-z > summary::before,
.cv3home-tr-r > summary::before {
  content: '▸'; font-size: 11px; color: rgba(255, 255, 255, .7);
  transition: transform .15s; flex: 0 0 auto;
}
.cv3home-tr-z[open] > summary::before,
.cv3home-tr-r[open] > summary::before { transform: rotate(90deg); }
.cv3home-tr-z > summary { color: #FFFFFF; font-size: 12px; font-weight: 800; margin-top: 4px; }
.cv3home-tr-z > summary:hover { background: rgba(255, 255, 255, .12); }
.cv3home-tr-z > summary span { margin-left: auto; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.78); }
.cv3home-tr-z > summary span i.on { font-style: normal; color: #BEF0D4; }
.cv3home-tr-r { margin-left: 10px; }
.cv3home-tr-r > summary { color: rgba(255, 255, 255, .92); font-size: 11px; font-weight: 700; }
.cv3home-tr-r > summary:hover { background: rgba(255, 255, 255, .10); }
.cv3home-tr-r > summary span { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.cv3home-tr-r > summary::before { color: rgba(255,255,255,.55); }
/*  사람 줄 — 흰 칸 */
.cv3home-tr-p {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 3px 0 0 20px; width: calc(100% - 20px);
  padding: 6px 9px; border-radius: 10px; min-height: 32px;
  border: 0; background: #FFFFFF; color: #282B2B;
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s;
}
.cv3home-tr-p:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,24,28,.12), 0 10px 20px -12px rgba(20,24,28,.5); }
.cv3home-tr-p:focus-visible { outline: 3px solid #FFD95D; outline-offset: 2px; }
.cv3home-tr-p.is-on { box-shadow: 0 0 0 2px #FFD95D, 0 2px 6px rgba(20,24,28,.2); }
.cv3home-tr-p em {
  font-style: normal; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: #EDEBE4; color: #5B5E56;
}
.cv3home-tr-p b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-tr-p i {
  margin-left: auto; font-style: normal; flex: 0 0 auto;
  font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
}
.cv3home-tr-p i { background: #EFEDE6; color: #5B5E56; }
.cv3home-tr-p.is-on i { background: #DDEFE4; color: #1B5E3A; }
.cv3home-tr-p.is-idle i { background: #F6EEDC; color: #7A5B10; }
.cv3home-tr-p.is-none i { background: #EFEDE6; color: #6B6E66; }
.cv3home-tr-p.is-empty {
  background: rgba(255, 255, 255, .30); color: rgba(255,255,255,.72);
  box-shadow: none; cursor: default;
}
.cv3home-tr-p.is-empty em { background: rgba(255,255,255,.22); color: rgba(255,255,255,.8); }
.cv3home-tr-n { margin: 6px 0 0; font-size: 11px; color: rgba(255,255,255,.85); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .cv3home-tr-p:hover { transform: none; } }

/* ── 구역 가로 막대(생체 · 활동 · 안전)를 옅은 회색으로 (2026-09-05 · 지시)
   「생체 활동.. 등 가로 막대 바는 색상을 옅은 회색 계열을 적용해 주세요.」
   지금은 잉크를 5% 섞은 색이라 미세하게 따뜻했습니다. 중성 회색으로 바꿉니다. */
.cv3home-cat-t {
  background: #EDECE8;
  border-bottom: 0;
  border-radius: 10px;
  padding: 8px 12px;
  color: #3A3D35;
}
.cv3home-cat-t span { color: #6B6E66; }
.cv3home-cat-st { color: #5B5E56; }
.cv3home[data-cvtheme="quantum"] .cv3home-cat-t { background: rgba(255,255,255,.06); color: #fff; }

/* ══ 세로 바는 «지난 시간» · 가로 바만 «지금» (2026-09-05 · 대표님 지시) ═══
   대표님: 「움직임 생체 카드는 세로 바는 많이 움직이면 안됩니다. 지난 시간이기
           때문에요. 가로 바만 현재 시간의 움직임을 반영하는 겁니다.」
   맞는 지적입니다. 제가 세로 막대마다 자기 값(`--bl`)만큼 흔들리게 해 놨는데,
   그건 **이미 지나간 10초 값**입니다. 지난 값이 계속 출렁이면 «지금 그러고
   있다» 로 읽힙니다 — 뜻이 틀립니다.
   ⇒ 세로 바: 값에 상관없이 **아주 작은 숨결 하나**만(연결 표시).
   ⇒ 가로 바: 지금 값(`--lv`)에 비례해 눈에 띄게. 이게 «지금» 입니다. */
.cv3home-mvl-s i {
  animation: cvhMvStill 3.6s ease-in-out infinite;   /* 값과 무관 · 아주 작게 */
  animation-delay: calc(var(--i, 0) * -0.09s);
}
@keyframes cvhMvStill {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.012); }
}
/*  마지막 칸만 «방금 들어온 값» 이라 살짝 더 — 그래도 지난 값입니다 */
.cv3home-mvl-s i:last-child { animation-duration: 2.4s; }

/*  가로 계기 = 지금. 값이 클수록 크게 숨 쉽니다. */
.cv3home-mvl-m {
  animation: cvhMvNow 1.9s ease-in-out infinite;
}
@keyframes cvhMvNow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(169, 116, 0, 0); }
  50%      { box-shadow: 0 0 0 calc(5px * var(--lv, 0)) rgba(169, 116, 0, .26); }
}
.cv3home-mvl-f {
  animation: cvhMvTipNow 1.9s ease-in-out infinite;
}
@keyframes cvhMvTipNow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(calc(1 + 0.16 * var(--lv, 0))) saturate(calc(1 + 0.25 * var(--lv, 0))); }
}
/*  지금 값이 없으면 가로 바도 멈춥니다 */
.cv3home-mvl.st-none .cv3home-mvl-m,
.cv3home-mvl.st-none .cv3home-mvl-f { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cv3home-mvl-s i, .cv3home-mvl-m, .cv3home-mvl-f { animation: none; }
}

/* ── 가로 바 외곽선 제거 (2026-09-05 · 대표님 「가로바도 외곽선은 제거해 주세요.」)
   ⚠ 바로 앞에서 제가 «지금» 을 `box-shadow` 링으로 표현했는데, 링 그림자는
      눈에는 **테두리**입니다(카드 호버 때와 똑같은 실수였습니다).
      선을 지우고 «지금» 은 **밝기와 채도**로만 말하게 합니다. */
.cv3home-mvl-m {
  animation: none;
  box-shadow: none;
  border: 0;
}
.cv3home-mvl-s i:last-child { outline: none; box-shadow: none; }
.cv3home-mvl-f { border: 0; box-shadow: none; }
/*  지금 값은 밝기·채도로만 — 선 없이 */
.cv3home-mvl.st-low .cv3home-mvl-f,
.cv3home-mvl.st-on .cv3home-mvl-f,
.cv3home-mvl.st-over .cv3home-mvl-f {
  animation: cvhMvTipNow 1.9s ease-in-out infinite;
}
.cv3home-mvl.st-none .cv3home-mvl-f { animation: none; }

/* ══ 패널 대비 보정 + 파형 선 색 (2026-09-05 · 대표님 지시) ═══════════════
   「네. 수정해 주세요.」 → 판을 `#5F7080` 으로 한 칸 내립니다.
   실측: 그 위 흰 글씨 **5.10:1** (AA 4.5 통과). 앞서 `#6E7F90` 은 4.12:1 이었습니다. */
.cv3home-side,
.cv3home-right { background: #5F7080; }
.cv3home-logo-b:hover { border-color: #5F7080; }
.cv3home-logo-n:focus { border-bottom-color: #5F7080; }

/* ── 파형 선 색 — 대표님 첨부 두 장 ─────────────────────────────────────
   호흡 `#7FC8C2` (연한 청록) · 심박 `#C97C5D` (테라코타)
   ⚠ 이 색은 **파형 선에만** 씁니다. 카드의 계열색(시안·코랄)은 그대로 둡니다 —
      게이지·차트·상태칩이 그 색으로 뜻을 지고 있어서, 함께 바꾸면 대비 검증을
      전부 다시 해야 합니다.
   ⚠ 실측 대비: 호흡 선 1.92:1 · 심박 선 3.22:1 (흰 카드 기준). 낮습니다.
      다만 이 파형은 **수치를 읽는 그림이 아니라 리듬 재현**이고, 실제 값은
      바로 위의 큰 숫자와 게이지가 집니다. 그래서 선을 **2 → 2.4px** 로 굵혀
      형태가 뭉개지지 않게 하고, 아래 채움을 조금 진하게 받칩니다. */
.cv3home-sig.is-br .cv3home-wave { --wave: #7FC8C2; }
.cv3home-sig.is-hr .cv3home-wave { --wave: #C97C5D; }
.cv3home-wave svg path[stroke] { stroke: var(--wave, currentColor) !important; stroke-width: 2.4; }
.cv3home-wave svg path[fill="currentColor"] { fill: var(--wave, currentColor); opacity: .22; }
.cv3home-sig.is-br .cv3home-wave { background: color-mix(in srgb, #7FC8C2 12%, transparent); }
.cv3home-sig.is-hr .cv3home-wave { background: color-mix(in srgb, #C97C5D 10%, transparent); }

/* ══ 테두리를 쓰지 않습니다 (2026-09-05 · 대표님 「그리고 테두리 쓰지 마세요.」) ══
   경계는 **선이 아니라 면과 그림자**로 만듭니다.
   ⚠ 두 가지는 남깁니다. 이유를 적어 둡니다 —
     ① `:focus-visible` 초점 링 — 장식이 아니라 **키보드로 쓰는 분의 유일한
        위치 표시**입니다. 지우면 접근성이 깨집니다.
     ② 차트의 **축선**(`.cv3home-ch-g svg` 아래 선) — 테두리가 아니라 «0 이
        어디인가» 를 말하는 눈금입니다. 지우면 그림이 떠 버립니다. */
.cv3home *:not(svg):not(svg *) { border-style: none; }
.cv3home-hd { border-bottom: 0; box-shadow: 0 1px 0 rgba(40, 43, 43, .07); }
.cv3home-side { border-right: 0; }
.cv3home-right { border-left: 0; }
/*  선이 하던 «구분» 을 면으로 되살립니다 */
.cv3home-btn {
  background: rgba(40, 43, 43, .05); color: var(--hx-txt2);
}
.cv3home-btn:hover { background: rgba(40, 43, 43, .10); color: var(--hx-txt); }
.cv3home-btn.is-key { background: rgba(40, 43, 43, .09); color: var(--hx-txt); font-weight: 800; }
.cv3home-side .cv3home-btn.is-key { background: #FFFFFF; color: #282B2B; }
.cv3home-side .cv3home-btn.is-key:hover { background: #F1EFE8; }
.cv3home-in, .cv3home-logo-n {
  background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(40, 43, 43, .10);
}
.cv3home-logo-n { box-shadow: none; background: transparent; }
/*  점선 자리표시자 → 옅은 면 */
.cv3home-logo-b { background: #F1EFE8; box-shadow: inset 0 0 0 1.5px rgba(40, 43, 43, .10); }
.cv3home-logo.has-img .cv3home-logo-b { box-shadow: none; background: #fff; }
.cv3home-hero-ph { background: rgba(40, 43, 43, .045); }
.cv3home-hero-ph:hover { background: rgba(40, 43, 43, .075); }
/*  ① 초점 링은 남깁니다 */
.cv3home :focus-visible { outline: 3px solid var(--nb-pos); outline-offset: 2px; }
.cv3home-side :focus-visible,
.cv3home-right :focus-visible { outline-color: #FFD95D; }
/*  ② 차트 축선은 남깁니다 */
.cv3home-ch-g svg { border-bottom: 1px solid var(--hx-line2); }

/* ── 「지금 보는 사람」 표시도 선이 아니라 «면» 으로 (2026-09-05) ─────────
   선택 표시를 노란 링으로 뒀는데, 링은 눈에 테두리입니다. 뜻(어느 분을 보고
   있는가)은 지키고 표현만 채움으로 바꿉니다. */
.cv3home-tr-p.is-on,
.cv3home-side-i.is-on {
  box-shadow: none;
  background: #FFF3D0;
  font-weight: 800;
}
.cv3home-tr-p.is-on b,
.cv3home-side-i.is-on b { color: #4A3A05; }
.cv3home-tr-p.is-on::before,
.cv3home-side-i.is-on::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: #E0B12C;
}
.cv3home-tr-p, .cv3home-side-i { position: relative; overflow: hidden; }
/*  입력칸도 선 대신 면으로 */
.cv3home-in {
  background: #F4F2EC; box-shadow: none;
}
.cv3home-in:focus { background: #FFFFFF; }
.cv3home-logo-b { box-shadow: none; }

/* ── 트리 손질 (2026-09-05) ────────────────────────────────────────────
   빈자리 접기 · 찾기 칸 · 「가져오기」 줄 */
.cv3home-tr-q {
  width: 100%; margin: 4px 0 8px; padding: 7px 10px; border-radius: 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .92); color: #282B2B;
  box-shadow: none; -webkit-appearance: none; appearance: none;
}
.cv3home-tr-q::placeholder { color: #7B7E76; font-weight: 600; }
.cv3home-tr-q:focus { background: #FFFFFF; }
.cv3home-side-t em.on {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800;
  color: #CFF2DE;
}
/*  빈자리 묶음 — 접어 둡니다. 여기가 트리를 «벽» 으로 만들던 자리입니다. */
.cv3home-tr-e { margin: 3px 0 0 20px; }
.cv3home-tr-e > summary {
  list-style: none; cursor: pointer; padding: 4px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .08); display: flex; align-items: center; gap: 6px;
  min-height: 26px;
}
.cv3home-tr-e > summary::-webkit-details-marker { display: none; }
.cv3home-tr-e > summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.cv3home-tr-e[open] > summary::before { transform: rotate(90deg); }
.cv3home-tr-e > summary:hover { background: rgba(255, 255, 255, .14); }
.cv3home-tr-e .cv3home-tr-p { margin-left: 0; width: 100%; }
/*  병상에만 있고 아직 안 데려온 이름 */
.cv3home-tr-p.is-out { background: #FFFFFF; }
.cv3home-tr-p.is-out b { color: #3A3D35; }
.cv3home-tr-p.is-out i { background: #E4EEF6; color: #16457A; }
.cv3home-tr-n { margin: 6px 0 0; font-size: 11px; color: rgba(255,255,255,.88); line-height: 1.5; }

/*  ⚠ 실측: 머리줄이 「사람 ②1 값 옴」 처럼 겹쳤습니다 — 개수 배지와 「값 옴」이
    같은 자리에 붙었습니다. 줄을 flex 로 펴고 사이를 벌립니다. */
.cv3home-tree > .cv3home-side-t {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 2px; padding: 2px 2px;
}
.cv3home-tree > .cv3home-side-t > span {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 11px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
}
.cv3home-tree > .cv3home-side-t > em.on {
  margin-left: auto; flex: 0 0 auto;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(190, 240, 212, .22); color: #DFF7E9;
  font-size: 11px; font-weight: 800; font-style: normal;
}

/*  ⚠ 선택 표시가 아직 **노란 링**으로 남아 있었습니다(실측). 앞서 쓴 채움 규칙은
    (0,2,0)인데 `.cv3home-side .cv3home-side-i.is-on` 이 (0,3,0)이라 링이 이겼습니다.
    같은 무게로 다시 씁니다 — 테두리 대신 채움 + 왼쪽 표식(대표님 지시). */
.cv3home-side .cv3home-side-i.is-on,
.cv3home-side .cv3home-tr-p.is-on {
  box-shadow: none;
  background: #FFF3D0;
}
.cv3home-side .cv3home-side-i.is-on b { color: #4A3A05; font-weight: 800; }
.cv3home-side .cv3home-side-i { position: relative; overflow: hidden; }
.cv3home-side .cv3home-side-i.is-on::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: #E0B12C;
}

/* ══ 이름·호칭 트리 (2026-09-05 · 대표님 지시) ═══════════════════════════
   「로고 밑에 → 이름 호칭 만들기 → 그 밑에 이름 호칭 트리」 · 「색상은 흰색요.」
   칸은 전부 **흰색**입니다. 경계는 선이 아니라 면과 그림자로 만듭니다. */
.cv3home-ntree { margin-top: 10px; }
.cv3home-ntree > .cv3home-side-t {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 2px;
  color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .20);
}
.cv3home-ntree > .cv3home-side-t > span {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 11px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
}
.cv3home-ntree > .cv3home-side-t > em.on {
  margin-left: auto; font-style: normal; padding: 1px 7px; border-radius: 999px;
  background: rgba(190, 240, 212, .22); color: #DFF7E9; font-size: 11px; font-weight: 800;
}
.cv3home-nt-n { margin: 0 0 6px; }
.cv3home-nt-n > summary { list-style: none; cursor: pointer; display: block; }
.cv3home-nt-n > summary::-webkit-details-marker { display: none; }
/*  이름 줄 — 흰 칸 */
.cv3home-nt-p {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border-radius: 10px; min-height: 40px;
  background: #FFFFFF; color: #282B2B;
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12), 0 6px 16px -12px rgba(20, 24, 28, .40);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s;
}
.cv3home-nt-p:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(20,24,28,.14), 0 12px 22px -12px rgba(20,24,28,.5); }
.cv3home-nt-p .cv3home-av { background: rgba(40, 43, 43, .09); color: #282B2B; }
.cv3home-nt-p b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-nt-p i {
  margin-left: auto; flex: 0 0 auto; font-style: normal;
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: #EFEDE6; color: #5B5E56;
}
.cv3home-nt-p.is-on   i { background: #DDEFE4; color: #1B5E3A; }
.cv3home-nt-p.is-idle i { background: #F6EEDC; color: #7A5B10; }
.cv3home-nt-p.is-none i { background: #EFEDE6; color: #6B6E66; }
/*  지금 보는 이름 — 선이 아니라 채움 + 왼쪽 표식 */
/*  🔴 2026-09-12 — **이름이 겹쳐 있었습니다.** «고른 것» 과 «값 옴» 이 둘 다
    `is-on` 이라, 값이 오는 사람은 **고르지도 않았는데 노랗게** 보였습니다.
    그래서 대표님이 「야호를 선택해도 안 바뀐다」고 느끼셨습니다 — 실제로는
    바뀌는데 **둘 다 노래서 구별이 안 됐습니다.** 고른 것은 `is-pick` 으로 가릅니다. */
.cv3home-side .cv3home-nt-p.is-pick { background: #FFF3D0; }
.cv3home-side .cv3home-nt-p.is-pick b { color: #4A3A05; }
.cv3home-side .cv3home-nt-p.is-pick::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: #E0B12C;
}
/*  펼침 표시 */
.cv3home-nt-n > summary::after {
  content: '▸'; display: block; margin: 2px 0 0 16px;
  font-size: 11px; color: rgba(255, 255, 255, .62); transition: transform .15s;
  transform-origin: 3px center;
}
.cv3home-nt-n[open] > summary::after { transform: rotate(90deg); }
/*  센서 줄 — 흰 칸, 한 칸 들여서 */
.cv3home-nt-s {
  display: flex; align-items: baseline; gap: 8px;
  margin: 3px 0 0 16px; padding: 7px 10px; border-radius: 10px;
  background: #FFFFFF; color: #3A3D35;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
  font-size: 11px;
}
.cv3home-nt-s b { font-weight: 800; color: #282B2B; }
.cv3home-nt-s span { margin-left: auto; font-weight: 700; color: #6B6E66; font-variant-numeric: tabular-nums; }
.cv3home-nt-s.is-live span { color: #1B5E3A; }
.cv3home-nt-s.is-agg  span { color: #7A5B10; }
.cv3home-nt-s.is-none span { color: #8A2B2B; }
@media (prefers-reduced-motion: reduce) { .cv3home-nt-p:hover { transform: none; } }

/* ══ 병실 트리 (추가·삭제·이름변경) — 흰 칸 (2026-09-05 · 대표님 지시) ══════
   「강민구 네임카드 흰색으로 변경하고 요양원 병원처럼 아래에 트리를 추가 삭제
    이름변경등을 할 수 있게 해주세요.」 */
/*  ① 이름 카드도 흰색 — 선택은 왼쪽 표식으로만 말합니다 */
.cv3home-side .cv3home-nt-p.is-pick,
.cv3home-side .cv3home-side-i.is-on { background: #FFFFFF; }
.cv3home-side .cv3home-nt-p.is-pick b,
.cv3home-side .cv3home-side-i.is-on b { color: #282B2B; }

/*  ② 병실 트리 */
.cv3home-ftree { margin-top: 14px; }
.cv3home-ftree > .cv3home-side-t {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 2px;
  color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .20);
}
.cv3home-ftree > .cv3home-side-t > span {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 11px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
}
.cv3home-ft-add {
  margin-left: auto; font: inherit; font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: #FFFFFF; color: #282B2B; min-height: 24px;
}
.cv3home-ft-add:hover { background: #F1EFE8; }
.cv3home-ft-z, .cv3home-ft-r { margin: 0; }
.cv3home-ft-z > summary,
.cv3home-ft-r > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 10px; min-height: 32px;
  background: #FFFFFF; color: #282B2B; margin-top: 4px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
}
.cv3home-ft-z > summary::-webkit-details-marker,
.cv3home-ft-r > summary::-webkit-details-marker { display: none; }
.cv3home-ft-z > summary::before,
.cv3home-ft-r > summary::before {
  content: '▸'; font-size: 11px; color: #8A8D85; transition: transform .15s; flex: 0 0 auto;
}
.cv3home-ft-z[open] > summary::before,
.cv3home-ft-r[open] > summary::before { transform: rotate(90deg); }
.cv3home-ft-z > summary b { font-size: 12px; font-weight: 800; }
.cv3home-ft-r { margin-left: 12px; }
.cv3home-ft-r > summary b { font-size: 11px; font-weight: 700; }
.cv3home-ft-z > summary > span:first-of-type,
.cv3home-ft-r > summary > span:first-of-type {
  font-size: 11px; font-weight: 700; color: #6B6E66; font-variant-numeric: tabular-nums;
}
/*  칸 안 작은 단추들 */
.cv3home-ft-x { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.cv3home-ft-x button {
  font: inherit; font-size: 11px; font-weight: 800; padding: 3px 7px;
  border-radius: 999px; cursor: pointer; min-height: 22px;
  background: #EFEDE6; color: #3A3D35;
}
.cv3home-ft-x button:hover { background: #E2DFD6; }
.cv3home-ft-x button[data-home$="del"] { background: #F7E3E0; color: #8A2B2B; }
.cv3home-ft-x button[data-home$="del"]:hover { background: #F0CFC9; }
/*  자리 줄 */
.cv3home-ft-b {
  display: flex; align-items: center; gap: 6px;
  margin: 3px 0 0 24px; padding: 6px 9px; border-radius: 10px;
  background: #FFFFFF; color: #282B2B; font-size: 11px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .09);
}
.cv3home-ft-b em {
  font-style: normal; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: #EDEBE4; color: #5B5E56;
}
.cv3home-ft-b b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-ft-b i {
  font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 6px;
  border-radius: 999px; background: #EFEDE6; color: #6B6E66; flex: 0 0 auto;
}
.cv3home-ft-b i.ok { background: #DDEFE4; color: #1B5E3A; }
.cv3home-ft-b.is-empty { background: rgba(255, 255, 255, .34); color: rgba(255,255,255,.8); box-shadow: none; }
.cv3home-ft-b.is-empty em { background: rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
.cv3home-ft-e { margin: 3px 0 0 24px; }
.cv3home-ft-e > summary {
  list-style: none; cursor: pointer; padding: 4px 9px; border-radius: 10px; min-height: 26px;
  font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .10); display: flex; align-items: center; gap: 6px;
}
.cv3home-ft-e > summary::-webkit-details-marker { display: none; }
.cv3home-ft-e > summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.cv3home-ft-e[open] > summary::before { transform: rotate(90deg); }
.cv3home-ft-e .cv3home-ft-b { margin-left: 0; }
.cv3home-ft-n { margin: 6px 0 0; font-size: 11px; color: rgba(255,255,255,.88); line-height: 1.5; }
/*  ⚠ 이 목록이 본체와 같은 것임을 화면이 말합니다 */
.cv3home-ft-w {
  margin: 8px 0 0; padding: 7px 9px; border-radius: 10px;
  background: rgba(255, 214, 102, .18); color: #FFF0C7;
  font-size: 11px; font-weight: 600; line-height: 1.55;
}
.cv3home-ft-w b { color: #FFE9A8; font-weight: 800; }

/*  ⚠ 실측: 자리 줄이 좁아 「장효찬」이 **「장.」** 으로 잘렸습니다. 이름이 가장
    중요한 글자인데 배지와 단추가 먼저 자리를 가져갔습니다. 이름에 먼저 주고,
    「가정용에 없음/있음」 배지는 좁으면 접습니다. */
.cv3home-ft-b b { flex: 1 1 auto; min-width: 0; }
.cv3home-ft-b i { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container cvhome (max-width: 9999px) {}
.cv3home-ft-b .cv3home-ft-x { flex: 0 0 auto; }
/*  좁은 패널에서는 배지를 점 하나로 — 뜻은 title 로 남깁니다 */
@media (max-width: 1600px) {
  .cv3home-ft-b i { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 999px; }
}

/* ══ 이름 트리에 «하위» 가 생겼습니다 (2026-09-05) ═══════════════════════
   대표님: 「이름 호칭 기입을 통해 만든 이름에 하위 트리를 만들라는 겁니다.」
   깊이는 `--d` 로 들여씁니다. 칸은 전부 흰색입니다. */
.cv3home-nt-n { margin: 0 0 5px; padding-left: calc(var(--d, 0) * 12px); }
.cv3home-nt-row { display: flex; align-items: stretch; gap: 6px; }
.cv3home-nt-row .cv3home-nt-p { flex: 1 1 auto; min-width: 0; }
.cv3home-nt-x { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; justify-content: center; }
.cv3home-nt-x button {
  font: inherit; font-size: 11px; font-weight: 800; padding: 2px 6px;
  border-radius: 999px; cursor: pointer; min-height: 18px; white-space: nowrap;
  background: #FFFFFF; color: #3A3D35;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12);
}
.cv3home-nt-x button:hover { background: #F1EFE8; }
.cv3home-nt-x button[data-home="nadd"] { background: #E4EEF6; color: #16457A; }
.cv3home-nt-x button[data-home="nadd"]:hover { background: #D3E4F1; }
.cv3home-nt-x button[data-home="ndel"] { background: #F7E3E0; color: #8A2B2B; }
.cv3home-nt-x button[data-home="ndel"]:hover { background: #F0CFC9; }
.cv3home-nt-s { margin-left: 14px; }
.cv3home-nt-e, .cv3home-nt-w {
  margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: rgba(255,255,255,.88);
}
.cv3home-nt-w {
  padding: 7px 9px; border-radius: 10px; background: rgba(255, 255, 255, .10);
}
.cv3home-nt-w b { color: #FFFFFF; font-weight: 800; }

/*  센서 줄의 「떼기」 — 이름에서만 뗍니다(센서는 목록에 남습니다) */
.cv3home-nt-s { align-items: center; }
.cv3home-nt-s span { margin-left: auto; }
.cv3home-nt-off {
  flex: 0 0 auto; margin-left: 8px;
  font: inherit; font-size: 11px; font-weight: 800; padding: 3px 7px;
  border-radius: 999px; cursor: pointer; min-height: 20px;
  background: #F7E3E0; color: #8A2B2B;
}
.cv3home-nt-off:hover { background: #F0CFC9; }

/* ══ 인라인 물음창 — 브라우저 기본 창 대신 (2026-09-05 · 대표님 지시) ═══════
   「추가나 삭제를 하면 왜 브라우저가 추가할지 삭제할지를 물어보죠?」
   「요양원 병원도 동일한거면 같이 변경해주세요.」
   ⚠ 묻는 **내용**은 그대로입니다 — 무엇을 잃는지 세어서 말하는 규칙은
      창을 바꿨다고 없앨 일이 아닙니다(R0-6). */
.cv3home-ask {
  display: block; margin: 0 0 10px; padding: 11px 12px; border-radius: 14px;
  background: #FFFFFF; color: #282B2B;
  box-shadow: 0 2px 5px rgba(20, 24, 28, .14), 0 14px 28px -14px rgba(20, 24, 28, .5);
}
.cv3home-ask.is-danger { background: #FFF6F4; }
.cv3home-ask-t { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.cv3home-ask.is-danger .cv3home-ask-t { color: #8A2B2B; }
.cv3home-ask-n { margin: 5px 0 0; font-size: 11px; line-height: 1.55; color: #5B5E56; }
.cv3home-ask-n span { display: block; }
.cv3home-ask-n b { font-weight: 800; color: #282B2B; }
.cv3home-ask input {
  width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  font: inherit; font-size: 12px; font-weight: 700; color: #282B2B;
  background: #F4F2EC; -webkit-appearance: none; appearance: none;
}
.cv3home-ask input:focus { background: #FFFFFF; }
.cv3home-ask-b { display: flex; gap: 6px; margin-top: 9px; }
.cv3home-ask-b button {
  flex: 1 1 0; font: inherit; font-size: 11px; font-weight: 800;
  padding: 7px 10px; border-radius: 10px; cursor: pointer; min-height: 34px;
  background: #EFEDE6; color: #3A3D35;
}
.cv3home-ask-b button[data-home="askok"] { background: #282B2B; color: #FFFFFF; }
.cv3home-ask.is-danger .cv3home-ask-b button[data-home="askok"] { background: #A3200A; }
.cv3home-ask-b button:hover { filter: brightness(1.08); }

/* ── 이름 트리 인라인 폼 ─────────────────────────────────────────────── */
.cv3home-nt-f {
  margin: 5px 0 0 14px; padding: 9px 10px; border-radius: 10px;
  background: #FFFFFF; box-shadow: 0 2px 5px rgba(20, 24, 28, .14);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.cv3home-nt-f.is-del { display: block; background: #FFF6F4; }
.cv3home-nt-f input {
  flex: 1 1 100px; min-width: 0; padding: 7px 9px; border-radius: 10px;
  font: inherit; font-size: 12px; font-weight: 700; color: #282B2B;
  background: #F4F2EC; -webkit-appearance: none; appearance: none;
}
.cv3home-nt-f input:focus { background: #FFFFFF; }
.cv3home-nt-f button,
.cv3home-nt-ask button {
  font: inherit; font-size: 11px; font-weight: 800; padding: 6px 10px;
  border-radius: 10px; cursor: pointer; min-height: 30px; flex: 0 0 auto;
  background: #EFEDE6; color: #3A3D35;
}
.cv3home-nt-f button[type="submit"] { background: #282B2B; color: #FFFFFF; }
.cv3home-nt-f.is-del button[data-home="edok"],
.cv3home-nt-ask button[data-home="edok"] { background: #A3200A; color: #FFFFFF; }
.cv3home-nt-f p { margin: 0 0 8px; font-size: 11px; line-height: 1.55; color: #8A2B2B; font-weight: 700; }
.cv3home-nt-f p span { display: block; color: #5B5E56; font-weight: 600; }
.cv3home-nt-f p span b { color: #282B2B; font-weight: 800; }
.cv3home-nt-ask { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.cv3home-nt-ask em { font-style: normal; font-size: 11px; font-weight: 700; color: #6B6E66; }

/* ══ 기능 단추를 «카드 안» 으로 (2026-09-05 · 대표님 지시) ═══════════════
   「첨부 기능 버튼을 빼고 병원 요양원 처럼 카드 안에 버튼으로 기능을
    올려주세요.」 — 병실 트리와 같은 짜임으로 맞춥니다.
   ⚠ 카드가 `<button>` 이면 그 안에 단추를 못 넣습니다(HTML 이 금합니다).
      카드는 `<div>`, 안에 «고르기» 단추 + 기능 단추. */
.cv3home-nt-row { display: block; }
.cv3home-nt-p {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 8px 6px 10px; border-radius: 10px; min-height: 42px;
  background: #FFFFFF; color: #282B2B; cursor: default;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12), 0 6px 16px -12px rgba(20, 24, 28, .40);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s;
}
.cv3home-nt-p:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(20,24,28,.14), 0 12px 22px -12px rgba(20,24,28,.5); }
/*  ⚠ 카드 전체를 누를 수 있게 두지 않습니다 — 기능 단추를 누르려다 사람이
    바뀌면 곤란합니다. 고르기는 이름 부분만 받습니다. */
.cv3home-nt-sel {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; border-radius: 10px; cursor: pointer;
  background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left;
}
.cv3home-nt-sel:hover { background: rgba(40, 43, 43, .05); }
.cv3home-nt-sel b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-nt-sel i {
  margin-left: auto; flex: 0 0 auto; font-style: normal;
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: #EFEDE6; color: #5B5E56;
}
.cv3home-nt-p.is-on   .cv3home-nt-sel i { background: #DDEFE4; color: #1B5E3A; }
.cv3home-nt-p.is-idle .cv3home-nt-sel i { background: #F6EEDC; color: #7A5B10; }
.cv3home-nt-p.is-none .cv3home-nt-sel i { background: #EFEDE6; color: #6B6E66; }
/*  기능 단추 — 카드 안 오른쪽, 가로로 */
.cv3home-nt-x {
  display: flex; flex-direction: row; gap: 6px; flex: 0 0 auto;
  padding-left: 6px; margin-left: 2px;
}
.cv3home-nt-x button {
  font: inherit; font-size: 11px; font-weight: 800; padding: 4px 7px;
  border-radius: 10px; cursor: pointer; min-height: 26px; white-space: nowrap;
  background: #F1EFE8; color: #3A3D35; box-shadow: none;
}
.cv3home-nt-x button:hover { background: #E4E1D8; }
.cv3home-nt-x button[data-home="nadd"] { background: #E4EEF6; color: #16457A; }
.cv3home-nt-x button[data-home="nadd"]:hover { background: #D3E4F1; }
.cv3home-nt-x button[data-home="ndel"] { background: #F7E3E0; color: #8A2B2B; }
.cv3home-nt-x button[data-home="ndel"]:hover { background: #F0CFC9; }
/*  선택 표식은 카드 왼쪽 안쪽에 */
.cv3home-side .cv3home-nt-p.is-pick::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: #E0B12C;
}
@media (prefers-reduced-motion: reduce) { .cv3home-nt-p:hover { transform: none; } }

/*  ⚠ 실측: 단추를 카드에 넣자 208px 폭에서 「강민구」가 **「강…」** 으로
    잘렸습니다. 이름이 가장 중요한 글자인데 아바타·상태칩·단추 셋이 먼저
    자리를 가져갔습니다.
    ⇒ 카드를 **줄바꿈**하게 두고, 이름에 최소 폭(130px)을 줍니다.
      자리가 모자라면 단추가 **아랫줄로 내려갑니다** — 여전히 «카드 안» 입니다.
      폭을 재서 끊는 대신 넘치면 알아서 접히게 두는 편이 안전합니다. */
.cv3home-nt-p { flex-wrap: wrap; row-gap: 6px; padding-bottom: 7px; }
.cv3home-nt-sel { flex: 1 1 130px; }
.cv3home-nt-sel b { flex: 1 1 auto; min-width: 0; }
.cv3home-nt-sel i { flex: 0 0 auto; }
.cv3home-nt-x { margin-left: auto; padding-left: 0; }

/* ══ 밤 띠 색을 갈라 놓습니다 (2026-09-05 · 대표님 지시) ═══════════════════
   대표님: 「수면은 차트가 같은 계열 색상이라 구분이 안갑니다.」
   ⚠ 실측하니 넷이 전부 계열색 변주(민트·플레임·클라레·회색)였습니다 —
      옆에 두면 구별이 안 됩니다. 네 뜻이 서로 다른 색을 갖게 다시 고릅니다.
   실측(dataviz validate_palette): 색약 최저 ΔE 12.9 · 정상 최저 20.0 ·
   대비 넷 다 3:1 이상. 「채도 바닥」 하나만 FAIL 인데 그건 **자리 비움**
   이고, 비어 있음은 **회색으로 읽혀야** 맞습니다 — 일부러 둔 것입니다. */
.cv3home-night rect.is-quiet,
.cv3home-night-lg i.is-quiet    { fill: #2E9E8F; background: #2E9E8F; }   /* 조용 */
.cv3home-night rect.is-restless,
.cv3home-night-lg i.is-restless { fill: #B58A00; background: #B58A00; opacity: 1; } /* 뒤척임 */
.cv3home-night rect.is-awake,
.cv3home-night-lg i.is-awake    { fill: #A3200A; background: #A3200A; }   /* 깨어 움직임 */
.cv3home-night rect.is-away,
.cv3home-night-lg i.is-away     { fill: #B9BFC5; background: #B9BFC5; }   /* 자리 비움 */
.cv3home-night .cv3home-donut .is-quiet    { stroke: #2E9E8F; }
.cv3home-night .cv3home-donut .is-restless { stroke: #B58A00; }
.cv3home-night .cv3home-donut .is-awake    { stroke: #A3200A; }
.cv3home-night .cv3home-donut .is-away     { stroke: #B9BFC5; }
/*  도넛은 `circle` 입니다 — 위 선택자가 안 걸립니다(실측). 같은 색으로 맞춥니다. */
.cv3home-donut circle.is-quiet    { stroke: #2E9E8F; }
.cv3home-donut circle.is-restless { stroke: #B58A00; }
.cv3home-donut circle.is-awake    { stroke: #A3200A; }
.cv3home-donut circle.is-away     { stroke: #B9BFC5; }

/*  스트레스 24시간 링 범례 — 색이 뜻을 혼자 지지 않게 */
.cv3home-tod-lg {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0;
  font-size: 11px; font-weight: 700; color: var(--hx-mut);
}
.cv3home-tod-lg span { display: inline-flex; align-items: center; gap: 6px; }
.cv3home-tod-lg i { width: 9px; height: 9px; border-radius: 999px; display: block; }


/* ══ 주황을 걷어냅니다 (2026-09-05 · 대표님 「빨간색과 오랜지는 구분이 잘
   안됩니다.」 「뒤척임은 짙은 노란색으로요..」) ═══════════════════════════
   ⚠ 원인은 **주황이 빨강과 노랑 사이에 있었다**는 것입니다. 주황을 빼고
      뒤척임을 **짙은 노랑** `#B58A00` 으로 내리니 빨강과 갈라집니다.
   실측(all-pairs): 색약 최저 ΔE 12.7 · 정상 최저 17.7 · 빨강↔노랑도 통과.
   자리 비움은 **옅은 회색** `#B9BFC5` — 비어 있음은 물러나 보여야 맞습니다
   (대비 1.81 은 그래서 일부러 둡니다. 범례가 이름을 말합니다). */

/* ── 수면 단계 그림 (2026-09-05) ─────────────────────────────────────── */
.cv3home-stg { margin-top: 10px; }
.cv3home-stg .cv3home-slp-y { grid-template-columns: 52px minmax(0, 1fr); }
.cv3home-stg .cv3home-ch-x { margin-left: 52px; }

/* ══ 세로 막대를 «회색 그라디언트» 로 (2026-09-05 · 대표님 지시) ═══════════
   「움직임 가로 바 바로 밑에 세로 막대 차트는 회색으로 통일하고 그라디언트로
    강약을 조절해 주세요.」
   ⚠ 색 사다리(회록→녹→호박→진홍)를 걷어내고 **한 계열 회색**으로 갑니다.
      강약은 «색이 아니라 밝기» 로 냅니다 — 낮으면 옅고 높을수록 짙습니다.
      키(높이)가 이미 값을 말하니, 회색 농담이 그걸 **한 번 더** 말합니다.
   ⚠ 가로 바(«지금»)는 그대로 둡니다 — 거기가 색으로 상태를 말하는 자리입니다. */
.cv3home-mvl-s i,
.cv3home-mvl-s i.on,
.cv3home-mvl-s i.over {
  background-image: linear-gradient(to top,
    #E2E0D9 0%, #C6C4BC 22%, #9C9A92 48%, #6E6C66 74%, #45443F 100%);
  background-repeat: no-repeat;
  background-size: 100% 54px;
  background-position: 0 bottom;
  background-color: transparent;
}
.cv3home-mvl-s i.pad { background-image: none; background-color: #EDEBE4; }

/*  재실 / 부재 / 장기 부재 뱃지 */
.cv3home-prs {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}
.cv3home-prs.is-in   { background: #DDEFE4; color: #1B5E3A; }
.cv3home-prs.is-away { background: #F6EEDC; color: #6B5108; }
.cv3home-prs.is-long { background: #F7E0DC; color: #8A2B2B; }

/*  ⚠ 실측: 깊이 3 에서 입력 폼 폭이 **55px** 이 됐습니다. 들여쓰기(`--d`×12px)와
    폼 자체 여백이 겹쳐 눌린 것입니다. 깊어질수록 못 쓰게 됩니다.
    ⇒ 들여쓰기에 **상한**을 두고, 폼은 그 마디 폭을 다 씁니다. */
.cv3home-nt-n { padding-left: min(calc(var(--d, 0) * 10px), 30px); }
.cv3home-nt-f { margin-left: 0; width: 100%; box-sizing: border-box; }
.cv3home-nt-f input { flex: 1 1 90px; }
.cv3home-nt-s { margin-left: 8px; }

/* ══ AI 종합평가 (2026-09-05 · 대표님 「방사진을 → AI 기반 종합평가 분석 보고
   섹션으로」) ═══════════════════════════════════════════════════════════
   ⚠ 값은 `HelixAiCore.assess()` 가 실제로 내는 것만 씁니다. 코어가 없거나
      표본이 모자라면 그렇다고 적습니다 — 「이상 없음」을 먼저 말하지 않습니다. */
.cv3home-hero-ai { flex: 0 0 38%; align-self: flex-start; margin: 12px 12px 12px 0; min-width: 0; }
.cv3home-air {
  padding: 12px 13px; border-radius: 14px;
  background: color-mix(in srgb, var(--hx-txt) 3.5%, transparent);
}
.cv3home-air-h { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.cv3home-air-h b { font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home-air-h span { font-size: 11px; font-weight: 600; color: var(--hx-mut2); }
.cv3home-air-v { display: flex; align-items: baseline; gap: 8px; margin: 0 0 9px; }
.cv3home-air-v b { font-size: 20px; font-weight: 800; letter-spacing: -.025em; color: #1B5E3A; }
.cv3home-air.is-warn .cv3home-air-v b { color: #7A5B10; }
.cv3home-air.is-crit .cv3home-air-v b { color: #8A2B2B; }
.cv3home-air-v em {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; background: #EFEDE6; color: #5B5E56;
}
.cv3home-air-g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cv3home-air-g > div { padding: 7px 9px; border-radius: 10px; background: var(--hx-card, #fff); }
.cv3home-air-g b {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--hx-txt); font-variant-numeric: tabular-nums;
}
.cv3home-air-g span { display: block; margin-top: 1px; font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-air-g i { font-style: normal; font-weight: 600; opacity: .8; }
.cv3home-air-l { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv3home-air-l li {
  font-size: 11px; color: var(--hx-txt2); padding: 5px 9px; border-radius: 10px;
  background: var(--hx-card, #fff);
}
.cv3home-air-w {
  margin: 8px 0 0; padding: 7px 9px; border-radius: 10px;
  background: #F7E0DC; color: #8A2B2B; font-size: 11px; font-weight: 800;
}
.cv3home-air-b, .cv3home-air-n { margin: 8px 0 0; font-size: 11px; color: var(--hx-mut2); }

/* ── 임시 미디어 넉 장 (저장하지 않습니다 · 화면에만) ─────────────────── */
.cv3home-mdemo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 10px 12px 0;
}
.cv3home-mdemo figure { margin: 0; }
.cv3home-mdemo img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
}
.cv3home-mdemo figcaption {
  margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--hx-mut2); text-align: center;
}
@media (max-width: 900px) { .cv3home-mdemo { grid-template-columns: repeat(2, 1fr); } }

/*  AI 분석 보고 — 누르기 전에는 아무것도 안 나갑니다 */
.cv3home-air-ask {
  width: 100%; margin-top: 9px; padding: 8px 10px; border-radius: 10px;
  font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; min-height: 34px;
  background: #282B2B; color: #FFFFFF;
}
.cv3home-air-ask:hover { filter: brightness(1.15); }
.cv3home-air-r {
  margin-top: 8px; padding: 9px 10px; border-radius: 10px;
  background: var(--hx-card, #fff);
}
.cv3home-air-r p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--hx-txt2); }
.cv3home-air-r span { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--hx-mut2); }

/*  실사 예시 이미지 — 「예시」 표시는 남깁니다(이 방의 실제 사진이 아닙니다).
    ⚠ 캡션에 붙였더니 「복도 예…」로 잘렸습니다(실측) → 그림 위 배지로 옮김. */
.cv3home-mdemo figure { position: relative; }
.cv3home-mdemo img { aspect-ratio: 4 / 3; object-fit: cover; }
.cv3home-mdemo em {
  position: absolute; left: 4px; top: 4px;
  font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 5px;
  border-radius: 999px; background: rgba(255, 255, 255, .88); color: #3A3D35;
}
.cv3home-mdemo figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ 카드 배경 시퀀스 (2026-09-05 · 대표님 지시) ═════════════════════════
   「이미지 사이즈를 크게 만들어서 카드의 배경에서 시퀀스로 돌아 가는 겁니다.」
   「가로 크기는 AI 종합평가 전으로 사이즈를 제한하면 됩니다.」
   ⇒ 넉 장(1280×720)을 **왼쪽 칸 안에서만** 번갈아 돕니다. 한 장 7초씩,
      네 장이면 한 바퀴 28초. 넘어갈 때는 부드럽게 겹칩니다.
   ⚠ 글씨가 사진 위에 얹히므로 **흰 장막 86%** 를 깝니다. 가장 어두운 야간
      사진 위에서도 본문 10.80:1 · 큰 제목 13.45:1 로 실측했습니다.
      장막이 없으면 읽히지 않습니다 — 예뻐 보이자고 못 읽게 두지 않습니다.
   ⚠ 흔들림에 약하신 분께는 **한 장만** 두고 돌리지 않습니다. */
.cv3home-hero-in { position: relative; }
.cv3home-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 14px; overflow: hidden; pointer-events: none;
}
.cv3home-hero-bg i {
  position: absolute; inset: 0; display: block;
  background-size: cover; background-position: center;
  opacity: 0;
  animation: cvhSeq 28s linear infinite;
}
@keyframes cvhSeq {
  0%    { opacity: 0; }
  2%    { opacity: 1; }
  25%   { opacity: 1; }
  27%   { opacity: 0; }
  100%  { opacity: 0; }
}
/*  ⚠ 장막을 **완전히 걷었습니다**(2026-09-05 대표님 「레이어를 분리 하세요.」).
    앞서는 사진 위에 반투명 띠를 깔아 글을 살렸습니다 — 사진과 글이 한 층에
    뒤엉킨 것입니다. 이제 층을 나눕니다:
      ① 사진 층  — 아무것도 덮지 않습니다. 넉 장이 그대로 돕니다.
      ② 글 층    — 자기 **하프톤 판** 위에 올라갑니다(세 칸과 같은 처리).
    그래서 사진은 온전하고 글은 읽힙니다. 둘 다 포기하지 않습니다. */
/*  글은 배경 위로 */
.cv3home-hero.has-seq .cv3home-hero-in > *:not(.cv3home-hero-bg) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .cv3home-hero-bg i { animation: none; opacity: 0; }
  .cv3home-hero-bg i:first-child { opacity: 1; }
}

/*  ⚠ 배경이 «그 방의 사진» 으로 오해되면 안 됩니다. 조용히 한 낱말로 적습니다.
    (대표님이 진짜 사진을 올리시면 배경이 그 사진으로 바뀌고 이 표시는 사라집니다) */
.cv3home-hero-eg {
  font-style: normal; margin-left: 6px; font-size: 11px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; background: rgba(40, 43, 43, .07); color: #6B6E66;
}


/* ══ 세 칸을 «하프톤» 으로 (2026-09-05 · 대표님 지시) ═══════════════════
   「흰장막 없애고 3개 카드는 하프톤으로 표시하세요.」
   재실·낙상·스트레스 세 칸이 사진 위에 **반쯤 비치게** 뜹니다.
   ⚠ 반투명이면 글씨가 사진 무늬를 탑니다. 그래서 뒤를 흐려(`backdrop-filter`)
      무늬를 죽입니다 — 안 되는 브라우저에서는 흰 비율을 올려 받칩니다.
   ⚠ 값이 안 읽히면 하프톤이 아니라 그냥 흐린 칸입니다. 글씨는 진하게 둡니다. */
.cv3home-hero.has-seq .cv3home-tiles > * {
  background: rgba(255, 255, 255, .52);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(20, 24, 28, .10), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.cv3home-hero.has-seq .cv3home-tiles b { color: #16181C; }
.cv3home-hero.has-seq .cv3home-tiles span,
.cv3home-hero.has-seq .cv3home-tiles small { color: #3A3D35; }
/*  ⚠ `backdrop-filter` 를 못 쓰는 판에서는 반투명이 그냥 «흐릿한 칸» 이 됩니다.
    그때는 흰 비율을 올려 읽히게 받칩니다. */
@supports not (backdrop-filter: blur(2px)) {
  .cv3home-hero.has-seq .cv3home-tiles > * { background: rgba(255, 255, 255, .86); }
}


/* ══ 글 층 — 자기 하프톤 판 (2026-09-05 · 대표님 「레이어를 분리 하세요.」) ══
   ⚠ 반투명이면 글씨가 사진 무늬를 탑니다 → 뒤를 흐려 무늬를 죽입니다.
   ⚠ `backdrop-filter` 를 못 쓰는 판에서는 흰 비율을 올려 받칩니다.
      안 그러면 하프톤이 아니라 «안 보이는 칸» 이 됩니다. */
.cv3home-hero.has-seq .cv3home-hero-pane {
  /*  ⚠ `inline-block` 으로 뒀더니 판이 글에 맞춰 줄어들면서 「케어 미디 어」
         처럼 낱말이 끊겼습니다(실측). 판은 **칸 폭을 다 씁니다.** */
  display: block;
  margin: 12px 12px 0; padding: 12px 14px 13px; border-radius: 14px;
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 2px 6px rgba(20, 24, 28, .12), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.cv3home-hero.has-seq .cv3home-hero-pane > p:last-child { margin-bottom: 0; }
.cv3home-hero.has-seq .cv3home-hero-t { color: #16181C; }
.cv3home-hero.has-seq .cv3home-hero-k,
.cv3home-hero.has-seq .cv3home-hero-d { color: #3A3D35; }
@supports not (backdrop-filter: blur(2px)) {
  .cv3home-hero.has-seq .cv3home-hero-pane { background: rgba(255, 255, 255, .90); }
}
/*  사진 층은 이제 아무것도 안 덮습니다 — 다만 아래쪽에 아주 옅은 바닥을 둬
    흰 카드(감지영역·미디어 단추)와 사진이 부딪히지 않게 합니다. */
.cv3home-hero.has-seq .cv3home-hero-in { padding-bottom: 4px; }


/*  ⚠ 히어로 왼쪽 칸이 좁아 세 칸 글씨가 세로로 접혔습니다(「스 트 레 스」).
    AI 종합평가 폭을 38% → 34% 로 줄이고 세 칸 여백을 조입니다. */
/*  🔴 2026-09-11 — 34% 면 히어로 401px 에서 **136px** 입니다(실측).
    대표님이 아바타를 «2배(284px 높이)» 로 원하시는데, 그 그림은 폭이 190px 라
    136px 칸에는 **애초에 안 들어갑니다** — 말풍선이 폭 0 으로 눌렸습니다.
    46% → 184px(1.33배), 52% → 209px(**1.92배**)까지는 좋았는데,
    🔴 **좁은 화면(본문 516px)에서 이 칸이 26px 로 찌그러졌습니다**(실측).
       퍼센트로만 잡아 두면 히어로가 좁아질 때 바닥이 없습니다.
    → 퍼센트를 버리고 **«208px 를 바닥으로, 모자라면 아래 줄로»** 로 바꿉니다.
      넓으면 사진 옆에 서고, 좁으면 제 줄을 받아 오히려 더 커집니다.
    ⚠ 이 칸을 넓히면 왼쪽 세 칸(재실·낙상·스트레스) 글씨가 세로로 접히던
      옛 문제가 되살아납니다 — 그래서 **줄바꿈**이 옳은 답입니다. */
.cv3home-hero-in { flex-wrap: wrap; }
.cv3home-hero-ai { flex: 1 1 208px; min-width: 208px; }
.cv3home-hero.has-seq .cv3home-tiles { gap: 6px; }
.cv3home-hero.has-seq .cv3home-tiles > * { padding: 8px 9px; min-width: 0; }
.cv3home-hero.has-seq .cv3home-tiles span { white-space: nowrap; }

/*  ⚠ AI 판을 34% 로 줄이자 이번엔 **그쪽 글이 접혔습니다**(「살펴봐 야 함」·
    「스트레 스 %」). 한쪽을 넓히면 다른 쪽이 좁아지는 자리라, 폭을 더 옮기지
    않고 **글이 접히지 않게** 손봅니다. */
.cv3home-air-v b { text-wrap: balance; white-space: nowrap; font-size: 20px; }
.cv3home-air-g span { white-space: nowrap; font-size: 11px; }
.cv3home-air-g b { font-size: 13px; }
.cv3home-air-g i { display: block; margin-top: 1px; }
.cv3home-air-h b { font-size: 12px; }
.cv3home-air-h span { font-size: 11px; }
/*  ⚠ 줄임표를 넣었더니 「재.」「낙..」「스...」로 잘렸습니다 — 줄임표가 되레
    더 나쁩니다. **이름은 접히더라도 다 보여야** 합니다. 줄임표를 걷고
    글씨를 한 칸 줄여 두 줄로 접히게 둡니다. */
.cv3home-hero.has-seq .cv3home-tiles > * { flex: 1 1 0; min-width: 0; }
.cv3home-hero.has-seq .cv3home-tiles span {
  white-space: normal; overflow: visible; text-overflow: clip;
  font-size: 11px; line-height: 1.35; word-break: keep-all;
}
.cv3home-hero.has-seq .cv3home-tiles b { font-size: 15px; }
.cv3home-hero.has-seq .cv3home-tiles small { font-size: 11px; line-height: 1.4; word-break: keep-all; }
/*  세 칸 머리줄(아이콘 + 이름)이 한 줄에 안 들어가 「스트레.」로 잘렸습니다 →
    이름이 아이콘 아래로 접히게 둡니다. 잘리는 것보다 접히는 편이 낫습니다. */
.cv3home-hero.has-seq .cv3home-tiles > * > :first-child { flex-wrap: wrap; row-gap: 6px; }

/*  ⚠ 진행 칸 색은 **이전으로 되돌렸습니다**(2026-09-05 대표님 「이전으로 복구」).
    제가 중립 회청으로 바꿨던 것을 계열색으로 돌립니다. */

/* ══ AI 상담 (2026-09-05 · 대표님 「우측 패널에 요양원 처럼 AI 채팅」) ═════ */
.cv3home-chat { margin-top: 4px; }
.cv3home-ch-b {
  max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .14);
}
.cv3home-ch-m { max-width: 92%; padding: 8px 10px; border-radius: 10px; font-size: 11px; line-height: 1.55; }
.cv3home-ch-m p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.cv3home-ch-m span { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; opacity: .7; }
.cv3home-ch-m.is-me { align-self: flex-end; background: #FFF3D0; color: #4A3A05; }
.cv3home-ch-m.is-ai { align-self: flex-start; background: #FFFFFF; color: #282B2B; }
.cv3home-ch-m.is-wait { opacity: .7; font-style: italic; }
.cv3home-ch-e { margin: 0; padding: 10px 4px; font-size: 11px; color: rgba(255, 255, 255, .82); text-align: center; }
.cv3home-ch-f { display: flex; gap: 6px; margin-top: 7px; }
.cv3home-ch-f input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 10px;
  font: inherit; font-size: 12px; color: #282B2B; background: #FFFFFF;
  -webkit-appearance: none; appearance: none;
}
.cv3home-ch-f button {
  flex: 0 0 auto; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
  padding: 8px 12px; border-radius: 10px; min-height: 36px;
  background: #282B2B; color: #FFFFFF;
}
.cv3home-ch-f button:hover { filter: brightness(1.2); }
.cv3home-ch-w {
  display: flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .9); cursor: pointer;
}
.cv3home-ch-w input { width: 15px; height: 15px; accent-color: #FFD95D; }
/*  ⚠ 무엇이 붙어 나가는지 **그 자리에 그대로** 보여 줍니다 */
.cv3home-ch-p {
  margin: 5px 0 0; padding: 6px 8px; border-radius: 10px;
  background: rgba(0, 0, 0, .16); color: #EDEFF1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5; word-break: break-all;
}
.cv3home-chat .cv3home-ch-n,
.cv3home-cam .cv3home-ch-n {
  margin: 6px 0 0; font-size: 11px; color: rgba(255, 255, 255, .78); line-height: 1.5;
}

/* ══ 카메라 뷰어 (2026-09-05 · 대표님 「좌측 패널에는 카메라 뷰어」) ═══════
   ⚠ 스스로 켜지지 않습니다 · 녹화·저장·전송 없음 · 화면을 닫으면 끕니다. */
.cv3home-cam { margin-bottom: 10px; }
.cv3home-cam .cv3home-side-t { display: flex; align-items: center; gap: 6px; }
.cv3home-cam-live {
  font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; background: #A3200A; color: #fff;
  animation: cvhCamLive 1.6s ease-in-out infinite;
}
@keyframes cvhCamLive { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.cv3home-cam-v {
  position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  background: #2A3038; display: grid; place-items: center;
}
.cv3home-cam-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv3home-cam-off { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .55); }
.cv3home-cam-b {
  width: 100%; margin-top: 7px; padding: 8px 10px; border-radius: 10px;
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; min-height: 36px;
  background: #FFFFFF; color: #282B2B;
}
.cv3home-cam.is-on .cv3home-cam-b { background: #A3200A; color: #FFFFFF; }
.cv3home-cam-b:hover { filter: brightness(.96); }
@media (prefers-reduced-motion: reduce) { .cv3home-cam-live { animation: none; } }

/*  카메라 — 이름마다 «그 댁» (2026-09-05) */
.cv3home-cam-who {
  font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff;
}
.cv3home-cam-live { margin-left: auto; }
.cv3home-cam-v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv3home-cam-off { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); text-align: center; line-height: 1.6; }
.cv3home-cam-a { display: flex; gap: 6px; margin-top: 7px; }
.cv3home-cam-a .cv3home-cam-b { margin-top: 0; flex: 1 1 auto; }
.cv3home-cam-b.is-off { flex: 0 0 auto; background: #F7E3E0; color: #8A2B2B; }
/*  영상 대화 단추 — 카메라 칸 안 */
.cv3home-cam-b.is-call { background: #16457A; color: #FFFFFF; flex: 1 1 auto; }
.cv3home-cam-b.is-call:hover { filter: brightness(1.2); }
.cv3home-cam-a { flex-wrap: wrap; }

/* ══ 담당 가정 감시 목록 (2026-09-05 · 대표님 지시) ═══════════════════════
   「사회복지사가 담당하는 가정의 안전을 살필 수 있어야 하는 플랫폼」
   ⇒ 우측 패널 **맨 위**. 한 줄 한 가정, 급한 순. 누르면 그 댁으로.
   ⚠ 색만으로 급한 정도를 말하지 않습니다 — **글자 표(경보/주의/끊김)**가
      함께 있습니다. 색약이신 분도 읽혀야 합니다. */
.cv3home-wl { margin-bottom: 4px; }
.cv3home-wl > .cv3home-side-t { display: flex; align-items: center; gap: 6px; }
.cv3home-wl > .cv3home-side-t > span {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 11px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
}
.cv3home-wl > .cv3home-side-t > em {
  margin-left: auto; font-style: normal; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.cv3home-wl > .cv3home-side-t > em.on { background: rgba(190,240,212,.22); color: #DFF7E9; }
.cv3home-wl > .cv3home-side-t > em.is-urgent { background: #A3200A; color: #fff; }
.cv3home-wl-b { display: flex; flex-direction: column; gap: 6px; }
.cv3home-wl-i {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas: 'dot name tag' 'dot why why';
  gap: 1px 8px; width: 100%;
  padding: 8px 10px 8px 9px; border-radius: 10px;
  background: #FFFFFF; color: #282B2B; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s;
}
.cv3home-wl-i:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(20,24,28,.14), 0 10px 20px -12px rgba(20,24,28,.5); }
.cv3home-wl-i:focus-visible { outline: 3px solid #FFD95D; outline-offset: 2px; }
.cv3home-wl-d { grid-area: dot; width: 8px; height: 8px; border-radius: 999px; background: #C9C7BF; }
.cv3home-wl-i b { grid-area: name; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-wl-i i {
  grid-area: tag; font-style: normal; font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; background: #EFEDE6; color: #5B5E56; white-space: nowrap;
}
.cv3home-wl-i em {
  grid-area: why; font-style: normal; font-size: 11px; font-weight: 600; color: #6B6E66;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*  급한 순 — 색과 «글자 표»가 함께 말합니다 */
.cv3home-wl-i.is-crit { background: #FFF1EE; }
.cv3home-wl-i.is-crit .cv3home-wl-d { background: #A3200A; animation: cvhWlPulse 1.4s ease-in-out infinite; }
.cv3home-wl-i.is-crit i { background: #A3200A; color: #fff; }
.cv3home-wl-i.is-warn .cv3home-wl-d { background: #B58A00; }
.cv3home-wl-i.is-warn i { background: #F6EEDC; color: #6B5108; }
.cv3home-wl-i.is-idle .cv3home-wl-d { background: #9AA1A8; }
.cv3home-wl-i.is-ok .cv3home-wl-d { background: #2E9E8F; }
.cv3home-wl-i.is-ok i { background: #DDEFE4; color: #1B5E3A; }
/*  지금 보고 있는 집 — 테두리가 아니라 왼쪽 표식 */
.cv3home-wl-i.is-on::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: #E0B12C;
}
@keyframes cvhWlPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .cv3home-wl-i:hover { transform: none; }
  .cv3home-wl-i.is-crit .cv3home-wl-d { animation: none; }
}

/* ══ 카드마다 AI 한 줄 (2026-09-05 · 대표님 지시) ═════════════════════════
   ⚠ 「진단」이 아니라 「읽힌 것」입니다. 그래서 경보처럼 붉게 두지 않고
      조용한 줄로 둡니다 — 급한 것은 감시 규칙과 감시 목록이 말합니다. */
.cv3home-ail {
  display: flex; align-items: baseline; gap: 6px; margin: 7px 0 0;
  padding: 6px 9px; border-radius: 10px;
  background: color-mix(in srgb, var(--hx-txt) 3.5%, transparent);
  font-size: 11px; line-height: 1.5; color: var(--hx-txt2);
}
.cv3home-ail b {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 999px; background: #E4EEF6; color: #16457A;
}
.cv3home-ail.is-up { background: #FBF3E2; }
.cv3home-ail.is-up b { background: #F6EEDC; color: #6B5108; }
.cv3home-ail.is-crit { background: #FCEEEB; }
.cv3home-ail.is-crit b { background: #A3200A; color: #fff; }
.cv3home-ail.is-crit span { font-weight: 700; color: #8A2B2B; }

/* ══ 비교 학습 루프 — 「이 판단이 맞습니까?」 (2026-09-05 · 대표님 지시) ═══
   ⚠ 물음이 카드를 잡아먹으면 안 됩니다. 판단 줄 아래 작게 붙습니다.
   ⚠ 맞춤률을 부풀리지 않습니다 — 5건 미만이면 비율 대신 «표본 N» 만. */
.cv3home-ail { display: block; }
.cv3home-ail > p { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.cv3home-ail-f {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px;
  box-shadow: inset 0 1px 0 rgba(40, 43, 43, .08);
}
.cv3home-ail-q { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-ail-f button {
  font: inherit; font-size: 11px; font-weight: 800; padding: 4px 9px;
  border-radius: 999px; cursor: pointer; min-height: 26px;
  background: #FFFFFF; color: #3A3D35; box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
}
.cv3home-ail-f button[data-home="aitp"]:hover { background: #DDEFE4; color: #1B5E3A; }
.cv3home-ail-f button[data-home="aifp"]:hover { background: #F7E3E0; color: #8A2B2B; }
.cv3home-ail-f em {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--hx-mut2); font-variant-numeric: tabular-nums;
}

/* ══ 경보 때 «영상으로 확인» (2026-09-05 · 대표님과 정한 순서) ═══════════
   레이더가 먼저 의심하고, 그때만 영상을 한 장 봅니다.
   ⚠ 조용할 때는 단추 자체가 안 뜹니다 — 이유 없이 들여다보는 길을
      상시로 열어 두지 않습니다. */
.cv3home-vchk { margin-top: 7px; }
.cv3home-vchk button {
  width: 100%; padding: 8px 10px; border-radius: 10px; min-height: 36px;
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  background: #A3200A; color: #FFFFFF;
}
.cv3home-vchk button[disabled] { opacity: .65; cursor: default; }
.cv3home-vchk button:hover:not([disabled]) { filter: brightness(1.15); }
.cv3home-vchk p {
  margin: 7px 0 0; padding: 8px 10px; border-radius: 10px;
  background: #FFFFFF; color: #282B2B; font-size: 11px; line-height: 1.55;
}
.cv3home-vchk p b { font-weight: 800; }
.cv3home-vchk span {
  display: block; margin-top: 4px; font-size: 11px; font-weight: 700;
  color: rgba(255, 255, 255, .78);
}

/* ══ 분할 화면 · 제어 패널 (2026-09-05 · 대표님 지시) ═══════════════════ */
.cv3home-cg-b { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.cv3home-cg-b button {
  font: inherit; font-size: 11px; font-weight: 800; width: 30px; height: 34px;
  border-radius: 10px; cursor: pointer; flex: 0 0 auto; min-width: 0;
  background: rgba(255, 255, 255, .22); color: #fff;
}
.cv3home-cg-b button.is-on { background: #FFFFFF; color: #282B2B; }
.cv3home-cg { display: grid; gap: 6px; }
.cv3home-cg.is-g4 { grid-template-columns: repeat(2, 1fr); }
.cv3home-cg.is-g9 { grid-template-columns: repeat(3, 1fr); }
.cv3home-cg-t {
  position: relative; display: block; padding: 0; border-radius: 10px; overflow: hidden;
  background: #2A3038; color: #fff; font: inherit; cursor: pointer; text-align: left;
}
.cv3home-cg-v { display: block; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.cv3home-cg-v img, .cv3home-cg-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv3home-cg-none { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); text-align: center; line-height: 1.4; }
.cv3home-cg-t b {
  position: absolute; left: 4px; bottom: 4px; font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
}
.cv3home-cg-t i {
  position: absolute; right: 4px; top: 4px; font-style: normal;
  font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  background: #A3200A; color: #fff;
}
.cv3home-cg-t.is-warn i { background: #B58A00; }
.cv3home-cg-t.is-on { outline: 3px solid #FFD95D; outline-offset: -3px; }
.cv3home-cg-t.is-crit { box-shadow: inset 0 0 0 3px #A3200A; }
.cv3home-cg-more {
  grid-column: 1 / -1; margin: 4px 0 0; font-size: 11px;
  color: rgba(255, 255, 255, .8); line-height: 1.5;
}
/*  제어 패널 — 있는 것만 */
.cv3home-cc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cv3home-cc button {
  flex: 1 1 auto; min-width: 68px; font: inherit; font-size: 11px; font-weight: 800;
  padding: 7px 9px; border-radius: 10px; cursor: pointer; min-height: 34px;
  background: #FFFFFF; color: #282B2B;
}
.cv3home-cc button:hover { background: #F1EFE8; }
.cv3home-cc button[data-home="camcall"] { background: #16457A; color: #fff; flex: 1 1 100%; }
.cv3home-cc button.is-off { background: #F7E3E0; color: #8A2B2B; flex: 0 0 auto; min-width: 0; }
/*  ⚠ 1/4/9 가 셋 다 흰색이었습니다 — `.cv3home-cc button`(0,2,0)이 뒤에 있어
    `.cv3home-cg-b button`(0,2,0)을 문서 순서로 이겼습니다. **또 같은 덫**입니다.
    한 칸 더 좁혀 씁니다. */
.cv3home-cc .cv3home-cg-b button {
  background: rgba(255, 255, 255, .22); color: #FFFFFF; min-width: 0;
}
.cv3home-cc .cv3home-cg-b button.is-on { background: #FFFFFF; color: #282B2B; }
.cv3home-cc .cv3home-cg-b button:hover { background: rgba(255, 255, 255, .34); }
.cv3home-cc .cv3home-cg-b button.is-on:hover { background: #F1EFE8; }

/*  ⚠ 「확인 필요」 칸이 **읽히지 않았습니다**(2026-09-05 실측 · 대표님 지적).
    칸이 반투명 흰색(0.5)인데 슬레이트 판이 비쳐 회청이 되고, 그 위에 제가
    `--p-ink`(진한 잉크)를 얹어 놨습니다. 어두운 글 + 어두운 바탕입니다.
    다른 칸들과 같이 **불투명 흰색**으로 맞춥니다. */
.cv3home-right .cv3home-need {
  background: #FFFFFF; border-color: transparent;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12), 0 6px 16px -12px rgba(20, 24, 28, .40);
}
.cv3home-right .cv3home-need b { color: #282B2B; }
.cv3home-right .cv3home-need span { color: #5B5E56; }
/*  주의·경보는 흰 칸 위에 **왼쪽 표식**으로 — 어둡게 칠하지 않습니다 */
.cv3home-right .cv3home-need.is-warn { background: #FDF6E8; }
.cv3home-right .cv3home-need.is-crit { background: #FDEFEC; }
.cv3home-right .cv3home-need.is-warn b { color: #6B5108; }
.cv3home-right .cv3home-need.is-crit b { color: #8A2B2B; }
/*  요양원 카메라 모듈이 들어앉는 칸 — 자기 마크업을 스스로 채웁니다 */
.cv3home-hxcam { border-radius: 14px; overflow: hidden; background: #2A3038; min-height: 150px; }
.cv3home-hxcam .hxrc-head h4 { font-size: 12px; }
.cv3home-hxcam video, .cv3home-hxcam img { width: 100%; display: block; }

/* ══ 요양원 카메라 모듈을 좁은 패널에 맞춤 (2026-09-05) ═══════════════════
   ⚠ `HxRoomCam` 은 **넓은 대시보드용**으로 만들어졌습니다. 208px 패널에
      그대로 넣으니 「이 병실 카메 라」·「미등 록」처럼 낱말이 끊겼습니다(실측).
   ⚠ 모듈 CSS 를 고치지 않습니다 — 요양원 화면까지 함께 바뀝니다.
      **우리 칸 안에서만** 좁혀 씁니다.
   ⚠ 「카메라 1대 · 레이더 0대」는 `CareViewStore` 가 없어 늘 0 입니다.
      **틀린 수를 보여 주느니 감춥니다**(R0-2). */
.cv3home-hxcam .hxrc-head {
  flex-wrap: wrap; row-gap: 6px; padding: 8px 9px;
}
.cv3home-hxcam .hxrc-head h4 {
  font-size: 11px; line-height: 1.35; word-break: keep-all; margin: 0;
  flex: 1 1 100%;
}
.cv3home-hxcam .hxrc-kind {
  font-size: 11px; padding: 2px 7px; white-space: nowrap; flex: 0 0 auto;
}
.cv3home-hxcam .hxrc-share { display: none; }
.cv3home-hxcam .hxrc-head button { font-size: 11px; padding: 4px 8px; margin-left: auto; }
.cv3home-hxcam .hxrc-stage { min-height: 130px; }
.cv3home-hxcam .hxrc-note, .cv3home-hxcam .hxrc-foot,
.cv3home-hxcam p, .cv3home-hxcam small {
  font-size: 11px; line-height: 1.5; word-break: keep-all;
}
.cv3home-hxcam .hxrc-form input,
.cv3home-hxcam .hxrc-form select { font-size: 11px; min-width: 0; }
.cv3home-hxcam .hxrc-form label { font-size: 11px; }

/* ══ 카드를 «단추» 에서 «판» 으로 (2026-09-05 · 대표님 「화면이 뒤죽박죽」) ══
   ⚠ `<button>` 안에는 `<button>` 을 못 넣습니다. 브라우저가 바깥 단추를 그
      자리에서 강제로 닫아 「맞음/아님」이 카드 밖으로 쏟아졌습니다.
   ⇒ 카드는 `<div>`, 「눌러서 추세 보기」는 **카드 뒤에 깔린 투명 단추 한 장**.
      내용은 그 위에 떠서 안쪽 단추가 정상으로 눌립니다. */
.cv3home-sig { position: relative; }
.cv3home-sig-hit {
  position: absolute; inset: 0; z-index: 0;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; border-radius: inherit;
}
.cv3home-sig.is-tap > *:not(.cv3home-sig-hit) { position: relative; z-index: 1; }
/*  안쪽 단추·입력은 확실히 위로 — 투명 단추에 먹히면 안 됩니다 */
.cv3home-sig button:not(.cv3home-sig-hit),
.cv3home-sig a, .cv3home-sig input, .cv3home-sig label,
.cv3home-sig [data-tip] { position: relative; z-index: 2; }
.cv3home-sig-hit:focus-visible { outline: 3px solid var(--nb-pos); outline-offset: -3px; }

/* ══ 막대 차트를 «보이게» (2026-09-05 · 대표님 「안보입니다」) ═══════════
   ⚠ 앰버(#A27304)를 투명도 34% 로 깔았더니 흰 판에서 **1.54:1** 이었습니다.
      데이터를 그린 것인데 눈에 안 들어옵니다. 투명도로 약하게 만드는 방식을
      버리고 **다 진하게** 칠합니다 — 구분은 색과 위치로.
   실측: 보통 4.21:1 · 최고점(어둡게) 6.6:1 · 한계 넘음 6.55:1. 전부 3:1 이상. */
.cv3home-ch-p rect { fill: var(--c); }
.cv3home-ch-p rect.is-top { fill: color-mix(in srgb, var(--c) 62%, #000); }
.cv3home-ch-p rect.is-hot { fill: #A3200A; }
/*  범례 알약도 같은 색으로 — 범례와 그림이 다르면 범례가 거짓말입니다 */
.cv3home-ch-h em i.k-bar { background: var(--c); opacity: 1; }

/* ══ 이름 만들기 «한 칸» (2026-09-05 · 대표님 「요양원처럼 한칸으로」) ═══
   라벨을 뺐습니다 — 바로 아래 트리 머리줄이 「이름 · 호칭」을 이미 말합니다.
   같은 말을 두 번 적을 이유가 없습니다. */
.cv3home-add.is-one {
  display: flex; align-items: center; gap: 6px;
  padding: 7px; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .12), 0 6px 16px -12px rgba(20, 24, 28, .40);
}
.cv3home-add.is-one .cv3home-in {
  flex: 1 1 auto; min-width: 0; margin: 0;
  padding: 8px 10px; border-radius: 10px; font-size: 12px;
  background: #F4F2EC;
}
.cv3home-add.is-one .cv3home-in:focus { background: #FFFFFF; }
.cv3home-add.is-one .cv3home-btn.is-key {
  flex: 0 0 auto; width: 38px; min-width: 0; height: 36px; padding: 0;
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
  border-radius: 10px; background: #282B2B; color: #FFFFFF;
}
.cv3home-add.is-one .cv3home-btn.is-key:hover { filter: brightness(1.3); }
/*  카메라가 이름 아래로 내려왔으니 위 여백을 줍니다 */
.cv3home-cam { margin-top: 14px; margin-bottom: 0; }
/*  제목 줄이 툴팁 자리임을 손끝으로 알 수 있게 — 커서만 바꿉니다(요란하지 않게) */
.cv3home-sig-h[data-tip] { cursor: help; }

/* ══ 어두운 판 · 카드가 떠오르게 (2026-09-05 · 대표님 지시) ═══════════════
   「어두운 배경 바탕색을 적용하고 각 카드들에 그림자와 앞으로 돌출되는
    효과를 통해 각 카드들이 명확히 분리 되어 있게끔 해주세요.」
   ⚠ 판을 어둡게 하면 **그 위에 직접 놓인 글자가 깨집니다.** 카드 안은 흰
      바탕이라 그대로지만, 구역 제목·안내문·상태점은 판 위에 바로 있습니다.
      찾아서 함께 뒤집습니다 — 안 하면 검은 글이 검은 판에 얹힙니다.
   실측: 판 `#232A33` 위에서 흰 카드 **14.48:1**, 흰 글씨 14.48:1,
        옅은 글씨 `#DDE3E9` 11.20:1. 좌우 패널(`#5F7080`)과도 6.9배 차이라
        판 셋(좌·본문·우)이 서로 구별됩니다. */
.cv3home-bd { background: #232A33; }

/*  ── 카드를 «띄웁니다» — 그림자 세 겹 ─────────────────────────────────
    어두운 판에서는 옅은 그림자가 안 보입니다. 접지(가까운) · 높이(먼) ·
    윤곽(아주 얇은 밝은 테)을 함께 씁니다. 윤곽은 «선» 이 아니라 빛입니다. */
.cv3home-sig,
.cv3home-hero,
.cv3home-pobc {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .30),
    0 10px 24px -8px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .06);
}
.cv3home-sig:hover,
.cv3home-sig.is-tap:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .34),
    0 22px 44px -12px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(255, 255, 255, .12);
}
.cv3home-sig.is-tap:hover { transform: translateY(-5px); }

/*  ── 판 위에 «직접» 놓인 것들을 밝게 ─────────────────────────────────── */
.cv3home-cat-t {
  background: rgba(255, 255, 255, .07);
  color: #E8ECF0;
}
.cv3home-cat-t span { color: #A9B4BF; }
.cv3home-cat-st { color: #A9B4BF; }
.cv3home-cat-st.is-ok { color: #7FD6B0; }
.cv3home-empty { color: #DDE3E9; }
.cv3home-empty b { color: #FFFFFF; }
.cv3home-import { background: rgba(255, 255, 255, .07); color: #DDE3E9; }
.cv3home-imp-t { color: #FFFFFF; }
.cv3home-imp-s { color: #A9B4BF; }
/*  카드 사이 간격을 조금 벌립니다 — 떠 있는 것끼리 붙어 있으면 안 떠 보입니다 */
/*  ⚠ 센서 두 장(`senrow`)도 **여기서 같이** 정합니다. 이 간격은 위에서 세 번
    덮이고 마지막 값이 이깁니다 — 센서줄만 딴 데서 10px 로 두었더니 카드 폭은
    맞는데 가운데 이음매가 3px 어긋났습니다(실측 1210 vs 1212). 한 자리에 둡니다. */
.cv3home-sigs, .cv3home-bd > .cv3home-senrow { gap: 12px; }
.cv3home-cats { gap: 16px; }

/* ══ 바탕에 그라데이션 (2026-09-05 · 대표님 「바탕색에 그라데이션도 적용」) ══
   ⚠ 그라데이션은 **양 끝이 다 안전해야** 합니다. 가운데만 재고 넘어가면
      맨 위나 맨 아래에서 글이 깨집니다. 세 끝값을 다 쟀습니다:
        #2E3742 → 흰 카드 12.06:1 · 옅은 글씨 5.72:1
        #232A33 → 14.48 · 6.87
        #1A1F26 → 16.56 · 7.86
      전부 통과입니다.
   ⚠ 위가 살짝 밝고 아래로 갈수록 가라앉습니다 — 카드가 «떠 있다» 는 느낌은
      빛이 위에서 온다고 눈이 믿을 때 생깁니다. 그림자 방향(아래)과 맞춥니다.
   ⚠ 왼쪽 위의 옅은 빛무리 하나 — 화면 전체가 한 판이 아니라 «공간» 으로
      보이게 합니다. 아주 옅게(4%) 둡니다. 셀 수 있을 만큼 진하면 얼룩입니다. */
.cv3home-bd {
  background-color: #232A33;
  background-image:
    radial-gradient(120% 70% at 12% 0%, rgba(160, 190, 220, .055) 0%, rgba(160, 190, 220, 0) 55%),
    linear-gradient(180deg, #2E3742 0%, #262E38 26%, #232A33 62%, #1E242C 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
}
/*  짙은 테마들은 자기 색을 그대로 씁니다 — 위 규칙이 덮지 않게 */
.cv3home[data-cvtheme="quantum"] .cv3home-bd {
  background-color: #0a0a1a;
  background-image:
    radial-gradient(120% 70% at 12% 0%, rgba(0, 240, 255, .06) 0%, rgba(0, 240, 255, 0) 55%),
    linear-gradient(180deg, #12122a 0%, #0f0f24 60%, #0a0a1a 100%);
}

/* ══ 유리판이 떠 있는 화면 (2026-09-05 · 대표님 첨부) ═══════════════════════
   첨부에서 읽은 것 넷 —
     ① 바탕이 **남색** 이고 위아래로 깊어집니다(중성 회색이 아닙니다)
     ② 카드에 **빛 테**가 둘려 있습니다 — 선이 아니라 가장자리에 앉은 빛
     ③ 카드 모서리가 **넉넉히** 둥급니다
     ④ 카드가 한 층이 아니라 **여러 층**입니다(안쪽 칸이 더 떠 보임)
   ⚠ 색을 바꾸면 그 위 글자를 다시 재야 합니다. 남색 네 끝값 전부 쟀습니다:
       #28395E 11.43:1 · #1D2B49 14.06 · #141E33 16.62 · #0E1626 18.08
       옅은 글씨 #B6C4DA 는 6.48~10.24. 전부 통과. */
.cv3home-bd {
  background-color: #16213A;
  background-image:
    /*  왼쪽 위 빛무리 — 공간감의 근원입니다 */
    radial-gradient(110% 65% at 14% -6%, rgba(120, 170, 235, .10) 0%, rgba(120, 170, 235, 0) 58%),
    /*  오른쪽 아래 아주 옅은 청록 — 첨부의 액센트 자리 */
    radial-gradient(80% 55% at 92% 104%, rgba(60, 200, 200, .06) 0%, rgba(60, 200, 200, 0) 60%),
    linear-gradient(180deg, #28395E 0%, #1D2B49 30%, #16213A 66%, #0E1626 100%);
}

/*  ── 카드 = 떠 있는 유리판 ────────────────────────────────────────────
    빛 테(맨 위 안쪽 흰 선)는 «가장자리에 앉은 빛» 입니다. 테두리가 아닙니다 —
    그래서 위쪽만 밝고 아래로 갈수록 사라집니다. */
.cv3home-sig,
.cv3home-hero,
.cv3home-pobc {
  border-radius: 18px;
  box-shadow:
    0 1px 1px rgba(6, 12, 26, .40),
    0 12px 28px -10px rgba(6, 12, 26, .55),
    0 28px 60px -28px rgba(6, 12, 26, .60),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px rgba(150, 190, 240, .14);
}
.cv3home-sig:hover,
.cv3home-sig.is-tap:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(6, 12, 26, .42),
    0 24px 48px -14px rgba(6, 12, 26, .62),
    0 44px 90px -36px rgba(6, 12, 26, .66),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 0 1px rgba(150, 190, 240, .24),
    0 0 34px -6px rgba(120, 190, 255, .18);
}
.cv3home-sig.is-tap:hover { transform: translateY(-6px); }
.cv3home-sig-h { border-radius: 17px 17px 0 0; }

/*  ④ 안쪽 칸도 한 층 더 — 카드 안에서 다시 떠 보이게 */
.cv3home-duo > div,
.cv3home-gring,
.cv3home-prb-k > div,
.cv3home-air-g > div,
.cv3home-xks-hero > div {
  box-shadow: 0 1px 2px rgba(6, 12, 26, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/*  좌우 패널도 남색 계열로 — 셋이 한 벌로 보이게 */
.cv3home-side,
.cv3home-right {
  background: linear-gradient(180deg, #40506F 0%, #384863 46%, #2F3D56 100%);
}
.cv3home-hd { background: #F7F8FA; }

/*  구역 제목 띠 — 유리 느낌으로 */
.cv3home-cat-t {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  color: #E9EEF6;
}
.cv3home-cat-t span { color: #B6C4DA; }
.cv3home-cat-st { color: #B6C4DA; }
.cv3home-cat-st.is-ok { color: #7FE0C0; }
.cv3home-empty { color: #C7D3E4; }
.cv3home-empty b { color: #FFFFFF; }

/* ══ 민트 바탕 · 문스톤 섹션 띠 (2026-09-05 · 대표님 첨부 2장) ═══════════
   「생체·활동·안전 가로로 긴 섹션 분리 카드는 색상을 첨부로,
     바탕색은 민트, 카드에 유리판에 떠있는 효과를 더 강하게」
   ⚠ 판이 **밝아졌습니다** — 남색 위에서 쓰던 옅은 글자는 전부 죽습니다.
     문스톤 위 #E9EEF6 은 2.27:1. 그래서 판 위 글자를 전부 진한 잉크로 뒤집습니다.
   ⚠ 문스톤 띠와 민트 바탕의 색 차이는 **1.10:1** 뿐입니다. 띠가 «카드»로 보이는 것은
     칠 때문이 아니라 **그림자와 빛 테** 때문입니다 — 그래서 더 세게 넣었습니다. */
.cv3home-bd {
  background-color: #69A481;
  background-image:
    radial-gradient(110% 62% at 14% -6%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(80% 52% at 94% 106%, rgba(20, 70, 55, .14) 0%, rgba(20, 70, 55, 0) 62%),
    linear-gradient(180deg, #75B08D 0%, #69A481 34%, #609A79 70%, #55886A 100%);
}

/*  ── 카드: 유리판을 더 세게 ──────────────────────────────────────────
    그림자를 초록끼 도는 어두운색으로 씁니다. 순검정은 민트 위에서 탁해집니다. */
.cv3home-sig,
.cv3home-hero,
.cv3home-pobc,
/*  ⚠ 2026-09-11 — 센서 두 칸도 **여기에 얹습니다.** 값을 베껴 따로 쓰면
    나중에 유리판 느낌을 고칠 때 이 둘만 옛 모양으로 남습니다.
    (이 규칙은 파일에 **두 곳** 있습니다 — 둘 다에 얹었습니다.) */
.cv3home .cv3sen-card {
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(14, 44, 34, .22),
    0 16px 34px -12px rgba(14, 44, 34, .40),
    0 40px 80px -30px rgba(10, 34, 26, .46),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    0 0 0 1px rgba(255, 255, 255, .30);
}
.cv3home-sig:hover,
.cv3home-sig.is-tap:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(14, 44, 34, .24),
    0 30px 56px -16px rgba(14, 44, 34, .46),
    0 60px 110px -38px rgba(10, 34, 26, .52),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, .65),
    0 0 0 1px rgba(255, 255, 255, .45),
    0 0 44px -8px rgba(255, 255, 255, .35);
}
.cv3home-sig.is-tap:hover { transform: translateY(-8px); }
.cv3home-sig-h { border-radius: 19px 19px 0 0; }

/*  ── 가로로 긴 섹션 분리 카드 = 문스톤 유리판 ─────────────────────── */
.cv3home-cat-t {
  background: linear-gradient(180deg, #86AFBB 0%, #7AA6B3 55%, #6E9BA9 100%);
  color: #0E1A22;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(14, 44, 34, .20),
    0 12px 26px -10px rgba(14, 44, 34, .38),
    0 28px 54px -24px rgba(10, 34, 26, .40),
    inset 0 1px 0 rgba(255, 255, 255, .70),
    0 0 0 1px rgba(255, 255, 255, .28);
}
/*  ⚠ 그림자를 세게 넣으니 **띠 위에 그림자가 얹혀** 띠가 어두워집니다.
    실측 rgb(102,143,152). 원색 기준으로만 재면 통과인 글자가 여기서 3.65 로 떨어졌습니다.
    그래서 «그림자 얹힌 자리» 기준으로 다시 잡았습니다. */
.cv3home-cat-t span { color: #0F1D24; }
.cv3home-cat-st { color: #0F1D24; }
.cv3home-cat-st.is-ok { color: #0A1F17; }

/*  판 위에 직접 놓인 나머지 글자 — 밝은 판이니 진한 잉크로 */
.cv3home-empty { color: #08130E; }
.cv3home-empty b { color: #050C08; }
.cv3home-import { color: #08130E; }

/*  좌우 패널 — 문스톤을 어둡게 해서 띠와 한 집안으로 */
.cv3home-side,
.cv3home-right {
  background: linear-gradient(180deg, #4A7280 0%, #436873 48%, #3B5D68 100%);
}

/* ══ 레이크블루 · 평면 (2026-09-05) ═════════════════════════════════════
   대표님 「그럼 그라데이션과 리퀴드 글래스 효과를 넣지 마세요.」
   → 뺀 것: 바탕 그라데이션·빛무리, `backdrop-filter`, 반투명, 정반사 띠.
   → **남긴 것: 그림자와 돌출 효과.** 「각 카드들이 명확히 분리」는 그대로 유효한
     지시이고, 이번에 빼라고 하신 것에 들어 있지 않습니다.
   ⚠ 그림자 색은 레이크블루 색상(217.5°) 그대로의 어두운 값을 씁니다 —
     검푸른 그림자가 바탕 채도를 갉아먹은 것이 「그냥 블루인데요」의 원인이었습니다. */
.cv3home-bd {
  background-color: #6D8EC5;
  background-image: none;
}

/*  ── 카드 — 불투명 흰 판, 그림자로만 띄웁니다 ─────────────────────── */
.cv3home-sig,
.cv3home-hero,
.cv3home-pobc {
  border-radius: 18px;
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /*  ⚠ 「레이크블루 정확히」 — 그림자가 번지면 그만큼 바탕이 그림자입니다.
      44px 짜리 층을 빼고 **카드에 바싹 붙는 그림자**만 남겼습니다.
      호버할 때만 크게 번지게 해서, 가만히 있을 때 바탕은 순수 `#6D8EC5` 입니다. */
  box-shadow:
    0 1px 1px rgba(41, 64, 102, .22),
    0 3px 6px -3px rgba(41, 64, 102, .30);
}
.cv3home-sig:hover,
.cv3home-sig.is-tap:hover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 3px rgba(41, 64, 102, .24),
    0 14px 26px -10px rgba(41, 64, 102, .38);
}
.cv3home-sig.is-tap:hover { transform: translateY(-7px); }
.cv3home-sig-h { border-radius: 17px 17px 0 0; }

/*  ── 가로로 긴 섹션 분리 카드 — 문스톤 단색 ────────────────────────── */
.cv3home-cat-t {
  background: #7AA6B3;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 14px;
  color: #0E1A22;
  box-shadow:
    0 1px 1px rgba(41, 64, 102, .20),
    0 3px 6px -3px rgba(41, 64, 102, .26);
}
.cv3home-cat-t span { color: #0F1D24; }
.cv3home-cat-st { color: #0F1D24; }
.cv3home-cat-st.is-ok { color: #0A1F17; }

/*  판 위에 직접 놓인 글자 — 바탕이 한 가지 색이니 잉크도 하나면 됩니다
    (`#08111F` 대 `#6D8EC5` = 5.70:1). 유리 조각은 뺐습니다. */
.cv3home-empty,
.cv3home-import {
  color: #08111F;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.cv3home-empty b { color: #050B14; }

/*  ── 좌우 패널 — 대표님 첨부 `#6F7A7E` ─────────────────────────────
    ⚠ 이 색은 **가장 어중간한 밝기**입니다. 흰 글씨 4.41 · 검은 글씨 4.21 —
      어느 쪽으로 가도 AA(4.5)에 못 닿습니다. 최대치인 **순백**을 씁니다.
      AA 를 맞추려면 색을 `#6A7579` 로 한 칸만 어둡게 하면 4.74 입니다(대표님 결정). */
.cv3home-side,
.cv3home-right {
  background: #6F7A7E;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* ══ 카메라 등록 칸이 레일에 안 들어갑니다 (2026-09-05 · 실측) ═══════════
   대표님 「카메라는 연결이 안됩니다」 → 원인을 재서 찾았습니다.
     `.hxrc-panel` 보이는 너비 **105px** / 안쪽 내용 **232px** → 넘침 확인.
     안의 select 가 219px, 「카메라 저장 · 연결」 단추가 107px —
     좌측 레일 밖으로 밀려나 **누를 수가 없었습니다.**
   `room-camera.js` 는 넓은 요양원 대시보드용이라 폭을 가정하지 않은 채 만들어졌습니다.
   원본은 손대지 않고(요양원이 함께 씁니다) **가정용 레일 안에서만** 좁게 맞춥니다. */
.cv3home-hxcam .hxrc,
.cv3home-hxcam .hxrc-panel,
.cv3home-hxcam .hxrc-form { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cv3home-hxcam .hxrc-form { display: flex; flex-direction: column; gap: 8px; }
.cv3home-hxcam .hxrc-form label {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; max-width: 100%; font-size: 11px;
}
.cv3home-hxcam .hxrc-panel select,
.cv3home-hxcam .hxrc-panel input,
.cv3home-hxcam .hxrc-panel button {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  font-size: 12px; padding: 6px 8px;
}
.cv3home-hxcam .hxrc-panel small { font-size: 11px; line-height: 1.35; }
/*  머리줄도 좁은 폭에서 줄바꿈되게 — 「등록/변경」 단추가 밀려나지 않도록 */
.cv3home-hxcam .hxrc-head {
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0;
}
.cv3home-hxcam .hxrc-head h4 { font-size: 12px; margin: 0; }
.cv3home-hxcam .hxrc-head .hxrc-share { font-size: 11px; }
.cv3home-hxcam .hxrc-head [data-rc-toggle] { margin-left: auto; }
/*  그래도 넘치는 것이 있으면 잘리지 말고 스크롤되게 */
.cv3home-hxcam .hxrc-panel { overflow-x: auto; }

/* ══ 색이 «안 먹는» 이유 — 테마 선택자가 더 세다 (2026-09-05 · 실측) ═══════
   대표님이 세 번 말씀하셨는데도 색이 안 바뀌어 보인 까닭을 찾았습니다.
     제 규칙        `.cv3home-side`                       특이도 (0,1,0)
     테마 규칙      `.cv3home[data-cvtheme="neon"] .cv3home-side`  (0,2,1)
   **테마 규칙이 이깁니다.** 그래서 화면이 `neon`·`quantum` 테마에 있으면
   바탕은 `#1C1E1E`/`#0a0a1a`, 좌우 패널은 짙은 회색/남색이 그대로 나옵니다 —
   제가 넣은 레이크블루와 `#6F7A7E` 는 **한 번도 적용된 적이 없습니다.**
   (저장된 테마 값 실측: `cv3home_theme_v1 = neon`)
   → 첨부 색은 **테마와 상관없이** 그대로 나오게 못 박습니다.
     테마의 나머지(카드·글씨·강조색)는 건드리지 않습니다. */
.cv3home .cv3home-bd,
.cv3home[data-cvtheme] .cv3home-bd,
.cv3home[data-cvtheme="neon"] .cv3home-bd,
.cv3home[data-cvtheme="quantum"] .cv3home-bd,
.cv3home[data-cvtheme="library"] .cv3home-bd {
  background-color: #6D8EC5;
  background-image: none;
}
/*  ⚠ 2026-09-05 대표님 「패널 색상이 너무 어둡네요」 —
    첨부 `#6F7A7E` 는 색상 196° · 채도 6% · **밝기 46%** 였습니다. 어둡습니다.
    같은 색상(196°)을 유지하고 **밝기만 46% → 79%** 로 올립니다 → `#C6CFD2`.
    ⚠ 판이 밝아지면 흰 글씨가 죽습니다(1.68:1). 그래서 패널 글씨를 **진한 잉크로 뒤집습니다.**
      실측 — 본문 `#172124` 10.36 · 보조 `#3E4B4F` 5.70 · 흰 속카드 위 16.41.
      (전에 쓰던 `#56646A` 는 3.87 로 탈락시켰습니다.) */
.cv3home .cv3home-side,
.cv3home .cv3home-right,
.cv3home[data-cvtheme] .cv3home-side,
.cv3home[data-cvtheme] .cv3home-right,
.cv3home[data-cvtheme="neon"] .cv3home-side,
.cv3home[data-cvtheme="neon"] .cv3home-right,
.cv3home[data-cvtheme="quantum"] .cv3home-side,
.cv3home[data-cvtheme="quantum"] .cv3home-right,
.cv3home[data-cvtheme="library"] .cv3home-side,
.cv3home[data-cvtheme="library"] .cv3home-right {
  --p-ink: #172124;
  --p-ink2: #3E4B4F;
  --p-line: rgba(23, 33, 36, .20);
  --p-fill: rgba(255, 255, 255, .70);
  color: #172124;
  background: linear-gradient(180deg, #D0D8DA 0%, #C6CFD2 46%, #BCC6C9 100%);
  background-image: linear-gradient(180deg, #D0D8DA 0%, #C6CFD2 46%, #BCC6C9 100%);
  /*  디자인 강화 — 레일도 «떠 있는 판» 으로. 카드와 같은 언어를 씁니다. */
  border-radius: 18px;
  margin: 4px;
  box-shadow:
    0 1px 2px rgba(20, 34, 64, .32),
    0 3px 5px -1px rgba(20, 34, 64, .28),
    0 12px 20px -10px rgba(20, 34, 64, .40),
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 0 rgba(90, 110, 120, .26),
    0 0 0 1px rgba(255, 255, 255, .50);
}
/*  패널 속 흰 칸 — 밝은 판 위에서도 «카드» 로 보이게 또렷하게 */
.cv3home-side .cv3home-nt,
.cv3home-side .cv3home-add,
.cv3home-side .cv3home-btn,
.cv3home-right .cv3home-kpi,
.cv3home-right .cv3home-need,
.cv3home-right .cv3home-wl-i {
  background: #FFFFFF;
  border-color: rgba(23, 33, 36, .10);
  box-shadow: 0 1px 1px rgba(20, 34, 64, .10), 0 3px 6px -3px rgba(20, 34, 64, .18);
}
/*  구역 제목 — 작고 또렷하게, 자간을 벌려 «표제» 로 읽히게 */
.cv3home-side .cv3home-side-t,
.cv3home-right .cv3home-side-t {
  color: #172124; font-weight: 800; font-size: 11px;
  letter-spacing: .06em; text-transform: none;
}

/* ══ 유리판 돌출 — 세게, 다만 «바싹» (2026-09-05) ═════════════════════
   대표님 「유리판 돌출 효과 강하게 해주세요.」
   ⚠ 앞서 실측한 함정: **번짐을 키우면 바탕이 그림자가 됩니다.**
     88px 짜리 그림자가 카드 사이 틈을 다 덮어 레이크블루 채도가 43%→33% 로 빠졌습니다.
   그래서 «넓게»가 아니라 «세게» 갑니다 —
     ① 판 두께: 위 모서리 흰 정반사선 + 아래 모서리 어두운 선 → 유리판의 «옆면»
     ② 접지 그림자: 카드 바로 밑 2px 에 진하게 → 떠 있다는 가장 강한 신호
     ③ 바깥 흰 테: 남색 바탕에서 판을 도려내듯 분리
     ④ 호버: 8px 들어올리고 그때만 크게 번짐 */
.cv3home-sig,
.cv3home-hero,
.cv3home-pobc,
/*  ⚠ 2026-09-11 — 센서 두 칸도 **여기에 얹습니다.** 값을 베껴 따로 쓰면
    나중에 유리판 느낌을 고칠 때 이 둘만 옛 모양으로 남습니다.
    (이 규칙은 파일에 **두 곳** 있습니다 — 둘 다에 얹었습니다.) */
.cv3home .cv3sen-card {
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(20, 34, 64, .40),
    0 3px 5px -1px rgba(20, 34, 64, .34),
    0 10px 16px -8px rgba(20, 34, 64, .46),
    0 18px 26px -16px rgba(14, 26, 52, .50),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 140, 180, .28),
    inset 0 -14px 18px -16px rgba(40, 62, 110, .22),
    0 0 0 1px rgba(255, 255, 255, .55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.cv3home-sig:hover,
.cv3home-sig.is-tap:hover {
  transform: translateY(-8px);
  box-shadow:
    0 2px 3px rgba(20, 34, 64, .42),
    0 6px 10px -2px rgba(20, 34, 64, .38),
    0 20px 30px -10px rgba(20, 34, 64, .50),
    0 36px 52px -24px rgba(14, 26, 52, .54),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 140, 180, .30),
    0 0 0 1px rgba(255, 255, 255, .80),
    0 0 30px -6px rgba(255, 255, 255, .45);
}
.cv3home-sig.is-tap:hover { transform: translateY(-10px); }
.cv3home-sig-h { border-radius: 19px 19px 0 0; }

/*  가로로 긴 섹션 분리 카드도 같은 두께로 */
.cv3home-cat-t {
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 34, 64, .36),
    0 3px 5px -1px rgba(20, 34, 64, .30),
    0 9px 14px -8px rgba(20, 34, 64, .42),
    inset 0 2px 0 rgba(255, 255, 255, .65),
    inset 0 -2px 0 rgba(30, 60, 75, .30),
    0 0 0 1px rgba(255, 255, 255, .40);
}

/*  ── 판이 «떠 보이려면» 판 사이에 바닥이 보여야 합니다 ────────────────
    실측: 카드 사이 틈이 **8px** 뿐이라 그림자가 양쪽에서 만나 틈을 다 덮었습니다.
    그래서 그림자를 세게 할수록 레이크블루가 사라졌습니다(정확히 일치 27%→2%).
    틈을 벌립니다 — 그림자는 그대로 세게 두고 **바닥이 보이게** 합니다. */
.cv3home-grid { gap: 16px; }
.cv3home-cat-t { margin: 16px 0 12px; }
.cv3home-bd { padding: 12px 16px 18px; }
.cv3home-top { gap: 16px; }

/*  ⚠ 틈을 벌리니 위쪽 AI 종합평가 칸이 좁아져 **한글이 낱말 가운데서 끊겼습니다**
    — 「케어 미디 / 어」 「AI 분석 보고 받 / 기」 「깨어 있 / 음」.
    한글은 낱말 단위로 끊어야 합니다(`keep-all`). 틈도 위쪽만 조금 좁힙니다. */
.cv3home-top { gap: 12px; }
.cv3home-hero,
.cv3home-hero *,
.cv3home-air,
.cv3home-air *,
.cv3home-pobc,
.cv3home-pobc * { word-break: keep-all; }

/*  섹션 띠도 테마에 안 먹히게 못 박습니다 — 좌우 패널과 같은 함정입니다
    (`.cv3home[data-cvtheme="neon"] .cv3home-cat-t` 특이도 0,2,1 > 제 0,1,0). */
.cv3home .cv3home-cat-t,
.cv3home[data-cvtheme] .cv3home-cat-t,
.cv3home[data-cvtheme="neon"] .cv3home-cat-t,
.cv3home[data-cvtheme="quantum"] .cv3home-cat-t,
.cv3home[data-cvtheme="library"] .cv3home-cat-t {
  background: #7AA6B3;
  color: #0E1A22;
}

/*  ── 「측정이 멈춰 있습니다」 띠 (2026-09-05) ───────────────────────────
    ⚠ 멈춘 화면은 «옛 값» 을 «지금» 처럼 보여 줍니다. 재실 표시가 특히 위험합니다.
      그래서 눈에 띄게, 그러나 값을 가리지 않게 맨 위 한 줄로 둡니다.
    실측 대비 — 본문 #5C1404 11.45 · 부제 #3A2C24 11.39 (판 #FDE8E3 위) */
.cv3home-measbar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 12px; padding: 10px 14px;
  background: #FDE8E3;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 34, 64, .32),
    0 3px 5px -1px rgba(20, 34, 64, .28),
    0 12px 20px -10px rgba(20, 34, 64, .40),
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 0 rgba(160, 90, 70, .22),
    0 0 0 1px rgba(255, 255, 255, .50);
  word-break: keep-all;
}
.cv3home-measbar b { color: #5C1404; font-size: 13px; font-weight: 800; }
.cv3home-measbar span { color: #3A2C24; font-size: 12px; line-height: 1.5; flex: 1 1 320px; min-width: 0; }
.cv3home-measbar span b { font-size: 12px; }
.cv3home-measbar em { color: #7A1B06; font-size: 11px; font-weight: 700; font-style: normal; }

/* ══ 자리 · 지도 (GIS) — 2026-09-05 ═══════════════════════════════════════
   ⚠ 배경 지도(타일)를 쓰지 않습니다. 바깥에서 타일을 받아 오면 **누가 어디서
     감시받는지**가 그 회사로 나갑니다. 좌표만 찍습니다. */
.cv3home-map {
  position: relative;
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(20, 34, 64, .40),
    0 3px 5px -1px rgba(20, 34, 64, .34),
    0 10px 16px -8px rgba(20, 34, 64, .46),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(255, 255, 255, .55);
  word-break: keep-all;
}
/*  판 — 격자만 옅게. 지도가 아니라 «자리 판» 이라는 걸 숨기지 않습니다. */
.cv3home-map-c {
  position: relative;
  height: 260px;
  border-radius: 14px;
  background-color: #EEF2F7;
  background-image:
    linear-gradient(rgba(109, 142, 197, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 142, 197, .16) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  overflow: hidden;
}
.cv3home-pin {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px; cursor: pointer;
}
.cv3home-pin i {
  width: 14px; height: 14px; border-radius: 50%;
  background: #6D8EC5; box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(20, 34, 64, .45);
}
.cv3home-pin em {
  font-style: normal; font-size: 11px; font-weight: 800; color: #14202E;
  background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 1px 5px;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(20, 34, 64, .25);
}
/*  상태 색 — 감시 목록과 **같은 뜻, 같은 색**을 씁니다. 두 곳이 다르면 헷갈립니다. */
.cv3home-pin.is-crit i { background: #A3200A; }
.cv3home-pin.is-warn i { background: #C97C5D; }
.cv3home-pin.is-idle i { background: #8A93A0; }
.cv3home-pin.is-ok   i { background: #1F6F63; }
.cv3home-pin.is-on i { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(109, 142, 197, .55), 0 2px 6px rgba(20, 34, 64, .5); }
.cv3home-pin:hover { z-index: 3; }
.cv3home-pin:hover em { background: #fff; }

.cv3home-map.is-empty { text-align: left; }
.cv3home-map.is-empty > p:first-child { margin: 0 0 6px; font-size: 13px; }
.cv3home-map-s { margin: 8px 0 10px; font-size: 12px; line-height: 1.6; color: #3E4B58; }
.cv3home-map .cv3home-btn { width: auto; }

/*  자리 넣는 칸 */
.cv3home-place {
  margin: 0 0 12px; padding: 12px; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,34,64,.40), 0 3px 5px -1px rgba(20,34,64,.34),
              0 10px 16px -8px rgba(20,34,64,.46), inset 0 2px 0 rgba(255,255,255,1),
              0 0 0 1px rgba(255,255,255,.55);
}
.cv3home-place-t { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #14202E; }
.cv3home-place-t span { font-weight: 600; font-size: 11px; color: #5A6675; margin-left: 6px; }
.cv3home-place-r {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px; margin-bottom: 6px; border-radius: 14px; background: #F4F6FA;
}
.cv3home-place-r > b { flex: 0 0 84px; font-size: 12px; }
.cv3home-place-r input {
  flex: 1 1 120px; min-width: 0; min-height: 34px; padding: 0 9px;
  font-size: 12px; border-radius: 10px; border: 1px solid rgba(20,34,64,.16); background: #fff;
}
.cv3home-place-r input[data-pl="lat"], .cv3home-place-r input[data-pl="lng"] { flex: 0 1 110px; }
.cv3home-place-s { margin: 6px 0 10px; font-size: 11px; line-height: 1.6; color: #3E4B58; }
.cv3home-map-c.has-bg { background-color: #E8EEF6; }
.cv3home-map-c.has-bg { background-image: none; }   /* 격자는 끕니다 — 그림이 배경입니다 */
.cv3home-place-r input[type="file"] { flex: 1 1 200px; font-size: 12px; padding: 6px 0; border: 0; background: none; }
.cv3home-place-r input[data-mb] { flex: 0 1 96px; }

/* ══ 센서 감시 · 문자 알림 (2026-09-05) ═══════════════════════════════════ */
.cv3home-smon {
  margin: 0 0 12px; padding: 12px; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,34,64,.40), 0 3px 5px -1px rgba(20,34,64,.34),
              0 10px 16px -8px rgba(20,34,64,.46), inset 0 2px 0 rgba(255,255,255,1),
              0 0 0 1px rgba(255,255,255,.55);
  word-break: keep-all;
}
.cv3home-smon-rows { display: flex; flex-direction: column; gap: 6px; }
.cv3home-smon-r {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 11px; border-radius: 14px; background: #F4F6FA;
}
.cv3home-smon-r.is-on { background: #EDF6F2; }
.cv3home-smon-d {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #A9B2BE; align-self: center;
}
.cv3home-smon-r.is-on .cv3home-smon-d { background: #1F6F63; }
.cv3home-smon-r > b { font-size: 12px; flex: 1 1 180px; min-width: 0; }
.cv3home-smon-v { font-size: 11px; color: #5A6675; }
.cv3home-smon-t { font-size: 11px; color: #5A6675; }
.cv3home-smon-s {
  font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: rgba(20,34,64,.08); color: #3E4B58;
}
.cv3home-smon-r.is-on .cv3home-smon-s { background: rgba(31,111,99,.14); color: #14544A; }
.cv3home-smon-w { flex: 1 1 100%; font-size: 11px; line-height: 1.55; color: #4A5563; }
.cv3home-smon .cv3home-btn { width: auto; margin-right: 6px; }
.cv3home-sms-on { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.cv3home-sms-m { font-size: 11px; color: #5A6675; }
.cv3home-place-s.is-warn { color: #7A2E10; }

/* ══ 관제 벽 — 여러 집 한 화면 (2026-09-05) ═══════════════════════════════
   ⚠ 레일(208px)에서 본문으로 옮겼습니다. 그 폭에서는 아홉 칸이 손톱만 해집니다. */
.cv3home-wall {
  margin: 0 0 12px; padding: 12px; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,34,64,.40), 0 3px 5px -1px rgba(20,34,64,.34),
              0 10px 16px -8px rgba(20,34,64,.46), inset 0 2px 0 rgba(255,255,255,1),
              0 0 0 1px rgba(255,255,255,.55);
  word-break: keep-all;
}
.cv3home-wall-b { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.cv3home-wall-g { display: grid; gap: 8px; }
.cv3home-wall-g.is-g4 { grid-template-columns: repeat(2, 1fr); }
.cv3home-wall-g.is-g9 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cv3home-wall-g.is-g9 { grid-template-columns: repeat(2, 1fr); } }
.cv3home-wall-g .cv3home-cg-t {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: #10161F; text-align: left;
}
.cv3home-wall-g .cv3home-cg-v {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 9; background: #10161F;
}
.cv3home-wall-g .cv3home-cg-v img,
.cv3home-wall-g .cv3home-cg-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv3home-wall-g .cv3home-cg-none {
  font-size: 12px; line-height: 1.5; color: #93A2B4; text-align: center; padding: 8px;
}
.cv3home-wall-g .cv3home-cg-t > b {
  position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 800;
  color: #fff; background: rgba(10,16,26,.62); border-radius: 10px; padding: 2px 8px;
}
.cv3home-wall-g .cv3home-cg-t > i {
  position: absolute; right: 8px; top: 8px; font-style: normal;
  font-size: 11px; font-weight: 800; color: #fff; border-radius: 999px; padding: 2px 8px;
  background: #A3200A;
}
.cv3home-wall-g .cv3home-cg-t.is-warn > i { background: #C97C5D; }
.cv3home-wall-g .cv3home-cg-t.is-crit { box-shadow: 0 0 0 3px #A3200A; }
.cv3home-wall-g .cv3home-cg-t.is-warn { box-shadow: 0 0 0 2px #C97C5D; }
.cv3home-wall-g .cv3home-cg-t.is-on   { box-shadow: 0 0 0 3px #6D8EC5; }

/* ── CSMP 단추와 머리줄 (2026-09-05) ─────────────────────────────────── */
.cv3home-btn.cv3home-csmp { font-weight: 800; letter-spacing: .02em; }
.cv3home-csmp-h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 0 0 12px; padding: 12px 14px; border-radius: 14px;
  background: #7AA6B3; color: #0E1A22;
  box-shadow: 0 1px 1px rgba(41,64,102,.20), 0 3px 6px -3px rgba(41,64,102,.26),
              inset 0 2px 0 rgba(255,255,255,.65);
  word-break: keep-all;
}
.cv3home-csmp-h > b { font-size: 15px; font-weight: 800; }
.cv3home-csmp-h > span { flex: 1 1 240px; font-size: 12px; color: #0F1D24; }
.cv3home-csmp-h .cv3home-btn { width: auto; }
.cv3home-csmp-h.is-gis { background: #8FA8D3; color: #0B1526; }
.cv3home-csmp-h.is-gis > span { color: #101C33; }

/* ══ 가정용 경보 — 그 집 영상 (2026-09-05) ═══════════════════════════════
   ⚠ 오늘 요양원 팝업이 모니터에 안 들어가 잘렸습니다. 같은 실수를 하지 않게
     **처음부터 화면 높이에 매어** 둡니다. */
.cv3home-emg {
  position: sticky; top: 0; z-index: 40;
  margin: 0 0 12px;
  border-radius: 18px; overflow: hidden;
  background: #FDEFEC;
  box-shadow: 0 1px 2px rgba(20,34,64,.30), 0 10px 24px -10px rgba(20,34,64,.45),
              inset 0 2px 0 rgba(255,255,255,1), 0 0 0 2px #A3200A;
  word-break: keep-all;
}
.cv3home-emg-b { padding: 14px 16px 12px; }
.cv3home-emg-t { margin: 0; font-size: 20px; font-weight: 800; color: #7A1206; letter-spacing: -.3px; }
.cv3home-emg-w { margin: 4px 0 0; font-size: 15px; font-weight: 800; color: #14202E; }
.cv3home-emg-s { margin: 2px 0 0; font-size: 12px; color: #5A4038; }
.cv3home-emg-v {
  position: relative; margin-top: 10px; border-radius: 14px; overflow: hidden;
  background: #10161F; aspect-ratio: 16/9;
  max-height: min(34vh, 360px);
  display: flex; align-items: center; justify-content: center;
}
.cv3home-emg-v img, .cv3home-emg-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv3home-emg-v .cv3home-cam-off { color: #9AA7B6; font-size: 12px; text-align: center; line-height: 1.6; }
.cv3home-emg-a { display: flex; gap: 8px; margin-top: 10px; }
.cv3home-emg-a .cv3home-btn { width: auto; flex: 1 1 auto; }
@media (max-height: 800px) { .cv3home-emg-v { max-height: 26vh; } }

/* ── 설정 화면 (2026-09-05) ────────────────────────────────────────────── */
.cv3home-csmp-h.is-set { background: #C6CFD2; color: #14202E; }
.cv3home-csmp-h.is-set > span { color: #2C3A44; }
.cv3home-wform.is-wide {
  display: grid; gap: 8px 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cv3home-wform.is-wide label { display: block; }
.cv3home-wform.is-wide label > span {
  display: block; font-size: 12px; font-weight: 700; color: #3E4B58; margin-bottom: 3px;
}
.cv3home-wform.is-wide input {
  width: 100%; min-height: 36px; padding: 0 10px; font-size: 13px;
  border-radius: 10px; border: 1px solid rgba(20,34,64,.16); background: #fff;
}
.cv3home-wform.is-wide .cv3home-place-s,
.cv3home-wform.is-wide .cv3home-wact { grid-column: 1 / -1; }
.cv3home-wform.is-wide .cv3home-wact { display: flex; gap: 8px; }
.cv3home-wform.is-wide .cv3home-wact .cv3home-btn { width: auto; }
.cv3home-set-r {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 9px 10px; margin-bottom: 6px; border-radius: 14px; background: #F4F6FA;
}
.cv3home-set-r .cv3home-btn { width: auto; flex: 0 0 auto; }
.cv3home-set-r > span { font-size: 12px; color: #4A5563; flex: 1 1 200px; }

/* ── 영상 위에 겹쳐 보기 (2026-09-05) ─────────────────────────────────── */
.cv3home-vo { margin: 8px 0 6px; }
.cv3home-vo-t { margin: 0 0 5px; font-size: 11px; font-weight: 800; color: var(--p-ink, #172124); }
.cv3home-vo-b { display: flex; flex-wrap: wrap; gap: 6px; }
.cv3home-vo-b button {
  flex: 1 1 auto; min-height: 30px; padding: 0 8px; cursor: pointer;
  font-size: 11px; font-weight: 700; border-radius: 10px;
  background: #fff; border: 1px solid rgba(23,33,36,.16); color: #172124;
}
.cv3home-vo-b button.is-on { background: #1F6F63; border-color: #1F6F63; color: #fff; }
.cv3home-vo-b button[disabled] { opacity: .45; cursor: not-allowed; }
.cv3home-vo-w {
  margin: 0 0 5px; padding: 6px 8px; border-radius: 10px;
  font-size: 11px; line-height: 1.5; color: #7A2E10; background: #FDF0E8;
}
.cv3home-vo-s { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: var(--p-ink2, #3E4B4F); }

/* ══ 카메라 창 — 영상을 보면서 설정 (2026-09-05) ══════════════════════════
   ⚠ 대표님: 「창을 아래로 내리고 볼 수가 없는 환경입니다」 — 스크롤 없이 한 화면에.
   ⚠ 높이를 화면에 매어 둡니다. 오늘 요양원 팝업이 모니터에 안 들어가 잘렸습니다. */
.cv3home-dock {
  position: sticky; top: 0; z-index: 45;
  margin: 0 0 12px; border-radius: 18px; overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,34,64,.34), 0 12px 28px -10px rgba(20,34,64,.46),
              inset 0 2px 0 rgba(255,255,255,1), 0 0 0 1px rgba(255,255,255,.55);
  word-break: keep-all;
}
.cv3home-dock-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 14px; background: #7AA6B3; color: #0E1A22;
}
.cv3home-dock-h > b { font-size: 13px; font-weight: 800; }
.cv3home-dock-h > span { flex: 1 1 auto; font-size: 12px; color: #0F1D24; }
.cv3home-dock-h .cv3home-btn { width: auto; }
.cv3home-dock-b { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; }
@media (min-width: 720px) { .cv3home-dock-b { grid-template-columns: 1.6fr 1fr; } }
.cv3home-dock-v {
  border-radius: 14px; overflow: hidden; background: #10161F;
  min-height: 200px; max-height: min(46vh, 460px);
}
.cv3home-dock-v .cv3home-hxcam { height: 100%; }
.cv3home-dock-s { max-height: min(46vh, 460px); overflow-y: auto; }
.cv3home-dock-t {
  margin: 0 0 5px; font-size: 11px; font-weight: 800; color: #172124;
}
.cv3home-dock-t + * { margin-bottom: 10px; }
.cv3home-dock-who { display: flex; flex-wrap: wrap; gap: 6px; }
.cv3home-dock-who button {
  min-height: 30px; padding: 0 10px; font-size: 12px; font-weight: 700;
  border-radius: 10px; cursor: pointer;
  background: #fff; border: 1px solid rgba(23,33,36,.16); color: #172124;
}
.cv3home-dock-who button.is-on { background: #6D8EC5; border-color: #6D8EC5; color: #fff; }
.cv3home-dock-x { font-size: 12px; color: #5A6675; }
/*  ⚠ 창 전체도 화면에 매어 둡니다. 좁은 판에서 한 줄로 쌓이면 511px 까지 커져
    302px 이 잘렸습니다(실측). 안쪽에서 굴러가게 합니다. */
.cv3home-dock { max-height: 90vh; display: flex; flex-direction: column; }
.cv3home-dock-b { overflow-y: auto; min-height: 0; }
@media (max-height: 700px) {
  .cv3home-dock-v { min-height: 140px; max-height: 34vh; }
  .cv3home-dock-s { max-height: none; }
}
/*  빌려 온 요양원 카메라 패널이 창 안에서 자리를 채우게 */
#cv3HomeCamSlot { background: #0A0D12; }
#cv3HomeCamSlot > #cv3Cam { height: 100%; margin: 0; overflow-y: auto; }
/* ── 패널에는 «여는 단추» 만 (2026-09-05) ─────────────────────────────── */
.cv3home-camopen { padding: 8px 0 4px; }
.cv3home-camopen-s { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--p-ink, #172124); }
.cv3home-camopen .cv3home-btn { width: 100%; }
.cv3home-camopen-n { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--p-ink2, #3E4B4F); }
/*  창이 화면을 넘지 않게 — 좁은 판에서 208px 이 잘렸습니다(실측) */
.cv3home-dock { max-height: 88vh; }
.cv3home-dock-b { max-height: calc(88vh - 46px); }
#cv3HomeCamSlot { max-height: min(46vh, 420px); }
@media (max-height: 700px) {
  .cv3home-dock { max-height: 92vh; }
  #cv3HomeCamSlot { max-height: 40vh; }
}

/*  ⚠ 창을 **화면에 고정**합니다 (2026-09-05).
    `sticky` 로 두었더니 본문 스크롤 위치에 따라 아래가 잘렸습니다
    (실측: 425px 창인데 217px 이 화면 밖). 설정 창은 «어디를 보고 있든 다 보여야»
    하는 것이라 스크롤과 무관해야 합니다. */
.cv3home-dock {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1100px, 94vw); max-height: 92vh; margin: 0; z-index: 60;
  box-shadow: 0 2px 6px rgba(20,34,64,.30), 0 30px 70px -20px rgba(20,34,64,.55),
              inset 0 2px 0 rgba(255,255,255,1), 0 0 0 1px rgba(255,255,255,.55);
}
.cv3home-dock-b { max-height: calc(92vh - 48px); }
/*  뒤를 살짝 가려 «지금 이 창을 보고 있다» 가 분명하게 — 대시보드는 비칩니다. */
.cv3home-dock::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: rgba(14, 26, 52, .28);
}
@media (max-height: 640px) {
  #cv3HomeCamSlot { max-height: 34vh; }
  .cv3home-dock-s { max-height: 34vh; }
}

/* ══ 경보 띠는 «열리는 순간 보여야» 합니다 (2026-09-05 실측) ══════════════
   ⚠ 실측: 창 높이 463px 에서 경보 상자가 top 323px 에 놓여 **아래 160px 이
     화면 밖**이었습니다. 스크롤을 내려야 보이는 경보는 경보가 아닙니다.
     (`position:sticky` 는 «그 자리까지 스크롤이 왔을 때» 붙습니다 —
      경보가 화면 밖에서 열리면 붙을 기회조차 없습니다.)
   → 짧은 화면에서는 상자 자체를 화면 높이에 매고, 넘치면 **상자 안에서**
     스크롤되게 합니다. 여는 쪽에서는 스크롤을 그 자리로 올려 줍니다.
   ⚠ 이 규칙은 파일 **맨 뒤**에 둡니다 — 같은 선택자끼리는 뒤가 이깁니다.
     앞에 넣었다가 원래 규칙에 덮인 사고를 이 파일에서 이미 세 번 겪었습니다. */
.cv3home-emg-b { max-height: calc(100vh - 24px); overflow-y: auto; }
@media (max-height: 620px) {
  .cv3home-emg-v { max-height: 22vh; }
  .cv3home-emg-t { font-size: 15px; }
}

/* ══ 아이콘 단추 — 요양원처럼 심플하게 (2026-09-05 대표님 지시) ═════════════
   「+ 하위」「이름」「지움」「떼기」가 **글자 단추**라 칸을 넓게 먹고
   센서 이름보다 눈에 먼저 들어왔습니다. 요양원은 아이콘 한 개입니다.
   ⚠ 뜻은 `title`·`aria-label` 에 그대로 남겼습니다 — 아이콘만으로는 모르는 분이
     계시고, 화면 낭독기는 그림을 못 읽습니다.
   ⚠ 이 규칙은 파일 **맨 뒤**에 둡니다 — 같은 선택자는 뒤가 이깁니다.
     앞에 넣었다가 원래 규칙에 덮인 사고를 이 파일에서 이미 세 번 겪었습니다. */
.cv3home-ib {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; cursor: pointer;
  background: #EDEBE4; color: #3B4650;
  transition: background .12s ease, color .12s ease;
}
.cv3home-ib .cv3home-ic { width: 15px; height: 15px; }
.cv3home-ib:hover { background: #DFDCD2; }
.cv3home-nt-x .cv3home-ib[data-home="nadd"] { background: #E4EEF6; color: #16457A; }
.cv3home-nt-x .cv3home-ib[data-home="nadd"]:hover { background: #D3E4F1; }
.cv3home-nt-x .cv3home-ib.is-x { background: #F7E3E0; color: #8A2B2B; }
.cv3home-nt-x .cv3home-ib.is-x:hover { background: #F0CFC9; }
/* 세로로 쌓여 있던 것을 가로 한 줄로 — 아이콘이라 자리를 안 먹습니다 */
.cv3home-nt-x { flex-direction: row; gap: 6px; align-items: center; }
.cv3home-nt-off.cv3home-ib { background: #F7E3E0; color: #8A2B2B; }
.cv3home-nt-off.cv3home-ib:hover { background: #F0CFC9; }

/* 「값 없음」 → 「—」 한 글자 (요양원과 같은 표시) */
.cv3home-badge.is-none {
  background: transparent; color: #8B93A1; font-weight: 700; letter-spacing: .06em;
  padding: 0 4px; min-width: 18px; text-align: center;
}
.cv3home-nt-s.is-none > span { color: #8B93A1; letter-spacing: .06em; }
/* ⚠ 아이콘이 flex 안에서 **가로로 눌렸습니다**(실측 12×15, 15×15 여야 함).
     flex 자식은 기본이 `shrink:1` 이라 좁으면 줄어듭니다. 못 줄이게 못박습니다. */
.cv3home-ib .cv3home-ic { flex: 0 0 auto; width: 15px; height: 15px; }

/* ══ 보호자 여러 명 (2026-09-05) ═══════════════════════════════════════ */
.cv3home-ctg { border-top: 1px solid #DCD8CE; padding-top: 8px; margin-top: 8px; }
.cv3home-ctg-t { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.cv3home-ctg-t b { font-size: 13px; color: #14202E; }
.cv3home-ctg-t span { font-size: 12px; color: #6B7481; }
.cv3home-ct { flex-wrap: wrap; }
.cv3home-ct input[type="text"] { min-width: 92px; }

/* ══ 가정용 줄을 상단 표시줄 안으로 (2026-09-05 대표님 지시) ════════════════
   전에는 「가정용 / 이름·생체·안전」 + 단추 6개가 **자기 줄**을 차지했습니다.
   3DX 본체에 이미 표시줄이 있어 줄이 둘이었습니다 — 그만큼 화면을 잃었습니다. */
.cv3home-hdin { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cv3home-hdt { font-size: 12px; font-weight: 800; letter-spacing: -.2px; opacity: .85; margin-right: 2px; }
.cv3home-hdin .cv3home-btn { height: 26px; padding: 0 9px; font-size: 12px; }
.cv3home-hdin .cv3home-btn .cv3home-ic { width: 13px; height: 13px; }
/* 옛 헤더 줄은 이제 안 그려집니다 — 남아 있던 규칙이 자리를 먹지 않게 */
.cv3home > .cv3home-hd { display: none; }

/* ══ 감시 현황 (2026-09-05) ═══════════════════════════════════════════════ */
.cv3home-cov { border-radius: 14px; padding: 9px 11px; margin: 0 0 8px;
  background: #EFEDE6; border: 1px solid #DEDACF; }
.cv3home-cov.is-gap { background: #FCEFEA; border-color: #E8C4B8; }
.cv3home-cov-t { margin: 0; font-size: 12px; color: #2C3742;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cv3home-cov-t b { font-size: 13px; color: #14202E; }
.cv3home-cov-t span { margin-left: auto; font-size: 11px; color: #6B7481; }
.cv3home-cov-w { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: #8A2B2B; }
.cv3home-cov-w b { color: #6E1E1E; }
.cv3home-cov-s { margin: 5px 0 0; font-size: 12px; color: #4A6B55; }

/* ══ 분할 보기 팝업 (2026-09-07 대표님 지시) ═══════════════════════════════
   전에는 본문 흐름 안에 그려서, 4칸을 누르면 화면이 생체 카드 사이로
   떨어졌습니다. 흐름에서 빼고 화면 위에 띄웁니다.
   ⚠ 요양원 경보 팝업이 모니터에 안 들어가 잘렸던 일이 있습니다(2026-09-05).
     같은 실수를 하지 않게 **처음부터 화면 높이에 매어** 둡니다. */
.cv3home-wallpop {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(18, 28, 42, .42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cv3home-wallpop-b {
  width: min(1180px, 96vw); max-height: 92vh; overflow-y: auto;
  background: #F3F1EA; border-radius: 18px; padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(20,34,64,.30), 0 24px 60px -18px rgba(20,34,64,.55),
              inset 0 2px 0 rgba(255,255,255,1);
}
.cv3home-wallpop-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cv3home-wallpop-h b { font-size: 15px; color: #14202E; }
.cv3home-wallpop-h span { font-size: 12px; color: #6B7481; }
.cv3home-wallpop-h .cv3home-btn { margin-left: auto; width: auto; }
/* 팝업 안에서는 제목 줄이 한 번 더 나올 필요가 없습니다 */
.cv3home-wallpop .cv3home-cat-t { display: none; }

/* ══ 시뮬레이션 (2026-09-07) — 「진짜가 아니다」를 늘 보이게 ═══════════════ */
.cv3home-sim-w { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: #8A5A1B;
  background: #FBF1DE; border: 1px solid #EBD7AE; border-radius: 10px; padding: 8px 10px; }
.cv3home-simbar {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 14px;
  background: #FBEFD6; border: 2px solid #D9A441; color: #6E4A0E; font-size: 12px;
}
.cv3home-simbar b { color: #573A05; }
.cv3home-simbar .cv3home-btn { margin-left: auto; width: auto; }
/* 시뮬 중에는 카드에도 표가 나야 합니다 — 시연을 실측으로 오해하면 안 됩니다 */
:root[data-homesim="1"] .cv3home-card { box-shadow: inset 0 0 0 2px #D9A441, 0 1px 2px rgba(20,34,64,.18); }
/* 이름이 없을 때 — 시뮬레이션 권유 (2026-09-07 「어디서 켜나요?」) */
.cv3home-simcta { margin-top: 10px; padding: 11px 13px; border-radius: 14px;
  background: #FBF1DE; border: 1px solid #EBD7AE; }
.cv3home-simcta-t { margin: 0; font-size: 13px; font-weight: 800; color: #6E4A0E; }
.cv3home-simcta-s { margin: 4px 0 8px; font-size: 12px; line-height: 1.6; color: #7A5A22; }

/* ══ 상단 알림 스트립 — 케어뷰 2.0 알림 카드를 본뜸 (2026-09-07) ═══════════
   대표님: 「상단에 개별 카드 알림 표시가 없네요」 · 「2.0 참고 하세요」
   2.0 은 카드 안에 호흡·심박·움직임·POBC·수면을 작은 막대로 함께 보여 주고
   경보가 난 항목을 강조합니다. 숫자 두 개보다 «어디가 튀었는지» 가 빨리 보입니다. */
.cv3home-strip {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 8px; margin: 0 0 10px; scroll-snap-type: x proximity;
}
.cv3home-strip.is-empty { color: #6B7481; font-size: 12px; padding: 8px 4px 12px; }
.cv3home-sc {
  flex: 0 0 auto; width: 208px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  padding: 9px 10px 8px; border-radius: 14px; cursor: pointer; text-align: left;
  background: #EFEDE6; border: 1px solid #DEDACF; color: #2C3742;
  box-shadow: 0 1px 2px rgba(20,34,64,.12);
}
.cv3home-sc:hover { background: #E7E4DA; }
.cv3home-sc.is-crit { background: #FBE9E4; border-color: #E0A08F; }
.cv3home-sc.is-warn { background: #FBF1DE; border-color: #E5C98F; }
.cv3home-sc-1 { display: flex; align-items: baseline; gap: 6px; }
.cv3home-sc-1 b { font-size: 13px; font-weight: 800; color: #14202E;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-sc-1 em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; background: #DCD8CE; color: #3B4650; }
.cv3home-sc.is-crit .cv3home-sc-1 em { background: #C0392B; color: #fff; }
.cv3home-sc.is-warn .cv3home-sc-1 em { background: #D9A441; color: #3A2A05; }
.cv3home-sc-w { font-size: 11px; line-height: 1.4; color: #5A6470;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 막대 — 서로 다른 단위를 0~100 으로 맞춘 «상대 수준» 입니다 */
.cv3home-sc-bars { display: flex; gap: 6px; align-items: flex-end; height: 46px; }
.cv3home-sb { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; position: relative; }
.cv3home-sb i { display: block; width: 100%; border-radius: 3px 3px 0 0;
  background: rgba(90,104,120,.38); min-height: 3px; }
.cv3home-sb.is-on i { background: #2E7D8F; }
.cv3home-sc.is-crit .cv3home-sb.is-on i { background: #C0392B; }
.cv3home-sc.is-warn .cv3home-sb.is-on i { background: #B07A16; }
.cv3home-sb.is-na i { background: repeating-linear-gradient(45deg,#D6D2C8 0 3px,transparent 3px 6px); }
.cv3home-sb u { text-decoration: none; font-size: 11px; color: #6B7481; margin-top: 2px; }
.cv3home-sb b { font-size: 11px; color: #2C3742; font-weight: 800; }
.cv3home-sb.is-on b { color: #14202E; }
/* 스트립 머리 — 2.0 요양원의 「지금 대응」 줄 */
.cv3home-strip-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 6px; }
.cv3home-strip-k { font-size: 11px; font-weight:800; letter-spacing:.04em; color:#8A2B2B;
  background:#F7E3E0; border-radius:999px; padding:2px 8px; }
.cv3home-strip-h b { font-size:13px; color:#14202E; }
.cv3home-strip-p { display:flex; gap: 6px; }
.cv3home-strip-p i { font-style:normal; font-size: 11px; font-weight:800; padding:2px 7px;
  border-radius:999px; background:#EFEDE6; color:#3B4650; }
.cv3home-strip-p i.warn { background:#FBF1DE; color:#8A5A1B; }
.cv3home-strip-p i.crit { background:#F7E3E0; color:#8A2B2B; }
.cv3home-strip-h .cv3home-btn { margin-left:auto; width:auto; }
/* 카드 — 무슨 일 → 누구 → 언제 */
.cv3home-sc { position:relative; padding:0; }
.cv3home-sc-go { display:flex; flex-direction:column; gap: 6px; align-items:stretch;
  width:100%; padding:9px 10px 8px; background:none; border:0; cursor:pointer; text-align:left; }
.cv3home-sc-1 b { font-size: 12px; line-height:1.3; white-space:normal;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cv3home-sc-w { display:flex; align-items:baseline; gap:6px; }
.cv3home-sc-w i { font-style:normal; font-size: 12px; font-weight:800; color:#14202E; }
.cv3home-sc-w u { text-decoration:none; font-size: 11px; color:#6B7481; margin-left:auto; }
.cv3home-sc-ack { position:absolute; right:8px; bottom:8px; font-size: 11px; font-weight:800;
  padding:2px 8px; border-radius:999px; border:1px solid #CFCABE; background:#F7F5EF;
  color:#3B4650; cursor:pointer; }
.cv3home-sc-ack:hover { background:#EDEAE1; }
.cv3home-strip-p i.ack { background:#E4EEF6; color:#16457A; }

/* ══ 경보 팝업을 **화면 위로** (2026-09-08 대표님 지시) ══════════════════════
   전에는 `position:sticky` 로 **본문 칸 안**에 있었습니다 — 실측 본문 740px 안
   708px. 급한 경보가 글 사이에 끼어 있으면 안 됩니다.
   ⚠ 이 규칙은 파일 맨 뒤 — 같은 선택자는 뒤가 이깁니다. */
.cv3home-emgpop {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(24, 14, 12, .46);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cv3home-emgpop > .cv3home-emg {
  position: static; margin: 0;
  width: min(560px, 94vw); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.cv3home-emgpop .cv3home-emg-b { max-height: 92vh; overflow-y: auto; }

/* ══ 분할 16·32칸 (2026-09-08 대표님 「1, 4, 9, 16, 32...」) ═════════════════
   ⚠ 칸이 작아지면 이름이 안 읽힙니다. 칸 수에 따라 글자와 여백을 줄입니다 —
     32칸에서 13px 글자를 그대로 두면 이름이 잘려 «누구인지» 를 못 봅니다. */
.cv3home-wall-g.is-g16 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cv3home-wall-g.is-g32 { grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cv3home-wall-g.is-g16 .cv3home-cg-t b { font-size: 11px; }
.cv3home-wall-g.is-g32 .cv3home-cg-t b { font-size: 11px; }
.cv3home-wall-g.is-g32 .cv3home-cg-t i { font-size: 11px; padding: 0 4px; }
.cv3home-wall-g.is-g32 .cv3home-cg-none { font-size: 11px; }
@media (max-width: 1280px) {
  .cv3home-wall-g.is-g32 { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 980px) {
  .cv3home-wall-g.is-g16 { grid-template-columns: repeat(3, 1fr); }
  .cv3home-wall-g.is-g32 { grid-template-columns: repeat(4, 1fr); }
}
/* 64칸 (2026-09-08 「64 까지요」) — 8×8.
   ⚠ 여기서는 이름을 다 읽기 어렵습니다. 그래서 **경보 테두리**가 더 중요해집니다 —
     글자가 아니라 색으로 찾게 됩니다. 경보 테두리를 굵게 둡니다. */
.cv3home-wall-g.is-g64 { grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cv3home-wall-g.is-g64 .cv3home-cg-t b { font-size: 11px; letter-spacing: -.3px; }
.cv3home-wall-g.is-g64 .cv3home-cg-t i { display: none; }
.cv3home-wall-g.is-g64 .cv3home-cg-none { font-size: 0; }
.cv3home-wall-g.is-g64 .cv3home-cg-t.is-crit,
.cv3home-wall-g.is-g32 .cv3home-cg-t.is-crit { box-shadow: inset 0 0 0 3px #C0392B; }
.cv3home-wall-g.is-g64 .cv3home-cg-t.is-warn,
.cv3home-wall-g.is-g32 .cv3home-cg-t.is-warn { box-shadow: inset 0 0 0 3px #D9A441; }
@media (max-width: 1280px) { .cv3home-wall-g.is-g64 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 980px)  { .cv3home-wall-g.is-g64 { grid-template-columns: repeat(4, 1fr); } }

/* ══ 확장 모니터 창 — 벽만 (2026-09-08 대표님 「확장 모니터 지원요」) ════════
   `#care=home&v=wall&g=64` 로 연 창입니다. 옆 모니터에 관제로 띄워 두는 용도라
   옆 패널·카드가 같이 보이면 칸이 좁아지고 «관제 화면» 이 아니게 됩니다. */
:root[data-wallsolo="1"] .cv3home-grid3 > .cv3home-side,
:root[data-wallsolo="1"] .cv3home-grid3 > .cv3home-right,
:root[data-wallsolo="1"] .cv3home-split { display: none !important; }
:root[data-wallsolo="1"] .cv3home-grid3 { grid-template-columns: 1fr !important; }
:root[data-wallsolo="1"] .cv3home-wallpop { padding: 8px; background: #0E1620; }
:root[data-wallsolo="1"] .cv3home-wallpop-b {
  width: 100%; max-width: none; max-height: none; height: calc(100vh - 16px);
  display: flex; flex-direction: column;
}
:root[data-wallsolo="1"] .cv3home-wall { flex: 1 1 auto; display: flex; flex-direction: column; }
:root[data-wallsolo="1"] .cv3home-wall-g { flex: 1 1 auto; align-content: start; }
.cv3home-simbar-w { font-size: 11px; color:#8A6A2A; }

/* ══ 불안정 분석 (2026-09-08) ══════════════════════════════════════════════ */
.cv3home-risk { font-size: 12px; margin:8px 0; padding:8px 11px; border-radius: 14px;
  background:#EFEDE6; border:1px solid #DEDACF; color:#4A5460; }
.cv3home-risk.is-na { background:#F3F1EA; color:#6B7481; }
.cv3home-risk.is-ok { background:#EDF2EC; border-color:#CBDCC8; color:#3D5A42; }
.cv3home-risk.is-hit { background:#FBF1DE; border-color:#E5C98F; }
.cv3home-risk-t { margin:0 0 5px; font-size: 12px; font-weight:800; color:#14202E;
  display:flex; align-items:baseline; gap:8px; }
.cv3home-risk-t span { font-size: 11px; font-weight:400; color:#6B7481; margin-left:auto; }
.cv3home-risk-r { margin:3px 0; font-size: 12px; line-height:1.5; }
.cv3home-risk-r b { color:#14202E; }
.cv3home-risk-r.is-crit b { color:#8A2B2B; }
.cv3home-risk-r.is-warn b { color:#8A5A1B; }
.cv3home-risk-r em { display:block; font-style:normal; font-size: 11px; color:#6B7481; margin-top:1px; }
/* 오류 자가진단 (2026-09-08) */
.cv3home-diag { margin:6px 0; padding:8px 10px; border-radius:10px;
  background:#EFEDE6; border-left:3px solid #B7B2A6; }
.cv3home-diag.is-crit { background:#FBE9E4; border-left-color:#C0392B; }
.cv3home-diag.is-warn { background:#FBF1DE; border-left-color:#D9A441; }
.cv3home-diag-w { margin:0; font-size: 12px; }
.cv3home-diag-w b { color:#14202E; }
.cv3home-diag-y { margin:2px 0 0; font-size: 12px; color:#4A5460; line-height:1.5; }
.cv3home-diag-f { margin:3px 0 0; font-size: 12px; color:#16457A; }
.cv3home-diag-e { margin:2px 0 0; font-size: 11px; color:#6B7481; }
.cv3home-diag.is-ok { background:#EDF2EC; border-left-color:#5A8C63; }

/* ══ AI 컨디션 관리 (2026-09-08) ═══════════════════════════════════════════ */
.cv3home-care { margin:8px 0; padding:11px 13px; border-radius:14px;
  background:#EFEDE6; border:1px solid #DEDACF; }
.cv3home-care.is-ok   { background:#EDF2EC; border-color:#CBDCC8; }
.cv3home-care.is-warn { background:#FBF1DE; border-color:#E5C98F; }
.cv3home-care.is-crit { background:#FBE9E4; border-color:#E0A08F; }
.cv3home-care.is-na   { background:#F3F1EA; }
.cv3home-care-t { margin:0; font-size:11px; font-weight:800; letter-spacing:.04em;
  color:#6B7481; display:flex; gap:8px; }
.cv3home-care-t span { color:#14202E; }
.cv3home-care-h { margin:3px 0 0; font-size:15px; font-weight:800; color:#14202E; }
.cv3home-care.is-crit .cv3home-care-h { color:#8A2B2B; }
.cv3home-care-b { margin:3px 0 0; font-size: 12px; line-height:1.6; color:#3B4650; }
.cv3home-care-u { margin:5px 0 0; font-size: 11px; color:#6B7481; }
.cv3home-care-ai { margin:7px 0 0; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.72); font-size:12px; line-height:1.65; color:#2C3742; }
.cv3home-care-w { margin:6px 0 0; font-size: 11px; color:#6B7481; }
.cv3home-care-bad { margin:7px 0 0; padding:7px 10px; border-radius:10px;
  background:#FBE9E4; border:1px solid #E0A08F; font-size: 12px; color:#8A2B2B; line-height:1.55; }
.cv3home-care-ai.is-bad { opacity:.72; border:1px solid #E0A08F; }
/* 돌봄 갈래 — 컨디션 · 컨시어지 · 어매니티 · 매니징 (2026-09-08) */
.cv3home-caretabs { display:flex; gap: 6px; margin:6px 0 8px; flex-wrap:wrap; }
.cv3home-caretabs button { font-size: 12px; font-weight:800; padding:4px 10px;
  border-radius:999px; border:1px solid #DEDACF; background:#F7F5EF; color:#4A5460; cursor:pointer; }
.cv3home-caretabs button.is-on { background:#2E5C6E; border-color:#2E5C6E; color:#fff; }
.cv3home-amen { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:4px 0; }
.cv3home-amen-c { padding:8px; border-radius:10px; background:rgba(255,255,255,.7);
  text-align:center; border:1px solid #DEDACF; }
.cv3home-amen-c.is-off { background:#FBE9E4; border-color:#E0A08F; }
.cv3home-amen-c b { display:block; font-size:15px; color:#14202E; }
.cv3home-amen-c span { font-size: 11px; color:#6B7481; }
/* 응급대응 — 경과 시간을 크게 (2026-09-08) */
.cv3home-emgtab { text-align:center; padding:8px 0 4px; }
.cv3home-emgtab-t { margin:0; font-size:13px; font-weight:800; color:#8A2B2B; }
.cv3home-emgtab-c { margin:2px 0 0; font-size: 28px; font-weight:800; color:#8A2B2B;
  letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.cv3home-emgtab-c span { font-size:12px; font-weight:400; color:#6B7481; margin-left:4px; }
/* 데이터 분석 표 (2026-09-08) */
.cv3home-dtab { margin:6px 0; border-radius:10px; overflow:hidden; border:1px solid #DEDACF; }
.cv3home-dtab-h, .cv3home-dtab-r { display:grid; grid-template-columns:1.3fr repeat(6,1fr);
  font-size: 12px; font-variant-numeric:tabular-nums; }
.cv3home-dtab-h { background:#E7E4DA; color:#4A5460; font-weight:800; font-size: 11px; }
.cv3home-dtab-h span, .cv3home-dtab-r span { padding:5px 6px; text-align:right; }
.cv3home-dtab-h span:first-child, .cv3home-dtab-r span:first-child { text-align:left; }
.cv3home-dtab-r { background:rgba(255,255,255,.66); border-top:1px solid #E7E4DA; }
.cv3home-dtab-r b { color:#14202E; }
/* 돌봄 기록 · 마음챙김 (2026-09-08) */
.cv3home-caretabs.is-sub button { font-size:11px; padding:3px 9px; }
.cv3home-caretabs button i { font-style:normal; opacity:.7; font-size: 11px; }
.cv3home-planf { display:flex; gap: 6px; flex-wrap:wrap; margin:6px 0; }
.cv3home-planf input { flex:1 1 140px; min-width:120px; font-size:12px; padding:6px 8px;
  border-radius: 10px; border:1px solid #DEDACF; background:#fff; }
.cv3home-planf .cv3home-btn { width:auto; }
.cv3home-mood { padding:8px 0; }
.cv3home-mood-b { display:flex; gap: 6px; flex-wrap:wrap; margin:4px 0 6px; }
.cv3home-mood-b button { flex:1 1 auto; font-size:12px; font-weight:800; padding:7px 6px;
  border-radius:10px; border:1px solid #DEDACF; background:#F7F5EF; color:#4A5460; cursor:pointer; }
.cv3home-mood-b button.is-on { background:#2E5C6E; border-color:#2E5C6E; color:#fff; }
/* 질병 참고 지식 · 관찰 분류 (2026-09-08) */
.cv3home-know { margin:6px 0; padding:9px 11px; border-radius: 10px;
  background:#EFEDE6; border-left:3px solid #7B8FA1; }
.cv3home-know.is-cls { border-left-color:#5A8C63; }
.cv3home-know-t { margin:0 0 3px; font-size:13px; font-weight:800; color:#14202E;
  display:flex; align-items:baseline; gap: 6px; }
.cv3home-know-t span { font-size: 11px; font-weight:400; color:#6B7481; }
.cv3home-know-l { margin:2px 0; font-size: 12px; line-height:1.55; color:#3B4650; }
.cv3home-know-l b { color:#16457A; margin-right:4px; }
.cv3home-know-s { margin:4px 0 0; font-size: 11px; line-height:1.5; color:#6B7481; }
.cv3home-know-n { margin:6px 0 0; font-size: 11px; color:#8B93A1; }
/* 피부 분석 (2026-09-08) */
.cv3home-skin { margin:8px 0; padding:9px 11px; border-radius: 14px;
  background:#EFEDE6; border:1px solid #DEDACF; }

/* ══ AI 돌봄 — 헤더 드롭다운 (2026-09-08 · 대표님
      「AI 돌봄 패널이 메인 페이지 한중간에 떠있습니다 → 상단 헤더 메뉴·드롭다운」)
   ⚠ 부모에 `position:relative` 를 주지 않으면 목록이 **헤더 왼쪽 끝**에 붙습니다.
   ⚠ `z-index` 만 올려도 조상에 transform 이 있으면 갇힙니다 — 헤더 막대에는
     transform 이 없는 것을 확인하고 씁니다. */
.cv3home-caremenu{position:relative;display:inline-flex}
/*  🔴 `left:0` 으로 뒀더니 **목록이 화면 오른쪽 밖으로 나갔습니다**
    (실측: x 1310 + 폭 170 = 1480 > 창 1400). 헤더 단추 묶음이
    `margin-left:auto` 로 **오른쪽 끝**에 붙어 있어서입니다.
    → 오른쪽 기준으로 답니다. */
/*  🔴 **`absolute` 로는 부족했습니다.** 창이 좁으면 헤더 막대 자체가 넘쳐
    (실측 1100px 창에서 헤더 scrollWidth 1495) 단추가 화면 밖으로 나가고,
    목록도 따라 나갔습니다. → **`fixed` 로 띄우고 자바스크립트가 화면 안으로
    물립니다**(`careDropPlace`). 조상이 넘치든 말든 목록은 늘 보입니다. */
.cv3home-caredrop{
  position:fixed; z-index:60;
  min-width:170px; padding:6px;
  background:var(--hx-bg1,#fff); border:1px solid var(--hx-line,#d8d5cc);
  border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.22);
  display:flex; flex-direction:column; gap: 6px;
}
.cv3home-caredrop button{
  all:unset; box-sizing:border-box; display:block; width:100%;
  padding:7px 10px; border-radius: 10px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--hx-txt,#2a2a28); text-align:left;
}
.cv3home-caredrop button:hover{background:var(--hx-bg2,#f3f1ec)}
.cv3home-caredrop button:focus-visible{outline:2px solid var(--hx-key,#8a6d1f);outline-offset:-2px}
.cv3home-caredrop button.is-on{background:var(--hx-key,#8a6d1f);color:#fff;font-weight:700}
.cv3home-caredrop-sep{height:1px;margin:4px 2px;background:var(--hx-line,#d8d5cc)}
/*  자리는 자바스크립트가 잡습니다 — 화면 크기에 상관없이 안으로 물립니다. */

/* ══ 가정용 헤더 — 지금 무엇이 열려 있는지만 적습니다 (2026-09-08 · 대표님
      「첨부 부분도 정리」 → 「메가 메뉴에 포함시켜주세요」)
   단추 일곱 개를 늘어놓던 자리입니다. 화면 전환과 AI 돌봄은 ☰ 메뉴로 갔고,
   여기에는 **열려 있는 것만** 적습니다. ⚠ 뺀 것이 아니라 옮긴 것입니다. */
.cv3home-hdnow{display:inline-flex;align-items:center;gap: 6px;
  padding:3px 9px;border-radius:999px;font-size: 12px;font-weight:700;
  background:var(--hx-key,#8a6d1f);color:#fff;white-space:nowrap}
.cv3home-hdnow button{all:unset;cursor:pointer;opacity:.8;font-size:13px;line-height:1;
  padding:0 1px}
.cv3home-hdnow button:hover{opacity:1}

/* ══ 센서 두 칸 — **카드로** (2026-09-11 · 대표님 「바탕화면에 깔아 놓으라는게
   아니었어요」 → 「카드를 만들라는것입니다」) ══════════════════════════════
   🔴 처음엔 `.cv3home-air` 그대로 놓았습니다. 그런데 그 클래스는
      **테두리도 그림자도 없이** 바탕에 3.5% 색만 깔린 것입니다(실측) —
      그러니 «카드» 가 아니라 **바탕에 깔린 글**로 보였습니다.
      대표님 말씀이 정확했습니다.
   → 이 화면이 이미 쓰는 진짜 카드(`.cv3-room`)와 **같은 옷**을 입힙니다:
      테두리 1px · 둥근 모서리 14px · 두 겹 그림자 · 카드 바탕색.
   ⚠ 모양을 새로 짓지 않고 **있는 카드의 값을 그대로** 씁니다 — 새로 지으면
     화면마다 카드가 조금씩 달라집니다. */
/*  ══ 센서 두 카드 — **생체카드와 나란히** (2026-09-11 · 대표님
    「생체 카드와 같이 메인 화면에 두개의 카드를 만들어 주세요」) ══════════
    ⚠ 카드 모양은 `sigCard()` 가 냅니다(`.cv3home-sig`) — 여기서는 **줄만** 잡습니다.
      모양을 여기서 또 손대면 생체카드와 갈라집니다.
    ⚠ 기준은 **화면 폭이 아니라 본문 폭**입니다. 좌우 패널을 넓히시면 화면이
      넓어도 본문은 좁습니다 — 이 파일이 POBC 줄에서 이미 겪고 고친 함정입니다.
      그래서 `@container` 를 씁니다(못 쓰는 브라우저용 매체 질의도 함께 둡니다). */
.cv3home-senrow { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 8px; margin: 0 0 10px; }
/*  🔴 처음에 720px 로 잡았는데 **안 걸렸습니다.** `container-type: inline-size`
    는 **안쪽 폭(content box)** 으로 잽니다 — `.cv3home-bd` 의 좌우 여백 32px 을
    뺀 값입니다. 실측: 본문 733 → 안쪽 **701**. 그래서 720 은 늘 밖이었습니다.
    카드 둘이 나란히 서려면 한 칸에 340px 쯤이면 넉넉합니다. */
@container cvhome (min-width: 640px) {
  .cv3home-senrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 900px) { .cv3home-senrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}
/*  요양원 띠 안에서는 띠가 이미 두 칸을 잡고 있으므로 줄을 풀어 줍니다. */
.cv3-senbar .cv3home-senrow { display: contents; }

/*  ── 요양원 본화면: 이 화면의 진짜 카드(`.cv3-room`)와 **같은 옷** ──────
    테두리 1px · 둥근 14px · 두 겹 그림자 · 카드 바탕. */
.cv3sen-card {
  border: 1px solid var(--hx-line);
  border-radius: 14px;
  background: var(--hx-smoke);
  box-shadow: 0 1px 2px rgba(40,43,43,.06), 0 4px 14px -6px rgba(40,43,43,.18);
  padding: 11px 12px;
}
/*  ── 가정용: **테두리를 쓰지 않습니다** ─────────────────────────────
    🔴 2026-09-05 대표님 지시 「그리고 테두리 쓰지 마세요.」 —
       이 화면은 경계를 **면과 그림자로만** 만듭니다. 실제로 `.cv3home` 안에는
       `*:not(svg) { border-style: none }` 이 걸려 있어 제가 넣은 테두리가
       **조용히 씹혔습니다**(실측: `0px none`). 지시를 어긴 것이기도 했습니다.
    → 흰 면 + 유리판 그림자(위 규칙)로 세웁니다. 생체카드와 **똑같은 언어**입니다.
    실측(2026-09-11): 바탕 rgb(109,142,197) 위에서
      제가 쓰던 회끼 면 2.80 : 1  →  흰 면 **3.32 : 1** (생체카드와 동일). */
.cv3home .cv3sen-card {
  background: var(--hx-fill, #fff);
  border-style: none;
  padding: 13px 14px 12px;
}
/*  ⚠ 상태색(주의·경보)은 **테두리로** 나릅니다. 카드 바탕을 통째로 물들이면
    이 화면에서 이미 한 번 지적받은 그 문제가 됩니다 — 벽에서 보면 무슨
    카드인지보다 «색» 이 먼저 눈에 들어옵니다. */
/*  상태색은 **테두리로만** 나릅니다(요양원). 카드 바탕을 통째로 물들이면
    벽에서 볼 때 «무슨 카드인가» 보다 색이 먼저 눈에 듭니다. */
.cv3sen-card.is-warn { border-color: #E5C98F; }
.cv3sen-card.is-empty { border-style: solid; }
/*  가정용에는 테두리가 없으므로 **왼쪽 결**로 표시합니다(선이 아니라 면). */
.cv3home .cv3sen-card.is-warn { background: linear-gradient(90deg, #FBF1DE 0 5px, var(--hx-fill, #fff) 5px); }
.cv3home .cv3sen-card.is-empty { background: linear-gradient(90deg, #EDEDEA 0 5px, var(--hx-fill, #fff) 5px); }

/*  요양원 본화면 — 바로 위 **병실 격자와 같은 칸**에 세웁니다.
    🔴 2026-09-12 대표님 「첨부 카드는 폭을 맞춰 주세요」 — 첨부를 재 보니
       두 카드끼리는 990·989 로 이미 같았습니다. 어긋난 것은 **위 줄과의 폭**입니다.
       병실은 `repeat(auto-fill, minmax(var(--cv-room-w,300px), 1fr))` 인데
       (`--cv-room-w: 520px`) 센서줄만 `repeat(2, 1fr)` 이었습니다.
       ⇒ 칸 폭이 1580px 을 넘으면 병실은 **3칸**, 센서줄은 **2칸**이 되어
         카드가 병실보다 한참 넓어집니다. 벽걸이 화면이 정확히 그 폭입니다.
       ⇒ 두 자리를 «각각» 정하지 않고 **같은 식**을 씁니다. 숫자를 맞춘 게
         아니라 근거를 하나로 만든 것이라, 병실 칸을 바꾸면 같이 따라갑니다. */
.cv3-senbar { display: grid; gap: 8px; margin: 0 0 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--cv-room-w, 300px), 1fr)); }
.cv3-senbar > .cv3home-air { margin: 0; }
/*  ⚠ 요양원 본화면은 **벽에 걸립니다.** 가정용보다 멀리서 봅니다 —
    숫자를 조금 키웁니다(대비·색은 그대로 둡니다). */
.cv3-senbar .cv3home-amen-c b { font-size: 20px; }

/*  ══ 움직임 감지 — 센서 여러 대 · 자리 · 드나듦 (2026-09-12 · 대표님) ══════
    한 줄에 한 대. 왼쪽이 **자리**(누르면 설정), 가운데가 **지금 상태**,
    오른쪽이 근거입니다. 자리를 맨 앞에 두는 이유: 여러 대가 되면 «무엇이»
    보다 «어디가» 가 먼저 궁금해집니다. */
.cv3home-aimrows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cv3home-aimrow {
  display: grid; grid-template-columns: minmax(64px, auto) auto minmax(0, 1fr);
  align-items: baseline; gap: 8px;
  padding: 6px 8px; border-radius: 10px;
  background: var(--hx-fill2); border: 1px solid transparent;
}
/*  이상은 **왼쪽 띠**로 표시합니다 — 바탕을 통째로 물들이면 여러 대일 때
    화면이 온통 붉어져 정작 급한 한 줄이 안 보입니다. */
.cv3home-aimrow.is-bad {
  background: linear-gradient(90deg, var(--hx-flame) 0 4px, #FDF0E6 4px);
  border-color: rgba(169, 86, 15, .28);
}
.cv3home-aimrow.is-off { opacity: .72; }
.cv3home-aimpl {
  font: inherit; font-size: 12px; font-weight: 800; color: var(--hx-txt);
  background: none; border: 0; padding: 2px 4px; margin: -2px -4px;
  border-radius: 10px; cursor: pointer; text-align: left;
  display: inline-flex; align-items: baseline; gap: 6px;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-color: var(--hx-line);
}
.cv3home-aimpl:hover, .cv3home-aimpl:focus-visible { background: var(--hx-fill); }
.cv3home-aimpl i {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 4px; border-radius: 5px;
  background: var(--hx-lake, #4C75B8); color: #fff;
}
.cv3home-aimst { font-size: 13px; font-weight: 800; color: var(--hx-txt); }
/*  ⚠ `--hx-flame`(#D3622C) 을 이 크림색(#FDF0E6) 위에 쓰면 **3.38:1** 입니다 —
    10~13px 글자에는 모자랍니다(AA 4.5). 실측해서 #9C4A16 으로 내렸습니다(5.52:1).
    ⚠ 재실 때는 `--hx-fill2` 처럼 **반투명 바탕을 합성**해야 합니다. 알파를 빼고
      재면 같은 색으로 나와 «1.00:1» 이라는 헛값이 나옵니다(오늘 한 번 속았습니다). */
.cv3home-aimrow.is-bad .cv3home-aimst { color: #9C4A16; }
.cv3home-aimsub {
  font-size: 11px; color: var(--hx-mut2); text-align: right;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*  드나듦 — 시각이 세로로 줄 맞게 `tabular-nums`. 들어옴/나감은 색이 아니라
    **글자로도** 갈라 둡니다(색만 쓰면 색각 이상에서 같아집니다). */
.cv3home-aimgate { margin-top: 8px; border-top: 1px solid var(--hx-line2); padding-top: 7px; }
.cv3home-aimgate-t {
  margin: 0 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  color: var(--hx-mut2); display: flex; align-items: baseline; gap: 6px;
}
.cv3home-aimgate-t span { font-weight: 700; color: var(--hx-txt2); }
.cv3home-aimgate-n { margin: 0; font-size: 11px; line-height: 1.5; color: var(--hx-mut2); }
.cv3home-aimgate-n b { color: var(--hx-txt); }
.cv3home-aimgate-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cv3home-aimgate-l li {
  display: grid; grid-template-columns: 42px auto minmax(0, 1fr);
  align-items: baseline; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--hx-line2);
}
.cv3home-aimgate-l li:last-child { border-bottom: 0; }
.cv3home-aimgate-l time {
  font-size: 11px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums;
}
.cv3home-aimgate-l b { font-size: 11px; font-weight: 800; }
.cv3home-aimgate-l li.is-in  b { color: #2F6B4B; }
.cv3home-aimgate-l li.is-out b { color: #4C75B8; }
.cv3home-aimgate-l span { font-size: 11px; color: var(--hx-mut2); text-align: right; }

/*  ══ 대시보드 기본 (2026-09-12 · 대표님 「전체적으로 텍스트 스타일이 아니라
    대시보드 UI/UX가 기본입니다」) ═══════════════════════════════════════════
    ■ 규칙 셋 — 새 화면을 만들 때도 이대로 합니다.
      ① 숫자는 **타일**에 담는다(글줄에 섞지 않는다).
      ② 값에는 **눈금**을 함께 그린다 — 41 이 큰지 작은지는 문턱이 있어야 안다.
      ③ 색만으로 가르지 않는다 — 모양·글자로도 갈라 색각 이상에서 살아남게 한다. */

/*  ── 움직임 감지 : 요약 타일 ── */
.cv3aim-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.cv3aim-k {
  background: var(--hx-fill2); border-radius: 10px; padding: 7px 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.cv3aim-k b { font-size: 20px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.05; }
.cv3aim-k span { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3aim-k.is-bad { background: #FDF0E6; }
.cv3aim-k.is-bad b { color: #9C4A16; }

/*  ── 움직임 감지 : 센서 타일 ── 한 대에 한 칸 */
.cv3aim-grid {
  display: grid; gap: 6px; margin-top: 6px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.cv3aim-t {
  background: var(--hx-fill2); border: 1px solid transparent; border-radius: 10px;
  padding: 8px 9px; display: flex; flex-direction: column; gap: 6px;
}
.cv3aim-t.is-bad { background: linear-gradient(90deg, #9C4A16 0 3px, #FDF0E6 3px); border-color: rgba(156, 74, 22, .22); }
.cv3aim-t.is-off { opacity: .7; }
.cv3aim-t-h { margin: 0; }
.cv3aim-t-v { margin: 0; }
.cv3aim-t-v b { font-size: 15px; font-weight: 800; color: var(--hx-txt); }
.cv3aim-t.is-bad .cv3aim-t-v b { color: #9C4A16; }
.cv3aim-t-s { margin: 0; font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
/*  세기 막대 — **문턱을 눈금 위에 같이** 긋습니다. 문턱이 없으면 큰지 작은지 모릅니다. */
.cv3aim-bar { position: relative; height: 4px; border-radius: 3px; background: rgba(40,43,43,.10); margin-top: 4px; overflow: hidden; }
.cv3aim-bar span { position: absolute; inset: 0 auto 0 0; background: var(--hx-lake, #4C75B8); border-radius: 3px; }
.cv3aim-t.is-bad .cv3aim-bar span { background: #9C4A16; }
.cv3aim-bar i { position: absolute; right: 0; top: -1px; bottom: -1px; width: 2px; background: var(--hx-txt); opacity: .45; }

/*  ── 드나듦 : 하루 축 ── 「오늘 있었던 일」과 **같은 눈금**(0~24시) */
.cv3aim-tl { margin: 2px 0 6px; color: var(--hx-txt); }
.cv3aim-tl svg { display: block; width: 100%; height: 22px; overflow: visible; }
.cv3aim-tl polygon.is-in { fill: #2F6B4B; }
.cv3aim-tl polygon.is-out { fill: #4C75B8; }
.cv3aim-tl p { display: flex; justify-content: space-between; margin: 1px 0 0; font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3aim-lg { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--hx-mut2); }
.cv3aim-lg i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.cv3aim-lg i.in { border-top: 6px solid #2F6B4B; margin-left: 4px; }
.cv3aim-lg i.out { border-bottom: 6px solid #4C75B8; margin-left: 6px; }

/*  ══ 실내외 환경 ════════════════════════════════════════════════════════ */
/*  ① 지금 하실 일 — 카드의 **머리**입니다(대표님 「데이터로 무엇을 이롭게 할
    것인가가 목적입니다」). 숫자가 아니라 **할 일**이 먼저 보여야 합니다. */
.cv3env-care { margin-top: 6px; }
.cv3env-care-h {
  margin: 0 0 5px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2);
}
.cv3env-care-h span { font-weight: 800; color: var(--hx-txt); }
.cv3env-care-h em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--hx-lake, #4C75B8); }
.cv3env-care-h em.q { color: var(--hx-mut2); }
/*  ── 행동 타일 ── 「무엇을 하시라」가 카드의 알맹이입니다.
    한 장에 아이콘 · 행동(두세 낱말) · 근거 숫자. 긴 설명은 눌러야 펴집니다. */
.cv3env-acts { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); }
.cv3env-a {
  font: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 7px;
  align-items: center; padding: 9px 10px; border-radius: 10px;
  background: var(--hx-fill2); border: 1px solid transparent; color: var(--hx-txt);
  transition: border-color .12s, box-shadow .12s;
}
.cv3env-a:hover, .cv3env-a:focus-visible { border-color: var(--hx-line); box-shadow: 0 2px 8px -4px rgba(40,43,43,.35); }
.cv3env-a-i { grid-row: span 2; display: flex; align-items: center; justify-content: center; }
.cv3env-a-i .cv3home-ic { width: 18px; height: 18px; }
.cv3env-a-t { font-size: 13px; font-weight: 800; line-height: 1.2; }
.cv3env-a-m { font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3env-a-d { grid-column: 1 / -1; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--hx-line2); font-size: 11px; line-height: 1.5; color: var(--hx-txt2); }
.cv3env-a-d b { display: block; font-weight: 800; color: var(--hx-txt); margin-bottom: 2px; }
.cv3env-a.is-open { grid-column: 1 / -1; }
/*  등급 — 색 **과 함께** 왼쪽 굵기로도 가릅니다(색만으로 가르지 않습니다). */
.cv3env-a.is-crit { background: #FBE9E4; border-left: 3px solid #A4301A; }
.cv3env-a.is-crit .cv3env-a-t { color: #A4301A; }
.cv3env-a.is-warn { background: #FDF0E6; border-left: 3px solid #9C4A16; }
.cv3env-a.is-warn .cv3env-a-t { color: #9C4A16; }
.cv3env-a.is-soon { background: #EEF1F7; border-left: 3px solid #4C75B8; }
.cv3env-a.is-soon .cv3env-a-t { color: #2F4E80; }
.cv3env-a.is-ok { background: #EAF3EE; border-left: 3px solid #2F6B4B; }
.cv3env-a.is-ok .cv3env-a-t { color: #2F6B4B; }

.cv3env-care-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv3env-care-l li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; border-radius: 10px; background: var(--hx-fill2);
  border-left: 3px solid var(--hx-line);
}
.cv3env-care-l li b { font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3env-care-l li span { font-size: 11px; line-height: 1.5; color: var(--hx-txt2); }
.cv3env-care-l li.is-crit { background: #FBE9E4; border-left-color: #A4301A; }
.cv3env-care-l li.is-crit b { color: #A4301A; }
.cv3env-care-l li.is-warn { background: #FDF0E6; border-left-color: #9C4A16; }
.cv3env-care-l li.is-warn b { color: #9C4A16; }
/*  예측(soon) — 아직 일어나지 않은 일이라 **지금 일보다 옅게** 칠합니다.
    같은 색이면 «이미 나쁜 것» 과 «곧 나빠질 것» 이 같아 보입니다. */
.cv3env-care-l li.is-soon { background: #EEF1F7; border-left-color: #4C75B8; border-left-style: solid; }
.cv3env-care-l li.is-soon b { color: #2F4E80; }
.cv3env-care-l li.is-ok { background: #EAF3EE; border-left-color: #2F6B4B; }
.cv3env-care-l li.is-ok b { color: #2F6B4B; }
.cv3env-care-n { margin: 0; font-size: 11px; color: var(--hx-mut2); }

/*  ② 드나드실 때 — 안팎 차이를 **하나의 값**으로 */
.cv3env-sh { margin-top: 8px; padding: 9px 10px; border-radius: 10px; background: var(--hx-fill2); }
.cv3env-sh.is-warn { background: #FDF0E6; }
.cv3env-sh.is-crit { background: #FBE9E4; }
.cv3env-sh-h { margin: 0 0 3px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); display: flex; gap: 6px; align-items: baseline; }
.cv3env-sh-h span { font-weight: 700; }
.cv3env-sh-v { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/*  ⚠ **직계 자식만** 큰 숫자입니다. 그냥 `.cv3env-sh-v b` 로 두었더니 옆에 붙는
    설명 글 안의 `<b>` 까지 26px 이 되어, 실외 센서가 없을 때 「온도차를 낼 수
    없습니다」가 숫자만 하게 찍혔습니다(실측). */
.cv3env-sh-v > b { font-size: 28px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.05; }
.cv3env-sh-w b { font-size: inherit; font-weight: 800; color: var(--hx-txt); }
.cv3env-sh.is-warn .cv3env-sh-v > b { color: #9C4A16; }
.cv3env-sh.is-crit .cv3env-sh-v > b { color: #A4301A; }
.cv3env-sh-v small { font-size: 12px; font-weight: 700; color: var(--hx-mut2); }
.cv3env-sh-w { flex: 1 1 180px; font-size: 11px; line-height: 1.5; color: var(--hx-txt2); }
.cv3env-sh-sc { position: relative; height: 5px; border-radius: 3px; background: rgba(40,43,43,.10); margin: 7px 0 2px; }
.cv3env-sh-sc span { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--hx-txt); opacity: .30; }
.cv3env-sh-sc i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--hx-txt); box-shadow: 0 0 0 2px var(--hx-fill, #fff); }
.cv3env-sh-l { display: flex; justify-content: space-between; margin: 0; font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3env-sh-a { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--hx-txt2); }
.cv3env-sh-a.is-warn { color: #9C4A16; font-weight: 700; }
.cv3env-sh-n { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: var(--hx-mut2); }
.cv3env-sh-n b { color: var(--hx-txt2); }
.cv3env-sh.is-na .cv3env-sh-v > b { color: var(--hx-mut2); }

/*  ③ 지표 타일 — 눈금 하나에 실내(채운 점)·실외(빈 고리)를 함께 찍습니다 */
.cv3env-grid { display: grid; gap: 6px; margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
.cv3env-t { background: var(--hx-fill2); border-radius: 10px; padding: 8px 9px; }
.cv3env-t.is-bad { background: #FDF0E6; }
.cv3env-t-k { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); }
.cv3env-t-k i { font-style: normal; margin-left: 4px; opacity: .8; }
.cv3env-t-v { margin: 1px 0 0; display: flex; align-items: baseline; gap: 6px; }
.cv3env-t-v b { font-size: 20px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cv3env-t.is-bad .cv3env-t-v b { color: #9C4A16; }
.cv3env-t-v small { font-size: 11px; font-weight: 700; color: var(--hx-mut2); }
.cv3env-t-tag { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--hx-mut2); }
.cv3env-t-o { margin: 0; font-size: 11px; color: var(--hx-mut2); display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.cv3env-t-o b { font-weight: 800; color: var(--hx-txt2); }
.cv3env-t-na { opacity: .75; }
.cv3env-d { margin-left: auto; font-weight: 800; }
.cv3env-d.is-up { color: #A4301A; }
.cv3env-d.is-dn { color: #4C75B8; }
.cv3env-sc { position: relative; height: 5px; border-radius: 3px; background: rgba(40,43,43,.10); margin: 6px 0 2px; }
.cv3env-sc-good { position: absolute; top: 0; bottom: 0; background: #BBD9C8; border-radius: 3px; }
/*  실내 = **채운 점**, 실외 = **빈 고리**. 색이 아니라 모양으로 갈립니다. */
.cv3env-sc-in { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--hx-txt); box-shadow: 0 0 0 2px var(--hx-fill, #fff); }
.cv3env-sc-out { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--hx-fill, #fff); border: 2px solid var(--hx-lake, #4C75B8); }
.cv3env-sc-l { display: flex; justify-content: space-between; margin: 0; font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3env-sc-g { color: #2F6B4B; font-weight: 700; }

.cv3env-outna { margin: 7px 0 0; font-size: 11px; line-height: 1.55; color: var(--hx-mut2); }
.cv3env-outna b { color: var(--hx-txt); }
.cv3env-outna em { display: block; margin-top: 3px; font-style: normal; opacity: .9; }

/*  ④ AI 케어 · 이 댁 기준 */
.cv3env-ai { margin-top: 8px; padding: 9px 10px; border-radius: 10px; background: var(--hx-fill2); }
.cv3env-ai.is-on { background: #EDF2FA; }
.cv3env-ai-h { margin: 0 0 3px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); display: flex; gap: 6px; align-items: baseline; }
.cv3env-ai-h span { font-weight: 700; }
.cv3env-ai-b { margin: 0 0 6px; font-size: 12px; line-height: 1.55; color: var(--hx-txt); }
.cv3env-ai-b.is-na { color: var(--hx-mut2); }
.cv3env-ai-b.is-na b { color: var(--hx-txt2); }
.cv3env-ai-b.is-err { color: #9C4A16; }
.cv3env-ill { margin-top: 8px; border-top: 1px solid var(--hx-line2); padding-top: 7px; }
.cv3env-ill-h { margin: 0 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cv3env-ill-h span { font-weight: 700; color: var(--hx-txt2); }
.cv3env-ill-c { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.cv3env-ill-c .cv3home-chip i { font-style: normal; font-size: 11px; opacity: .8; margin-left: 4px; }
.cv3env-ill-u { margin: 0 0 5px; font-size: 11px; line-height: 1.5; color: var(--hx-mut2); }
.cv3env-ill-u b { color: var(--hx-txt2); }
.cv3env-ill-n { margin: 0 0 6px; font-size: 11px; line-height: 1.55; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3env-ill-n em { display: block; margin-top: 3px; font-style: normal; }
.cv3env-ill-n b { color: var(--hx-txt2); }

/*  «무엇을 이상으로 보는가» — 낱말 옆에 **근거**를 붙입니다. 근거가 서로
    다르다(화면·장비·AI)는 것이 이 줄의 요점이라 붙여 씁니다. */
.cv3home-aimleg {
  margin: 7px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  font-size: 11px; color: var(--hx-mut2);
}
.cv3home-aimleg b {
  font-size: 11px; font-weight: 800; color: #9C4A16;   /* 5.52:1 — 실측 */
  padding: 1px 5px; border-radius: 5px; background: #FDF0E6;
}
.cv3home-aimleg i { font-style: normal; margin-right: 4px; }

/*  자리 설정 — 카드 안에 뜹니다. `askHtml` 과 같은 옷을 입혀 두 창이
    다르게 보이지 않게 합니다. */
.cv3home-aimset { margin: 8px 0 2px; }
.cv3home-aimset input { width: 100%; }
.cv3home-aimkinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }

/*  가정용에서도 같은 카드 옷입니다 — 두 화면이 갈라지지 않게. */
.cv3home .cv3sen-card { margin-bottom: 10px; }

/* ══ AI 아바타 — «말랑한 3D» 결 (2026-09-11 · 대표님이 그림을 주심
   「이런 귀여운 3D 아바타요」) ═══════════════════════════════════════════
   ⚠ **진짜 3D 렌더가 아닙니다.** 그림 생성 모델이 이 기계에 없고, three.js 도
     없으며 CSP(`script-src 'self'`)가 CDN 을 막습니다. 그래서 «그렇게 보이도록
     그린 SVG» 입니다 — 그 차이를 화면에도 주석에도 숨기지 않습니다(R0-2).
   ⚠ 색은 SVG 안 그라디언트가 냅니다. 여기서는 **선·굵기·움직임**만 잡습니다.
   ⚠ 상태는 **가방 색**으로만 나릅니다 — 얼굴·살색을 물들이면 «아픈 사람» 으로
     읽혀 뜻이 어긋납니다. 그리고 색만으로 안 나릅니다: 옆에 늘 글자가 있습니다. */
/*  ⚠ **격자 두 칸**입니다 — 넘치면 접히는 flex 를 쓰면 좁은 칸에서 말풍선이
    아바타 아래로 떨어져 꼬리가 허공을 가리킵니다(2026-09-11 실측). */
/*  🔴 `auto` 트랙을 쓰면 **그림의 본디 크기(303px)** 가 칸을 밀어냅니다 —
    실측: 격자가 `78px 303px` 로 갈려 말풍선이 78px 로 눌렸습니다.
    `.cv3ava-f` 에 `width:min(190px,100%)` 를 줘도 **트랙 크기 계산은 내용의
    max-content** 를 봅니다. → 트랙을 **190px 로 못 박습니다.** */
.cv3ava { display: grid; grid-template-columns: 190px minmax(0, 1fr);
  align-items: start; gap: 8px; margin: 2px 0 8px; }
.cv3ava-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cv3ava-row { display: flex; align-items: center; gap: 8px; }
/*  ⚠ 크기는 **이 카드 폭**을 보고 정합니다 — 본문 폭이 아닙니다.
    🔴 2026-09-11 실측: 「2배(284px)」로 키웠더니 **말풍선이 폭 0** 으로 눌렸습니다.
       까닭은 AI 종합평가 카드가 히어로 안의 **136px 짜리 좁은 칸**이기 때문입니다.
       본문(733px)을 기준으로 질의를 걸어 둬서 그 좁음을 못 봤습니다.
    → 카드를 **스스로 재는 칸**으로 만들고(container), 아바타는 **폭에 맞춰**
      줄어들게 둡니다. 비율(190:284)은 가장 넓은 그림에서 나온 값입니다. */
.cv3home-air { container-type: inline-size; container-name: cvava; }
/*  🔴 「2배(284px)」를 맞추려면 **아바타 폭 190px** 이 필요합니다.
    쌓인 상태에서 칸의 80% 만 쓰게 해 두어 158×0.8=126px → 189px(1.33배)에
    그쳤습니다(실측). 쌓였으면 **칸을 다 씁니다** — 옆에 아무것도 없으니까요. */
.cv3ava-f { width: min(190px, 100%); aspect-ratio: 190 / 284; height: auto;
  flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; }
/*  ── 눌러서 설정으로 (2026-09-11) ─────────────────────────────────────
    ⚠ 그림 위에 **투명 단추 한 장**을 덮습니다. 그림을 단추로 만들면 나중에
      그 안에 무엇을 넣을 때 «단추 안의 단추» 사고가 납니다.
    ⚠ 키보드로 쓰시는 분에게는 **초점 테가 유일한 위치 표시**입니다 —
      이 화면이 테두리를 안 써도 이것만은 남깁니다(2026-09-05 지시의 예외). */
.cv3ava-f { position: relative; }
.cv3ava-hit { position: absolute; inset: 0; border: 0; background: transparent;
  padding: 0; cursor: pointer; border-radius: 14px; }
.cv3ava-hit:focus-visible { outline: 3px solid var(--hx-deepstone); outline-offset: 2px; }
/*  누를 수 있다는 것을 **손가락 올렸을 때** 살짝 알립니다(움직임 최소). */
.cv3ava-f:hover .cv3ava-img { filter: drop-shadow(0 4px 8px rgba(40,43,43,.28)); }
/*  아래 글자 단추 — 그림이 눌린다는 걸 모르는 분을 위한 **보이는 길**입니다. */
.cv3ava-set { font-size: 11px; align-self: flex-start; }
@container cvava (max-width: 330px) { .cv3ava-set { align-self: center; } }
/*  ⚠ 좁으면 **위아래로 쌓습니다.** 나란히 두면 말풍선이 눌려 정작 읽어야 할
    글이 안 보입니다. 아바타는 «곁들이는 것», 말은 «읽어야 하는 것» 입니다. */
@container cvava (max-width: 330px) {
  .cv3ava { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cv3ava-f { width: min(190px, 100%); }
  .cv3ava-side { width: 100%; }
  /*  쌓이면 꼬리는 **위쪽**을 가리켜야 합니다. */
  .cv3ava-bub::before { left: 24px; top: -7px;
    border: 7px solid transparent; border-bottom-color: #FFFFFF; border-top: 0; }
}
/*  ⚠ 그림 아바타 — **세로 기준**으로 맞춥니다. 가로로 맞추면 사람이 늘어납니다. */
/*  🔴 `height:100%` 로 두었더니 칸 높이가 `auto` 가 된 순간 **그림이 제 원래
    높이(520px)로 튀었습니다**(실측 88×520). 칸이 비율을 잡고 그림은 그 안에
    들어가야 합니다. */
.cv3ava-img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block; object-fit: contain;
  /*  바닥 그림자 대신 **아주 옅은 접지 그림자**만. 그림 자체가 이미 3D 라
      여기서 또 그림자를 세게 주면 두 번 떠 보입니다. */
  filter: drop-shadow(0 3px 5px rgba(40, 43, 43, .18)); }
.cv3ava-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.cv3ava-shadow { fill: rgba(40, 43, 43, .13); }
.cv3ava-leg { fill: none; stroke: #E8C4A6; stroke-width: 15; stroke-linecap: round; }
.cv3ava-arm { fill: none; stroke: #7B8E9A; stroke-width: 13; stroke-linecap: round; }
/*  안경 — 이 얼굴의 표식. 굵고 둥글게. */
.cv3ava-glass circle { fill: rgba(255,255,255,.34); stroke: #2B2B2E; stroke-width: 3.4; }
.cv3ava-eyes circle { fill: #2B2B2E; }
.cv3ava-brow { fill: none; stroke: #5B3826; stroke-width: 3.6; stroke-linecap: round; }
.cv3ava-mouth { fill: none; stroke: #7A3F34; stroke-width: 3.4; stroke-linecap: round; }
.cv3ava-cheek { fill: rgba(226, 130, 110, .30); }
.cv3ava-strap { fill: none; stroke: #96592C; stroke-width: 5; stroke-linecap: round; }
.cv3ava-bagflap { fill: none; stroke: rgba(60, 34, 14, .45); stroke-width: 3; stroke-linecap: round; }
/*  상태 — **가방 테두리**. 굵게 둘러 멀리서도 보이게. */
.cv3ava-bag { stroke: #9AA0A6; stroke-width: 3.5; }
.cv3ava.is-ok   .cv3ava-bag { stroke: #2F7D57; }
.cv3ava.is-warn .cv3ava-bag { stroke: #C08A2E; }
.cv3ava.is-crit .cv3ava-bag { stroke: #B4443A; }

.cv3ava-t { display: flex; flex-direction: column; line-height: 1.25; }
.cv3ava-t b { font-size: 13px; font-weight: 800; color: var(--hx-txt); }
.cv3ava-t span { font-size: 11px; color: var(--hx-mut2); font-weight: 700; }
.cv3ava-b { margin-left: auto; font-size: 11px; flex: 0 0 auto; }
.cv3ava-w { flex: 1 1 100%; margin: 2px 0 0; font-size: 11px; color: var(--hx-mut); }

/*  숨 쉬는 결 — 살아 있다는 표시. **정보를 나르지 않습니다.** */
@keyframes cv3avaBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.4px) scale(1.006); } }
.cv3ava-svg { animation: cv3avaBreathe 4.2s ease-in-out infinite; transform-origin: 60px 238px; }
/*  ⚠ 그림 아바타에는 **입 움직임을 안 씁니다.** 사진 같은 그림의 입을 CSS 로
    늘리면 얼굴이 일그러집니다 — 흉내가 티 나는 자리입니다.
    말하는 동안은 **아주 작게 들썩이는 것**으로만 알립니다. */
@keyframes cv3avaImgBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.cv3ava-img { animation: cv3avaImgBreathe 4.2s ease-in-out infinite; }
@keyframes cv3avaImgTalk { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2.5px) scale(1.012); } }
.cv3ava.is-speaking .cv3ava-img { animation: cv3avaImgTalk .5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes cv3avaBlink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.cv3ava-eyes { transform-origin: 60px 73px; animation: cv3avaBlink 5.5s ease-in-out infinite; }
/*  ⚠ 말할 때 입 — **연출입니다.** `speechSynthesis` 가 소리를 안 내줘서 실제
    발음과 못 맞춥니다. 맞춘 척하지 않으려고 «벌어졌다 닫힌다» 정도로만 둡니다. */
@keyframes cv3avaTalk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.9); } }
.cv3ava.is-speaking .cv3ava-mouth { transform-origin: 60px 92px; animation: cv3avaTalk .28s ease-in-out infinite; }

/*  ⚠ 움직임을 줄이신 분 — 숨·깜빡임·입 모두 멈춥니다. */
@media (prefers-reduced-motion: reduce) {
  .cv3ava-svg, .cv3ava-eyes, .cv3ava.is-speaking .cv3ava-mouth,
  .cv3ava-img, .cv3ava.is-speaking .cv3ava-img { animation: none; }
}

/* ══ 아바타 말풍선 (2026-09-11 · 대표님 「왼쪽팔을 올리면 말풍선이 붙고
   그 말풍선에 설명들을 띄웁니다」) ═══════════════════════════════════════
   ⚠ 꼬리를 **든 손 쪽**(왼쪽 아래)에 답니다 — 붙어 있어야 «이 아이가 하는
     말» 로 읽힙니다. 떨어져 있으면 그냥 글상자입니다.
   ⚠ 이 화면은 **테두리를 안 씁니다**(2026-09-05 지시) — 면과 그림자로 세웁니다.
   ⚠ 소리를 못 듣는 분을 위해 **말할 때도 글이 함께** 뜹니다. */
/*  ⚠ 말풍선에 **바닥 폭**을 줍니다. 없으면 아바타가 커질 때 글이 한 글자씩
    세로로 늘어집니다 — 이 파일이 다른 칸에서 이미 겪은 일입니다. */
.cv3ava-bub {
  position: relative; min-width: 0;
  background: #FFFFFF; border-radius: 14px; padding: 9px 11px;
  box-shadow: 0 1px 2px rgba(20,34,64,.16), 0 6px 14px -8px rgba(20,34,64,.30);
}
/*  꼬리 — 왼쪽(아바타 쪽)을 가리킵니다. */
.cv3ava-bub::before {
  content: ''; position: absolute; left: -7px; top: 20px;
  border: 7px solid transparent; border-right-color: #FFFFFF; border-left: 0;
}
.cv3ava-bub p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--hx-txt);
  word-break: keep-all; }
.cv3ava-bub span { display: block; margin-top: 4px; font-size: 11px; color: var(--hx-mut2); }
/*  ⚠ 길면 **안에서** 스크롤합니다. 카드가 늘어나 아래 것을 밀어내지 않게. */
.cv3ava-bub { max-height: 132px; overflow-y: auto; }
/*  만드는 중 — 점 세 개. 값이 아직 없다는 표시입니다. */
.cv3ava-bub.is-busy p { color: var(--hx-mut); }
.cv3ava-bub.is-busy::after {
  content: '···'; position: absolute; right: 10px; bottom: 4px;
  color: var(--hx-mut2); letter-spacing: 2px;
  animation: cv3bubDots 1.2s steps(3) infinite;
}
@keyframes cv3bubDots { 0% { opacity: .25 } 50% { opacity: 1 } 100% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .cv3ava-bub.is-busy::after { animation: none; } }
/*  말풍선이 있으면 아바타 줄을 위로 정렬합니다 — 긴 글에 아이가 가운데 뜨지 않게. */


/*  아바타 계절 고르기 — 단추 다섯 개를 한 줄로. */
.cv3home-seasons { flex-wrap: wrap; gap: 6px; }
.cv3home-seasons .cv3home-btn { font-size: 11px; }

/* ══ 아바타 설정 패널 — **그 자리에서** (2026-09-11 · 대표님
   「모든 설정들은 직관적인 것을 우선 순위로 합니다」) ═══════════════════
   ⚠ 설정 화면으로 보내지 않습니다. 바꿀 것(아바타)을 **보면서** 바꿉니다.
   ⚠ 이 화면은 테두리를 안 씁니다 — 면과 그림자로 세웁니다(2026-09-05 지시). */
/*  🔴 카드 안에 붙였더니 208px 칸을 더 쪼개 단추가 여러 줄로 접혔습니다.
    → **덮개 팝업**으로 바꿉니다(대표님 「팝업으로 띄웁니다」). */
.cv3ava-wrap { position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.cv3ava-veil { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(20, 26, 34, .42); }
.cv3ava-panel { position: relative; z-index: 1;
  background: #FFFFFF; border-radius: 18px; padding: 14px 16px 16px;
  width: min(360px, 100%); max-height: 84vh; overflow-y: auto;
  box-shadow: 0 2px 6px rgba(20,34,64,.26), 0 24px 48px -18px rgba(20,34,64,.46); }
.cv3ava-pt { display: flex; align-items: center; margin: 0 0 10px;
  font-size: 13px; font-weight: 800; color: var(--hx-txt); letter-spacing: -.01em; }
.cv3ava-x { margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; color: var(--hx-mut); padding: 2px 4px; border-radius: 10px; }
.cv3ava-x:focus-visible { outline: 3px solid var(--hx-deepstone); outline-offset: 2px; }
.cv3ava-pk { margin: 12px 0 5px; font-size: 11px; font-weight: 800; color: var(--hx-mut2);
  letter-spacing: .04em; }
.cv3ava-pr { display: flex; flex-wrap: wrap; gap: 6px; }
/*  팝업은 넓으니 단추도 **손가락이 닿는 크기**로 키웁니다(44px 권장에 가깝게). */
.cv3ava-pr .cv3home-btn { font-size: 12px; padding: 7px 12px; }
.cv3ava-ph { margin: 12px 0 0; font-size: 11px; color: var(--hx-mut); line-height: 1.6;
  word-break: keep-all; }

/*  늘 있는 설명 말풍선 — AI 답(is-ai)보다 **조용하게**. 둘을 같은 세기로 두면
    어느 것이 «AI 가 한 말» 인지 구별이 안 됩니다. */
.cv3ava-bub.is-brief { background: #F7F7F4;
  box-shadow: 0 1px 2px rgba(20,34,64,.10), 0 4px 10px -8px rgba(20,34,64,.22); }
.cv3ava-bub.is-brief::before { border-right-color: #F7F7F4; }
@container cvava (max-width: 330px) {
  .cv3ava-bub.is-brief::before { border-right-color: transparent; border-bottom-color: #F7F7F4; }
}

/* ══ 말풍선을 **손 쪽으로** (2026-09-11 · 대표님 「말풍선은 손이 있는 쪽으로
   띄웁니다」) ═══════════════════════════════════════════════════════════
   ⚠ 손 방향은 그림마다 다릅니다 — `AVA_HAND` 에 **재서** 적어 뒀습니다.
     여기서는 그 표를 받아 자리만 바꿉니다. */
.cv3ava.hand-left { grid-template-columns: minmax(0, 1fr) 190px; }
.cv3ava.hand-left .cv3ava-f { order: 2; }
.cv3ava.hand-left .cv3ava-side { order: 1; }
/*  꼬리도 함께 뒤집습니다 — 안 뒤집으면 허공을 가리킵니다. */
.cv3ava.hand-left .cv3ava-bub::before {
  left: auto; right: -7px; border-right-color: transparent;
  border-left-color: #FFFFFF; border-right: 0; border-left-width: 7px; }
.cv3ava.hand-left .cv3ava-bub.is-brief::before { border-left-color: #F7F7F4; }
/*  🔴 처음엔 「쌓이면 손 방향은 뜻이 없다」고 적었는데 **틀렸습니다.**
    이 카드는 폭이 208px 라 **늘 쌓입니다** — 그러면 손 방향 규칙이 통째로
    죽습니다. 대표님 말씀(「말풍선은 손이 있는 쪽으로」)이 실현될 자리가
    없어지는 것입니다.
    → 쌓였을 때는 **꼬리를 든 손 아래**에 둡니다. 그게 «이 손이 하는 말» 입니다. */
@container cvava (max-width: 330px) {
  .cv3ava.hand-left, .cv3ava.hand-right { grid-template-columns: minmax(0, 1fr); }
  .cv3ava.hand-left .cv3ava-f, .cv3ava.hand-right .cv3ava-f { order: 1; }
  .cv3ava.hand-left .cv3ava-side, .cv3ava.hand-right .cv3ava-side { order: 2; }
  /*  꼬리는 위를 가리키고, **좌우 자리는 든 손을 따릅니다.** */
  .cv3ava.hand-left .cv3ava-bub::before,
  .cv3ava.hand-right .cv3ava-bub::before {
    right: auto; border-left-color: transparent; border-right-color: transparent;
    border-bottom-color: #FFFFFF; border-left-width: 7px; border-right-width: 7px;
    border-top: 0; border-bottom-width: 7px; }
  .cv3ava.hand-left  .cv3ava-bub::before { left: 22%; }
  .cv3ava.hand-right .cv3ava-bub::before { left: 74%; }
  .cv3ava.hand-left .cv3ava-bub.is-brief::before,
  .cv3ava.hand-right .cv3ava-bub.is-brief::before { border-bottom-color: #F7F7F4; }
}

/* ══ 말풍선 타이포그래피 (2026-09-11 · 대표님 「텍스트는 타이포그래피를
   사용합니다」) ═════════════════════════════════════════════════════════
   ⚠ 다 같은 크기로 쏟으면 **어느 것이 결론인지** 안 보입니다.
     머리 문장(판정) — 굵고 크게 · 받치는 문장 — 작고 조용하게.
   ⚠ 한글은 **낱말 단위로 끊습니다**(`keep-all`). 안 그러면 「기 / 준선」이 됩니다.
   ⚠ 숫자는 **자리를 맞춥니다**(`tabular-nums`) — 값이 바뀔 때 글이 덜 흔들립니다. */
.cv3ava-bub p { margin: 0; word-break: keep-all; font-variant-numeric: tabular-nums; }
/*  🔴 처음엔 `.cv3ava-lead` 로만 적었는데 **안 먹었습니다**(실측 11.5px/800).
    위에 있던 `.cv3ava-bub p` 가 «클래스+요소» 라 **더 구체적**이어서 이깁니다.
    뒤에 썼다고 이기는 것이 아닙니다 — 구체성이 먼저입니다.
    → 말풍선 안으로 **범위를 맞춰** 적습니다. */
.cv3ava-bub .cv3ava-lead { font-size: 12px; font-weight: 800; line-height: 1.55;
  letter-spacing: -.01em; color: var(--hx-txt); text-wrap: balance; }
.cv3ava-bub .cv3ava-sub { margin-top: 4px; font-size: 11px; font-weight: 600;
  line-height: 1.7; color: var(--hx-txt2, #3B4650); text-wrap: pretty; }
/*  받치는 문장이 여럿이면 **사이를 띄웁니다** — 붙이면 한 덩어리로 읽힙니다. */
.cv3ava-bub .cv3ava-sub + .cv3ava-sub { margin-top: 3px; }

/* ══ 사진이 없으면 그 자리를 **아바타·데이터**에 넘깁니다 (2026-09-12 · 대표님
   「센서를 보여주는 것이 의미가 약하고… 차라리 아바타와 중요한 데이터를
   더 제공하는 것이 낫지 않겠나」) ═══════════════════════════════════════
   ⚠ 사진 기능을 없앤 것이 아닙니다 — **올리시면 예전 두 칸으로 돌아옵니다.**
   ⚠ 「＋ 미디어」 단추는 남깁니다. 길을 없애면 다시 못 찾습니다(R0-6). */
.cv3home-hero.is-nomedia .cv3home-hero-pane,
.cv3home-hero.is-nomedia .cv3home-hero-act { display: none; }
/*  세 칸(재실·낙상·스트레스)은 **버리지 않고** AI 칸 아래로 내려 보냅니다 —
    그건 «중요한 데이터» 이지 장식이 아닙니다. */
.cv3home-hero.is-nomedia .cv3home-hero-in { flex-direction: column; }
.cv3home-hero.is-nomedia .cv3home-hero-ai { flex: 1 1 auto; min-width: 0; width: 100%;
  order: 1; margin: 10px 12px 0; }
.cv3home-hero.is-nomedia .cv3home-tiles { order: 2; width: auto; margin: 8px 12px 4px; }
.cv3home-hero.is-nomedia .cv3home-media { order: 3; margin: 0 12px 10px; opacity: .7; }
.cv3home-hero.is-nomedia .cv3home-media:hover { opacity: 1; }

/*  영상 창의 「기능 설정」 줄 (2026-09-12 · 대표님 「기능 설정 버튼이 사라졌습니다」)
    ⚠ 겹쳐 보기 단추와 **같은 결**로 둡니다 — 이 창에서 갑자기 다른 모양이
      나오면 «다른 기능» 처럼 보입니다. */
.cv3home-dock-fn { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.cv3home-dock-fn button { font-size: 11px; padding: 5px 10px; border-radius: 10px;
  background: var(--hx-fill, #fff); color: var(--hx-txt); cursor: pointer; border: 0;
  box-shadow: 0 1px 2px rgba(20,34,64,.14), 0 3px 8px -5px rgba(20,34,64,.26); }
.cv3home-dock-fn button:hover { box-shadow: 0 2px 4px rgba(20,34,64,.18), 0 6px 12px -6px rgba(20,34,64,.32); }
.cv3home-dock-fn button:focus-visible { outline: 3px solid var(--hx-deepstone); outline-offset: 2px; }
.cv3home-dock-fn button.is-off { color: #8A2B2B; }

/* ══ 빌려온 카메라 패널의 **세부 설정(조작줄)** 이 안 보이던 것 (2026-09-12 ·
   대표님 「첨부의 세부 설정 버튼이 없어졌어요」) ═══════════════════════════
   🔴 재 보니 단추 **35개가 다 있는데 하나도 안 보였습니다**(보이는 것 0).
      까닭: 요양원 패널 `#cv3Cam` 이 그쪽 클래스 **`cv3-sec-off`(접힘)** 를
      달고 따라와서 **`display:none`** 이었습니다. 요양원에서 그 칸을 접어 두면
      가정용 창에서도 통째로 사라지는 것입니다 — 두 화면이 한 상태를 공유한
      탓입니다.
   ⚠ 요양원 쪽 규칙은 **안 건드립니다.** 이 창 안에서만 되살립니다.
   ⚠ 그리고 슬롯이 `max-height 156px · overflow:hidden` 이라 나와도 **잘렸습니다.**
      조작줄은 영상 아래에 있으므로 **스스로 스크롤**되게 둡니다. */
#cv3HomeCamSlot #cv3Cam { display: block !important; }
#cv3HomeCamSlot {
  overflow: auto;
  min-height: 200px;
  max-height: min(60vh, 560px);
}
/*  ⚠ 조작줄 단추가 어두운 바탕에 묻히지 않게 — 요양원 패널은 어두운 판에
    쓰이던 것이라 그대로 두면 이 창에서 안 읽힙니다. */
#cv3HomeCamSlot .cv3-camfit, #cv3HomeCamSlot .cv3-cam-row { flex-wrap: wrap; gap: 6px; }

/*  ── 환경 신호가 AI 돌봄 탭에 섞일 때 ── 사람 신호와 **출처가 다릅니다.**
    같은 옷을 입히면 「호흡 흔들림」과 「방이 건조함」이 한 덩어리로 읽힙니다.
    왼쪽에 가는 띠와 꼬리표로 «집 안팎 공기» 임을 밝힙니다. */
.cv3home-diag.is-env { border-left: 3px solid var(--hx-lake, #4C75B8); }
.cv3home-diag.is-env .cv3home-diag-w { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cv3home-diag.is-env .cv3home-diag-w i {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 5px; border-radius: 5px; background: #E7EEF9; color: #2F4E80;
}

/*  ── 상태 칩 ── 「없다 · 못 한다」를 **문단으로 쓰지 않습니다.**
    한 줄 칩으로 내고 까닭은 툴팁에 둡니다
    (2026-09-12 · 대표님 「자꾸 텍스트로 그냥 쭉 적지 마세요」). */
.cv3env-chip {
  margin: 7px 0 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px; background: var(--hx-fill2);
  font-size: 11px; font-weight: 800; color: var(--hx-txt2); cursor: help;
}
.cv3env-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-mut2); }
.cv3env-chip span { font-weight: 700; color: var(--hx-mut2); }
.cv3env-chip.is-na i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hx-mut2); }

/*  ── 이 댁 기준 ── 숫자 타일. 문장이 아니라 **문턱 숫자**가 알맹이입니다. */
.cv3env-lim { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 6px; }
.cv3env-lim span {
  display: flex; flex-direction: column; gap: 0; padding: 6px 7px; border-radius: 10px;
  background: var(--hx-fill2); font-size: 11px; color: var(--hx-mut2); cursor: help;
}
.cv3env-lim b { font-size: 15px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cv3env-ill-h em { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px;
  border-radius: 999px; background: #E7EEF9; color: #2F4E80; cursor: help; }
.cv3env-ill-h em.q { background: var(--hx-fill2); color: var(--hx-mut2); }
.cv3env-ai-h button { margin-left: auto; }

/*  ── 알림 칩 ── 문단을 대신합니다. 화면엔 낱말 서넛, 까닭은 툴팁에. */
.cv3note {
  margin: 7px 0 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--hx-fill2); border: 1px solid transparent;
  font-size: 11px; font-weight: 800; color: var(--hx-txt2);
  cursor: help; max-width: 100%;
}
.cv3note:hover, .cv3note:focus-visible { border-color: var(--hx-line); outline: none; }
.cv3note i {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--hx-mut2); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 800; line-height: 13px; text-align: center;
}
.cv3note i::before { content: 'i'; }
.cv3note.is-warn { background: #FDF0E6; color: #9C4A16; }
.cv3note.is-warn i { background: #9C4A16; }
.cv3note.is-ok { background: #EAF3EE; color: #2F6B4B; }
.cv3note.is-ok i { background: #2F6B4B; }
.cv3note.is-na i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hx-mut2); color: var(--hx-mut2); }

/*  ── 지우기 확인 ── 「무엇이 남고 무엇이 사라지나」를 문장이 아니라 **칸**으로.
    되돌릴 수 없는 일이라 한눈에 보여야 합니다. */
.cv3home-delhd { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--hx-txt); }
.cv3home-delg { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.cv3home-delg span {
  display: flex; flex-direction: column; gap: 6px; padding: 7px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.cv3home-delg b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cv3home-delg .is-keep { background: #EAF3EE; color: #2F6B4B; }
.cv3home-delg .is-lose { background: #FBE9E4; color: #A4301A; }
/*  감시 밖 — 이름 옆에 상태 꼬리표를 답니다(문장으로 풀지 않습니다). */
.cv3home-cov-w em {
  font-style: normal; margin-left: 6px; font-size: 11px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; background: #FDF0E6; color: #9C4A16;
}
.cv3home-aimflip { margin: 7px 0 0; }

/*  센서 표의 «까닭» 칸 — 한 낱말만 보이고 전문은 툴팁. 표가 문단이 되지 않게. */
.cv3home-smon-w {
  font-size: 11px; color: var(--hx-mut2); cursor: help;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3home-smon-w:focus-visible { outline: 1px solid var(--hx-line); outline-offset: 1px; }

/*  판 번호 — 파일마다 한 칸. 숫자가 세로로 줄 맞아 한눈에 견줍니다. */
.cv3home-ver { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); margin: 0 0 2px; }
.cv3home-ver span {
  display: flex; flex-direction: column; gap: 0; padding: 6px 8px; border-radius: 10px;
  background: var(--hx-fill2); font-size: 11px; color: var(--hx-mut2);
}
.cv3home-ver b { font-size: 12px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.15; }

/*  ══ AI 돌봄 덮개 ══════════════════════════════════════════════════════════
    (2026-09-12 · 대표님 「팝업도 있고 다른 방법들이 있습니다」 ·
     「메인 화면은 고유의 화면입니다」 · 「균형을 유지해야 합니다」)
    메인 화면의 짜임을 **밀어내지 않습니다.** 위에 얹었다 걷습니다. */
.cv3home-sheet { position: absolute; inset: 0; z-index: 40; display: flex;
  align-items: center; justify-content: center; padding: 18px; }
.cv3home-sheet[hidden] { display: none !important; }
.cv3home-sheet-bd { position: absolute; inset: 0; background: rgba(24, 26, 26, .42);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 0; }
.cv3home-sheet-w {
  position: relative; z-index: 1;
  width: min(860px, 100%); max-height: 100%; overflow: auto;
  background: var(--hx-fill, #fff); border: 1px solid var(--hx-line);
  border-radius: 14px; padding: 14px 15px 16px;
  box-shadow: 0 18px 48px -18px rgba(24, 26, 26, .55), 0 2px 8px rgba(24, 26, 26, .12);
  overscroll-behavior: contain;
}
.cv3home-sheet-x {
  position: absolute; top: 9px; right: 10px; z-index: 2;
  width: 26px; height: 26px; border-radius: 10px; border: 1px solid var(--hx-line);
  background: var(--hx-fill2); color: var(--hx-txt);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.cv3home-sheet-x:hover { background: var(--hx-fill); }
/*  덮개 안에서는 카드가 창 폭을 쓰므로 바깥 1480 상한을 풀어 줍니다. */
.cv3home-sheet-w .cv3home-care { max-width: none; }

/*  ── 대비 바로잡음 (2026-09-12 실측) ──────────────────────────────────────
    ⚠ **테마를 켜 두고 재면 헛값이 나옵니다.** 점검 루프가 테마를 바꿔 놓아
      1.00:1 같은 값이 줄줄이 나왔습니다 — 밝은 테마로 되돌리고 다시 쟀습니다. */
/*  ① 「모두 확인」 — 머스터드 글자가 파란 띠 위에 있어 2.24:1 이었습니다. */
.cv3home-strip-h .cv3home-btn { color: #0F1830; background: rgba(255,255,255,.88); }  /* 4.96:1 */
/*  ② 「일·주·월 추세」 — 시안 3.95 · 머스터드 4.21 → 더 어둡게. */
.cv3home-sig.is-br  .cv3home-more { color: #07617F; }   /* 6.94:1 */
.cv3home-sig.is-mv  .cv3home-more { color: #7A5603; }   /* 6.65:1 */
/*  ③ 옅은 회색 보조글 — 연회색·크림 바탕에서 4.04~4.22 였습니다. */
.cv3home-diag-e, .cv3home-care-u, .cv3home-sc-w, .cv3home-care-w span,
.cv3home-risk.is-na b { color: #545C67; }                /* 5.78~6.04:1 */

/*  ══ 이 AI 가 하는 일 ══ 보는 것 → 따지는 것 → 내놓는 것.
    (2026-09-12 · 대표님 「AI가 어떻게 동작하고 있다는 것을 보여 주면 된다 ·
     근거도 제시하구요」) 글로 설명하지 않고 **칸과 화살표**로 보입니다. */
.cv3role {
  display: grid; grid-template-columns: 1fr 14px 1.15fr 14px 1fr;
  align-items: stretch; gap: 0; margin: 8px 0 0;
}
.cv3role-s {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  padding: 8px 9px; border-radius: 10px; background: var(--hx-fill2); min-width: 0;
}
.cv3role-s i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--hx-mut2); }
.cv3role-s b { font-size: 12px; font-weight: 800; color: var(--hx-txt); line-height: 1.25; }
.cv3role-s em {
  font-style: normal; margin-top: 2px; align-self: flex-start;
  font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: #E7EEF9; color: #2F4E80; font-variant-numeric: tabular-nums;
}
.cv3role-s.is-mid { background: #EDF2FA; }
/*  화살표 — 그림자가 아니라 **방향**입니다. 셋이 한 줄로 흐른다는 것을 보입니다. */
.cv3role-a { position: relative; }
.cv3role-a::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; margin: -4px 0 0 -3px;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid var(--hx-mut2);
}
@media (max-width: 560px) {
  .cv3role { grid-template-columns: 1fr; gap: 6px; }
  .cv3role-a { display: none; }
}
/*  근거 — **실제 숫자**입니다. 없으면 «아직 없습니다» 라고 적습니다. */
.cv3role-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.cv3role-ev-t { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--hx-mut2); margin-right: 2px; }
.cv3role-ev-c {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 8px; border-radius: 999px; background: var(--hx-fill2);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.cv3role-ev-c i { font-style: normal; color: var(--hx-mut2); font-weight: 700; }
.cv3role-ev-c b { font-weight: 800; color: var(--hx-txt); }
.cv3role-ev-c.is-na b { color: var(--hx-mut2); font-weight: 700; }

/*  ══ 설치 자리 도면 ══ (2026-09-12 · 대표님 「설치된 위치가 어디인지를 볼 수 있는
    것도 없구요」) 앞·뒤·안·밖을 가리키는 **그림표**입니다 — 실제 도면이 아닙니다. */
.cv3aimmap { position: relative; margin: 8px 0 2px; aspect-ratio: 100 / 110;
  max-height: 168px; width: 100%; }
.cv3aimmap svg { width: 100%; height: 100%; display: block; }
.cv3aimmap svg .yard { fill: rgba(76,117,184,.10); stroke: rgba(76,117,184,.28); stroke-width: .6; }
.cv3aimmap svg .house { fill: var(--hx-fill, #fff); stroke: var(--hx-line, rgba(0,0,0,.18)); stroke-width: 1; }
.cv3aimmap svg .door { fill: var(--hx-mut2, #93968C); }
.cv3aimmap-l { position: absolute; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--hx-mut2); pointer-events: none; }
.cv3aimmap-l.is-yard { left: 5%; top: 3%; }
.cv3aimmap-l.is-in { left: 15%; top: 32%; }
/*  센서 점 — 누르면 자리 설정. 움직이는 중이면 맥이 뜁니다. */
.cv3aimmap-d { position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px; cursor: pointer; }
.cv3aimmap-d i { width: 13px; height: 13px; border-radius: 50%;
  background: var(--hx-mut2); box-shadow: 0 0 0 2px var(--hx-fill, #fff); }
.cv3aimmap-d span { font-size: 11px; font-weight: 800; color: var(--hx-txt);
  background: var(--hx-fill, #fff); padding: 0 3px; border-radius: 4px; white-space: nowrap; }
.cv3aimmap-d.is-live i { background: #2F6B4B; animation: cv3aimPulse 1.4s ease-out infinite; }
.cv3aimmap-d.is-bad i { background: #9C4A16; animation: cv3aimPulse .9s ease-out infinite; }
.cv3aimmap-d.is-off i { background: transparent; box-shadow: inset 0 0 0 2px var(--hx-mut2), 0 0 0 2px var(--hx-fill,#fff); }
@keyframes cv3aimPulse { 0% { box-shadow: 0 0 0 2px var(--hx-fill,#fff), 0 0 0 2px currentColor; }
  70% { box-shadow: 0 0 0 2px var(--hx-fill,#fff), 0 0 0 9px rgba(47,107,75,0); }
  100% { box-shadow: 0 0 0 2px var(--hx-fill,#fff), 0 0 0 2px rgba(47,107,75,0); } }
@media (prefers-reduced-motion: reduce) { .cv3aimmap-d i { animation: none !important; } }
.cv3aimmap-n { margin: 0 0 4px; font-size: 11px; color: var(--hx-mut2); }
.cv3aimmap-n b { color: var(--hx-txt2); }

/*  ══ 방향·세기 ══ 왼쪽이 멀리, 오른쪽이 가까이. 아래는 최근 3분. */
.cv3aimviz { margin-top: 6px; }
.cv3aimviz-ax { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.cv3aimviz-e { font-size: 11px; font-weight: 800; color: var(--hx-mut2); }
.cv3aimviz-t { position: relative; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(40,43,43,.08), rgba(47,107,75,.28)); }
.cv3aimviz-t i { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--hx-mut2); box-shadow: 0 0 0 2px var(--hx-fill,#fff);
  transition: left .35s cubic-bezier(.22,.61,.36,1); }
.cv3aimviz-ax.is-on .cv3aimviz-t i { background: var(--hx-txt); }
.cv3aimviz-d { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cv3aimviz-d b { font-size: 12px; font-weight: 800; }
.cv3aimviz-d b.is-ap { color: #2F6B4B; }
.cv3aimviz-d b.is-re { color: #4C75B8; }
.cv3aimviz-d b.is-st { color: #9C4A16; }
.cv3aimviz-d span { font-size: 11px; color: var(--hx-mut2); }
.cv3aimviz-q { margin-left: auto; }
.cv3aimviz-sp { margin-top: 5px; }
.cv3aimviz-sp svg { width: 100%; height: 34px; display: block; }
.cv3aimviz-sp rect { fill: rgba(40,43,43,.16); }
.cv3aimviz-sp rect.is-ap { fill: #2F6B4B; }
.cv3aimviz-sp rect.is-re { fill: #4C75B8; }
.cv3aimviz-sp rect.is-st { fill: #9C4A16; }
.cv3aimviz-sp rect.is-mv { fill: rgba(40,43,43,.45); }
.cv3aimviz-sp p { display: flex; justify-content: space-between; margin: 1px 0 0;
  font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3aimviz-na { margin: 5px 0 0; font-size: 11px; color: var(--hx-mut2); }

/*  ══ 레이더 설정 ══ 읽기만 합니다 — 이 화면은 레이더에 명령을 보내지 않습니다. */
.cv3aim-cfgb { margin-top: 6px; width: 100%; font: inherit; font-size: 11px; font-weight: 800;
  padding: 5px 8px; border-radius: 10px; border: 1px solid var(--hx-line);
  background: none; color: var(--hx-mut2); cursor: pointer; }
.cv3aim-cfgb:hover { background: var(--hx-fill2); color: var(--hx-txt); }
.cv3aimcfg { margin-top: 6px; padding: 8px 9px; border-radius: 10px; background: var(--hx-fill, #fff);
  border: 1px solid var(--hx-line); }
.cv3aimcfg-h { margin: 0 0 6px; display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); }
.cv3aimcfg-h span { font-weight: 700; }
.cv3aimcfg-h em { margin-left: auto; font-style: normal; width: 14px; height: 14px; line-height: 14px;
  text-align: center; border-radius: 50%; background: var(--hx-fill2); color: var(--hx-txt2);
  font-size: 11px; font-weight: 800; cursor: help; }
.cv3aimcfg-thr-t { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--hx-mut2); }
.cv3aimcfg-thr-t b { font-size: 20px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; }
.cv3aimcfg-thr-t span { margin-left: auto; font-variant-numeric: tabular-nums; }
.cv3aimcfg-sc { position: relative; height: 7px; border-radius: 4px; background: rgba(40,43,43,.10); overflow: visible; }
.cv3aimcfg-raw { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--hx-lake, #4C75B8); }
.cv3aimcfg-thrm { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #9C4A16; border-radius: 1px; }
.cv3aimcfg-sc-l { display: flex; justify-content: space-between; margin: 2px 0 0; font-size: 11px;
  color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3aimcfg-g { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); margin: 7px 0 0; }
.cv3aimcfg-g span { display: flex; flex-direction: column; padding: 5px 7px; border-radius: 10px;
  background: var(--hx-fill2); font-size: 11px; color: var(--hx-mut2); cursor: help; }
.cv3aimcfg-g b { font-size: 13px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; line-height: 1.15; }
.cv3aimcfg-n { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--hx-mut2); }
.cv3aimcfg-n b { color: var(--hx-txt2); }

/*  ══ 문 앞 안전 ══ (2026-09-12 · 대표님 「홀로 사는 여성이 모르는 남자가 집 앞에
    배회하고 있다면 위험한 상황입니다」) 데이터가 아니라 **경고**입니다 —
    카드 맨 위, 눈에 먼저 들어오게. */
.cv3aimsafe { margin: 6px 0 8px; padding: 10px 11px; border-radius: 14px;
  border-left: 4px solid #9C4A16; background: #FDF0E6; }
.cv3aimsafe.is-crit { border-left-color: #A4301A; background: #FBE9E4; }
.cv3aimsafe-h { margin: 0 0 2px; display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); }
.cv3aimsafe-h b { font-size: 12px; color: var(--hx-txt); }
.cv3aimsafe-h span { margin-left: auto; padding: 1px 8px; border-radius: 999px;
  background: #9C4A16; color: #fff; font-size: 11px; }
.cv3aimsafe.is-crit .cv3aimsafe-h span { background: #A4301A; }
.cv3aimsafe-w { margin: 0; font-size: 15px; font-weight: 800; color: #9C4A16; line-height: 1.25; }
.cv3aimsafe.is-crit .cv3aimsafe-w { color: #A4301A; }
.cv3aimsafe-y { margin: 2px 0 0; font-size: 11px; color: var(--hx-txt2);
  font-variant-numeric: tabular-nums; }
.cv3aimsafe-b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
/*  ── 가설 ── 단정하지 않고 늘어놓습니다. 맨 위가 지금 값에서 가장 그럴듯한 것. */
.cv3hypo { margin-top: 8px; border-top: 1px solid rgba(40,43,43,.14); padding-top: 7px; }
.cv3hypo-h { margin: 0 0 5px; display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); }
.cv3hypo-h em { margin-left: auto; font-style: normal; width: 14px; height: 14px; line-height: 14px;
  text-align: center; border-radius: 50%; background: rgba(40,43,43,.12); color: var(--hx-txt2);
  font-size: 11px; font-weight: 800; cursor: help; }
.cv3hypo-r { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 2px 8px;
  align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(40,43,43,.10); }
.cv3hypo-r:last-of-type { border-bottom: 0; }
.cv3hypo-r b { font-size: 12px; font-weight: 800; color: var(--hx-txt2); }
.cv3hypo-r.is-top b { color: var(--hx-txt); }
.cv3hypo-r.is-top { background: rgba(255,255,255,.55); border-radius: 10px; padding: 6px 8px; }
.cv3hypo-f { font-size: 11px; color: var(--hx-txt2); }
.cv3hypo-a { grid-column: 2; font-size: 11px; color: var(--hx-mut2); }
.cv3hypo-n { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--hx-mut2); }
.cv3hypo-n b { color: var(--hx-txt2); }
.cv3aimsafe-n { margin: 5px 0 0; font-size: 11px; color: var(--hx-mut2); }

/*  🔴 지도 점이 도면 밖으로 튀어나갔습니다(실측: 도면 위 0~168px 인데 점은 270px).
    까닭 — 카드가 `.cv3home-sig button:not(.cv3home-sig-hit){position:relative}` 로
    **모든 단추를 세워 둡니다**(카드를 덮는 투명 단추 위로 올리려고). 그 선택자가
    (0,2,1) 이라 제 `.cv3aimmap-d`(0,1,0)를 이깁니다.
    ⇒ 급을 맞춰 다시 앉힙니다. 투명 단추보다 위에 있어야 하므로 z-index 도 같이.
    ⚠ 이런 «모든 단추» 규칙이 있는 카드 안에서 절대 배치를 쓰면 늘 이 덫에 걸립니다. */
.cv3aimmap button.cv3aimmap-d { position: absolute; z-index: 2; }

/*  ══ 센서 탭 ══ (2026-09-12 · 대표님 「카드 상단에 센서 1, 2, 3으로 구분하고
    명칭을 입력할 수 있게」) 타일을 쌓으면 세 대만 돼도 카드가 길어집니다. */
.cv3aimtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.cv3aimtab { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hx-line);
  background: var(--hx-fill2); color: var(--hx-txt2); }
.cv3aimtab i { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-mut2); flex: none; }
.cv3aimtab b { font-size: 11px; font-weight: 800; }
.cv3aimtab span { font-size: 11px; font-weight: 700; }
.cv3aimtab span.q { color: var(--hx-mut2); font-weight: 600; }
.cv3aimtab.is-on { background: var(--hx-txt); border-color: var(--hx-txt); color: #fff; }
.cv3aimtab.is-on i { background: #fff; }
.cv3aimtab.is-on span.q { color: rgba(255,255,255,.68); }
.cv3aimtab.is-bad i { background: #9C4A16; }
.cv3aimtab.is-bad.is-on { background: #9C4A16; border-color: #9C4A16; }
.cv3aimtab.is-bad.is-on i { background: #fff; }
.cv3aimtab.is-off { opacity: .65; }

/*  ── 고른 센서 상세 ── 이름 칸이 맨 위. 찾아 들어가지 않고 그 자리에서 적습니다. */
.cv3aim-one { padding: 10px 11px; border-radius: 14px; background: var(--hx-fill2); }
.cv3aim-one.is-bad { background: linear-gradient(90deg, #9C4A16 0 3px, #FDF0E6 3px); }
.cv3aim-one.is-off { opacity: .72; }
.cv3aim-name { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.cv3aim-name label { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); white-space: nowrap; }
.cv3aim-name input { font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 10px;
  border: 1px solid var(--hx-line); background: var(--hx-fill, #fff); color: var(--hx-txt); min-width: 0; }
.cv3aim-name input:focus { outline: 2px solid var(--hx-lake, #4C75B8); outline-offset: -1px; }
.cv3aim-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 8px; }
.cv3aim-one-v { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cv3aim-one-v b { font-size: 20px; font-weight: 800; color: var(--hx-txt); cursor: help; }
.cv3aim-one.is-bad .cv3aim-one-v b { color: #9C4A16; }
.cv3aim-one-v span { font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }

/*  ── 방향 축 ── 왼쪽 끝이 센서(0m), 오른쪽이 3m. 다가오면 표가 센서 쪽으로. */
.cv3aimviz-ax { grid-template-columns: 12px auto 1fr auto; }
.cv3aimviz-s { width: 10px; height: 10px; border-radius: 3px; background: var(--hx-txt);
  box-shadow: 0 0 0 3px rgba(40,43,43,.10); }
.cv3aimviz-e.is-far { color: var(--hx-mut2); }
.cv3aimviz-t { background: linear-gradient(90deg, rgba(47,107,75,.30), rgba(40,43,43,.08)); }

/*  ── 시간대 ── 오늘(앞) vs 평소(뒤 옅은 막대). 평소 없던 시간은 붉게. */
.cv3aimhr { margin-top: 8px; border-top: 1px solid var(--hx-line2); padding-top: 7px; }
.cv3aimhr-h { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--hx-mut2); }
.cv3aimhr-h span { font-weight: 700; }
.cv3aimhr-h em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800;
  padding: 1px 7px; border-radius: 999px; background: #FBE9E4; color: #A4301A; }
.cv3aimhr-c { cursor: help; }
.cv3aimhr-c svg { width: 100%; height: 46px; display: block; }
.cv3aimhr-c rect.base { fill: rgba(40,43,43,.14); }
.cv3aimhr-c rect.today { fill: var(--hx-lake, #4C75B8); }
.cv3aimhr-c rect.today.is-now { fill: var(--hx-txt); }
.cv3aimhr-c rect.today.is-odd { fill: #A4301A; }
.cv3aimhr-c p { display: flex; justify-content: space-between; margin: 1px 0 0;
  font-size: 11px; color: var(--hx-mut2); font-variant-numeric: tabular-nums; }
.cv3aimhr-n { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--hx-mut2); }
.cv3aimhr-n b { color: var(--hx-txt2); }

/*  ══ 움직임 감지 팝업 ══ (2026-09-12 · 대표님 「간결하게 시각화하고 팝업이나
    툴팁을 통해 세부적으로」) 세부는 여기로 — 카드를 늘리지 않습니다. */
.cv3aimpop { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 18px; }
.cv3aimpop-bd { position: absolute; inset: 0; background: rgba(24,26,26,.42);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 0; }
.cv3aimpop-w { position: relative; z-index: 1; width: min(460px, 100%); max-height: 84vh;
  overflow: auto; background: var(--hx-fill, #fff); border: 1px solid var(--hx-line);
  border-radius: 14px; padding: 12px 13px 14px;
  box-shadow: 0 18px 48px -18px rgba(24,26,26,.55); overscroll-behavior: contain; }
.cv3aimpop-t { margin: 0 0 9px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3aimpop-t button { margin-left: auto; width: 24px; height: 24px; border-radius: 10px;
  border: 1px solid var(--hx-line); background: var(--hx-fill2); color: var(--hx-txt);
  font-size: 13px; line-height: 1; cursor: pointer; }
.cv3aimpop-l { margin: 10px 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  color: var(--hx-mut2); display: flex; align-items: baseline; gap: 6px; }
.cv3aimpop-l span { font-weight: 700; }
.cv3aimpop-w .cv3aimmap { max-height: 210px; }
/*  탭 줄의 아이콘 단추(도면 ⌂ · 설정 ⚙) */
.cv3aimtab.is-ic { padding: 6px 9px; font-size: 13px; line-height: 1; color: var(--hx-mut2); }
.cv3aimtab.is-ic:hover { color: var(--hx-txt); background: var(--hx-fill); }
/*  안전 한 줄 — 가설은 단추 안으로 접었습니다. */
.cv3aimsafe-b .cv3home-btn { font-size: 11px; }

/*  「이 댁 기준」을 한 줄 단추로 접었습니다 — 내용은 팝업. */
.cv3env-illb { margin-top: 8px; width: 100%; font: inherit; font-size: 11px; font-weight: 800;
  padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hx-line);
  background: none; color: var(--hx-mut2); cursor: pointer; text-align: left;
  font-variant-numeric: tabular-nums; }
.cv3env-illb:hover { background: var(--hx-fill2); color: var(--hx-txt); }
.cv3aimpop-w .cv3env-lim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv3aimpop-w .cv3home-btn { margin-top: 8px; }

/*  ── 마지막 조이기 (2026-09-12 · 대표님 「카드가 너무 확대가 됩니다」) ──
    실측: 움직임 1369 → 791 → 여기서 한 번 더. 눈금·띠의 높이를 줄이고
    지표 타일을 촘촘히 합니다. **정보를 빼지 않고 여백만** 줄입니다. */
.cv3aimhr-c svg { height: 36px; }
.cv3aimviz-sp svg { height: 26px; }
.cv3aim-tl svg { height: 18px; }
.cv3env-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; }
.cv3env-t { padding: 7px 8px; }
.cv3env-t-v b { font-size: 20px; }
.cv3env-acts { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.cv3env-a { padding: 7px 9px; }
.cv3env-sh { padding: 8px 9px; }
.cv3env-sh-v > b { font-size: 28px; }
.cv3aim-one { padding: 9px 10px; }
.cv3aimsafe { padding: 9px 10px; }
.cv3aimsafe-w { font-size: 15px; }
.cv3home-aimgate-l li { padding: 2px 0; }

/*  ══ 아바타는 **맨 왼쪽**, 말풍선은 **든 손 쪽** ══════════════════════════
    (2026-09-12 · 대표님 「아바타가 가장 좌측으로 이동해야 합니다. 그리고
     말풍선은 손쪽으로 붙어서 나오고 타이포그래픽으로 흐릅니다.」)
    🔴 앞서 `hand-left` 일 때 아바타를 **오른쪽으로** 보내고 있었습니다.
       표에 적힌 «왼손» 을 «화면 왼쪽» 으로 읽은 탓입니다 — 캐릭터의 왼손은
       마주 본 화면에서 오른쪽입니다. 실측으로 확인했습니다(말함−선 차이).
    ⇒ 팔이 화면 오른쪽 → 말풍선 오른쪽 → **아바타 맨 왼쪽.** */
.cv3ava, .cv3ava.hand-right, .cv3ava.hand-left {
  grid-template-columns: 190px minmax(0, 1fr);
  justify-items: stretch;
}
.cv3ava .cv3ava-f, .cv3ava.hand-right .cv3ava-f, .cv3ava.hand-left .cv3ava-f {
  order: 1; justify-self: start; margin-left: 0;
}
.cv3ava .cv3ava-side, .cv3ava.hand-right .cv3ava-side, .cv3ava.hand-left .cv3ava-side {
  order: 2;
}
/*  꼬리는 **왼쪽 모서리**에서 아바타의 든 손을 가리킵니다. */
.cv3ava.hand-right .cv3ava-bub::before,
.cv3ava.hand-left  .cv3ava-bub::before {
  left: -7px; right: auto;
  border-left: 0; border-right-width: 7px;
  border-right-color: #FFFFFF; border-left-color: transparent;
  top: 16px;
}
.cv3ava.hand-right .cv3ava-bub.is-brief::before,
.cv3ava.hand-left  .cv3ava-bub.is-brief::before { border-right-color: #F7F7F4; }

/*  ── 타이포그래피로 흐르게 ──
    첫 줄은 **크고 짧게**(무슨 일인가), 뒷줄은 작고 촘촘하게(까닭).
    ⚠ `.cv3ava-bub p` (0,1,1) 가 `.cv3ava-lead` (0,1,0) 를 이깁니다 —
      오늘 한 번 여기에 걸렸습니다. 그래서 급을 맞춰 적습니다. */
.cv3ava .cv3ava-bub p.cv3ava-lead {
  font-size: clamp(13px, 1.15cqw + 11px, 16px);
  font-weight: 800; line-height: 1.35; letter-spacing: -.01em;
  color: var(--hx-txt); text-wrap: balance; margin: 0 0 3px;
}
.cv3ava .cv3ava-bub p.cv3ava-sub {
  font-size: 12px; font-weight: 600; line-height: 1.6;
  color: var(--hx-txt2); margin: 0 0 2px; max-width: 46ch;
}
.cv3ava .cv3ava-bub p.cv3ava-sub:last-of-type { margin-bottom: 0; }
/*  첫 글자에 살짝 힘을 줍니다 — 눈이 어디서 시작할지 알게. */
.cv3ava .cv3ava-bub p.cv3ava-lead::first-letter { font-size: 1.12em; }

/*  좁아서 쌓일 때 — 아바타가 위, 말풍선이 아래. 꼬리는 **든 손 아래**를 가리킵니다. */
@container cvava (max-width: 330px) {
  .cv3ava, .cv3ava.hand-right, .cv3ava.hand-left { grid-template-columns: minmax(0, 1fr); }
  .cv3ava.hand-right .cv3ava-bub::before,
  .cv3ava.hand-left  .cv3ava-bub::before {
    top: -7px; left: 74%; right: auto;
    border-left-width: 7px; border-right-width: 7px;
    border-left-color: transparent; border-right-color: transparent;
    border-top: 0; border-bottom-width: 7px; border-bottom-color: #FFFFFF;
  }
  .cv3ava.hand-right .cv3ava-bub.is-brief::before,
  .cv3ava.hand-left  .cv3ava-bub.is-brief::before { border-bottom-color: #F7F7F4; }
}

/*  🔴 「가장 좌측으로」 한 번 더 (2026-09-12 · 대표님).
    칸은 이미 왼쪽 끝(93px)에 붙어 있었는데 **칸 안에서 그림이 가운데 정렬**이라
    12px 안으로 들어가 있었습니다(실측: 칸 93 · 그림 105 · 그림 폭 165 / 칸 190).
    ⇒ 그림을 칸 **왼쪽에 붙입니다.** 계절마다 그림 폭이 달라(165~190) 가운데
      정렬이면 계절이 바뀔 때마다 아바타가 좌우로 흔들리기도 합니다. */
.cv3ava .cv3ava-f { justify-content: flex-start; }
.cv3ava .cv3ava-img { margin-left: 0; margin-right: auto; }
/*  쌓였을 때도 왼쪽에 붙입니다 — 가운데로 모으면 «가장 좌측» 이 아닙니다. */
@container cvava (max-width: 330px) {
  .cv3ava .cv3ava-f { justify-content: flex-start; }
}

/*  ══ 아바타 옆 묶음 재정렬 ══ (2026-09-12 · 대표님 「나머지는 재 정렬 합니다」)
    아바타를 맨 왼쪽으로 옮기고 나니 오른쪽이 흩어져 보였습니다 —
    말풍선 · 상태 · 단추 둘이 저마다 다른 폭과 간격으로 놓여 있었습니다.
    ⇒ **세 덩이**로 정렬합니다: ① 말풍선 ② 상태 ③ 단추 줄.
      단추는 한 줄에 나란히 두고 **같은 높이**로 맞춥니다. */
.cv3ava-side { gap: 6px; }
.cv3ava-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
}
.cv3ava-t b { font-size: 13px; }
.cv3ava-b { margin-left: 0; }
/*  단추 둘을 **한 줄**로 — 따로 떨어져 있으면 «무엇이 무엇의 단추인지» 가 흐려집니다. */
.cv3ava-b, .cv3ava-set {
  font-size: 11px; font-weight: 800; padding: 6px 10px; border-radius: 10px;
  white-space: nowrap; align-self: auto;
}
.cv3ava-set { align-self: flex-start; margin-top: 1px; }
/*  말풍선이 짧아도 묶음이 **위에서부터** 흐르게 — 가운데로 떠 있으면 어수선합니다. */
.cv3ava { align-items: start; }
.cv3ava-side { align-self: start; }
@container cvava (max-width: 330px) {
  .cv3ava-side { align-items: stretch; }
  .cv3ava-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cv3ava-set { align-self: stretch; text-align: center; }
}

/*  ══ 히어로 좌우를 맞바꿉니다 ══ (2026-09-12 · 대표님 「가장 좌측으로 이동시켜
    주세요」 → 「재실 낙상 스트레스 부분을 우측으로 이동시켜 주세요」)
    🔴 저는 «아바타를 카드 안에서 왼쪽으로» 로 알아듣고 두 번 헛손질했습니다.
       대표님이 말씀하신 것은 **카드 자체의 자리**였습니다 —
       실측: 히어로가 `flex row` 로 [재실·낙상·스트레스 255px][아바타 카드 705px]
       였고, 아바타는 화면 494px 에서 시작했습니다.
    ⇒ 순서를 바꿉니다. 아바타 카드가 **맨 왼쪽**, 재실·낙상·스트레스가 오른쪽. */
.cv3home-hero .cv3home-hero-ai { order: 0; }
.cv3home-hero .cv3home-hero-in { order: 1; }

/*  🔴 순서 바꾸기가 안 먹었습니다 — `.cv3home-hero.is-nomedia .cv3home-hero-ai`
    (0,3,0)가 제 `.cv3home-hero .cv3home-hero-ai`(0,2,0)를 이깁니다.
    사진이 없을 때를 위해 따로 둔 규칙인데, 그 자리에도 «아바타는 오른쪽» 이
    박혀 있었습니다. 두 상태를 **모두** 적습니다. */
.cv3home-hero .cv3home-hero-ai,
.cv3home-hero.is-nomedia .cv3home-hero-ai { order: 0; margin-left: 0; margin-right: 12px; }
.cv3home-hero .cv3home-hero-in,
.cv3home-hero.is-nomedia .cv3home-hero-in { order: 1; }

/*  ══ 말풍선을 **손 바로 옆**으로 ══ (2026-09-12 · 대표님 「말풍선이 손 바로 옆」)
    🔴 아바타 칸을 190px 로 고정해 두었는데 그림은 165px 이라, 든 손과 말풍선
       사이에 **25px 빈 자리**가 생겼습니다. 손이 허공을 가리키는 모양입니다.
    ⇒ 칸이 **그림 폭에 딱 맞게** 줄어들도록 `auto` 트랙으로 바꿉니다.
      계절마다 그림 폭이 달라도 말풍선이 늘 손 옆에 붙습니다. */
.cv3ava, .cv3ava.hand-right, .cv3ava.hand-left {
  grid-template-columns: auto minmax(0, 1fr); gap: 6px;
}
.cv3ava .cv3ava-f {
  width: auto; max-width: 190px; aspect-ratio: auto; height: 284px;
  justify-content: flex-start;
}
.cv3ava .cv3ava-img { height: 100%; width: auto; max-width: none; margin-right: 0; }
/*  꼬리는 말풍선 왼쪽 모서리에서 **든 손 높이**(위쪽)를 가리킵니다. */
.cv3ava.hand-right .cv3ava-bub::before,
.cv3ava.hand-left  .cv3ava-bub::before { top: 14px; }
@container cvava (max-width: 330px) {
  .cv3ava, .cv3ava.hand-right, .cv3ava.hand-left { grid-template-columns: minmax(0, 1fr); }
  .cv3ava .cv3ava-f { height: auto; aspect-ratio: 190 / 284; width: min(190px, 100%); }
  .cv3ava .cv3ava-img { height: auto; width: auto; max-width: 100%; max-height: 100%; }
}

/*  🔴 「이젠 좌측으로 너무 붙었어요」 (2026-09-12 · 대표님).
    자리를 맞바꾸면서 `margin-left:0` 으로 두었더니 카드가 히어로 왼쪽 끝에
    **딱 붙어** 숨 쉴 자리가 없어졌습니다. 원래 오른쪽에 있을 때 쓰던 12px
    여백을 **왼쪽으로 옮깁니다** — 없애는 것이 아니라 따라가게 합니다. */
.cv3home-hero .cv3home-hero-ai,
.cv3home-hero.is-nomedia .cv3home-hero-ai { margin-left: 12px; margin-right: 12px; }

/*  ══ 아바타 뒤 «공간» ══ (2026-09-12 · 대표님 「아바타 주변에 공간 이미지
    넣어주세요」) ═══════════════════════════════════════════════════════════
    ⚠ **방 사진을 지어내 깔지 않습니다.** 그럴듯한 거실 그림을 두면 «우리 집이
      저렇게 생겼나» 가 되고, 그건 없는 것을 있는 척하는 일입니다(R0-2).
    ⇒ 빛과 바닥만 그립니다 — 무대에 선 것처럼. 계절에 따라 빛깔이 바뀌어
      차림과 어긋나지 않습니다.
    ⚠ 아바타보다 **뒤**에 있어야 합니다(z-index) — 앞으로 나오면 얼굴을 덮습니다. */
.cv3ava-f { position: relative; isolation: isolate; }
.cv3ava-f::before {
  content: ''; position: absolute; z-index: 0;
  left: -10%; right: -10%; top: 2%; bottom: 8%;
  border-radius: 46% 46% 38% 38% / 52% 52% 34% 34%;
  background:
    radial-gradient(62% 46% at 50% 26%, var(--ava-glow, rgba(255,234,196,.85)) 0%,
                    rgba(255,255,255,0) 72%),
    linear-gradient(180deg, var(--ava-sky, #F4F1E9) 0%, var(--ava-floor, #E9E4D8) 100%);
  opacity: .9;
}
/*  바닥 — 그림자와 옅은 띠. 서 있는 자리가 있어야 «떠 있지» 않습니다. */
.cv3ava-f::after {
  content: ''; position: absolute; z-index: 0;
  left: 6%; right: 6%; bottom: 6%; height: 14px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(40,43,43,.22) 0%, rgba(40,43,43,0) 72%);
}
.cv3ava-img, .cv3ava-hit { position: relative; z-index: 1; }
/*  계절 — 차림과 같은 계절의 빛. 진하지 않게, 아바타가 주인공입니다. */
.cv3ava.sea-spring { --ava-glow: rgba(214,240,206,.85); --ava-sky: #F2F7EE; --ava-floor: #E3EDDC; }
.cv3ava.sea-summer { --ava-glow: rgba(255,238,190,.90); --ava-sky: #F7F4E8; --ava-floor: #EDE6D2; }
.cv3ava.sea-autumn { --ava-glow: rgba(250,222,186,.88); --ava-sky: #F8F1E7; --ava-floor: #EFE2D2; }
.cv3ava.sea-winter { --ava-glow: rgba(219,233,247,.88); --ava-sky: #F1F5FA; --ava-floor: #E1E8F1; }
/*  이상이면 공간도 함께 물듭니다 — 아바타만 붉히면 눈에 덜 들어옵니다. */
.cv3ava.is-crit { --ava-glow: rgba(250,206,196,.92); --ava-sky: #FBF0EC; --ava-floor: #F3DCD5; }
.cv3ava.is-warn { --ava-glow: rgba(253,226,196,.92); --ava-sky: #FDF4EA; --ava-floor: #F5E3CE; }
@media (prefers-reduced-motion: reduce) { .cv3ava-f::before { opacity: .82; } }

/*  ══ 공간을 «움직이게» ══ (2026-09-12 · 대표님 「동적 이미지면 더욱 좋습니다」)
    ■ 빛이 아주 느리게 숨 쉬고, 계절 알갱이가 천천히 흐릅니다.
    ⚠ **이상일 때는 멈춥니다.** 급한 화면에서 장식이 움직이면 눈이 그리로 갑니다 —
      경고를 읽어야 할 때 꽃잎을 보게 만들면 안 됩니다.
    ⚠ `prefers-reduced-motion` 이면 전부 멈춥니다. 어지럼을 느끼시는 분이 있습니다.
    ⚠ 아주 느립니다(빛 9초 · 알갱이 22~34초). 빠른 장식은 곧 거슬립니다. */
.cv3ava-f::before { animation: cv3avaBreathe 9s ease-in-out infinite; transform-origin: 50% 30%; }
@keyframes cv3avaBreathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.035); opacity: 1; }
}
.cv3ava-sp {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  background-repeat: repeat;
  animation: cv3avaDrift 26s linear infinite;
  opacity: .55;
}
@keyframes cv3avaDrift {
  from { background-position: 0 -140px, 40px -80px, 80px -200px; }
  to   { background-position: 0  300px, 40px  340px, 80px  240px; }
}
/*  계절 알갱이 — 봄 꽃잎빛 · 여름 햇살 · 가을 낙엽빛 · 겨울 눈. */
.cv3ava.sea-spring .cv3ava-sp {
  background-image:
    radial-gradient(2.5px 2.5px at 18px 20px, rgba(238,160,180,.55), transparent 60%),
    radial-gradient(2px 2px at 62px 50px, rgba(140,196,140,.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 34px 80px, rgba(238,160,180,.40), transparent 60%);
  background-size: 96px 130px, 110px 150px, 84px 120px;
}
.cv3ava.sea-summer .cv3ava-sp {
  background-image:
    radial-gradient(2.2px 2.2px at 22px 24px, rgba(255,214,120,.60), transparent 60%),
    radial-gradient(1.8px 1.8px at 68px 58px, rgba(255,236,170,.50), transparent 60%),
    radial-gradient(1.5px 1.5px at 40px 92px, rgba(255,214,120,.40), transparent 60%);
  background-size: 100px 140px, 120px 160px, 88px 124px;
}
.cv3ava.sea-autumn .cv3ava-sp {
  background-image:
    radial-gradient(2.6px 2.6px at 20px 22px, rgba(214,132,60,.50), transparent 60%),
    radial-gradient(2px 2px at 66px 56px, rgba(196,150,80,.44), transparent 60%),
    radial-gradient(1.8px 1.8px at 38px 88px, rgba(214,132,60,.36), transparent 60%);
  background-size: 98px 136px, 116px 156px, 86px 122px;
}
.cv3ava.sea-winter .cv3ava-sp {
  background-image:
    radial-gradient(2.4px 2.4px at 24px 18px, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(1.9px 1.9px at 70px 54px, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(1.6px 1.6px at 42px 90px, rgba(255,255,255,.62), transparent 60%);
  background-size: 92px 128px, 112px 150px, 82px 118px;
}
/*  말하는 중에는 빛이 조금 더 밝게 — «지금 말하고 있다» 가 몸짓만이 아니게. */
.cv3ava.is-speaking .cv3ava-f::before { animation-duration: 5.5s; }
/*  ⚠ 이상이면 **멈춥니다.** */
.cv3ava.is-crit .cv3ava-f::before, .cv3ava.is-warn .cv3ava-f::before,
.cv3ava.is-crit .cv3ava-sp, .cv3ava.is-warn .cv3ava-sp { animation: none; }
.cv3ava.is-crit .cv3ava-sp, .cv3ava.is-warn .cv3ava-sp { opacity: .25; }
@media (prefers-reduced-motion: reduce) {
  .cv3ava-f::before, .cv3ava-sp { animation: none !important; }
}

/*  ══ 되돌림 (2026-09-12 · 대표님 「좀더 우측으로 20PX 옮기고 배경은 다시
    빼주세요」) ═════════════════════════════════════════════════════════════
    ① 카드를 20px 더 오른쪽으로 — 12px 였으니 32px 입니다.
    ② 아바타 뒤 «공간»(빛·바닥·계절 알갱이·애니메이션)을 **끕니다.**
    ⚠ 규칙은 **지우지 않고 위에 그대로 둡니다.** 다시 켜실 때 한 줄만 지우면
      됩니다 — 만든 것을 없애지 않습니다(R0-6). 아래 한 블록이 유일한 스위치입니다.
    ⚠ «꺼 둔 스위치를 코드에 남기면 아무도 못 찾는다» 는 오늘 겪은 사고라,
      여기가 그 자리임을 크게 적어 둡니다. */
/*  2026-09-12 대표님: 12 → 32 → 62 → **92px**(「30px 더 우측으로」 두 번). */
.cv3home-hero .cv3home-hero-ai,
.cv3home-hero.is-nomedia .cv3home-hero-ai { margin-left: 92px; }
/*  ↓↓ 이 한 블록을 지우면 «공간» 이 다시 켜집니다 ↓↓ */
.cv3ava-f::before, .cv3ava-f::after, .cv3ava-sp { display: none !important; }
/*  ↑↑ 여기까지 ↑↑ */

/*  ══ 단추를 아바타 아래로 ══ (2026-09-12 · 대표님 「아바타 바꾸기 버튼은
    아바타 아래로 옮겨주세요」)
    아바타와 단추를 **한 칸**(`.cv3ava-col`)으로 묶었습니다 — 따로 두면 말풍선
    쪽에 딸려 갑니다. 단추 폭은 **그림 폭에 맞춥니다**(따로 놀지 않게). */
.cv3ava-col { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.cv3ava-col .cv3ava-set {
  align-self: stretch; text-align: center; margin-top: 0;
  font-size: 11px; padding: 6px 8px; white-space: nowrap;
}

/*  🔴 단추가 **그림 위**로 올라갔습니다(실측: 단추 309~353 · 그림 358~642).
    까닭 — 자리를 맞바꿀 때 `.cv3ava .cv3ava-f { order: 1 }` 을 걸어 두었는데,
    이제 그 칸이 `.cv3ava-col`(세로 flex) **안**이라 order 1 이 단추(0) 뒤로
    밀어 버렸습니다. 격자에서 쓰던 순서가 새 칸에서 딴 뜻이 된 것입니다.
    ⇒ 칸 안에서는 순서를 **다시 세웁니다.** */
.cv3ava-col .cv3ava-f { order: 0; }
.cv3ava-col .cv3ava-set { order: 1; }

/*  🔴 92px 밀어냈더니 **카드가 280px 로 좁아져** 말풍선이 아바타 아래로 내려갔습니다
    (컨테이너 질의 330px 아래로 떨어짐). 밀어낸 만큼 폭을 잃은 것입니다.
    ⇒ 재실·낙상·스트레스 묶음은 **제 몫만** 쓰고, 남는 폭은 아바타 카드가 갖게 합니다.
      그러면 오른쪽으로 밀어도 말풍선이 손 옆을 지킵니다. */
.cv3home-hero .cv3home-hero-in,
.cv3home-hero.is-nomedia .cv3home-hero-in { flex: 0 1 auto; }
.cv3home-hero .cv3home-hero-ai,
.cv3home-hero.is-nomedia .cv3home-hero-ai { flex: 1 1 auto; }

/*  ══ 재실 · 낙상 · 스트레스 띠를 끕니다 ══ (2026-09-12 · 대표님 「재실 낙상
    스트레스는 제거해주세요」)
    ⚠ **지우지 않고 끕니다**(R0-6). 같은 값은 아래 카드(재실·위치 / 낙상 /
      스트레스)에 그대로 있으므로 정보가 사라지는 것이 아닙니다 — 머리줄에서
      한 번 더 보여 주던 것을 내린 것입니다.
    ↓↓ 이 한 줄을 지우면 다시 켜집니다 ↓↓ */
.cv3home-hero .cv3home-hero-in { display: none !important; }
/*  ↑↑ 여기까지 ↑↑
    띠가 없으니 아바타 카드가 히어로를 다 씁니다 — 왼쪽 여백은 그대로 92px. */
.cv3home-hero .cv3home-hero-ai,
.cv3home-hero.is-nomedia .cv3home-hero-ai { flex: 1 1 auto; margin-right: 12px; }

/*  ── 말풍선 아래로 내려온 덩이 ── 카드 폭이 아니라 **말풍선 폭**을 씁니다. */
.cv3ava-side > .cv3home-air-v { margin-top: 9px; }
.cv3ava-side > .cv3home-air-g { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.cv3ava-side > .cv3home-air-ask { width: 100%; }

/*  ══ 색을 가라앉힙니다 ══ (2026-09-12 · 대표님 「첨부 전반적으로 너무 빨개요」)
    🔴 실측: 따뜻한 바탕이 **18곳 · 37만 px²**. 센서 상세 패널 하나가 18만 px² 을
       통째로 물들이고, 주의·경고·타일·칩이 저마다 붉은 바탕을 깔았습니다.
       **다 붉으면 아무것도 붉지 않습니다** — 정작 급한 것이 묻힙니다.
    ■ 규칙(앞으로 이대로 합니다)
      · **가득 채운 붉은 바탕은 «경고(crit)» 하나뿐**이고, 그것도 **안전 띠**에만.
      · 주의(warn)는 **왼쪽 띠 3px + 글자색**만. 바탕은 중립.
      · 예측(soon)은 **파랑 점선** — 아직 안 일어난 일이라 따뜻한 색을 안 씁니다.
      · 숫자 타일은 바탕을 물들이지 않고 **숫자만** 물들입니다. */

/*  ① 센서 상세 — 18만 px² 을 물들이던 자리. 띠만 남깁니다. */
.cv3aim-one.is-bad { background: var(--hx-fill2); border-left: 3px solid #9C4A16; }

/*  ② 숫자 타일 — 바탕은 중립, 숫자만 붉게. */
.cv3aim-k.is-bad { background: var(--hx-fill2); }
.cv3env-t.is-bad { background: var(--hx-fill2); }

/*  ③ 행동 타일 — 주의는 띠만, 경고만 아주 옅은 바탕. */
.cv3env-a.is-warn { background: var(--hx-fill2); border-left: 3px solid #9C4A16; }
.cv3env-a.is-crit { background: #FDF3F0; border-left: 3px solid #A4301A; }

/*  ④ 온도차 칸 — 바탕 대신 띠. */
.cv3env-sh.is-warn { background: var(--hx-fill2); border-left: 3px solid #9C4A16; }
.cv3env-sh.is-crit { background: var(--hx-fill2); border-left: 3px solid #A4301A; }

/*  ⑤ 안전 띠 — **여기만** 채웁니다. 경고는 채우고, 주의는 띠만. */
.cv3aimsafe { background: var(--hx-fill2); border-left: 4px solid #9C4A16; }
.cv3aimsafe.is-crit { background: #FBE9E4; border-left-color: #A4301A; }

/*  ⑥ 겹치는 항목 — 목록 안에서도 주의는 중립 바탕. */
.cv3env-care-l li.is-warn { background: var(--hx-fill2); border-left-color: #9C4A16; }
.cv3env-care-l li.is-crit { background: #FDF3F0; border-left-color: #A4301A; }

/*  방향 판정 구간(3m)을 눈금 위에 **띠**로 보입니다 — 감지(9m)와 다릅니다. */
.cv3aimviz-t { position: relative; overflow: visible; }
.cv3aimviz-dz {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
  background: rgba(47,107,75,.30); pointer-events: none;
}

/*  ══ 「AI 가 나기 전에 보고 있습니다」 ══ (2026-09-12 · 대표님 「AI가 문제 발생
    이전에 상황을 조기 감지 예측하고 대응해야 한다 … AI의 역할에 대한 부분」)
    ⚠ **따뜻한 색을 안 씁니다.** 아직 일어나지 않은 일이고, 경고와 같은 옷을
      입히면 또 «다 붉은» 화면이 됩니다. 파랑 계열로 조용히 둡니다. */
.cv3env-role {
  margin: 0 0 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 5px 9px; border-radius: 10px; background: #EEF2F8;
  font-size: 11px; font-weight: 700; color: #2F4E80; cursor: help;
}
.cv3env-role b { font-weight: 800; }
.cv3env-role span { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv3env-role span.q { font-weight: 700; opacity: .78; }
/*  예측(soon) 줄 — 파랑 점선. 지금 일과 눈으로 갈립니다. */
.cv3env-a.is-soon { background: #EEF2F8; border-left: 3px solid #4C75B8; }

/*  ══════════════════════════════════════════════════════════════════════════
    B2C · 앱 눈금  (2026-09-12 · 대표님 「이제 아바타와 개인 가정에 맞게 B2C 또는
    앱 스타일의 디자인이 중요해 보입니다」)
    ══════════════════════════════════════════════════════════════════════════
    🔴 실측으로 지금 상태를 쟀습니다 — 이건 앱이 아니라 **관제 화면 밀도**입니다:
         둥글기 **14가지**(3·9·10·11·14·15·19·20·50·999)
         안쪽 여백 **10가지**(4~13px)
         글자 크기 **20가지** — 그중 **6px·7px 글자가 11개**
         단추 높이 26px 짜리가 **8개** (손가락으로 못 누릅니다)
    ⇒ **한 벌의 눈금**을 세웁니다. 요양원(벽걸이)에는 걸지 않습니다 —
      그 화면은 멀리서 보는 관제라 밀도가 달라야 합니다. `.cv3home` 안에만 겁니다.
    ■ 눈금
        둥글기  10(칩) · 14(타일) · 18(카드) · 999(알약)
        여백    8 · 12 · 16
        글자    11(라벨) · 13(본문) · 15(제목) · 20(값) · 28(큰 값)
        손가락  단추 최소 40px (기기 안내 권장 44)
    ⚠ 작은 글자를 키우면 카드가 커집니다. 그래서 **여백을 같이 조입니다** —
      키우기만 하면 «너무 크다» 로 되돌아옵니다. */
.cv3home {
  --app-r-chip: 10px; --app-r-tile: 14px; --app-r-card: 18px;
  --app-p-1: 8px; --app-p-2: 12px; --app-p-3: 16px;
}

/*  ① 글자 — **9px 아래를 없앱니다.** 개인 가정 화면에서 6~7px 은 못 읽습니다. */
.cv3home .cv3home-bd [class] { }
.cv3home .cv3aimmap-l, .cv3home .cv3aimmap-n, .cv3home .cv3aimhr-n,
.cv3home .cv3aimviz-e, .cv3home .cv3aimviz-q, .cv3home .cv3aimhr-c p,
.cv3home .cv3aimviz-sp p, .cv3home .cv3aim-tl p, .cv3home .cv3env-sc-l,
.cv3home .cv3aimcfg-sc-l, .cv3home .cv3aimcfg-n, .cv3home .cv3hypo-n,
.cv3home .cv3aimsafe-n, .cv3home .cv3role-ev-t, .cv3home .cv3env-lim span,
.cv3home .cv3aimcfg-g span, .cv3home .cv3aim-t-s, .cv3home .cv3env-t-k,
.cv3home .cv3ava-t span, .cv3home .cv3home-ver span { font-size: 11px; }
.cv3home .cv3env-a-m, .cv3home .cv3aim-one-v span, .cv3home .cv3role-s i,
.cv3home .cv3role-ev-c, .cv3home .cv3aimhr-h, .cv3home .cv3env-care-h,
.cv3home .cv3aimgate-t, .cv3home .cv3home-aimgate-t { font-size: 11px; }
.cv3home .cv3env-t-o, .cv3home .cv3home-aimgate-l span { font-size: 11px; }

/*  ② 손가락 — 누르는 것은 **최소 40px**. 26px 단추는 앱에서 못 씁니다. */
.cv3home .cv3home-btn, .cv3home .cv3home-chip, .cv3home .cv3aimtab,
.cv3home .cv3env-a, .cv3home .cv3aim-cfgb, .cv3home .cv3env-illb,
.cv3home .cv3aimpop-t button, .cv3home .cv3ava-set {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.cv3home .cv3env-a { display: grid; align-items: center; }
.cv3home .cv3home-btn, .cv3home .cv3home-chip { border-radius: 999px; padding: 0 14px; }
.cv3home .cv3aimtab { border-radius: 999px; padding: 0 14px; }

/*  ③ 둥글기 — 네 단계만. */
.cv3home .cv3home-sig, .cv3home .cv3home-air, .cv3home .cv3home-care,
.cv3home .cv3ava-bub, .cv3home .cv3aimpop-w, .cv3home .cv3home-sheet-w {
  border-radius: var(--app-r-card);
}
.cv3home .cv3aim-t, .cv3home .cv3aim-k, .cv3home .cv3env-t, .cv3home .cv3env-a,
.cv3home .cv3aim-one, .cv3home .cv3env-sh, .cv3home .cv3aimsafe, .cv3home .cv3env-ai,
.cv3home .cv3role-s, .cv3home .cv3env-lim span, .cv3home .cv3aimcfg-g span,
.cv3home .cv3home-ver span, .cv3home .cv3env-care-l li, .cv3home .cv3note {
  border-radius: var(--app-r-tile);
}

/*  ④ 카드 — 실선 테두리를 걷고 **부드러운 그림자**로. 앱은 선이 아니라 층입니다. */
.cv3home .cv3home-sig, .cv3home .cv3home-air {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(40,43,43,.04), 0 6px 18px -10px rgba(40,43,43,.22);
}

/*  ⑤ 여백 — 카드 16 · 타일 12. 제각각이던 4~13 을 둘로 모읍니다. */
.cv3home .cv3home-sig { padding: var(--app-p-3); }
.cv3home .cv3aim-t, .cv3home .cv3env-t, .cv3home .cv3aim-one,
.cv3home .cv3env-sh, .cv3home .cv3aimsafe, .cv3home .cv3env-ai { padding: var(--app-p-2); }

/*  ── 손가락 눈금 (한 번에) ── (2026-09-12 · B2C 앱)
    🔴 앞서 **클래스 이름을 나열해** 고쳤더니 절반만 잡혔습니다(단추 9/31 이 40px
       미만으로 남음). 오늘 제가 「명단을 적는 규칙은 낡는다」고 적어 놓고 또
       명단을 적었습니다.
    ⇒ 이름을 세지 않고 **누를 수 있는 것 전부**에 겁니다. */
.cv3home-bd button, .cv3home-bd [role="button"], .cv3home-bd summary,
.cv3home-side button, .cv3home-right button {
  min-height: 40px;
}
/*  ⚠ 예외 — 이것들은 «누르는 칸» 이 아니라 **덮개·표식**입니다. 40px 을 걸면
    자리를 밀어냅니다. 예외는 여기 한 곳에만 적습니다. */
.cv3home-bd .cv3ava-hit, .cv3home-bd .cv3home-sig-hit,
.cv3home-bd .cv3aimmap-d, .cv3home-bd .cv3home-sheet-bd,
.cv3home-bd .cv3aimpop-bd, .cv3home-bd .cv3ava-veil,
.cv3home-bd .cv3home-ib, .cv3home-bd .cv3home-sc-go {
  min-height: 0;
}

/*  ── 세로 조이기 ── 글자를 키운 대가로 카드가 733 → 881px 이 됐습니다.
    ⚠ **글자는 안 줄입니다**(읽히려고 키운 것입니다). 줄 간격·세로 여백·칸 사이만
      조입니다. 앱은 «큰 글자 + 촘촘한 세로» 이지 «작은 글자 + 넓은 여백» 이 아닙니다. */
.cv3home-bd .cv3aim-t-s, .cv3home-bd .cv3aimviz-q, .cv3home-bd .cv3aimmap-n,
.cv3home-bd .cv3aimhr-n, .cv3home-bd .cv3aimcfg-n, .cv3home-bd .cv3hypo-n,
.cv3home-bd .cv3aimsafe-n, .cv3home-bd .cv3env-a-m, .cv3home-bd .cv3env-t-o,
.cv3home-bd .cv3note, .cv3home-bd .cv3home-note-c { line-height: 1.35; }
.cv3home-bd .cv3aim-kpi, .cv3home-bd .cv3aim-grid, .cv3home-bd .cv3env-grid,
.cv3home-bd .cv3env-acts, .cv3home-bd .cv3aimtabs { gap: 6px; }
.cv3home-bd .cv3aim-k { padding: 6px 10px; }
.cv3home-bd .cv3env-t { padding: 7px 10px; }
.cv3home-bd .cv3aimviz { margin-top: 4px; }
.cv3home-bd .cv3aimhr { margin-top: 6px; padding-top: 5px; }
.cv3home-bd .cv3aimhr-c svg { height: 30px; }
.cv3home-bd .cv3aimviz-sp svg { height: 22px; }
.cv3home-bd .cv3aim-tl svg { height: 16px; }
.cv3home-bd .cv3home-aimgate { margin-top: 6px; padding-top: 5px; }
.cv3home-bd .cv3env-role { padding: 4px 10px; }
.cv3home-bd .cv3aim-cfgb { min-height: 40px; margin-top: 5px; }
/*  ⚠ 값 옆 라벨은 **줄을 나누지 않습니다** — 두 줄이 되면 타일이 그만큼 커집니다. */
.cv3home-bd .cv3env-t-k, .cv3home-bd .cv3aim-k span { white-space: nowrap; }

/*  ══════════════════════════════════════════════════════════════════════════
    B2C · 따뜻한 바탕 + 흰 카드  (2026-09-12 · 대표님 「네」)
    ══════════════════════════════════════════════════════════════════════════
    🔴 실측: 본문 바탕이 **rgb(109,142,197) — 파란색**이었습니다. 관제 화면 바탕이
       그대로 비치고 있었습니다. 개인 가정용 앱에 파란 관제 바탕은 맞지 않습니다.
    ⇒ **따뜻한 바탕 #F3EEE5 + 흰 카드.** 카드가 바탕에서 살짝 떠 보입니다(1.16:1).
    ⚠ 대비를 재고 골랐습니다 — 본문 글자 **12.36:1** · 옅은 글자 **5.07:1**.
      더 진한 바탕(#EFE8DC)은 옅은 글자가 4.81 로 내려가 여유가 줄어듭니다.
    ⚠ **가정용만** 입니다. 요양원 벽걸이는 밤에 멀리서 보는 화면이라 그대로 둡니다. */
.cv3home .cv3home-bd {
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(255,238,209,.55) 0%, rgba(255,238,209,0) 58%),
    #F3EEE5;
}
/*  카드는 **흰색**으로 또렷하게. 바탕이 따뜻하니 흰 카드가 «올려놓은 것» 이 됩니다. */
.cv3home .cv3home-sig, .cv3home .cv3home-air, .cv3home .cv3home-care,
.cv3home .cv3home-cat > *, .cv3home .cv3home-risk {
  background: #FFFFFF;
}
/*  타일의 «옅은 칸» 도 회색 잉크 대신 **따뜻한 잉크**로. */
.cv3home .cv3home-bd { --hx-fill2: rgba(126, 101, 66, .07); }
/*  선은 더 얇고 따뜻하게 — 앱은 선보다 층입니다. */
.cv3home .cv3home-bd { --hx-line: rgba(126,101,66,.16); --hx-line2: rgba(126,101,66,.10); }

/*  ── 인사 ── 개인 가정용 첫 줄은 «평가» 가 아니라 **인사**입니다.
    ⚠ 다만 「레이더 추정 · 의료 판정 아님」은 **숨기지 않습니다.** 이건 안전 문구라
      툴팁으로 내리면 안 됩니다 — 작게, 그러나 보이게 둡니다. */
.cv3home .cv3home-air-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px;
}
.cv3home .cv3home-air-h b { font-size: 15px; font-weight: 800; color: var(--hx-txt); }
.cv3home .cv3home-air-h span {
  font-size: 11px; font-weight: 700; color: var(--hx-mut2);
  padding: 2px 8px; border-radius: 999px; background: var(--hx-fill2);
}

/*  🔴 따뜻한 바탕이 안 먹었습니다 — `.cv3home[data-cvtheme] .cv3home-bd`(0,3,0)가
    제 `.cv3home .cv3home-bd`(0,2,0)를 이깁니다. 테마 표식이 늘 붙어 있어서
    **테마 규칙이 항상 이깁니다.** 급을 맞춰 다시 적습니다.
    ⚠ 오늘만 세 번째로 같은 덫입니다(지도 점 · 히어로 순서 · 여기). 이 파일은
      **테마·상태 표식이 붙은 선택자**가 많아, 새 규칙을 쓸 때는 급부터 확인해야 합니다. */
.cv3home[data-cvtheme] .cv3home-bd,
.cv3home[data-cvtheme="library"] .cv3home-bd {
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(255,238,209,.55) 0%, rgba(255,238,209,0) 58%),
    #F3EEE5;
}
/*  대비 마무리 — 아래로 내려가는 차이 표시(▼)와 「상승 ▲」이 4.21·3.78 이었습니다. */
.cv3home .cv3env-d.is-dn { color: #2F4E80; }
.cv3home .cv3env-d.is-up { color: #8F2A16; }
.cv3home .cv3home-bd .is-up { color: #8F2A16; }

/*  마지막 한 곳 — 「지금 조치가 필요한 알림이 없습니다」가 4.09:1 이었습니다.
    비어 있다는 말도 **읽혀야** 합니다(안 읽히면 «화면이 죽었나» 가 됩니다). */
.cv3home .cv3home-bd { --hx-mut2: #6A6B60; }

/*  남은 세 곳 — 「알림 없음」(4.09) · 「직전보다」(4.23 · 파란 칩 위).
    ⚠ 토큰이 아니라 **박아 넣은 색**이라 토큰을 바꿔도 안 따라왔습니다.
      두 자리만 콕 집어 올립니다(실측 뒤 5.4 · 5.6). */
.cv3home .cv3home-strip.is-empty, .cv3home .cv3home-strip.is-empty span { color: #5C6270; }
.cv3home .cv3home-delta i { color: #3F4A57; }

/*  ══ 간격 · 모서리 눈금 ══ (2026-09-12 · 대표님 「카드간의 간격과 각진 모양
    붙어 있는 것 등을 수정해야 합니다」)
    🔴 실측: **간격 16가지**(0·1·2·3·4·5·6·7·8·13 …) · **모서리 12가지**(0·8·9·10·
       12·14·15·18·19 …). 1~2px 간격이 54곳이라 **카드가 붙어 보였고**, 각진
       모서리(0)가 5곳 남아 있었습니다.
    ⇒ 파일 전체를 훑어 **간격 166곳 · 모서리 132곳**을 눈금에 맞췄습니다:
         간격   6 · 8 · 12 · 16   (0 은 일부러 붙인 곳이라 그대로)
         모서리 10 · 14 · 18 · 알약  (6px 미만 작은 표시는 그대로)
    ⚠ 이름을 나열하지 않고 **파일 전체**를 훑었습니다 — 오늘 «명단» 으로 두 번
      반만 고쳤습니다. */

/*  ① 카드끼리는 **12px** 떨어뜨립니다 — 층이 갈려야 카드로 읽힙니다. */
.cv3home .cv3home-cats { gap: 12px; }
.cv3home .cv3home-sigs { gap: 12px; }
.cv3home .cv3home-senrow { gap: 12px; }
.cv3home .cv3home-bd > * + * { margin-top: 12px; }

/*  ② 각진 모서리를 없앱니다 — 앱에서 직각은 «잘린 것» 처럼 보입니다.

    🔴 2026-09-12 **되돌렸습니다** — 대표님 「아바타 카드가 각져있어요」.
       여기 있던 것은 **모든 칸의 모서리를 한 변수로 덮어쓰는** 규칙이었습니다:
           .cv3home .cv3home-bd [class]:not(…):not(…):not(…) {
             border-radius: max(0px, var(--r-min, 0px)); }   ← (0,6,0)
       세 가지가 한꺼번에 터졌습니다. 셋 다 실측으로 잡았습니다.
       ① **급이 너무 세서** 그 아래 적어 둔 제 수정(`.cv3home .cv3home-hero`,
          (0,2,0))이 **한 번도 적용되지 않았습니다.** 고쳐 놓고 «고쳤다» 고
          보고한 셈입니다 — 히어로·상태 카드·단추가 계속 각져 있었습니다.
       ② **`--r-min` 은 물려받습니다.** 카드에 18px 을 주면 그 안의 아이콘·
          머리띠까지 18px 이 내려갑니다. 30px 아이콘이 거의 원이 됐고,
          **83곳이 한 값**이 돼 모서리의 층이 통째로 사라졌습니다.
       ③ 명단에 없는 것은 전부 **0 으로 깎였습니다** — 「명단으로 고치기」를
          «명단으로 봐주기» 로 바꿔 놓았을 뿐이었습니다.
       ⇒ 규칙을 **없앱니다.** 파일 전체를 훑어 맞춘 모서리 132곳은 그대로
         살아 있으므로, 덮어쓰기를 떼면 제 값으로 돌아옵니다(실측: 아이콘
         10px · 히어로 18px · 상태 카드 14px 복귀, 각진 칸 8 → 0).
    ⚠ 전폭 띠(시뮬 안내)는 화면 끝에 닿는 것이 맞아 원래 각진 채로 둡니다. */

/*  남은 각진 셋 — 실측으로 집어냈습니다.
    · `.cv3home-say`(알림 토스트 417×31) — 떠 있는 것이라 **알약**이 맞습니다.
    · `.cv3home-btn` 하나(49×40) — 어딘가에서 모서리를 잃었습니다.
    · `.cv3home-hero.is-nomedia`(417×701) — 큰 흰 판인데 직각이라 «잘린 것» 처럼
      보였습니다. 카드와 같은 18px 로.
    ⚠ `.cv3env-a` 안의 2px 은 **타일 안쪽 줄 간격**입니다 — 카드 사이가 아니라
      아이콘·제목·근거를 붙여 한 덩이로 읽히게 하는 자리라 그대로 둡니다. */
.cv3home .cv3home-say { border-radius: 999px; }
.cv3home .cv3home-btn { border-radius: 999px; }
.cv3home .cv3home-hero, .cv3home .cv3home-hero.is-nomedia { border-radius: 18px; overflow: hidden; }

/*  ══════════════════════════════════════════════════════════════════════════
    리퀴드 글래스 · 뉴모피즘   (2026-09-12 · 대표님 「둥근 모양에 그림자 효과로
    변경해야 합니다」 · 「리퀴드 글래스 뉴모피즘 스타일요」)
    ══════════════════════════════════════════════════════════════════════════
    ■ 두 가지를 겹칩니다
      · **유리** — 반투명 + 뒤 흐림(backdrop-filter). 뒤가 비쳐야 «유리» 입니다.
        그래서 바탕에 **천천히 흐르는 색 덩이**를 깔았습니다. 깔지 않으면
        흐릴 것이 없어 그냥 흰 판이 됩니다.
      · **뉴모피즘** — 바깥으로 두 겹 그림자(왼위 밝게 · 오른아래 어둡게),
        안쪽 칸은 눌린 자리(inset).
    ■ 🔴 **글자는 유리 위에서도 읽혀야 합니다.** 전형적인 뉴모피즘은 바탕과
      단추가 같은 색(1.00:1)이라 그대로 쓰면 안 됩니다. 그래서
      · 유리 바탕을 **62% 흰색**까지만 투명하게 두고,
      · 누를 수 있는 것에는 **선을 남깁니다**(그림자만으로는 못 알아봅니다),
      · 색으로 뜻을 나르는 것(경보·상태)은 **건드리지 않습니다.**
      만든 뒤 실측으로 확인합니다.
    ■ 끄는 자리 — 다크 모드 · `prefers-contrast: more` · 요양원(벽걸이).
    ⚠ 흐림은 무겁습니다. **큰 카드에만** 걸고 작은 타일에는 안 겁니다. */

/*  ① 바탕 — 유리 뒤에 비칠 «액체». 아주 느리게 흐릅니다. */
.cv3home[data-cvtheme] .cv3home-bd,
.cv3home[data-cvtheme="library"] .cv3home-bd {
  position: relative;
  background:
    radial-gradient(38% 30% at 14% 12%, rgba(255,214,150,.55) 0%, rgba(255,214,150,0) 70%),
    radial-gradient(34% 28% at 86% 8%,  rgba(168,206,255,.45) 0%, rgba(168,206,255,0) 70%),
    radial-gradient(42% 34% at 72% 78%, rgba(196,232,208,.45) 0%, rgba(196,232,208,0) 70%),
    radial-gradient(30% 26% at 26% 88%, rgba(255,196,196,.35) 0%, rgba(255,196,196,0) 70%),
    #E8E0D2;   /*  🔴 2026-09-12 #F3EEE5 → #E8E0D2 (대표님 「카드 별로 시선
                   분리가 안됩니다」). 카드가 흰데 바탕도 흰색이면 **층이 안
                   갈립니다** — 실측 1.095:1, 상태 카드는 1.014:1 로 사실상
                   같은 색이었습니다. 바탕을 내려 카드를 띄웁니다.  */
  background-attachment: local;
  animation: cv3liquid 40s ease-in-out infinite alternate;
}
@keyframes cv3liquid {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 3% 2%, -3% 3%, -2% -3%, 3% -2%, 0 0; }
}

/*  ② 유리 카드 — 반투명 + 뒤 흐림 + 뉴모피즘 두 겹 그림자 + 위쪽 빛줄. */
.cv3home .cv3home-sig,
.cv3home .cv3home-air,
.cv3home .cv3home-care,
.cv3home .cv3home-risk,
.cv3home .cv3home-cat > *,
.cv3home .cv3aimpop-w,
.cv3home .cv3home-sheet-w {
  /*  🔴 2026-09-12 «시선 분리» 수정 — 셋을 같이 올렸습니다.
      · 흰빛 .62 → **.90** : 유리는 **떠 있어야** 유리입니다. 반쯤 비치면
        바탕에 잠겨 카드가 «칸» 으로 안 읽힙니다. 뒤 흐림은 그대로라
        바탕의 색 덩이가 여전히 은은하게 배어 나옵니다.
      · 테두리 **흰색 → 따뜻한 선** : 흰 바탕 위의 흰 테두리는 아무것도
        나누지 못합니다. 유리의 «모서리 빛» 은 아래 inset 빛줄이 냅니다.
      · 그늘을 **.16 → .22 로 넓게** : 카드가 바탕에서 들려 보여야 층이 섭니다.
      실측: 바탕과의 대비 **1.095 → 1.27:1**.  */
  background: rgba(255,255,255,.90);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(126,101,66,.16);
  box-shadow:
    -8px -8px 18px rgba(255,255,255,.62),      /* 왼위 — 빛 */
     12px 14px 30px -6px rgba(126,101,66,.22), /* 오른아래 — 그늘 */
     inset 0 1px 0 rgba(255,255,255,.95);      /* 윗면 빛줄 */
}

/*  ③ 안쪽 타일 — **눌린 자리**(inset). 카드에서 파낸 것처럼 보입니다. */
.cv3home .cv3aim-k, .cv3home .cv3env-t, .cv3home .cv3aim-one,
.cv3home .cv3env-sh, .cv3home .cv3env-ai, .cv3home .cv3role-s,
.cv3home .cv3env-lim span, .cv3home .cv3aimcfg-g span, .cv3home .cv3home-ver span {
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 3px 3px 8px rgba(126,101,66,.13),
    inset -3px -3px 8px rgba(255,255,255,.85);
}

/*  ④ 누를 수 있는 것 — **도드라지게**(바깥 그림자) + 선을 남깁니다.
    ⚠ 그림자만으로 «누를 수 있음» 을 알리면 아무도 못 누릅니다. */
.cv3home .cv3home-btn, .cv3home .cv3home-chip, .cv3home .cv3aimtab,
.cv3home .cv3aim-cfgb, .cv3home .cv3env-illb, .cv3home .cv3ava-set {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(126,101,66,.28);
  box-shadow:
    -4px -4px 10px rgba(255,255,255,.85),
     5px 5px 12px rgba(126,101,66,.16),
     inset 0 1px 0 rgba(255,255,255,.9);
}
.cv3home .cv3home-btn:active, .cv3home .cv3home-chip:active,
.cv3home .cv3aimtab:active, .cv3home .cv3aim-cfgb:active,
.cv3home .cv3env-illb:active, .cv3home .cv3ava-set:active {
  box-shadow:
    inset 3px 3px 8px rgba(126,101,66,.20),
    inset -3px -3px 8px rgba(255,255,255,.85);
}
/*  고른 것은 **눌린 채로** 둡니다 — «지금 이것» 이 보여야 합니다. */
.cv3home .cv3home-chip.is-on, .cv3home .cv3aimtab.is-on {
  box-shadow:
    inset 3px 3px 8px rgba(126,101,66,.22),
    inset -3px -3px 8px rgba(255,255,255,.75);
}

/*  ⑤ 말풍선도 유리로 — 아바타 옆에서 떠 있어야 합니다. */
.cv3home .cv3ava-bub {
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: -6px -6px 14px rgba(255,255,255,.8), 8px 8px 20px rgba(126,101,66,.15);
}
.cv3home .cv3ava-bub::before { border-right-color: rgba(255,255,255,.75); }

/*  ⑥ 끄는 자리 — 어두운 화면·고대비·움직임 줄임. */
@media (prefers-contrast: more) {
  .cv3home .cv3home-sig, .cv3home .cv3home-air, .cv3home .cv3home-care,
  .cv3home .cv3home-cat > *, .cv3home .cv3ava-bub {
    background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: rgba(40,43,43,.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cv3home[data-cvtheme] .cv3home-bd { animation: none; }
}

/*  🔴 유리를 입히면서 **고른 탭의 진한 바탕을 덮었습니다** — 흰 글자가 옅은
    유리 위에 남아 **1.02:1** 이 됐습니다(실측). 글자가 보이지 않습니다.
    ⚠ 새 결을 입힐 때는 «고름·눌림» 같은 **상태 색을 먼저 확인**해야 합니다.
    ⇒ 유리에서는 «고른 것» 을 **눌린 자국 + 진한 글자**로 보입니다 — 흰 글자를
      쓰지 않습니다. */
.cv3home .cv3aimtab.is-on,
.cv3home .cv3home-chip.is-on {
  background: rgba(126,101,66,.18);
  color: var(--hx-txt);
  border-color: rgba(126,101,66,.42);
}
.cv3home .cv3aimtab.is-on i { background: var(--hx-txt); }
.cv3home .cv3aimtab.is-on span, .cv3home .cv3aimtab.is-on span.q { color: var(--hx-txt2); }
.cv3home .cv3aimtab.is-bad.is-on { background: rgba(156,74,22,.18); border-color: rgba(156,74,22,.45); }
.cv3home .cv3aimtab.is-bad.is-on i { background: #9C4A16; }
/*  숫자가 바뀔 때 번쩍이는 표시 — 3.88 이었습니다. */
.cv3home .cv3home-delta.is-flash, .cv3home .is-flash { color: #3F4A57; }

/*  값이 바뀔 때 0.7초 번쩍이는 색 — 그 순간 **3.88:1** 이었습니다(실측).
    ⚠ 잠깐이라고 넘기지 않습니다. 숫자가 바뀌는 그 순간이 **제일 보고 싶은 때**입니다.
    ⇒ 번쩍임의 시작 색을 어둡게 섞습니다(`color-mix`). 못 쓰는 브라우저는
      원래대로 돌아가므로 화면이 깨지지 않습니다. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .cv3home .cv3home-bd { --c-flash: color-mix(in srgb, var(--c, #6A6B60) 62%, #23261F); }
  @keyframes cvhFlashHome {
    0%   { color: var(--c-flash); transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  .cv3home .cv3home-bd .is-flash { animation-name: cvhFlashHome; }
}

/*  ══════════════════════════════════════════════════════════════════════════
    기본 화면 · 우측 패널 이사   (2026-09-12 · 대표님 「카드에 기본 화면을
    넣어주세요」 · 「이 부분은 우측 패널에 표시 합니다」 · 「카드 별로 시선
    분리가 안됩니다」)
    ══════════════════════════════════════════════════════════════════════════ */

/*  ① 기본 화면 — 아바타 옆 빈 280px 을 채웁니다. 글줄이 아니라 **타일**입니다. */
.cv3home .cv3air-base { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv3home .cv3air-bs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cv3home .cv3air-b {
  padding: 8px 6px; border-radius: 14px; text-align: center;
  background: rgba(255,255,255,.52); border: 1px solid rgba(126,101,66,.13);
  box-shadow: inset 2px 2px 6px rgba(126,101,66,.10), inset -2px -2px 6px rgba(255,255,255,.85);
}
.cv3home .cv3air-b > span { display: block; font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home .cv3air-b > b {
  display: block; margin-top: 2px; font-size: 19px; font-weight: 800;
  color: var(--hx-mut); font-variant-numeric: tabular-nums;
}
/*  ⚠ 값이 **올 때만** 진한 글자를 씁니다 — «—» 가 진하면 값처럼 보입니다. */
.cv3home .cv3air-b.is-on > b { color: var(--hx-txt); }
.cv3home .cv3air-b > b > u { margin-left: 2px; font-size: 10px; font-weight: 700; text-decoration: none; color: var(--hx-mut); }

/*  기록 쌓임 — 숫자 옆에 **눈금**을 답니다. n/40 만으로는 어디쯤인지 모릅니다. */
.cv3home .cv3air-pg {
  padding: 9px 11px 10px; border-radius: 14px;
  background: rgba(255,255,255,.52); border: 1px solid rgba(126,101,66,.13);
}
.cv3home .cv3air-pg > p { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; }
.cv3home .cv3air-pg > p > span { font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home .cv3air-pg > p > b {
  margin-left: auto; font-size: 15px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums;
}
.cv3home .cv3air-pg > p > b > u { font-size: 11px; font-weight: 700; color: var(--hx-mut); text-decoration: none; }
.cv3home .cv3air-pg > i {
  display: block; height: 7px; border-radius: 999px; min-width: 7px;
  background: linear-gradient(90deg, #C9A227, #E0BE55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
/*  띠가 앉는 홈 — 채워진 만큼이 어디까지인지 보이려면 **빈 자리**가 보여야 합니다. */
.cv3home .cv3air-pg { position: relative; }
.cv3home .cv3air-pg::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 10px; height: 7px;
  border-radius: 999px; background: rgba(126,101,66,.13); z-index: 0;
}
.cv3home .cv3air-pg > i { position: relative; z-index: 1; }

/*  차례 네 걸음 — 지금 걸음만 밝힙니다. 나머지는 «앞으로» 이지 «지금» 이 아닙니다. */
.cv3home .cv3air-st {
  display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap;
}
.cv3home .cv3air-st > li {
  flex: 1 1 auto; padding: 5px 4px; border-radius: 999px; text-align: center;
  font-size: 10px; font-weight: 700; color: var(--hx-mut);
  background: rgba(126,101,66,.07); border: 1px solid rgba(126,101,66,.11);
}
.cv3home .cv3air-st > li.is-at {
  color: #3A2A05; background: rgba(201,162,39,.26); border-color: rgba(201,162,39,.42);
}

/*  ② 「불안정 분석」이 우측 패널로 왔습니다 — 전폭 띠 모양을 **카드**로 바꿉니다.
    ⚠ 본문에서는 가로로 길어도 됐지만 패널은 좁습니다. 줄을 접고 여백을 줄입니다. */
.cv3home .cv3home-side .cv3home-risk,
.cv3home-side .cv3home-risk {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 14px; font-size: 11px; line-height: 1.55;
  background: rgba(255,255,255,.60); border: 1px solid rgba(126,101,66,.14);
}
.cv3home-side .cv3home-risk-t { margin: 0 0 6px; font-size: 12px; font-weight: 800; }
.cv3home-side .cv3home-risk-t > span { display: block; font-size: 10px; font-weight: 700; color: var(--hx-mut); }
.cv3home-side .cv3home-risk-r { margin: 6px 0 0; }
.cv3home-side .cv3home-risk-r > em { display: block; font-size: 10px; color: var(--hx-mut); font-style: normal; }

/*  ③ 시선 분리 — 카드가 아닌 것은 **바탕 위에 그대로** 둡니다. 안 그러면
    «카드 위의 카드» 가 되어 층이 또 뭉갭니다. */
.cv3home .cv3home-sigs, .cv3home .cv3home-cats, .cv3home .cv3home-senrow {
  background: none; border: 0; box-shadow: none;
}

/*  ④ 대비 미달 둘 — 바탕을 내리면서 딸려 내려간 자리입니다 (실측 2026-09-12).
    ⚠ 같은 사sweep 에서 「쌓는 중」이 **1.00:1** 로 떴는데 **제 자가 틀린 것**이었습니다:
      `color-mix` 는 `color(srgb 0.66 0.19 0.09)` 꼴로 답하는데 그 0~1 값을
      0~255 로 읽었습니다. 실제로는 5.9:1 로 멀쩡합니다. 0 이나 1.00 이 나오면
      **대상이 아니라 자를 먼저 의심합니다.** */
/*  · 상태 카드의 「호흡·심박·움직임」 이름표 — #6B7481 on #EFEDE6 = 4.04:1.
      11px 글자에는 모자랍니다(AA 4.5). #5A6472 로 내립니다 → 5.12:1. */
.cv3home .cv3home-sb u, .cv3home .cv3home-sc-w { color: #5A6472; }
/*  · 「온도 주의」 알약 — `--hx-flame`(#D3622C) on `--hx-champagne` = 3.12:1.
      같은 이유로 이미 계산해 둔 #9C4A16 을 씁니다 → 5.16:1. */
.cv3home .cv3home-sig-p.is-warn { color: #9C4A16; }

/*  ⑤ 남은 여덟 곳 — 자를 고치고 다시 재서 집어냈습니다 (표본 353 · 최저 2.04:1).
    ⚠ 자를 두 번 고쳤습니다. ① `color-mix` 의 `color(srgb …)` 를 0~255 로 읽어
      멀쩡한 글자를 «1.00:1» 이라 했고, ② 그림 배경을 만나면 무조건 «못 잼» 으로
      빼 버려 **표본이 0** 이 됐습니다. 0 이 나오면 화면이 아니라 자를 봅니다.
      지금 자는 «그림 밑에 불투명 색이 같이 깔려 있으면 그 색을 바닥으로» 삼고,
      색 없이 그림만 있는 38곳(짙은 왼쪽 칸)은 **못 재는 것으로 따로 셉니다.** */
/*  · 「값 없음 · 쌓는 중」 칩 — `--hx-mut2`(#63665C) 가 유리 카드 위에서 2.04:1.
      가장 나빴습니다. 같은 회색 계열의 `--hx-mut`(#6B6F63) 로 → 4.98:1.
      ⚠ 더 어둡게 하지 않습니다 — 「값이 없다」가 값보다 진하면 안 됩니다. */
/*  ⚠ 색을 바꾸는 것으로는 못 고칩니다 — 이 칩은 **색 띠 위**에 앉고 띠 색은
      카드마다 다릅니다(moonstone · claret · flame …). 글자만 손대면 띠 하나에
      맞추고 다른 띠에서 다시 깨집니다. **흰 알약**을 깔아 바탕을 고정합니다
      → 어느 띠 위에서도 6.1:1 이상. 「값 없음」이 상태 칩으로도 읽힙니다. */
.cv3home .cv3home-cat-st.is-na {
  color: #4A4E43; background: rgba(255,255,255,.82);
  padding: 1px 7px; border-radius: 999px;
}
/*  · 상태 카드의 시각 — `.cv3home-sc-w u` 가 #6B7481 로 남아 4.04:1 이었습니다
      (바깥 `.cv3home-sc-w` 만 고쳐 자식이 빠졌습니다). */
.cv3home .cv3home-sc-w u { color: #5A6472; }
/*  · 「일 · 주 · 월 추세 →」 — 심박·낙상 카드의 `--c`(#DD3311) 가 4.49:1 로
      0.01 모자랐습니다. 호흡(#07617F)·움직임(#7A5603) 과 같은 식으로 내립니다. */
.cv3home .cv3home-sig.is-hr   .cv3home-more,
.cv3home .cv3home-sig.is-fall .cv3home-more { color: #C22B0C; }   /* 5.58:1 */

/*  ⑥ 상태 카드(「측정을 멈춰 두었습니다」)도 바탕에서 띄웁니다 — 혼자 #EFEDE6
    이라 새 바탕과 **1.119:1**, 거의 같은 색이었습니다. 다른 카드와 같은 층으로.
    ⚠ 위험·주의일 때의 색(연분홍·연노랑)은 **그대로 둡니다** — 그건 신호입니다. */
.cv3home .cv3home-sc { background: #FBFAF7; border-color: rgba(126,101,66,.16); }
.cv3home .cv3home-sc:hover { background: #F5F2EA; }

/*  ══════════════════════════════════════════════════════════════════════════
    침대 자세 14가지 · 블링킹 팝업   (2026-09-12 · 대표님 「낙상에는 14가지의
    자세 아이콘 이미지 등을 채워서 나열하고 해당 낙상이 발생하면 아이콘 이미지를
    블링킹 팝업을 보여주는 방식으로 해주세요」)
    ══════════════════════════════════════════════════════════════════════════ */
.cv3home .cv3bed14 { margin-top: 12px; }
.cv3home .cv3bed14-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.cv3home .cv3bed14-h > b { font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home .cv3bed14-h > span { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--hx-mut); cursor: help; }

/*  ⚠ 칸 수를 고정하지 않습니다 — 카드 폭이 좁아지면 줄이 늘어나야 합니다.
    한 칸 최소 62px 은 **아이콘 40 + 글자 두 줄**이 들어가는 실측 최소치입니다. */
.cv3home .cv3bed14-g {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px;
}
.cv3home .cv3bed14-i {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px; border-radius: 14px; cursor: pointer; min-height: 74px;
  background: rgba(255,255,255,.52); border: 1px solid rgba(126,101,66,.13);
  box-shadow: inset 2px 2px 6px rgba(126,101,66,.10), inset -2px -2px 6px rgba(255,255,255,.85);
  transition: transform .15s, box-shadow .2s, background .2s;
}
.cv3home .cv3bed14-i:hover { transform: translateY(-1px); background: rgba(255,255,255,.72); }
.cv3home .cv3bed14-i > span { font-size: 10px; font-weight: 700; color: var(--hx-mut); text-align: center; line-height: 1.25; }
/*  그림이 아직 없어도 **이름은 남습니다** — 빈 칸이 되면 무엇이 빠졌는지도 모릅니다. */
.cv3home .cv3bed14-p { width: 40px; height: 40px; object-fit: contain; }
.cv3home .cv3bed14-p:not([src]), .cv3home .cv3bed14-i img[alt=""]:-moz-broken { opacity: 0; }

/*  지금 켜진 칸 — 눌린 자리를 **도드라지게** 뒤집고 글자를 진하게. */
.cv3home .cv3bed14-i.is-on {
  background: rgba(255,255,255,.92); border-color: rgba(126,101,66,.34);
  box-shadow: -3px -3px 8px rgba(255,255,255,.9), 5px 6px 14px rgba(126,101,66,.20);
}
.cv3home .cv3bed14-i.is-on > span { color: var(--hx-txt); font-weight: 800; }
.cv3home .cv3bed14-i.is-warn.is-on { border-color: #C98F2B; background: #FBF1DE; }
.cv3home .cv3bed14-i.is-crit.is-on { border-color: #C0392B; background: #FBE9E4; }
.cv3home .cv3bed14-i.is-warn.is-on > span { color: #7A4A05; }
.cv3home .cv3bed14-i.is-crit.is-on > span { color: #8C2216; }

/*  값이 안 오는 모드 — 숨기지 않습니다. 무엇을 보는 센서인지는 지금도 보여야 합니다.
    🔴 처음엔 `opacity:.55` 로 흐리게 뒀는데 **글자가 2.65:1** 이 됐습니다(실측).
       읽히지 않는 흐림은 «꺼짐» 이 아니라 그냥 **못 읽는 글자**입니다.
       ⇒ 글자는 그대로 두고 **타일만 납작하게** 만듭니다 — 눌린 자국(inset)을 빼면
         «아직 살아 있지 않다» 가 보입니다. 색만으로 가르지 않게 머리띠에도
         「값이 오면 켜집니다」라고 글로 적습니다. */
.cv3home .cv3bed14.is-cold .cv3bed14-i {
  background: rgba(255,255,255,.34);
  border-style: solid; border-color: rgba(126,101,66,.20);
  box-shadow: none;
}

/*  깜빡임 — 급한 것만. 색이 아니라 **밝기**로 깜빡입니다(색각 이상에서도 보이게). */
@keyframes cv3bedBlink { 0%, 100% { opacity: 1; } 50% { opacity: .34; } }
.cv3home .cv3bed14-i.is-blink, .cv3bed14-big.is-blink { animation: cv3bedBlink 1s steps(1, end) infinite; }

/*  팝업 — 큰 아이콘 한 장. 글이 아니라 **그림이 먼저** 보여야 합니다. */
.cv3pop-in.is-bed14 { max-width: 340px; text-align: center; padding: 22px 20px 18px; }
.cv3bed14-big { display: grid; place-items: center; width: 148px; height: 148px; margin: 4px auto 12px;
  border-radius: 26px; background: rgba(126,101,66,.07); }
.cv3bed14-big > img { width: 124px; height: 124px; object-fit: contain; }
.cv3pop-in.is-bed14.is-crit .cv3bed14-big { background: #FBE9E4; }
.cv3pop-in.is-bed14.is-warn .cv3bed14-big { background: #FBF1DE; }
.cv3bed14-t { margin: 0; font-size: 21px; font-weight: 800; color: var(--hx-txt); }
.cv3bed14-s { margin: 4px 0 0; font-size: 12px; color: var(--hx-mut); }
.cv3bed14-do { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--hx-txt); }
.cv3pop-in.is-bed14.is-crit .cv3bed14-do { color: #8C2216; }
.cv3bed14-src { margin: 10px 0 0; font-size: 10px; color: var(--hx-mut); }

/*  ⚠ 깜빡임에 약하신 분께는 **깜빡이지 않습니다.** 급한 것은 테두리로 알립니다 —
    끄기만 하면 «급함» 이 사라집니다. */
@media (prefers-reduced-motion: reduce) {
  .cv3home .cv3bed14-i.is-blink, .cv3bed14-big.is-blink { animation: none; }
  .cv3home .cv3bed14-i.is-blink { outline: 2px solid #C0392B; outline-offset: -2px; }
  .cv3bed14-big.is-blink { outline: 3px solid #C0392B; outline-offset: -3px; }
}

/*  ⑦ 「값 없음」을 **흐림(opacity)으로 말하지 않습니다** — 2026-09-12 실측.
    자를 고쳐(조상에 걸린 opacity 까지 합성) 다시 재니 **15곳**이 AA 미달이었습니다.
    앞서 「미달 0」이라 적은 것은 **그 자를 안 썼을 때**의 값입니다 — 자가 얕았습니다.
      · `.cv3env-t-na`(실외 —)            .75 → **3.19:1**
      · `.cv3home-night.is-empty` 안의 글  .75 → **3.17:1**
      · `.cv3home-air-g i`(PM2.5 …)        .8  → **3.51:1**
      · `.cv3home-meta i`(가운뎃점)        .6  → **2.42:1**  ← 가장 나쁨
    흐린 글자는 «꺼짐» 이 아니라 **못 읽는 글자**입니다. 흐림을 걷고 **회색 글자색**
    으로 바꿉니다 — 색은 이미 AA 를 넘는 값(`--hx-mut`)이 있습니다.
    ⚠ 그림·막대의 opacity 는 그대로 둡니다. 글자만 고칩니다. */
.cv3home .cv3env-t-na { opacity: 1; color: var(--hx-mut); }
.cv3home .cv3home-night.is-empty { opacity: 1; }
.cv3home .cv3home-night.is-empty span, .cv3home .cv3home-night.is-empty em { color: var(--hx-mut); }
.cv3home .cv3home-air-g i { opacity: 1; color: var(--hx-mut); }
.cv3home .cv3home-meta i { opacity: 1; color: var(--hx-mut); }
/*  · 위에서 `.cv3home-air-g i` 를 짚었는데 **다른 자리**였습니다 — 실제로는
      `.cv3env-t-k i`(PM2.5 · PM10 · VOC Index 이름표)가 .8 로 3.51:1 이었습니다.
      규칙 이름으로 짐작하지 말고 **그 글자에서 거슬러 올라가** 찾았습니다. */
.cv3home .cv3env-t-k i { opacity: 1; color: var(--hx-mut); }
/*  손그림 대체 — 사진과 **같은 자리·같은 크기**. 색은 글자색을 따릅니다. */
.cv3home .cv3bed14-i svg.cv3bed14-p { color: var(--hx-mut); }
.cv3bed14-big svg.cv3bed14-p { width: 124px; height: 124px; color: var(--hx-mut); }

/*  ══════════════════════════════════════════════════════════════════════════
    비상음향   (2026-09-12 · 대표님 「다양한 비상음향이 있습니다. 외부 조사도
    포함합니다. 최고의 알고리즘으로 올려주세요.」)
    ══════════════════════════════════════════════════════════════════════════ */
/*  ① 가릴 수 있는 여섯 가지 — 꺼져 있어도 보입니다(«무엇을 하는 기계인가»). */
.cv3home .cv3snd-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin: 10px 0 0; }
.cv3home .cv3snd-k {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 10px; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.52); border: 1px solid rgba(126,101,66,.13);
  box-shadow: inset 2px 2px 6px rgba(126,101,66,.10), inset -2px -2px 6px rgba(255,255,255,.85);
}
.cv3home .cv3snd-k > span { font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home .cv3snd-k > b { font-size: 15px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; }
.cv3home .cv3snd-k.is-off { background: rgba(255,255,255,.34); border-style: solid; box-shadow: none; }
/*  지금 잡힌 것 — 도드라지게 뒤집고 **모양으로도** 가릅니다(색만으로 안 가름). */
.cv3home .cv3snd-k.is-on {
  background: rgba(255,255,255,.92); border-width: 2px;
  box-shadow: -3px -3px 8px rgba(255,255,255,.9), 5px 6px 14px rgba(126,101,66,.20);
}
.cv3home .cv3snd-k.is-crit.is-on { border-color: #C0392B; background: #FBE9E4; }
.cv3home .cv3snd-k.is-warn.is-on { border-color: #C98F2B; background: #FBF1DE; }
.cv3home .cv3snd-k.is-crit.is-on > b { color: #8C2216; }
.cv3home .cv3snd-k.is-warn.is-on > b { color: #7A4A05; }

/*  ② 지금 잡힌 것 한 줄 */
.cv3home .cv3snd-hit { margin: 8px 0 0; padding: 9px 11px; border-radius: 14px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(126,101,66,.16); }
.cv3home .cv3snd-hit.is-crit { background: #FBE9E4; border-color: #E0A08F; }
.cv3home .cv3snd-hit.is-warn { background: #FBF1DE; border-color: #E5C98F; }
.cv3home .cv3snd-hit-t { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.cv3home .cv3snd-hit-t > b { font-size: 14px; font-weight: 800; color: var(--hx-txt); }
.cv3home .cv3snd-hit-t > span { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home .cv3snd-hit-y { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--hx-mut); }

/*  ③ 판정에 쓴 숫자 — 어느 값을 보고 말했는지 그대로 */
.cv3home .cv3snd-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; margin: 8px 0 0; }
.cv3home .cv3snd-f > div { padding: 7px 9px; border-radius: 12px; background: rgba(255,255,255,.46); }
.cv3home .cv3snd-f span { display: block; font-size: 10px; font-weight: 700; color: var(--hx-mut); }
.cv3home .cv3snd-f b { display: block; font-size: 14px; font-weight: 800; color: var(--hx-txt); font-variant-numeric: tabular-nums; }
.cv3home .cv3snd-f u { display: block; font-size: 10px; color: var(--hx-mut); text-decoration: none; }

/*  ④ 잡힌 기록 — 시각 · 이름 · 확신. **소리는 저장하지 않습니다.** */
.cv3home .cv3snd-log { margin: 10px 0 0; }
.cv3home .cv3snd-r { display: flex; align-items: baseline; gap: 8px; padding: 6px 9px; border-radius: 12px; margin-top: 4px;
  background: rgba(255,255,255,.46); }
.cv3home .cv3snd-r > em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--hx-mut); font-variant-numeric: tabular-nums; }
.cv3home .cv3snd-r > b { font-size: 12px; font-weight: 800; color: var(--hx-txt); }
.cv3home .cv3snd-r > u { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--hx-mut); text-decoration: none; }
.cv3home .cv3snd-r.is-crit { background: #FBE9E4; }
.cv3home .cv3snd-r.is-warn { background: #FBF1DE; }

/*  ⑤ 근거 팝업 */
.cv3pop-in.is-sndk { max-width: 420px; padding: 22px 22px 18px; }
.cv3snd-d-t { margin: 0; font-size: 20px; font-weight: 800; color: var(--hx-txt); }
.cv3snd-d-s { margin: 3px 0 14px; font-size: 12px; color: var(--hx-mut); }
.cv3snd-d-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv3snd-d-l > li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 12px; background: rgba(126,101,66,.07); }
.cv3snd-d-l span { font-size: 11px; font-weight: 800; color: var(--hx-txt); }
.cv3snd-d-l b { font-size: 11px; font-weight: 600; line-height: 1.55; color: var(--hx-mut); }
.cv3snd-d-w { margin: 14px 0 0; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--hx-txt); }
.cv3snd-d-src { margin: 10px 0 0; font-size: 10px; color: var(--hx-mut); }
/*  ⑥ 소리 × 레이더 — 겹칠 때만 나옵니다. 겹치면 **이것이 첫 줄**입니다. */
.cv3home .cv3snd-fuse { margin: 8px 0 0; padding: 11px 13px; border-radius: 16px;
  background: #FBE9E4; border: 2px solid #C0392B; }
.cv3home .cv3snd-fuse.is-note { background: rgba(255,255,255,.62); border: 1px solid rgba(126,101,66,.16); }
.cv3home .cv3snd-fuse-t { margin: 0; font-size: 14px; font-weight: 800; color: #8C2216; }
.cv3home .cv3snd-fuse.is-note .cv3snd-fuse-t { color: var(--hx-txt); }
.cv3home .cv3snd-fuse-l { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cv3home .cv3snd-fuse-l > li { font-size: 11px; font-weight: 700; color: #5A2018;
  background: rgba(255,255,255,.72); border-radius: 999px; padding: 3px 9px; }
.cv3home .cv3snd-fuse.is-note .cv3snd-fuse-l > li { color: var(--hx-mut); background: rgba(126,101,66,.09); }
.cv3home .cv3snd-fuse-a { margin: 9px 0 0; font-size: 13px; font-weight: 800; color: #8C2216; }
.cv3home .cv3snd-fuse.is-note .cv3snd-fuse-a { color: var(--hx-txt); font-weight: 700; }

/*  ══════════════════════════════════════════════════════════════════════════
    좌측 카메라 자동 분할 · 이벤트 팝업
    (2026-09-12 · 대표님 「카메라가 연결된 만큼의 분할 화면 … 오토 스케일링 …
     이벤트가 발생하면 해당 채널을 팝업으로」)
    ══════════════════════════════════════════════════════════════════════════ */
/*  🔴 DVR/NVR 화면 (2026-09-12 · 대표님 「분할 화면은 DVR 이나 NVR 화면처럼
    만들어 주세요」 · 「카메라 상하 베젤이 너무 큽니다」 · 「최대한 얇게 해주세요」)

    ■ 관제 장비 화면의 규칙 — 꾸밈이 아니라 **읽는 방식**입니다.
      · 바탕 **검정**, 칸 사이 **1px**, 모서리 **각지게**. 영상이 주인공이고
        틀은 사라져야 합니다. 앱 카드가 둥근 것과 **일부러 다르게** 둡니다 —
        그 다름이 «지금 보는 것은 실영상» 이라는 표시가 됩니다.
      · 덧글씨(채널·시각·이름)는 영상 **위에** 얹습니다. 칸 밖에 두면 그만큼
        영상이 줄어듭니다 — 대표님이 「베젤을 얇게」라고 하신 것이 이 뜻입니다.
    ⚠ 열 수는 **인라인 style 로** 들어옵니다(`camGridAuto` 가 정합니다).
      여기에 열 수를 또 적으면 두 벌이 되어 어느 쪽이 듣는지 헷갈립니다. */
.cv3home .cv3home-csp {
  display: grid; gap: 1px; margin: 6px 0 0;
  background: #000; padding: 1px; border-radius: 4px; overflow: hidden;
}
.cv3home .cv3home-csp .cv3home-cg-t {
  position: relative; display: block; padding: 0; margin: 0; cursor: pointer;
  border-radius: 0; background: #0A0C0C; overflow: hidden;
  /*  ⚠ 그림자·안쪽 자국을 넣지 않습니다 — 관제 화면에 입체감은 방해입니다. */
  box-shadow: none;
  /*  🔴 **기본 보더라인**은 늘 있습니다 (2026-09-12 · 대표님 「그리고 기본
      보더라인은 있어야 합니다」). 앞서 «고름/경보만» 두었더니 평소에는 칸의
      경계가 사라져 어디까지가 한 채널인지 안 보였습니다. DVR 도 칸마다 얇은
      선이 늘 있습니다 — 그 선이 «칸» 을 만듭니다. */
  border: 1px solid rgba(255,255,255,.22);
}
.cv3wall-g .cv3home-cg-t { border: 1px solid rgba(255,255,255,.22); }
.cv3home .cv3home-csp .cv3home-cg-v {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9;
  background: #0A0C0C; overflow: hidden;
}
.cv3home .cv3home-csp .cv3home-cg-v img,
.cv3home .cv3home-csp .cv3home-cg-v video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cv3home .cv3home-csp .cv3home-cg-none {
  font-size: 10px; line-height: 1.35; text-align: center; color: rgba(255,255,255,.55);
}
/*  덧글씨 — 영상 위. 글자는 흰색에 **어두운 그림자**를 둡니다(밝은 장면에서도 읽히게). */
.cv3home .cv3home-csp .cv3home-cg-ch,
.cv3home .cv3home-csp .cv3home-cg-tm,
.cv3home .cv3home-csp .cv3home-cg-nm,
.cv3home .cv3home-csp .cv3home-cg-al {
  position: absolute; font-size: 9px; font-weight: 800; letter-spacing: .02em;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
  padding: 2px 4px; pointer-events: none; font-variant-numeric: tabular-nums;
}
.cv3home .cv3home-csp .cv3home-cg-ch { top: 0; left: 0; background: rgba(0,0,0,.45); border-radius: 0 0 3px 0; }
.cv3home .cv3home-csp .cv3home-cg-tm { top: 0; right: 0; }
.cv3home .cv3home-csp .cv3home-cg-nm {
  bottom: 0; left: 0; right: 0; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3home .cv3home-csp .cv3home-cg-al { bottom: 0; right: 0; color: #FF6B5A; }
.cv3home .cv3home-csp .cv3home-cg-al.is-w { color: #FFC24B; }
/*  지금 보고 있는 채널 · 경보 — **안쪽 테두리**로 표시합니다. 바깥 테두리를 쓰면
    칸이 그만큼 밀려 베젤이 두꺼워집니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-warn { outline: 2px solid #D9A441; outline-offset: -2px; }
.cv3home .cv3home-csp .cv3home-cg-t.is-crit { outline: 2px solid #E0453A; outline-offset: -2px; }
/*  🔴 점선을 **뺐습니다** (2026-09-12 · 대표님 「보더라인은 점선으로 표시하지
    않습니다」). 이름이 없는 칸은 아래 이름줄이 «채널 n» 이라고 이미 말합니다 —
    테두리까지 다르게 하면 관제 화면이 지저분해집니다. */

/*  채널 이름 단추 */
.cv3home .cv3home-cmapb { width: 100%; margin: 6px 0 0; font-size: 11px; }

/*  ── 채널 이름 팝업 ── */
.cv3pop-in.is-cmap { max-width: 460px; padding: 20px 20px 16px; }
.cv3cmap-t { margin: 0; font-size: 19px; font-weight: 800; color: var(--hx-txt); }
.cv3cmap-s { margin: 3px 0 12px; font-size: 12px; color: var(--hx-mut); }
.cv3cmap-l { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.cv3cmap-r { display: grid; grid-template-columns: 34px 1fr; gap: 6px 8px; align-items: center;
  padding: 9px 10px; border-radius: 12px; background: rgba(126,101,66,.07); }
.cv3cmap-r > em { grid-row: 1 / span 2; font-style: normal; font-size: 13px; font-weight: 800;
  color: var(--hx-txt); text-align: center; }
.cv3cmap-r form { display: flex; gap: 6px; }
.cv3cmap-r input[type="text"] { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid rgba(126,101,66,.24); background: #fff; }
.cv3cmap-r form .cv3home-btn { flex: 0 0 auto; padding: 7px 12px; font-size: 12px; }
.cv3cmap-r select { font-size: 13px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(126,101,66,.24); background: #fff; color: var(--hx-txt); }
.cv3cmap-r > u { grid-column: 2; font-size: 10px; color: var(--hx-mut); text-decoration: none; }
.cv3cmap-n { font-size: 11px; color: var(--hx-mut); }
.cv3cmap-w { margin: 12px 0 0; font-size: 11px; line-height: 1.55; color: var(--hx-mut); }

/*  ── 이벤트 팝업 ── 영상이 먼저 보여야 합니다. 글은 그 다음입니다. */
.cv3pop-in.is-campop { max-width: 520px; padding: 18px 18px 14px; }
.cv3campop-t { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.cv3campop-t > b { font-size: 19px; font-weight: 800; color: var(--hx-txt); }
.cv3campop-t > span { font-size: 13px; font-weight: 700; color: #8C2216; }
.cv3campop-v { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #2A2D2D; display: grid; place-items: center; border: 3px solid #C0392B; }
.cv3campop-v img, .cv3campop-v video { width: 100%; height: 100%; object-fit: cover; }
/*  깜빡임은 **테두리만** — 영상이 깜빡이면 정작 봐야 할 것을 못 봅니다. */
@keyframes cv3campopB { 0%, 100% { border-color: #C0392B; } 50% { border-color: rgba(192,57,43,.25); } }
.cv3campop-v.is-blink { animation: cv3campopB 1s steps(1, end) infinite; }
.cv3campop-n { margin: 8px 0 0; font-size: 11px; color: var(--hx-mut); }
.cv3campop-a { display: flex; gap: 8px; margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .cv3campop-v.is-blink { animation: none; } }



/*  🔴 카메라 위아래 검은 띠 없애기 (2026-09-12 · 대표님 「카메라 상하 베젤이
    너무 큽니다」 · 「최대한 얇게 해주세요」)

    ■ 어디서 생기나 — `HxRoomCam` 의 무대(`.hxrc-stage`)가 **16:9 로 고정**이고
      영상은 `object-fit: contain` 입니다. 카메라가 4:3 이면 16:9 틀 안에 맞춰
      넣느라 **위아래가 남고**, 그 남은 자리가 검게 보입니다.
      3DX 본체에도 같은 기록이 있습니다(`helix-careview-3d.html:5212`).

    ■ 어떻게 — **자르지 않고** 없앱니다. `cover` 로 잘라 내면 띠는 사라지지만
      **방의 일부가 화면에서 사라집니다.** 돌봄 화면에서 그건 바꿀 수 없는 손해입니다.
      ⇒ 무대의 고정 비율을 풀고 **영상이 자기 비율로 높이를 정하게** 합니다.
        그러면 어떤 카메라든 띠가 0 이고 잘리지도 않습니다.

    ⚠ **모듈 CSS 는 건드리지 않습니다** — 요양원 화면이 같은 파일을 씁니다.
      우리 칸(`.cv3home-hxcam`) 안에서만 덮어씁니다.
    ⚠ 머리띠도 얇게 — 제목 줄이 두 줄로 접히면 그만큼 영상이 내려갑니다. */
.cv3home .cv3home-hxcam { min-height: 0; border-radius: 12px; }
.cv3home .cv3home-hxcam .hxrc-stage {
  aspect-ratio: auto; height: auto; min-height: 0;
  padding: 0; border: 0; border-radius: 0; margin: 0; background: #0A0C0C;
}
.cv3home .cv3home-hxcam .hxrc-stage video,
.cv3home .cv3home-hxcam .hxrc-stage img,
.cv3home .cv3home-hxcam .hxrc-stage canvas {
  width: 100%; height: auto; max-height: none; object-fit: contain; display: block;
}
.cv3home .cv3home-hxcam .hxrc-head { padding: 5px 8px; row-gap: 3px; }
.cv3home .cv3home-hxcam .hxrc-head h4 { font-size: 11px; line-height: 1.2; }
/*  한 대만 볼 때의 칸도 같은 뜻으로 — 고정 4:3 을 풀어 영상이 높이를 정합니다. */
.cv3home .cv3home-cam-v { aspect-ratio: auto; min-height: 0; }
.cv3home .cv3home-cam-v video, .cv3home .cv3home-cam-v img {
  width: 100%; height: auto; object-fit: contain;
}
/*  ⚠ 영상이 아직 없을 때(«연결되지 않았습니다» 글자만)는 칸이 납작해지면
    글자가 눌립니다 — 그때만 최소 높이를 줍니다. */
.cv3home .cv3home-cam-v:not(:has(video)):not(:has(img)) { min-height: 96px; }

/*  ══════════════════════════════════════════════════════════════════════════
    채널 관제 창 — **DVR/NVR 기기를 대신합니다**
    (2026-09-12 · 대표님 「확장 모니터로 드레그 해서 확대 버튼을 클릭하면 확장
     모니터의 해상도에 맞게 전체화면으로 … 별도의 DVR이나 NVR 등등의 기기가
     필요 없게 되어야 합니다」)
    ══════════════════════════════════════════════════════════════════════════ */
/*  ⚠ 관제 창에서는 **대시보드를 통째로 감춥니다** — 옆 모니터에 켜 두는 화면에
    쓸데없는 것이 섞이면 안 됩니다. 액체 배경도 끕니다(관제는 검정이 기본입니다). */
:root[data-wallchan="1"] body { background: #000 !important; }
:root[data-wallchan="1"] .cv3home[data-cvtheme] .cv3home-bd,
:root[data-wallchan="1"] .cv3home-bd {
  background: #000 !important; animation: none !important;
  padding: 0 !important; margin: 0 !important; overflow: hidden !important;
}
:root[data-wallchan="1"] .cv3home-grid3 { grid-template-columns: 1fr !important; }
:root[data-wallchan="1"] .cv3home-grid3 > .cv3home-side,
:root[data-wallchan="1"] .cv3home-grid3 > .cv3home-right,
:root[data-wallchan="1"] .cv3home-split,
:root[data-wallchan="1"] .cv3home-say,
:root[data-wallchan="1"] .cv3home-simbar { display: none !important; }

.cv3wall { display: flex; flex-direction: column; height: 100vh; background: #000; color: #fff; }
.cv3wall-h {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 6px 10px; background: #0A0C0C; border-bottom: 1px solid rgba(255,255,255,.12);
}
.cv3wall-h > b { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.cv3wall-h > span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums; }
.cv3wall-res { margin-left: auto; }
.cv3wall-a { display: flex; gap: 6px; flex: 0 0 auto; }
/*  ⚠ 관제 창의 단추는 **어두운 바탕 위**입니다 — 앱 단추를 그대로 쓰면 흰 판이
    떠서 눈이 그쪽으로 갑니다. 여기서만 어둡게 덮어씁니다. */
.cv3wall-a .cv3home-btn {
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.22);
  box-shadow: none; font-size: 12px; padding: 6px 11px; min-height: 32px;
}
.cv3wall-a .cv3home-btn.is-key { background: #2E7D8F; border-color: #2E7D8F; }
.cv3wall-a .cv3home-btn.is-off { background: rgba(224,69,58,.22); border-color: rgba(224,69,58,.55); }
.cv3wall-a .cv3home-btn:hover { filter: brightness(1.15); }
/*  격자 — 남는 높이를 다 씁니다. 칸 수는 인라인 style 이 정합니다. */
/*  🔴 실측으로 고쳤습니다 — `align-content: start` + `grid-auto-rows: auto` 라
    **첫 줄만 크고 아랫줄이 찌그러졌습니다**(실측: 125px / 40px).
    영상이 있는 칸은 비율대로 커지고 없는 칸은 글자 높이로 줄어든 것입니다.
    관제 화면에서 칸 크기가 다르면 «저 칸이 더 중요한가» 로 잘못 읽힙니다.
    ⇒ **모든 줄을 똑같이**(`1fr`) 두고 남는 높이를 나눠 씁니다. */
.cv3wall-g { flex: 1 1 auto; display: grid; gap: 1px; background: #000; padding: 1px;
  grid-auto-rows: 1fr; align-content: stretch; overflow: hidden; min-height: 0; }
.cv3wall-g .cv3home-cg-t {
  position: relative; display: block; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: #0A0C0C; overflow: hidden; box-shadow: none; cursor: pointer;
}
.cv3wall-g .cv3home-cg-v { display: grid; place-items: center; width: 100%; height: 100%;
  aspect-ratio: auto; background: #0A0C0C; overflow: hidden; }
.cv3wall-g .cv3home-cg-v img, .cv3wall-g .cv3home-cg-v video {
  width: 100%; height: 100%; object-fit: cover; display: block; }
.cv3wall-g .cv3home-cg-none { font-size: 12px; color: rgba(255,255,255,.55); text-align: center; }
.cv3wall-g .cv3home-cg-ch, .cv3wall-g .cv3home-cg-tm,
.cv3wall-g .cv3home-cg-nm, .cv3wall-g .cv3home-cg-al {
  position: absolute; font-size: 12px; font-weight: 800; color: #fff; padding: 3px 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.cv3wall-g .cv3home-cg-ch { top: 0; left: 0; background: rgba(0,0,0,.45); }
.cv3wall-g .cv3home-cg-tm { top: 0; right: 0; }
.cv3wall-g .cv3home-cg-nm { bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3wall-g .cv3home-cg-al { bottom: 0; right: 0; color: #FF6B5A; }
.cv3wall-g .cv3home-cg-t.is-crit { outline: 3px solid #E0453A; outline-offset: -3px; }
.cv3wall-g .cv3home-cg-t.is-warn { outline: 3px solid #D9A441; outline-offset: -3px; }
.cv3wall-none { padding: 40px 20px; text-align: center; font-size: 14px; color: rgba(255,255,255,.7); }
/*  «관제 창으로 크게» 단추 */
.cv3home .cv3home-cspop { width: 100%; margin: 6px 0 0; font-size: 11px; }

/*  🔴 관제 창에서는 **앱 껍데기를 통째로 감춥니다** (2026-09-12 대표님
    「별도의 DVR이나 NVR 등등의 기기가 필요 없게 되어야 합니다」).
    실측으로 남아 있던 것: 위 막대 106px · 왼쪽 레일 52px · 아래 띠 30px ·
    떠 있는 단추 둘. 옆 모니터에 켜 두는 **관제기 화면**에 앱 메뉴가 섞이면
    그건 관제기가 아닙니다. 영상이 화면을 다 써야 합니다. */
:root[data-wallchan="1"] .cv3-bar,
:root[data-wallchan="1"] .cv3-rail,
:root[data-wallchan="1"] .cv3-foot,
:root[data-wallchan="1"] .cv3-split,
:root[data-wallchan="1"] .cv3-right,
:root[data-wallchan="1"] .cv3-side,
:root[data-wallchan="1"] .hx-toast,
:root[data-wallchan="1"] .cv3home-say,
:root[data-wallchan="1"] .cnma-badge,
:root[data-wallchan="1"] [class*="cnma"],
:root[data-wallchan="1"] body > button { display: none !important; }
:root[data-wallchan="1"] .cv3-body { padding: 0 !important; margin: 0 !important;
  height: 100vh !important; max-height: 100vh !important; }
:root[data-wallchan="1"] .cv3-main { margin: 0 !important; padding: 0 !important;
  width: 100vw !important; height: 100vh !important; }
:root[data-wallchan="1"] .cv3home { width: 100vw !important; height: 100vh !important;
  margin: 0 !important; padding: 0 !important; }
:root[data-wallchan="1"] .cv3home-grid3 { height: 100vh !important; }
:root[data-wallchan="1"] html, :root[data-wallchan="1"] body {
  margin: 0 !important; padding: 0 !important; overflow: hidden !important; }

/*  ══ 분할 베젤 — 단추를 **틀 안에** (2026-09-12 · 대표님 「베젤을 너무 두껍지
    않게 만들고 관제창으로 크게와 채널이름 붙이기 단추를 베젤에 삽입합니다」 ·
    「영상 설정 단추도 베젤에 삽입 합니다」) ══
    ⚠ 칸 아래 전폭 단추를 두면 그만큼 영상이 내려갑니다. DVR 도 조작줄이 틀 안입니다.
    ⚠ 베젤은 **3px** — 있는 듯 없는 듯해야 영상이 커 보입니다. */
.cv3home .cv3home-cspw {
  margin: 6px 0 0; padding: 3px; border-radius: 5px; background: #0A0C0C;
  border: 1px solid rgba(255,255,255,.10);
}
/*  🔴 2026-09-12 — **줄바꿈을 켭니다.**
    실측: 레일이 좁을 때(132px) 베젤 단추줄의 속이 398px 이라 **294px 가 밖으로
    삐져나가 있었습니다.** `overflow-x` 가 `visible` 이라 잘리지도 스크롤되지도
    않고 **그냥 닿을 수 없는 자리**에 있었습니다 — ⚙ ＋ ▤ 가 그랬습니다.
    영상 아래 단추줄을 빼면서 「감시 설정 · 재실 기록」을 이 줄로 옮겼으니,
    닿을 수 없는 자리에 두면 **뺀 것과 같습니다.** 좁으면 아랫줄로 넘깁니다. */
.cv3home .cv3home-cspbar {
  display: flex; align-items: center; gap: 3px; padding: 0 1px 3px;
  flex-wrap: wrap; row-gap: 3px;
}
.cv3home .cv3home-cspbar-n {
  font-size: 10px; font-weight: 800; color: rgba(255,255,255,.62);
  letter-spacing: .03em; font-variant-numeric: tabular-nums; margin-right: auto;
}
.cv3home .cv3home-cspb {
  flex: 0 0 auto; min-width: 24px; min-height: 24px; padding: 0 6px;
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08); color: #fff;
}
.cv3home .cv3home-cspb:hover { background: rgba(255,255,255,.18); }
.cv3home .cv3home-cspb.is-on { background: #2E7D8F; border-color: #2E7D8F; }
.cv3home .cv3home-cspb.is-key { background: rgba(217,164,65,.28); border-color: rgba(217,164,65,.6); }
.cv3home .cv3home-csp { margin: 0; border-radius: 0; padding: 0; border: 0; }
.cv3home .cv3home-cspe {
  margin: 3px 1px 0; font-size: 10px; line-height: 1.45; color: #FFC4B8;
}

/*  ══ 한 채널만 크게 ══ */
.cv3pop-in.is-camone { max-width: 900px; width: 92vw; padding: 10px; background: #0A0C0C; }
.cv3camone-h { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; }
.cv3camone-h > b { font-size: 14px; font-weight: 800; color: #fff; }
.cv3camone-h > span { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3camone-a { display: flex; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.cv3camone-a .cv3home-btn {
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.22);
  box-shadow: none; font-size: 12px; padding: 6px 11px; min-height: 32px;
}
.cv3camone-a .cv3home-btn.is-key { background: #2E7D8F; border-color: #2E7D8F; }
.cv3camone-a .cv3home-btn.is-off { background: rgba(224,69,58,.22); border-color: rgba(224,69,58,.55); }
.cv3camone-v {
  width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden;
  display: grid; place-items: center;
}
.cv3camone-v img, .cv3camone-v video { width: 100%; height: 100%; object-fit: contain; display: block; }
/*  전체화면일 때는 화면을 다 씁니다 — 비율 고정을 풉니다. */
.cv3camone-v:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.cv3camone-n { margin: 8px 2px 0; font-size: 11px; color: rgba(255,255,255,.62); }
.cv3pop-in.is-camone .cv3pop-x { color: #fff; }

/*  ══ 고른 채널 · 채널별 설정 (2026-09-12 · 대표님 「영상 채널을 선택하면
    보더라인이 해당 채널을 감싸고 …」 · 「개별적으로 걸 수 없나요?」) ══ */
/*  🔴 고름 표시를 **확실하게** 바꿨습니다 (2026-09-12 · 대표님 「1채널도 파랗고
    2번 채널 선택해도 파랗습니다」).
    까닭: 고름(청록 #2E7D8F)과 «지금 보는 사람»(`is-on`, 연청록 #7AA6B3)이
    **같은 계열**이라 어느 것이 고른 것인지 구별되지 않았습니다.
    ⇒ 셋을 갈랐습니다:
       · **고름** — 밝은 노랑 **4px** + 바깥 그림자 + 왼쪽 위 「선택」 딱지
       · **지금 보는 사람** — 얇은 1px 회청록(있는 듯 없는 듯)
       · **경보** — 빨강 번쩍임(가장 셉니다)
    ⚠ 색만으로 가르지 않습니다 — **딱지 글자**가 함께 붙습니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-sel,
.cv3wall-g .cv3home-cg-t.is-sel {
  outline: 4px solid #FFC24B; outline-offset: -4px; z-index: 4;
  box-shadow: 0 0 0 2px rgba(255,194,75,.35), 0 0 14px rgba(255,194,75,.45);
}
.cv3home .cv3home-csp .cv3home-cg-t.is-sel::after,
.cv3wall-g .cv3home-cg-t.is-sel::after {
  content: '선택'; position: absolute; left: 0; bottom: 0;
  font-size: 10px; font-weight: 900; letter-spacing: .06em;
  padding: 2px 6px; background: #FFC24B; color: #3A2A05; z-index: 5;
  border-radius: 0 4px 0 0; pointer-events: none;
}
/*  🔴 «지금 보는 사람»(`is-on`) 테두리를 **뺐습니다** (2026-09-12 · 대표님
    「1번 파란색 보더라인은 뭔가요?」).
    맞는 물음입니다 — 그 파란 줄은 «대시보드에서 지금 보고 있는 사람» 이라는 뜻인데,
    **카메라 칸에서는 뜻이 없습니다.** 카메라를 볼 때 알아야 하는 것은
    «내가 고른 채널» 과 «경보» 둘뿐입니다. 뜻 없는 표시는 헷갈리게만 합니다.
    ⇒ 분할·관제에서는 **고름(노랑)** 과 **경보(빨강 번쩍)** 만 남깁니다.

    🔴 그냥 «내 규칙을 지우는 것» 으로는 안 됐습니다. **범위 없는 옛 규칙**이
       따로 있었습니다:
           `.cv3home-cg-t.is-on { outline: 3px solid #FFD95D }`   (4470줄)
       옛 관제 벽에서 쓰던 것인데 **선택자에 범위가 없어** 제가 새로 만든 분할
       칸에도 그대로 걸립니다. 같은 클래스 이름을 쓴 값입니다.
       ⇒ 제 칸 안에서 **명시적으로 끕니다.** 옛 규칙은 옛 벽에서 그대로 씁니다
         — 남의 화면을 건드리지 않습니다(R0-6). */
.cv3home .cv3home-csp .cv3home-cg-t.is-on:not(.is-sel):not(.is-blink),
.cv3wall-g .cv3home-cg-t.is-on:not(.is-sel):not(.is-blink) {
  outline: none; box-shadow: none;
}
/*  경보가 고름보다 셉니다 — 급한 것이 먼저 보여야 합니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-sel.is-crit,
.cv3wall-g .cv3home-cg-t.is-sel.is-crit { outline-color: #E0453A; }
/*  고른 칸에만 얹히는 단추 둘 */
.cv3home-cg-act {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 6px; z-index: 3;
}
.cv3home-cg-act > i {
  font-style: normal; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 6px; cursor: pointer; font-size: 15px;
  background: rgba(0,0,0,.62); color: #fff; border: 1px solid rgba(255,255,255,.35);
}
.cv3home-cg-act > i:hover { background: rgba(46,125,143,.9); }
/*  화면 맞춤 — 채널마다 다릅니다. */
.cv3home-cg-v.is-fit img, .cv3home-cg-v.is-fit video { object-fit: contain !important; }
.cv3home-cg-v.is-mirror img, .cv3home-cg-v.is-mirror video { transform: scaleX(-1); }

/*  ── 채널 설정 창 ── */
.cv3pop-in.is-chancfg { max-width: 460px; padding: 20px 20px 16px; }
.cv3chan-t { margin: 0; font-size: 19px; font-weight: 800; color: var(--hx-txt); }
.cv3chan-s { margin: 3px 0 14px; font-size: 12px; color: var(--hx-mut); }
.cv3chan-h { margin: 14px 0 6px; font-size: 11px; font-weight: 800; color: var(--hx-txt); }
.cv3chan-h > span { margin-left: 6px; font-weight: 700; color: var(--hx-mut); }
.cv3chan-f { display: flex; gap: 6px; }
.cv3chan-f input { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid rgba(126,101,66,.24); background: #fff; }
.cv3chan-b { display: flex; flex-wrap: wrap; gap: 5px; }
/*  🔴 단추가 **없는 것처럼 보였습니다** (2026-09-12 · 대표님 「세부 버튼 항목들이
    하나도 없어요」). 실측: 단추 바탕 `흰색 62%` ↔ 팝업 배경 **흰색** = **1.00:1**.
    글자만 떠 있고 단추의 몸이 안 보였습니다. 테두리도 1.39:1 이라 못 봅니다.
    ⇒ 바탕을 **눈에 보이는 회색**으로, 테두리를 **진하게**, 그림자로 들어 올립니다.
      (실측으로 다시 재서 맞췄습니다 — 바탕 1.21:1 · 테두리 2.9:1) */
.cv3chan-b button {
  font: inherit; font-size: 12px; font-weight: 700; padding: 8px 13px; min-height: 36px;
  border-radius: 999px; cursor: pointer;
  background: #EFECE4; border: 1.5px solid rgba(126,101,66,.45); color: var(--hx-txt);
  box-shadow: 0 1px 2px rgba(40,43,43,.10);
}
.cv3chan-b button.is-on { background: #1F6274; border-color: #1F6274; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
/*  ⚠ 켜짐을 **색만으로** 가르지 않습니다 — 앞에 체크를 붙입니다(색각 이상 대비). */
.cv3chan-b button.is-on::before { content: '✓ '; font-weight: 900; }
.cv3chan-b button:hover { filter: brightness(.97); }
/*  ⚠ 속도는 **숫자로** 보여 줍니다. 느리면 색으로도 알립니다(색만으로는 안 가릅니다 —
    글에도 「너무 느립니다」라고 적습니다). */
.cv3chan-fps { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 11px;
  line-height: 1.55; background: rgba(126,101,66,.08); color: var(--hx-txt); }
.cv3chan-fps.is-warn { background: #FBF1DE; }
.cv3chan-fps.is-bad { background: #FBE9E4; color: #8C2216; }
.cv3chan-w { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--hx-mut); }
.cv3chan-a { display: flex; gap: 8px; margin: 16px 0 0; }

/*  ══ 채널 설정 창 — **영상과 설정이 나란히** (2026-09-12 · 대표님 「영상과 설정
    메뉴가 뜨면 거기서 영상 기능을 설정한다는 것입니다」) ══
    ⚠ 설정만 띄우면 **무엇이 바뀌는지 못 보고** 고치게 됩니다. 좌우 반전도 겹쳐
      보기도 «보면서» 눌러야 압니다. */
.cv3pop-in.is-chancfg { max-width: 940px; width: 94vw; padding: 16px; }
.cv3chan-wrap { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(300px, 1fr); gap: 16px; }
@media (max-width: 760px) { .cv3chan-wrap { grid-template-columns: 1fr; } }
.cv3chan-vid { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv3chan-v {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px;
  background: #0A0C0C; overflow: hidden; display: grid; place-items: center;
}
.cv3chan-v img, .cv3chan-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv3chan-v.is-fit img, .cv3chan-v.is-fit video { object-fit: contain; }
.cv3chan-v.is-mirror img, .cv3chan-v.is-mirror video { transform: scaleX(-1); }
.cv3chan-v .cv3home-cg-ch {
  position: absolute; top: 0; left: 0; padding: 3px 6px; font-size: 11px; font-weight: 800;
  color: #fff; background: rgba(0,0,0,.45); text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.cv3chan-vb { display: flex; gap: 6px; }
.cv3chan-vb .cv3home-btn { flex: 1 1 auto; font-size: 12px; }
/*  설정 쪽 — 길어지면 그 칸만 스크롤합니다(영상은 자리에 남아 있어야 합니다). */
.cv3chan-set { min-width: 0; max-height: 72vh; overflow: auto; padding-right: 4px; }
.cv3chan-set .cv3chan-t { margin-top: 0; }

/*  ══ 이벤트 → **그 채널의 보더라인이 번쩍입니다** ══
    (2026-09-12 · 대표님 「이벤트가 발생하면 해당 채널의 베젤이 번쩍이며 별도의
     팝업을 띄웁니다」 · 「해당 채널의 보더라인이 번쩍입니다」)

    ⚠ **테두리만** 번쩍입니다. 영상을 깜빡이면 정작 봐야 할 장면을 못 봅니다.
    ⚠ **급한 것(crit)만** 번쩍입니다. 주의까지 깜빡이면 하루 종일 무언가가
      깜빡이고, 그러면 아무도 안 봅니다 — 정작 급할 때도.
    ⚠ 테두리는 **안쪽에** 그립니다(`outline-offset: -3px`). 바깥에 그리면 칸이
      밀려 베젤이 두꺼워집니다.
    ⚠ 색만으로 알리지 않습니다 — 칸 오른쪽 아래에 「● 경보」 글자가 함께 있습니다. */
@keyframes cv3chBlink {
  0%, 49%  { outline-color: #E0453A; }
  50%, 100% { outline-color: rgba(224, 69, 58, .18); }
}
.cv3home .cv3home-csp .cv3home-cg-t.is-blink,
.cv3wall-g .cv3home-cg-t.is-blink {
  outline: 3px solid #E0453A; outline-offset: -3px; z-index: 3;
  animation: cv3chBlink 1s steps(1, end) infinite;
}
/*  관제 창에서는 더 굵게 — 멀리서 보는 화면입니다. */
.cv3wall-g .cv3home-cg-t.is-blink { outline-width: 4px; outline-offset: -4px; }
/*  고른 채널이면서 경보면 **경보가 이깁니다** — 급한 것이 먼저 보여야 합니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-sel.is-blink,
.cv3wall-g .cv3home-cg-t.is-sel.is-blink { outline-color: #E0453A; }
/*  ⚠ 깜빡임에 약하신 분께는 깜빡이지 않습니다 — 대신 **두껍게** 둘러 급함을
    모양으로 알립니다. 끄기만 하면 «급함» 이 사라집니다. */
@media (prefers-reduced-motion: reduce) {
  .cv3home .cv3home-csp .cv3home-cg-t.is-blink,
  .cv3wall-g .cv3home-cg-t.is-blink { animation: none; outline-width: 5px; }
}
/*  이벤트 팝업의 영상도 채널 설정(맞춤·반전)을 따릅니다. */
.cv3campop-v.is-fit img, .cv3campop-v.is-fit video { object-fit: contain !important; }
.cv3campop-v.is-mirror img, .cv3campop-v.is-mirror video { transform: scaleX(-1); }
.cv3campop-a { flex-wrap: wrap; }

/*  🔴 **요양원 쪽 규칙과 갈라 둡니다** (2026-09-12 · 대표님 「요양원과
    분리시켜주세요」).
    까닭: `.cv3home-cg-t` 라는 **같은 클래스 이름**을 옛 관제 벽(요양원)과 새 분할이
    함께 씁니다. 그래서 요양원용으로 만든 규칙이 **범위 없이** 새 칸에도 걸렸습니다
    — 대표님이 보신 «1번 파란 보더라인» 이 그것입니다.
    ⇒ 새 분할·관제 창(`.cv3home-csp` · `.cv3wall-g`) 안에서는 **요양원 규칙을 모두
      끄고** 여기서 정한 것만 씁니다. 옛 벽은 손대지 않습니다(R0-6). */
/*  🔴 2026-09-13 · 대표님 「영상 분할화면에서 왜 1번은 선택을 해도 노란
    보더라인이 안보이나요?」
    ■ 여기였습니다. 바로 아래 `is-warn` 두 줄에는 `:not(.is-sel):not(.is-blink)` 가
      있는데 **`is-on` 두 줄에만 빠져 있었습니다.** 그래서 «지금 보는 사람» 칸은
      **골라도 노란 테두리가 지워졌습니다.**
    ■ 왜 «1번만» 이었나 — 1번 칸이 마침 «지금 보는 사람»(`is-on`)이었기 때문입니다.
      다른 칸을 고르면 잘 보였습니다. 대표님 말씀이 정확했습니다.
    ■ 이 규칙이 위쪽 `is-sel`(노랑) 규칙보다 **뒤에** 있고 특이도가 같아 **뒤가 이깁니다.**
    ⚠ 「요양원 규칙을 끈다」는 뜻은 그대로 둡니다 — **고른 칸만** 예외로 뺍니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-on:not(.is-sel):not(.is-blink),
.cv3wall-g .cv3home-cg-t.is-on:not(.is-sel):not(.is-blink),
.cv3home .cv3home-csp .cv3home-cg-t.is-warn:not(.is-sel):not(.is-blink),
.cv3wall-g .cv3home-cg-t.is-warn:not(.is-sel):not(.is-blink) {
  outline: none; box-shadow: none;
}
/*  주의(warn)는 **테두리 색**으로만 — 번쩍이지 않고, 고름을 가리지 않습니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-warn:not(.is-sel):not(.is-blink),
.cv3wall-g .cv3home-cg-t.is-warn:not(.is-sel):not(.is-blink) {
  border-color: rgba(217,164,65,.85);
}
/*  고름·경보일 때는 기본 선이 테두리 색과 싸우지 않게 투명으로. */
.cv3home .cv3home-csp .cv3home-cg-t.is-sel,
.cv3home .cv3home-csp .cv3home-cg-t.is-blink,
.cv3wall-g .cv3home-cg-t.is-sel,
.cv3wall-g .cv3home-cg-t.is-blink { border-color: transparent; }

/*  ── 조작줄 한 줄(−/+) ── */
.cv3chan-n {
  display: flex; align-items: center; gap: 6px; margin: 5px 0 0;
  padding: 6px 9px; border-radius: 10px; background: rgba(126,101,66,.07);
}
.cv3chan-n > span { font-size: 11px; font-weight: 800; color: var(--hx-txt); width: 48px; flex: 0 0 auto; }
.cv3chan-n > b { font-size: 13px; font-weight: 800; color: var(--hx-txt);
  min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.cv3chan-n button {
  font: inherit; font-size: 14px; font-weight: 800; line-height: 1;
  min-width: 34px; min-height: 34px; border-radius: 8px; cursor: pointer;
  background: #EFECE4; border: 1.5px solid rgba(126,101,66,.45); color: var(--hx-txt);
}
.cv3chan-n button:hover { filter: brightness(.96); }
.cv3chan-n .cv3chan-rs { margin-left: auto; font-size: 13px; min-width: 32px; }
.cv3chan-note { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: var(--hx-mut); }
/*  «자동» 맞춤 — 영상이 제 비율로 높이를 정합니다(검은 띠 없음). */
.cv3home-cg-v.is-auto img, .cv3home-cg-v.is-auto video,
.cv3chan-v.is-auto img, .cv3chan-v.is-auto video { object-fit: contain; }

/*  ══════════════════════════════════════════════════════════════════════════
    좌측 패널 — **공간 최적화** (2026-09-12 · 대표님 「첨부처럼 텍스트 박스가
    전부 너무 두꺼워요. 공간을 최적화 해야 합니다.」)
    ══════════════════════════════════════════════════════════════════════════
    ■ 어디서 두꺼워졌나 — 실측입니다.
        이름 줄 `.cv3home-nt-p`  **53px**  (min-height 42 + 위아래 13 패딩)
        센서 줄 `.cv3home-nt-s`  **54px**  (속의 단추가 **min-height 40**)
      40px 은 제가 앞서 「손가락으로 누를 수 있게」 넣은 값입니다. 그런데 이 패널은
      **마우스로 쓰는 데스크톱 옆칸**이고, 거기서 40px 는 줄마다 한 뼘씩 버리는 값입니다.
    ■ 얼마나 줄여도 되나 — **지어내지 않고 기준을 봅니다.**
      WCAG 2.5.8(AA)의 최소 목표 크기는 **24×24**, 44×44 는 AAA 입니다.
      그래서 **30~34px** 로 내립니다 — AA 를 넉넉히 넘기면서 줄을 크게 줄입니다.
    ⚠ **글자 크기는 안 줄입니다.** 공간을 줄이자고 글씨를 줄이면 읽기 어려워집니다 —
      줄이는 것은 **빈 자리**이지 글자가 아닙니다. */
.cv3home .cv3home-side .cv3home-nt-p {
  min-height: 34px; padding: 4px 8px 4px 10px;
}
.cv3home .cv3home-side .cv3home-nt-s {
  padding: 4px 8px; margin-top: 2px;
}
/*  줄 안의 단추 — **26px 정사각**. (2026-09-12 고침: 30 → 26)
    ⚠ 요양원 도구 단추는 22 입니다. 여기도 22 로 맞추려다 **멈췄습니다** —
      요양원 것은 「이름」「지움」처럼 **글자 단추**라 가로가 길어 손이 닿지만,
      이쪽은 **아이콘 하나짜리 정사각**이라 22×22 면 WCAG 2.5.8(AA) 최소 목표
      크기 **24×24 아래**로 내려갑니다. 눈에 깔끔하자고 못 누르게 만들 수는 없습니다.
      ⇒ **26×26** — AA 를 넘기면서 30 보다 한 눈금 작습니다. 여백·글자·칩은
        요양원과 같은 치수로 맞췄습니다(파일 맨 뒤 「이름 · 호칭 줄」 참조).
    ⚠ `padding: 0` 이어야 정사각이 됩니다 — 좌우 8px 이 남아 있으면 30 이 됩니다. */
.cv3home .cv3home-side .cv3home-nt-off,
.cv3home .cv3home-side .cv3home-nt-p button,
.cv3home .cv3home-side .cv3home-nt-s button {
  min-height: 26px; min-width: 26px; width: 26px; height: 26px; padding: 0;
}
/*  ⚠ 「고르기」 단추(이름 부분)는 **정사각이 아닙니다** — 위 규칙에서 빼냅니다.
    이름이 22px 칸에 갇히면 「강…」 으로 잘립니다. */
.cv3home .cv3home-side .cv3home-nt-p button.cv3home-nt-sel {
  width: auto; height: auto; min-width: 0; min-height: 26px; padding: 2px;
}
/*  묶음 제목 — 위아래 여백만 조입니다. */
.cv3home .cv3home-side .cv3home-side-t { margin-bottom: 4px; padding: 1px 2px; }
/*  이름 칸 사이 간격 */
.cv3home .cv3home-side .cv3home-nt-n { margin-bottom: 3px; }
/*  로고·이름 만들기·감시 현황도 같은 눈금으로 */
.cv3home .cv3home-side .cv3home-logo { padding: 6px 8px; }
.cv3home .cv3home-side .cv3home-add { padding: 5px 6px; gap: 5px; }
.cv3home .cv3home-side .cv3home-add input { min-height: 32px; padding: 5px 9px; }
.cv3home .cv3home-side .cv3home-add button { min-height: 32px; min-width: 32px; }
.cv3home .cv3home-side .cv3home-cov { padding: 6px 9px; }

/*  ── 채널별 카메라 연결 (2026-09-12 · 대표님 「각 채널에 카메라 연결 버튼이
    없어요」 · 「각 채널별요」) ── */
.cv3chan-conn { display: flex; flex-direction: column; gap: 6px; }
.cv3chan-conn > code {
  display: block; font-size: 11px; line-height: 1.5; padding: 6px 9px;
  border-radius: 8px; background: rgba(126,101,66,.09); color: var(--hx-txt);
  word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/*  ── 빈 칸 «＋ 카메라 연결» · 베젤의 분할 단추 (2026-09-12 대표님) ── */
/*  🔴 **점선을 다시 넣었다가 뺐습니다** (2026-09-12 · 대표님 「보더라인은 점선이
    아닙니다」 — 앞서 「보더라인은 점선으로 표시하지 않습니다」라고 이미 말씀하신
    것을 빈 칸을 만들며 **또 썼습니다.** 같은 지적을 두 번 받았습니다).
    ⇒ 빈 칸도 **실선**입니다. «비었다» 는 것은 테두리가 아니라 **칸 안의
      「＋ 카메라 연결」 글자**가 말합니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-empty {
  background: #12161A; border-style: solid; border-color: rgba(255,255,255,.30);
}
.cv3home .cv3home-csp .cv3home-cg-t.is-empty:hover { background: #1A2026; border-color: rgba(255,255,255,.55); }
.cv3home-cg-add {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 18px; font-weight: 800; color: rgba(255,255,255,.66);
}
.cv3home-cg-add > b { font-size: 10px; font-weight: 700; }
/*  분할 단추 — 베젤 안, 아주 작게. */
.cv3home .cv3home-cspg { display: inline-flex; gap: 2px; flex: 0 1 auto;
  flex-wrap: wrap; row-gap: 2px; }   /* 좁으면 분할 단추도 아랫줄로 (2026-09-12) */
.cv3home .cv3home-cspg button {
  font: inherit; font-size: 10px; font-weight: 800; line-height: 1;
  min-width: 22px; min-height: 24px; padding: 0 5px; cursor: pointer;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08); color: #fff;
}
.cv3home .cv3home-cspg button.is-on { background: #2E7D8F; border-color: #2E7D8F; }
.cv3home .cv3home-cspg button:hover { background: rgba(255,255,255,.18); }
/*  연결 안내의 코드 조각 */
.cv3home-ask code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 1px 4px; border-radius: 4px; background: rgba(126,101,66,.12); }

/*  ══ 점선을 쓰지 않습니다 (2026-09-12 · 대표님 「보더라인은 점선으로 표시하지
    않습니다」 → 「보더라인은 점선이 아닙니다」) ══
    ⚠ **같은 지적을 두 번** 받았습니다. 한 곳만 고치고 넘어갔기 때문입니다 —
      빈 칸을 만들면서 **또 점선을 썼습니다.** 그래서 규칙으로 삼고 파일 전체를
      훑었습니다(20곳). 「명단으로 반만 고치기」를 오늘만 세 번째 겪습니다.
    ⚠ 점선이 나르던 뜻(«비었다 · 아직이다 · 곧 그럴 것»)은 **글자와 색**이 대신
      말합니다 — 「＋ 카메라 연결」 · 「쌓는 중」 · 「값이 오면 켜집니다」.
      테두리 모양으로 말하던 것을 **글로** 옮긴 것이지 지운 것이 아닙니다.
    ⚠ 되돌리실 곳이 있으면 `care-home.css.bak-점선전` 에 그대로 있습니다. */
/*  어안 상태줄 — «왜 안 폈는지» 를 적는 자리 */
.cv3chan-fe { margin: 6px 0 0; padding: 6px 9px; border-radius: 8px;
  font-size: 11px; line-height: 1.5; background: rgba(126,101,66,.08); color: var(--hx-mut); }
/*  ── 채널 설정 창 안으로 옮겨 온 «화면 아래 조작줄» ──────────────────────
    (2026-09-12 · 대표님 「작은 단추 버튼들을 그대로 올리세요」)
    ⚠ 단추 **모양은 손대지 않습니다** — 저쪽과 같은 단추여야 같은 것으로 보입니다.
      좁은 창에 맞게 **줄바꿈과 높이만** 다듬습니다. */
.cv3chan-bar { margin-top: 6px; max-height: 190px; overflow-y: auto;
  border-radius: 10px; background: rgba(126,101,66,.06); padding: 2px; }
.cv3chan-bar .cv3chan-ownbar { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; padding: 6px 7px; margin: 0; width: auto; background: none; border: 0; }
.cv3chan-bar .brk { flex-basis: 100%; height: 0; margin: 2px 0 0; }
/*  🔴 2026-09-12 · 대표님 「버튼들이 하나를 클릭하면 막 뒤죽박죽 왔다갔다 합니다」
    까닭: 조작줄의 `.sp` 는 **늘었다 줄었다 하는 여백**(`flex:1 1 auto`)입니다.
    넓은 카메라 창에서는 오른쪽으로 밀어 주는 고마운 칸이지만, 좁은 설정 창에서
    줄이 접히면 **누를 때마다 단추가 좌우로 튕깁니다.** 여기서는 못을 박습니다. */
.cv3chan-bar .sp { flex: 0 0 6px !important; width: 6px; }
.cv3chan-bar .cv3chan-ownbar { align-content: flex-start; }
/*  켜짐 표시가 **글자 굵기·여백을 바꾸지 않게** — 폭이 바뀌면 그것도 튕깁니다. */
.cv3chan-bar .cv3-btn, .cv3chan-bar .cv3-btn.is-on,
.cv3chan-bar .cv3-btn[aria-pressed="true"] {
  font-weight: 700; padding: 2px 8px; border-width: 1px; }
.cv3chan-bar .cv3-btn::before, .cv3chan-bar .cv3-btn::after { content: none !important; }
/*  밝은 바탕에 올라온 조작줄 — **모양은 그대로**, 두 가지만 바로잡습니다.
    ① 켜진 단추 글자 대비 2.11:1 (실측) → 밝은 바탕에서 안 읽힙니다.
       ⚠ 저쪽(어두운 카메라 창)은 건드리지 않습니다 — 여기 슬롯 안에서만 덮습니다.
    ② 단추 높이 21px → WCAG 2.5.8 AA 최소 24px. */
.cv3chan-bar .cv3-btn { min-height: 24px; }
.cv3chan-bar .cv3-btn.is-on,
.cv3chan-bar .cv3-btn[aria-pressed="true"] {
  background: #4A4320; color: #FFF6D8; border-color: #4A4320; }
.cv3chan-bar select { min-height: 24px; }
/*  ── AI 가 지금 보는 칸 ──────────────────────────────────────────────────
    (2026-09-12 · 대표님 「각 채널 모두 개별적으로 분리시켜 주세요」)
    ⚠ **사람의 선택(`is-sel`)과 절대 섞지 않습니다.** 전에는 AI 순찰이 선택
      자체를 덮어써서 「1번을 눌러도 선택이 안 된다」가 됐습니다.
      이제 AI 는 **얇은 청록 안쪽 선 + ◉AI 딱지**로만 알립니다 —
      선택 테두리(굵은 호박색 + 「선택」 딱지)를 건드리지 않습니다. */
.cv3home .cv3home-csp .cv3home-cg-t.is-look::before,
.cv3wall-g .cv3home-cg-t.is-look::before {
  content: ''; position: absolute; inset: 2px; z-index: 3; pointer-events: none;
  border: 2px solid rgba(38,166,154,.85); border-radius: 3px; }
.cv3home .cv3home-csp .cv3home-cg-t.is-sel.is-look::before,
.cv3wall-g .cv3home-cg-t.is-sel.is-look::before { inset: 6px; }
.cv3home-cg-ai { position: absolute; right: 0; top: 0; z-index: 6;
  font-size: 10px; font-weight: 900; letter-spacing: .04em;
  padding: 2px 5px; background: #1F6F66; color: #E6FFFA;
  border-radius: 0 0 0 4px; pointer-events: none; }
/*  ⚠ 안전장치 — `hidden` 이 `display:flex` 에 지지 않게.
    (2026-09-12 · 대표님 「화면 아래에 왜 이게 뜬거죠?」 — 조작줄이 바닥에 깔렸습니다.) */
.cv3-camfit[hidden], .cv3chan-ownbar[hidden] { display: none !important; }
/*  작은 칸의 «가림» 딱지 — 진짜 실루엣과 구분해서 말합니다.
    (2026-09-12 · 대표님 「이건 실루엣이 아니라 그냥 화질을 뭉갠거예요」) */
.cv3home-cg-sil { position: absolute; left: 0; top: 0; z-index: 6;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 5px; background: rgba(20,22,24,.82); color: #E6E9EC;
  border-radius: 0 0 4px 0; pointer-events: none; }
/*  ⚠ 2026-09-12 — 여기 있던 «아바타와 이야기» CSS 를 **뺐습니다.**
    이 화면에는 이미 「AI 상담」(`cv3home-ch-*`)이 있었는데 제가 같은 이름으로
    두 벌째를 만들었습니다. 기존 것에 판정 답변을 붙이는 쪽으로 고쳤습니다. */
/*  ══ 말풍선 타이포 위계 ═══════════════════════════════════════════════════
    (2026-09-12 · 대표님 「타이포 그래피가 잘 안보이는 구조이고」)

    🔴 대표님 지적이 맞습니다. 말풍선의 글자가 **12px 과 11px 둘뿐**이라
       어느 것이 결론인지 눈에 안 들어왔습니다. 다 같은 크기로 쏟으면
       읽는 사람이 **직접 골라내야** 합니다 — 그건 화면이 할 일입니다.
    ⇒ 세 층으로 가릅니다: **판정(크게) · 받치는 말(보통) · 근거(작게·흐리게)**.
    ⚠ 크기만 키우지 않습니다. **줄 간격·자간·색**이 같이 가야 층이 보입니다. */
/*  🔴 제 자가 틀렸습니다 — 받침은 `span` 이 아니라 **`p.cv3ava-sub`** 입니다.
    `.cv3ava-bub p` 로 규칙을 걸었더니 **판정과 받침이 똑같이 커져** 위계가
    오히려 사라졌습니다. 화면을 안 보고 선택자를 짐작한 탓입니다.
    ⇒ 판정(`.cv3ava-lead`) · 받침(`.cv3ava-sub`) · 출처(`span`)를 따로 겁니다. */
.cv3ava-bub .cv3ava-lead {
  font-size: 15px; line-height: 1.5; font-weight: 700;
  letter-spacing: -.01em; color: var(--hx-txt);
}
.cv3ava-bub .cv3ava-sub {
  margin-top: 7px;
  font-size: 12.5px; line-height: 1.7; font-weight: 500;
  color: var(--hx-txt2); letter-spacing: 0;
}
/*  두 번째 받침부터는 한 칸 더 조용하게 — 층이 셋이어야 «결론» 이 떠오릅니다. */
.cv3ava-bub .cv3ava-sub + .cv3ava-sub { margin-top: 4px; font-size: 11.5px; color: var(--hx-mut2); }
.cv3ava-bub span {
  display: block; margin-top: 7px; font-size: 11px; color: var(--hx-mut2);
}
/*  급한 말은 **빛깔로도** 갈라 줍니다 — 크기만으로는 급한 줄 모릅니다. */
.cv3ava.is-crit .cv3ava-bub .cv3ava-lead { color: #A32B1F; }
.cv3ava.is-warn .cv3ava-bub .cv3ava-lead { color: #8A5A12; }
/*  ⚠ 키웠으니 **높이도** 키웁니다. 안 그러면 두 줄만 보이고 나머지가 잘립니다. */
.cv3ava-bub { max-height: 176px; }
/*  ══ 말풍선이 «천천히 흐르게» ══════════════════════════════════════════════
    (2026-09-12 · 대표님 「타이포로 천천이 흐르게」 「한번에 훅 나와 버리는것 같아요」)

    ⚠ `is-flash` 는 원래 «숫자가 튀는» 결입니다. 말풍선에는 그 결이 안 맞습니다 —
      말은 튀지 않고 **떠오릅니다.** 그래서 말풍선일 때만 덮어씁니다.
    ⚠ 차례가 핵심입니다: 판정(0s) → 받침(0.35s) → 근거(0.6s).
      한꺼번에 나오면 어디부터 읽을지 모릅니다. */
.cv3ava-bub.is-flash { animation: none; }
.cv3ava-bub.is-flash .cv3ava-lead { animation: cvhSayIn .55s cubic-bezier(.22,.9,.25,1) both; }
.cv3ava-bub.is-flash .cv3ava-sub { animation: cvhSayIn .55s cubic-bezier(.22,.9,.25,1) both; animation-delay: .38s; }
.cv3ava-bub.is-flash .cv3ava-sub + .cv3ava-sub { animation-delay: .68s; }
.cv3ava-bub.is-flash span { animation: cvhSayIn .55s cubic-bezier(.22,.9,.25,1) both; animation-delay: .95s; }
@keyframes cvhSayIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/*  읽는 결 — 천천히 흐르려면 **줄 사이와 자간**도 함께 넉넉해야 합니다.
    빨리 나오는 것만 늦춘다고 «천천히 읽히는» 글이 되지 않습니다. */
@media (prefers-reduced-motion: reduce) {
  .cv3ava-bub.is-flash .cv3ava-lead, .cv3ava-bub.is-flash .cv3ava-sub,
  .cv3ava-bub.is-flash span { animation: none; }
}
/*  ── 칸마다 남겨 두는 겹쳐 보기 그림 ─────────────────────────────────────
    (2026-09-12 · 대표님 「최대한으로 모든 채널에 적용되게 해주세요」)
    ⚠ 엔진은 하나라 한 번에 한 칸만 «그립니다». 나머지 칸은 **마지막 그림**을
      이 캔버스에 남겨 둡니다 — 그래야 네 칸 모두 겹쳐 보기가 보입니다.
    ⚠ 지금 엔진이 그리는 칸에는 진짜 캔버스(`hx-vo`)가 올라오므로, 이것은
      그 아래에 깔립니다(z-index 로 가립니다). */
.hx-vo-keep {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; opacity: .92;
}
.hxrc-stage canvas.hx-vo { z-index: 3; }
/*  칸이 많을 때의 정직한 한 줄 — 숨기면 「상시」가 거짓말이 됩니다. */
.cv3home-cg-note { font-size: 10.5px; color: var(--hx-mut2); margin-left: 6px;
  white-space: nowrap; }
.cv3home-cg-note b { color: var(--hx-txt2); }
/*  ── 분석을 어디서 할까 ──────────────────────────────────────────────────
    (2026-09-12 · 대표님 「분석일 브라우저 또는 박스로 선택할 수 있게」) */
.cv3home-ana { margin-top: 10px; }
.cv3home-ana-b { display: flex; gap: 6px; margin-bottom: 6px; }
.cv3home-ana-b button { flex: 1 1 0; min-height: 30px; border-radius: 9px;
  border: 1.5px solid var(--hx-line); background: #EFECE4; color: var(--hx-txt);
  font-size: 12px; font-weight: 700; cursor: pointer; }
.cv3home-ana-b button.is-on { background: #4A4320; color: #FFF6D8; border-color: #4A4320; }
.cv3home-ana-f { display: flex; gap: 6px; margin-bottom: 6px; }
.cv3home-ana-f input { flex: 1 1 auto; min-height: 30px; padding: 3px 9px;
  border-radius: 8px; border: 1px solid var(--hx-line); font-size: 12px;
  background: #fff; color: var(--hx-txt); }
.cv3home-ana-f button { min-height: 30px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--hx-line); background: #EFECE4; color: var(--hx-txt);
  font-size: 12px; font-weight: 700; cursor: pointer; }
/*  상태 — **붙었는지 아닌지를 빛깔로도** 가릅니다. 글자만으로는 안 보입니다. */
.cv3home-ana-s { margin: 0 0 5px; padding: 5px 9px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.5; background: rgba(126,101,66,.08); color: var(--hx-txt2); }
.cv3home-ana-s.is-ok { background: rgba(31,111,102,.12); color: #1F6F66; font-weight: 700; }
.cv3home-ana-s.is-bad { background: rgba(163,43,31,.10); color: #A32B1F; font-weight: 700; }
.cv3home-ana-n { margin: 0 0 4px; font-size: 10.5px; line-height: 1.55; color: var(--hx-mut2); }
.cv3home-ana-n code { font-size: 10px; padding: 1px 4px; border-radius: 4px;
  background: rgba(126,101,66,.10); }

/* ══════════════════════════════════════════════════════════════════════════
   「이름 · 호칭」 줄 — **요양원 줄과 같은 짜임으로** (2026-09-12 · 대표님 지시)
   > 「첨부 부분을 요양원과 같이 깔끔한 구조로 정리해 주세요.」 「간격 사이즈 기타 등등요」

   ■ 재 보니 이랬습니다 (200px 레일, 실측)
       · 이름 칸 높이 **74px** — 단추가 못 들어가 **두 줄로 접혀** 있었습니다.
       · 기능 단추 **30×30** — 규칙 두 벌이 싸우고 있었습니다.
         `.cv3home-ib`(26×26·padding 0) vs `.cv3home-nt-x button`(min-height 26·padding 4/7).
         **뒤엣것이 이겨** 30이 됐습니다. 요양원 도구 단추는 22 입니다.
       · 아이콘이 **`fill:#000 · stroke:none`** 이었습니다 → 선으로만 그린 아이콘
         (＋ · 떼기)은 **면적이 0 이라 아무것도 안 그려졌습니다.** 대표님 그림의
         «빈 동그라미» 와 «● ●» 가 그것입니다. 붓·휴지통만 검은 덩어리로 보였습니다.
   ■ 요양원 쪽 치수 (`.cv3home-ft-b` · `.cv3home-ft-x`)
       칸 padding 6/9 · gap 6 · 글자 11 · 번호칩 16×16(r5) · 상태칩 2/6 · 도구 22
     ⇒ **같은 치수로 맞춥니다.**
   ══════════════════════════════════════════════════════════════════════════ */

/*  ① 아이콘을 **선으로** 그립니다 — 이 아이콘들은 선으로 그린 것입니다.
    ⚠ `ico()` 가 쓰는 모든 자리(35곳)에 함께 듣습니다. 면으로 칠하면
      ＋ · 떼기처럼 **선만 있는 아이콘은 사라집니다.** */
.cv3home-ic {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/*  ⚠ 딱 하나, **테마 아이콘의 반달**은 칠해야 뜻이 삽니다(`fill="currentColor"`).
    CSS 는 태그에 적힌 `fill` 을 **이깁니다** — 그래서 예외를 적어 둡니다.
    안 그러면 반달이 사라져 그냥 동그라미가 됩니다. */
.cv3home-ic [fill="currentColor"] { fill: currentColor; }

/*  ② 이름 칸 — 요양원 자리 줄과 같은 여백·높이 */
.cv3home-nt-p {
  gap: 6px; padding: 6px 9px; min-height: 32px; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .09);
  transition: background .12s ease;
}
/*  ⚠ 떠오르는 효과를 뺍니다 — 요양원 줄은 움직이지 않습니다. 목록이 길어지면
    칸마다 들썩여 «깔끔» 과 반대가 됩니다. */
.cv3home-nt-p:hover { transform: none; box-shadow: 0 1px 2px rgba(20, 24, 28, .14); }

/*  ③ 이름표 — 요양원 번호칩과 같은 16×16 */
.cv3home-nt-p .cv3home-av {
  width: 16px; height: 16px; border-radius: 5px; font-size: 11px;
}

/*  ④ 이름 · 상태칩을 **붙여 놓습니다.**
    ⚠ 여태 `margin-left:auto` 가 **두 군데**(상태칩 · 도구묶음) 있어서 남는 자리를
      둘이 나눠 가졌습니다 — 그래서 「강민구」와 「5분 평균」 사이가 휑했습니다.
      요양원은 auto 가 **도구묶음 하나뿐**입니다. 그대로 맞춥니다. */
.cv3home-nt-sel { flex: 0 1 auto; gap: 6px; padding: 2px; font-size: 11px; }
.cv3home-nt-sel b { flex: 0 1 auto; font-weight: 700; }
.cv3home-nt-sel i { margin-left: 0; font-size: 11px; padding: 2px 6px; }

/*  ⑤ 기능 단추 — 규칙 두 벌을 **한 벌로**. 크기는 위쪽 「좌측 패널 눈금」 블록이
    정합니다(26×26 · 왜 22 가 아닌지는 거기 적어 두었습니다). 여기서는 모양만. */
.cv3home-nt-x { margin-left: auto; gap: 4px; padding-left: 0; align-items: center; }
.cv3home-nt-x button,
.cv3home-nt-x .cv3home-ib { border-radius: 7px; box-shadow: none; }
.cv3home-nt-x .cv3home-ic { width: 14px; height: 14px; }

/*  ⑥ 센서 줄도 같은 여백으로 */
.cv3home-nt-s {
  margin: 3px 0 0 18px; padding: 6px 9px; gap: 6px; font-size: 11px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .09);
}
.cv3home-nt-s b { font-weight: 700; }
.cv3home-nt-off.cv3home-ib { margin-left: 6px; border-radius: 7px; }
.cv3home-nt-off.cv3home-ib .cv3home-ic { width: 14px; height: 14px; }

/*  ⑦ 머리줄 — 칸과 같은 들여쓰기, 같은 글자 크기 */
.cv3home-ntree > .cv3home-side-t { margin-bottom: 6px; }

/*  ⑧ **트리 간격** — 대표님 「트리 간격도 맞춰주세요」 「지금은 트리 간격이
    필요 없이 넓어요」

    ■ 어디서 넓어졌나 (실측, 180px 레일)
        이름 줄 사이 **87px**. 그 속을 뜯어 보면
          칸 66 + **펼침 표시 ▸ 가 혼자 쓰는 한 줄 15** + 바깥 여백 6.
        ▸ 는 `summary::after` 가 `display:block` 이라 **칸 아래 제 줄**을 차지하고
        있었습니다. 자식도 센서도 없는 줄(대부분)에도 똑같이 붙어 있었습니다 —
        **아무것도 안 펼쳐지는 자리에 펼침 표시**가 있었던 셈입니다.
    ■ 고침
        · 펼칠 것이 **있는 줄에만** ▸ 를 남깁니다.
        · 그 ▸ 도 제 줄을 쓰지 않게 **높이를 0 으로** 접고 칸 옆에 붙입니다.
        · 줄 사이 여백은 요양원 자리 줄과 같은 **3px**, 센서 줄은 **2px**.
    ⚠ 들여쓰기 눈금(12px)은 **요양원과 같은 값**이라 그대로 둡니다. */
.cv3home-nt-n > summary { position: relative; }
.cv3home-nt-n > summary::after {
  position: absolute; left: -10px; top: 50%; margin: 0; line-height: 1;
  transform: translateY(-50%); transform-origin: center;
}
.cv3home-nt-n[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
/*  ⚠ 펼칠 것이 없으면 표시도 없습니다 — 없는 문에 손잡이를 달지 않습니다. */
.cv3home-nt-n:not(:has(> .cv3home-nt-n, > .cv3home-nt-s)) > summary::after { content: none; }
/*  ⚠ `:has()` 를 못 읽는 브라우저에서도 **줄이 벌어지지만 않게** 막아 둡니다. */
@supports not selector(:has(*)) {
  .cv3home-nt-n > summary::after { position: static; display: inline-block;
    height: 0; overflow: hidden; margin: 0 0 0 12px; }
}
/*  줄 사이 — 요양원 자리 줄과 같은 눈금 */
.cv3home .cv3home-side .cv3home-nt-n { margin-bottom: 3px; }
.cv3home .cv3home-side .cv3home-nt-n .cv3home-nt-n { margin-top: 3px; }
.cv3home .cv3home-side .cv3home-nt-s { margin: 2px 0 0 12px; }
/*  들여쓰기 한 칸에 12px — 요양원 `.cv3home-ft-r` 와 같은 값입니다. */
.cv3home-nt-n { padding-left: calc(var(--d, 0) * 12px); }

/*  ⑨ 센서 붙이기 고르는 칸 (2026-09-12 · 대표님 「센서 붙이기 기능 넣어주세요」)
    ⚠ 「+ 하위」·「이름 바꾸기」 폼과 **같은 자리·같은 여백**입니다 — 이름 줄 바로
      밑에 펴집니다. 창을 열면 어느 이름에 붙이는 중인지 잊게 됩니다. */
.cv3home-nt-f.is-tie { display: block; }
.cv3home-tie-hd {
  margin: 0 0 5px; font-size: 11px; font-weight: 800; color: var(--hx-txt);
}
.cv3home-tie-l { display: flex; flex-direction: column; gap: 3px; }
.cv3home-tie-s {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  font: inherit; font-size: 11px; cursor: pointer;
  min-height: 26px; padding: 4px 8px; border: 0; border-radius: 8px;
  background: #FFFFFF; color: #282B2B; box-shadow: 0 1px 2px rgba(20, 24, 28, .09);
}
.cv3home-tie-s:hover { background: #F4F2EB; }
/*  ⚠ 실측: 좁은 레일에서 **모델 이름이 「AS-…」로 잘렸습니다.** 이름과 시리얼이
    한 줄에서 서로 자리를 뺏었기 때문입니다. 어느 센서인지 아는 글자는 **모델 이름**
    이므로, 시리얼을 **아랫줄로 내립니다.** 지우지 않고 자리만 옮깁니다. */
.cv3home-tie-s { flex-wrap: wrap; row-gap: 0; }
.cv3home-tie-s b { flex: 1 1 auto; min-width: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-tie-s em {
  order: 3; flex: 1 1 100%;
  font-style: normal; font-size: 10px; color: var(--hx-mut2);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3home-tie-s i {
  margin-left: auto; flex: 0 0 auto; font-style: normal;
  font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  background: #EFEDE6; color: #6B6E66; white-space: nowrap;
}
.cv3home-tie-s i.ok { background: #DDEFE4; color: #1B5E3A; }
/*  ⚠ 옮기는 것은 **빛깔로도** 달라야 합니다 — 누르면 남의 이름에서 떨어집니다. */
.cv3home-tie-s.is-move i { background: #F6EEDC; color: #7A5B10; }
.cv3home-tie-n { margin: 5px 0 0; font-size: 10.5px; line-height: 1.55; color: var(--hx-mut2); }
.cv3home-tie-n b { color: var(--hx-txt2); font-weight: 800; }
.cv3home-tie-o { margin-top: 6px; }
.cv3home-tie-o > summary {
  list-style: none; cursor: pointer; font-size: 10.5px; font-weight: 800;
  color: var(--hx-mut); padding: 3px 2px;
}
.cv3home-tie-o > summary::-webkit-details-marker { display: none; }
.cv3home-tie-o > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.cv3home-tie-o[open] > summary::before { transform: rotate(90deg); }
/*  붙이기 단추 — 떼기(붉은 계열)와 **반대 빛깔**로 둡니다 */
.cv3home-nt-x .cv3home-ib.is-tie { background: #DDEFE4; color: #1B5E3A; }
.cv3home-nt-x .cv3home-ib.is-tie:hover { background: #C8E5D3; }

/*  ⑩ 자리 한 번에 만들기 — 안방 · 화장실 · 거실 …
    (2026-09-12 · 대표님 「강민구 아래 안방 → 화장실 → 거실 등을 생성하고
     각 위치를 선택하여 바로 센서를 붙일 수 있게 해주세요.」)
    ⚠ 입력칸 **위**에 둡니다 — 먼저 보이는 것이 «누르면 끝나는 길» 이어야 합니다.
      직접 치는 칸은 그대로 아래 남습니다(목록에 없는 자리를 위해). */
.cv3home-nt-pre {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 4px 0 5px 12px;
}
.cv3home-nt-pre button {
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  min-height: 26px; padding: 0 9px; border: 0; border-radius: 999px;
  background: #FFFFFF; color: #3A3D35; box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
  white-space: nowrap;
}
.cv3home-nt-pre button:hover { background: #F1EFE8; }
.cv3home-nt-pre button::before { content: '+ '; color: #16457A; font-weight: 800; }

/*  ⑪ 카메라 붙이기 — 센서 붙이기와 **같은 칸**을 씁니다 (2026-09-12 대표님 지시).
    빛깔만 갈라 둡니다: 센서는 초록(🔗), 카메라는 남색(📷). */
.cv3home-nt-x .cv3home-ib.is-cam { background: #E4EEF6; color: #16457A; }
.cv3home-nt-x .cv3home-ib.is-cam:hover { background: #D3E4F1; }
/*  ⚠ 「지금 무엇이 붙어 있는지」는 **고르기 전에** 보여야 합니다 — 고른 뒤에
    물어보면 이미 마음을 정한 뒤입니다. */
.cv3home-tie-n.is-now {
  margin: 0 0 5px; padding: 5px 8px; border-radius: 8px;
  background: rgba(217, 164, 65, .14); color: #7A5B10; font-weight: 700;
}
.cv3home-tie-n.is-now b { color: #5C4408; }

/*  ⑫ 붙이기 칸을 **장비 갈래로** 나눕니다 (2026-09-12 · 대표님
    「카메라 종류와 붙이는 방법도 다양하고 레이더 센서도 마찬가지로 AIM24,
     AS-613, XK300 Essence이며 붙이는 방법도 제 각각 설정해야 합니다.」)
    ⚠ 갈래 머리에 **그 장비의 방법**과 **없는 것**을 적습니다. 같은 목록에
      뒤섞으면 AS-613 과 AIM24 가 같은 물건으로 보입니다. */
.cv3home-tie-g { margin: 0 0 8px; }
.cv3home-tie-g:last-child { margin-bottom: 0; }
.cv3home-tie-gt {
  display: flex; align-items: baseline; gap: 6px; margin: 0 0 3px;
  font-size: 11px; color: var(--hx-txt);
}
.cv3home-tie-gt b { font-weight: 800; }
.cv3home-tie-gt span {
  margin-left: auto; flex: 0 0 auto; font-size: 10px; font-weight: 800;
  color: var(--hx-mut2); font-variant-numeric: tabular-nums;
}
.cv3home-tie-gh {
  margin: 0 0 4px; font-size: 10.5px; line-height: 1.55; color: var(--hx-mut);
}
.cv3home-tie-gh code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  padding: 1px 4px; border-radius: 4px; background: rgba(126, 101, 66, .10);
}
/*  ⚠ **없는 것**은 빛깔로도 갈라 둡니다 — AIM24 에 호흡·심박이 없다는 사실을
    모르고 붙이면 「호흡 —」 을 보고 고장으로 읽습니다. */
.cv3home-tie-gl {
  margin: 0 0 4px; padding: 3px 7px; border-radius: 7px;
  font-size: 10.5px; line-height: 1.5;
  background: rgba(163, 43, 31, .09); color: #8A2B2B;
}
.cv3home-tie-gl b { font-weight: 800; }

/*  ⚠ 실측: 갈래가 넷·다섯이 되니 붙이기 칸이 **766px** 이 됐습니다 — 화면보다 깁니다.
    칸 **안에서만** 구르게 합니다. 밖으로 밀면 이름 줄이 화면에서 사라집니다. */
.cv3home-nt-f.is-tie { max-height: 46vh; overflow-y: auto; }

/*  갈래마다 「이 장비 설정」 — 설정 칸이 **실제로 있는 장비만** 단추입니다.
    없는 장비는 그 사실을 적습니다(누르면 빈 칸이 뜨는 단추를 달지 않습니다). */
.cv3home-tie-gs { margin: 0 0 5px; }
button.cv3home-tie-set {
  font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
  min-height: 24px; padding: 0 9px; border: 0; border-radius: 999px;
  background: #E4EEF6; color: #16457A;
}
button.cv3home-tie-set:hover { background: #D3E4F1; }
.cv3home-tie-set.is-none { font-size: 10.5px; color: var(--hx-mut2); line-height: 1.5; }
.cv3home-tie-set.is-none code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  padding: 1px 4px; border-radius: 4px; background: rgba(126, 101, 66, .10);
}

/*  ⑬ 이름 아래 「센서 · 카메라」 줄 — 장비 표식을 세워 둡니다
    (2026-09-12 · 대표님 「이름 아래에 센서가 생성되고 센서에서 613, XK300, AIM24 등의
     연결 SVG 단추를 클릭하면 각 센서 별 연결 방식이 팝업으로 뜨고 설정을 통해
     연결할 수 있게 해주세요.」 · 「카메라도 이렇게 해주세요」 「이 방식으로 변경」) */
.cv3home-nt-sadd { margin: 0 0 7px; }
.cv3home-nt-sadd-t {
  margin: 0 0 4px; font-size: 10.5px; line-height: 1.5; color: var(--hx-mut2);
}
.cv3home-nt-sadd-t b { color: var(--hx-txt2); font-weight: 800; }
.cv3home-nt-sadd-b { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3home-nt-sadd-b button {
  position: relative; flex: 1 1 62px; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; font-size: 10px; font-weight: 800; cursor: pointer;
  min-height: 44px; padding: 5px 4px; border: 0; border-radius: 9px;
  background: #FFFFFF; color: #3A3D35; box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
}
.cv3home-nt-sadd-b button:hover { background: #F1EFE8; }
.cv3home-nt-sadd-b .cv3home-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.cv3home-nt-sadd-b button b { font-weight: 800; white-space: nowrap; }
/*  이 자리에 **몇 대 붙어 있는지** — 단추 위에 그대로 적습니다. */
.cv3home-nt-sadd-b button i {
  position: absolute; top: 3px; right: 4px; font-style: normal;
  font-size: 9px; font-weight: 800; line-height: 1; padding: 2px 4px;
  border-radius: 999px; background: #DDEFE4; color: #1B5E3A;
}
.cv3home-nt-sadd.is-cam .cv3home-ic { color: #16457A; }

/*  ══ 장비 연결 팝업 — 방식을 읽고, 넣고, 붙입니다 ══════════════════════ */
.cv3pop-in.cv3sp { max-width: min(760px, 94vw); }
.cv3sp-hd { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.cv3sp-hd .cv3home-ic { width: 30px; height: 30px; flex: 0 0 auto; color: var(--hx-txt); }
.cv3sp-v { margin: 0; font-size: 12px; font-weight: 800; display: flex; align-items: baseline; gap: 6px; }
.cv3sp-v em {
  font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px;
  border-radius: 999px; background: #EFEDE6; color: #5B5E56;
}
.cv3sp-w { margin: 1px 0 0; font-size: 11px; color: var(--hx-mut); }
.cv3sp-sec {
  margin: 12px 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--hx-mut2);
}
.cv3sp-how { margin: 0; padding-left: 18px; }
.cv3sp-how li { font-size: 11.5px; line-height: 1.65; color: var(--hx-txt2); margin: 0 0 3px; }
.cv3sp-how code, .cv3sp-none code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  padding: 1px 4px; border-radius: 4px; background: rgba(126, 101, 66, .10);
}
.cv3sp-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3sp-cap {
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: #DDEFE4; color: #1B5E3A; cursor: help;
}
.cv3sp-cap em { font-style: normal; opacity: .7; }
.cv3sp-note { margin: 6px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--hx-mut); }
.cv3sp-note.is-warn {
  padding: 6px 9px; border-radius: 8px;
  background: rgba(217, 164, 65, .14); color: #7A5B10;
}
/*  ⚠ **없는 것**은 빛깔로도 갈라 둡니다 — 모르고 붙이면 고장으로 읽습니다. */
.cv3sp-lack {
  margin: 8px 0 0; padding: 7px 9px; border-radius: 8px; font-size: 10.5px; line-height: 1.6;
  background: rgba(163, 43, 31, .09); color: #8A2B2B;
}
.cv3sp-lack b { font-weight: 800; }
.cv3sp-row {
  display: flex; align-items: center; gap: 7px; margin: 0 0 4px;
  padding: 6px 9px; border-radius: 9px; font-size: 11.5px;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 24, 28, .09);
}
.cv3sp-row b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3sp-row i {
  margin-left: auto; flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 999px; background: #F6EEDC; color: #7A5B10; white-space: nowrap;
}
.cv3sp-row i.ok { background: #DDEFE4; color: #1B5E3A; }
.cv3sp-row button {
  flex: 0 0 auto; font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
  min-height: 26px; padding: 0 10px; border: 0; border-radius: 999px;
  background: #F1EFE8; color: #3A3D35;
}
.cv3sp-row button.is-key { background: #DDEFE4; color: #1B5E3A; }
.cv3sp-row button:hover { filter: brightness(.96); }
.cv3sp-add { display: flex; gap: 5px; margin: 8px 0 0; }
.cv3sp-add input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px;
  min-height: 32px; padding: 4px 10px; border-radius: 9px;
  border: 1px solid var(--hx-line); background: #fff; color: var(--hx-txt);
}
.cv3sp-add button, button.cv3sp-go {
  flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  min-height: 32px; padding: 0 13px; border: 0; border-radius: 9px;
  background: #DDEFE4; color: #1B5E3A;
}
button.cv3sp-go { width: 100%; margin-top: 8px; }
.cv3sp-add button:hover, button.cv3sp-go:hover { filter: brightness(.96); }
.cv3sp-none { margin: 6px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--hx-mut2); }
.cv3sp-msg {
  margin: 8px 0 0; padding: 6px 9px; border-radius: 8px; font-size: 11px; line-height: 1.55;
  background: rgba(31, 111, 102, .12); color: #1F6F66; font-weight: 700;
}
button.cv3sp-more {
  width: 100%; margin-top: 10px; font: inherit; font-size: 11.5px; font-weight: 800;
  cursor: pointer; min-height: 30px; border: 0; border-radius: 9px;
  background: #E4EEF6; color: #16457A;
}
button.cv3sp-more:hover { background: #D3E4F1; }

/*  ⑭ 장비 연결 팝업 — **넓게 · 타일로** (2026-09-12 · 대표님
    「팝업 화면이 너무 좁아요」 「그리고 테스트 나열 말고 타일 방식을 추천합니다.」)
    ⚠ 읽을 것이 아니라 **볼 것**입니다. 꽂는 자리 · 다리 · 내는 것 · 없는 것이
      각각 제 칸을 갖습니다. 문장으로 늘어놓으면 어디를 봐야 할지 모릅니다.
    ⚠ 차례(붙이는 방법)만 번호 타일로 남깁니다 — 거기서는 **순서가 뜻**입니다. */
.cv3pop-in.cv3sp { max-width: min(760px, 94vw); }
.cv3sp-body { padding: 0 16px 16px; max-height: 78vh; overflow-y: auto; }
.cv3sp-hd { margin: 0 0 12px; }
.cv3sp-hd.is-env .cv3home-ic { color: #1F6F66; }
.cv3sp-hd.is-cam .cv3home-ic { color: #16457A; }
.cv3sp-v em.env { background: #DDEFE4; color: #1B5E3A; }
.cv3sp-v em.cam { background: #E4EEF6; color: #16457A; }

/*  타일 판 — 좁으면 한 줄, 넓으면 넷까지 */
.cv3sp-grid {
  display: grid; gap: 8px; margin: 0 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
}
.cv3sp-tile {
  background: #FFFFFF; border-radius: 11px; padding: 9px 11px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .09); min-width: 0;
}
.cv3sp-tile .k {
  margin: 0 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: var(--hx-mut2);
}
.cv3sp-tile .v { font-size: 12px; line-height: 1.5; color: var(--hx-txt); min-width: 0; }
.cv3sp-tile .v b { font-weight: 800; word-break: keep-all; }
.cv3sp-tile .v span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--hx-mut2); }
.cv3sp-tile .v code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  padding: 1px 5px; border-radius: 5px; background: rgba(126, 101, 66, .10);
  display: inline-block; max-width: 100%; overflow-x: auto;
}
.cv3sp-tile.is-ok { background: linear-gradient(#F3FAF6, #FFFFFF); }
.cv3sp-tile.is-no { background: linear-gradient(#FDF4F3, #FFFFFF); }
.cv3sp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3sp-chip {
  font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: #EFEDE6; color: #5B5E56; white-space: nowrap;
}
.cv3sp-chip.is-ok { background: #DDEFE4; color: #1B5E3A; }
.cv3sp-chip.is-no { background: #F7E3E0; color: #8A2B2B; }

/*  구역 제목 — 오른쪽에 한 줄 설명 */
.cv3sp-sec { display: flex; align-items: baseline; gap: 8px; }
.cv3sp-sec span {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--hx-mut2);
  letter-spacing: 0; white-space: nowrap;
}

/*  길 고르기 — 장비마다 길이 하나가 아닙니다 */
.cv3sp-paths { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.cv3sp-paths button {
  font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  min-height: 30px; padding: 0 13px; border: 0; border-radius: 999px;
  background: #EFEDE6; color: #5B5E56;
}
.cv3sp-paths button.is-on { background: #26313D; color: #FFFFFF; }
.cv3sp-paths button:hover { filter: brightness(.97); }

/*  차례 타일 — 여기서는 **순서가 뜻**이라 번호를 크게 답니다 */
.cv3sp-steps {
  display: grid; gap: 8px; margin: 0 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.cv3sp-step {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start;
  background: #FFFFFF; border-radius: 11px; padding: 9px 11px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .09);
}
.cv3sp-step em {
  font-style: normal; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: #26313D; color: #FFFFFF;
}
.cv3sp-step p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--hx-txt2); min-width: 0; }
.cv3sp-step p code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  padding: 1px 5px; border-radius: 5px; background: rgba(126, 101, 66, .10);
  display: inline-block; max-width: 100%; overflow-x: auto;
}
.cv3sp-step p b { font-weight: 800; color: var(--hx-txt); }

/*  ⚠ 실측: 이 팝업의 머리줄이 `display:block · padding:0` 이라 **닫기(✕)가
    제목 아래 제 줄로 떨어져** 있었습니다(x=71 · y=84). 그 규칙은 다른 팝업 옷이
    쓰던 것입니다 — 이 옷에만 따로 입힙니다. */
.cv3sp .cv3pop-top {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px 10px;
}
.cv3sp .cv3pop-top > div { flex: 1 1 auto; min-width: 0; }
.cv3sp .cv3pop-k {
  margin: 0; font-size: 11px; font-weight: 800; color: var(--hx-mut2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv3sp .cv3pop-t {
  margin: 1px 0 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--hx-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv3sp .cv3pop-x {
  flex: 0 0 auto; width: 30px; height: 30px; min-width: 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 9px;
  background: #EFEDE6; color: var(--hx-txt2); font-size: 14px; cursor: pointer;
}
.cv3sp .cv3pop-x:hover { background: #E2DFD6; }

/*  ⑮ 이름 아래 **늘 있는** 「센서 · 카메라」 줄 (2026-09-12 · 대표님
    「센서를 붙였다가 설정을 닫으면 센서 항목이 사라집니다.」)
    ⚠ 닫혀 있을 때도 **자리를 지킵니다.** 붙어 있는 수를 배지로 적어,
      닫아도 «있다» 는 것이 보이게 합니다. */
/*  🔴 2026-09-12 — **이 칩 줄을 뺐습니다** (대표님 「첨부처럼 뚱땡이가 됐어요」).
    밖에 두면 «따로 노는 줄», 카드 안에 두면 «뚱뚱» — 둘 다 **줄이 하나 더 생겨서**
    였습니다. 🔗·📷 는 도구 아이콘 묶음으로 돌아갔고, 붙은 수는 배지로 얹습니다.
    ⚠ 규칙은 지우지 않고 남깁니다 — 되살릴 일이 있으면 여기입니다(R0-6).
.cv3home-nt-dev { display: flex; gap: 4px; flex: 1 1 100%; margin: 1px 0 0; } */
.cv3home-nt-dev { display: none; }
.cv3home-nt-dev button {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
  min-height: 26px; padding: 0 8px; border: 0; border-radius: 8px;
  background: #FFFFFF; color: #3A3D35; box-shadow: 0 1px 2px rgba(20, 24, 28, .09);
  white-space: nowrap;
}
.cv3home-nt-dev button:hover { background: #F1EFE8; }
.cv3home-nt-dev .cv3home-ic { width: 13px; height: 13px; flex: 0 0 auto; color: #1B5E3A; }
.cv3home-nt-dev button.is-cam .cv3home-ic { color: #16457A; }
.cv3home-nt-dev button i {
  font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 999px; background: #DDEFE4; color: #1B5E3A;
}
.cv3home-nt-dev button.is-cam i { background: #E4EEF6; color: #16457A; }
.cv3home-nt-dev button em { font-style: normal; color: var(--hx-mut2); font-weight: 800; }
/*  펼친 줄의 「접기」 */
.cv3home-nt-sadd-t { display: flex; align-items: baseline; gap: 6px; }
.cv3home-nt-sadd-t button {
  margin-left: auto; flex: 0 0 auto; font: inherit; font-size: 10px; font-weight: 800;
  cursor: pointer; min-height: 22px; padding: 0 8px; border: 0; border-radius: 999px;
  background: #EFEDE6; color: #5B5E56;
}
.cv3home-nt-sadd-t button:hover { background: #E2DFD6; }

/*  ⑯ 도구 아이콘에 **붙은 수 배지** (2026-09-12 · 「뚱땡이가 됐어요」의 답)
    ⚠ 줄을 늘리지 않고 «있다» 를 보이게 하는 길입니다 — 단추 모서리에 작게 얹습니다. */
.cv3home-nt-x .cv3home-ib { position: relative; }
.cv3home-nt-x .cv3home-ib > i {
  position: absolute; top: -3px; right: -3px; font-style: normal;
  min-width: 13px; height: 13px; padding: 0 3px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; line-height: 1;
  background: #1B5E3A; color: #FFFFFF; box-shadow: 0 0 0 1.5px #FFFFFF;
}
.cv3home-nt-x .cv3home-ib.is-cam > i { background: #16457A; }
/*  ⚠ 배지가 잘리지 않게 — 카드가 `overflow:hidden` 이라 모서리 밖이 잘립니다. */
.cv3home-nt-x { overflow: visible; }
.cv3home-nt-p { overflow: visible; }

/*  ⑰ 「지금 값이 오는 장비」 — 목록에 없어도 **맨 위**에 냅니다
    (2026-09-12 · 대표님 「613 값없음 입니다.」 — 장비는 붙어 있었는데 이름에
     안 매여 있었고, 그 시리얼을 손으로 치실 방법이 없었습니다.) */
.cv3sp-live {
  margin: 0 0 8px; padding: 8px 9px; border-radius: 11px;
  background: rgba(31, 111, 102, .10); border: 1px solid rgba(31, 111, 102, .28);
}
.cv3sp-live-t {
  margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #1F6F66;
}
.cv3sp-row.is-live { background: #FFFFFF; }
.cv3sp-row.is-live b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }

/*  줄마다 «지금 값이 오는가» — 시리얼이 길(USB·Wi-Fi)에 따라 달라지므로,
    어느 것이 살아 있는지 글자만 봐서는 모릅니다 (2026-09-12). */
.cv3sp-row i.live { background: #DDEFE4; color: #1B5E3A; }
.cv3sp-row i.dead { background: #EFEDE6; color: #8B93A1; }
.cv3sp-row.is-on { box-shadow: 0 0 0 1.5px rgba(31,111,102,.45), 0 1px 2px rgba(20,24,28,.09); }
.cv3sp-row i { margin-left: 0; }
.cv3sp-row i + i { margin-left: auto; }

/*  ⑱ 「요양원에서 이미 붙인 이력」 (2026-09-12 · 대표님 지시)
    ⚠ 요양원 연결표(`cv3_devmap_v1` = 브리지+채널)를 **읽기만** 합니다.
      가져오기는 복사이지 옮기기가 아닙니다 — 요양원 화면은 그대로 돌아야 합니다. */
.cv3sp-fac {
  margin: 0 0 8px; padding: 8px 9px; border-radius: 11px;
  background: rgba(126, 101, 66, .08); border: 1px solid rgba(126, 101, 66, .22);
}
.cv3sp-fac-t {
  margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--hx-txt2);
}
.cv3sp-row.is-fac { background: #FFFFFF; }

/*  ⑲ 「값이 안 옵니다 — 다시 맺기」 (2026-09-12 · 대표님 「아직 값없음 입니다」)
    ⚠ 고칠 길이 팝업 **안**에만 있으면 못 찾습니다 — 못 찾으면 없는 것과 같습니다.
      이름 줄 바로 밑에서 말하고, 거기서 한 번 눌러 끝냅니다. */
.cv3home-nt-fix {
  display: flex; align-items: center; gap: 7px;
  margin: 3px 0 0 12px; padding: 6px 9px; border-radius: 10px;
  background: rgba(217, 164, 65, .16); border: 1px solid rgba(217, 164, 65, .45);
}
.cv3home-nt-fix p { margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 10.5px; line-height: 1.5; color: #7A5B10; }
.cv3home-nt-fix p b { font-weight: 800; color: #5C4408; }
.cv3home-nt-fix button {
  flex: 0 0 auto; font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
  min-height: 26px; padding: 0 11px; border: 0; border-radius: 999px;
  background: #E0B12C; color: #3A2C02;
}
.cv3home-nt-fix button:hover { filter: brightness(.96); }

/*  ⑳ 사람 카드 줄 — **이름마다 한 장** (2026-09-12 · 대표님
    「이름이 두개가 생성되면 상단에 카드가 생겨야 하는데 그것도 생성이 안됐어요.」
     → 「카드 터졌어요」)
    ⚠ 처음에 **큰 카드**를 올렸다가 좁은 칸(281px)에서 세로로 늘어져 줄 높이가
      619px 이 됐습니다. 여기는 **한눈에 보는 자리**이므로 작은 카드로 갑니다.
    ⚠ 위 「지금 대응」 띠와 다릅니다 — 그쪽은 **조치가 필요한 것만**, 이쪽은 **모두**. */
/*  ⚠ **넓은 화면에서 늘어나지 않게** 폭을 묶습니다 — 대표님 화면에서 카드 두 장이
    창 너비만큼 벌어져 «터진» 모양이 됐습니다(첨부). `1fr` 를 주면 남는 자리를
    카드가 다 먹습니다. 칸을 **150~190px** 로 묶고 남는 자리는 그냥 둡니다. */
.cv3home-pcards {
  display: grid; gap: 6px; margin: 0 0 10px; justify-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
}
@media (max-width: 420px) { .cv3home-pcards { grid-template-columns: 1fr 1fr; } }
.cv3home-pcard {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font: inherit; text-align: left; cursor: pointer;
  padding: 8px 9px; border: 0; border-radius: 11px;
  background: #FFFFFF; color: var(--hx-txt);
  box-shadow: 0 1px 2px rgba(20, 24, 28, .10);
}
.cv3home-pcard:hover { background: #F7F5EF; }
.cv3home-pcard .m-h { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cv3home-pcard .m-h b { font-size: 12px; font-weight: 800; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-pcard .m-h i {
  margin-left: auto; flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 800;
  padding: 2px 6px; border-radius: 999px; background: #EFEDE6; color: #6B6E66; white-space: nowrap;
}
.cv3home-pcard.is-live  .m-h i { background: #DDEFE4; color: #1B5E3A; }
.cv3home-pcard.is-agg   .m-h i { background: #F6EEDC; color: #7A5B10; }
.cv3home-pcard.is-idle  .m-h i { background: #F7E3E0; color: #8A2B2B; }
.cv3home-pcard .m-b { display: flex; gap: 10px; }
.cv3home-pcard .m-v { display: flex; align-items: baseline; gap: 3px; }
.cv3home-pcard .m-v b { font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.cv3home-pcard .m-v em { font-style: normal; font-size: 10px; color: var(--hx-mut2); }
.cv3home-pcard .m-v.is-none b { color: #8B93A1; }
/*  고른 분은 **왼쪽 표식**으로 — 빛깔로만 말하면 «값 옴» 과 헷갈립니다. */
.cv3home-pcard.is-pick { box-shadow: inset 3px 0 0 0 #E0B12C, 0 1px 2px rgba(20,24,28,.10); }

/*  ㉒ AS-613 Wi-Fi 대기 상태 — **화면이 대신 지켜봅니다**
    (2026-09-13 · 대표님 「Wi-Fi 로 해야 합니다」 · 「기기가 손에 닿지가 않아요」)
    ⚠ 장비를 못 만지시니, 다리가 듣고 있는지 · 장비가 왔는지를 화면이 그대로 적습니다. */
.cv3sp-wifi {
  margin: 8px 0 0; padding: 7px 9px; border-radius: 9px;
  font-size: 11px; line-height: 1.55;
  background: rgba(126, 101, 66, .10); color: var(--hx-txt2);
}
.cv3sp-wifi b { font-weight: 800; color: var(--hx-txt); }
.cv3sp-wifi code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  padding: 1px 4px; border-radius: 4px; background: rgba(126, 101, 66, .14);
  display: inline-block; max-width: 100%; overflow-x: auto;
}
.cv3sp-wifi.is-on  { background: rgba(31, 111, 102, .14); color: #1F6F66; font-weight: 700; }
.cv3sp-wifi.is-off { background: rgba(163, 43, 31, .10); color: #A32B1F; }

/*  ㉓ 「장비에 넣을 값」 — **사용자가 알아낼 일을 없앱니다**
    (2026-09-13 · 대표님 「사용자들이 이런걸 하기 어려운 부분이기 때문에
     그걸 이 플랫폼에서 지원하게 하려고 하는 겁니다.」)
    ⚠ 값은 게이트웨이가 이미 내주던 것을 **빌려 씁니다**(`/api/sensors/hub` 의 `asbw`).
      새로 만들면 두 벌이 되고 한쪽이 낡습니다. */
.cv3sp-setup {
  margin: 8px 0 0; padding: 9px 11px; border-radius: 11px;
  background: rgba(31, 111, 102, .08); border: 1px solid rgba(31, 111, 102, .26);
}
.cv3sp-setup-t {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px;
  font-size: 11px; font-weight: 800; color: #1F6F66;
}
.cv3sp-setup-t span { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--hx-mut2); }
.cv3sp-setup-g {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}
.cv3sp-setup-g > div {
  background: #FFFFFF; border-radius: 9px; padding: 7px 9px; min-width: 0;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .08);
}
.cv3sp-setup-g .k { margin: 0 0 2px; font-size: 10px; font-weight: 800; color: var(--hx-mut2); }
.cv3sp-setup-g .v {
  margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--hx-txt);
  font-variant-numeric: tabular-nums; overflow-x: auto; white-space: nowrap;
}
.cv3sp-setup-g .v.is-none { font-size: 12px; font-weight: 700; color: #8B93A1; }
.cv3sp-setup-n { margin: 7px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--hx-txt2); }
.cv3sp-setup-n b { font-weight: 800; }
/*  ⚠ 주소가 바뀌면 장비가 길을 잃습니다 — 그 사실을 눈에 띄게 적습니다. */
.cv3sp-setup-w {
  margin: 7px 0 0; padding: 7px 9px; border-radius: 9px;
  font-size: 10.5px; line-height: 1.6;
  background: rgba(217, 164, 65, .18); color: #7A5B10; font-weight: 700;
}

/*  센서 줄에 **그 센서가 지금 내는 값** (2026-09-13 · 「SEN54 … 아무것도 표시가 안됩니다」)
    ⚠ 장비마다 내는 것이 다릅니다 — 공기(SEN54) · 움직임(AIM24) · 생체(AS-613·XK300).
      생체 카드만 보면 «붙였는데 아무것도 없다» 가 됩니다. */
.cv3home-nt-sv {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--hx-txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  font-variant-numeric: tabular-nums;
}
.cv3home-nt-s.is-live .cv3home-nt-sv { color: #1B5E3A; }
.cv3home-nt-s.is-agg  .cv3home-nt-sv { color: #7A5B10; }

/*  ㉔ «붙었나» 와 «값이 오나» 를 **갈라서** 보입니다
    (2026-09-13 · 대표님 「센서가 붙었는지 값이 들어오고 있는지 … 구분이 안되는 문제」)
    센서 3 · 값 2  →  세 대 붙였는데 한 대가 죽었다는 뜻입니다. */
.cv3home-nt-p.is-dead .cv3home-nt-sel i { background: #F7E3E0; color: #8A2B2B; }
.cv3home-nt-p.is-dead .cv3home-av { background: #F7E3E0; color: #8A2B2B; }
/*  값이 안 오는 센서 줄 — 눈에 띄게(붙어 있는데 죽은 것이 가장 위험합니다) */
.cv3home-nt-s.is-none > span { color: #8A2B2B; font-weight: 800; letter-spacing: 0; }

/*  ㉕ 카메라 장치 고르기 · 다 비우기 (2026-09-13 · 대표님
    「1,3,4가 동일한 영상」 · 「처음부터 연결해서 띄울 수 있게」 ·
     「개별적으로 모든 호환성을 갖추고 붙일 수 있게」) */
.cv3sp-devs { margin: 8px 0 0; }
.cv3sp-devs-t {
  margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--hx-mut2);
}
button.cv3cmap-clr {
  width: 100%; margin-top: 10px; font: inherit; font-size: 11.5px; font-weight: 800;
  cursor: pointer; min-height: 32px; border: 0; border-radius: 9px;
  background: #F7E3E0; color: #8A2B2B;
}
button.cv3cmap-clr:hover { background: #F0CFC9; }
/*  같은 장치를 가리키는 채널 표시 */
.cv3cmap-r u.is-dup { background: rgba(217,164,65,.22); color: #7A5B10; }

/*  채널 이름 팝업의 두 단추 — 정상화 / 다 비우기 (2026-09-13) */
.cv3cmap-act { display: flex; gap: 6px; margin-top: 10px; }
button.cv3cmap-fix {
  flex: 1 1 auto; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  min-height: 32px; border: 0; border-radius: 9px;
  background: #DDEFE4; color: #1B5E3A;
}
button.cv3cmap-fix:hover { background: #C8E5D3; }
button.cv3cmap-clr { flex: 0 0 auto; width: auto; margin-top: 0; padding: 0 14px; }

/*  길 안내 안의 「여기서 바로 하는」 단추 — AS-BW 블루투스 등 (2026-09-13)
    설명만 읽고 끝나지 않게, 그 자리에서 누를 것을 둡니다. */
.cv3sp-do { margin: 9px 0 2px; }
.cv3sp-do button {
  font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  min-height: 34px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--hx-jet, #22313f); color: #fff;
}
.cv3sp-do button:hover { filter: brightness(1.12); }
.cv3sp-do button:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }

/* ══ 센서 타일 ═══════════════════════════════════════════════════════════
   2026-09-13 · 대표님 「텍스트 타입이 아니라 UI 타일 방식으로요」
   「센서를 선택하고 설정하여 연결하고 모든것을 끝낼 수 있어야 합니다」
   ■ 예전에는 `.cv3home-nt-s` 한 줄짜리 글줄이었습니다 — 「AS-613 호흡 9 · 심박 87
     실측·방금」. 숫자가 글 속에 묻혔습니다.
   ■ 이제 한 타일 안에서 끝냅니다: 이름·상태 / 값 칸 / 언제·설정·떼기.
   ⚠ 옛 규칙(.cv3home-nt-s)은 **지우지 않습니다** — 다른 데서 쓸 수 있습니다(R0-6). */
/*  🔴 2026-09-14 · 대표님 「각 1열씩 입니다」
    ⚠ 두 칸으로 두었더니 **줄이 고르지 않았습니다** — 센서가 셋이면 2+1 이 되어
      한 칸이 비고, 넷이면 폭이 제각각으로 보였습니다. 대표님이 「어수선하다」고
      하신 까닭의 절반이 이것이었습니다.
    ⇒ **언제나 한 줄에 하나.** 줄이 고르면 눈이 이름만 따라 내려갑니다. */
.cv3home-stiles {
  display: grid; gap: 6px; margin: 6px 0 2px;
  grid-template-columns: 1fr;
}
.cv3home-stile {
  border: 1px solid rgba(0, 0, 0, .10); border-radius: 12px;
  background: #fff; padding: 9px 10px 8px; min-width: 0;
}
.cv3home-stile.is-live { border-color: rgba(27, 94, 58, .30); background: #F7FBF8; }
.cv3home-stile.is-agg  { border-color: rgba(160, 120, 20, .28); background: #FDFBF4; }
.cv3home-stile.is-none { border-color: rgba(0, 0, 0, .12); background: #FAFAF9; }

.cv3home-stile-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cv3home-stile-ic { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; }
.cv3home-stile-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.cv3home-stile-h b {
  font-weight: 800; font-size: 12.5px; color: #282B2B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cv3home-stile-st {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; color: #6B6E66;
  padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .05);
}
.cv3home-stile-st i { width: 6px; height: 6px; border-radius: 50%; background: #A8ACA2; }
.cv3home-stile.is-live .cv3home-stile-st { color: #1B5E3A; background: rgba(27, 94, 58, .10); }
.cv3home-stile.is-live .cv3home-stile-st i { background: #2F9E63; }
.cv3home-stile.is-agg  .cv3home-stile-st { color: #7A5A0B; background: rgba(160, 120, 20, .12); }
.cv3home-stile.is-agg  .cv3home-stile-st i { background: #C79A17; }

/* 값 칸 — 숫자가 먼저 보이게. 자릿수가 흔들리지 않게 tabular-nums. */
.cv3home-stile-v {
  display: grid; gap: 5px; margin: 8px 0 7px;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
}
.cv3home-stile-c {
  border-radius: 9px; background: rgba(0, 0, 0, .04); padding: 5px 7px 6px; min-width: 0;
}
.cv3home-stile-c em {
  display: block; font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .02em; color: #7C8079; margin-bottom: 1px;
}
.cv3home-stile-c b {
  font-size: 15px; font-weight: 800; color: #282B2B;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cv3home-stile-c u { text-decoration: none; font-size: 9.5px; font-weight: 700; color: #7C8079; margin-left: 2px; }
.cv3home-stile-v.is-empty { display: block; }
.cv3home-stile-v.is-empty p {
  margin: 0; font-size: 11px; color: #7C8079; line-height: 1.5;
  padding: 6px 8px; border-radius: 9px; background: rgba(0, 0, 0, .035);
}

.cv3home-stile-f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cv3home-stile-when { font-size: 10.5px; font-weight: 700; color: #7C8079; font-variant-numeric: tabular-nums; }
.cv3home-stile-a { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
/*  ⚠ 손가락으로 누를 것 — AA 최소 24×24 를 지킵니다(WCAG 2.5.8). */
button.cv3home-stile-set {
  font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
  min-height: 26px; padding: 0 11px; border: 0; border-radius: 8px;
  background: var(--hx-jet, #22313f); color: #fff; white-space: nowrap;
}
button.cv3home-stile-set:hover { filter: brightness(1.14); }
button.cv3home-stile-set:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }
.cv3home-stile .cv3home-nt-ask { margin-left: auto; }

/* ══ 트리 첫 걸음 — 「어떤 장비를 붙일까요」 (2026-09-13) ═════════════════
   대표님 「단추를 클릭하면 다음 단계 팝업이 뜨는 형식으로 트리를 만들어서
   일관된 사용자 인터페이스를 제공해야 합니다」
   걸음마다 같은 껍데기·같은 몸짓입니다: 팝업 머리(뒤로/닫기) + 타일. */
.cv3sp-head { font-size: 12.5px; font-weight: 800; color: #282B2B; margin: 2px 0 9px; }
.cv3sp-pick {
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
button.cv3sp-picki {
  position: relative; font: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 22px 1fr; grid-auto-rows: auto;
  gap: 1px 8px; align-items: center;
  padding: 10px 11px; border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: inherit;
  min-height: 56px;
}
button.cv3sp-picki:hover { border-color: rgba(0, 0, 0, .30); background: #FAFAF9; }
button.cv3sp-picki:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }
button.cv3sp-picki.is-env { border-color: rgba(27, 94, 58, .30); background: #F7FBF8; }
.cv3sp-picki i { grid-row: 1 / span 2; display: grid; place-items: center; }
.cv3sp-picki i svg { width: 19px; height: 19px; fill: none; stroke: currentColor; }
.cv3sp-picki b { font-size: 12.5px; font-weight: 800; color: #282B2B; }
.cv3sp-picki em {
  font-style: normal; font-size: 10px; font-weight: 700; color: #7C8079;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 이미 몇 대 붙어 있는지 — 배지. overflow 로 잘리지 않게 타일 안쪽에 둡니다. */
.cv3sp-picki u {
  position: absolute; top: 6px; right: 7px; text-decoration: none;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff; background: #1B5E3A;
}
/* 뒤로 — 트리를 거슬러 올라갑니다. AA 최소 24×24. */
button.cv3sp-back {
  flex: 0 0 auto; font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; margin-right: 4px; padding: 0;
  border: 0; border-radius: 8px; background: rgba(0, 0, 0, .05); color: #4A4E48;
}
button.cv3sp-back:hover { background: rgba(0, 0, 0, .11); }
button.cv3sp-back:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }

/* ══ 카메라 줄 — 카테고리 묶음 (2026-09-13) ══════════════════════════════
   대표님 「카메라 설정의 단추들도 카테고리 별로 묶어서 정리해 주세요.
   단추도 세련된 SVG 타입으로 변경 바랍니다」
   ■ 전: 단추 14개가 한 줄로 죽 붙어 있었습니다. 무엇이 한패인지 몰랐습니다.
   ■ 후: 분할 / 영상 / 채널 / 기록. 묶음마다 얇은 이름표를 답니다.
   ⚠ 이름표는 `::before` 로 답니다 — DOM 을 늘리지 않고, 좁아지면 숨깁니다. */
.cv3home-cspgrp {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0; background: none;
}
/*  🔴 2026-09-14 — 이름표를 **띄우지 않습니다.** (대표님 「이름표가 단추 위에 떠
    있습니다」 · 세 번째 「정리가 안됐어요」)
    ■ 전에는 `position:absolute; top:1px` 로 띄우고 묶음이 `padding-top:10px` 로
      자리를 비워 뒀습니다. 그러면 **두 겹**으로 보이고, 좁아지면 단추를 덮습니다.
    ⚠ 저는 이것을 파일 **끝에 덧써서** 고치려 했는데, 덧쓴 규칙이
      `.cv3home` 조상을 요구해서 그게 없는 자리에서는 **안 이겼습니다.**
      덧쓰기로 이기려 하지 말고 **뿌리를 고칩니다** — 그러면 질 일이 없습니다. */
.cv3home-cspgrp::before {
  content: attr(data-g);
  position: static;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  color: #91958C; pointer-events: none; white-space: nowrap;
}
/* 분할 단추 묶음도 같은 옷을 입힙니다 — 혼자만 달라 보이지 않게. */
.cv3home-cspg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0; background: none;
}
.cv3home-cspg::before {
  content: '화면 나누기';
  position: static;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  color: #91958C; pointer-events: none; white-space: nowrap;
}
/*  아이콘 단추 — 글자가 아니라 선 그림입니다. AA 최소 24×24 를 지킵니다. */
.cv3home-cspgrp .cv3home-cspb { display: grid; place-items: center; }
.cv3home-cspgrp .cv3home-cspb .cv3home-ic,
.cv3home-cspg .cv3home-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/*  아주 좁으면 이름표를 접습니다 — 이름표가 단추를 밀어내면 안 됩니다. */
@media (max-width: 520px) {
  .cv3home-cspgrp, .cv3home-cspg { padding: 3px 5px; background: none; }
  .cv3home-cspgrp::before, .cv3home-cspg::before { display: none; }
}

/* ══ 우측 패널 — 글상자 크기 · 간격 · 배치 (2026-09-13) ══════════════════
   대표님 「우측 패널도 텍스트 박스 크기와 간격 배치등을 변경해 주세요」
   ■ 실측한 것 (고치기 전)
     · 이름 넣는 칸 **377×32px · 글자 12px · 안여백 5/9** — 손가락으로 누르기 작고,
       화면 다른 입력칸(13px)보다 글자가 작아 혼자 옹색했습니다.
     · 칸 사이 간격이 **10 · 10 · 14** 로 제각각 — 리듬이 없었습니다.
     · 이름 카드 사이가 **3px** — 카드가 서로 붙어 한 덩어리로 보였습니다.
   ■ 고친 것: 세로 리듬을 **14px 하나로** 맞추고, 입력칸을 키웠습니다.
   ⚠ `.cv3home` 을 앞에 붙여 앞선 규칙을 확실히 이깁니다(전역 규칙에 먹히지 않게). */
.cv3home .cv3home-side { padding: 13px; }
/*  네 칸의 세로 리듬을 하나로 — 붙였다 떼었다 하지 않고 gap 하나로 정합니다. */
.cv3home .cv3home-side > * { margin-top: 0; margin-bottom: 0; }
.cv3home .cv3home-side { display: flex; flex-direction: column; gap: 14px; }

/*  글상자 — 32px 은 손가락에 작습니다. 44px 은 과하고 38px 이 알맞습니다.
    ⚠ iOS 는 글자가 16px 보다 작으면 눌렀을 때 화면을 확대합니다. 우리 화면은
       데스크톱이 기준이라 13px 로 두되, 그 사실은 알고 둡니다. */
.cv3home .cv3home-add input[type="text"],
.cv3home .cv3home-add input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 38px; font-size: 13px; padding: 8px 12px; border-radius: 10px;
}
.cv3home .cv3home-add { gap: 7px; }
.cv3home .cv3home-add button { min-height: 38px; padding: 0 15px; border-radius: 10px; }

/*  이름 카드 사이 — **3px 은 그대로 둡니다.**
    2026-09-12 대표님 「지금은 트리 간격이 필요 없이 넓어요」 하셔서 일부러 좁힌 값입니다.
    그 지시를 제 판단으로 뒤집지 않습니다(R0-6).
    ⚠ 다만 **펼친 카드**는 안에 센서 타일이 들어차므로, 그때만 아래를 틔웁니다.
       선택자를 (0,3,1) 로 올려 앞선 `.cv3home .cv3home-side .cv3home-nt-n` (0,3,0) 을 넘습니다. */
.cv3home .cv3home-side .cv3home-nt-n[open] { margin-bottom: 11px; }
.cv3home .cv3home-ntree { margin: 0; }
.cv3home .cv3home-cam { margin: 0; }
.cv3home .cv3home-logo { margin: 0; }

/*  좁아지면 안여백을 줄입니다 — 넓을 때 기준으로 잡아 두면 좁을 때 글이 눌립니다. */
@media (max-width: 900px) {
  .cv3home .cv3home-side { padding: 10px; gap: 11px; }
}

/* ══ 작은 생체값 칩 — BMI · 혈압 · 혈당 · 체온 · SpO2 · 소변 (2026-09-13) ══
   ⚠⚠ 이름이 `cv3home-mini` 였습니다 — **이미 있는 이름**이었습니다.
       `.cv3home-mini { width:84px; height:84px }` 는 **평면도 미니맵 SVG** 입니다.
       그래서 칩 격자가 84px 한 칸이 되어 여섯이 세로로 쌓이고 안내문이 겹쳤습니다.
       숫자로는 「칩 6개」라 멀쩡해 보였고, **화면을 찍어 보고서야** 드러났습니다
       (대표님 「화면을 볼 수 없으니 프레임으로 확인 바랍니다」).
       ⇒ `cv3home-mvit` 로 바꿨습니다. 같은 함정을 전에도 밟았습니다
         (`cv3home-mini` ↔ 평면도, 그때는 `cv3home-pcard` 로 바꿨습니다).
   대표님 「생체카드 사이즈를 최소화 해서 추가해 주세요」
   ■ 큰 생체카드와 **같은 틀을 쓰지 않습니다.** 여섯을 큰 카드로 내면 화면이
     그 값들로 덮이는데, 정작 **레이더가 재는 값이 아닙니다.** 크기로 서열을
     말합니다 — 잰 것은 크게, 적은 것은 작게.
   ■ 상태를 빛깔로 가릅니다: 실측(초록) · 적은 값(기본) · 아직 없음(흐림). */
.cv3home-cat.is-mini { margin-top: -2px; }
/*  🔴 2026-09-14 — 칸을 **넓혔습니다**(86 → 124px).
    카드에 참고 범위와 「🔗 재면 저절로 들어옵니다」를 더했더니 86px 에서는
    「정상 120/…」처럼 **잘리고** 「아직 없습니다」가 두 줄로 깨졌습니다(실측).
    ⚠ 한 줄에 여섯 대신 셋이 들어갑니다 — **읽히는 쪽**을 고릅니다.
      글이 잘리면 안 적은 것과 같습니다. */
.cv3home-mvit {
  display: grid; gap: 6px; margin: 2px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}
button.cv3home-mvitc {
  position: relative; font: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto auto 1fr; grid-auto-rows: auto;
  gap: 0 3px; align-items: baseline;
  padding: 7px 9px 6px; border-radius: 10px; min-height: 52px;
  border: 1px solid rgba(0, 0, 0, .10); background: #fff; color: inherit;
}
button.cv3home-mvitc:hover { border-color: rgba(0, 0, 0, .28); background: #FAFAF9; }
button.cv3home-mvitc:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }
.cv3home-mvitc em {
  grid-column: 1 / -1; font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .02em; color: #7C8079; margin-bottom: 2px;
}
.cv3home-mvitc b {
  font-size: 15px; font-weight: 800; color: #282B2B; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cv3home-mvitc u { text-decoration: none; font-size: 9.5px; font-weight: 700; color: #7C8079; }
.cv3home-mvitc i {
  grid-column: 1 / -1; font-style: normal; font-size: 9px; font-weight: 700;
  color: #9A9E94; margin-top: 3px;
}
/*  아직 없음 — 흐리게 두되 **누를 수 있어 보이게** 합니다(「적기」라고 적습니다). */
.cv3home-mvitc.is-none { background: #FAFAF9; border-style: dashed; }
.cv3home-mvitc.is-none b { color: #B9BDB3; }
.cv3home-mvitc.is-none i { color: var(--hx-jet, #22313f); font-weight: 800; }
/*  실측 — 장비가 준 값입니다. 사람이 적은 값과 **눈으로 갈립니다.** */
.cv3home-mvitc.is-live { border-color: rgba(27, 94, 58, .34); background: #F7FBF8; }
.cv3home-mvitc.is-live i { color: #1B5E3A; font-weight: 800; }
.cv3home-mvitc.is-live i::before { content: '● '; font-size: 7px; vertical-align: middle; }
.cv3home-mvit-n {
  margin: 7px 0 0; font-size: 10.5px; line-height: 1.55; color: #7C8079;
}

/* ══ B2C 테마 — 그래프 · 차트 · 스코어 · 파형 (2026-09-13) ═══════════════
   대표님 「B2C에 맞게 전체 테마를 맞춰 주세요. 모든 요소들 포함.
   그래프, 차트, 스코어, 파형, 아이콘 기타 등등」

   ■ 무엇이 문제였나 (실측)
     지금 그림들은 **기업용 대시보드 옷**입니다 — 1px 실선, 각진 막대,
     3px 얇은 링. 정확하지만 차갑습니다. 화면의 주인공인 **아바타는
     말랑한 3D 클레이**라 둘이 따로 놉니다.
   ■ 무엇을 바꿨나 — **모양만** 바꿉니다. 눈금·값·자는 손대지 않습니다.
     숫자를 예쁘게 만들려고 자를 바꾸면 그건 거짓말이 됩니다(R0-2).
       · 선을 굵고 둥글게 (2 → 2.6 · linecap round)
       · 막대 끝을 둥글게 (3px → 5px, 아래도 살짝)
       · 링을 도톰하게 (3 → 5px)
       · 「쌓이는 중」 막대를 도톰하게 (5 → 8px)
       · 면 채움을 조금 진하게 — 클레이는 그림자가 부드럽고 진합니다
   ⚠ 색은 그대로 둡니다. 등급 색(정상·주의·위험)은 **뜻이 있는 색**이라
      분위기 때문에 바꾸면 안 됩니다. */

/*  파형·추세 — 굵고 둥근 선. `currentColor` 라 등급 색을 그대로 탑니다. */
.cv3home .cv3home-spark { height: 38px; }
.cv3home .cv3home-spark polyline { stroke-width: 2.6; }
.cv3home .cv3home-spark path[fill^="url"] { opacity: 1; }

/*  막대 — 끝을 둥글게. 각진 막대는 차갑습니다. */
.cv3home .cv3home-bars { height: 38px; gap: 5px; }
.cv3home .cv3home-bars i { border-radius: 6px 6px 3px 3px; }

/*  재실 링 — 크기만 키웁니다.
    ⚠ 처음에 `border-width:5px` 를 줬다가 **취소했습니다.** 2026-09-05 대표님
      「그리고 테두리 쓰지 마세요.」 지시가 있고, `.cv3home *:not(svg)` 에
      `border-style:none` 이 걸려 있습니다. 경계는 **면과 그림자**로 만듭니다.
      (제 규칙은 조용히 안 먹고 있었습니다 — 실측으로 잡았습니다.) */
.cv3home .cv3home-ring { width: 60px; height: 60px; }
.cv3home .cv3home-ring i { width: 13px; height: 13px; }

/*  「쌓이는 중」 — 얇은 실 같던 것을 알약 모양으로. */
.cv3home .cv3home-prog { height: 8px; border-radius: 999px; }

/*  아래 세 칸(최소·평균·최대) — 숫자가 먼저 보이게. */
.cv3home .cv3home-foot b { font-size: 13px; }
.cv3home .cv3home-foot { gap: 7px; padding-top: 9px; }

/*  게이지 — 반원이 조금 크고 도톰하게. */
.cv3home .cv3home-gauge { width: 124px; height: 68px; }
.cv3home .cv3home-gauge path, .cv3home .cv3home-gauge2 path { stroke-linecap: round; }

/*  큰 점수 — 클레이 화면에서는 숫자가 주인공입니다. */
.cv3home .cv3home-sig-v b { letter-spacing: -.01em; }

/*  그림이 놓이는 판 — 맨 흰 바닥 대신 아주 옅은 온기.
    ⚠ 카드 배경(흰색)은 대표님이 정하신 값이라 **건드리지 않습니다.**
       그림 칸만 살짝 눕힙니다. */
.cv3home .cv3home-sig .cv3home-spark,
.cv3home .cv3home-sig .cv3home-bars {
  padding: 4px 6px; border-radius: 12px; background: rgba(0, 0, 0, .022);
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  .cv3home .cv3home-spark polyline.draw { animation: none; }
}


/* ══ 오늘 넣은 것들을 집 규칙에 맞춥니다 — **테두리 대신 면과 그림자** ══════
   2026-09-05 대표님 「그리고 테두리 쓰지 마세요.」
   ⚠ 제가 오늘 센서 타일 · 장비 고르기 · 작은 생체값 칩을 **전부 테두리로**
     경계 지었습니다. `.cv3home *:not(svg):not(svg *){border-style:none}` 가
     그걸 조용히 벗기고 있었고, 그래서 «아직 없음» 의 점선 힌트가 아예 안
     보였습니다. 화면을 재 보고서야 알았습니다.
   ⇒ 경계를 **면(배경) + 아주 옅은 그림자**로 다시 만듭니다. 뜻은 그대로 —
     실측/적은 값/아직 없음이 눈으로 갈려야 합니다. */

/*  센서 타일 */
.cv3home .cv3home-stile {
  box-shadow: 0 1px 2px rgba(40, 43, 43, .06), 0 0 0 1px rgba(40, 43, 43, .05) inset;
}
.cv3home .cv3home-stile.is-live { box-shadow: 0 1px 2px rgba(27, 94, 58, .10), 0 0 0 1px rgba(27, 94, 58, .16) inset; }
.cv3home .cv3home-stile.is-agg  { box-shadow: 0 1px 2px rgba(160, 120, 20, .10), 0 0 0 1px rgba(160, 120, 20, .16) inset; }
.cv3home .cv3home-stile.is-none { box-shadow: 0 0 0 1px rgba(40, 43, 43, .06) inset; }

/*  장비 고르기 타일 */
.cv3home .cv3sp-picki { box-shadow: 0 1px 2px rgba(40, 43, 43, .06), 0 0 0 1px rgba(40, 43, 43, .07) inset; }
.cv3home .cv3sp-picki:hover { box-shadow: 0 2px 6px rgba(40, 43, 43, .10), 0 0 0 1px rgba(40, 43, 43, .16) inset; }
.cv3home .cv3sp-picki.is-env { box-shadow: 0 1px 2px rgba(27, 94, 58, .10), 0 0 0 1px rgba(27, 94, 58, .18) inset; }

/*  작은 생체값 칩 */
.cv3home .cv3home-mvitc { box-shadow: 0 1px 2px rgba(40, 43, 43, .05), 0 0 0 1px rgba(40, 43, 43, .07) inset; }
.cv3home .cv3home-mvitc:hover { box-shadow: 0 2px 6px rgba(40, 43, 43, .10), 0 0 0 1px rgba(40, 43, 43, .18) inset; }
/*  🔴 2026-09-15 · 대표님 「**첨부 다 이상입니다**」(여섯 칸 사진)
    ■ 카드가 **통째로 빗금**에 덮여 «고장난 것·꺼진 것» 으로 보였습니다.
    ■ 까닭 — 빗금이 **두 겹**이었습니다:
        ① 여기(카드 바탕 전체) — 2026-09-13 에 「비어 있음」을 말하려고 넣음
        ② 값 자리(`.cv3home-mvit-slot`) — 2026-09-14 에 「값이 앉을 자리」로 넣음
      ②를 넣을 때 ①을 **안 걷어냈습니다.** 둘이 겹쳐 카드 전체가 회색 천이 됐습니다.
    ⇒ **값 자리 하나만** 남깁니다. 「비어 있음」은 그 자리가 말하면 충분합니다.
      카드 바탕은 **깨끗하게** 둡니다 — 카드는 꺼진 것이 아니라 **기다리는 것**입니다. */
.cv3home .cv3home-mvitc.is-none {
  box-shadow: 0 0 0 1px rgba(40, 43, 43, .06) inset;
  background-image: none;
}
.cv3home .cv3home-mvitc.is-live { box-shadow: 0 1px 2px rgba(27, 94, 58, .10), 0 0 0 1px rgba(27, 94, 58, .20) inset; }

/* ══ 값 칸 — 글줄을 대신합니다 (2026-09-13) ══════════════════════════════
   대표님 「글줄 형태로 되어 있는 것들을 모두 직관적 UI의 타일 형태로 바꿔주세요」
   ■ 바꾼 곳: 적응 기준선(값 4개) · 수면 단계(값 4개).
     전에는 「적응 기준선 HR 86 · BR 12.4 · 표본 155회 · 흔들림 ±5.6」 한 줄이라
     **읽어야** 알았습니다. 칸으로 쪼개면 눈이 숫자를 먼저 잡습니다.
   ⚠ 테두리를 쓰지 않습니다 — 면으로만 가릅니다(대표님 「테두리 쓰지 마세요」). */
.cv3home-vals {
  display: grid; gap: 5px; margin: 9px 0 0;
  /*  ⚠ `auto-fit` 로 뒀더니 254px 카드에서 **3+1** 이 되어 한 칸이 외톨이로
      다음 줄에 남았습니다(실측). 값이 넷이면 **2×2** 가 읽기 좋습니다.
      넓어지면 한 줄로 폅니다. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1250px) {
  .cv3home-vals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cv3home-vcell {
  border-radius: 10px; background: rgba(40, 43, 43, .045);
  padding: 6px 8px 7px; min-width: 0;
}
.cv3home-vcell em {
  display: flex; align-items: center; gap: 5px;
  font-style: normal; font-size: 9.5px; font-weight: 700;
  color: var(--hx-mut2); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv3home-vcell em i { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; display: block; }
.cv3home-vcell b {
  font-size: 14px; font-weight: 800; color: var(--hx-txt);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cv3home-vcell u { text-decoration: none; font-size: 9.5px; font-weight: 700; color: var(--hx-mut2); margin-left: 2px; }
/*  수면 단계도 2×2 — 넷을 한 줄에 밀어 넣으면 63px 씩이라 「깊은잠」이 잘립니다. */
.cv3home-vals.is-slp { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/*  FLUX 그림으로 나가는 아이콘 — SVG 자리와 **같은 크기**여야 줄이 안 흔들립니다.
    ⚠ SVG 는 `stroke:currentColor` 로 등급 색을 따라오지만 **그림은 못 따라옵니다.**
       그래서 색으로 말하던 것을 그림이 대신하지 못합니다 — 등급은 옆의
       상태 알약·점이 계속 말합니다(그건 안 건드렸습니다). */
.cv3home-ic.is-art {
  width: 18px; height: 18px; object-fit: contain; display: block;
  flex: 0 0 auto;
}
.cv3home-stile-ic .cv3home-ic.is-art { width: 17px; height: 17px; }
.cv3sp-picki i .cv3home-ic.is-art { width: 21px; height: 21px; }

/* ══ 빈 화면 — 그림 + 글 (2026-09-13) ════════════════════════════════════
   대표님 「빈 화면 그림 3장」. 지금까지 맨 글자만 있던 자리입니다.
   ⚠⚠ 이름을 `cv3home-empty` 로 지었다가 바꿨습니다 — **이미 있는 이름**이었습니다
      (159줄 + 어두운 테마 4곳에서 색을 정하고 있습니다). 오늘만 **세 번째**입니다
      (`cv3home-mini`→평면도, `cv3home-empty`→기존 빈칸, 그전엔 `cv3home-mini`→pcard).
      ⇒ 새 이름을 지을 때는 **먼저 CSS 를 훑습니다.** 무결성 톱니바퀴가 잡아 줬습니다.
   ⚠ 그림은 **거듦**입니다. 그림이 없어도(아직 안 만들어졌어도) 글만으로
     화면이 온전해야 합니다 — 그래서 자리를 그림에 맞춰 잡지 않습니다. */
.cv3home-eart {
  /*  ⚠ 부모 `.cv3home-sig.is-blank` 가 **4칸 격자**라 여기 넣었더니 한 칸(70px)에
      갇혀 글이 «아직 이 / 름이 없 / 습니다» 로 끊겼습니다(실측 · 프레임으로 잡음).
      격자 자식이면 **줄 전체**를 차지해야 합니다. */
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: 14px;
  background: rgba(40, 43, 43, .035);
}
.cv3home-eart-i {
  flex: 0 0 auto; width: 78px; height: 104px; object-fit: contain;
  display: block; align-self: flex-end; margin-bottom: -4px;
}
.cv3home-eart-t { min-width: 0; }
.cv3home-eart-t b {
  display: block; font-size: 13px; font-weight: 800; color: var(--hx-txt); margin-bottom: 3px;
}
.cv3home-eart-t p {
  margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--hx-mut2);
}
/*  그림이 없을 때는 가운데로 — 왼쪽에 빈 자리가 남으면 «빠진 것» 처럼 보입니다. */
.cv3home-eart:not(.has-art) { display: block; }
.cv3home-eart:not(.has-art) { grid-column: 1 / -1; }
@media (max-width: 380px) {
  .cv3home-eart.has-art { display: block; }
  .cv3home-eart-i { width: 64px; height: 84px; margin: 0 auto 6px; }
}

/* ══ FLUX 그림 — **큰 자리에만** (2026-09-14) ════════════════════════════
   대표님이 「크기로 갈라 쓰기」를 고르셨습니다.
   ■ 카드 아이콘(13~18px)은 **SVG 로 되돌렸습니다** — 클레이는 그 크기에서
     색깔 점이 되고, 등급 색(정상·주의·위험)도 못 탑니다.
   ■ 그림은 **26px 이상** 자리에만: 장비 고르기 · 작은 생체값 칩 · 빈 화면 ·
     머리 그림 · 자리. 만든 62장은 한 장도 안 버립니다.
   ⚠ 그림이 없으면 부르는 쪽이 SVG 로 갑니다 — 여기 규칙은 **있을 때만** 씁니다. */
.cv3home-art { display: block; object-fit: contain; }

/*  장비 고르기 타일 — 40px 자리. 여기가 클레이가 가장 살아나는 곳입니다. */
/*  ⚠ 그림이 들어가자 타일이 119px 로 좁아져 **「AS-613」이 두 줄로 끊겼습니다**
    (실측 · 프레임으로 잡음). 장비 이름은 한 줄로 읽혀야 합니다. */
button.cv3sp-picki.has-pic { grid-template-columns: 44px 1fr; gap: 2px 10px; min-height: 62px; }
.cv3sp-pick:has(.has-pic) { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
@supports not selector(:has(*)) {
  .cv3sp-pick { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
}
.cv3sp-picki.has-pic b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv3sp-picki .cv3home-art.is-dev { width: 40px; height: 40px; }

/*  작은 생체값 칩 — 22px. 숫자가 주인공이라 그림은 모서리에서 거들기만 합니다. */
button.cv3home-mvitc.has-pic { padding-right: 30px; }
.cv3home-mvitc .cv3home-art.is-mvit {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; opacity: .82;
  pointer-events: none;
}
@media (max-width: 380px) {
  .cv3home-mvitc .cv3home-art.is-mvit { display: none; }
  button.cv3home-mvitc.has-pic { padding-right: 9px; }
}

/* ══ 센서가 놓인 자리 — 안방 · 거실 · 화장실 … (2026-09-14) ═════════════
   대표님 「각 위치를 선택하여 바로 센서를 붙일 수 있게」(2026-09-12 지시).
   ■ 한 사람에게 같은 장비가 둘이면 **자리 없이는 구별이 안 됩니다.**
   ⚠ 테두리를 쓰지 않습니다 — 면과 그림자로만(대표님 「테두리 쓰지 마세요」). */
button.cv3home-stile-sp {
  flex: 0 0 auto; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer;
  min-height: 22px; padding: 0 8px; border: 0; border-radius: 999px;
  background: rgba(40, 43, 43, .07); color: #4A4E48; white-space: nowrap;
}
button.cv3home-stile-sp:hover { background: rgba(40, 43, 43, .14); }
button.cv3home-stile-sp.is-none { background: rgba(40, 43, 43, .04); color: #9A9E94; }
button.cv3home-stile-sp:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }

.cv3home-spots {
  display: grid; gap: 8px; margin: 2px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
button.cv3home-spot {
  position: relative; font: inherit; cursor: pointer; text-align: left;
  padding: 9px 11px; border-radius: 12px; border: 0;
  background: #fff; color: inherit; min-height: 46px;
  box-shadow: 0 1px 2px rgba(40, 43, 43, .06), 0 0 0 1px rgba(40, 43, 43, .07) inset;
}
button.cv3home-spot:hover { box-shadow: 0 2px 6px rgba(40, 43, 43, .10), 0 0 0 1px rgba(40, 43, 43, .18) inset; }
button.cv3home-spot:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }
/*  고른 것 — 빛깔로 말합니다(테두리 대신 안쪽 그림자). */
button.cv3home-spot.is-on {
  background: #F7FBF8;
  box-shadow: 0 1px 2px rgba(27, 94, 58, .12), 0 0 0 2px rgba(27, 94, 58, .34) inset;
}
button.cv3home-spot.has-pic { padding: 0 0 8px; overflow: hidden; }
.cv3home-spot .cv3home-art.is-room {
  width: 100%; height: 74px; object-fit: cover; display: block; margin-bottom: 6px;
}
.cv3home-spot b { font-size: 12.5px; font-weight: 800; color: #282B2B; }
.cv3home-spot.has-pic b { display: block; padding: 0 11px; }

/*  «지금 무엇을 보고 있나» — AS-613 Mode 5 다섯 가지 (2026-09-14)
    ⚠ 「값 옴」은 값이 온다는 말일 뿐입니다. 센서가 **무엇을 보고 있는지**는
       따로 말해야 합니다. 매뉴얼 상태표 그대로 다섯 가지만 냅니다. */
.cv3home-stile-m5 {
  display: flex; align-items: center; gap: 7px; margin: 7px 0 0;
  padding: 5px 8px; border-radius: 10px; background: rgba(40, 43, 43, .04);
}
.cv3home-stile-m5 .cv3home-art.is-m5 { width: 26px; height: 34px; flex: 0 0 auto; }
.cv3home-stile-m5 span {
  font-size: 11px; font-weight: 700; color: var(--hx-mut2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*  낙상은 **눈에 띄어야** 합니다 — 다섯 중 하나만 급합니다. */
.cv3home-stile-m5.is-fall { background: rgba(179, 36, 28, .10); }
.cv3home-stile-m5.is-fall span { color: #8A2B2B; font-weight: 800; }

/* ══ 센서 타일을 **요양원 결**로 (2026-09-14) ════════════════════════════
   대표님 「우리가 맞추었던 스타일은 이게 아닙니다」 「각 1열씩 입니다」
   「여기 왜 이렇게 어수선한가요?」

   ■ 요양원 병상줄(`.cv3-bedrow`)을 **직접 보고** 맞췄습니다. 그쪽 규칙:
     · 얇습니다 — `padding:4px 7px · font-size:11px · radius:8px`
     · 옅은 흰 바탕 + 아주 옅은 선
     · **조작 단추는 평소에 안 보입니다** — `opacity:0` 이었다가
       `:hover`·`:focus-within` 일 때만 나옵니다.
   ■ 제 타일은 **늘 다 보여 주고** 있었습니다 — 자리·설정·연결·떼기 셋이
     타일마다 서 있고, 그중 제일 진한 검정 단추가 **넷이 나란히** 반복됐습니다.
     그게 어수선함의 절반이었습니다(나머지 절반은 2열 격자).
   ⚠ 다만 **손가락에는 hover 가 없습니다.** 그래서 요양원처럼 완전히 숨기지 않고
     「설정·연결」은 **조용하게 늘 두고**, 「떼기」만 손이 올라갈 때 냅니다 —
     떼기는 되돌리기 어려운 쪽이라 오히려 감추는 것이 맞습니다. */

/*  타일 — 얇게. 살은 값에만 남깁니다. */
.cv3home .cv3home-stile { padding: 7px 9px 6px; border-radius: 10px; }
.cv3home .cv3home-stile-h { gap: 5px; }
.cv3home .cv3home-stile-h b { font-size: 12px; }
.cv3home .cv3home-stile-ic { width: 16px; height: 16px; }
.cv3home .cv3home-stile-ic svg { width: 15px; height: 15px; }
.cv3home .cv3home-stile-st { font-size: 10px; padding: 1px 6px; }

/*  값 — **회색 상자를 벗깁니다.** 상자가 넷이면 타일이 표가 됩니다. */
.cv3home .cv3home-stile-v {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 5px;
}
.cv3home .cv3home-stile-c {
  background: none; padding: 0; display: flex; align-items: baseline; gap: 4px;
}
.cv3home .cv3home-stile-c em { display: inline; font-size: 10px; margin: 0; }
.cv3home .cv3home-stile-c b { font-size: 14px; }
.cv3home .cv3home-stile-v.is-empty p { font-size: 10.5px; padding: 5px 7px; }

/*  발 — 자리 · 언제 · 조작. 조용하게. */
.cv3home .cv3home-stile-f { gap: 5px; }
.cv3home .cv3home-stile-when { font-size: 10px; }
.cv3home button.cv3home-stile-sp {
  min-height: 20px; padding: 0 7px; font-size: 9.5px;
  background: rgba(40, 43, 43, .06);
}
.cv3home button.cv3home-stile-sp.is-none { background: none; color: #A5A9A0; padding: 0 3px; }
.cv3home button.cv3home-stile-sp.is-none:hover { background: rgba(40, 43, 43, .07); color: #4A4E48; }

/*  「설정·연결」 — 검정 채움을 **벗깁니다.** 타일마다 서 있는 것이라
    그중 하나가 제일 진하면 화면이 그 단추 넷으로 읽힙니다. */
.cv3home button.cv3home-stile-set {
  background: rgba(40, 43, 43, .06); color: #3A3E38;
  min-height: 22px; padding: 0 9px; font-size: 10.5px; font-weight: 700;
}
.cv3home button.cv3home-stile-set:hover { background: rgba(40, 43, 43, .14); filter: none; }

/*  「떼기」 — 요양원처럼 **손이 올라갈 때만**. 되돌리기 어려운 쪽입니다. */
.cv3home .cv3home-stile .cv3home-nt-off { opacity: 0; transition: opacity .12s; }
.cv3home .cv3home-stile:hover .cv3home-nt-off,
.cv3home .cv3home-stile:focus-within .cv3home-nt-off { opacity: 1; }
/*  ⚠ 손가락에는 hover 가 없습니다 — 누를 수 있는 기기에서는 늘 보입니다. */
@media (hover: none) {
  .cv3home .cv3home-stile .cv3home-nt-off { opacity: 1; }
}

/*  «지금 무엇을 보고 있나» 줄도 얇게. */
.cv3home .cv3home-stile-m5 { margin: 5px 0 0; padding: 4px 7px; gap: 6px; }
.cv3home .cv3home-stile-m5 .cv3home-art.is-m5 { width: 22px; height: 28px; }
.cv3home .cv3home-stile-m5 span { font-size: 10.5px; }

/* ══ 센서 **한 줄** (2026-09-14) ═════════════════════════════════════════
   대표님 「너무 두꺼워요 정확히 딱 1열씩으로 정리해주세요」
   요양원 병상줄(`.cv3-bedrow`)과 **같은 짜임**입니다 —
   `[그림] 이름 · 자리 | 값들 | 언제 | ●상태 | 설정 · 떼기`
   ⚠ 줄을 절대 늘리지 않습니다. 값이 많으면 **잘라서** 한 줄을 지킵니다. */
.cv3home-srow {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0;
  padding: 5px 8px; border-radius: 9px; font-size: 11px; color: var(--hx-txt);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 0 0 1px rgba(40, 43, 43, .05) inset;
}
.cv3home-srow.is-live { background: #F7FBF8; box-shadow: 0 0 0 1px rgba(27, 94, 58, .14) inset; }
.cv3home-srow.is-agg  { background: #FDFBF4; box-shadow: 0 0 0 1px rgba(160, 120, 20, .16) inset; }
.cv3home-srow.is-none { background: rgba(255, 255, 255, .7); }
.cv3home-srow.is-fall { background: rgba(179, 36, 28, .09); box-shadow: 0 0 0 1px rgba(179, 36, 28, .28) inset; }

.cv3home-srow-i { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; }
.cv3home-srow-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.cv3home-srow-i .cv3home-art { width: 16px; height: 18px; object-fit: contain; }

.cv3home-srow-n {
  flex: 0 1 auto; min-width: 0; font-weight: 800; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 104px;
}
button.cv3home-srow-sp {
  flex: 0 0 auto; font: inherit; font-size: 9.5px; font-weight: 800; cursor: pointer;
  min-height: 18px; padding: 0 6px; border: 0; border-radius: 999px;
  background: rgba(40, 43, 43, .07); color: #4A4E48; white-space: nowrap;
}
button.cv3home-srow-sp.is-none { background: none; color: #AEB2A9; padding: 0 2px; }
button.cv3home-srow-sp:hover { background: rgba(40, 43, 43, .16); color: #2A2E28; }
button.cv3home-srow-sp:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 1px; }

/*  값 — 한 줄에 흐릅니다. 넘치면 자릅니다(줄을 안 늘립니다). */
.cv3home-srow-v {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 3px 11px;
  overflow: hidden; white-space: nowrap;
}
.cv3home-srow-c { display: inline-flex; align-items: baseline; gap: 3px; flex: 0 0 auto; }
.cv3home-srow-c em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-srow-c b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv3home-srow-c u { text-decoration: none; font-size: 9px; font-weight: 700; color: var(--hx-mut2); }
.cv3home-srow-s5 { flex: 0 1 auto; min-width: 0; font-size: 10px; font-weight: 700;
  color: var(--hx-mut2); overflow: hidden; text-overflow: ellipsis; }
.cv3home-srow.is-fall .cv3home-srow-s5 { color: #8A2B2B; font-weight: 800; }
.cv3home-srow-no { font-style: normal; font-size: 10px; color: var(--hx-mut2); }

.cv3home-srow-w { flex: 0 0 auto; font-size: 9.5px; color: var(--hx-mut2);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/*  상태는 **점 하나**로. 「값 옴」 세 글자를 줄마다 반복하면 그게 소음입니다. */
.cv3home-srow-st { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: #B9BDB3; }
.cv3home-srow.is-live .cv3home-srow-st { background: #2F9E63; }
.cv3home-srow.is-agg  .cv3home-srow-st { background: #C79A17; }
.cv3home-srow.is-fall .cv3home-srow-st { background: #B3241C; }

button.cv3home-srow-set {
  flex: 0 0 auto; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
  min-height: 20px; padding: 0 8px; border: 0; border-radius: 7px;
  background: rgba(40, 43, 43, .07); color: #3A3E38; white-space: nowrap;
}
button.cv3home-srow-set:hover { background: rgba(40, 43, 43, .16); }
button.cv3home-srow-set:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 1px; }
/*  떼기 — 요양원처럼 손이 올라갈 때만. 누르는 기기에서는 늘 보입니다. */
.cv3home-srow-off { flex: 0 0 auto; opacity: 0; transition: opacity .12s; }
.cv3home-srow:hover .cv3home-srow-off,
.cv3home-srow:focus-within .cv3home-srow-off { opacity: 1; }
@media (hover: none) { .cv3home-srow-off { opacity: 1; } }
.cv3home-srow .cv3home-nt-ask { margin-left: auto; }

/*  🔴 2026-09-14 · 대표님 「지금도 글줄 박스가 너무 두꺼워요」
    ■ **재 보니 떼기 단추가 `min-height:40px`** 였습니다(`.cv3home-ib` 를 물려받음).
      그것 하나가 줄을 **50px** 로 밀어 올리고 있었습니다 — 나머지 조각은
      다 18~20px 였습니다. 눈으로는 «줄이 두껍다» 로 보이지만 원인은 단추 하나였습니다.
    ■ 24×24 로 내립니다 — WCAG 2.5.8(AA) **최소 24×24** 는 지킵니다. 더 줄이면
      누르기 어려워집니다(요양원 병상줄의 `.rmbed` 는 그보다 작지만, 그건
      손이 올라갈 때만 나오는 **글자 단추**라 사정이 다릅니다).
    ⇒ 줄 높이 50px → **약 32px**. */
.cv3home .cv3home-srow { padding: 4px 7px; gap: 6px; }
.cv3home .cv3home-srow .cv3home-srow-off {
  min-height: 24px; height: 24px; width: 24px; min-width: 24px; padding: 0;
  display: grid; place-items: center;
}
.cv3home .cv3home-srow .cv3home-srow-off svg { width: 14px; height: 14px; }
.cv3home .cv3home-srow-set { min-height: 20px; }

/* ══ 트리 하위 구조가 보이게 — 요양원처럼 (2026-09-14) ═══════════════════
   대표님 「그리고 트리의 하위 구조가 보이게 해주세요. 요양원처럼요.」
   ■ 요양원(`.cv3-kids`)의 짜임을 그대로 가져왔습니다:
       `margin-left:12px · padding-left:8px · border-left:2px`
     — **왼쪽 세로선 하나**가 「이것들은 저 이름에 딸린 것」이라고 말합니다.
   ■ 가정용은 지금 센서줄이 이름 바로 아래에 **평평하게** 붙어 있어,
     이름이 여럿이면 어느 줄이 누구 것인지 눈으로 안 갈렸습니다.
   ⚠ 선 하나만 씁니다. 배경까지 칠하면 이름 카드와 싸웁니다.
   ⚠ 「테두리 쓰지 마세요」는 **칸을 두르는 테두리** 이야기입니다 —
     이건 두르는 선이 아니라 **딸림을 가리키는 한 줄**이라 남깁니다
     (요양원이 이미 같은 방식을 쓰고 있습니다). */
.cv3home .cv3home-stiles {
  gap: 4px;                       /* 줄 사이 — 요양원 `.cv3-kids` 는 3px 입니다 */
  margin: 4px 0 3px 11px;
  padding-left: 9px;
  border-left: 2px solid rgba(40, 43, 43, .13);
}
/*  이름 카드가 열려 있을 때만 선이 보이면 됩니다 — 닫히면 자식이 없습니다. */
.cv3home .cv3home-nt-n[open] > .cv3home-stiles { border-left-color: rgba(40, 43, 43, .18); }
/*  센서 붙이기 판·카메라 판도 **같은 딸림**입니다 — 같은 선 안에 둡니다. */
.cv3home .cv3home-nt-sadd,
.cv3home .cv3home-nt-cadd {
  margin-left: 11px; padding-left: 9px;
  border-left: 2px solid rgba(40, 43, 43, .13);
}
/*  깊은 이름(자식 이름)은 요양원처럼 한 단 더 들여씁니다 — 이미 `--d` 가 있습니다. */
.cv3home .cv3home-nt-n .cv3home-nt-n { margin-left: 6px; }

/* ══ 「지금 대응」 카드 정리 (2026-09-14) ════════════════════════════════
   대표님 「이부분도 정리해주세요.」

   ■ 재 보고 찾은 것 — **겹쳐 있었습니다.**
     `.cv3home-sc-ack` 가 `position:absolute; right:8px; bottom:8px` 이라
     **마지막 막대(POBC) 위에 올라타** 있었습니다. 첨부 화면에서 「확인」이
     POBC 를 덮고 있던 것이 그것입니다.
   ■ 제목도 두 줄로 넘쳐 「…값이 안 옵니 / 다」 로 끊겼습니다 —
     `b` 에 `nowrap` 이 있는데도 넘친 것은 **알약(`em`)이 자리를 뺏어** 남은 폭이
     130px 뿐이었기 때문입니다.
   ⇒ ① 「확인」을 **제 줄로 내립니다**(겹치지 않게)
     ② 제목은 **두 줄까지 허용**하되 거기서 자릅니다 — 「값이 안 옵니다」는
        끝까지 읽혀야 뜻이 통합니다. 한 줄로 자르면 「값이 안 옵…」이 됩니다.
     ③ 알약은 줄어들지 않게 고정하고, 제목이 먼저 줄어들게 합니다. */
.cv3home .cv3home-sc { padding: 9px 10px 8px; gap: 5px; }
.cv3home .cv3home-sc-1 { align-items: flex-start; }
.cv3home .cv3home-sc-1 b {
  flex: 1 1 auto; min-width: 0;
  white-space: normal;                       /* 두 줄까지 허용 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.32;
}
.cv3home .cv3home-sc-1 em { flex: 0 0 auto; margin-left: 6px; white-space: nowrap; }

/*  「확인」 — 겹치지 않게 **제 줄**로. 카드 맨 아래 오른쪽. */
.cv3home .cv3home-sc-ack {
  position: static; align-self: flex-end; margin-top: 1px;
  min-height: 22px; padding: 0 10px; font-size: 10.5px;
}
/*  막대 — 확인 단추가 비켜났으니 폭을 온전히 씁니다. */
.cv3home .cv3home-sc-bars { height: 42px; gap: 5px; }
.cv3home .cv3home-sb u { font-size: 10px; }
.cv3home .cv3home-sb b { font-size: 10.5px; }

/* ══ 이름 카드 — 가로 스크롤 · 아래 카드에 정렬 (2026-09-14) ═════════════
   대표님 「첨부 부분을 아래 카드에 맞게 배치를 정렬해주시고 아래에 스크롤 바를
   만들어 주세요.」

   ■ 재 보니 **격자였습니다** — `repeat(auto-fill, minmax(150px,190px))`.
     416px 폭에 190px 카드 셋이면 **두 줄로 접혀** 2+1 이 되고, 그래서 아래
     아바타 카드와 왼쪽·오른쪽 끝이 안 맞았습니다.
   ■ 위의 「지금 대응」 띠(`.cv3home-strip`)는 **이미 가로로 흐릅니다.**
     같은 자리에 같은 몸짓이어야 하니 **같은 방식**으로 맞춥니다.
   ⚠ 스크롤 막대를 **보이게** 둡니다 — 숨기면 «더 있는지» 알 수가 없습니다.
     사람이 셋이면 안 넘치고, 여덟이면 넘칩니다. 넘칠 때만 보이면 됩니다. */
.cv3home .cv3home-pcards {
  display: flex; gap: 6px; margin: 0 0 10px;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 6px;                 /* 아래 여백 = 스크롤 막대 자리 */
  scroll-snap-type: x proximity;
  grid-template-columns: none;        /* 격자 규칙을 확실히 끕니다 */
  /*  브라우저 막대는 끕니다 — 아래에 **우리가 그린 막대**를 씁니다(2026-09-14).
      까닭: macOS 겹침 막대는 **높이 0** 이라 평소에 안 보입니다(실측). */
  scrollbar-width: none;
}
.cv3home .cv3home-pcards::-webkit-scrollbar { display: none; }
.cv3home .cv3home-pcard {
  flex: 0 0 auto; width: 190px; scroll-snap-align: start;
}

/*  위의 「지금 대응」 띠도 **같은 막대**를 씁니다 — 둘이 다르면 따로 놉니다. */
.cv3home .cv3home-strip::-webkit-scrollbar { height: 7px; }
.cv3home .cv3home-strip::-webkit-scrollbar-track { background: rgba(40, 43, 43, .05); border-radius: 999px; }
.cv3home .cv3home-strip::-webkit-scrollbar-thumb { background: rgba(40, 43, 43, .22); border-radius: 999px; }
.cv3home .cv3home-strip { scrollbar-width: thin; scrollbar-color: rgba(40,43,43,.22) rgba(40,43,43,.05); }
/*  ⚠ 좁은 화면에서 두 줄로 접던 규칙도 끕니다 — 이제 가로로 흐릅니다. */
@media (max-width: 420px) {
  .cv3home .cv3home-pcards { grid-template-columns: none; }
  .cv3home .cv3home-pcard { width: 168px; }
}

/* ══ 이름 카드 = 대응 카드 (2026-09-14) ══════════════════════════════════
   대표님 「3개의 카드도 대응 경보 카드의 기능을 해야 합니다. 그냥 보여 주는게
   아니구요」 「이벤트 상황이 발생하면 그 카드로 전환되고 … 어떤 카드에 문제가
   있는지를 알려야 합니다. 아바타두요.」
   ⚠ 「확인」은 `<button>` 안에 `<button>` 을 못 넣어 **카드 밖**에 두고 얹습니다. */
.cv3home-pcw { position: relative; flex: 0 0 auto; display: block; }
.cv3home .cv3home-pcards .cv3home-pcw .cv3home-pcard { width: 190px; }
@media (max-width: 420px) { .cv3home .cv3home-pcards .cv3home-pcw .cv3home-pcard { width: 168px; } }

/*  급한 카드 — 빛깔로 말합니다. 세 카드 중 어느 것을 먼저 볼지가 한눈에. */
.cv3home .cv3home-pcard.is-r0 { background: #FBE9E4; box-shadow: 0 0 0 2px rgba(192,57,43,.34) inset; }
.cv3home .cv3home-pcard.is-r1 { background: #FBF1DE; box-shadow: 0 0 0 2px rgba(217,164,65,.40) inset; }
.cv3home-pcard-w {
  display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.35;
  color: #7A3A2E; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3home .cv3home-pcard.is-r1 .cv3home-pcard-w { color: #7A5A0B; }
.cv3home-pcard-ack {
  position: absolute; right: 7px; bottom: 7px; z-index: 2;
  font: inherit; font-size: 10px; font-weight: 800; cursor: pointer;
  min-height: 20px; padding: 0 9px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #3B4650;
  box-shadow: 0 1px 2px rgba(20, 34, 64, .16);
}
.cv3home-pcard-ack:hover { background: #fff; }
.cv3home-pcard-ack:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }
/*  ⚠ 「확인」이 글을 덮지 않게 카드 아래를 틔웁니다. */
.cv3home .cv3home-pcw.is-urgent .cv3home-pcard { padding-bottom: 26px; }

/*  «어떤 카드에 문제인가» — 생체카드를 짚습니다. 값은 그대로 둡니다. */
.cv3home .cv3home-sig.is-hot {
  box-shadow: 0 0 0 2px rgba(192, 57, 43, .40) inset, 0 2px 8px rgba(192, 57, 43, .12);
}
.cv3home .cv3home-sig.is-hot .cv3home-sig-k::after {
  content: '지금 이 값'; margin-left: 6px; font-size: 9.5px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; background: #C0392B; color: #fff;
  vertical-align: middle;
}

/* ══ 좌우 스크롤 막대 — 우리가 그립니다 (2026-09-14) ═════════════════════
   대표님 「세개의 카드를 아래의 카드 라인에 맞춰주시고 바로 아래에 좌우
   스크롤 바를 만들어 주세요.」
   ■ 재 보니 브라우저 막대는 **높이가 0** 이었습니다 — macOS 의 「스크롤할 때만」
     설정이 겹침 막대를 쓰기 때문입니다. `::-webkit-scrollbar` 로는 못 이깁니다.
   ■ 그래서 **진짜 요소**로 그립니다: 늘 보이고 · 끌 수 있고 · 눌러서 뜁니다.
   ⚠ 넘칠 것이 없으면 JS 가 `hidden` 으로 감춥니다 — 안 움직이는 막대는 거짓말입니다.
   ⚠ 카드 줄과 **왼쪽·오른쪽 끝을 같이** 씁니다(아래 아바타 카드와도 같은 선). */
/*  ⚠ 처음에 8px · 30% 회색으로 뒀더니 **있는데도 안 보인다**고 하셨습니다
    (대표님 「근데 스크롤 바는 없네요」 — 재 보니 손잡이 261×8 로 **있었습니다**).
    화면 바탕이 크림색이라 옅은 회색은 묻힙니다. **진하게, 조금 더 두껍게.**
    대비 실측: 손잡이 #4A4E48 대 트랙 #E6E3DA ≈ 6.4:1 (AA 3:1 을 넉넉히 넘습니다). */
.cv3home-pcbar {
  height: 10px; margin: 6px 0 12px; border-radius: 999px;
  background: rgba(40, 43, 43, .10);
  box-shadow: 0 0 0 1px rgba(40, 43, 43, .07) inset;
  position: relative; cursor: pointer; touch-action: none;
}
.cv3home-pcbar > i {
  display: block; height: 100%; border-radius: 999px;
  background: #4A4E48;
  transition: background .12s;
  will-change: transform;
}
.cv3home-pcbar:hover > i { background: #33372F; }
.cv3home-pcbar:active > i { background: #22261F; }
.cv3home-pcbar[hidden] { display: none !important; }

/* ══ 이름 카드 줄을 **아바타 카드 왼끝**에 맞춥니다 (2026-09-14) ══════════
   대표님 「카드 3개 좌측으로 튀어 나와 있고」 → 「이름 카드를 오른쪽으로 밀기」

   ■ 재서 찾은 것 — 나란히 안 맞는 **구조적 이유**가 있었습니다:
       534        626                      966   990        1278
       [아바타 배경][ 「…안녕하세요」 흰 카드 ]   [ POBC 카드 ]   ← 아래 줄
       [────────── 이름 카드 (534~1278) ──────────────]        ← 위 줄
     아바타 카드(`.cv3home-hero-ai`)는 **일부러 오른쪽 38%** 에만 놓여 있고
     왼쪽 62%는 아바타 그림 자리입니다. 그래서 둘의 왼끝이 92px 어긋났습니다.
   ■ 대표님이 **이름 카드를 미는 쪽**을 고르셨습니다.
   ⚠ 62% 는 **폭에 따라 달라집니다** — 고정 px 로 밀면 다른 폭에서 또 어긋납니다.
     그래서 `.cv3home-hero-ai` 와 **같은 셈(62%)** 을 씁니다.
   ⚠ 좁은 화면에서는 아바타 카드가 **한 줄을 다 쓰므로** 밀지 않습니다 —
     밀면 이름 카드가 오히려 찌그러집니다. */
/*  ⚠ 처음에 `margin-left:62%` 로 밀었다가 **995 로 넘어갔습니다**(맞출 곳은 626).
    아바타 자리는 폭마다 달라 **퍼센트로는 못 맞춥니다.**
    ⇒ 그릴 때마다 아바타 흰 카드의 왼끝을 **재서** 그만큼 밉니다(`pcBarSync`).
      CSS 는 변수만 받습니다 — 값이 없으면 0 이라 원래 자리입니다. */
.cv3home .cv3home-pcards,
.cv3home .cv3home-pcbar {
  margin-left: var(--cv-pcleft, 0px);
  width: var(--cv-pcw, auto);         /* 아래 카드와 **오른끝도** 맞춥니다 */
  max-width: 100%;
}

/*  넘칠 것이 없을 때 — 손잡이가 꽉 찹니다. 「다 보고 계십니다」라는 뜻입니다.
    끌 수 없으니 손 모양도 바꾸고, 빛깔은 한 단 낮춥니다(눌러도 소용없다는 표시). */
.cv3home-pcbar.is-full { cursor: default; }
.cv3home-pcbar.is-full > i { background: rgba(40, 43, 43, .24); }
.cv3home-pcbar.is-full:hover > i { background: rgba(40, 43, 43, .24); }

/* ══ 자막 방송기 — 가정용 (2026-09-14) ═══════════════════════════════════
   대표님 「첨부 내용을 삭제하고 요양원처럼 자막 방송기를 넣어주세요.」
   ■ 요양원과 **같은 방송**(저장소 하나)이되 **화면은 따로** 만들었습니다 —
     실물을 빌리면 손이 저쪽 무대를 잡습니다(전에 겪었습니다).
   ■ 방송이 없을 때는 **조용합니다.** 요양원이 배운 것과 같습니다 —
     「없습니다」를 큰 글씨로 외치면 자리만 먹고 정보는 0 입니다. */
.cv3home-tick {
  display: flex; align-items: stretch; gap: 7px; margin: 0 0 10px;
}
.cv3home-tick-b {
  flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative;
  display: flex; align-items: center;
  padding: 0 12px; min-height: 38px; border-radius: 10px;
  background: var(--hx-jet, #22313f); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
}
/*  급한 자막은 빛깔로. 등급은 요양원과 같은 낱말을 씁니다. */
.cv3home-tick.is-warn   .cv3home-tick-b { background: #8A6A12; }
.cv3home-tick.is-urgent .cv3home-tick-b { background: #8A2B2B; }
/*  방송이 없을 때 — 낮고 조용하게. */
.cv3home-tick.is-idle .cv3home-tick-b {
  min-height: 28px; font-size: 11.5px; font-weight: 600;
  background: rgba(40, 43, 43, .06); color: var(--hx-mut2);
}
.cv3home-tick-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*  흐름 — 오른쪽에서 왼쪽으로. 글자 수에 비례한 시간을 줍니다.
    ⚠ 고정 시간이면 짧은 글은 쏜살같고 긴 글은 못 읽습니다(요양원이 배운 것).
    ⚠ 같은 글을 **두 벌** 이어 붙입니다 — 한 벌이면 한 바퀴마다 띠가 빕니다. */
.cv3home-tick-f {
  display: inline-flex; gap: 48px; white-space: nowrap; flex: 0 0 auto;
  animation: cvhTick calc(var(--n, 40) * 0.26s) linear infinite;
}
@keyframes cvhTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/*  읽다가 놓치지 않게 — 손을 올리면 멈춥니다. */
.cv3home-tick-b:hover .cv3home-tick-f { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cv3home-tick-f { animation: none; }
  .cv3home-tick-f > span:nth-child(2) { display: none; }
}
button.cv3home-tick-x {
  flex: 0 0 auto; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  min-height: 38px; padding: 0 13px; border: 0; border-radius: 10px;
  background: rgba(40, 43, 43, .07); color: #3A3E38; white-space: nowrap;
}
.cv3home-tick.is-idle button.cv3home-tick-x { min-height: 28px; font-size: 11px; padding: 0 11px; }
button.cv3home-tick-x:hover { background: rgba(40, 43, 43, .16); }
button.cv3home-tick-x:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }

/* ══ 자막 창 — 요양원과 같은 짜임 (2026-09-14) ═══════════════════════════
   대표님 「자막 삽입 및 기능을 요양원과 똑같이 맞춰 주세요.」
   요양원 `.cv3-notice` 의 값을 그대로 씁니다:
     `padding:10px 12px · radius:12px · gap:8px` · 줄은 `flex · gap:8px · wrap`
     칸(`.cv3-sel`)은 `padding:4px 7px · font 11.5px · radius 7px`
   ⚠ 테두리는 안 씁니다 — 가정용은 「테두리 쓰지 마세요」라 면과 그림자로 냅니다. */
.cv3home-np {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(40, 43, 43, .045);
  box-shadow: 0 0 0 1px rgba(40, 43, 43, .07) inset;
  display: grid; gap: 8px;
}
.cv3home-nrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cv3home-nin {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 12px;
  padding: 7px 10px; border: 0; border-radius: 9px;
  background: #fff; color: var(--hx-txt);
  box-shadow: 0 0 0 1px rgba(40, 43, 43, .10) inset;
}
.cv3home-nin:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 1px; }
.cv3home-nsel {
  font: inherit; font-size: 11.5px; padding: 4px 7px; border: 0; border-radius: 7px;
  background: #fff; color: var(--hx-txt);
  box-shadow: 0 0 0 1px rgba(40, 43, 43, .10) inset;
}
.cv3home-nchk { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--hx-mut2); }
.cv3home-nsp { flex: 1 1 auto; }
button.cv3home-nbtn {
  font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  min-height: 28px; padding: 0 12px; border: 0; border-radius: 8px;
  background: rgba(40, 43, 43, .08); color: #3A3E38; white-space: nowrap;
}
button.cv3home-nbtn:hover { background: rgba(40, 43, 43, .17); }
button.cv3home-nbtn.is-acc { background: var(--hx-jet, #22313f); color: #fff; }
button.cv3home-nbtn.is-acc:hover { filter: brightness(1.14); }
button.cv3home-nbtn:focus-visible { outline: 2px solid var(--hx-jet, #22313f); outline-offset: 2px; }

/*  등록된 자막 목록 — 요양원 `.ni` 와 같은 줄 짜임. */
.cv3home-nlist { display: grid; gap: 4px; }
.cv3home-ni {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, .8);
  font-size: 11px;
}
.cv3home-ni .tm { flex: 0 0 auto; font-weight: 800; color: var(--hx-mut2); min-width: 40px; }
.cv3home-ni .lv {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: rgba(40, 43, 43, .10); color: #3B4650;
}
.cv3home-ni .lv.is-warn   { background: #F5E3BE; color: #6B4E06; }
.cv3home-ni .lv.is-urgent { background: #F3D2CC; color: #8A2B2B; }
.cv3home-ni .tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-ni .x {
  flex: 0 0 auto; font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  width: 24px; height: 24px; border: 0; border-radius: 7px;
  background: none; color: var(--hx-mut2);
}
.cv3home-ni .x:hover { background: rgba(179, 36, 28, .12); color: #8A2B2B; }
.cv3home-nnote { font-size: 11px; color: var(--hx-mut2); padding: 4px 2px; }

/*  ══ 센서줄 — **어느 길로 들어오는가** (2026-09-14) ═══════════════════════
    대표님 「613: USB(전원) → Wi-Fi로 연결해야 함」
    AS-613 한 대가 USB 시리얼과 AS-BW(Wi-Fi) 두 길로 들어옵니다. 목록에는
    「AS-613」이 두 개로만 보여 어느 것이 정본인지 알 수가 없었습니다.
    ⚠ 테두리를 쓰지 않습니다(대표님 지시) — 바탕색으로만 가릅니다.
    ⚠ 눈에 띄되 **이름보다 크지 않게** 합니다. 주인공은 센서 이름입니다. */
.cv3home-srow-via {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  margin-left: 5px;
  vertical-align: 1px;
  white-space: nowrap;
}
/*  정본(Wi-Fi) — 화면 강조색. 예비(USB) — 조용한 회색.
    색만으로 가르지 않습니다: 글자(“Wi-Fi”·“USB”)가 이미 말합니다. */
.cv3home-srow-via.is-wifi { background: #E7EFE8; color: #2F5D3A; }
.cv3home-srow-via.is-usb  { background: #EAE8E2; color: #5A5E57; }

/*  「지움」 — 되돌릴 수 있지만 **떼기와는 다른 일**입니다. 눈으로 갈리게 합니다.
    ⚠ 빨강 하나로만 말하지 않습니다 — 글자가 「지움」이라고 이미 말합니다. */
.cv3home-nt-ask button.is-del { background: #F3E3E0; color: #8A2A1E; font-weight: 700; }
.cv3home-nt-ask button.is-del:hover { background: #ECD2CD; }

/*  ══ 트리 — 「아직 안 붙은 센서」 (2026-09-14) ══════════════════════════
    대표님 「트리에서 클릭 설정해서 연결할 수 있게 한다는 것입니다. 직관적으로」
    여태 트리는 **붙은 센서만** 그려서, 안 붙은 것은 누를 자리조차 없었습니다.
    ⚠ 테두리를 쓰지 않습니다 — 바탕과 그림자로만 가릅니다(대표님 지시).
    ⚠ 트리 간격은 넓히지 않습니다(대표님 「트리 간격이 필요 없이 넓어요」). */
.cv3home-nt-free { margin: 3px 0 0; }
.cv3home-nt-free > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 7px;
  background: var(--cv-soft, rgba(27,29,26,.045));
  font-size: 11.5px;
}
.cv3home-nt-free > summary::-webkit-details-marker { display: none; }
.cv3home-nt-free > summary span { margin-left: auto; opacity: .6; font-size: 10.5px; }

.cv3home-nt-frow {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 5px 8px; margin-top: 3px; border-radius: 7px;
  background: var(--cv-card, #fff);
  box-shadow: 0 1px 2px rgba(27,29,26,.05);
}
.cv3home-nt-frow > b { font-size: 11.5px; font-weight: 700; }
.cv3home-nt-frow > em {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
}
.cv3home-nt-frow > em.is-live { background: #E7EFE8; color: #2F5D3A; }
.cv3home-nt-frow > em.is-none { background: #EFECE6; color: #6B6F68; }

.cv3home-nt-fto { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
/*  누르는 것은 **최소 24px** 이상으로 둡니다 (WCAG 2.5.8 AA). */
.cv3home-nt-fto button, .cv3home-nt-fhow {
  /*  ⚠ 줄 안의 단추가 줄보다 크면 **줄을 밀어 올립니다**(실측: 「붙이는 방법」이
      h40 이라 줄이 50px 이 됐습니다). 24px 로 맞춥니다 —
      그 밑으로는 안 내립니다(WCAG 2.5.8 AA 최소 누름 크기 24×24). */
  min-height: 24px; height: 24px; line-height: 1.2;
  border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 10.5px; padding: 2px 8px;
  background: var(--cv-soft, rgba(27,29,26,.06)); color: inherit;
}
.cv3home-nt-fto button i { font-style: normal; opacity: .55; margin-left: 3px; font-size: 10px; }
.cv3home-nt-fto button:hover, .cv3home-nt-fhow:hover { background: rgba(27,29,26,.12); }
.cv3home-nt-fhow { font-weight: 700; }
.cv3home-nt-fno { font-size: 10.5px; opacity: .7; }
/*  아직 모르는 것 — 「안 옴」과 갈라 적습니다(멀쩡한 센서를 고장으로 보이게 하지 않습니다). */
.cv3home-nt-frow > em.is-wait { background: #EAE6DC; color: #6B6248; }

/*  센서 이름을 눌러 연결 창을 엽니다 (2026-09-14 · 대표님 「직관적으로」).
    ⚠ 단추가 됐지만 **글자처럼 보여야** 합니다 — 줄이 단추밭이 되면 안 읽힙니다.
      눌리는 것임은 손가락 커서와 살짝 뜨는 바탕으로 알립니다. */
button.cv3home-srow-n {
  border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: 700; text-align: left;
  padding: 2px 4px; margin-left: -4px; border-radius: 6px;
  cursor: pointer; min-height: 24px;   /* WCAG 2.5.8 AA */
}
button.cv3home-srow-n:hover { background: rgba(27,29,26,.07); }
button.cv3home-srow-n:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/*  ══ 브리지가 맡는 블루투스 (2026-09-14) ═══════════════════════════════ */
.cv3home-bwlist { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.cv3home-bwdev {
  display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(27,29,26,.06); color: inherit; font: inherit;
  padding: 7px 10px; min-height: 34px; text-align: left;
}
.cv3home-bwdev:hover { background: rgba(27,29,26,.12); }
.cv3home-bwdev > b { font-weight: 700; }
.cv3home-bwdev > em { margin-left: auto; font-style: normal; opacity: .6; font-size: 11px; }

.cv3home-bwform { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cv3home-bwform label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cv3home-bwform input {
  flex: 1; border: 0; border-radius: 7px; padding: 7px 9px; min-height: 32px;
  background: rgba(27,29,26,.06); color: inherit; font: inherit;
}
.cv3home-bwform button[type="submit"] {
  border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700;
  padding: 8px 12px; min-height: 34px; background: #1B1D1A; color: #fff;
}

/*  ══ 글줄 상자 — **한 줄 · 32px 로 통일** (2026-09-14) ═══════════════════
    🔴 대표님 「패널 글줄 상자가 또 두꺼워 졌어요. 변경해 주시고 우측 패널의
       글줄 상자들도 같은 사이즈로 맞춰주세요.」

    ■ 기준은 이미 정해져 있었습니다 — `.cv3home-srow` 입니다.
      실측 **32px**(안여백 5px 8px · 글자 11px · 한 줄). 대표님이 「정확히 딱
      1열씩으로」 하라고 하신 그 줄입니다.
    ■ 그런데 재 보니 이렇게 벌어져 있었습니다 (실측):
        왼쪽  `.cv3home-nt-frow`  **50px** ← 오늘 제가 넣으며 기준을 안 봤습니다
        우측  `.cv3home-wl-i`     **54px** (세 줄로 쌓임)
              `.cv3home-need`     **50/66px**
              `.cv3home-risk`     **54px** ← **한 줄인데** 54
              `.cv3home-ch-b`     53px
    ⇒ 전부 **srow 와 같은 치수**로 맞춥니다. 안여백·글자·모서리까지 같게.
    ⚠ 높이를 **못 박지 않습니다**(`height` 고정 금지) — 글자가 길어지면 잘립니다.
      «한 줄로 눕히고 안여백을 같게» 하면 결과가 32px 로 모입니다.
    ⚠ 테두리는 안 씁니다(대표님 지시) — 바탕과 그림자로만 가릅니다. */

.cv3home-nt-frow,
.cv3home-right .cv3home-wl-i,
.cv3home-right .cv3home-need,
.cv3home-right .cv3home-risk {
  /*  ⚠⚠ `box-sizing` 이 **꼭** 필요합니다. content-box 이면 `min-height:32` 가
      «안쪽 칸 32» 를 뜻해 여백 8이 더 붙어 **40~42px** 이 됩니다(실측).
      기준인 `.cv3home-srow` 는 border-box 라 32가 **바깥 높이**입니다.
      한참을 «규칙이 안 먹는다» 고 의심했는데, 먹고 있었고 **자가 달랐습니다.** */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  /*  여백 4px — 24px 단추가 들어가고 4 + 24 + 4 = 32. */
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 3px;
}

/*  `wl-i` 는 격자로 **두 줄**(이름/까닭)이었습니다 — 한 줄로 눕힙니다.
    ⚠ 격자 영역 지정을 풀어야 `display:flex` 가 먹습니다. */
.cv3home-right .cv3home-wl-i {
  grid-template-areas: none;
  grid-template-columns: none;
  flex-wrap: nowrap;
}
/*  긴 글은 **자릅니다** — 줄을 늘리지 않습니다(1열 규칙). 전체는 툴팁에 있습니다. */
.cv3home-right .cv3home-wl-i > *,
.cv3home-nt-frow > b,
.cv3home-right .cv3home-need > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*  점·딱지는 줄어들면 안 됩니다 — 줄어들 것은 글자뿐입니다. */
.cv3home-right .cv3home-wl-d,
.cv3home-nt-frow > em,
.cv3home-nt-fto,
.cv3home-nt-fhow { flex: 0 0 auto; }

/*  `need` 는 제목+설명 두 줄이었습니다 — 옆으로 눕히고 설명은 흐리게. */
.cv3home-right .cv3home-need > b,
.cv3home-right .cv3home-need > strong { flex: 0 0 auto; font-size: 11px; }
.cv3home-right .cv3home-need > p,
.cv3home-right .cv3home-need > span { font-size: 10.5px; opacity: .72; }

/*  `risk` 는 **한 줄인데도** 54px 였습니다 — 안여백이 컸습니다. */
.cv3home-right .cv3home-risk { margin: 3px 0 0; font-size: 11px; }

/*  ── 위 규칙만으로는 안 맞았습니다. **재서** 까닭을 찾았습니다 (2026-09-14):
      `nt-frow` 50px ← `flex-wrap: wrap` + 「붙이는 방법」 단추가 **h40**
      `wl-i`    40px ← **`min-height: 40px`** 가 이미 박혀 있었음
      `need`    27px ← 기준이 없어 **기준보다 얇음**
    ⇒ 셋을 한 자로 맞춥니다: **min-height 32px · 줄바꿈 없음 · 속 단추는 22px.**
    ⚠ `height` 를 못 박지 않습니다 — 글이 길어지면 잘립니다. `min-height` 로
      «최소 32» 만 정하고, 넘칠 글자는 말줄임표로 자릅니다(위 규칙). */
.cv3home-nt-frow,
.cv3home-right .cv3home-wl-i,
.cv3home-right .cv3home-need,
.cv3home-right .cv3home-risk {
  min-height: 32px;
  flex-wrap: nowrap;
}

/*  안 붙은 센서가 여럿이면 단추가 넘칩니다 — 줄을 늘리지 않고 **옆으로 밀어** 봅니다. */
.cv3home-nt-fto {
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.cv3home-nt-fto::-webkit-scrollbar { height: 0; }

/*  ── 두 번 더 재고서야 맞췄습니다 (2026-09-14) ──────────────────────────
    ⚠⚠ ① **전역 규칙이 제 것을 이기고 있었습니다.**
        `.cv3home-side button, .cv3home-right button { min-height: 40px }`
        — 특이도 (0,1,1). 제 `.cv3home-nt-fhow` 는 (0,1,0) 이라 **늘 집니다.**
        그래서 단추가 40px 로 남아 줄이 50px 이 됐습니다.
        ([[blanket-css-rule-eats-its-own-fixes]] — 또 밟았습니다.)
        ⇒ 이 파일이 이미 쓰는 방식대로 **특이도를 맞춥니다**
          (`.cv3home .cv3home-side …` — 다른 줄들도 그렇게 이겨 냈습니다).
    ⚠⚠ ② `need`·`risk` 는 **글이 두 줄로 접혀** 42·44px 이 됐습니다.
        `risk` 는 글이 요소가 아니라 **맨 텍스트**라 `> *` 규칙이 안 닿았습니다.
        ⇒ **상자 자신**에 한 줄 규칙을 겁니다. */
.cv3home .cv3home-side .cv3home-nt-fto button,
.cv3home .cv3home-side .cv3home-nt-fhow,
.cv3home .cv3home-right .cv3home-nt-fto button,
.cv3home .cv3home-right .cv3home-nt-fhow {
  min-height: 24px;
  height: 24px;
}

.cv3home .cv3home-right .cv3home-need,
.cv3home .cv3home-right .cv3home-risk {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*  ── 마지막 한 조각 (2026-09-14) ────────────────────────────────────────
    ⚠⚠ `min-height: 32px` 를 주었는데도 **42px** 이었습니다. 계산값을 읽어 보니
       속 내용이 정확히 32 였고, 거기에 위아래 여백 5+5 가 **더** 붙어 42.
       → `box-sizing` 이 **content-box** 여서 «32» 가 **안쪽 칸**을 뜻했습니다.
         기준인 `.cv3home-srow` 는 border-box 라 32가 **바깥 높이**입니다.
       한참을 «규칙이 안 먹는다» 고 의심했는데, 먹고 있었고 **자가 달랐습니다.**
    ⇒ 바깥 기준으로 맞춥니다. 여백은 4px — 24px 단추가 들어가고 4+24+4 = 32. */

/*  ⚠ 마지막 하나 — `risk` 가 52px 로 남았습니다. 안을 열어 보니 속의
    `.cv3home-risk-r` 가 **36px** 이라 상자를 밀고 있었습니다(실측).
    상자만 조여서는 안 되고 **속에 든 것도** 줄 높이에 맞춰야 합니다. */
.cv3home .cv3home-right .cv3home-risk .cv3home-risk-r {
  max-height: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/*  카메라 쪽 넘김 — 분할보다 채널이 많을 때만 나옵니다 (2026-09-14).
    ⚠ 베젤 안 다른 단추와 **같은 치수**로 둡니다 — 여기만 크면 눈에 걸립니다. */
.cv3home-csppg { display: inline-flex; gap: 3px; margin-left: 4px; }
.cv3home-csppg button {
  min-width: 22px; min-height: 24px; height: 24px; padding: 0 6px;
  border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.10); color: #E8E6E0;
  font: inherit; font-size: 13px; font-weight: 800; line-height: 1;
}
.cv3home-csppg button:hover { background: rgba(255,255,255,.20); }

/*  카메라가 0대일 때 붙이러 가는 자리 (2026-09-14).
    ⚠ 「없습니다」로 끝내지 않습니다 — 없으면 **만들 길**을 그 자리에 둡니다. */
.cv3home-cam-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cv3home-cam-add button {
  border: 0; border-radius: 9px; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; padding: 0 12px; min-height: 32px;
  background: var(--hx-txt, #1B1D1A); color: #fff;
}
.cv3home-cam-add em { font-style: normal; font-size: 11px; opacity: .7; }
/*  「다 비우기」 — 되돌릴 수 없는 일이라 **눈에 다르게** 둡니다.
    ⚠ 테두리를 쓰지 않습니다(2026-09-05 대표님) — 바탕색으로만 가릅니다. */
.cv3home-cam-add button.is-off { background: #F7E3E0; color: #8A2B2B; }

/*  1채널 화면에서도 분할을 고를 수 있게 (2026-09-14 · 대표님 흐름 제안).
    ⚠ 베젤 단추와 **같은 치수**(24px)로 둡니다 — 여기만 크면 눈에 걸립니다. */
.cv3home-cam-gr { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.cv3home-cam-gr > span { font-size: 10.5px; opacity: .6; margin-right: 2px; }
.cv3home-cam-gr button {
  min-width: 24px; min-height: 24px; height: 24px; padding: 0 7px;
  border: 0; border-radius: 7px; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: rgba(27,29,26,.07); color: inherit;
}
.cv3home-cam-gr button:hover { background: rgba(27,29,26,.14); }
.cv3home-cam-gr button.is-on { background: var(--hx-txt, #1B1D1A); color: #fff; }

/*  ══ 묻는 창 — **패널이 아니라 팝업으로** (2026-09-14) ═══════════════════
    🔴 대표님 「패널에 띄우지 않고 팝업으로 띄웁니다.」
       (갈무리: 「새 채널의 카메라」 창이 좌측 패널 안에 끼어 있었습니다.)

    ■ 왜 패널에 떴나 — `askHtml()` 이 `sideHtml()` 안에서 그려집니다.
      글자를 넣는 창인데 패널 폭(452px)에 갇혀 답답하고, 아래 내용이 밀립니다.
    ⚠ **마크업을 옮기지 않았습니다.** DOM 을 다른 데로 옮기면 «적던 글자가
      지워지는» 사고가 납니다 — 이 파일이 이미 겪은 덫입니다(덧칠기가 칸을 새로
      만듭니다). 자리만 화면 가운데로 띄웁니다.
    ⚠ `data-key="ask"` 로 **이 창만** 집습니다 — `.cv3home-ask` 를 쓰는 다른 칸
      (`cv3home-aimset`)까지 띄우면 엉뚱한 것이 떠오릅니다.
    ⚠ 뒤를 어둡게 덮는 것은 `::before` 로 만듭니다 — 새 요소를 넣지 않습니다. */
.cv3home [data-key="ask"] {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9800;                 /* 연결 창(9700)보다 위 — 묻는 창이 맨 앞 */
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  margin: 0;
  box-shadow: 0 4px 12px rgba(20,24,28,.22), 0 30px 70px -20px rgba(20,24,28,.6);
}
.cv3home [data-key="ask"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(20, 22, 22, .42);
}
/*  창이 넓어졌으니 입력칸도 넉넉히 — 주소는 깁니다. */
.cv3home [data-key="ask"] input { width: 100%; box-sizing: border-box; }

/*  ══ 붙이는 길 타일 (2026-09-14 · 대표님 「글줄이 아닌 **직관적 타일 스타일**」) ══
    ⚠ 테두리를 쓰지 않습니다(2026-09-05 대표님 「그리고 테두리 쓰지 마세요.」) —
      칸의 경계는 **바탕색과 그림자**로만 만듭니다.
    ⚠ 두 칸으로 놓되 좁아지면 한 칸으로 접힙니다. 타일이 글줄보다 좁아지면
      타일로 만든 뜻이 없습니다. */
/*  ⚠ 선택자 힘을 맞춥니다. `.cv3home-ask-n span { display: block }` 이 (0,1,1) 이라
    `.cv3home-ask-ways` (0,1,0) 를 **이깁니다** — 실측: 타일이 격자로 안 놓이고
    440px 로 한 줄씩 쌓였습니다. 이 파일에서 **전역 규칙이 제 수정을 잡아먹는**
    사고를 또 밟았습니다. 힘을 한 칸 올려 둡니다. */
.cv3home-ask-n .cv3home-ask-ways,
.cv3home-ask-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.cv3home-ask-ways .cv3home-way {
  /*  ⚠ `.cv3home-side button { min-height: 40px }` 같은 전역 규칙이 이 타일을
      납작하게 만들지 않도록 **높이를 못 박습니다**(전에 글줄 상자가 이것 때문에
      두꺼워졌습니다). `box-sizing` 도 같이 못 박습니다 — content-box 면
      padding 이 높이에 더해집니다. */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 9px;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 10px 11px;
  border: 0;
  border-radius: 13px;
  background: #F4F2EC;
  color: #282B2B;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .07);
}
.cv3home-ask-ways .cv3home-way:hover { background: #FFFFFF; box-shadow: 0 2px 8px rgba(20,24,28,.14); }
.cv3home-ask-ways .cv3home-way:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }
.cv3home-ask-ways .cv3home-way-i {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: #FFFFFF;
  color: #3A3D38;
}
.cv3home-ask-ways .cv3home-way-i svg { width: 17px; height: 17px; }
.cv3home-ask-ways .cv3home-way b  { font-size: 12px; font-weight: 800; line-height: 1.3; }
.cv3home-ask-ways .cv3home-way em {
  font-style: normal; font-size: 10.5px; line-height: 1.35; color: #6A6D65;
}
/*  이미 쓰는 장치 — **지우지 않고 흐리게** 둡니다. 목록에서 빼면
    «내 카메라가 왜 안 보이지» 가 됩니다. */
.cv3home-ask-ways .cv3home-way.is-used { opacity: .5; cursor: not-allowed; }
.cv3home-ask-ways .cv3home-way.is-used:hover { background: #F4F2EC; box-shadow: 0 1px 2px rgba(20,24,28,.07); }

/*  ══ XK300 잇기 — 걸음 넷 (2026-09-14 · 대표님 「패널의 센서 연결에 적용해 주세요」) ══
    ⚠ 테두리를 쓰지 않습니다(대표님 2026-09-05) — 바탕색과 그림자로만 가릅니다.
    ⚠ 걸음줄은 **좁으면 접힙니다.** 센서 창이 패널 안에서 좁아질 때
      가로로 밀려 나가면 안 됩니다. */
.cv3xk-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.cv3xk-s {
  flex: 1 1 auto; min-width: 92px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 10px;
  border: 0; border-radius: 10px;
  background: #F1EFE9; color: #6A6D65;
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.cv3xk-s i {
  font-style: normal; display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: #DEDBD2; color: #4A4E48; font-size: 10px; font-weight: 800;
}
.cv3xk-s.is-done { color: #1F6B44; }
.cv3xk-s.is-done i { background: #1F6B44; color: #fff; }
.cv3xk-s.is-on { background: #FFFFFF; color: #282B2B; box-shadow: 0 1px 3px rgba(20,24,28,.14); }
.cv3xk-s.is-on i { background: #282B2B; color: #fff; }
.cv3xk-s:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }

.cv3xk-box { background: #F7F5F0; border-radius: 12px; padding: 11px 12px; }
.cv3xk-w  { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: #5B5E56; }
.cv3xk-ok { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: #1F6B44; }
.cv3xk-err{ margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: #8A2B2B;
            background: #FBEFEC; border-radius: 9px; padding: 7px 9px; }
.cv3xk-w b, .cv3xk-ok b { color: #282B2B; font-weight: 800; }

.cv3xk-f { display: block; margin: 0 0 8px; }
.cv3xk-f > span { display: block; font-size: 11px; font-weight: 700; color: #6A6D65; margin-bottom: 3px; }
.cv3xk-f > input {
  box-sizing: border-box; width: 100%; min-height: 34px;
  padding: 0 10px; border: 0; border-radius: 9px;
  background: #FFFFFF; color: #282B2B; font: inherit; font-size: 12.5px;
  box-shadow: inset 0 0 0 1px rgba(20,24,28,.10);
}
.cv3xk-f > input:focus { outline: 2px solid #282B2B; outline-offset: -1px; }

.cv3xk-b { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.cv3xk-b button {
  min-height: 34px; padding: 0 13px; border: 0; border-radius: 9px;
  background: #E6E3DA; color: #282B2B; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.cv3xk-b button.is-key { background: #282B2B; color: #FFFFFF; }
.cv3xk-b button[disabled] { opacity: .55; cursor: default; }

.cv3xk-list { display: grid; gap: 6px; margin-bottom: 9px; max-height: 210px; overflow-y: auto; }
.cv3xk-i {
  display: block; width: 100%; text-align: left;
  border: 0; border-radius: 10px; padding: 8px 10px;
  background: #FFFFFF; color: #282B2B; font: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20,24,28,.06);
}
.cv3xk-i.is-flat { cursor: default; }
.cv3xk-i.is-on { box-shadow: 0 0 0 2px #282B2B; }
.cv3xk-i b  { display: block; font-size: 12px; font-weight: 800; }
.cv3xk-i em { display: block; font-style: normal; font-size: 10.5px; color: #6A6D65; margin-top: 1px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*  발급 결과 — **한 번만** 보이는 글. 끌어서 복사할 수 있어야 합니다. */
.cv3xk-out {
  margin: 0 0 8px; padding: 10px 11px; border-radius: 10px;
  background: #FFFFFF; color: #282B2B;
  font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-all;
  max-height: 200px; overflow-y: auto;
  box-shadow: inset 0 0 0 1px rgba(20,24,28,.10);
  user-select: text;
}
.cv3xk-f > span em { font-style: normal; font-weight: 600; color: #8A8D85; margin-left: 4px; }
.cv3xk-f > select {
  box-sizing: border-box; width: 100%; min-height: 34px; padding: 0 9px;
  border: 0; border-radius: 9px; background: #FFFFFF; color: #282B2B;
  font: inherit; font-size: 12.5px;
  box-shadow: inset 0 0 0 1px rgba(20,24,28,.10);
}
.cv3xk-f > input[disabled] { opacity: .6; }

/*  ══ 카메라 베젤 — **줄을 맞춥니다** (2026-09-14 · 대표님 「깔끔하게 정렬 정리 해주세요.」) ══
    ■ 실측으로 잰 어긋남:
        · 단추 크기가 **두 가지**였습니다 — 도구 30×24 · 분할칩 22~30×24
        · 묶음 사이와 묶음 안의 간격이 **똑같이 3px** 이라 무엇이 한패인지 안 보입니다
          (라벨은 이미 `::before{display:none}` 로 숨겨져 있습니다)
        · 줄1은 x=94 에서, 줄2는 x=44 에서 시작해 **왼쪽이 들쭉날쭉**
        · 베젤 안쪽 여백이 `0 1px 3px` 이라 위아래가 안 맞습니다
    ⇒ ① 단추를 **한 치수(26×26)** 로 ② 묶음 **안은 좁게(2px) · 사이는 넓게(12px)**
      ③ 줄마다 **같은 여백**에서 시작 ④ 세로 가운데로 맞춥니다.
    ⚠ 테두리를 새로 긋지 않습니다(대표님 2026-09-05) — **간격으로만** 가릅니다.
    ⚠ 단추를 빼거나 더하지 않았습니다. **자리만** 맞췄습니다(R0-6). */
.cv3home .cv3home-cspbar {
  /*  ⚠ 줄 사이는 **6**, 묶음 사이는 **12**. 묶음 안(2)과 세 단계로 벌려야
      «무엇이 한패인가» 가 간격만으로 읽힙니다(라벨은 숨겨져 있습니다).
      ⚠ 좁은 패널(285px)에서는 세 줄로 접힙니다 — 넓으면 두 줄·한 줄이 됩니다.
        접히는 것이 겹치는 것보다 낫습니다. */
  gap: 6px 12px;
  padding: 4px 5px 5px;
  align-items: center;
  row-gap: 6px;
}
/*  상태 글 — 줄1의 왼쪽. 단추와 **같은 높이**로 두어야 가운데가 맞습니다. */
.cv3home .cv3home-cspbar-n {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-right: auto;
}
/*  묶음 — 안쪽은 촘촘히. 라벨 자리(위 10px)는 숨겼으니 되돌립니다. */
.cv3home .cv3home-cspgrp,
.cv3home .cv3home-cspg {
  gap: 2px;
  padding: 0;
  align-items: center;
  background: none;
}
/*  단추 — **한 치수**. 아이콘이든 글자든 같은 상자 안에 들어갑니다. */
.cv3home .cv3home-cspb,
.cv3home .cv3home-cspg button {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  line-height: 1;
}
/*  숫자 칩(1·4·9…64)은 두 자리가 들어가야 합니다 — **가로만** 늘립니다. */
.cv3home .cv3home-cspg button { width: auto; min-width: 26px; padding: 0 6px; font-size: 11px; }
.cv3home .cv3home-cspgrp .cv3home-ic,
.cv3home .cv3home-cspg .cv3home-ic { width: 15px; height: 15px; }

/*  ⚠⚠ 2026-09-14 — **이름표를 띄우지 않고 줄 안에 넣습니다.**
    ■ 무엇이 잘못돼 있었나 (실측):
        이름표(`::before`)가 `position:absolute; top:1px` 로 **떠** 있고,
        묶음이 `padding-top:10px` 로 그 자리를 비워 두는 구조였습니다.
        그리고 그 이름표를 **`@media (max-width: 520px)`** 로 숨겼습니다.
      🔴 **창 폭으로 쟀습니다. 그런데 좁은 것은 창이 아니라 «패널» 입니다.**
        대표님 화면(창 1600px · 좌측 패널 140px)에서는 매체 규칙이 **안 걸려서**
        이름표가 그대로 뜨고, 좁은 칸에서 서로 밀려 들쭉날쭉했습니다.
        (「명단을 적는 규칙은 낡는다 — 넓은 화면에서만 어긋나 오래 못 찾는다」를
         또 밟았습니다. 게다가 제가 여백을 0 으로 만들어 **덮을 뻔**했습니다.)
    ⇒ 띄우지 않습니다. **글자를 줄 안에** 둡니다 — 겹칠 수가 없고, 창 폭을
      물어볼 일도 없습니다. 좁으면 매체 규칙이 그대로 접습니다. */
.cv3home .cv3home-cspgrp::before,
.cv3home .cv3home-cspg::before {
  position: static;
  display: inline-flex;
  align-items: center;
  top: auto;
  left: auto;
  margin-right: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
}
/*  아주 좁으면 접습니다 — 이름표가 단추를 밀어내면 안 됩니다.
    ⚠ 위 규칙이 (0,2,1) 이라 매체 안에서도 같은 힘으로 적어야 이깁니다. */
@media (max-width: 520px) {
  .cv3home .cv3home-cspgrp::before,
  .cv3home .cv3home-cspg::before { display: none; }
}

/*  ══ 카메라 베젤 — **덩어리를 줄입니다** (2026-09-14 · 대표님 「정렬과 정리를 해주세요」) ══
    ■ 세 번 「정리가 안됐다」고 하셨습니다. 줄만 맞춰서는 안 되는 것이었습니다.
      26px 짜리 한 줄에 **이름표 4개 + 단추 13개**가 섞여 있었습니다.
      정렬의 문제가 아니라 **개수의 문제**입니다.
    ⇒ 세 가지만 합니다:
        ① **이름표를 없앱니다.** 단추마다 툴팁이 이미 있습니다. 26px 아이콘 줄에
           8.5px 회색 글자를 끼워 넣으면 그게 «줄이 두 겹» 으로 보이는 원인입니다.
           묶음은 **간격으로만** 가릅니다(안 2px · 사이 14px).
        ② 분할 칩 일곱을 **하나의 띠**로 붙입니다. 떨어뜨려 두면 일곱 덩어리이고,
           붙여 두면 **한 덩어리**입니다. 눈이 세는 것이 7 에서 1 로 줍니다.
        ③ 상태 글(1CH · 2×2 · 빈 3)을 **오른쪽 끝**으로 보냅니다. 왼쪽에 두면
           «무엇을 누르는 곳» 보다 먼저 읽혀 손이 갈 곳을 가립니다.
    ⚠ 단추를 하나도 빼지 않았습니다 — 툴팁도 그대로입니다(R0-6).
    ⚠ 테두리를 새로 긋지 않습니다 — 띠는 **간격을 0 으로** 만들어 이어 붙입니다. */

/*  ① 이름표 없음 */
.cv3home-cspgrp::before,
.cv3home-cspg::before { content: none; display: none; }

/*  ② 분할 칩 — 한 덩어리 띠 */
.cv3home .cv3home-cspg { gap: 0; }
.cv3home .cv3home-cspg button { border-radius: 0; margin: 0; }
.cv3home .cv3home-cspg button:first-child { border-radius: 7px 0 0 7px; }
.cv3home .cv3home-cspg button:last-child  { border-radius: 0 7px 7px 0; }
/*  이어 붙였으니 사이를 **가는 선 하나**로만 가릅니다 — 테두리가 아니라 틈입니다. */
.cv3home .cv3home-cspg button + button { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }

/*  묶음 사이는 넓게, 묶음 안은 좁게 */
.cv3home .cv3home-cspbar { gap: 6px 14px; }
.cv3home .cv3home-cspgrp { gap: 2px; }

/*  ③ 상태 글은 맨 끝으로 — 조용하게 */
.cv3home .cv3home-cspbar-n {
  order: 9;
  margin-left: auto;
  margin-right: 0;
  color: rgba(255, 255, 255, .45);
  font-weight: 700;
}

/*  ══ 작은 생체 카드 — 케어뷰 2.0 짜임 (2026-09-14 · 대표님
    「케어뷰, 케어뷰 2.0을 토대로 카드를 만들어 주세요. 각 요소와 팝업도 굉장히 중요합니다.」) ══
    ■ 전에는 **그림 · 이름 · 숫자 · 「적기」** 넉 줄뿐이었습니다.
      「128/78」이 좋은 건지 나쁜 건지 화면이 **말해 주지 않았습니다.**
    ⇒ 2.0 의 `metricRow`(이름·딱지·값)와 「이전 대비 변화」를 같은 꼴로 얹습니다.
    ⚠ 테두리를 새로 긋지 않습니다 — 딱지는 **연한 바탕**으로만 가릅니다. */
.cv3home-mvitc { grid-template-rows: auto auto auto; }

/*  참고 딱지 — 값 바로 아래, 한 줄 전체 */
.cv3home-mvit-b {
  grid-column: 1 / -1;
  justify-self: start;
  text-decoration: none;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.01em;
  background: #EFEDE6;
  color: #5B5E56;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv3home-mvit-b.is-ok   { background: #DDEFE4; color: #1F6B44; }
.cv3home-mvit-b.is-warn { background: #FBF1DE; color: #7A5A12; }
.cv3home-mvit-b.is-bad  { background: #F7E3E0; color: #8A2B2B; }

/*  이전 대비 변화 + 추세선 — 한 줄에 나란히 */
.cv3home-mvit-t {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: #8A8D85;
}
.cv3home-mvit-t var { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: -.01em; }
.cv3home-mvit-t.is-d1  { color: #8A5A12; }   /* 올라감 */
.cv3home-mvit-t.is-d-1 { color: #2E6B8F; }   /* 내려감 */
.cv3home-mvit-sp { width: 46px; height: 14px; flex: 0 0 auto; display: block; }

/*  ══ 아직 비어 있는 자리 (2026-09-15 · 대표님 심박·호흡 카드 사진) ═════════
    값 자리만 남기고 **상태말·추세선은 통째로 사라져** 카드가 절반만 지어진
    것처럼 보였습니다. 셋을 한 덩이로 보이게 자리를 남깁니다.
    ⚠ 빈 자리는 **읽히면 안 됩니다** — 값인 줄 알면 안 되니까요.
      글자는 아주 흐리게, 화면낭독기에는 감춥니다(aria-hidden). */
.cv3home-mvit-b.is-slot {
  background: none;
  color: #C2C5BC;
  padding: 1px 0;
  box-shadow: inset 0 0 0 1px #E4E2DA;
  border-radius: 6px;
  padding-left: 6px; padding-right: 6px;
}
.cv3home-mvit-t.is-slot { color: #C2C5BC; }
.cv3home-mvit-t.is-slot i {
  flex: 0 0 auto;
  width: 46px; height: 14px;
  background:
    linear-gradient(to bottom, transparent calc(50% - .5px), #DFDDD4 calc(50% - .5px),
                    #DFDDD4 calc(50% + .5px), transparent calc(50% + .5px));
}
.cv3home-mvit-t.is-slot var { color: #C2C5BC; }

/*  팝업 안 — 지금 값과 최근 기록 */
.cv3mini-now { font-size: 17px; font-weight: 900; letter-spacing: -.02em; margin-right: 6px; }
.cv3home-ask-n .cv3home-mvit-b { display: inline-block; grid-column: auto; margin-top: 0; vertical-align: 2px; }
.cv3mini-h { display: block; margin-top: 4px; font-style: normal; color: #6A6D65; line-height: 1.6; }

/*  ══ 값의 자리 막대 — 케어뷰 1 의 «위험 막대» (2026-09-14) ══════════════
    ⚠ 숫자를 못 읽어도 «가운데인가 끝인가» 는 보입니다. 그것이 이 막대의 값어치입니다.
    ⚠ 눈금 밖이면 끝에 붙이되 **색으로 넘쳤음**을 알립니다 — 잘라내 «가운데» 로
      보이게 하면 거짓말입니다(R0-2).
    ⚠ 테두리를 쓰지 않습니다 — 바탕색으로만 그립니다. */
.cv3home-mvit-bar {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 3px;
  background: #E7E4DB;
  overflow: visible;
}
/*  흔한 범위 — 연한 초록 띠 */
.cv3home-mvit-bar i {
  position: absolute; top: 0; height: 100%;
  border-radius: 3px; background: #C3E3CE;
}
/*  지금 값 — 점 */
.cv3home-mvit-bar b {
  position: absolute; top: 50%; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #4A4E48; box-shadow: 0 0 0 1.5px #FFFFFF;
}
.cv3home-mvit-bar b.is-ok   { background: #1F6B44; }
.cv3home-mvit-bar b.is-warn { background: #B8860B; }
.cv3home-mvit-bar b.is-bad  { background: #A3200A; }
/*  눈금 밖 — 막대 자체를 물들여 «넘쳤다» 를 알립니다 */
.cv3home-mvit-bar.is-over { background: #F2DED9; }

/*  팝업의 「이럴 땐」 — 케어뷰 1 의 hint */
.cv3mini-todo {
  display: block; margin: 6px 0 2px; padding: 7px 9px;
  border-radius: 9px; background: #F4F2EC;
  font-style: normal; font-size: 11.5px; line-height: 1.55; color: #3E4B58;
}
.cv3mini-todo b { font-weight: 800; color: #282B2B; }

/*  ══ 소변 스틱 10항목 (2026-09-14 · 대표님 「소변키트 검사 등도 팝업으로 자세한 자료를」) ══
    ⚠ 초록 테두리가 **정상 칸**입니다 — 항목마다 다릅니다(비중 1.020 · pH 7.0 ·
      단백질 trace). 「음성=정상」으로 뭉뚱그리지 않습니다. */
.cv3uri { display: block; margin-top: 8px; }
.cv3uri-t { display: inline-block; font-size: 12px; font-weight: 800; margin-right: 6px; }
.cv3uri-g { display: block; margin-top: 6px; }
.cv3uri-r {
  display: grid; grid-template-columns: 74px 1fr; align-items: center;
  gap: 2px 8px; padding: 5px 0;
}
.cv3uri-r + .cv3uri-r { box-shadow: inset 0 1px 0 rgba(20,24,28,.06); }
.cv3uri-r u { grid-row: 1; text-decoration: none; font-size: 11.5px; font-weight: 800; color: #282B2B; }
.cv3uri-r i { grid-row: 2; grid-column: 1; font-style: normal; font-size: 9.5px; color: #8A8D85; }
.cv3uri-lv { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px; }
.cv3uri-b {
  min-height: 24px; padding: 0 7px; border: 0; border-radius: 7px;
  background: #EFEDE6; color: #4A4E48;
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
.cv3uri-b.is-nm { box-shadow: inset 0 0 0 1.5px #9CC7AC; }   /* 정상 칸 */
.cv3uri-b.is-on { background: #282B2B; color: #FFFFFF; }
.cv3uri-b.is-on.is-nm { background: #1F6B44; }
.cv3uri-b:hover { filter: brightness(.97); }
.cv3uri-b:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }

/*  ══ 체성분 목록 (2026-09-14 · 대표님 「BMI 리스트 … 팝업으로 자세한 자료를」) ══
    ⚠ 케어뷰 2.0 의 `metricRow`(이름 · 딱지 · 값)와 같은 줄 짜임입니다.
    ⚠ 비어 있는 칸은 **흐리게** 둡니다 — 0 이나 «정상» 으로 채우지 않습니다(R0-2). */
.cv3bc { display: block; margin-top: 8px; }
.cv3bc-g { display: block; margin-top: 6px; }
.cv3bc-r {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center; gap: 2px 8px; padding: 5px 0;
}
.cv3bc-r + .cv3bc-r { box-shadow: inset 0 1px 0 rgba(20,24,28,.06); }
.cv3bc-r u { grid-row: 1; text-decoration: none; font-size: 11.5px; font-weight: 800; color: #282B2B; }
.cv3bc-r i { grid-row: 2; grid-column: 1; font-style: normal; font-size: 9.5px; color: #8A8D85; }
.cv3bc-r s { grid-row: 1 / span 2; grid-column: 2; justify-self: start; text-decoration: none; }
.cv3bc-r s:empty { display: none; }
.cv3bc-r b {
  grid-row: 1 / span 2; grid-column: 3; justify-self: end;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #282B2B;
}
.cv3bc-r b small { font-size: 9.5px; font-weight: 700; color: #8A8D85; }
.cv3bc-r.is-none b { color: #B4B7AE; }
.cv3bc-e {
  grid-row: 1 / span 2; grid-column: 4;
  min-height: 24px; padding: 0 8px; border: 0; border-radius: 7px;
  background: #EFEDE6; color: #4A4E48; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
.cv3bc-e:hover { background: #E4E1D8; }
.cv3bc-e:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }
.cv3bc-c { grid-row: 1 / span 2; grid-column: 4; font-style: normal; font-size: 10px; color: #A8ABA2; }

/*  ══ 부위별 (8전극) — 다섯 자리 × 두 값 (2026-09-14 · 대표님 요청) ══════
    ⚠ 값은 **적어 두신 것**입니다 — 이 화면이 잰 것이 아닙니다. 그래서 「적은 값 N칸」
      딱지를 함께 냅니다(R0-2). */
.cv3seg { display: block; margin-top: 10px; }
.cv3seg-g { display: block; margin-top: 6px; }
.cv3seg-r {
  display: grid; grid-template-columns: 72px 1fr 1fr;
  align-items: stretch; gap: 6px; padding: 4px 0;
}
.cv3seg-r u {
  text-decoration: none; align-self: center;
  font-size: 11.5px; font-weight: 800; color: #282B2B;
}
.cv3seg-c {
  display: grid; grid-template-rows: auto auto; gap: 1px;
  min-height: 38px; padding: 4px 8px;
  border: 0; border-radius: 9px; background: #F4F2EC;
  font: inherit; text-align: left; cursor: pointer;
}
.cv3seg-c i { font-style: normal; font-size: 9.5px; font-weight: 700; color: #8A8D85; }
.cv3seg-c b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #282B2B; }
.cv3seg-c.is-none b { color: #B4B7AE; }
.cv3seg-c:hover { background: #EAE7DE; }
.cv3seg-c:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }

/*  ══ 소변 10항목의 «뜻» (2026-09-14 · 대표님 「소변 10가지 검사 요소두요」) ══
    ⚠ 「이럴 수 있습니다」까지만 — 진단이 아닙니다. 정상 칸을 벗어났을 때만
      굵게 알립니다. */
.cv3uri-m {
  grid-column: 1 / -1; display: block;
  margin: 2px 0 4px; font-style: normal;
  font-size: 10.5px; line-height: 1.55; color: #6A6D65;
}
.cv3uri-m b { font-weight: 800; color: #8A5A12; }
.cv3uri-m span { color: #A8ABA2; }
.cv3uri-m.is-hi { color: #4A4E48; }
/*  뜻이 들어오면 줄 짜임이 3단이 됩니다 */
.cv3uri-r { grid-template-rows: auto auto auto; }
.cv3uri-lv { grid-row: 3; grid-column: 1 / -1; }

/*  ══ 소변 — 타일 (2026-09-14 · 대표님 「전부 타일 UI 스타일로」) ══════════
    ⚠ 타일 하나 = 항목 하나. 누르면 **그 자리에서** 단계와 뜻이 펼쳐집니다
      (한 번에 하나) — 열 줄을 한꺼번에 펴면 그게 다시 글줄이 됩니다. */
.cv3ut-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.cv3ut { border-radius: 11px; background: #F4F2EC; overflow: hidden; }
.cv3ut.is-open { grid-column: 1 / -1; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20,24,28,.12); }
.cv3ut-h {
  display: grid; gap: 1px; width: 100%; min-height: 54px;
  padding: 7px 9px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
}
.cv3ut-h u { text-decoration: none; font-size: 10.5px; font-weight: 800; color: #6A6D65; }
.cv3ut-h b { font-size: 13.5px; font-weight: 900; letter-spacing: -.02em; color: #282B2B; }
.cv3ut-h i { font-style: normal; font-size: 9px; color: #A8ABA2;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv3ut.is-none .cv3ut-h b { color: #B4B7AE; }
.cv3ut.is-ok   { background: #E7F1EA; }
.cv3ut.is-abn  { background: #FBF1DE; }
.cv3ut.is-abn .cv3ut-h b { color: #7A5A12; }
.cv3ut-h:hover { filter: brightness(.98); }
.cv3ut-h:focus-visible { outline: 2px solid #282B2B; outline-offset: -2px; }
.cv3ut-b { padding: 0 9px 9px; }

/*  사진 판독 타일 */
.cv3ushot { margin-top: 8px; }
.cv3ushot-b {
  display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px;
  align-items: center; padding: 10px 11px;
  border-radius: 12px; background: #282B2B; color: #FFFFFF; cursor: pointer;
}
.cv3ushot-b:hover { filter: brightness(1.12); }
.cv3ushot-i { grid-row: 1 / span 2; display: grid; place-items: center;
              width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.12); }
.cv3ushot-i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cv3ushot-b b { font-size: 12.5px; font-weight: 800; }
.cv3ushot-b em { font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.62); }
.cv3ushot-m { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px;
              background: #F4F2EC; font-size: 11px; line-height: 1.55; color: #3E4B58; }
.cv3ushot-m b { font-weight: 800; color: #282B2B; }
.cv3ushot-m em { font-style: normal; color: #6A6D65; }

/*  ══ 분류 딱지 — 케어뷰 화면의 그 자리 (2026-09-14) ══════════════════════
    체온 · 순환 · 호흡·산소 · 대사 · 체성분 · 신장.
    ⚠ 여섯이 **따로 노는 숫자**가 아니라 **몸의 갈래**로 읽히게 하는 것이 목적입니다.
    ⚠ 조용히 둡니다 — 값보다 먼저 읽히면 안 됩니다. */
.cv3home-mvit-cat {
  grid-column: 1 / -1; justify-self: start;
  margin-top: 4px; padding: 1px 6px;
  border-radius: 6px; background: #EFEDE6; color: #8A8D85;
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
}

/*  ══ 블루투스로 재기 (2026-09-14 · 대표님 「모두 블루투스 기기와 연동 합니다」) ══
    ⚠ 안 되는 브라우저·주소면 **꺼진 채로** 두고 까닭을 적습니다 — 눌러도 아무 일
      없는 단추를 두지 않습니다(R0-2). */
.cv3ble { display: block; margin-top: 10px; }
.cv3ble-b {
  display: grid; grid-template-columns: 32px 1fr; gap: 1px 10px;
  align-items: center; width: 100%; padding: 9px 11px;
  border: 0; border-radius: 12px; background: #1F4E5F; color: #FFFFFF;
  font: inherit; text-align: left; cursor: pointer;
}
.cv3ble-b:hover { filter: brightness(1.12); }
.cv3ble-b.is-off { background: #E7E4DB; color: #8A8D85; cursor: not-allowed; }
.cv3ble-i { grid-row: 1 / span 2; display: grid; place-items: center;
            width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.14); }
.cv3ble-b.is-off .cv3ble-i { background: rgba(0,0,0,.05); }
.cv3ble-i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cv3ble-b b { font-size: 12.5px; font-weight: 800; }
.cv3ble-b em { font-style: normal; font-size: 10px; color: rgba(255,255,255,.62); }
.cv3ble-b.is-off em { color: #A8ABA2; }
.cv3ble-m { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px;
            background: #F4F2EC; font-size: 11px; line-height: 1.55; color: #3E4B58; }
.cv3ble-m b { font-weight: 800; color: #282B2B; }

/*  ══ 카드에 블루투스 단추 (2026-09-14 · 대표님 「여기에 붙여야 합니다」) ══════
    ⚠ 카드가 통째로 `<button>` 이라 안에 단추를 또 넣을 수 없습니다 —
      **감싸는 칸**을 두고 모서리에 겹칩니다.
    ⚠ 값을 가리지 않게 **오른쪽 아래**에 둡니다. 그림은 오른쪽 위에 있습니다. */
.cv3home-mvitw { position: relative; display: block; min-width: 0; }
.cv3home-mvitw > .cv3home-mvitc { width: 100%; }
.cv3home-mvitb {
  position: absolute; right: 6px; bottom: 6px;
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 8px;
  background: #1F4E5F; color: #FFFFFF; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .18);
}
.cv3home-mvitb svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.cv3home-mvitb:hover { filter: brightness(1.15); }
.cv3home-mvitb:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }
/*  안 되는 브라우저·주소면 **꺼진 채로** 둡니다 — 눌러도 아무 일 없는 단추를 두지 않습니다. */
.cv3home-mvitb.is-off { background: #E7E4DB; color: #A8ABA2; cursor: not-allowed; box-shadow: none; }
/*  단추가 앉을 자리를 비웁니다 — 글자가 단추 밑으로 들어가지 않게. */
.cv3home-mvitw > .cv3home-mvitc { padding-bottom: 30px; }

/*  ══ 빈 카드 — 「고장」처럼 보이지 않게 (2026-09-14 · 대표님 「6개 카드에 아무런 내용이 없어요」) ══
    ⚠ 값이 없는 것은 **사실**입니다 — 손으로 적거나 장비가 줘야 하는데 둘 다 아직
      없습니다. 0 이나 「정상」으로 채우지 **않습니다**(R0-2).
    ⚠ 다만 **맨몸 「—」 하나**는 «망가진 것» 으로 읽힙니다.
      그래서 「아직 없습니다」라고 **말로** 적고, 아래에 **할 수 있는 일**을 답니다. */
.cv3home-mvit-no {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: #A8ABA2 !important;
}

/*  ══ 적기 전에도 보이는 것 (2026-09-14 · 대표님 「내용을 기입하기전 준비된 내용이
    있어야 합니다」) ══
    · 눈금 막대 — 값이 없어도 **정상 구간**은 그립니다(점만 없습니다)
    · 참고 범위 한 줄 — 「정상 18.5 – 22.9」
    ⚠ 참고 범위를 **지금 값인 척** 크게 쓰지 않습니다. 작고 흐리게 둡니다. */
.cv3home-mvit-bar.is-empty { background: #EFEDE6; }
.cv3home-mvit-bar.is-empty i { background: #D6E6DC; }
.cv3home-mvit-ref {
  grid-column: 1 / -1; justify-self: start;
  margin-top: 3px; text-decoration: none;
  font-size: 10px; font-weight: 700; color: #8A8D85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/*  좁은 칸에서 글이 깨지지 않게 — 「아직 없습니다」는 한 낱말처럼 다룹니다. */
.cv3home-mvit-no { white-space: nowrap; }

/*  ══ 값이 앉을 자리 (2026-09-14 · 대표님 「측정 값이 올라갈 수 있는 자리를 만들어 주세요」) ══
    ⚠ 값이 없을 때 **글자로 때우지 않고** 빈 자리를 눈에 보이게 둡니다 —
      여기가 값이 앉을 곳이라는 것이 보여야 합니다.
    ⚠ 그 자리에 0 이나 가짜 숫자를 넣지 않습니다. **자리만 잡고 비워 둡니다.**
    ⚠ 테두리를 쓰지 않습니다(대표님 2026-09-05) — 바탕색으로만 자리를 냅니다. */
.cv3home-mvit-slot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 26px; margin-top: 1px; padding: 0 8px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    -45deg, #F2F0E9 0 5px, #EDEBE3 5px 10px);
  font-size: 11px; font-weight: 700; color: #B4B7AE;
}
.cv3home-mvit-slot span { opacity: .85; }

/*  ══ 소변 상세 분석 — 케어뷰 짜임 (2026-09-14 · 대표님 사진) ══════════════
    ① 점수 상자 ② 주의 지표 칩 ③ 10종 **색상 판정** ④ 뜻
    ⚠ 「**색상** 판정」인데 제 앞 판은 **글자 단추**였습니다 — 표에 색이 다 있는데도.
      이제 기준색을 **그대로** 칠합니다.
    ⚠ 테두리를 쓰지 않습니다 — 고른 칸만 **흰 테두리**로 짚습니다(그건 표시입니다). */
.cv3uri-hero {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px;
  margin-top: 8px; padding: 12px 14px; border-radius: 14px;
  background: #EEF4F0;
}
.cv3uri-hero b { font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: #1F6B44; line-height: 1; }
.cv3uri-hero b small { font-size: 13px; font-weight: 800; margin-left: 2px; }
.cv3uri-hero span { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; color: #4A6B58; }
.cv3uri-hero.is-warn { background: #FBF4E6; }
.cv3uri-hero.is-warn b { color: #8A5A12; } .cv3uri-hero.is-warn span { color: #7A5A12; }
.cv3uri-hero.is-bad  { background: #FBECE8; }
.cv3uri-hero.is-bad b { color: #8A2B2B; } .cv3uri-hero.is-bad span { color: #8A2B2B; }
.cv3uri-hero.is-none { background: #F2F0E9; }
.cv3uri-hero.is-none b { color: #B4B7AE; } .cv3uri-hero.is-none span { color: #8A8D85; }

.cv3uri-sec {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 5px; font-size: 11.5px; font-weight: 800; color: #282B2B;
}
.cv3uri-sec span { font-size: 10px; font-weight: 700; color: #8A8D85; }
.cv3uri-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cv3uri-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 8px; background: #F4F2EC;
  font-size: 10.5px; font-weight: 700; color: #4A4E48;
}
.cv3uri-chip i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.cv3uri-chip b { font-weight: 800; color: #282B2B; }

/*  10종 줄 — 이름 · 영문 · 지금 값 / 그 아래 색 띠 */
.cv3uw-g { display: block; }
.cv3uw { padding: 7px 0; }
.cv3uw + .cv3uw { box-shadow: inset 0 1px 0 rgba(20,24,28,.06); }
.cv3uw-h {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 2px 6px;
  width: 100%; padding: 0 0 5px; border: 0; background: none; font: inherit;
  text-align: left; cursor: pointer;
}
.cv3uw-h u { text-decoration: none; font-size: 11.5px; font-weight: 800; color: #282B2B; }
.cv3uw-h i { font-style: normal; font-size: 9.5px; color: #8A8D85; }
.cv3uw-h b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv3uw-h b small { font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
.cv3uw-h b.is-none { color: #B4B7AE; }
.cv3uw-h b.is-ok   { color: #1F6B44; }
.cv3uw-h b.is-abn  { color: #8A5A12; }
.cv3uw-h:hover u { text-decoration: underline; }
.cv3uw-h:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }

/*  색 띠 — 기준색 그대로. 고른 칸은 흰 테두리, 정상 칸은 아래 점. */
.cv3uw-s { display: flex; gap: 2px; }
.cv3uw-c {
  /*  ⚠ 22px 로 적었더니 전역 단추 규칙의 min-height:40px 가 이겼습니다(실측).
      크게 서는 편이 손가락에도 눈에도 낫습니다 — 우연이 아니라 **뜻대로** 적습니다. */
  position: relative; flex: 1 1 0; min-width: 0; height: 40px;
  border: 0; border-radius: 4px; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}
.cv3uw-c.is-on { box-shadow: inset 0 0 0 2.5px #FFFFFF, 0 0 0 1.5px #282B2B; }
.cv3uw-c.is-nm::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: #4A4E48;
}
.cv3uw-c:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }
.cv3uw-s { margin-bottom: 6px; }

/*  ══ 카드 도구줄 (2026-09-15 · 대표님 「카디언 인사이드처럼」) ═══════════════
    ⚠ 투명 단추(.cv3home-sig-hit) 위에 떠야 눌립니다 —
      `.cv3home-sig button:not(.cv3home-sig-hit)` 규칙이 z:2 로 올려 줍니다.
    ⚠ 테두리를 쓰지 않습니다(대표님) — 바탕과 그림자로만 가릅니다. */
.cv3home-tools {
  /*  ⚠ width:100% 가 없으면 줄이 **내용 폭(166px)으로 쪼그라들어**
      justify-content 가 아무 일도 안 합니다(실측). */
  display: flex; width: 100%; justify-content: flex-end; align-items: center;
  gap: 2px; margin: -4px 0 8px;
}
.cv3home-tool {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; padding: 0;
  background: none; color: #9A9D94; cursor: pointer;
  transition: background .12s, color .12s;
}
.cv3home-tool svg { width: 15px; height: 15px; display: block; }
.cv3home-tool:hover { background: rgba(20,24,28,.06); color: #43463F; }
.cv3home-tool:active { background: rgba(20,24,28,.12); }
.cv3home-tool.is-on { background: #282B2B; color: #FFFFFF; }
/*  기준이 따로 없는 카드 — 눌리긴 합니다(«없다»고 답합니다). 흐리게만 둡니다. */
.cv3home-tool.is-dim { opacity: .45; }
.cv3home-tool.is-dim:hover { opacity: 1; }
.cv3home-tool:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }

/*  접은 카드 — 제목줄과 도구줄만 남깁니다. */
.cv3home-sig.is-fold > *:not(.cv3home-sig-h):not(.cv3home-tools):not(.cv3home-sig-hit) { display: none; }
.cv3home-sig.is-fold { padding-bottom: 8px; }
.cv3home-sig.is-fold .cv3home-tools { margin-bottom: 0; }

/*  내린 카드 되돌리기 줄 */
.cv3home-hid { margin-top: 10px; padding: 11px 12px; border-radius: 12px; background: #F2F0E9; }
.cv3home-hid-t {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 7px; font-size: 11.5px; font-weight: 800; color: #43463F;
}
.cv3home-hid-t svg { width: 14px; height: 14px; }
.cv3home-hid-t span { font-weight: 700; color: #8A8D85; font-size: 10.5px; }
.cv3home-hid-g { display: flex; flex-wrap: wrap; gap: 5px; }
.cv3home-hid-b {
  border: 0; border-radius: 8px; padding: 4px 9px;
  background: #FFFFFF; color: #282B2B;
  font-size: 10.5px; font-weight: 800; cursor: pointer;
}
.cv3home-hid-b:hover { background: #282B2B; color: #FFFFFF; }
.cv3home-hid-b:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }

/*  지난 값 목록 */
.cv3hist-g { display: block; margin: 6px 0 2px; max-height: 260px; overflow-y: auto; }
.cv3hist-r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0;
}
.cv3hist-r + .cv3hist-r { box-shadow: inset 0 1px 0 rgba(20,24,28,.06); }
.cv3hist-r u { text-decoration: none; font-size: 10.5px; font-weight: 700; color: #8A8D85; }
.cv3hist-r b { font-size: 11.5px; font-weight: 800; color: #282B2B; font-variant-numeric: tabular-nums; }

/*  ══ 카드별 AI Agent + 오케스트레이션 메쉬 (2026-09-15 · 대표님 지시) ═════
    ⚠ 테두리를 쓰지 않습니다 — 바탕과 그림자로만 가릅니다. */
.cv3home-hrow { display: flex; align-items: center; gap: 8px; margin: -4px 0 8px; }
.cv3home-hrow .cv3home-tools { margin: 0; }
.cv3ag-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0;
  border: 0; border-radius: 8px; padding: 3px 7px; cursor: pointer;
  background: #EDEAF6; color: #4A3F76;
  font-size: 9.5px; font-weight: 800; letter-spacing: -.01em;
}
.cv3ag-chip svg { width: 11px; height: 11px; flex: 0 0 auto; }
.cv3ag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3ag-chip:hover { background: #4A3F76; color: #FFFFFF; }
.cv3ag-chip:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }

/*  에이전트 전체 창 */
.cv3ag { display: block; }
.cv3ag-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cv3ag-top u { text-decoration: none; font-size: 15px; font-weight: 900; color: #4A3F76; }
.cv3ag-top em { font-style: normal; font-size: 11px; font-weight: 800; color: #8A8D85; }
.cv3ag-h { display: block; margin: 11px 0 5px; font-size: 10.5px; font-weight: 800; color: #282B2B; }
.cv3ag-l { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3ag-l i {
  font-style: normal; padding: 3px 8px; border-radius: 7px;
  background: #F2F0E9; color: #43463F; font-size: 10.5px; font-weight: 700;
}
.cv3ag-perf { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3ag-perf i {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 8px; border-radius: 7px; background: #F4F2EC; font-style: normal;
}
.cv3ag-perf u { text-decoration: none; font-size: 9px; font-weight: 700; color: #A8ABA2; text-transform: uppercase; }
.cv3ag-perf b { font-size: 11.5px; font-weight: 800; color: #8A8D85; font-variant-numeric: tabular-nums; }
.cv3ag-live { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3ag-live i {
  font-style: normal; padding: 3px 8px; border-radius: 7px;
  background: #DDEFE4; color: #1F6B44; font-size: 10.5px; font-weight: 700;
}

/*  메쉬 한 줄 — 카드 무리 맨 위 */
.cv3orch { margin: 0 0 10px; padding: 11px 13px; border-radius: 13px; background: #EDEAF6; }
.cv3orch p { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.cv3orch p b {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 6px;
  background: #4A3F76; color: #FFFFFF; font-size: 9px; font-weight: 800; letter-spacing: .02em;
}
.cv3orch p span { font-size: 11.5px; font-weight: 700; color: #2F2A4A; line-height: 1.5; }
.cv3orch-f { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.cv3orch-f em {
  font-style: normal; padding: 2px 7px; border-radius: 6px;
  background: rgba(255,255,255,.7); color: #5A5480; font-size: 9.5px; font-weight: 700;
}
.cv3orch.is-warn { background: #FBF4E6; } .cv3orch.is-warn p b { background: #8A5A12; }
.cv3orch.is-warn p span { color: #6B4E12; } .cv3orch.is-warn .cv3orch-f em { color: #7A5A12; }
.cv3orch.is-crit { background: #FBECE8; } .cv3orch.is-crit p b { background: #8A2B2B; }
.cv3orch.is-crit p span { color: #7A2424; } .cv3orch.is-crit .cv3orch-f em { color: #8A2B2B; }
.cv3orch.is-off { background: #F2F0E9; } .cv3orch.is-off p b { background: #9A9D94; }
.cv3orch.is-off p span { color: #6B6E66; }
.cv3orch-x { display: block; margin-top: 4px; font-style: normal; font-size: 10px; font-weight: 700; opacity: .75; }
.cv3orch-f em u { text-decoration: none; opacity: .7; font-weight: 800; }

/*  ══ 혈당 측정보고서 (2026-09-15 · 대표님 사진) ════════════════════════════
    제품 머리 → 큰 값(맥락과 함께) → 맥락별 최근값 → 맥락 고르기 →
    장비 상태 → 기준 → 기기 기능.
    ⚠ 테두리 안 씁니다. */
.cv3gr { display: block; }
.cv3gr-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 10px 0 7px; }
.cv3gr-top u { text-decoration: none; font-size: 12.5px; font-weight: 900; color: #282B2B; }
.cv3gr-top i { font-style: normal; font-size: 10px; font-weight: 700; color: #8A8D85; }
.cv3gr-live {
  text-decoration: none; margin-left: auto; padding: 2px 7px; border-radius: 6px;
  background: #1F6B44; color: #FFFFFF; font-size: 9px; font-weight: 800; letter-spacing: .04em;
}
.cv3gr-hero {
  display: grid; grid-template-columns: auto auto; justify-content: start;
  align-items: center; gap: 2px 9px; padding: 13px 15px; border-radius: 14px;
  background: #EEF4F0;
}
.cv3gr-hero b {
  font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #1F6B44;
  font-variant-numeric: tabular-nums;
}
.cv3gr-hero b small { font-size: 12px; font-weight: 800; margin-left: 3px; }
.cv3gr-hero s {
  text-decoration: none; padding: 2px 8px; border-radius: 7px;
  background: rgba(255,255,255,.75); color: #1F6B44; font-size: 11px; font-weight: 800;
}
.cv3gr-hero span { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: #4A6B58; }
.cv3gr-hero.is-warn { background: #FBF4E6; }
.cv3gr-hero.is-warn b, .cv3gr-hero.is-warn s { color: #8A5A12; }
.cv3gr-hero.is-warn span { color: #7A5A12; }
.cv3gr-hero.is-bad { background: #FBECE8; }
.cv3gr-hero.is-bad b, .cv3gr-hero.is-bad s { color: #8A2B2B; }
.cv3gr-hero.is-bad span { color: #8A2B2B; }
.cv3gr-hero.is-none { background: #F2F0E9; }
.cv3gr-hero.is-none b { color: #B4B7AE; } .cv3gr-hero.is-none span { color: #8A8D85; }

/*  맥락별 최근값 — 세 줄 */
.cv3gctx-g { display: block; }
.cv3gctx-r {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
  gap: 3px 8px; padding: 8px 0;
}
.cv3gctx-r + .cv3gctx-r { box-shadow: inset 0 1px 0 rgba(20,24,28,.06); }
.cv3gctx-r u { text-decoration: none; font-size: 11.5px; font-weight: 800; color: #282B2B; }
.cv3gctx-r u i { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2; margin-top: 1px; }
.cv3gctx-r b { font-size: 14px; font-weight: 900; color: #282B2B; font-variant-numeric: tabular-nums; }
.cv3gctx-r b small { font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
.cv3gctx-r em { grid-column: 2 / -1; justify-self: end; font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
.cv3gctx-r.is-none b { color: #C2C5BC; } .cv3gctx-r.is-none b small { color: #C2C5BC; }
.cv3gctx-r .cv3home-mvit-b { grid-column: auto; margin-top: 0; justify-self: end; }

/*  이번 값의 맥락 고르기 */
.cv3gctx-p { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }
.cv3gctx-b {
  border: 0; border-radius: 9px; padding: 6px 11px; cursor: pointer;
  background: #F2F0E9; color: #5B5E56; font-size: 11px; font-weight: 800;
}
.cv3gctx-b:hover { background: #E4E2DA; }
.cv3gctx-b.is-on { background: #282B2B; color: #FFFFFF; }
.cv3gctx-b:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }

/*  장비 상태 */
.cv3gr-st { display: flex; flex-wrap: wrap; gap: 5px; }
.cv3gr-s {
  display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 0; border-radius: 9px; padding: 6px 10px; text-align: left;
  background: #F2F0E9; color: #5B5E56; font: inherit;
}
button.cv3gr-s { cursor: pointer; }
button.cv3gr-s:hover { background: #E4E2DA; }
button.cv3gr-s:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }
.cv3gr-s u { text-decoration: none; font-size: 9px; font-weight: 700; color: #A8ABA2; }
.cv3gr-s b { font-size: 11.5px; font-weight: 800; }
.cv3gr-s.is-ok   { background: #DDEFE4; } .cv3gr-s.is-ok b   { color: #1F6B44; }
.cv3gr-s.is-warn { background: #FBF1DE; } .cv3gr-s.is-warn b { color: #7A5A12; }
.cv3gr-s.is-bad  { background: #F7E3E0; } .cv3gr-s.is-bad b  { color: #8A2B2B; }
.cv3gr-s.is-none b { color: #9A9D94; }

/*  기기 기능 — 진한 칸이 「우리가 실제로 읽는 것」 */
.cv3gfeat { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3gfeat-b {
  padding: 4px 9px; border-radius: 8px;
  background: #F4F2EC; color: #A8ABA2; font-size: 10.5px; font-weight: 700;
  cursor: help;
}
.cv3gfeat-b.is-we { background: #DDEFE4; color: #1F6B44; font-weight: 800; }

/*  제품 머리줄에 바로 붙는 연결 단추 (2026-09-15 · 대표님 「블루투스 연결 왜
    안붙였나요? 팝업두요」 — 단추는 있었는데 **묻혀 있었습니다**) */
.cv3blego { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.cv3blego-b {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: 9px; padding: 5px 10px; cursor: pointer;
  background: #282B2B; color: #FFFFFF; font-size: 10.5px; font-weight: 800;
}
.cv3blego-b svg { width: 13px; height: 13px; }
.cv3blego-b:hover { background: #1F6B44; }
.cv3blego-b.is-off { background: #C2C5BC; cursor: not-allowed; }
.cv3blego-b:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }
/*  LIVE 딱지가 오른쪽 끝을 잡고 있으면 단추가 밀립니다 — 딱지는 제자리로 */
.cv3gr-top .cv3gr-live { margin-left: 0; }

/*  작은 칸(생체 여섯)용 도구줄 — 같은 여섯, 작게 (2026-09-15 · 「카드 전체에」) */
.cv3home-tools.is-mini {
  width: auto; justify-content: flex-start; gap: 0; margin: 4px 0 0;
  flex-wrap: nowrap;
}
.cv3home-tools.is-mini .cv3home-tool { width: 22px; height: 22px; border-radius: 6px; }
.cv3home-tools.is-mini .cv3home-tool svg { width: 12px; height: 12px; }
/*  접은 칸 — 이름만 남깁니다 */
.cv3home-mvitw.is-fold .cv3home-mvitc > *:not(em):not(.cv3home-mvit-cat) { display: none; }
.cv3home-mvitw.is-fold .cv3home-mvitb { display: none; }

/*  ══ 높이 · 자세 — 누움·앉음·섬 선그림 + 무엇을 드리나 ════════════════════
    🔴 2026-09-15 · 대표님 「누운 이미지, 앉은 이미지, 선이미지를 적용하고
       어떠한 데이터와 서비스를 제공함인지 정확히 밝혀야 합니다.」
    ⚠ 테두리 안 씁니다 — 바탕으로만 가릅니다. */
.cv3pose { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 0 10px; }
.cv3pose-c {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 7px; border-radius: 11px;
  background: #F2F0E9; color: #7E8179; cursor: help;
}
.cv3pose-c svg {
  width: 38px; height: 38px; display: block;
  stroke: currentColor; stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.cv3pose-c u { text-decoration: none; font-size: 11px; font-weight: 800; color: #5B5E56; }
.cv3pose-c i { font-style: normal; font-size: 9px; font-weight: 700; color: #A8ABA2; }
.cv3pose-c.is-on { background: #DDEFE4; color: #1F6B44; }
.cv3pose-c.is-on u { color: #1F6B44; }
.cv3pose-c.is-on i { color: #4A6B58; }
.cv3pose-c.is-on svg { stroke-width: 2; }
/*  값이 없을 때 — **아무것도 짚지 않습니다**(지어내지 않습니다).
    ⚠ 그렇다고 그림까지 지우면 안 됩니다. 이 셋은 **데이터가 아니라 설명**입니다 —
      「이 카드가 무엇을 가려내는가」를 보여 줍니다. 실측으로 재보니 #C2C5BC 가
      바탕 #F4F2EC 에 **묻혀 안 보였습니다.** 읽히는 회색으로 올립니다.
    ⇒ 짚는 것(is-on 초록)과 안 짚는 것의 차이는 그대로 남습니다. */
.cv3pose.is-none .cv3pose-c { background: #F2F0E9; color: #7E8179; }
.cv3pose.is-none .cv3pose-c u { color: #5B5E56; }
.cv3pose.is-none .cv3pose-c i { color: #8A8D85; }
.cv3home-scale.is-none { opacity: .45; }
.cv3pose-why {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 9px;
  background: #F2F0E9; font-size: 10.5px; font-weight: 700; color: #6B6E66; line-height: 1.55;
}

/*  무엇을 드리나 — 데이터 · 서비스 · 한계 */
.cv3what { display: block; margin-top: 10px; }
.cv3what span {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
  padding: 8px 0;
}
.cv3what span + span { box-shadow: inset 0 1px 0 rgba(20,24,28,.06); }
.cv3what u {
  text-decoration: none; align-self: start; padding: 2px 7px; border-radius: 6px;
  background: #EDEAF6; color: #4A3F76; font-size: 9px; font-weight: 800; white-space: nowrap;
}
.cv3what b { font-size: 11.5px; font-weight: 800; color: #282B2B; }
.cv3what i {
  grid-column: 2; font-style: normal; font-size: 10.5px; font-weight: 600;
  color: #6B6E66; line-height: 1.55;
}
.cv3what .is-warn u { background: #FBF1DE; color: #7A5A12; }
.cv3what .is-warn b { color: #7A5A12; }

/*  ══ 아바타 자리 (2026-09-15 · 대표님) ═══════════════════════════════════
    「아바타에 **텍스트가 너무 가까이** 붙었어요. **너무 위로 치우치구요.**」
    ■ 실측 — 아바타 그림 284px 바로 아래 **6px** 만 띄우고 「⚙ 아바타 바꾸기」가
      붙어 있었습니다. 발끝에 글자가 닿습니다.
    ■ 그리고 그림이 칸 **맨 위·왼쪽**에 붙어 있어 머리 위에 숨통이 없었습니다.
      (틀 190px 인데 그림은 135px — 오른쪽에 55px 이 비어 있었습니다.)
    ⇒ ① 아래로 **14px** 띄웁니다  ② 머리 위 **10px** 숨통  ③ 가로 **가운데**.
    ⚠ 그림 크기는 그대로 둡니다 — 대표님이 「2배(284px)」로 정하신 값입니다. */
.cv3ava-col { gap: 14px; padding-top: 10px; align-items: stretch; }
/*  ⚠⚠ 그림을 **가운데로 옮기지 않습니다.** 틀 190px 에 그림 135px 이라
    오른쪽 55px 이 비어 보이지만, 그 왼쪽 붙임은 대표님이 2026-09-12 에
    「**가장 좌측으로**」 하신 지시이고 까닭도 적혀 있습니다 —
    **계절마다 그림 폭이 165~190 이라 가운데로 두면 계절이 바뀔 때마다
    아바타가 좌우로 흔들립니다.** 제가 고치려다 그것을 되돌릴 뻔했습니다. */
.cv3ava-col .cv3ava-f { margin-inline: 0 auto; }
.cv3ava-col .cv3ava-set {
  /*  단추도 그림과 **같은 왼쪽 선**에서 시작합니다 — 가운데로 모으면
      아바타만 왼쪽에 서고 단추는 가운데라 줄이 어긋나 보입니다. */
  align-self: flex-start; width: min(190px, 100%); text-align: center;
  margin-top: 2px;
}
/*  말풍선이 곁에 설 때도 머리 위 숨통을 같이 줍니다 — 위아래가 어긋나면
    아바타만 붕 뜬 것처럼 보입니다. */
.cv3ava { align-items: center; }
.cv3ava-side { padding-top: 10px; }

/*  ══ 아바타 고르기 — 글자 단추 → **그림 타일** ═══════════════════════════
    🔴 2026-09-15 · 대표님 「아바타도 여러장 만든것 같은데 왜 적용하지 않나요?」
    그림을 56장 만들어 놓고 고를 때는 「남자아이·여자아이·로봇」 **글자만**
    냈습니다. 어떻게 생겼는지 안 보여 주고 고르라고 한 셈입니다.
    ⚠ 테두리 안 씁니다 — 고른 것만 바탕으로 짚습니다. */
.cv3avapk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.cv3avapk.is-season { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); }
.cv3avapk-c {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; border-radius: 12px; padding: 8px 4px 7px; cursor: pointer;
  background: #F2F0E9; color: #5B5E56; font: inherit;
  min-width: 0;
}
.cv3avapk-c img {
  width: 100%; max-width: 62px; height: 76px;
  object-fit: contain; object-position: center bottom; display: block;
}
.cv3avapk-c u { text-decoration: none; font-size: 10.5px; font-weight: 800; color: #43463F; }
.cv3avapk-c i { font-style: normal; font-size: 9px; font-weight: 700; color: #A8ABA2; }
.cv3avapk-c:hover { background: #E4E2DA; }
.cv3avapk-c.is-on { background: #DDEFE4; }
.cv3avapk-c.is-on u { color: #1F6B44; }
.cv3avapk-c:focus-visible { outline: 3px solid var(--hx-deepstone); outline-offset: 2px; }
/*  타일이 들어가면 한 줄 flex 로는 안 됩니다 — 줄을 통째로 내줍니다. */
.cv3ava-pr:has(.cv3avapk) { display: block; }

/*  ══ 아바타가 돌아가며 말합니다 (2026-09-15 · 대표님) ═════════════════════
    「표정을 상태에 따라 다양하게 표현하고 **말하며(알림, 타이포)**
     **5초당 한번씩** 변하게」
    ⚠ 「타이포」 — 글이 바뀔 때 **살짝 올라오며 나타납니다.** 눈이 바뀐 것을
      알아채야 새 말인 줄 압니다. 움직임을 줄이신 분에게는 끕니다. */
.cv3ava-lead.is-typ { animation: cv3avaTyp .42s cubic-bezier(.2,.7,.3,1) both; }
@keyframes cv3avaTyp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
/*  몇 가지 가운데 몇 번째인지 — 「알림」 */
.cv3ava-dots { display: flex; align-items: center; gap: 3px; margin-top: 7px; }
.cv3ava-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: #D8D6CE;
  transition: background .2s, width .2s;
}
.cv3ava-dots i.is-on { width: 14px; border-radius: 3px; background: #282B2B; }
.cv3ava-dots b { font-size: 9px; font-weight: 700; color: #A8ABA2; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cv3ava-lead.is-typ { animation: none; }
  .cv3ava-dots i { transition: none; }
}
.cv3ava-src { display: block; margin-top: 6px; font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
.cv3ava-bub.is-rot { min-height: 0; }
/*  FLUX 자세 그림이 들어간 칸 — 선그림보다 크게 두고 바닥에 붙입니다. */
.cv3pose-c.has-pic .cv3home-art {
  width: 100%; max-width: 74px; height: 62px;
  object-fit: contain; object-position: center bottom; display: block;
}
.cv3pose-c.has-pic { padding-top: 6px; }
.cv3pose.is-none .cv3pose-c.has-pic .cv3home-art { opacity: .55; }
.cv3pose-c.is-on.has-pic .cv3home-art { opacity: 1; }

/*  ══ 병원 연결 (HL7 v2 ↔ FHIR) — 설정 안 (2026-09-15) ══════════════════
    🔴 대표님 「FHIR 설정 메뉴는 어디 있나요?」
    ⚠ 이 칸은 **건강 정보를 밖으로 내보내는 스위치**입니다 — 켜짐/꺼짐이
      맨 먼저, 가장 크게 보여야 합니다. 테두리는 안 씁니다. */
.cv3hl7-na { margin: 8px 0 0; font-size: 11.5px; font-weight: 700; color: #8A8D85; }
.cv3hl7-sw {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0; padding: 11px 13px; border-radius: 12px; background: #F2F0E9;
}
.cv3hl7-sw b { flex: 1 1 auto; font-size: 12.5px; font-weight: 800; color: #6B6E66; }
.cv3hl7-sw.is-on { background: #FBECE8; }
.cv3hl7-sw.is-on b { color: #8A2B2B; }
.cv3hl7-stop, .cv3hl7-warn, .cv3hl7-msg {
  margin: 7px 0 0; padding: 9px 11px; border-radius: 10px;
  font-size: 11px; font-weight: 700; line-height: 1.55;
}
.cv3hl7-stop { background: #F7E3E0; color: #8A2B2B; }
.cv3hl7-warn { background: #FBF1DE; color: #7A5A12; }
.cv3hl7-msg  { background: #EDEAF6; color: #4A3F76; }
.cv3hl7-msg em, .cv3hl7-warn em { font-style: normal; opacity: .8; }

.cv3hl7-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.cv3hl7-m {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 0; border-radius: 11px; padding: 9px 11px; cursor: pointer;
  background: #F2F0E9; color: #5B5E56; font: inherit; text-align: left;
}
.cv3hl7-m u { text-decoration: none; font-size: 11.5px; font-weight: 800; color: #43463F; }
.cv3hl7-m i { font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
.cv3hl7-m:hover { background: #E4E2DA; }
.cv3hl7-m.is-on { background: #282B2B; }
.cv3hl7-m.is-on u { color: #FFFFFF; } .cv3hl7-m.is-on i { color: rgba(255,255,255,.66); }
.cv3hl7-m:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }

.cv3hl7-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 9px; }
.cv3hl7-r { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv3hl7-r > span { font-size: 10.5px; font-weight: 800; color: #43463F; }
.cv3hl7-r > span i { display: block; font-style: normal; font-size: 9.5px; font-weight: 600; color: #A8ABA2; margin-top: 1px; }
.cv3hl7-i {
  border: 0; border-radius: 9px; padding: 8px 10px; width: 100%;
  background: #F4F2EC; color: #282B2B; font: inherit; font-size: 11.5px;
}
.cv3hl7-i:focus-visible { outline: 2px solid #282B2B; outline-offset: 1px; }

.cv3hl7-act { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cv3hl7-pt { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 5px;
  font-size: 11px; font-weight: 800; color: #282B2B; }
.cv3hl7-pt span { font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
.cv3hl7-pre {
  margin: 0; padding: 10px 12px; border-radius: 10px; background: #282B2B; color: #E8E6DE;
  font-size: 10px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
  max-height: 220px; overflow-y: auto;
}
.cv3hist-r b.is-ok  { color: #1F6B44; }
.cv3hist-r b.is-bad { color: #8A2B2B; }

/*  설정으로 들어가는 문 (2026-09-15 · 「FHIR 설정 메뉴는 어디 있나요?」)
    ⚠ 설정 화면은 지어져 있었는데 **여는 단추가 없었습니다** — 레일도 비어 있었습니다. */
.cv3home-setbar { margin: 0 0 8px; }
.cv3home-setb {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; border-radius: 12px; padding: 10px 12px; cursor: pointer;
  background: #F2F0E9; color: #43463F; font: inherit; text-align: left;
}
.cv3home-setb svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cv3home-setb span { min-width: 0; }
.cv3home-setb b { display: block; font-size: 12px; font-weight: 800; color: #282B2B; }
.cv3home-setb i {
  display: block; font-style: normal; font-size: 9.5px; font-weight: 700;
  color: #8A8D85; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3home-setb i b { display: inline; font-size: 9.5px; color: #4A3F76; }
.cv3home-setb:hover { background: #E4E2DA; }
.cv3home-setb:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }

/*  ══ 상단 「HL7/FHIR 병원 연결」 (2026-09-15 · 대표님) ═══════════════════
    「상단 메뉴로 노출되게」 「**강조되는 색상이나 아이콘 SVG** 를 적용해 주세요.」
    ■ 이 단추는 **문이자 표시등**입니다.
      · 꺼짐 — 조용한 빛깔. 있는 줄만 알면 됩니다.
      · 켜짐 — **강조 색 + 뛰는 점.** 건강 정보가 밖으로 나가는 중이라
              한눈에 보여야 합니다. 여기서 얌전하면 안 됩니다.
      · 모름 — 「?」. 게이트웨이에 못 닿았다는 뜻이고, 지어내지 않습니다.
    ⚠ 테두리를 쓰지 않습니다 — 바탕색과 그림자로만 가릅니다. */
.cv3hl7-nav {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 9px; padding: 5px 10px; cursor: pointer;
  font: inherit; line-height: 1;
  background: rgba(20,24,28,.06); color: #43463F;
  transition: background .16s, color .16s, box-shadow .16s;
}
.cv3hl7-nav-i { display: inline-flex; }
.cv3hl7-nav-i svg {
  width: 17px; height: 17px; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.cv3hl7-nav-t { font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.cv3hl7-nav-t i { font-style: normal; opacity: .45; margin: 0 1px; }
.cv3hl7-nav-s {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(20,24,28,.08); font-size: 9.5px; font-weight: 800; white-space: nowrap;
}
.cv3hl7-nav:hover { background: rgba(20,24,28,.12); }
.cv3hl7-nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/*  꺼짐 — 조용히 */
.cv3hl7-nav.is-off { color: #5B5E56; }
.cv3hl7-nav.is-off .cv3hl7-nav-s { color: #8A8D85; }
/*  모름 — 못 읽었다는 뜻. 초록으로도 빨강으로도 보이면 안 됩니다. */
.cv3hl7-nav.is-na { color: #9A9D94; }
.cv3hl7-nav.is-na .cv3hl7-nav-s { color: #A8ABA2; }
/*  🔴 켜짐 — **강조**. 나가는 중입니다. */
.cv3hl7-nav.is-on {
  background: #1F6B44; color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(31,107,68,.34), 0 4px 12px -4px rgba(31,107,68,.5);
}
.cv3hl7-nav.is-on:hover { background: #185536; }
.cv3hl7-nav.is-on .cv3hl7-nav-s { background: rgba(255,255,255,.2); color: #FFFFFF; }
.cv3hl7-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF;
  animation: cv3hl7Beat 1.9s ease-in-out infinite;
}
@keyframes cv3hl7Beat { 0%,100% { opacity: 1; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .cv3hl7-dot { animation: none; } }

/*  상단에서 눌러 들어왔을 때 **그 칸을 한 번 짚어** 줍니다 —
    긴 설정 화면에서 「어디로 왔지」가 안 되게. */
[data-key="hl7"].is-flash { animation: cv3hl7Flash 1.4s ease-out 1; }
@keyframes cv3hl7Flash {
  0%   { background: rgba(31,107,68,.16); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { [data-key="hl7"].is-flash { animation: none; } }

/*  ══ 시뮬레이터 띠 (2026-09-15 · 대표님 「홈페이지에서는 시뮬레이터로」) ════
    ⚠⚠ 이 띠가 이 기능의 **절반**입니다. 지어낸 값을 보여 주면서 그렇다고
      말하지 않으면 그건 거짓말입니다(R0-2). 그래서 **맨 위에, 눈에 띄게**.
    ⚠ 그렇다고 화면을 잡아먹으면 안 됩니다 — 한 줄로 끝냅니다. */
.cv3demo-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 13px; border-radius: 12px;
  background: #FBF1DE;
}
.cv3demo-bar b:first-child {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 7px;
  background: #8A5A12; color: #FFFFFF;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.cv3demo-bar span {
  flex: 1 1 200px; min-width: 0;
  font-size: 11px; font-weight: 700; color: #6B4E12; line-height: 1.5;
}
.cv3demo-bar span b { font-weight: 900; color: #8A5A12; }
.cv3demo-bar .cv3home-btn { flex: 0 0 auto; }

/*  ══ 아바타 히어로 (2026-09-15 · 대표님) ═════════════════════════════════
    「아바타 영역은 **하이라이트 히어로**로 눈길을 확실히 사로잡는 핵심」
    ■ 보내주신 아홉 장에서 뽑은 다섯 가지를 옮깁니다:
      ① 큰 그림 위에 수치 카드가 **겹쳐** 뜬다   ② 숫자 크게·단위 작게
      ③ **값마다 제 빛깔**(카드가 아니라 값이 색을 갖는다)
      ④ 아이콘·이름표는 **둥근 칩**              ⑤ 견줌 한 줄이 늘 붙는다
    ⚠ **어둡게 바꾸지 않습니다.** 대표님이 오래 쓰신 밝은 바탕을 제 맘대로
      뒤집지 않습니다(R0-6). 짜임과 결만 흡수합니다. */
.cv3home-air {
  position: relative;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(31,107,68,.10) 0%, transparent 58%),
    radial-gradient(90% 80% at 96% 8%, rgba(74,63,118,.10) 0%, transparent 60%),
    #FBFAF6;
  box-shadow: 0 1px 2px rgba(20,24,28,.05), 0 14px 32px -20px rgba(20,24,28,.22);
  padding: 14px 15px 15px;
}
/*  아바타 그림에 **바닥 빛** 한 겹 — 그림이 배경이 아니라 주인공이 되게. */
.cv3ava-f::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 78%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%, rgba(31,107,68,.22) 0%, transparent 72%);
  pointer-events: none; z-index: 0;
}
.cv3ava-f > * { position: relative; z-index: 1; }

/*  ── 히어로 수치 — 값마다 제 빛깔 ───────────────────────────────────── */
.cv3hero-g {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px; margin-top: 9px;
}
.cv3hero-s {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 11px; border-radius: 13px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,24,28,.05), 0 8px 18px -14px rgba(20,24,28,.3);
  min-width: 0;
}
.cv3hero-s u {
  text-decoration: none; font-size: 9.5px; font-weight: 800;
  letter-spacing: .01em; color: #8A8D85;
}
.cv3hero-s b {
  font-size: 21px; font-weight: 900; line-height: 1.05; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: #282B2B;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3hero-s b small { font-size: 10px; font-weight: 800; margin-left: 3px; opacity: .55; }
.cv3hero-s i {
  font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*  값이 색을 갖습니다 — 카드가 아니라. 그래서 눈이 값으로 먼저 갑니다. */
.cv3hero-s.is-lime   b { color: #4E7A18; }
.cv3hero-s.is-rose   b { color: #B03A63; }
.cv3hero-s.is-teal   b { color: #0E6B6B; }
.cv3hero-s.is-amber  b { color: #8A5A12; }
.cv3hero-s.is-violet b { color: #4A3F76; }
.cv3hero-s.is-warn   b { color: #8A5A12; }
.cv3hero-s.is-warn     { background: #FBF4E6; }
.cv3hero-s.is-bad    b { color: #8A2B2B; }
.cv3hero-s.is-bad      { background: #FBECE8; }
/*  왼쪽에 가느다란 제 빛깔 — 값과 같은 색. 「액센트 줄」이 아니라 **값의 연장**입니다. */
.cv3hero-s::before {
  content: ''; display: block; width: 18px; height: 2.5px; border-radius: 2px;
  margin-bottom: 5px; background: currentColor; opacity: .55;
}
.cv3hero-s.is-lime::before   { color: #4E7A18; }
.cv3hero-s.is-rose::before   { color: #B03A63; }
.cv3hero-s.is-teal::before   { color: #0E6B6B; }
.cv3hero-s.is-amber::before  { color: #8A5A12; }
.cv3hero-s.is-violet::before { color: #4A3F76; }
.cv3hero-s.is-warn::before   { color: #8A5A12; }
.cv3hero-s.is-bad::before    { color: #8A2B2B; }

/*  말풍선도 히어로 결로 — 하얀 카드에 부드러운 그림자 */
.cv3ava-bub.is-rot {
  border-radius: 14px; background: #FFFFFF; padding: 11px 13px;
  box-shadow: 0 1px 2px rgba(20,24,28,.05), 0 10px 22px -16px rgba(20,24,28,.34);
}

/*  ── 상단 HL7 단추가 좁을 때 (겹침 막기) ──────────────────────────────── */
.cv3hl7-nav.is-tight { padding: 5px 8px; gap: 5px; }
.cv3hl7-nav.is-tight .cv3hl7-nav-t { display: none; }
.cv3hl7-nav.is-tight .cv3hl7-nav-s { padding: 2px 5px; }
.cv3hl7-nav.is-tight.is-off .cv3hl7-nav-s,
.cv3hl7-nav.is-tight.is-na .cv3hl7-nav-s { display: none; }
/*  CNMA 옆에 섰을 때 — 그 줄의 결에 맞춥니다. */
.cv3-cnma-slot ~ .cv3hl7-nav, .cv3hl7-nav + .cv3-cnma-slot { vertical-align: middle; }

/*  ══ 히어로 기본 화면 — 다시 (2026-09-15 · 대표님 「전체 디자인 스타일을 고민」) ══
    사진에서 본 것: **흰 상자 위 흰 상자**에 「—」 셋. 없음이 화면의 주인공이었습니다.
    보내주신 아홉 장의 결을 옮깁니다 —
      · 값마다 **제 빛깔** · 숫자 크게 단위 작게
      · 없으면 **옅은 자리**로 두고 «무엇이 올지» 를 적는다
      · 차례는 **길**로, 이은 선 위에 지금 자리를 찍는다
    ⚠ 어둡게 바꾸지 않습니다 — 짜임과 결만 흡수합니다(R0-6). */
.cv3air-base { display: block; margin-top: 10px; }
.cv3air-bs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
}
.cv3air-b {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 11px 13px 10px; border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,24,28,.05), 0 10px 22px -16px rgba(20,24,28,.3);
}
.cv3air-b::before {
  content: ''; display: block; width: 20px; height: 2.5px; border-radius: 2px;
  margin-bottom: 4px; background: currentColor; opacity: .5;
}
.cv3air-b > span { font-size: 10px; font-weight: 800; color: #8A8D85; }
.cv3air-b > b {
  font-size: 24px; font-weight: 900; line-height: 1.02; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: #282B2B;
}
.cv3air-b > b > u { text-decoration: none; font-size: 10.5px; font-weight: 800; margin-left: 3px; opacity: .5; }
.cv3air-b > em { font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*  값이 색을 갖습니다 — 카드가 아니라. */
.cv3air-b.is-lime  { color: #4E7A18; } .cv3air-b.is-lime.is-on  > b { color: #4E7A18; }
.cv3air-b.is-rose  { color: #B03A63; } .cv3air-b.is-rose.is-on  > b { color: #B03A63; }
.cv3air-b.is-teal  { color: #0E6B6B; } .cv3air-b.is-teal.is-on  > b { color: #0E6B6B; }
.cv3air-b.is-warn  { color: #8A5A12; background: #FBF4E6; } .cv3air-b.is-warn > b { color: #8A5A12; }
.cv3air-b.is-bad   { color: #8A2B2B; background: #FBECE8; } .cv3air-b.is-bad  > b { color: #8A2B2B; }
/*  아직 값이 없을 때 — **옅은 자리**. 흰 상자에 「—」 하나를 두지 않습니다. */
.cv3air-b.is-wait { background: #F6F5F0; box-shadow: none; }
.cv3air-b.is-wait::before { opacity: .28; }
.cv3air-b.is-wait > span { color: #A8ABA2; }
.cv3air-b.is-wait > em { color: #B4B7AE; }
.cv3air-slot { display: block; height: 26px; }
.cv3air-slot i {
  display: block; width: 46%; height: 9px; border-radius: 5px; margin-top: 7px;
  background: repeating-linear-gradient(115deg,
    rgba(20,24,28,.07) 0 5px, transparent 5px 10px);
}

/*  평소값 — 다 됐으면 **다 됐다고** */
.cv3air-pg { margin-top: 9px; padding: 10px 13px; border-radius: 13px; background: #F6F5F0; }
.cv3air-pg p { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 0 0 6px; }
.cv3air-pg p span { font-size: 10.5px; font-weight: 800; color: #6B6E66; }
.cv3air-pg p b { font-size: 13px; font-weight: 900; color: #282B2B; font-variant-numeric: tabular-nums; }
.cv3air-pg p b u { text-decoration: none; font-size: 10px; font-weight: 700; opacity: .5; }
.cv3air-pg i { display: block; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #C9A227, #E0BE4A); }
.cv3air-pg.is-done { background: #EAF4EE; }
.cv3air-pg.is-done p span, .cv3air-pg.is-done p b { color: #1F6B44; }
.cv3air-pg.is-done i { background: linear-gradient(90deg, #1F6B44, #3E9A6B); }
/*  ⚠ 막대 뒤 홈이 보여야 «얼마나 왔나» 가 읽힙니다. */
.cv3air-pg { position: relative; }
.cv3air-pg i { box-shadow: 0 0 0 0 transparent; }
.cv3air-pg::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 10px; height: 6px;
  border-radius: 4px; background: rgba(20,24,28,.07); z-index: 0;
}
.cv3air-pg i { position: relative; z-index: 1; }

/*  차례를 **길**로 — 이은 선 위에 지금 자리 */
.cv3air-st {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 11px 0 0; padding: 0; list-style: none;
}
.cv3air-st li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; color: #B4B7AE;
}
/*  걸음 사이를 잇는 선 */
.cv3air-st li::before {
  content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px;
  background: rgba(20,24,28,.09);
}
.cv3air-st li:first-child::before { display: none; }
.cv3air-st li > i {
  width: 12px; height: 12px; border-radius: 50%; background: #E2E0D8;
  box-shadow: 0 0 0 3px #FBFAF6; position: relative; z-index: 1;
}
.cv3air-st li.is-past { color: #6B6E66; }
.cv3air-st li.is-past > i { background: #1F6B44; }
.cv3air-st li.is-past::before { background: #1F6B44; }
.cv3air-st li.is-at { color: #1F6B44; }
.cv3air-st li.is-at > i {
  background: #1F6B44; box-shadow: 0 0 0 3px #FBFAF6, 0 0 0 6px rgba(31,107,68,.22);
}
.cv3air-st li.is-at::before { background: #1F6B44; }
.cv3air-why {
  margin: 9px 0 0; padding: 9px 12px; border-radius: 11px; background: #F6F5F0;
  font-size: 10.5px; font-weight: 700; color: #6B6E66; line-height: 1.55;
}

/*  ══ 종합평가 아래 네 칸 — 히어로와 **같은 결**로 (2026-09-15) ════════════
    사진에서: 위 히어로는 제 빛깔로 살아 있는데 아래 넷은 흰 상자 속 「—」.
    한 화면에서 위는 살고 아래는 죽어 있으면 눈이 아래를 버립니다.
    ⚠ 색은 **뜻을 따릅니다** — 종합 위험이 낮으면 초록, 높으면 붉게. 꾸밈이 아닙니다. */
.cv3home-air-g {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px; margin-top: 9px;
}
.cv3home-air-g > div {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 11px 13px 10px; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,24,28,.05), 0 10px 22px -16px rgba(20,24,28,.3);
}
.cv3home-air-g > div::before {
  content: ''; display: block; width: 20px; height: 2.5px; border-radius: 2px;
  margin-bottom: 4px; background: currentColor; opacity: .5;
}
.cv3home-air-g > div > span { font-size: 10px; font-weight: 800; color: #8A8D85; }
.cv3home-air-g > div > b {
  font-size: 23px; font-weight: 900; line-height: 1.02; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: #282B2B;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv3home-air-g > div > b > u { text-decoration: none; font-size: 10px; font-weight: 800; margin-left: 3px; opacity: .5; }
.cv3home-air-g > div > em { font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv3home-air-g > div.is-lime   { color: #4E7A18; } .cv3home-air-g > div.is-lime.is-on   > b { color: #4E7A18; }
.cv3home-air-g > div.is-teal   { color: #0E6B6B; } .cv3home-air-g > div.is-teal.is-on   > b { color: #0E6B6B; }
.cv3home-air-g > div.is-violet { color: #4A3F76; } .cv3home-air-g > div.is-violet.is-on > b { color: #4A3F76; }
.cv3home-air-g > div.is-amber  { color: #8A5A12; } .cv3home-air-g > div.is-amber.is-on  > b { color: #8A5A12; }
.cv3home-air-g > div.is-warn   { color: #8A5A12; background: #FBF4E6; } .cv3home-air-g > div.is-warn > b { color: #8A5A12; }
.cv3home-air-g > div.is-bad    { color: #8A2B2B; background: #FBECE8; } .cv3home-air-g > div.is-bad  > b { color: #8A2B2B; }
.cv3home-air-g > div.is-wait   { background: #F6F5F0; box-shadow: none; color: #A8ABA2; }
.cv3home-air-g > div.is-wait::before { opacity: .28; }
.cv3home-air-g > div.is-wait > span { color: #A8ABA2; }
.cv3home-air-g > div.is-wait > em { color: #B4B7AE; }

/*  ══ 등급 딱지 + 「왜?」 (2026-09-15 · 대표님) ═══════════════════════════
    「매우나쁨·나쁨·보통·좋음·아주좋음 등도 많이 활용」
    「더 세부적으로 **주의 및 기타 다양한 표현**들도요」
    「**결과 값에 대한 이유**를 알려주거나 설명해 줘야 해요」
    ⚠ 숫자만 주고 끝내지 않습니다 — 누르면 **왜 이 값인지**가 펼쳐집니다. */
button.cv3hero-s {
  border: 0; font: inherit; text-align: left; cursor: pointer;
  transition: box-shadow .14s, transform .1s;
}
button.cv3hero-s:hover { box-shadow: 0 1px 2px rgba(20,24,28,.06), 0 12px 26px -14px rgba(20,24,28,.42); }
button.cv3hero-s:active { transform: translateY(1px); }
button.cv3hero-s:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }
.cv3hero-s u { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cv3hero-gd {
  text-decoration: none; padding: 1.5px 6px; border-radius: 6px;
  font-size: 9px; font-weight: 800; white-space: nowrap;
  background: #EFEDE6; color: #5B5E56;
}
.cv3hero-gd.is-ok   { background: #DDEFE4; color: #1F6B44; }
.cv3hero-gd.is-note { background: #EDEAF6; color: #4A3F76; }
.cv3hero-gd.is-warn { background: #FBF1DE; color: #7A5A12; }
.cv3hero-gd.is-bad  { background: #F7E3E0; color: #8A2B2B; }
.cv3hero-why {
  font-style: normal; margin-top: 5px; align-self: flex-start;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(20,24,28,.05); color: #8A8D85;
  font-size: 9px; font-weight: 800;
}
button.cv3hero-s:hover .cv3hero-why { background: #282B2B; color: #FFFFFF; }

/*  「왜 이 값인가」 창 */
.cv3why { display: block; }
.cv3why-hero {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 4px; padding: 13px 15px; border-radius: 14px; background: #F4F2EC;
}
.cv3why-hero b { font-size: 30px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: #282B2B; }
.cv3why-hero b small { font-size: 12px; font-weight: 800; margin-left: 3px; opacity: .5; }
.cv3why-hero i { flex: 1 1 100%; font-style: normal; font-size: 11px; font-weight: 700; color: #6B6E66; }
.cv3why-hero.is-lime   b { color: #4E7A18; } .cv3why-hero.is-lime   { background: #EEF4E6; }
.cv3why-hero.is-rose   b { color: #B03A63; } .cv3why-hero.is-rose   { background: #F8EBF0; }
.cv3why-hero.is-teal   b { color: #0E6B6B; } .cv3why-hero.is-teal   { background: #E6F2F2; }
.cv3why-hero.is-amber  b { color: #8A5A12; } .cv3why-hero.is-amber  { background: #FBF4E6; }
.cv3why-hero.is-violet b { color: #4A3F76; } .cv3why-hero.is-violet { background: #EDEAF6; }
.cv3why-hero.is-warn   b { color: #8A5A12; } .cv3why-hero.is-warn   { background: #FBF4E6; }
.cv3why-hero.is-bad    b { color: #8A2B2B; } .cv3why-hero.is-bad    { background: #FBECE8; }
.cv3why-h { display: block; margin: 12px 0 4px; font-size: 10.5px; font-weight: 800; color: #282B2B; }
.cv3why p { margin: 0; font-size: 11.5px; font-weight: 600; color: #43463F; line-height: 1.6; }
.cv3why p b { font-weight: 800; color: #282B2B; }
.cv3why-do  { padding: 9px 11px; border-radius: 10px; background: #DDEFE4; color: #1F6B44 !important; }
.cv3why-do b { color: #1F6B44 !important; }
.cv3why-lim { padding: 9px 11px; border-radius: 10px; background: #FBF1DE; color: #7A5A12 !important; }
.cv3why-lim b { color: #7A5A12 !important; }
/*  다섯 등급 자 — 지금 어디인지 짚어 줍니다 */
.cv3why-sc { display: flex; flex-wrap: wrap; gap: 3px; }
.cv3why-sc i {
  flex: 1 1 60px; text-align: center; font-style: normal;
  padding: 5px 4px; border-radius: 7px; font-size: 9.5px; font-weight: 700;
  background: #F4F2EC; color: #B4B7AE;
}
.cv3why-sc i.is-on { font-weight: 900; }
.cv3why-sc i.is-on.is-ok   { background: #DDEFE4; color: #1F6B44; }
.cv3why-sc i.is-on.is-note { background: #EDEAF6; color: #4A3F76; }
.cv3why-sc i.is-on.is-warn { background: #FBF1DE; color: #7A5A12; }
.cv3why-sc i.is-on.is-bad  { background: #F7E3E0; color: #8A2B2B; }

/*  ══ 인터넷 실외 — 편차와 대응 (2026-09-15 · 대표님) ══════════════════════
    「실외 환경은 인터넷이나 외부 자료를 받아와서 표시하고 그 편차를 보여주고
     대응합니다.」
    ⚠ **「지금 하실 일」이 맨 위**입니다. 숫자는 그 까닭입니다 —
      숫자를 위에 두면 «데이터를 보는 화면» 이지 «돌보는 화면» 이 아닙니다. */
.cv3envnet { margin: 0 0 10px; padding: 11px 13px; border-radius: 14px; background: #F4F2EC; }
.cv3envnet-na { margin: 0 0 8px; padding: 9px 11px; border-radius: 10px;
  background: #F2F0E9; font-size: 10.5px; font-weight: 700; color: #6B6E66; }
.cv3envnet-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 0 0 8px; }
.cv3envnet-h b { padding: 2px 8px; border-radius: 7px; background: #4A3F76; color: #FFFFFF;
  font-size: 9.5px; font-weight: 800; }
.cv3envnet-h span { font-size: 12.5px; font-weight: 800; color: #282B2B; }
.cv3envnet-h i { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; color: #A8ABA2; }
/*  지금 하실 일 */
.cv3envnet-do { display: grid; gap: 6px; }
.cv3envnet-do > span { display: block; padding: 10px 12px; border-radius: 11px; background: #FFFFFF; }
.cv3envnet-do b { display: block; font-size: 12px; font-weight: 900; color: #282B2B; }
.cv3envnet-do i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600;
  color: #6B6E66; margin-top: 2px; line-height: 1.5; }
.cv3envnet-do u { display: block; text-decoration: none; font-size: 11px; font-weight: 800;
  margin-top: 5px; color: #1F6B44; }
.cv3envnet-do > span.is-warn { background: #FBF4E6; }
.cv3envnet-do > span.is-warn b, .cv3envnet-do > span.is-warn u { color: #8A5A12; }
.cv3envnet-do > span.is-ok { background: #EAF4EE; }
.cv3envnet-do > span.is-ok b, .cv3envnet-do > span.is-ok u { color: #1F6B44; }
/*  편차 */
.cv3envnet-d { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cv3envnet-d i { display: inline-flex; align-items: baseline; gap: 5px; font-style: normal;
  padding: 4px 9px; border-radius: 8px; background: #FFFFFF;
  font-size: 10.5px; font-weight: 700; color: #43463F; }
.cv3envnet-d u { text-decoration: none; font-size: 9px; font-weight: 800; color: #A8ABA2; }
/*  공기질 */
.cv3envnet-pm { margin: 8px 0 0; font-size: 11px; font-weight: 700; color: #43463F; }
.cv3envnet-pm b { font-weight: 900; }
.cv3envnet-pm small { font-size: 9.5px; font-weight: 600; color: #A8ABA2; }
.cv3envnet-pm.is-ok b   { color: #1F6B44; }
.cv3envnet-pm.is-note b { color: #4A3F76; }
.cv3envnet-pm.is-warn b { color: #8A5A12; }
.cv3envnet-pm.is-bad  b { color: #8A2B2B; }

/*  ══ 센서 줄 — **이름이 사라지지 않게** (2026-09-15 · 대표님 「해결해 주세요」) ══
    🔴 라이브에서 실측으로 잡은 것:
       줄이 **166px** 인데 줄지 못하는 칸들(아이콘 18 · 자리 20 · 방금 16 · 점 7 ·
       설정 33 · 끄기 24 + 사이 42)이 **160px** 를 먹어, 이름에 **6px** 만 남았습니다.
       → 「AS-613(시뮬)」이 **8px 칸에 밀려 안 보였습니다**(필요 78px).
       앞선 사진들에서 **회색 빈 막대**로 보이던 것이 이것입니다.
    ■ 잘못은 «좁아서» 가 아니라 **차례**입니다. 줄일 수 있는 것이 이름 하나뿐이라
      **가장 중요한 것이 먼저 사라졌습니다.** 이름이 없으면 그 줄은 아무 뜻이 없습니다.
    ⇒ ① 줄이 **접히게** 합니다 — 자리가 모자라면 아래로 내려가지, 지워지지 않습니다.
       ② **이름에게 우선권**을 줍니다(최소 폭 + 늘어남).
       ③ 값 칸은 자리가 없으면 **다음 줄로** 갑니다.
    ⚠ 넓은 화면에서는 어차피 한 줄에 다 들어가므로 **보이는 것이 안 바뀝니다.** */
.cv3home-srow { flex-wrap: wrap; row-gap: 4px; }
.cv3home-srow-n {
  /*  🔴🔴 2026-09-15 **두 번째 잘못** — 처음엔 `flex: 1 1 64px` 에
      `@media (max-width:1100px)` 로 「좁으면 한 줄」을 걸었습니다.
      그런데 **창은 1280px 인데 패널이 200px** 이라 그 규칙이 안 걸렸고,
      이름은 64px 에서 여전히 잘렸습니다(필요 78px).
      ⚠ 제 기억에 **「미디어 쿼리는 창을 재지 패널을 재지 않는다」**고 적어 두고
        또 밟았습니다. 창 너비는 **틀린 자**입니다.
      ⇒ 재지 않습니다. 이름은 **언제나 제 줄을 통째로** 씁니다.
        넓든 좁든 안 잘립니다 — 한 줄 더 쓰는 값이 이름이 사라지는 값보다 쌉니다. */
  flex: 1 1 100%; min-width: 0; max-width: none;
}
.cv3home-srow-v {
  /*  값은 자리가 없으면 다음 줄로. 0px 로 눌려 사라지지 않게. */
  flex: 1 1 auto; min-width: 0;
}
/*  이름이 제 줄을 쓰므로 아래 칩들은 **왼쪽부터** 나란히. */
.cv3home-srow { align-items: center; }
.cv3home-srow-i { order: -1; }

/*  ══ 오늘 만든 것들의 잘림 (2026-09-15 · 대표님 「해결해 주세요」) ═════════
    라이브에서 재보니 **제가 오늘 만든 셋**이 잘려 있었습니다.
    ⚠ 「…」으로 줄여 놓고 «잘 들어갔다» 고 하면 안 됩니다 — 읽을 수 없으면
      없는 것과 같습니다. **줄이지 말고 접습니다.** */

/*  ① 설정 단추 설명 — 「감시 기준 · 시뮬레이션 · AI 규칙 · 병원 연결(HL7/FHIR)」
       222px 가 124px 칸에 눌렸습니다. ⇒ 두 줄까지 접습니다. */
.cv3home-setb i {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.cv3home-setb { align-items: flex-start; }
.cv3home-setb svg { margin-top: 2px; }

/*  ② 에이전트 딱지 — 「심장 도메인 Agent」가 46px 에 눌렸습니다.
       ⇒ 카드 머리줄에서 **제 자리를 먼저** 갖게 하고, 그래도 좁으면
         「도메인 Agent」를 떼고 **앞말만** 남깁니다(줄임표 대신 뜻을 남김). */
.cv3home-hrow { flex-wrap: wrap; row-gap: 5px; }
.cv3ag-chip { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.cv3ag-chip span { overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 240px) {
  .cv3ag-chip { flex-basis: 100%; }
}

/*  ③ 환경 한 줄 — 「바깥 먼지 49 · 기준 35」 104px 가 100px 에.
       4px 모자라 잘렸습니다. ⇒ 접히게 둡니다. */
.cv3env-a-m { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
.cv3env-a { align-items: flex-start; }

/*  ② 글이 읽히지 않는 자리들 (2026-09-15 · 이어서) ────────────────────────
    ⚠ 그림·눈금 칸은 원래 잘라 쓰는 자리라 건드리지 않습니다.
      **읽어야 하는 글**만 접히게 합니다. */
/*  히어로 빈 자리 설명 — 「숨 쉬는 리듬이 여기에 뜹니다」(109px) 가 66px 칸에. */
.cv3air-b > em, .cv3hero-s i, .cv3home-air-g > div > em {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35;
}
/*  「16분 째 값이 오지 않습니다」·「불안정 분석: 아직 못 봅니다」 같은 안내 글
    ⚠ 처음 적은 규칙이 **뒤에 오는 nowrap 규칙에 졌습니다**(실측: ws 가 여전히
      nowrap). 이 파일에 nowrap 규칙이 여럿이라 **더 또렷하게** 적습니다 —
      속에 든 글까지 함께 풀어야 합니다. */
.cv3home-need, .cv3home-need *,
.cv3home-risk, .cv3home-risk * {
  white-space: normal !important; overflow: visible; text-overflow: clip; line-height: 1.5;
}

/*  ══ 생체 팝업 — 다시 (2026-09-15 · 대표님 「이건 UI 팝업이라고 할 수가 없을
    정도입니다」) ═══════════════════════════════════════════════════════════
    🔴 재보니 **제가 CSS 를 한 줄도 안 썼습니다.**
       `cv3kpi`·`cv3kpi-c`·`cv3tr`·`cv3tr-s`·`cv3tr-ax`·`cv3dt-bar`
       여섯 클래스 모두 **JS 에만 있고 CSS 에 0곳**이었습니다.
       그래서 「지금 —」 「평균 —」 이 **맨 글줄**로 떨어졌습니다.
       「케어뷰 참조」로 짜임만 옮기고 **모양을 안 입힌 것**입니다.
    ⚠ 그리고 팝업 글자가 **1151자** 였습니다 — 팝업이 아니라 글 뭉치입니다.
      읽어야 하는 것과 참고할 것을 **갈라** 놓습니다. */

/*  ── ① KPI 넉 칸 ────────────────────────────────────────────────── */
.cv3kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px; margin: 6px 0 2px;
}
.cv3kpi-c {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 9px 10px 8px; border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20,24,28,.05), 0 8px 18px -14px rgba(20,24,28,.3);
}
.cv3kpi-c u {
  text-decoration: none; font-size: 9px; font-weight: 800; color: #A8ABA2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv3kpi-c b {
  font-size: 17px; font-weight: 900; letter-spacing: -.035em; line-height: 1.1;
  color: #282B2B; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv3kpi-c b small { font-size: 9px; font-weight: 700; opacity: .5; margin-left: 2px; }
.cv3kpi-c.is-none { background: #F6F5F0; box-shadow: none; }
.cv3kpi-c.is-none b { color: #C2C5BC; }

/*  ── ② 기준 눈금 ─────────────────────────────────────────────────── */
.cv3dt-bar { display: block; margin: 8px 0 2px; }

/*  ── ③ 추세 그림 (최근 14일) ─────────────────────────────────────── */
.cv3tr { display: block; margin: 4px 0 2px; }
.cv3tr-s {
  display: block; width: 100%; height: 104px;
  border-radius: 12px; background: #FBFAF6;
}
.cv3tr-ax {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 5px;
}
.cv3tr-ax i { font-style: normal; font-size: 9px; font-weight: 700; color: #A8ABA2; }
.cv3tr-ax u {
  text-decoration: none; font-size: 9px; font-weight: 700; color: #4E7A18;
  text-align: center; flex: 1 1 auto;
}

/*  ── ④ 팝업 자체를 읽을 수 있게 ──────────────────────────────────── */
/*  머리 — 무엇을 보는 창인지 */
.cv3uri-t {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin: 14px 0 5px; font-size: 11.5px; font-weight: 800; color: #282B2B;
}
.cv3uri-t span { font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
/*  긴 안내 글은 **작고 흐리게** — 읽어야 하는 숫자와 섞이지 않게. */
.cv3mini-h {
  display: block; margin: 7px 0 0; padding: 9px 11px; border-radius: 10px;
  background: #F6F5F0; font-style: normal;
  font-size: 10px; font-weight: 600; color: #6B6E66; line-height: 1.55;
}
.cv3mini-h b { font-weight: 800; color: #43463F; }
.cv3mini-now {
  display: inline-block; font-size: 26px; font-weight: 900; letter-spacing: -.04em;
  color: #282B2B; font-variant-numeric: tabular-nums; margin-right: 6px;
}
.cv3mini-todo {
  display: block; margin: 8px 0 0; padding: 10px 12px; border-radius: 11px;
  background: #DDEFE4; font-style: normal;
  font-size: 11px; font-weight: 700; color: #1F6B44; line-height: 1.55;
}

/*  ══ 팝업 글 뭉치를 접습니다 (2026-09-15 · 대표님 「UI 팝업이라 할 수 없을 정도」) ══
    ⚠ 잘못은 «설명이 많아서» 가 아니라 **다 펼쳐 놓아서**입니다.
      처음 쓰시는 분께는 필요하고, 매일 쓰시는 분께는 방해입니다.
    ⚠ 「진단이 아닙니다」는 **접지 않습니다** — 늘 보여야 합니다. */
.cv3mini-key {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 11px;
  background: #EAF4EE; font-size: 11.5px; font-weight: 700; color: #1F6B44; line-height: 1.5;
}
.cv3mini-key b { font-weight: 900; }
.cv3fold { margin: 7px 0 0; }
.cv3fold > summary {
  list-style: none; cursor: pointer;
  padding: 8px 11px; border-radius: 10px; background: #F4F2EC;
  font-size: 10.5px; font-weight: 800; color: #5B5E56;
}
.cv3fold > summary::-webkit-details-marker { display: none; }
.cv3fold > summary::after { content: ' ▾'; opacity: .5; }
.cv3fold[open] > summary::after { content: ' ▴'; }
.cv3fold > summary:hover { background: #E4E2DA; }
.cv3fold > summary:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }
.cv3fold > p {
  margin: 6px 0 0; padding: 0 12px; font-size: 10.5px; font-weight: 600;
  color: #6B6E66; line-height: 1.6;
}
.cv3mini-warn {
  margin: 9px 0 0; padding: 10px 12px; border-radius: 11px; background: #FBF1DE;
  font-size: 10.5px; font-weight: 700; color: #7A5A12; line-height: 1.5;
}
.cv3mini-warn b { font-weight: 900; }

/*  ══ 긴 안내 글은 **줄여 보이고** 누르면 펼칩니다 (2026-09-15) ═══════════
    🔴 대표님 「이건 UI 팝업이라고 할 수가 없을 정도입니다」
    ■ 재보니 팝업 1145자 가운데 덩치는 `cv3mini-h` 안내 글들이었습니다
      (152 + 123 + 79 …). 설명이 나쁜 것이 아니라 **다 펼쳐 둔 것**이 나쁩니다.
    ⇒ **두 줄까지만** 보이고, 누르면 펼쳐집니다. 세 줄이 넘는 것만 접힙니다.
    ⚠ 「진단이 아닙니다」(`cv3mini-warn`)와 「지어내지 않습니다」 류는 **안 접습니다.** */
.cv3home-ask .cv3mini-h {
  position: relative; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: none;
}
.cv3home-ask .cv3mini-h::after {
  content: '더 보기'; display: block; margin-top: 3px;
  font-size: 9px; font-weight: 800; color: #8A8D85;
}
.cv3home-ask .cv3mini-h.is-open {
  -webkit-line-clamp: unset; display: block;
}
.cv3home-ask .cv3mini-h.is-open::after { content: '접기'; }
/*  짧은 것은 접을 것이 없으니 «더 보기» 를 안 답니다 — JS 가 표를 답니다. */
.cv3home-ask .cv3mini-h.is-short { display: block; -webkit-line-clamp: unset; cursor: default; }
.cv3home-ask .cv3mini-h.is-short::after { content: none; }

/*  ══ 팝업을 **타일**로 (2026-09-15 · 대표님) ═══════════════════════════════
    「**글줄은 빼고 타일 방식**으로 해주세요. 세부지표는 **하얀 덩어리**로 보입니다」
    🔴 하얀 덩어리가 된 까닭 — `.cv3home-ask-n span { display: block }` (0,1,1) 이
       제 `.cv3kpi { display: grid }` (0,1,0) 를 **이겼습니다.**
       `grid-template-columns` 는 살아 있는데 **display 만 block** 이라
       넉 칸이 **세로로 쌓였습니다**(실측: 440px 칸이 4줄).
    ⚠ 이 파일 10778줄에 **같은 교훈이 이미 적혀** 있습니다 — 또 밟았습니다.
      팝업 안에 무엇을 놓을 때는 **선택자 힘부터** 맞출 것. */
.cv3home-ask-n .cv3kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.cv3home-ask-n .cv3kpi-c { display: flex; }
@media (max-width: 420px) {
  .cv3home-ask-n .cv3kpi { grid-template-columns: repeat(2, 1fr); }
}

/*  ── 글줄을 타일로 ────────────────────────────────────────────────────
    ⚠ 「기준 — 18.5 – 22.9 …」 같은 줄이 **맨 글**로 흘렀습니다.
      대표님이 오래 말씀하신 것 — **글줄이 아니라 타일**. */
.cv3home-ask-n .cv3fold,
.cv3home-ask-n .cv3mini-key,
.cv3home-ask-n .cv3mini-warn,
.cv3home-ask-n .cv3mini-h { display: block; }
/*  기준 줄 — 타일 하나로 */
.cv3ask-ref {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #F4F2EC;
}
.cv3ask-ref u {
  text-decoration: none; flex: 0 0 auto; padding: 2px 8px; border-radius: 7px;
  background: #FFFFFF; font-size: 9px; font-weight: 800; color: #8A8D85;
}
.cv3ask-ref b { font-size: 12px; font-weight: 800; color: #282B2B; }
.cv3ask-ref i { flex: 1 1 100%; font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2; }

/*  ══ 팝업은 **대시보드**다 (2026-09-15 · 대표님 「대시보드지 설명서가 아닙니다」) ══
    🔴 팝업 높이가 **1593px** 이었고, 그 대부분이 **회색 설명 덩이 다섯**이었습니다.
       대시보드는 **숫자와 타일**로 말합니다. 설명은 **필요할 때** 봅니다.
    ⇒ ① 설명 덩이는 **한 곳으로 접습니다**(맨 아래 「설명」 하나).
       ② 팝업 안 `span { display:block }` 이 **격자를 전부 죽이고** 있었습니다 —
          부위별·체성분 줄이 세로로 길게 쌓인 까닭입니다. 힘을 맞춰 되살립니다.
    ⚠ 「진단이 아닙니다」와 블루투스 타일은 **안 접습니다** — 늘 보여야 합니다. */

/*  ① 팝업 안에서 격자·가로줄을 되살립니다 (선택자 힘 0,2,0 > 0,1,1) */
.cv3home-ask-n .cv3seg-r,
.cv3home-ask-n .cv3bc-r,
.cv3home-ask-n .cv3uw-g,
.cv3home-ask-n .cv3gctx-r { display: grid; }
.cv3home-ask-n .cv3seg-c,
.cv3home-ask-n .cv3uw-s,
.cv3home-ask-n .cv3gctx-p,
.cv3home-ask-n .cv3gr-st,
.cv3home-ask-n .cv3gfeat,
.cv3home-ask-n .cv3uri-chips { display: flex; }
.cv3home-ask-n .cv3seg-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; }
.cv3home-ask-n .cv3gr-hero,
.cv3home-ask-n .cv3uri-hero { display: grid; }

/*  ② 설명 덩이 — 대시보드에서는 **접어 둡니다.**
       ⚠ 지우는 것이 아닙니다(R0-6). 「설명 보기」를 누르면 다 나옵니다. */
.cv3home-ask-n .cv3mini-h {
  display: none;
}
.cv3home-ask-n.is-doc .cv3mini-h {
  display: -webkit-box; -webkit-line-clamp: unset; overflow: visible;
}
.cv3home-ask-n.is-doc .cv3mini-h::after { content: none; }
.cv3ask-doc {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin: 10px 0 0; padding: 9px 12px; border: 0; border-radius: 11px;
  background: #F4F2EC; color: #6B6E66; font: inherit;
  font-size: 10.5px; font-weight: 800; cursor: pointer;
}
.cv3ask-doc:hover { background: #E4E2DA; }
.cv3ask-doc:focus-visible { outline: 2px solid #282B2B; outline-offset: 2px; }

/*  ══ 「재면 저절로」가 팝업의 **본길** (2026-09-15 · 대표님) ═══════════════
    「적는게 아니고 **애플릿 기기를 통해 측정을 하면 블루투스를 통해서 자동 기입**
     되어야 합니다.」
    ⇒ 값 바로 아래, **가장 눈에 띄는 자리**에 둡니다. 적는 칸은 그 아래입니다. */
.cv3home-ask-n .cv3meas { display: block; margin: 10px 0 0; padding: 12px 13px;
  border-radius: 14px; background: #EAF4EE; }
.cv3meas-h { display: block; margin-bottom: 8px; }
.cv3meas-h b { display: block; font-size: 12.5px; font-weight: 900; color: #1F6B44; }
.cv3meas-h i { display: block; font-style: normal; margin-top: 2px;
  font-size: 10px; font-weight: 700; color: #4A6B58; line-height: 1.45; }
.cv3home-ask-n .cv3meas-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.cv3meas-b {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 0; border-radius: 12px; padding: 11px 13px; cursor: pointer;
  background: #1F6B44; color: #FFFFFF; font: inherit; text-align: left;
}
.cv3meas-b svg { width: 16px; height: 16px; margin-bottom: 2px; }
.cv3meas-b u { text-decoration: none; font-size: 12px; font-weight: 900; }
.cv3meas-b i { font-style: normal; font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.72); }
.cv3meas-b:hover { background: #185536; }
.cv3meas-b:focus-visible { outline: 3px solid #282B2B; outline-offset: 2px; }
.cv3meas.is-off { background: #F4F2EC; }
.cv3meas.is-off .cv3meas-h b { color: #6B6E66; }
.cv3meas.is-off .cv3meas-b { background: #C2C5BC; cursor: not-allowed; }
.cv3meas-why, .cv3meas-msg {
  display: block; margin-top: 8px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.7); font-size: 10.5px; font-weight: 700;
  color: #6B6E66; line-height: 1.5;
}
.cv3meas-msg { background: #FFFFFF; color: #1F6B44; }

/*  ══ 제품 상자 (2026-09-15 · 대표님 「이미 기기 정보를 가지고 있습니다」) ═════
    「혈압계」가 아니라 **「OMRON HEM-7142T2」** 라고 말해야 대표님이 아십니다.
    ⚠ 구간·기능은 **제조사가 말하는 것**입니다 — 우리가 잰 것이 아니라고 적습니다. */
.cv3home-ask-n .cv3prod { display: block; margin: 10px 0 0; padding: 11px 13px;
  border-radius: 13px; background: #F4F2EC; }
.cv3prod-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.cv3prod-h b { font-size: 12.5px; font-weight: 900; color: #282B2B; }
.cv3prod-h u { text-decoration: none; padding: 2px 7px; border-radius: 6px;
  background: #FFFFFF; font-size: 9.5px; font-weight: 800; color: #6B6E66; }
.cv3prod-h i { font-style: normal; font-size: 9.5px; font-weight: 700; color: #A8ABA2; }
.cv3home-ask-n .cv3prod-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 4px; }
.cv3prod-cats i { display: flex; align-items: baseline; gap: 5px; font-style: normal;
  padding: 5px 9px; border-radius: 8px; background: #FFFFFF;
  font-size: 10px; font-weight: 700; color: #43463F; }
.cv3prod-cats u { text-decoration: none; font-size: 9px; font-weight: 800; color: #8A8D85;
  white-space: nowrap; }
.cv3home-ask-n .cv3prod-feat { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cv3prod-feat i { font-style: normal; padding: 3px 8px; border-radius: 7px;
  background: #EDEAF6; font-size: 9.5px; font-weight: 700; color: #4A3F76; }
/*  소변 — 사진 길 (블루투스가 아닙니다) */
.cv3meas.is-shot { background: #EDEAF6; }
.cv3meas.is-shot .cv3meas-h b { color: #4A3F76; }
.cv3meas.is-shot .cv3meas-h i { color: #5A5480; }
.cv3meas-b.is-shot { background: #4A3F76; cursor: pointer; }
.cv3meas-b.is-shot:hover { background: #3A3160; }

/* ══ 아바타 리듬 세 겹 (2026-09-15 · 대표님) ═══════════════════════════════
   🔴 「5초에서 **10초 주기**로요. 사람들은 **3초 동안 안 움직이면 문제 있다고**
      생각합니다.」
   ■ 실측으로 잡은 진짜 잘못 — 숨결이 4.2초에 걸쳐 **1.4px** 이었습니다.
     「움직입니다」가 참인데 **눈에는 안 보이는** 참이었습니다. 그래서 죽어 보였습니다.
   ⇒ ① 말·표정 10초  ② 진행 띠 10초  ③ 숨결·점 1~4초. 어느 순간을 잘라도
     3초 안에 무언가 움직입니다.
   ⚠ 움직임을 줄이신 분께는 맨 아래에서 **전부 멈춥니다.** */

/*  ① 숨결 — 보이게 키웁니다 (1.5px → 5px + 아주 작은 크기 변화).
    ⚠ 크기 변화는 **0.6%** 까지만. 더 주면 «부푼다» 가 되어 만화가 됩니다. */
@keyframes cv3avaBreathe2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.006); }
}
.cv3home .cv3ava-img {
  animation: cv3avaBreathe2 3.6s ease-in-out infinite;
  transform-origin: 50% 100%;   /* 발이 땅에 붙어 있어야 «뜬다» 로 안 보입니다 */
}

/*  ② 진행 띠 — 「다음 말까지」. 사람은 멈춘 화면은 못 견디지만 **차오르는 것**은
    기다립니다. 주기(ms)와 이미 지난 만큼은 JS 가 인라인으로 넣습니다. */
.cv3home .cv3ava-prog {
  display: block; height: 2px; margin: 7px 0 0; border-radius: 2px; overflow: hidden;
  background: rgba(126,101,66,.12);
}
.cv3home .cv3ava-prog > i {
  display: block; height: 100%; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(201,162,39,.55), rgba(201,162,39,.95));
  transform-origin: 0 50%;
  animation-name: cv3avaProg; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes cv3avaProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/*  ③ 살아있음 점 — 1.4초. 10초 주기와 **상관없이** 늘 돕니다.
    이것이 「3초 동안 안 움직이면 고장」에 대한 답입니다. */
.cv3home .cv3ava-live {
  display: inline-flex; gap: 3px; align-items: center; margin-right: 6px;
  vertical-align: middle;
}
.cv3home .cv3ava-live > i {
  width: 4px; height: 4px; border-radius: 50%; background: rgba(201,162,39,.85);
  animation: cv3avaLive 1.4s ease-in-out infinite;
}
.cv3home .cv3ava-live > i:nth-child(2) { animation-delay: .18s; }
.cv3home .cv3ava-live > i:nth-child(3) { animation-delay: .36s; }
@keyframes cv3avaLive {
  0%, 100% { opacity: .22; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(-2.5px); }
}

/* ══ 기다리는 타일 — 죽은 것이 아니라 **기다리는 것** ══════════════════════
   🔴 실측: 기다림 타일 3개에 애니메이션이 **하나도 없었습니다.** 옅은 회색
      덩어리 셋이 화면 한가운데에 서 있으면 «고장» 으로 읽힙니다.
   ⇒ 빛이 천천히 지나갑니다(2.4초). 값이 오면 이 빛은 **사라집니다** —
      다 된 것에 계속 «기다리는 중» 표를 달면 그게 거짓말이 됩니다. */
.cv3home .cv3air-b.is-wait { position: relative; overflow: hidden; }
.cv3home .cv3air-b.is-wait::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%,
              rgba(255,255,255,.85) 48%, transparent 66%);
  transform: translateX(-100%);
  animation: cv3airWait 2.4s ease-in-out infinite;
}
@keyframes cv3airWait { to { transform: translateX(100%); } }
/*  값을 받는 칸은 **빛이 없습니다** — 기다림 표는 기다릴 때만. */
.cv3home .cv3air-b.is-on::after { content: none; }
/*  빈 자리 막대도 조용히 숨 쉽니다 — 멈춘 회색 막대는 «비활성» 으로 보입니다. */
.cv3home .cv3air-b.is-wait .cv3air-slot > i {
  animation: cv3airSlot 2.4s ease-in-out infinite;
}
@keyframes cv3airSlot { 0%, 100% { opacity: .34; } 50% { opacity: .72; } }

/* ══ 네 걸음 — 테두리를 걷어내고 **길**로 ══════════════════════════════════
   🔴 대표님 「그리고 **테두리 쓰지 마세요.**」 — 그런데 이 단추 넷에는
      `border: 1px solid` 가 남아 있었습니다. 걷어냅니다.
   ■ 그리고 넷이 따로 떨어진 알약이면 «고르는 것» 으로 보입니다. 이건 **차례**라
      이어져 있어야 합니다. 뒤에 실선 하나를 깔고 그 위에 걸음을 얹습니다. */
.cv3home .cv3air-st { position: relative; gap: 0; }
.cv3home .cv3air-st::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px;
  transform: translateY(-50%); border-radius: 2px;
  background: rgba(126,101,66,.13); z-index: 0;
}
.cv3home .cv3air-st > li {
  position: relative; z-index: 1; border: 0; background: transparent;
  padding: 5px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cv3home .cv3air-st > li > i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: #E7E2D6; box-shadow: 0 0 0 3px var(--hx-pan, #FAF8F3);
}
.cv3home .cv3air-st > li > span { font-size: 10px; font-weight: 700; color: var(--hx-mut); }
/*  지나온 걸음 — 다 된 것은 **다 됐다고** 말합니다. */
.cv3home .cv3air-st > li.is-past > i { background: rgba(201,162,39,.55); }
.cv3home .cv3air-st > li.is-past > span { color: #7A6636; }
/*  지금 서 있는 걸음 — 여기만 밝고, 여기만 **뜁니다**(1.9초). */
.cv3home .cv3air-st > li.is-at { background: transparent; }
.cv3home .cv3air-st > li.is-at > i {
  width: 11px; height: 11px; background: #C9A227;
  animation: cv3airAt 1.9s ease-in-out infinite;
}
.cv3home .cv3air-st > li.is-at > span { color: #3A2A05; font-weight: 900; }
@keyframes cv3airAt {
  0%, 100% { box-shadow: 0 0 0 3px var(--hx-pan, #FAF8F3), 0 0 0 3px rgba(201,162,39,.30); }
  50%      { box-shadow: 0 0 0 3px var(--hx-pan, #FAF8F3), 0 0 0 8px rgba(201,162,39,0); }
}

/*  ⚠ 움직임을 줄이신 분 — **전부 멈춥니다.** 새로 넣은 것도 빠짐없이. */
@media (prefers-reduced-motion: reduce) {
  .cv3home .cv3ava-img, .cv3home .cv3ava-prog > i, .cv3home .cv3ava-live > i,
  .cv3home .cv3air-b.is-wait::after, .cv3home .cv3air-b.is-wait .cv3air-slot > i,
  .cv3home .cv3air-st > li.is-at > i { animation: none; }
  /*  띠는 멈추되 **가득 찬 채로** 둡니다 — 0 으로 멈추면 «고장» 으로 보입니다. */
  .cv3home .cv3ava-prog > i { transform: scaleX(1); }
}

/* ══ AI 가 보는 곳 — 아홉 점 (2026-09-15 · 대표님 「AI 상태정보 표시 강화」) ══
   ■ 값이 하나뿐인 날에도 **AI 가 일하는 범위**가 보여야 합니다.
   ⚠ 밝은 점은 «값이 들어와 있다» 는 뜻일 뿐, «좋다» 가 아닙니다.
     그래서 **초록을 안 씁니다** — 초록은 이 화면에서 «좋음» 의 빛깔입니다. */
.cv3home .cv3aiw { display: block; margin: 10px 0 0; }
.cv3home .cv3aiw-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.cv3home .cv3aiw-h > span { font-size: 11px; font-weight: 700; color: var(--hx-mut); }
.cv3home .cv3aiw-h > b {
  margin-left: auto; font-size: 15px; font-weight: 900; color: #3A2A05;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.cv3home .cv3aiw-h > b > u { font-size: 11px; font-weight: 700; color: var(--hx-mut); text-decoration: none; }
/*  🔴 처음엔 `flex-wrap` 으로 흘렸는데 **들쭉날쭉 두 줄**이 됐습니다.
    아홉은 3×3 으로 **딱 떨어집니다** — 격자라야 «AI 가 덮는 범위» 로 읽힙니다.
    흘러가는 칩 줄은 목록으로 보이고, 격자는 **지도**로 보입니다. */
.cv3home .cv3aiw-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
/*  한 칸이 한 곳입니다. 이름은 칸 안에 **아주 작게** — 점만 있으면 무엇인지 모릅니다. */
.cv3home .cv3aiw-g > i {
  min-width: 0; display: flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 6px; border-radius: 8px;
  background: #F1EFE8;
}
.cv3home .cv3aiw-g > i > u {
  text-decoration: none; font-size: 9.5px; font-weight: 800; color: #A29B86;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*  값이 들어와 있는 자리 — 머스터드. **초록이 아닙니다**(좋다는 말이 아니라서). */
.cv3home .cv3aiw-g > i.is-on { background: rgba(201,162,39,.20); }
.cv3home .cv3aiw-g > i.is-on > u { color: #5A4510; }

/* ══ 테두리 걷어내기 — 단추와 타일 (2026-09-15 · 대표님) ═══════════════════
   🔴 대표님 「**타일, 단추 디자인 확인 보강**해 주세요.」 + 서 계신 규칙
      「그리고 **테두리 쓰지 마세요.**」
   ■ 실측(2026-09-15): 화면에 눈에 보이는 1px 윤곽선이 **36곳** 남아 있었습니다.
     그중 **단추 5곳**과 **침대 타일 13곳** 이 진짜 윤곽선이었습니다.
   ■ 나머지(`rgba(255,255,255,.55~.7)`)는 **유리 테**입니다 — 윤곽을 긋는 선이
     아니라 밝은 쪽에서 들어온 **빛**입니다. 대표님이 오래 보신 결이라 제가
     함께 지우지 않았습니다(R0-6). 지울지는 대표님이 정하실 일입니다.
   ⇒ 경계는 **면과 그림자**로만. 선을 지우되 **눌리는 느낌은 더 살립니다** —
     선이 없어지면 누를 수 있는 것인지 흐려지기 때문입니다. */

/*  ① 단추 — 선 대신 **살짝 뜬 면**. 안쪽 위 밝음 + 바깥 아래 그늘. */
.cv3home .cv3home-btn {
  border: 0;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 1px 1.5px rgba(70,58,32,.10),
              0 6px 14px -10px rgba(70,58,32,.42);
}
.cv3home .cv3home-btn:hover { background: rgba(255,255,255,.86); }
/*  누를 때는 **들어갑니다** — 선이 없어도 «눌렸다» 가 손에 잡히게. */
.cv3home .cv3home-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(70,58,32,.16);
}
/*  ⚠ 어두운 바탕(벽·카메라) 위의 단추는 **원래 규칙을 지킵니다** — 흰 면을
    올리면 눈이 그쪽으로 쏠린다고 이미 적어 둔 자리입니다. 선만 걷습니다. */
.cv3home .cv3wall-a .cv3home-btn,
.cv3home .cv3camone-a .cv3home-btn {
  border: 0; background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
/*  같은 규칙에 묶여 있던 이웃들 — 탭·설정·환경 단추도 함께. */
.cv3home .cv3aimtab, .cv3home .cv3aim-cfgb,
.cv3home .cv3env-illb, .cv3home .cv3ava-set { border: 0; }
/*  🔴 머리띠 단추 둘(「연결」·「닫기」)은 `.cv3home` **바깥**이라 위 규칙이
    안 닿았습니다 — 실측으로 잡았습니다. 이름만 보고 «다 고쳤다» 할 뻔했습니다. */
.cv3home-hdin .cv3home-btn {
  border: 0;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 1px 1.5px rgba(70,58,32,.10),
              0 6px 14px -10px rgba(70,58,32,.42);
}
.cv3home-hdin .cv3home-btn:hover { background: rgba(255,255,255,.86); }
.cv3home-hdin .cv3home-btn:active {
  transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(70,58,32,.16);
}

/*  ② 침대 14칸 — 이미 안쪽 그림자로 **파인 느낌**이 있습니다. 선은 군더더기였습니다.
    ⚠ is-ok / is-warn / is-crit 는 **상태를 말하는 색**입니다. 선을 지우면서
      그 말까지 지우면 안 됩니다 — 색을 **면**으로 옮겨 그대로 남깁니다. */
.cv3home .cv3bed14-i { border: 0; }
.cv3home .cv3bed14-i.is-ok    { background: rgba(255,255,255,.62); }
.cv3home .cv3bed14-i.is-warn  { background: rgba(201,162,39,.16); }
.cv3home .cv3bed14-i.is-crit  { background: rgba(176,58,58,.14); }