/*  제품 안내 창 - 기술지원 접수 1, 제품 소개 8, 설치 안내 4, 릴리즈 노트 1 로 열네 화면이 같이 쓴다.
    접수 index / 제품 소개 brand, brand-product, brand-faq, brand-constraints, brand-performance,
    brand-crosslight, brand-accuracy, brand-pricing / 설치 안내 download, verify, checklist, network.
    갤러리 시안 support-copilot-widget-v1 을 그대로 옮긴 것이다.

    2026-09-01 yjmoon  열세 화면 전부에 걸었다. 종전에는 이 파일을 부르는 곳이 접수 화면 하나뿐이라
      제품 소개와 설치 안내에 맞춰 둔 아래 규칙들이 실제로는 한 번도 걸리지 않았다. 아이콘과 글자를
      같이 쓰던 단추 셋을 하나만 남기면서 걸릴 데가 없어진 규칙도 같이 걷어냈다.
    2026-08-24 yjmoon  색을 채운 단추 셋의 마우스 올림 색을 표준대로 원색 기준으로 바꿨다. 화면에서 받아 쓰던
      올림 색이 화면벌마다 밝아지기도 어두워지기도 해서, 설치 안내 화면에서는 올림과 눌림이 겹쳐 눌러도
      안 보였고(1.08) 나머지 다섯 벌에서는 올리면 밝아지고 누르면 어두워져 방향이 뒤집혔다. 여섯 벌이 이제
      기본에서 올림, 눌림으로 한 방향으로만 어두워진다.

    페이지에서 물려받는 값은 주요색 네 개뿐이다.
      --primary  --primary-h  --primary-bg  --primary-border
    이 네 개는 tokens.css(접수), brand-shared.css(제품 소개), install.css(설치 안내) 가 모두 들고 있어
    같은 창이 붙은 페이지의 색으로 나온다. 나머지 값은 아래 .cp-root 블록이 --cp- 이름으로 직접 들고 있다.
    페이지마다 이름이 다르거나 아예 없는 값(--surface2 vs --surface-2 등)을 참조하면 그 페이지에서만 모양이
    무너지기 때문이다. var(이름, 기본값) 형태의 대비값은 우리 규칙상 쓰지 않는다.

    아래 두 블록이 이 파일의 색 정의 자리다. 정의 자리 말고 다른 규칙에서는 값을 직접 적지 않고 이름만 쓴다.
    밝은 벌과 어두운 벌 둘만 둔다. 제품 소개 화면색은 넷이지만 light 와 pastel 은 밝은 벌,
    dark 와 dark-dim 은 어두운 벌을 쓴다. 접수 화면은 화면색이 하나뿐이라 밝은 벌만 탄다.  */

.cp-root {
  --cp-surface:#ffffff; --cp-surface2:#f1f3f9;
  --cp-border:#e2e5ed; --cp-border-h:#cfd3de;
  /*  2026-08-24 yjmoon  옅은 글자색을 #9aa0b0 에서 한 단계 진하게. 표준(#249)은 옅은 글자도 3 이상을 요구하는데
      창 아래 설명문은 흰 바탕에서 2.615, 입력칸 안내 글자는 흰 바탕이 아니라 입력칸 바탕(--cp-surface2) 위에
      앉아 2.357 이었다. 바탕이 둘이라 흰 바탕만 보고 고르면 입력칸에서 여전히 모자란다.
      바꾼 값은 흰 바탕 3.401, 입력칸 바탕 3.065 로 둘 다 넘긴다. 색상(223.6도 -> 224.4도)과 채도(0.122 -> 0.123)는
      그대로 두고 밝기만 낮춘 값이고, 두 바탕 모두 넘기는 가장 밝은 단계다 - 더 어둡게 가면 이미 자리 잡은
      글자 위계(--cp-muted 와의 차이)를 건드리게 된다. 어두운 벌 #6b7080 은 3.71, 3.46 으로 이미 넘겨 손대지 않았다.  */
  --cp-text:#1e1e2e; --cp-text-h:#0b0a14; --cp-muted:#646b7d; --cp-subtle:#848b9f;
  --cp-on-accent:#ffffff;
  --cp-green:#16a34a; --cp-green-bg:rgba(22,163,74,.08);
  --cp-orange:#d97706; --cp-orange-bg:rgba(217,119,6,.08);
  --cp-red:#dc2626;
  /* 마크 분광 3선 - 브랜드 고정 3색(제품 표준). 화면색과 무관하게 이 세 개만 쓴다 */
  --cp-mk-purple:#7c3aed; --cp-mk-green:#16a34a; --cp-mk-orange:#d97706;
  --cp-r-sm:4px; --cp-r-md:8px; --cp-r-lg:12px; --cp-r-pill:9999px;
  --cp-sp-2xs:4px; --cp-sp-xs:6px; --cp-sp-sm:8px; --cp-sp-25:10px; --cp-sp-md:12px;
  --cp-sp-35:14px; --cp-sp-4:16px;
  /*  2026-08-27 yjmoon  본문을 13px 에서 14px 로 올렸다. 디자인 표준 #249 의 글자 눈금은
      10/11/12/14/15/16/18/20/24 열 단이고 13 은 없다. 표준 문서 자체가 "기본 13 에서 14 로
      올림(가독성 한 단)" 이라고 적어 13 을 걷어낸 이력을 밝히고 있는데, 이 창은 그 걷어낸 값을
      방문자가 읽는 답변 본문에 쓰고 있었다.  */
  --cp-fs-2xs:10px; --cp-fs-xs:11px; --cp-fs-sm:12px; --cp-fs-md:14px; --cp-fs-h:18px;
  --cp-fw-medium:500; --cp-fw-semibold:600; --cp-fw-bold:700;
  --cp-shadow-md:0 4px 16px rgba(15,18,40,.07);
  --cp-shadow-lg:0 12px 36px rgba(15,18,40,.10);
  /*  2026-09-02 yjmoon  뜬 창 전용. 흰 창이 흰 바탕에 얹히면 면끼리 대비가 1.00 이고 테두리가 1.26 이라
      창이 화면에 파묻혀 보였다(접수 화면에서 실제로 재 본 값). 널찍한 그림자 하나만으로는 12px 넘게
      번져 가장자리가 안 잡힌다. 가까운 층을 하나 더해 테두리를 세우고, 넓은 층은 짙기만 한 단계 올린다.
      색을 새로 만들거나 띠를 두르지 않는다. 쓰는 색은 위 널찍한 그림자와 같은 색이다.  */
  --cp-shadow-float:0 2px 6px rgba(15,18,40,.10), 0 16px 44px rgba(15,18,40,.18);
  --cp-ease:cubic-bezier(.4,0,.2,1); --cp-dur:.15s; --cp-dur-2:.22s;
  /* 오른쪽 아래에서 띄우는 거리. 한 자리에서 고칠 수 있게 이름으로 둔다 */
  --cp-edge-x:24px; --cp-edge-y:24px;
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif;
}
/*  어두운 벌. 같은 파일에서는 뒤에 쓴 것이 이기므로 반드시 밝은 벌 뒤에 둔다  */
[data-theme="dark"] .cp-root {
  --cp-surface:#14141d; --cp-surface2:#1b1b26;
  --cp-border:#2a2a37; --cp-border-h:#3b3b4a;
  --cp-text:#e7e8f0; --cp-text-h:#ffffff; --cp-muted:#9a9fb0; --cp-subtle:#6b7080;
  --cp-green:#22c55e; --cp-green-bg:rgba(34,197,94,.12);
  --cp-orange:#f59e0b; --cp-orange-bg:rgba(245,158,11,.12);
  --cp-red:#f87171;
  --cp-mk-purple:#a855f7; --cp-mk-green:#22c55e; --cp-mk-orange:#f59e0b;
  --cp-shadow-md:0 4px 16px rgba(0,0,0,.45);
  --cp-shadow-lg:0 12px 36px rgba(0,0,0,.55);
  --cp-shadow-float:0 2px 6px rgba(0,0,0,.5), 0 16px 44px rgba(0,0,0,.62);
}
/*  어둑한 벌. 어두운 벌과 한 벌로 묶어 두었더니 이 창의 초록과 주황만 이 사이트 다른 곳과 달랐다
    (창 #22c55e/#f59e0b, 페이지 #4ade80/#fbbf24). brand-shared.css 의 어둑한 벌 값을 그대로 따른다.
    2026-08-27 yjmoon  */
[data-theme="dark-dim"] .cp-root {
  --cp-surface:#14141d; --cp-surface2:#1b1b26;
  --cp-border:#2a2a37; --cp-border-h:#3b3b4a;
  --cp-text:#e7e8f0; --cp-text-h:#ffffff; --cp-muted:#9a9fb0; --cp-subtle:#6b7080;
  --cp-green:#4ade80; --cp-green-bg:rgba(74,222,128,.10);
  --cp-orange:#fbbf24; --cp-orange-bg:rgba(251,191,36,.10);
  --cp-red:#f87171;
  --cp-mk-purple:#a855f7; --cp-mk-green:#4ade80; --cp-mk-orange:#fbbf24;
  --cp-shadow-md:0 4px 16px rgba(0,0,0,.45);
  --cp-shadow-lg:0 12px 36px rgba(0,0,0,.55);
  --cp-shadow-float:0 2px 6px rgba(0,0,0,.5), 0 16px 44px rgba(0,0,0,.62);
}

/*  창을 담는 자리. 크기가 없는 껍데기지만 자리와 층을 여기서 정한다.
    제품 소개 화면은 body 바로 밑 요소를 전부 한 층(층 1)으로 눌러 두어서(brand.html 118줄),
    껍데기에 층을 안 주면 그 화면의 위쪽 메뉴 띠가 창 윗머리를 덮는다.
    단추와 창은 이 껍데기 안에 들어 있다. 그래서 바깥 화면과 견주는 층은 여기 적은 하나뿐이고,
    안쪽에 적어 둔 층(단추 95, 창 100)은 껍데기 안에서 둘의 앞뒤만 정한다.
    2026-09-01 yjmoon  200 이었던 것을 150 으로 내렸다. 화면이 스스로 띄우는 가리는 창(모달)이
      전부 200 인데, 같은 층이면 그리는 차례는 문서에 나중에 온 것이 이긴다. 이 껍데기는 스크립트가
      body 끝에 붙이므로 화면에 처음부터 박혀 있는 가리는 창보다 늘 나중이다.
      설치 안내 화면의 다운로드 정보 입력 창(download.html 694줄)이 그랬다 - 그 창은 처음부터
      박혀 있고 hidden 만 껐다 켰다 하는 것이라 자리가 안 바뀌는데, 층을 90 에서 200 으로 올려도
      같은 층 동률이 되어 도우미가 그 위에 그려졌다. 정보를 받기 전에 도우미가 눌린다.
      접수 화면의 팝업 둘(index.html 631줄, 1049줄)이 멀쩡했던 것은 그것들은 열 때 만들어져
      나중에 오기 때문이다. 차례에 기대는 규칙이라 어떤 화면에서는 맞고 어떤 화면에서는 조용히 틀린다.
      층으로 못박는다 - 화면 가구(설치 안내 머리띠 50, 릴리즈 노트 맨 위로 20, 접수 머리띠 30)
      보다는 위, 화면이 띄우는 가리는 창(200)보다는 아래.
      제품 소개 화면은 아래 nav.bbtn 줄이 따로 1001 로 올리므로 이 값에 안 걸린다.  */
.cp-root { position:fixed; right:0; bottom:0; width:0; height:0; z-index:150; }
/*  2026-08-24 yjmoon  제품 소개 화면에서 창 윗머리(제목, 처음부터 다시, 닫기)가 눌리지 않던 것 수정.
    그 화면은 brand-shared.js 가 페이지마다 제각각인 머리띠를 감추고 자기 띠(층 1000)를 body 맨 앞에 끼워 넣는다
    (brand-shared.js 195줄, 257줄, 286줄). 이 띠는 화면 맨 위에 56px 높이로 붙박이다.
    창은 껍데기 층이 200 이라 이 띠보다 아래여서, 창 위끝이 56px 보다 위로 오면 그 구간이 통째로 덮인다.
    덮인 자리를 누르면 창의 닫기가 아니라 띠의 차림표 단추와 문의하기 링크가 대신 눌린다.
    폰에는 나가는 키가 없어 닫기가 유일한 출구인데 그 닫기가 안 먹는다.
    창 위끝이 띠 안으로 들어가는 때가 둘이다.
      창 폭 600px 이하 - 아래 좁은 창 규칙이 창을 위끝 16px 에 붙인다. 닫기 한가운데가 44px 자리라 늘 덮인다.
      창 높이 650px 안팎 아래 - 넓은 화면이라도 창이 아래에서 위로 자라 위끝이 24px 까지 올라온다.
    창을 띠 아래로 내리는 방법은 폭이 좁을 때만 듣고 높이가 낮을 때는 못 잡으며, 좁은 화면에서 창 높이만 더 깎는다.
    그래서 층을 띠 위로 올린다. 사용자가 스스로 연 창이라 그동안 띠를 가리는 것이 맞고,
    창을 닫으면 남는 것은 오른쪽 아래 단추뿐이라 띠와 겹치지 않는다.
    1001 은 띠 바로 한 칸 위다. 건너뛰기 링크(층 9999)는 그대로 위에 남아 키보드로 다니는 길이 살아 있다.
    나머지 여섯 화면에는 이 띠가 없어 이 줄이 아예 걸리지 않는다. 접수 화면은 첨부 미리보기와 공지 팝업이,
    설치 안내 화면은 다운로드 정보 입력 창이 층 200 이라 창까지 올리면 그것들을 도우미가 덮는다
    (index.html 184줄, 212줄, download.html 34줄). 릴리즈 노트는 가장 높은 것이 층 20 이다.
    띠를 가리키는 이름은 층 1000 을 들고 있는 그 이름을 그대로 썼다. 이름이 바뀌면 층도 같이 바뀌므로 한자리에서 드러난다.  */
nav.bbtn ~ .cp-root { z-index:1001; }
.cp-root, .cp-root * { box-sizing:border-box; }
.cp-root [hidden] { display:none; }

/*  ── 닫힌 모습 - 오른쪽 아래 동그란 단추 ──
    2026-09-01 yjmoon  옆에 붙어 있던 글자를 빼고 아이콘만 남기면서 넓이가 어느 창에서나 44px 로 같아졌다.
      표준 #249 가 아이콘과 글자를 같이 쓰지 못하게 한다. 글자에만 쓰이던 값(글꼴, 글자 크기와 굵기,
      줄 높이, 아이콘과 글자 사이 틈)은 이제 걸릴 데가 없어 같이 걷어냈다. 이름은 aria-label 이 준다.
      좁은 창에서만 동그랗게 만들던 규칙도 아래 좁은 창 묶음에서 같이 걷어냈다(늘 동그라미라 쓸 데가 없다).  */
.cp-launcher {
  position:fixed; right:var(--cp-edge-x); bottom:var(--cp-edge-y); z-index:95;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:var(--primary); color:var(--cp-on-accent); border:none; border-radius:var(--cp-r-pill);
  box-shadow:var(--cp-shadow-float);
  cursor:pointer;
  transition:background var(--cp-dur) var(--cp-ease);
}
/*   2026-08-24 yjmoon  마우스를 올렸을 때 단추가 위로 떠오르던 것을 걷어내고 색만 바뀌게 했다.
     표준 문서 #249 가 "scale/translate 둥실 금지" 로 못 박았고, 같은 문서 v3.5.82 에서 단추를
     고칠 때도 "transition 에서 transform 제외(들썩임 원천 차단)" 로 정리한 자리다.
     바로 위 transition 목록에서도 같은 이유로 transform 을 뺐다. 위아래로 뜨는 움직임만 걷어낸 것이고,
     창이 뜰 때 올라오는 등장 동작(cp-rise)과 예시 질문 화살표가 옆으로 밀리는 것은 그대로 둔다.
     그 둘은 들썩임이 아니라 등장과 방향을 알리는 움직임이다. */
.cp-launcher:hover { background:color-mix(in srgb, var(--primary) 88%, black); }
/*  2026-08-24 yjmoon  눌린 모습. 여섯 가지 모습(기본, 마우스 올림, 키보드 초점, 눌림, 못 누름, 기다림) 가운데
    눌림만 빠져 있었다. 표준(#249)이 정한 문법대로 색 한 단계로만 준다.
    자리를 옮겨 눌린 느낌을 내는 방식은 화면이 들썩여서 표준이 걷어낸 방식이라 쓰지 않는다.
      색을 채운 것 - 원색에 검정을 섞어 한 단계 어둡게(표준이 정한 80%). 화면마다 주요색이 달라도 늘 한 단계 어두워진다.
        이 사이트가 들고 있는 올림 색(--primary-h)은 화면벌마다 밝아지기도 어두워지기도 한다. 그래서 올림도
        눌림도 그 값을 안 쓰고 표준(#249)이 정한 대로 원색에서 직접 뽑는다. 올림 88%, 눌림 80%.
        설치 안내 화면은 받아 쓰던 올림 색이 원색보다 어두워서, 눌림과 겹쳐 눌러도 안 보였다(1.08).
        나머지 다섯 벌은 올리면 밝아지고 누르면 어두워져 방향이 한 번 뒤집혔다. 원색 기준으로 바꾸니
        여섯 벌 전부 한 방향으로만 어두워진다. --primary-h 는 이제 키보드 초점 테두리에만 쓴다(그 쓰임도 표준이 정한 것).
      면이 있는 것 - 면과 테두리를 한 단계 진하게.
    같은 굵기면 뒤에 쓴 것이 이기므로 반드시 마우스 올림 규칙 뒤에 둔다.  */
.cp-launcher:active { background:color-mix(in srgb, var(--primary) 80%, black); }
.cp-launcher:focus-visible { outline:2px solid var(--primary-h); outline-offset:2px; }
.cp-launcher .cp-launcher-ic { display:inline-flex; width:20px; height:20px; flex:none; }
.cp-launcher .cp-launcher-ic svg { width:20px; height:20px; }

/* ── 열린 모습 ── */
.cp-panel {
  position:fixed; right:var(--cp-edge-x); bottom:var(--cp-edge-y); z-index:100;
  display:flex; flex-direction:column;
  width:380px; max-width:calc(100vw - 32px);
  height:600px; max-height:calc(100vh - 48px);
  background:var(--cp-surface); color:var(--cp-text);
  border:1px solid var(--cp-border); border-radius:var(--cp-r-lg);
  box-shadow:var(--cp-shadow-float); overflow:hidden;
  font-size:var(--cp-fs-md); line-height:1.6;
  animation:cp-rise var(--cp-dur-2) var(--cp-ease) both;
}
@keyframes cp-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.cp-head { display:flex; align-items:center; gap:var(--cp-sp-25); flex:none;
  padding:var(--cp-sp-md) var(--cp-sp-4); border-bottom:1px solid var(--cp-border); }
.cp-mark { width:26px; height:26px; flex:none; display:inline-flex; }
.cp-mark svg { width:26px; height:26px; }
.cp-tt { min-width:0; }
.cp-tt .cp-name { display:block; font-size:var(--cp-fs-md); font-weight:var(--cp-fw-bold);
  color:var(--cp-text-h); line-height:1.3; }
.cp-tt .cp-sub { display:block; font-size:var(--cp-fs-xs); color:var(--cp-muted); line-height:1.35; }
.cp-acts { margin-left:auto; display:flex; gap:var(--cp-sp-2xs); }
.cp-icobtn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  padding:0; background:transparent; border:none; border-radius:var(--cp-r-sm);
  color:var(--cp-muted); cursor:pointer;
  transition:background var(--cp-dur) var(--cp-ease), color var(--cp-dur) var(--cp-ease); }
.cp-icobtn:hover { background:var(--cp-surface2); color:var(--cp-text-h); }
.cp-icobtn:active { background:var(--cp-border); }
.cp-icobtn:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.cp-icobtn svg { width:15px; height:15px; }

.cp-body { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:var(--cp-sp-4); display:flex; flex-direction:column; gap:var(--cp-sp-35);
  overflow-wrap:break-word; word-break:keep-all; }

.cp-foot { flex:none; padding:var(--cp-sp-md) var(--cp-sp-4) var(--cp-sp-35);
  border-top:1px solid var(--cp-border); background:var(--cp-surface); }
/*   2026-09-01 yjmoon  줄 방향을 안 적어 두었다가 창을 얹은 화면의 form 규칙(세로 쌓기)이
     그대로 들어와, 물음 칸과 보내기 단추가 세로로 쌓이고 단추가 칸 밖으로 15px 흘러나와
     바로 아래 안내 줄을 7px 덮고 있었다. 이 창은 어느 화면에나 얹히므로 얹히는 쪽 기본값에
     기대면 안 된다. 우리가 쓰는 값을 그 자리에 적어 둔다. */
/*  2026-09-02 yjmoon  물음 칸이 한 줄에서 여러 줄로 바뀌었다(시프트+엔터 줄바꿈). 높이를 못으로 박아 두면
    글이 늘어도 줄이 안 커져 글자가 잘리므로, 가장 작은 높이만 정하고 글만큼 자라게 둔다.
    보내기 단추는 아래쪽에 붙인다. 한 줄일 때는 5px 위아래 여백에 28px 이 들어가 38px 그대로다. */
.cp-ask { display:flex; flex-direction:row; align-items:flex-end; gap:var(--cp-sp-sm); min-height:38px;
  padding:5px var(--cp-sp-2xs) 5px var(--cp-sp-md);
  background:var(--cp-surface2); border:1px solid var(--cp-border); border-radius:var(--cp-r-md);
  transition:border-color var(--cp-dur) var(--cp-ease); }
.cp-ask:focus-within { border-color:var(--primary-border); }
/*  min-height 과 height 를 우리가 적어 두는 까닭 - 접수 화면이 모든 textarea 에 min-height 70px 을 걸어 두어
    (index.html 97줄) 그 값이 이 칸에 새어 들어와, 한 줄만 쓰는 칸이 처음부터 70px 로 벌어져 있었다.
    이 파일 위쪽에 적어 둔 그대로 얹히는 쪽 기본값에 기대지 않고 우리 값을 그 자리에 적는다.
    28px = 한 줄 20px + 위아래 4px. 글이 늘면 growInput 이 인라인으로 덮어써 그만큼 자란다.  */
.cp-ask textarea { flex:1; min-width:0; display:block; box-sizing:border-box; min-height:0; height:28px;
  padding:4px 0; margin:0; resize:none; overflow-y:auto;
  background:transparent; border:none; outline:none; color:var(--cp-text-h);
  font:inherit; font-size:var(--cp-fs-md); line-height:20px; max-height:124px; }
.cp-ask textarea::placeholder { color:var(--cp-subtle); }
.cp-send { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none;
  padding:0; background:var(--primary); color:var(--cp-on-accent); border:none; border-radius:var(--cp-r-sm);
  cursor:pointer; transition:background var(--cp-dur) var(--cp-ease); }
/*  2026-08-24 yjmoon  못 누르는 동안에는 마우스를 올려도 색이 바뀌지 않게 했다. 보내기는 답을 찾는 동안
    못 누르게 막히는데(copilot.js 370줄), 막힌 채로도 마우스만 올리면 색이 바뀌어 누를 수 있는 것처럼 보였다.
    옅게 흐려 두는 것(바로 아래 줄)만으로는 그 오해가 안 풀린다.
    누름에도 같은 조건을 붙였다. 마우스를 올린 채 누르는 것이 보통인데 올림에만 조건을 붙이면 올림 규칙이
    누름 규칙보다 굵어져 눌린 모습이 아예 안 뜨게 된다. 둘을 같은 굵기로 맞추고 누름을 뒤에 두어 눌림이 이긴다.  */
.cp-send:hover:not(:disabled) { background:color-mix(in srgb, var(--primary) 88%, black); }
.cp-send:active:not(:disabled) { background:color-mix(in srgb, var(--primary) 80%, black); }
.cp-send:focus-visible { outline:2px solid var(--primary-h); outline-offset:2px; }
/*  못 누르는 단추는 커서로도 알려 준다(디자인 표준 #249 s-cursor).  2026-08-27 yjmoon  */
.cp-send[disabled] { opacity:.5; cursor:not-allowed; }
.cp-send svg { width:14px; height:14px; }
.cp-foot-hint { margin:var(--cp-sp-sm) 0 0; font-size:var(--cp-fs-2xs); color:var(--cp-subtle); text-align:center; }

/* ── 처음 연 모습 - 인사말과 예시 질문 ── */
.cp-greet .cp-g1 { margin:0 0 var(--cp-sp-xs); font-size:var(--cp-fs-h); font-weight:var(--cp-fw-bold);
  color:var(--cp-text-h); letter-spacing:-.2px; line-height:1.35; }
.cp-greet .cp-g2 { margin:0; font-size:var(--cp-fs-md); color:var(--cp-muted); line-height:1.6; }
.cp-samp-lbl { font-size:var(--cp-fs-xs); font-weight:var(--cp-fw-semibold); letter-spacing:.4px; color:var(--cp-muted); }
.cp-samps { display:flex; flex-direction:column; gap:var(--cp-sp-sm); }
.cp-samp { display:flex; align-items:center; gap:var(--cp-sp-sm); width:100%; text-align:left;
  padding:var(--cp-sp-25) var(--cp-sp-md);
  background:var(--cp-surface); border:1px solid var(--cp-border); border-radius:var(--cp-r-md);
  font:inherit; font-size:var(--cp-fs-md); color:var(--cp-text); line-height:1.5; cursor:pointer;
  transition:border-color var(--cp-dur) var(--cp-ease), background var(--cp-dur) var(--cp-ease), color var(--cp-dur) var(--cp-ease); }
.cp-samp .cp-arw { margin-left:auto; flex:none; color:var(--cp-subtle); display:inline-flex;
  transition:transform var(--cp-dur-2) var(--cp-ease), color var(--cp-dur) var(--cp-ease); }
.cp-samp .cp-arw svg { width:13px; height:13px; display:block; }
.cp-samp:hover { border-color:var(--primary-border); background:var(--primary-bg); color:var(--cp-text-h); }
.cp-samp:hover .cp-arw { transform:translateX(3px); color:var(--primary); }
.cp-samp:active { background:var(--primary-bg); border-color:var(--primary); }
.cp-samp:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }

/* ── 주고받은 말 ── */
.cp-me { align-self:flex-end; max-width:84%; padding:var(--cp-sp-sm) var(--cp-sp-md);
  background:var(--primary); color:var(--cp-on-accent);
  border-radius:var(--cp-r-lg); border-bottom-right-radius:var(--cp-r-sm);
  font-size:var(--cp-fs-md); line-height:1.5; }
.cp-ans { font-size:var(--cp-fs-md); line-height:1.7; color:var(--cp-text); }
.cp-ans p { margin:0 0 var(--cp-sp-sm); }
.cp-ans p:last-child { margin-bottom:0; }

/* 답을 찾는 동안 */
.cp-wait { display:flex; align-items:center; gap:var(--cp-sp-sm);
  font-size:var(--cp-fs-sm); color:var(--cp-muted); }
.cp-wait i { display:inline-block; width:6px; height:6px; flex:none; border-radius:var(--cp-r-pill);
  background:var(--primary); animation:cp-blink 1.1s var(--cp-ease) infinite; }
.cp-wait i:nth-child(2) { animation-delay:.18s; }
.cp-wait i:nth-child(3) { animation-delay:.36s; }
@keyframes cp-blink { 0%,100% { opacity:.25; } 50% { opacity:1; } }

/*  2026-09-02 yjmoon  한 답 안의 덩이들(답 본문, 근거, 더 보기, 만족 물음) 사이에 간격이 아예 없었다.
    실제로 재 보니 줄 위 0px, 줄 아래 12px 이라 줄이 앞 글자에 달라붙었다가 넘으면 벌어지는 모습이
    좁은 창(331px)에서 세 번 되풀이됐다. 대화 답이 아니라 테이블처럼 보이던 까닭이다.
    바깥(.cp-body)은 이미 gap 으로 턴 사이를 띄우는데 턴 안쪽만 그 개념이 없었다. 같은 방식으로 맞춘다. */
.cp-turn { display:flex; flex-direction:column; gap:var(--cp-sp-4); }

/* ── 이 답의 근거 ── */
/*  줄은 근거에만 남긴다. 더 보기와 만족 물음은 이어지는 제안이라 자료와 위계가 달라, 줄까지 그으면
    좁은 창에 가로줄이 셋이나 쌓인다. 위아래를 같은 눈금(16px)으로 두어 줄이 가운데 서게 한다. */
.cp-srcs { border-top:1px solid var(--cp-border); padding-top:var(--cp-sp-4); }
.cp-srcs .cp-lbl { display:block; font-size:var(--cp-fs-xs); font-weight:var(--cp-fw-semibold);
  color:var(--cp-muted); margin-bottom:var(--cp-sp-sm); }
.cp-src { display:flex; align-items:center; gap:var(--cp-sp-sm);
  padding:var(--cp-sp-xs) var(--cp-sp-sm); margin:0 calc(var(--cp-sp-sm) * -1);
  border-radius:var(--cp-r-sm); color:var(--cp-text); text-decoration:none;
  transition:background var(--cp-dur) var(--cp-ease); }
/*  2026-09-02 yjmoon  누를 수 없는 근거(제품 안 가이드). 걸어 줄 주소가 없어 글자로만 그린다.
    마우스를 올려도 아무 일이 없게 해서 누를 수 있다고 오해하지 않게 한다.
    글자를 흐리게 죽이지는 않는다 - 답의 근거라 읽혀야 하는 글이다.  */
.cp-src--plain { cursor:default; }
.cp-src:hover:not(.cp-src--plain) { background:var(--cp-surface2); }
.cp-src:active:not(.cp-src--plain) { background:var(--cp-border); }
.cp-src:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.cp-src svg { width:13px; height:13px; flex:none; color:var(--primary); }
.cp-src .cp-tx { min-width:0; font-size:var(--cp-fs-sm); line-height:1.5; }
.cp-src .cp-tx .cp-d { color:var(--cp-muted); }
.cp-src .cp-tx .cp-h { color:var(--cp-text-h); font-weight:var(--cp-fw-medium); }

/* ── 관련 정보 더 보기 - 로그인 없이 바로 열리는 공개 문서만 건다 ── */
.cp-more { }
.cp-more .cp-lbl { display:block; font-size:var(--cp-fs-xs); font-weight:var(--cp-fw-semibold);
  color:var(--cp-muted); margin-bottom:var(--cp-sp-sm); }
.cp-chips { display:flex; flex-wrap:wrap; gap:var(--cp-sp-sm); }
.cp-chip { display:inline-flex; align-items:center; gap:var(--cp-sp-xs);
  padding:var(--cp-sp-2xs) var(--cp-sp-25);
  background:var(--cp-surface); border:1px solid var(--cp-border); border-radius:var(--cp-r-pill);
  font-size:var(--cp-fs-sm); font-weight:var(--cp-fw-medium); color:var(--cp-text); text-decoration:none;
  transition:border-color var(--cp-dur) var(--cp-ease), background var(--cp-dur) var(--cp-ease), color var(--cp-dur) var(--cp-ease); }
.cp-chip svg { width:11px; height:11px; flex:none; color:var(--cp-subtle); }
.cp-chip:hover { border-color:var(--primary-border); background:var(--primary-bg); color:var(--cp-text-h); }
.cp-chip:hover svg { color:var(--primary); }
.cp-chip:active { border-color:var(--primary); }
.cp-chip:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }

/* ── 도움됨, 아쉬움 ── */
.cp-fb { display:flex; align-items:center; gap:var(--cp-sp-sm); flex-wrap:wrap; }
/*  2026-09-02 yjmoon  같은 자리의 다른 두 머리말(이 답의 근거, 관련 정보 더 보기)은 11px 굵게인데
    이것만 12px 보통이었다. 위계가 같으니 눈금도 같아야 한다. */
.cp-fb .cp-q { font-size:var(--cp-fs-xs); font-weight:var(--cp-fw-semibold);
  color:var(--cp-muted); margin-right:auto; }
/*  2026-09-01 yjmoon  엄지 그림을 빼고 글자만 남겼다.
    2026-09-02 yjmoon  다시 넣었다. 이 사이트의 처리 만족도 단추(lookup.html 537줄)가 엄지와 글자를
      같이 쓰고 있어 같은 것을 묻는 자리인데 모양이 갈려 있었다. 그림 크기와 사이 틈도 그 화면과 같이 둔다.  */
.cp-fbtn { display:inline-flex; align-items:center; gap:var(--cp-sp-2xs); height:28px; padding:0 var(--cp-sp-25);
  background:var(--cp-surface); border:1px solid var(--cp-border); border-radius:var(--cp-r-sm);
  font:inherit; font-size:var(--cp-fs-sm); font-weight:var(--cp-fw-medium); color:var(--cp-muted); cursor:pointer;
  transition:color var(--cp-dur) var(--cp-ease), border-color var(--cp-dur) var(--cp-ease), background var(--cp-dur) var(--cp-ease); }
/*  2026-08-24 yjmoon  못 누르는 단추에는 마우스를 올려도 아무 일이 없게 했다. 아쉬움을 누르면 도움됨도
    같이 막히는데(copilot.js 503줄) 막힌 도움됨에 마우스를 올리면 색이 바뀌어 누를 수 있는 것처럼 보였다.  */
.cp-fbtn svg { width:14px; height:14px; flex:none; }
.cp-fbtn:hover:not(:disabled) { color:var(--cp-text-h); border-color:var(--cp-border-h); }
.cp-fbtn:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
/*  2026-09-02 yjmoon  고른 쪽은 안 흐리게 뺐다. 의견을 남기면 두 단추가 같이 막히는데(copilot.js 775줄)
    막힘이 옅게 흐리는 것까지 걸어, 바로 아래에서 또렷하게 맞춰 둔 대비가 반으로 깎여 있었다.
    브라우저가 칠한 색으로 다시 재니 밝은 화면 2.35, 어두운 화면 3.59 로 아래 적힌 5.65, 7.77 과 딴판이었다.
    안 고른 쪽만 흐려지는 것이 원래 뜻이기도 하다. 고른 쪽은 남는 표시라 또렷해야 한다.
    못 누른다는 손짓은 둘 다 그대로 둔다.  */
.cp-fbtn[disabled] { cursor:not-allowed; }
.cp-fbtn[disabled]:not(.cp-on) { opacity:.5; }
/*  2026-08-24 yjmoon  마우스 올림과 의견을 남긴 뒤를 따로 뒀다. 한 줄에 묶여 있었는데 뜻이 다르다.
    올림은 손을 떼면 사라지는 힌트고, 남긴 뒤는 계속 남아 무엇을 골랐는지 알려 주는 표시라 더 또렷해야 한다.
    묶여 있던 옛 값은 글자를 원색 그대로 두고 칠만 옅게 깔아 밝은 화면에서 도움됨 3.02, 아쉬움 2.92 였다.
    표준(#249)이 본문 글자에 요구하는 4.5 에 둘 다 못 미치고 아쉬움은 보조 기준 3 도 못 넘겼다.
    그래서 두 자리 모두 글자와 테두리를 그 화면 글자색 쪽으로 옮겨 올린다. 칠만 짙게 하면 글자가 묻혀 오히려 떨어진다.
      마우스 올림 - 칠은 옅은 그대로 두고 글자와 테두리만 옮긴다. 밝은 화면 5.31, 5.17 (어두운 화면 8.40, 8.81).
      남긴 뒤 - 칠을 눈에 띄게 채우고 글자를 한 단계 더 옮긴다. 밝은 화면 5.65, 5.57 (어두운 화면 7.77, 7.97).
        올림보다 칠이 진하고 글자도 진해서, 지나가는 힌트와 남은 표시가 눈으로 갈린다.
    섞는 대상이 그 화면의 면색과 글자색이라 한 벌만 써도 밝은 화면과 어두운 화면이 같이 맞는다.
    적어 둔 숫자는 브라우저가 실제로 칠한 색을 되읽어 잰 값이다. 색 섞기를 브라우저가 하므로 손으로 계산한 값과
    소수 둘째 자리가 갈릴 수 있어, 다시 잴 때도 화면에 칠해진 색으로 재야 같은 숫자가 나온다.
    올림에는 "못 누를 때는 빼고" 를 달고 남긴 뒤에는 안 단다. 의견을 남기면 그 단추도 같이 막히므로
    남긴 뒤 줄만 남고 올림 줄은 걸리지 않는다.  */
.cp-fbtn.cp-up:hover:not(:disabled) {
  background:var(--cp-green-bg);
  border-color:color-mix(in srgb, var(--cp-green) 70%, var(--cp-text-h));
  color:color-mix(in srgb, var(--cp-green) 70%, var(--cp-text-h)); }
.cp-fbtn.cp-down:hover:not(:disabled) {
  background:var(--cp-orange-bg);
  border-color:color-mix(in srgb, var(--cp-orange) 70%, var(--cp-text-h));
  color:color-mix(in srgb, var(--cp-orange) 70%, var(--cp-text-h)); }
.cp-fbtn.cp-up.cp-on {
  background:color-mix(in srgb, var(--cp-green) 20%, var(--cp-surface));
  border-color:color-mix(in srgb, var(--cp-green) 60%, var(--cp-text-h));
  color:color-mix(in srgb, var(--cp-green) 60%, var(--cp-text-h)); }
.cp-fbtn.cp-down.cp-on {
  background:color-mix(in srgb, var(--cp-orange) 20%, var(--cp-surface));
  border-color:color-mix(in srgb, var(--cp-orange) 60%, var(--cp-text-h));
  color:color-mix(in srgb, var(--cp-orange) 60%, var(--cp-text-h)); }
/*  눌림. 칠을 올림보다 한 단계 더 채우고 글자는 올림과 같이 둔다. 밝은 화면 4.88, 4.81.
    2026-08-24 yjmoon  위 올림 두 줄에 "못 누를 때는 빼고" 가 붙어 이 줄과 굵기가 같아졌다.
    같은 굵기면 뒤에 쓴 것이 이기므로 이 줄이 반드시 올림 뒤에 있어야 한다. 순서를 바꾸면 마우스를 올린 채
    누를 때 눌린 모습이 조용히 사라진다.
    의견을 남긴 뒤에는 더 누를 수 없으므로 그때는 눌린 모습이 뜨지 않게 빼 뒀다.  */
.cp-fbtn.cp-up:active:not(:disabled) {
  background:color-mix(in srgb, var(--cp-green) 15%, var(--cp-surface));
  border-color:color-mix(in srgb, var(--cp-green) 70%, var(--cp-text-h));
  color:color-mix(in srgb, var(--cp-green) 70%, var(--cp-text-h)); }
.cp-fbtn.cp-down:active:not(:disabled) {
  background:color-mix(in srgb, var(--cp-orange) 15%, var(--cp-surface));
  border-color:color-mix(in srgb, var(--cp-orange) 70%, var(--cp-text-h));
  color:color-mix(in srgb, var(--cp-orange) 70%, var(--cp-text-h)); }
.cp-fb-msg { font-size:var(--cp-fs-sm); color:var(--cp-muted); }

/*  아쉬움 사유 칸과 보내기 단추
    2026-09-02 yjmoon  아쉬움을 고른 방문자가 무엇이 아쉬웠는지 적는 자리. 둘 다 한 줄을 통째로 쓰게
      몫을 100% 로 준다(바로 위 .cp-fb 가 넘치면 줄을 바꾸는 짜임이라 몫만 정하면 제자리로 간다).
      줄 사이 틈은 .cp-fb 의 틈 값이 그대로 맡는다.
    고르기 전에는 감춰 두는데 감추는 일은 이 파일 127줄 한 줄이 맡는다. 그 줄보다 굵은 이름을 쓰면
      감춰야 할 때 안 감춰지므로 여기 두 줄은 이름을 겹쳐 쓰지 않고 하나로만 쓴다.
    가장 작은 높이와 높이를 적어 두는 까닭은 물음 칸과 같다 - 접수 화면이 모든 여러 줄 칸에 70px 을
      걸어 두어(index.html 97줄) 그 값이 이 칸에도 새어 들어온다. 52px = 두 줄 40px + 위아래 여백과 테두리.  */
.cp-fb-note { flex:0 0 100%; min-height:0; height:52px; max-height:120px; resize:vertical;
  padding:5px var(--cp-sp-25); margin:0;
  background:var(--cp-surface2); border:1px solid var(--cp-border); border-radius:var(--cp-r-md);
  color:var(--cp-text-h); font:inherit; font-size:var(--cp-fs-md); line-height:20px; }
.cp-fb-note::placeholder { color:var(--cp-subtle); }
.cp-fb-note:focus-visible { outline:2px solid var(--primary); outline-offset:1px;
  border-color:var(--primary-border); }
.cp-fb-sendrow { flex:0 0 100%; display:flex; justify-content:flex-end; }

/* ── 알림 상자 - 면과 1px 테두리. 한쪽만 두꺼운 색 띠는 쓰지 않는다 ── */
.cp-note { padding:var(--cp-sp-md) var(--cp-sp-35);
  background:var(--cp-surface2); border:1px solid var(--cp-border); border-radius:var(--cp-r-md);
  font-size:var(--cp-fs-md); line-height:1.6; color:var(--cp-text); }
.cp-note .cp-lab { display:flex; align-items:center; gap:var(--cp-sp-xs); margin-bottom:var(--cp-sp-2xs);
  font-size:var(--cp-fs-sm); font-weight:var(--cp-fw-bold); }
.cp-note .cp-lab svg { width:14px; height:14px; flex:none; }
.cp-note--info .cp-lab { color:var(--primary); }
.cp-note--err .cp-lab { color:var(--cp-red); }
.cp-note b { color:var(--cp-text-h); font-weight:var(--cp-fw-semibold); }
.cp-note .cp-where { display:block; margin-top:var(--cp-sp-sm); padding-top:var(--cp-sp-sm);
  border-top:1px solid var(--cp-border); font-size:var(--cp-fs-sm); color:var(--cp-muted); }

/* ── 접수 화면에 무엇이 채워지는지 미리 보기 ── */
/*  2026-09-02 yjmoon  알림 상자 안으로 들어왔다. 칠과 테두리를 뗀다 - 같은 값으로 두 겹이라
    이음매 없는 회색 덩어리로 보이던 자리다. 나누는 것은 위쪽 옅은 줄 하나면 된다.  */
.cp-pre { margin-top:var(--cp-sp-md); padding-top:var(--cp-sp-md);
  border-top:1px solid var(--cp-border); }
/*  값이 안 바뀌는 안내는 표 줄이 아니라 한 줄 글이다.  */
.cp-prest { margin:var(--cp-sp-sm) 0 0; font-size:var(--cp-fs-xs); line-height:1.6; color:var(--cp-muted); }
.cp-pre .cp-cap { display:flex; align-items:center; gap:var(--cp-sp-xs);
  font-size:var(--cp-fs-xs); font-weight:var(--cp-fw-semibold); color:var(--cp-muted); margin-bottom:var(--cp-sp-sm); }
.cp-pre .cp-cap svg { width:12px; height:12px; flex:none; }
.cp-prow { display:flex; gap:var(--cp-sp-sm); font-size:var(--cp-fs-sm); line-height:1.55; padding:var(--cp-sp-2xs) 0; }
/*  2026-08-27 yjmoon  64px 로 못 박아 두어서 "Product version" 과 "適用バージョン" 만 두 줄로
    꺾여 같은 카드 안에서 줄 높이가 들쭉날쭉했다. 네 언어에서 가장 긴 라벨이 한 줄에 들어가게 넓힌다.  */
.cp-prow .cp-k { width:104px; flex:none; color:var(--cp-muted); }
.cp-prow .cp-v { min-width:0; color:var(--cp-text-h); overflow-wrap:break-word; }
.cp-prow .cp-v .cp-fill { display:inline-block; padding:0 var(--cp-sp-xs); border-radius:var(--cp-r-sm);
  background:var(--primary-bg); color:var(--primary); font-weight:var(--cp-fw-medium); }
.cp-prow .cp-v .cp-empty { color:var(--cp-orange); font-weight:var(--cp-fw-medium); }

/* ── 단추 ── */
.cp-btns { display:flex; gap:var(--cp-sp-sm); flex-wrap:wrap; }
.cp-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--cp-sp-xs);
  height:36px; padding:0 var(--cp-sp-4);
  background:var(--primary); color:var(--cp-on-accent); border:1px solid var(--primary); border-radius:var(--cp-r-md);
  font:inherit; font-size:var(--cp-fs-md); font-weight:var(--cp-fw-semibold); cursor:pointer; text-decoration:none;
  transition:background var(--cp-dur) var(--cp-ease), border-color var(--cp-dur) var(--cp-ease); }
.cp-btn:hover { background:color-mix(in srgb, var(--primary) 88%, black); border-color:color-mix(in srgb, var(--primary) 88%, black); }
.cp-btn:active { background:color-mix(in srgb, var(--primary) 80%, black);
  border-color:color-mix(in srgb, var(--primary) 80%, black); }
.cp-btn:focus-visible { outline:2px solid var(--primary-h); outline-offset:2px; }
.cp-btn svg { width:14px; height:14px; }
.cp-btn--ghost { background:var(--cp-surface); color:var(--cp-text-h); border-color:var(--cp-border);
  font-weight:var(--cp-fw-medium); }
.cp-btn--ghost:hover { background:var(--cp-surface2); border-color:var(--cp-border-h); }
/*  바탕 없는 벌은 면 단계로 준다. 위 .cp-btn 누름 규칙은 굵기가 같고 이 줄이 뒤에 있어 마우스를 올린 채로는
    이 줄에 덮이므로, 여기서 따로 준다(안 주면 마우스를 올린 채 누를 때 아무 표시가 없다).  */
.cp-btn--ghost:active { background:var(--cp-border); border-color:var(--cp-border-h); }
.cp-btn--wide { flex:1 1 auto; }

/*  오른쪽 아래 같은 자리에 맨 위로 단추가 이미 있는 화면이 둘이다.
    제품 소개 여덟 화면은 .bb-totop (brand-shared.css 1274줄), 릴리즈 노트는 .to-top (그 화면 안 206줄).
    접수 화면과 설치 안내 네 화면에는 이 자리에 겹치는 단추가 없다.
    두 이름 다 여기서 옆으로 비켜 세운다. 창을 열면 창이 그 자리를 덮으므로 감추고, 닫으면 다시 나온다.
    자리값은 창 단추에서 되짚은 것이다 - 가장자리 24 + 단추 44 + 사이 12 = 80. 좁은 창은 가장자리가
    16 이라 72. 이 셈이 어긋나면 두 단추가 붙어 버리니 --cp-edge-x 를 고칠 때 여기도 같이 봐야 한다.
    2026-09-01 yjmoon  종전에는 위로 한 칸 올렸는데(bottom:80px) 두 가지가 걸려 옆으로 바꿨다.
      하나, 제품 소개 화면의 오른쪽 목차(.bb-toc)는 세로 가운데 붙박이라 창이 낮으면 아래로 내려온다.
      1440x450 에 목차 여덟 항목이면 목차 아래끝 337, 올려 둔 맨 위로 윗끝 326 으로 11px 겹쳤다.
      목차 높이가 항목 수에 따라 달라져서 창 높이로 문턱을 잡을 수가 없다. 옆으로 비키면 목차가
      쓰는 세로줄(오른쪽 8에서 38)과 아예 안 만나므로 창 높이와 항목 수에 상관없이 안전하다.
      둘, 릴리즈 노트를 새로 걸면서 그 화면 맨 위로가 창 단추와 자리가 똑같이 겹쳤다. 창 단추가 층 95,
      맨 위로가 20 이라 맨 위로가 통째로 뒤에 가려 눌리지도 않았다. 위 규칙이 .bb-totop 이라는
      이름만 보고 있어서 이름이 다른 이 화면이 그대로 빠져 있었다.
    자리값을 brand-shared.css 와 그 화면 style 이 이미 들고 있어 파일을 거는 순서에 기대지 않도록
    body 를 앞에 붙여 이 규칙이 항상 이기게 한다(같은 굵기면 나중에 걸린 것이 이겨 조용히 뒤집힌다).  */
body .bb-totop, body .to-top { right:80px; }
body.cp-open .bb-totop, body.cp-open .to-top { display:none; }

/*  좁은 창 - 열면 창이 폭을 거의 다 쓴다  */
@media (max-width:600px) {
  .cp-root { --cp-edge-x:16px; --cp-edge-y:16px; }
  .cp-panel { left:var(--cp-edge-x); width:auto; max-width:none;
    height:auto; top:var(--cp-edge-y); max-height:none; }
  body .bb-totop, body .to-top { right:72px; }
}

@media (prefers-reduced-motion:reduce) {
  .cp-panel { animation-duration:.001ms; }
  .cp-wait i { animation:none; opacity:.7; }
}