/* gen2 기초 계약 — 회원 화면 어디서든 같은 버튼·칩·카드·입력을 보장한다.
 *
 * 2026-08-28 전까지 이 파일의 규칙은 전부 :where() 로 특정도 0 이었다. 그래서 gen1 시트
 * (dream-open .btn 44px/800, dream-data-platform .btn 40px/850 + hover 리프트, dream-app-shell)
 * 에 매번 졌고 같은 버튼이 화면마다 세 모양이었다. 서버가 이 시트를 </head> 직전에 넣으므로
 * 인라인 <style>·gen1 링크보다 뒤에 온다 — 특정도만 (0,2,1) 로 같게 맞추면 소스 순서로 이긴다.
 * 그래서 컴포넌트 규칙은 :where 를 벗기고, 리셋(폰트 상속·여백·포커스)만 :where 로 남긴다.
 *
 * 화면별 3단 선택자(.action-queue .btn.primary 같은 것)는 여전히 이긴다. 그건 gen1 시트
 * 제자리 수정(배포 2)과 화면 인라인 CSS 정리(배포 4)가 맡는다.
 *
 * 원칙(DESIGN.md · 대표 수칙): 평평한 업무 표면 — 카드는 흰 표면 + 1px 경계 + 8px, 그림자 없음.
 * hover 는 경계·배경만 바뀌고 떠오르지 않는다. 틴트 면은 반드시 보이는 1px 경계 짝을 가진다.
 * 색은 dream-tokens.css 의 --dv-* 만 쓴다(이 파일에 hex 리터럴 금지 — 계약 테스트가 지킨다). */

body[data-ui-generation="2"] {
  margin: 0;
  background: var(--dv-bg-page);
  color: var(--dv-text);
  font-family: var(--dv-font-ui);
  font-size: var(--dv-text-md);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

body[data-ui-generation="2"] [hidden] {
  display: none !important;
}

/* ---- 리셋: 특정도 0 으로 남긴다 ---- */

body[data-ui-generation="2"] :where(button, input, textarea, select) {
  font: inherit;
}

body[data-ui-generation="2"] :where(h1, h2, h3, h4, p) {
  margin-top: 0;
}

body[data-ui-generation="2"] :where(h1, h2, h3, h4, strong) {
  color: var(--dv-text-strong);
}

body[data-ui-generation="2"] :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dv-focus);
  outline-offset: 3px;
}

/* 숫자는 표·목록에서 자리가 맞아야 읽힌다. */
body[data-ui-generation="2"] :where(table, .kpi, .stat, .dash-stat, .num, time, [data-numeric]) {
  font-variant-numeric: tabular-nums;
}

/* ---- 버튼: 한 모양 ---- */

/* 44px: gen1 에 `button, input, select, textarea { min-height: 44px !important }` 요소 규칙이 있어
   button.btn 은 언제나 44 인데 a.btn 만 40 이 되던 것이 "세 모양"의 한 축이었다. 링크 버튼도 44 로. */
body[data-ui-generation="2"] .btn,
body[data-ui-generation="2"] button.btn,
body[data-ui-generation="2"] .app-login-gate-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--dv-border-strong);
  border-radius: var(--dv-radius);
  background: var(--dv-bg-surface);
  color: var(--dv-text-strong);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition:
    background-color var(--dv-duration-fast) var(--dv-ease-out),
    border-color var(--dv-duration-fast) var(--dv-ease-out),
    color var(--dv-duration-fast) var(--dv-ease-out),
    box-shadow var(--dv-duration-fast) var(--dv-ease-out),
    transform var(--dv-duration-fast) var(--dv-ease-out),
    scale var(--dv-duration-fast) var(--dv-ease-out);
}

/* hover 는 경계와 배경만. gen1 의 -1px 리프트와 그림자(dream-data-platform.css .btn:hover)를
   같은 특정도로 덮어 무효화한다 — 앱은 평평한 업무 표면이다. 마우스가 있는 기기에서만 켠다(터치는 누른 뒤
   hover 가 남아 선택된 것처럼 보인다 — 대표 화면 수칙). */
@media (hover: hover) and (pointer: fine) {
  body[data-ui-generation="2"] .btn:hover,
  body[data-ui-generation="2"] .app-login-gate-button:hover {
    border-color: var(--dv-text);
    background: var(--dv-bg-subtle);
    color: var(--dv-text-strong);
    text-decoration: none;
    box-shadow: none;
    transform: none;
  }
}

/* 누름은 0.97 로 살짝 줄어든다(emil: 버튼은 눌렸다는 것을 바로 알린다). 예전의 아래로 1px 은 눈에 거의 안 띄었다.
   transform 이 아니라 scale 속성을 쓴다 — 자리 잡기에 transform 을 쓰는 버튼도 눌러서 자리가 튀지 않는다. */
body[data-ui-generation="2"] .btn:active,
body[data-ui-generation="2"] .app-login-gate-button:active {
  scale: 0.97;
  box-shadow: none;
  transition-duration: 100ms;
}

/* 게이트의 Google 버튼은 primary 그룹에 넣지 않는다 — 연합 로그인 버튼은 구글 관례
   (흰 바탕 + 공식 G 마크)를 따르는 게 자연스럽고, 코발트로 칠하면 구글 버튼처럼 보이지
   않는다(2026-08-11 대표 지적). 위 중립 그룹이 게이트 버튼의 기본 모습을 담당한다. */
/* 채운 주 행동의 면은 하늘색이다(2026-09-27 대표 지시: "버튼 색상과 투명도 색감들을
   자줏빛에서 스크린샷의 색상으로"). 09-24 의 샤이닝 와인을 걷고, 스크린샷 "보좌관" 카드의
   실행 버튼처럼 거의 평평한 하늘색 면에 짙은 남색 글자를 쓴다. 흰 글자는 하늘색 위에서
   1.65:1 이라 쓰지 않는다. 밝은 바탕에서는 하늘색 면의 윤곽이 흐리므로 짙은 하늘색 1px
   테두리를 늘 짝으로 둔다(구형 모니터 원칙). background-color 를 함께 두는 이유는 화면
   측정기가 면 색을 한 색으로 읽어야 대비를 재기 때문이다 — 그라디언트만 두면 "못 잰
   글자"로 샌다. 코발트는 현재 선택·링크·포커스·차트에 그대로 남는다. */
body[data-ui-generation="2"] .btn.primary {
  border-color: var(--dv-action-deep);
  background-color: var(--dv-action);
  background-image: var(--dv-action-face);
  color: var(--dv-on-action);
  /* 짙은 옥빛 유리(2026-09-28 대표: "파스텔 느낌이 싫다, 메탈릭·유리 느낌"): 면의 유리 반사·금속 광택·굴절 광
     (--dv-action-face)에 더해 유리의 테와 두께(--dv-droplet-inset)가 안쪽에 맺히고, 흰 글자 아래로 1px 짙은 그림자를
     깔아 유리 반사 위에서도 글자가 또렷하다. 바깥으로는 옥빛이 짧게 번진다. 비활성에는 주지 않는다(아래). */
  text-shadow: var(--dv-on-action-shadow);
  box-shadow: var(--dv-droplet-inset), 0 4px 12px -2px var(--dv-action-glow);
}

@media (hover: hover) and (pointer: fine) {
  body[data-ui-generation="2"] .btn.primary:hover {
    border-color: var(--dv-action-deep);
    background-color: var(--dv-action);
    background-image: var(--dv-action-face-hover);
    color: var(--dv-on-action);
    box-shadow: var(--dv-droplet-inset), 0 6px 20px var(--dv-action-glow-strong);
  }
}

/* 눌림 — 하이라이트가 가라앉고 바깥 번짐도 버튼 밑으로 줄어든다. 안쪽 반사선은 그대로 남아 물방울 모양을 지킨다. */
body[data-ui-generation="2"] .btn.primary:active {
  border-color: var(--dv-action-deep);
  background-color: var(--dv-action);
  background-image: var(--dv-action-face-pressed);
  color: var(--dv-on-action);
  box-shadow: var(--dv-droplet-inset), 0 1px 4px var(--dv-action-glow);
}

/* 비활성 주 버튼 — 예전에는 와인 면을 반투명(opacity .52)으로 흐려 분홍으로 보였다.
   흐리게 만들지 않고 옅은 청회색 면과 흐린 글자로 "지금은 못 누른다"를 말한다.
   글자는 보조문구 잉크라 비활성이어도 읽힌다(면 대비 4.4:1 안팎). */
body[data-ui-generation="2"] .btn.primary:disabled,
body[data-ui-generation="2"] .btn.primary[aria-disabled="true"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--dv-action-deep) 26%, var(--dv-border));
  background-color: color-mix(in srgb, var(--dv-action-deep) 7%, var(--dv-bg-subtle));
  background-image: none;
  color: var(--dv-text-muted);
  text-shadow: none;
  box-shadow: none;
}

/* 강조가 필요한 주 행동에만 거는 테두리(2026-09-24 대표: "그 주변을 감싸는 레인보우 메탈릭 라인도 필요에 따라
   강조할 때 써 줘"). 2026-09-27 버튼 면이 하늘색으로 바뀌면서(대표: "자줏빛에서 스크린샷의 색상으로") 보라·분홍이 섞인
   회전 링은 걷었다 — 그 링은 09-24 부터 선언 오류로 그려진 적이 없었고, 고쳐 그리면 자줏빛과 새 움직임이 생긴다.
   같은 밤 미스티 그린 전환 뒤로는 옥빛 면을 짙은 옥빛(action-deep, 바탕 대비 4.9:1)에서 옅은 민트로 이어지는
   멈춘 금속선이 감싼다. 화면당 한 개만 건다.
   background-image 에는 padding-box/border-box 를 적지 않는다 — 적으면 선언 전체가 무효가 된다. */
body[data-ui-generation="2"] .btn.primary.dv-shine {
  border: 2px solid transparent;
  background-image:
    var(--dv-action-face),
    linear-gradient(135deg, var(--dv-action-deep), color-mix(in srgb, var(--dv-action) 55%, var(--dv-bg-surface)) 48%, var(--dv-action-deep));
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

/* gen1 의 .btn.dark(검정/네이비)는 H2 에서 신뢰 네이비 하나로. */
body[data-ui-generation="2"] .btn.dark {
  border-color: var(--dv-trust);
  background: var(--dv-trust);
  color: var(--dv-on-primary);
}

@media (hover: hover) and (pointer: fine) {
  body[data-ui-generation="2"] .btn.dark:hover {
    border-color: var(--dv-rail-bg);
    background: var(--dv-rail-bg);
    color: var(--dv-on-primary);
  }
}

body[data-ui-generation="2"] .btn.subtle,
body[data-ui-generation="2"] .btn.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--dv-primary);
}

@media (hover: hover) and (pointer: fine) {
  body[data-ui-generation="2"] .btn.subtle:hover,
  body[data-ui-generation="2"] .btn.quiet:hover {
    border-color: transparent;
    background: var(--dv-bg-selected);
    color: var(--dv-primary-hover);
  }
}

/* small 은 높이를 줄이지 않는다(요소 규칙이 button 을 44 로 강제하므로 a.btn.small 만 낮아진다). */
body[data-ui-generation="2"] .btn.small {
  padding: 6px 10px;
  font-size: var(--dv-text-sm);
}

body[data-ui-generation="2"] .btn:disabled,
body[data-ui-generation="2"] .btn[aria-disabled="true"],
body[data-ui-generation="2"] button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
  scale: none;
  box-shadow: none;
}

/* ---- 누르는 것은 모두 눌린다 ----
   2026-09-29 대표: "마우스 호버하면 진하게 바뀌던가.. emil 스킬이 안 쓰인 것 같다." 버튼 모양(.btn)이 아닌 버튼·탭·칩·
   사이드바 메뉴는 누름 표시가 하나도 없었다(실측 전수). 누르는 것에는 0.97(펼침 줄 summary 는 폭이 넓어 0.99)을 준다.
   scale 속성이라 자리 잡기용 transform 과 겹치지 않는다. 자기 누름 모양이 따로 있는 AI 도크·안내 캡슐은 빼서 두 번
   줄어들지 않게 한다. 움직임 줄이기 설정이면 줄어들지 않는다. */
body[data-ui-generation="2"] :where(button, [role="button"], input[type="submit"], input[type="button"], .app-navitem):not(:disabled, [aria-disabled="true"], .dv-guide-mirror, .shell-assistant *, .shell-assistant-fab, .shell-assistant-fab *):active,
body[data-ui-generation="2"] .chip:not(:disabled, [aria-disabled="true"]):active {
  scale: 0.97;
}
body[data-ui-generation="2"] :where(summary):not(.shell-assistant *):active {
  scale: 0.99;
}
/* 자기 전환 목록이 없는 누르는 것에만 거는 기본 움직임(특정도 0 — 화면별 transition 이 있으면 그쪽이 이긴다).
   누름·놓음과 hover 색이 뚝 끊기지 않고 짧게 이어진다. */
:where(body[data-ui-generation="2"]) :where(button, [role="button"], input[type="submit"], input[type="button"], summary, .app-navitem) {
  transition:
    background-color var(--dv-duration-fast) var(--dv-ease-out),
    border-color var(--dv-duration-fast) var(--dv-ease-out),
    color var(--dv-duration-fast) var(--dv-ease-out),
    scale var(--dv-duration-fast) var(--dv-ease-out);
}

/* ---- 입력 ---- */

body[data-ui-generation="2"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body[data-ui-generation="2"] textarea,
body[data-ui-generation="2"] select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--dv-border-strong);
  border-radius: var(--dv-radius);
  background: var(--dv-bg-surface);
  color: var(--dv-text-strong);
  padding: 10px 12px;
  box-shadow: none;
}

body[data-ui-generation="2"] textarea {
  min-height: 112px;
  resize: vertical;
}

/* 안내 글은 굵기 400. 폼 칸이 label 의 굵기(650)를 물려받아 안내 글도 650 이 되어, '예: …' 안내가 이미 적힌 값처럼
   보였다(2026-09-29 점검 N6, 전문가 컨설팅 '현재 과제'). 색은 보조 잉크 그대로 두고 굵기로 값과 가른다. */
body[data-ui-generation="2"] :where(input, textarea)::placeholder {
  color: var(--dv-text-muted);
  font-weight: 400;
  opacity: 1;
}

body[data-ui-generation="2"] :where(label, .field-label, .form-label) {
  color: var(--dv-text-strong);
  font-size: var(--dv-text-sm);
  font-weight: 650;
}

body[data-ui-generation="2"] :where(.hint, .field-hint, .form-hint, .help) {
  color: var(--dv-text-muted);
  font-size: var(--dv-text-sm);
}

/* ---- 상태 칩: 상태 어휘(진행·막힘·검토·완료·자료 상태)에만 ----
   틴트 + 보이는 경계 + 글자, 12px/650 pill. 색 이름 변형(gen1 .tag.gold 등)은 상태 의미로 매핑한다. */

body[data-ui-generation="2"] .tag,
body[data-ui-generation="2"] .pill,
body[data-ui-generation="2"] .badge,
body[data-ui-generation="2"] .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  width: fit-content;
  padding: 2px 9px;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-pill);
  background: var(--dv-bg-subtle);
  color: var(--dv-text);
  font-size: var(--dv-text-xs);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  word-break: keep-all;
  box-shadow: none;
}

body[data-ui-generation="2"] .tag.blue,
body[data-ui-generation="2"] .pill.blue,
body[data-ui-generation="2"] .badge.blue,
body[data-ui-generation="2"] .tag.primary,
body[data-ui-generation="2"] .pill.primary {
  border-color: var(--dv-selected-border);
  background: var(--dv-bg-selected);
  color: var(--dv-primary-hover);
}

body[data-ui-generation="2"] .tag.gold,
body[data-ui-generation="2"] .pill.gold,
body[data-ui-generation="2"] .badge.gold,
body[data-ui-generation="2"] .tag.warn,
body[data-ui-generation="2"] .pill.warn {
  border-color: var(--dv-warning-border);
  background: var(--dv-warning-surface);
  color: var(--dv-warning-text);
}

body[data-ui-generation="2"] .tag.red,
body[data-ui-generation="2"] .pill.red,
body[data-ui-generation="2"] .badge.red,
body[data-ui-generation="2"] .tag.danger,
body[data-ui-generation="2"] .pill.danger {
  border-color: var(--dv-danger-border);
  background: var(--dv-danger-surface);
  color: var(--dv-danger);
}

body[data-ui-generation="2"] .tag.green,
body[data-ui-generation="2"] .pill.green,
body[data-ui-generation="2"] .badge.green,
body[data-ui-generation="2"] .tag.success,
body[data-ui-generation="2"] .pill.success {
  border-color: var(--dv-success-border);
  background: var(--dv-success-surface);
  color: var(--dv-success-text);
}

body[data-ui-generation="2"] .tag.violet,
body[data-ui-generation="2"] .pill.violet,
body[data-ui-generation="2"] .badge.violet {
  border-color: var(--dv-trust-border);
  background: var(--dv-trust-soft);
  color: var(--dv-trust);
}

/* .chip 은 누르는 필터 컨트롤이다(gen1 data-platform: cursor pointer, 30px). 상태 칩과 모양은
   같되 컨트롤 높이와 hover 를 가진다. */
body[data-ui-generation="2"] .chip {
  border-radius: var(--dv-radius-pill);
  border: 1px solid var(--dv-border);
  background: var(--dv-bg-surface);
  color: var(--dv-text);
  font-size: var(--dv-text-sm);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition:
    background-color var(--dv-duration-fast) var(--dv-ease-out),
    border-color var(--dv-duration-fast) var(--dv-ease-out),
    color var(--dv-duration-fast) var(--dv-ease-out),
    scale var(--dv-duration-fast) var(--dv-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body[data-ui-generation="2"] .chip:hover {
    border-color: var(--dv-text);
    background: var(--dv-bg-subtle);
  }
}

body[data-ui-generation="2"] .chip.active,
body[data-ui-generation="2"] .chip[aria-pressed="true"],
body[data-ui-generation="2"] .chip[aria-selected="true"] {
  border-color: var(--dv-primary);
  background: var(--dv-bg-selected);
  color: var(--dv-primary-hover);
}

/* ---- 카드·패널: 흰 표면 + 1px 경계 + 8px, 그림자 없음, hover 로 떠오르지 않음 ---- */

body[data-ui-generation="2"] .panel,
body[data-ui-generation="2"] .card,
body[data-ui-generation="2"] .form-panel,
body[data-ui-generation="2"] .queue-panel,
body[data-ui-generation="2"] .status-card {
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius);
  background: var(--dv-bg-surface);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) { body[data-ui-generation="2"] .panel:hover, body[data-ui-generation="2"] .card:hover, body[data-ui-generation="2"] .status-card:hover {
  box-shadow: none;
  transform: none;
} }

/* 틴트 면(주의·위험·성공·선택)은 경계 짝이 필수다. */
body[data-ui-generation="2"] .notice-box,
body[data-ui-generation="2"] [role="alert"] {
  border: 1px solid var(--dv-warning-border);
  border-radius: var(--dv-radius);
  background: var(--dv-warning-surface);
  color: var(--dv-warning-text);
  box-shadow: none;
}

body[data-ui-generation="2"] :where(.danger-box, .error-box, [role="alert"].danger) {
  border: 1px solid var(--dv-danger-border);
  background: var(--dv-danger-surface);
  color: var(--dv-danger);
}

body[data-ui-generation="2"] :where(.success-box, [role="status"].success) {
  border: 1px solid var(--dv-success-border);
  background: var(--dv-success-surface);
  color: var(--dv-success-text);
}

/* ---- 표 ---- */

body[data-ui-generation="2"] :where(table) {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--dv-text-sm);
}

body[data-ui-generation="2"] :where(th) {
  color: var(--dv-text-muted);
  font-size: var(--dv-text-xs);
  font-weight: 650;
  text-align: left;
  border-bottom: 1px solid var(--dv-border);
  padding: 8px 10px;
}

body[data-ui-generation="2"] :where(td) {
  border-bottom: 1px solid var(--dv-border);
  padding: 10px;
  vertical-align: top;
}

/* ---- 접힘(summary) ---- */

body[data-ui-generation="2"] :where(summary) {
  cursor: pointer;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dv-text-strong);
  font-weight: 650;
}

/* ---- 오버레이: 실제로 다른 평면에 놓이는 것만 그림자 ---- */

body[data-ui-generation="2"] dialog {
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius);
  box-shadow: var(--dv-shadow-overlay);
}

body[data-ui-generation="2"] dialog::backdrop {
  background: rgba(0, 44, 31, 0.42);
}

/* 대화상자는 아무것도 없던 자리에서 뚝 생기지 않는다(2026-09-29 emil 점검 — 12개 모두 움직임 없이 떨어졌다). 0.96 → 1, 투명 →
   불투명으로 200ms ease-out, 뒤 막도 같이 옅게 깔린다. 모달은 방아쇠가 아니라 화면 가운데서 커진다. 닫힘은 시스템 반응이라 바로
   사라진다. 움직임 줄이기 설정이면 아래 전역 규칙이 전환을 없앤다. */
body[data-ui-generation="2"] dialog[open] {
  opacity: 1;
  scale: 1;
  transition: opacity 200ms var(--dv-ease-out), scale 200ms var(--dv-ease-out);
}
@starting-style {
  body[data-ui-generation="2"] dialog[open] { opacity: 0; scale: 0.96; }
}
body[data-ui-generation="2"] dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 200ms var(--dv-ease-out);
}
@starting-style {
  body[data-ui-generation="2"] dialog[open]::backdrop { opacity: 0; }
}

body[data-ui-generation="2"] .dv-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-ui-generation="2"] .skeleton {
  border-radius: var(--dv-radius-inner);
  background: var(--dv-bg-subtle);
  overflow: hidden;
}

body[data-ui-generation="2"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
}

@media (max-width: 640px) {
  body[data-ui-generation="2"] {
    font-size: 16px;
  }

  body[data-ui-generation="2"] .chip,
  body[data-ui-generation="2"] :where(summary, .app-navitem) {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  body[data-ui-generation="2"] *,
  body[data-ui-generation="2"] *::before,
  body[data-ui-generation="2"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body[data-ui-generation="2"] :where(button, [role="button"], input[type="submit"], input[type="button"], summary, .app-navitem):active,
  body[data-ui-generation="2"] .chip:active,
  body[data-ui-generation="2"] .btn:active {
    scale: none;
  }
}