/* ============================================================================
 *  케어뷰.3DX_v1.0 — 「연결」 (이름 ↔ 센서) 스타일
 *
 *  2026-09-02 대표님: 「이게 아니고 케어뷰 3DX_v1.0에 케어뷰 2.0 깨끗하게
 *  빌드한거요」 — 제가 v1.0 에는 **메뉴만 넣고 기존 2.0 으로 보내기만** 했습니다.
 *  깨끗한 계층은 v2.0 에만 있었습니다. 여기 그대로 얹습니다.
 *
 *  ⚠ v2.0 의 `care.css` 에서 **그대로 가져온 것**입니다. 두 벌이 어긋나지 않게
 *     고칠 때는 양쪽을 함께 고쳐야 합니다(3DX 는 판이 둘입니다).
 *  ⚠ v1.0 은 어두운 화면입니다 — v2.0 의 `--cv-*` 변수가 없으므로
 *     아래에서 **이 파일 안에서만 쓰는 값**으로 채웁니다. 기존 스타일은 안 건드립니다.
 * ========================================================================== */
.cc-pop, .cc-ask, .cv-connbtn {
  --cv-surface:#161b22; --cv-surface-2:#1b212a; --cv-bg:#0e1116;
  --cv-ink:#e8edf4; --cv-ink-2:#9fb0c4; --cv-ink-3:#6f8296;
  --cv-line:#232a33; --cv-line-hi:#2f3946;
  --cv-accent:#5b8cff; --cv-accent-soft:#16203a; --cv-accent-ink:#cfe0ff;
  --cv-r:14px; --cv-r-s:11px; --cv-r-pill:999px; --cv-tap:36px;
  --cv-shadow:0 18px 48px rgba(0,0,0,.5);
}

/*  ⚠ **글자색을 창에 박습니다.** v2.0 에서는 `body` 가 밝은 글자색을 들고 있어
       창 안이 그냥 물려받으면 됐습니다. v1.0 의 `body` 는 **밝은 화면용 진한 색**
       (`#282b2b`)입니다 — 그대로 물려받으면 어두운 창 위에 거의 안 보입니다.
       실측(2026-09-02): 모델명 「AS-613」·「XK300 Essence」와 숫자 17.4/83 이
       `rgb(40,43,43)` 으로 나와 화면에서 읽히지 않았습니다.
    ⚠ `*` 로 덮지 않습니다 — 아래 v2.0 규칙들이 일부러 준 색(값 옴 초록, 5분 평균
       주황, 안내문 파랑)까지 지워집니다. **창에만** 박고 나머지는 물려받게 둡니다. */
.cc-pop, .cc-ask { color: var(--cv-ink); }

/*  상단 바 단추 — 옆의 「케어 모드 ▾」와 같은 키·같은 여백으로 맞춥니다.
    ⚠ `.cv3-nav-btn` 은 30×26 아이콘 칸입니다. 글자를 넣으면 삐져나오므로
       `width:auto` 로 풀어 줍니다(`care-mode-menu.css` 와 같은 방식). */
.cv3-connect-slot { display: inline-flex; align-items: center; }
.cv-connbtn.cv3-nav-btn {
  display: inline-flex !important; align-items: center; gap: 7px;
  width: auto !important; padding: 0 12px !important; margin-left: 8px;
  font-weight: 700; white-space: nowrap; position: relative;
}
/*  아직 안 붙인 센서가 있을 때만 테두리가 살아납니다 — 없으면 조용합니다. */
.cv-connbtn.cv3-nav-btn.is-need { border-color: var(--cv-accent); }

/* ══ 「연결」 (이름 ↔ 센서) ═══════════════════════════════════════════
   2026-09-02 대표님: 「상단 헤더 로고 바로 옆쪽으로 올리죠.」
   ⚠ 케어뷰 2.0 에서 배운 것: 상태는 **색만으로** 말하지 않습니다.
      늘 글자가 함께 붙습니다(「값 옴」·「5분 평균」·「—」). */
.cv-connbtn { gap: 7px; }
.cv-connbtn-ic { font-size: 14px; line-height: 1; }
.cv-connbtn-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--cv-accent); color: var(--cv-accent-ink);
}
.cv-connbtn.is-need { border-color: var(--cv-accent); }

.cc-pop {
  position: fixed; inset: 0; z-index: 9400; display: none;
  background: rgba(0,0,0,.55); padding: 6vh 16px; overflow-y: auto;
}
.cc-pop.is-open { display: block; }
.cc-in {
  max-width: 560px; margin: 0 auto; background: var(--cv-surface);
  border: 1px solid var(--cv-line-hi); border-radius: var(--cv-r);
  box-shadow: var(--cv-shadow); overflow: hidden;
}
.cc-h { display: flex; align-items: center; gap: 10px; padding: 15px 18px;
  border-bottom: 1px solid var(--cv-line); font-size: 15px; }
.cc-close { margin-left: auto; width: 32px; height: 32px; border-radius: 9px;
  cursor: pointer; background: transparent; border: 1px solid var(--cv-line);
  color: var(--cv-ink); }
.cc-tabs { display: flex; gap: 6px; padding: 10px 14px 0; border-bottom: 1px solid var(--cv-line); }
.cc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  border: 0; background: transparent; color: var(--cv-ink-2); cursor: pointer;
  font-weight: 600; border-bottom: 2px solid transparent; }
.cc-tab.is-on { color: var(--cv-accent-ink); border-bottom-color: var(--cv-accent); }
.cc-tab-n { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800;
  background: var(--cv-accent); color: var(--cv-accent-ink); }
.cc-b { padding: 14px 18px 18px; }
.cc-lead { margin: 14px 0 8px; font-size: 12px; font-weight: 700; color: var(--cv-ink-2); }
.cc-lead:first-child { margin-top: 0; }
.cc-empty { margin: 8px 0 16px; padding: 20px 14px; text-align: center;
  font-size: 13px; line-height: 1.7; color: var(--cv-ink-2);
  border: 1px dashed var(--cv-line-hi); border-radius: var(--cv-r-s); }
.cc-row { padding: 12px 13px; margin-bottom: 8px; border-radius: var(--cv-r-s);
  border: 1px solid var(--cv-line); background: var(--cv-surface-2, transparent); }
.cc-row-h { display: flex; align-items: center; gap: 9px; }
.cc-row-h b { font-size: 14.5px; }
.cc-sid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--cv-ink-3, var(--cv-ink-2)); }
.cc-x { margin-left: auto; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  font-size: 11.5px; background: transparent; border: 1px solid var(--cv-line);
  color: var(--cv-ink-2); }
.cc-x:hover { border-color: #ff2d6a; color: #ff2d6a; }
.cc-out { margin-top: 14px; }
/*  값 — 실시간과 5분 집계를 **다른 색·다른 글자**로 */
.cc-val { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto;
  font-size: 12px; }
.cc-val b { font-size: 15px; font-weight: 700; }
.cc-val em { font-style: normal; font-size: 10px; color: var(--cv-ink-2); margin-right: 4px; }
.cc-val i { font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 999px; }
.cc-val.live i { background: rgba(30,240,208,.16); color: #0f9c88; }
.cc-val.agg i  { background: rgba(255,150,40,.16); color: #b06a10; }
.cc-val.none { color: var(--cv-ink-2); font-size: 14px; }
.cc-sens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px;
  border-radius: 999px; font-size: 11.5px; border: 1px solid var(--cv-line-hi); }
.cc-pill em { font-style: normal; font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; color: var(--cv-ink-2); }
.cc-pill button { width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 0; background: transparent; color: var(--cv-ink-2); font-size: 11px; }
.cc-pill button:hover { color: #ff2d6a; }
.cc-bound { margin: 9px 0 0; font-size: 12px; color: var(--cv-ink-2); }
.cc-bound button { margin-left: 8px; padding: 4px 9px; border-radius: 8px; cursor: pointer;
  font-size: 11px; background: transparent; border: 1px solid var(--cv-line); color: var(--cv-ink-2); }
.cc-add, .cc-namebtn { margin-top: 9px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; background: var(--cv-accent-soft);
  border: 1px dashed var(--cv-accent); color: var(--cv-accent-ink); }
.cc-namebtn { display: block; width: 100%; text-align: left; border-style: solid; }
.cc-back { margin-bottom: 12px; padding: 6px 11px; border-radius: 9px; cursor: pointer;
  font-size: 11.5px; background: transparent; border: 1px solid var(--cv-line); color: var(--cv-ink-2); }
.cc-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cv-line); }
.cc-form label { display: block; margin-bottom: 9px; }
.cc-form label > span { display: block; font-size: 11.5px; font-weight: 700;
  margin-bottom: 5px; color: var(--cv-ink-2); }
.cc-form input { width: 100%; min-height: 42px; padding: 0 12px; font-size: 13.5px;
  border: 1px solid var(--cv-line-hi); border-radius: 10px;
  background: var(--cv-bg, transparent); color: var(--cv-ink); }
.cc-form input:focus { outline: none; border-color: var(--cv-accent); }
.cc-go { width: 100%; min-height: 42px; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; background: var(--cv-accent);
  border: 1px solid var(--cv-accent); color: var(--cv-accent-ink); }
.cc-note { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--cv-ink-2); }
.cc-ok { margin: 0 0 10px; font-size: 12.5px; color: #0f9c88; }
.cc-err { margin: 0 0 12px; padding: 9px 11px; border-radius: 10px; font-size: 12px;
  background: rgba(255,45,106,.08); border: 1px solid rgba(255,45,106,.28); color: #c02350; }
.cc-serials { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-serials span { padding: 6px 10px; border-radius: 8px; font-size: 11.5px;
  font-family: ui-monospace, Menlo, monospace; border: 1px solid var(--cv-line-hi); }
/*  게이트웨이가 적어 준 이유 — 그대로 보입니다 */
.cc-hub { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cv-line); }
.cc-hub > summary { cursor: pointer; font-size: 11.5px; color: var(--cv-ink-2); }
.cc-hubrow { margin: 9px 0; font-size: 11.5px; line-height: 1.6; }
.cc-hubrow b { display: inline-block; min-width: 150px; }
.cc-hubrow span { color: var(--cv-ink-2); }
.cc-hubrow em { display: block; font-style: normal; color: var(--cv-accent-ink); }
.cc-hubrow.live b { color: #0f9c88; }
.cc-hubrow.off b  { color: var(--cv-ink-2); }
/*  확인 창 — 브라우저 창이 아니라 제품 창 */
.cc-ask { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.6);
  display: grid; place-items: start center; padding: 10vh 16px; }
.cc-ask-in { max-width: 420px; width: 100%; background: var(--cv-surface);
  border: 1px solid var(--cv-line-hi); border-radius: var(--cv-r);
  box-shadow: var(--cv-shadow); padding: 18px; }
.cc-ask-in > b { display: block; font-size: 15px; margin-bottom: 12px; }
.cc-ask-l { display: flex; align-items: baseline; gap: 9px; margin: 0 0 4px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cv-line); }
.cc-ask-l span { font-size: 10.5px; font-weight: 700; color: var(--cv-ink-2); min-width: 30px; }
.cc-ask-l b { font-size: 14px; }
.cc-ask-l em { margin-left: auto; font-style: normal; font-size: 10.5px;
  font-family: ui-monospace, Menlo, monospace; color: var(--cv-ink-2); }
.cc-ask-a { margin: 3px 0; text-align: center; color: var(--cv-ink-2); }
.cc-ask-w { margin: 12px 0 0; padding: 11px 12px; border-radius: 10px; font-size: 11.5px;
  line-height: 1.65; background: rgba(255,45,106,.07);
  border: 1px solid rgba(255,45,106,.26); color: #c02350; }
.cc-ask-f { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.cc-ask-f button { padding: 10px 18px; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; background: transparent;
  border: 1px solid var(--cv-line); color: var(--cv-ink-2); }
.cc-yes { background: var(--cv-accent) !important; border-color: var(--cv-accent) !important;
  color: var(--cv-accent-ink) !important; }
.cc-yes.is-danger { background: #ff2d6a !important; border-color: #ff2d6a !important;
  color: #fff !important; }
@media (max-width: 480px) {
  .cc-ask-f { flex-direction: column-reverse; }
  .cc-ask-f button { width: 100%; }
}

/*  지금 값 — 붙여 두신 센서의 실제 측정. 요약(mock)과 **눈으로 갈라야** 합니다. */
.cc-livegrid { margin-bottom: 14px; }
.cc-livecard { padding: 14px 15px; }
.cc-livecard.tone-live { border-left: 3px solid #1ef0d0; }
.cc-livecard.tone-agg  { border-left: 3px solid #ff9628; }
.cc-livecard.tone-none { border-left: 3px solid var(--cv-line-hi); }
.cc-live-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cc-live-top b { font-size: 15px; }
.cc-live-k { margin-left: auto; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: var(--cv-line); color: var(--cv-ink-2); }
.cc-live-k.live { background: rgba(30,240,208,.16); color: #0f9c88; }
.cc-live-k.agg  { background: rgba(255,150,40,.16); color: #b06a10; }
.cc-live-v { display: flex; gap: 18px; align-items: baseline; }
.cc-live-v b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-live-v em { font-style: normal; font-size: 11px; color: var(--cv-ink-2); margin-left: 4px; }
.cc-live-s { margin: 9px 0 0; font-size: 11px; color: var(--cv-ink-2); }
/*  라이선스 붙여 넣는 칸 */
.cc-form textarea { width: 100%; padding: 10px 12px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--cv-line-hi); border-radius: 10px;
  background: var(--cv-bg, transparent); color: var(--cv-ink); resize: vertical; }
.cc-form textarea:focus { outline: none; border-color: var(--cv-accent); }

/* ══ 「주기」 탭 — 접속·조회 타이밍 (2026-09-03) ═══════════════════════════
   대표님: 「정확히 설정된 타이밍 단위로 접속과 조회가 될 수 있도록 설정 기능을
   올려주세요.」 · 「게이트웨이 쪽과 센서+동글 쪽 같이요」 · 「클라우드 접속 설정 포함요.」
   ⚠ v2.0 `care.css` 와 v1.0 `care-connect.css` **두 곳에 같은 내용**이 들어갑니다.
      3DX 는 판이 둘입니다. 고칠 때 양쪽을 함께 고치십시오. */
.cc-sch-use {
  border: 1px solid var(--cv-line); border-radius: var(--cv-r-s);
  padding: 12px 14px; margin-bottom: 14px; background: var(--cv-surface-2);
}
.cc-sch-use.is-warn { border-color: #b4762a; background: #241a0e; }
.cc-sch-ut { margin: 0 0 8px; font-size: 12px; color: var(--cv-ink-2);
  display: flex; align-items: baseline; gap: 6px; }
.cc-sch-ut b { font-size: 20px; color: var(--cv-ink); font-variant-numeric: tabular-nums;
  margin-left: auto; }
.cc-sch-ut span { font-size: 12px; color: var(--cv-ink-3); }
.cc-sch-bar { height: 5px; border-radius: 999px; background: var(--cv-line); overflow: hidden; }
.cc-sch-bar i { display: block; height: 100%; background: var(--cv-accent); transition: width .3s; }
.cc-sch-use.is-warn .cc-sch-bar i { background: #d99327; }
.cc-sch-us { margin: 7px 0 0; font-size: 11px; color: var(--cv-ink-3); }
.cc-sch-hold { margin: 7px 0 0; font-size: 12px; color: #f0b657; }

.cc-sch-g { border-top: 1px solid var(--cv-line); padding-top: 12px; margin-top: 12px; }
.cc-sch-g:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cc-sch-gt { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--cv-ink);
  display: flex; align-items: center; gap: 8px; }
.cc-sch-gn { margin: 0 0 10px; font-size: 11px; color: var(--cv-ink-3); line-height: 1.5; }
.cc-sch-tg {
  margin-left: auto; font-size: 11px; padding: 3px 10px; border-radius: var(--cv-r-pill);
  border: 1px solid var(--cv-line-hi); background: transparent; color: var(--cv-ink-3);
  cursor: pointer;
}
.cc-sch-tg.is-on { border-color: var(--cv-accent); color: var(--cv-accent-ink);
  background: var(--cv-accent-soft); }

.cc-sch-row {
  display: grid; grid-template-columns: 1fr 92px auto; gap: 6px 10px;
  align-items: center; padding: 7px 0;
}
.cc-sch-n { font-size: 12px; color: var(--cv-ink); }
.cc-sch-n em { font-style: normal; color: var(--cv-ink-3); margin-left: 4px; font-size: 11px; }
.cc-sch-i {
  min-height: var(--cv-tap); padding: 0 10px; text-align: right;
  border: 1px solid var(--cv-line-hi); border-radius: var(--cv-r-s);
  background: var(--cv-bg); color: var(--cv-ink);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.cc-sch-i:focus { outline: 2px solid var(--cv-accent); outline-offset: 1px; }
.cc-sch-b { font-size: 10px; color: var(--cv-ink-3); font-variant-numeric: tabular-nums; }
/*  설명은 한 줄을 통째로 씁니다 — 칸 옆에 붙이면 둘 다 못 읽습니다. */
.cc-sch-w { grid-column: 1 / -1; font-size: 11px; color: var(--cv-ink-3);
  line-height: 1.5; margin-top: -2px; }

.cc-sch-f { display: flex; gap: 8px; margin-top: 16px; }
.cc-sch-f button { min-height: var(--cv-tap); padding: 0 16px; border-radius: var(--cv-r-s);
  border: 1px solid var(--cv-line-hi); background: transparent; color: var(--cv-ink);
  font-size: 13px; cursor: pointer; }
.cc-sch-f .cc-yes { flex: 1; }
.cc-sch-m { margin: 10px 0 0; font-size: 12px; color: var(--cv-accent-ink); line-height: 1.5; }
.cc-sch-note { margin: 14px 0 0; font-size: 11px; color: var(--cv-ink-3); line-height: 1.5; }
.cc-sch-path { margin: 6px 0 0; font-size: 10px; color: var(--cv-ink-3); word-break: break-all; }
.cc-sch-path code { font-size: 10px; }

/* ══ 계정 두 갈래 · 관리자 구역 (2026-09-05 · 대표님 지시) ═══════════════
   「카디안 계정으로 접속 버튼」 + 「권한을 관리자·사용자·보기전용으로 생성」
   ⚠ 두 계정을 **화면에서 갈라 놓습니다.** 한 칸뿐일 때 대표님이 카디안 계정을
     헬릭스 칸에 넣으셨습니다 — 같은 낱말이 두 곳을 가리키면 반드시 헛짚습니다. */
.cc-two { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cc-two { grid-template-columns: 1fr 1fr; } }
.cc-half { min-width: 0; padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,.55); border: 1px solid var(--cv-line); }
.cc-half .cc-form { margin-top: 10px; padding-top: 10px; }
.cc-half .cc-lead { margin-top: 0; }
/*  카디안 쪽은 색으로 갈라 둡니다 — 눌러 놓고 «어디에 넣었더라» 가 안 되게 */
.cc-go.is-kd { background: #2E5C8A; border-color: #2E5C8A; color: #fff; }
.cc-go.is-kd:hover { filter: brightness(1.08); }

.cc-role { display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; font-style: normal;
  background: rgba(20,40,70,.10); color: #1A2C42; }
.cc-role.is-kd { background: rgba(46,92,138,.16); color: #23486B; }

.cc-adm { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cv-line); }
.cc-adm-t { margin: 14px 0 8px; font-size: 12px; font-weight: 800; color: var(--cv-ink); }
.cc-adm-t:first-child { margin-top: 0; }
.cc-otp { display: block; margin-bottom: 8px; }
.cc-otp > span { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 4px; }
.cc-otp input { width: 100%; min-height: 38px; padding: 0 11px; font-size: 13px;
  border-radius: 10px; border: 1px solid var(--cv-line); }

.cc-acct-rows { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.cc-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 9px 10px; border-radius: 10px;
  background: rgba(255,255,255,.6); border: 1px solid var(--cv-line); }
.cc-acct > b { font-size: 12.5px; flex: 1 1 160px; min-width: 0; word-break: break-all; }
.cc-acct .cc-ser { font-size: 11px; color: var(--cv-ink-2); }
.cc-st { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
.cc-st.is-active { background: rgba(15,156,136,.14); color: #0B6155; }
.cc-st.is-disabled { background: rgba(255,45,106,.12); color: #A3204A; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cc-acts select, .cc-acts button {
  min-height: 30px; padding: 0 9px; font-size: 11.5px; font-weight: 700;
  border-radius: 8px; border: 1px solid var(--cv-line);
  background: #fff; color: var(--cv-ink); cursor: pointer; }
.cc-acts button.is-danger { border-color: rgba(255,45,106,.35); color: #A3204A; }
.cc-adm .cc-form label { margin-bottom: 8px; }
.cc-adm .cc-form select { width: 100%; min-height: 42px; padding: 0 10px;
  font-size: 13.5px; border-radius: 10px; border: 1px solid var(--cv-line); background: #fff; }

/* ── 설비 탭 (2026-09-05) ─────────────────────────────────────────────── */
.cc-kv { display: grid; gap: 6px; margin-bottom: 8px; }
.cc-kv > div { display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.6); border: 1px solid var(--cv-line); }
.cc-kv span { flex: 0 0 72px; font-size: 11px; font-weight: 700; color: var(--cv-ink-2); }
.cc-kv b { font-size: 12.5px; word-break: break-all; }
.cc-form select { width: 100%; min-height: 42px; padding: 0 10px; font-size: 13.5px;
  border-radius: 10px; border: 1px solid var(--cv-line); background: #fff; }
.cc-x { width: 100%; min-height: 38px; margin-top: 6px; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; background: #fff;
  border: 1px solid var(--cv-line); color: var(--cv-ink); }
.cc-loc { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.cc-loc-r { padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,.6); border: 1px solid var(--cv-line); }
.cc-loc-r > b { display: block; font-size: 12.5px; margin-bottom: 6px; word-break: break-all; }
.cc-loc-r label { display: block; margin-bottom: 6px; }
.cc-loc-r label > span { display: block; font-size: 11px; font-weight: 700;
  color: var(--cv-ink-2); margin-bottom: 3px; }
.cc-loc-r input { width: 100%; min-height: 36px; padding: 0 10px; font-size: 13px;
  border-radius: 9px; border: 1px solid var(--cv-line); }