/* ==========================================================================
   home-polish.css — 방향 A "에디토리얼 / 절제" + B 카드 hover/focus (홈 전용, home.css + corporate.css 뒤에 로드)
   원본: web-design-1020/polish-home a/polish-a.css. 돈 도구 카드 hover·focus-visible만 B(polish-b.css)로 교체:
   2px 리프트(transform) + ::after 중립 그림자(opacity). 쉬는 상태는 그림자 없음. 아래 de-AI 층이 마지막에 덮어써요.
   ========================================================================== */
:root{
  /* 색: 새 색 없음. 라이브 토큰을 --dx- 이름으로 고정 */
  --dx-ink-strong:#191F28;
  --dx-text-muted:#4E5968;           /* 흰 7.1:1 */
  --dx-tint:#F9FAFB;                 /* hover/구획 바탕 */
  --dx-hair:#E5E8EB;                 /* 구분선(텍스트 아님) */
  --dx-rule:#E5E8EB;                 /* 섹션 머리 선: 진한 선 없이 구분선과 같은 색 */
  /* 타입 스케일 (모바일 → PC 유동) */
  --dx-fs-display:clamp(2rem,1.4rem + 2.4vw,3.5rem);  /* 32 → 56px */
  --dx-lh-display:1.25; --dx-ls-display:-.03em; --dx-fw-display:700;
  --dx-fs-h2:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);     /* 24 → 36px */
  --dx-lh-h2:1.35; --dx-ls-h2:-.025em;
  --dx-fs-h3:clamp(1.125rem,1.05rem + .3vw,1.25rem);      /* 18 → 20px */
  --dx-lh-h3:1.4; --dx-ls-h3:-.02em;
  --dx-fs-lead:clamp(1.0625rem,1rem + .35vw,1.3125rem);  /* 17 → 21px */
  --dx-lh-lead:1.7; --dx-ls-lead:-.01em;
  --dx-fs-body:1rem; --dx-lh-body:1.75;
  --dx-fs-label:.875rem; --dx-ls-label:0;             /* 14px 하한 유지 */
  /* 간격: 8px 기반 + 섹션 리듬 */
  --dx-s-1:.5rem; --dx-s-2:1rem; --dx-s-3:1.5rem; --dx-s-4:2rem; --dx-s-5:3rem; --dx-s-6:4rem; --dx-s-7:6rem;
  --dx-section-y:clamp(3.5rem,2.5rem + 4vw,6rem);      /* 56 → 96px */
  --dx-intro-gap:clamp(2rem,1.5rem + 1.5vw,3rem);
  /* 모서리·그림자 */
  --dx-r-card:12px; --dx-r-pill:999px; --dx-shadow:none;
  /* 카드 hover·focus 그림자(::after opacity로만 표시). 쉬는 상태는 그림자 없음 */
  --dx-shadow-2:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -8px rgba(0,0,0,.14);
  --dx-lift:-2px;
  /* 모션 */
  --dx-ease-out:cubic-bezier(.22,1,.36,1); --dx-dur-fast:.16s; --dx-dur-base:.24s; --dx-dur-enter:.7s;
}
body{background:#fff}

/* 헤더 */
.site-header{padding-top:1.5rem;padding-bottom:1.5rem;border-bottom-color:var(--dx-hair)}
.site-header nav a{font-size:.9375rem;letter-spacing:-.01em;color:#333D4B}
.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--blue)}
.site-header nav a[aria-current=location]{text-decoration-thickness:1px;text-underline-offset:.5em;color:var(--blue)}

/* 히어로 */
.dxh-copy h1{font-size:var(--dx-fs-display);line-height:var(--dx-lh-display);letter-spacing:var(--dx-ls-display);font-weight:var(--dx-fw-display);margin-top:1.25rem}
.dxh-sub{font-size:var(--dx-fs-lead);line-height:var(--dx-lh-lead);letter-spacing:var(--dx-ls-lead);color:var(--dx-text-muted);margin-top:1.25rem}

/* 돈 도구: 표처럼 읽히는 헤어라인 리스트 */
.dxh-tools h2{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1rem}
.dxh-grid{gap:0;border-top:1px solid var(--dx-rule)}
.dxh-grid li{border-bottom:1px solid var(--dx-hair)}
.dxh-card{position:relative;isolation:isolate;border:0;border-radius:0;background:#fff;box-shadow:none;min-height:84px;padding:1.125rem .25rem;gap:1rem;grid-template-columns:44px 1fr 22px;transition:transform .28s var(--dx-ease-out)}
.dxh-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--dx-shadow-2);opacity:0;transition:opacity .28s var(--dx-ease-out);pointer-events:none}
.dxh-card:hover,.dxh-card:focus-visible{z-index:1;transform:translateY(var(--dx-lift));background:#fff;box-shadow:none;border-color:transparent}
.dxh-card:hover::after,.dxh-card:focus-visible::after{opacity:1}
.dxh-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.dxh-ic{width:44px;height:44px;border-radius:12px}
.dxh-txt b{font-size:var(--dx-fs-h3);line-height:var(--dx-lh-h3);letter-spacing:var(--dx-ls-h3);font-weight:700}
.dxh-txt span{font-size:.9375rem;line-height:1.55;color:var(--dx-text-muted);margin-top:.125rem}
.dxh-go{transition:transform .28s var(--dx-ease-out)}
.dxh-card:hover .dxh-go,.dxh-card:focus-visible .dxh-go{transform:translateX(3px)}

/* 재미로 해 보는 서비스 */
.dxh-more{margin-top:var(--dx-s-6)}
.dxh-more::before{display:none}
.dxh-more h2{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em}
.dxh-chips{gap:.5rem;margin-top:1rem}
.dxh-chips a{background:#fff;border:1px solid #D1D6DB;font-weight:600;letter-spacing:-.01em;transition:border-color var(--dx-dur-fast),color var(--dx-dur-fast)}
.dxh-chips a:hover,.dxh-chips a:focus-visible{background:#fff;border-color:var(--dx-ink-strong);color:var(--blue)}

/* 섹션 공통 리듬 */
h2{letter-spacing:var(--dx-ls-h2)}
.section-intro{border-top:1px solid var(--dx-rule);padding-top:1.5rem;margin-bottom:var(--dx-intro-gap);align-items:flex-start}
.section-intro h2,.company-intro>h2,.principles-section h2,.portfolio-section .section-intro h2{font-size:var(--dx-fs-h2);line-height:var(--dx-lh-h2);letter-spacing:var(--dx-ls-h2);font-weight:720}
.section-context{font-size:var(--dx-fs-label);letter-spacing:var(--dx-ls-label);font-weight:700;margin-bottom:1rem}
.section-intro>p{font-size:1.0625rem;line-height:1.75;color:var(--dx-text-muted);max-width:24em}
.web-section{padding-top:0;padding-bottom:var(--dx-section-y)}
.web-stage{border-radius:var(--dx-r-card);border-color:var(--dx-hair)}
.web-tabs{background:#fff}
.web-tab{border-radius:4px}
.web-tab[aria-selected=true]{box-shadow:none;border-color:transparent;background:#F2F4F6}
.web-preview-icon{transform:none}
.web-preview-orbit span{transform:none!important;border-radius:4px}
.primary-action{border-radius:8px}
.primary-action>svg{transition:transform var(--dx-dur-base) var(--dx-ease-out)}
.primary-action:hover>svg,.primary-action:focus-visible>svg{transform:translate(2px,-2px)}

.company-section{background:#fff;padding-top:0;padding-bottom:var(--dx-section-y)}
.company-intro{border-top:1px solid var(--dx-rule);padding-top:1.5rem}
.company-intro>p:last-child{font-size:1.0625rem;line-height:1.85;color:var(--dx-text-muted)}
.capability-grid{gap:0 2rem;margin-top:var(--dx-s-5)}
.capability-grid article{border-top:1px solid var(--dx-hair);padding-top:1.25rem}
.capability-grid h3{font-size:1.125rem;font-weight:700}

.portfolio-section{background:var(--dx-tint);border-top:0;padding-top:var(--dx-section-y);padding-bottom:var(--dx-s-6)}
.featured-service{background:#fff;border-color:var(--dx-hair);border-radius:var(--dx-r-card);transition:border-color var(--dx-dur-fast)}
.featured-service:hover,.featured-service:focus-visible{border-color:var(--dx-ink-strong)}
.featured-service svg{transition:transform var(--dx-dur-base) var(--dx-ease-out)}
.featured-service:hover svg,.featured-service:focus-visible svg{transform:translateX(3px)}
.filters>button{border-radius:4px}
.search,.load-more,.empty-reset{border-radius:var(--dx-r-card)}
.project{border-radius:var(--dx-r-card);border-color:var(--dx-hair);transition:border-color var(--dx-dur-fast)}
.project:hover,.project:focus-within{border-color:var(--dx-ink-strong);box-shadow:none}
.project h3{letter-spacing:-.03em}
.open-service>svg{transition:transform var(--dx-dur-base) var(--dx-ease-out)}
.open-service:hover>svg,.open-service:focus-visible>svg{transform:translateX(3px)}

.principles-section{padding-top:var(--dx-section-y);padding-bottom:var(--dx-section-y)}
.principles-section>div:first-child{border-top:1px solid var(--dx-rule);padding-top:1.5rem}
.principles-list{gap:0;border-top:1px solid var(--dx-hair)}
.principles-list article{padding:1.5rem 0;border-bottom:1px solid var(--dx-hair)}
.principles-list h3{font-size:1.1875rem;font-weight:700}
.contact-section{padding-top:var(--dx-s-7);padding-bottom:var(--dx-s-7)}
.contact-section h2{font-size:var(--dx-fs-h2);letter-spacing:var(--dx-ls-h2)}
.contact-action{border-radius:var(--dx-r-card);transition:border-color var(--dx-dur-fast)}
.contact-action>svg{transition:transform var(--dx-dur-base) var(--dx-ease-out)}
.contact-action:hover>svg,.contact-action:focus-visible>svg{transform:translate(3px,-3px)}

/* 태블릿 이상 */
@media (min-width:768px){
  .dxh-hero{display:block;padding:var(--dx-s-6) 2.5rem 0}
  .dxh-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2rem;align-items:end}
  .dxh-copy h1{grid-column:1/-1}
  .dxh-sub{grid-column:1/-1;max-width:30em}
  .dxh-tools{margin-top:var(--dx-s-4)}
  .dxh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .dxh-grid li{border-bottom:1px solid var(--dx-hair)}
  .dxh-grid li:nth-child(odd){border-right:1px solid var(--dx-hair)}
  .dxh-card{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-items:start;min-height:200px;padding:1.5rem 1.5rem 1.25rem;gap:.875rem}
  .dxh-more{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:2rem;align-items:center;margin-top:var(--dx-s-6)}
  .dxh-chips{margin-top:0}
}
/* PC */
@media (min-width:1024px){
  .dxh-hero{padding-top:clamp(4rem,2rem + 3vw,6rem)}
  .dxh-copy{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .dxh-copy h1{grid-column:1}
  .dxh-sub{grid-column:2;margin:0 0 .5rem;font-size:clamp(1.125rem,.9rem + .35vw,1.3125rem)}
  .dxh-tools{margin-top:var(--dx-s-3)}
  .dxh-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dxh-grid li{border-right:1px solid var(--dx-hair)}
  .dxh-grid li:last-child{border-right:0}
  .dxh-card{min-height:216px;padding:1.75rem 1.5rem 1.5rem}
  .dxh-more{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}
/* 모바일 */
@media (max-width:767px){
  .site-header{padding-top:1rem;padding-bottom:1rem}
  .dxh-hero{padding:2.5rem 1.25rem 0;gap:0}
  .dxh-tools{margin-top:2rem}
  .dxh-card{padding:1rem .25rem}
  .dxh-more{margin-top:3rem}
  .section-intro{margin-bottom:1.75rem}
  .web-section,.company-section{padding-left:1.25rem;padding-right:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .dxh-card,.dxh-card::after,.dxh-go,.featured-service svg,.open-service>svg,.contact-action>svg,.primary-action>svg{transition:none}
  /* 리프트·화살표 이동 없음. 그림자와 포커스 링은 그대로 보여요 */
  .dxh-card:hover,.dxh-card:focus-visible,.dxh-card:hover .dxh-go,.dxh-card:focus-visible .dxh-go{transform:none}
}
@media (forced-colors:active){.dxh-card::after{display:none}.dxh-card:hover{outline:1px solid Highlight}.dxh-grid{border-top-color:CanvasText}}

/* ==========================================================================
   de-ai.css: 'AI가 만든 것 같은' 인상 걷어내기 (홈 전용)
   home-polish.css 맨 끝에 붙인 층이에요(home.css + corporate.css 뒤).
   원칙: 색은 파랑 1개 + 중립 회색(Toss 계열) / 장식 대신 실제 숫자·실제 화면
         그림자는 '누를 수 있는 카드의 hover'에만 / 제목 자간은 -0.02~-0.03em
   ========================================================================== */
:root{
  /* 중립 회색: 파란 기가 도는 slate 계열(#142841 #52647A #DCE4EF #F3F6FC …)을 대체 */
  --g-900:#191F28;  /* 제목·본문 진한 글자  흰 16.6:1 */
  --g-800:#333D4B;  /* 본문                  흰 11.0:1 */
  --g-700:#4E5968;  /* 보조 글자              흰 7.1:1 · #F9FAFB 6.8:1 · #F2F4F6 6.4:1 */
  --g-600:#6B7684;  /* 캡션(흰 바탕에서만)    흰 4.62:1 · #F9FAFB 4.42(쓰지 않음) */
  --g-400:#B0B8C1;  /* hover 테두리(비텍스트) */
  --g-300:#D1D6DB;  /* 입력·칩 테두리 */
  --g-200:#E5E8EB;  /* 구분선 */
  --g-100:#F2F4F6;  /* 미리보기 바탕 */
  --g-50:#F9FAFB;   /* 구획 바탕 */
  --blue:#1B64DA;   /* 유일한 강조색  흰 5.4:1 */
  --blue-press:#1957C2;
  --down:#1B64DA;   /* 국내 관례: 내림=파랑 */
  --up:#D22030;     /* 오름=빨강  흰 5.3:1 */
  /* 라이브·polish 토큰 덮어쓰기 */
  --ink:var(--g-900); --muted:var(--g-700); --line:var(--g-200); --canvas:var(--g-50);
  --teal:var(--g-700);
  --dx-ink-strong:var(--g-900); --dx-text-muted:var(--g-700);
  --dx-tint:var(--g-50); --dx-hair:var(--g-200); --dx-rule:var(--g-200);
  /* 모서리: 4 / 8 / 12 세 단계만 */
  --r-s:4px; --r-m:8px; --r-l:12px;
  /* 그림자: 쉬는 상태 0, hover 1단계만(중립색, 파란 빛 없음) */
  --shadow-hover:0 1px 2px rgba(0,0,0,.04),0 8px 24px -8px rgba(0,0,0,.14);
  /* 글자 */
  --dx-fs-display:clamp(2rem,1.4rem + 2.4vw,3.5rem);  /* 32 → 56px (A 72px에서 낮춤) */
  --dx-lh-display:1.25; --dx-ls-display:-.03em; --dx-fw-display:700;
  --dx-fs-h2:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);     /* 24 → 36px */
  --dx-lh-h2:1.35; --dx-ls-h2:-.025em;
  --dx-ls-h3:-.02em;
  --dx-section-y:clamp(3.5rem,2.5rem + 4vw,6rem);      /* 56 → 96px (A 128px에서 줄임) */
}
body{color:var(--g-900);font-feature-settings:"tnum" 0}
h1,h2,h3{color:var(--g-900)}

/* 헤더: 현재 위치만 파랑 */
.site-header{border-bottom-color:var(--g-200)}
.site-header nav a{color:var(--g-800)}

/* ---------- 히어로 ---------- */
.dxh-copy h1{margin-top:0;word-break:keep-all}
.dxh-sub{color:var(--g-700);word-break:keep-all}
@media (min-width:1024px){
  .dxh-hero{padding-top:3.5rem}
  .dxh-copy{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .dxh-sub{margin:0 0 .375rem}
  .dxh-tools{margin-top:2.5rem}
}

/* 돈 도구: A의 표 구조 + B의 hover(떠오름 + 그림자), 단 그림자는 중립색 */
.dxh-tools h2{font-size:1.0625rem;color:var(--g-900)}
.dxh-grid{border-top:1px solid var(--g-200)}
.dxh-card{border-radius:var(--r-l);isolation:isolate;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .16s}
.dxh-card::before{display:none}                         /* A의 파란 위 막대 제거 */
.dxh-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;border:1px solid var(--g-200);box-shadow:var(--shadow-hover);opacity:0;transition:opacity .24s cubic-bezier(.22,1,.36,1);pointer-events:none}
.dxh-card:hover,.dxh-card:focus-visible{background:#fff;transform:translateY(-2px)}
.dxh-card:hover::after,.dxh-card:focus-visible::after{opacity:1}
.dxh-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.dxh-txt span{color:var(--g-700)}
.dxh-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem;margin-top:.75rem;font-style:normal;font-size:.9375rem;line-height:1.4;color:var(--g-800);font-variant-numeric:tabular-nums}
.dxh-fact small{font-size:.875rem;color:var(--g-700);font-weight:500}
.dxh-fact strong{font-size:1.0625rem;font-weight:700;color:var(--g-900);letter-spacing:-.01em}
.dxh-fact strong.is-down{color:var(--down)}
.dxh-fact strong.is-up{color:var(--up)}
.dxh-fact{min-height:1.4em}
.dxh-go{color:var(--g-700)}
.dxh-card:hover .dxh-go,.dxh-card:focus-visible .dxh-go{color:var(--blue)}
@media (min-width:1024px){ .dxh-card{min-height:0;padding:1.5rem 1.25rem 1.25rem} }
@media (max-width:767px){
  .dxh-card{grid-template-columns:44px 1fr 20px;padding:1rem .5rem}
  .dxh-fact{margin-top:.5rem}
}

/* 재미 서비스: 알약 칩 → 이름 + 한 줄 설명 버튼(모서리 8) */
.dxh-more h2{color:var(--g-900)}
.dxh-chips a{border-radius:var(--r-m);border:1px solid var(--g-300);background:#fff;gap:.5rem;padding:.625rem 1rem;min-height:48px;color:var(--g-900)}
.dxh-chips a b{font-weight:700}
.dxh-chips a span{font-weight:400;color:var(--g-700)}
.dxh-chips a:hover,.dxh-chips a:focus-visible{border-color:var(--g-400);color:var(--g-900)}
.dxh-more{padding-bottom:var(--dx-section-y)}

/* ---------- 섹션 공통: 색 눈썹·굵은 선 없음, 제목은 마침표 없이 ---------- */
.section-context{display:none}
.section-intro,.company-intro,.principles-section>div:first-child{border-top:0;padding-top:0}
@media (min-width:768px){ .section-intro{align-items:flex-end} }
@media (max-width:767px){ .section-intro{align-items:flex-start} }
.section-intro h2,.company-intro>h2,.principles-section h2,.portfolio-section .section-intro h2,.contact-section h2{font-size:var(--dx-fs-h2);line-height:var(--dx-lh-h2);letter-spacing:var(--dx-ls-h2);font-weight:700;word-break:keep-all}
.section-intro>p{color:var(--g-700);font-size:1rem}

/* 웹 서비스: 궤도·기울인 라벨·서비스별 색 → 실제 첫 화면 캡처 */
.web-panel{--service-accent:var(--g-700);--service-wash:var(--g-100)}
.web-stage{border-radius:var(--r-l);border-color:var(--g-200);box-shadow:none}
.web-tabs{background:#fff}
.web-tab{border-radius:var(--r-m);color:var(--g-800)}
.web-tab:hover{background:var(--g-50)}
.web-tab[aria-selected=true]{background:var(--g-100);box-shadow:none;border-color:transparent;color:var(--g-900)}
.web-preview{background:var(--g-100);min-height:0;padding:2rem 2rem 0;align-items:end;overflow:hidden}
.web-preview::before,.web-preview::after{display:none}
.web-shot{display:block;width:min(260px,80%);height:auto;border:1px solid var(--g-200);border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0;background:#fff}
.web-purpose{color:var(--g-700);font-weight:600}
.web-copy h3{letter-spacing:-.025em;line-height:1.4;font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);word-break:keep-all}
.web-copy>p:not(.web-purpose){color:var(--g-700)}
.primary-action{border-radius:var(--r-m);background:var(--blue)}
.primary-action:hover{background:var(--blue-press)}
@media (max-width:767px){ .web-preview{padding:1.5rem 1.5rem 0} .web-shot{width:200px} }

/* 회사 소개: 4칸 추상 문구 → 실제 개수 */
.company-section{background:#fff}
.company-intro>p:last-child{color:var(--g-700)}
.dxc-counts article{border-top:1px solid var(--g-200)}
.dxc-counts h3{display:flex;align-items:baseline;gap:.5rem;font-size:1.0625rem;font-weight:700;margin-bottom:.5rem}
.dxc-n{font-size:inherit;font-weight:500;font-variant-numeric:tabular-nums;color:var(--g-700)} /* 큰 숫자+작은 라벨 타일 대신 제목 안의 보통 글자 */
.dxc-counts p{color:var(--g-700);font-size:.9375rem;line-height:1.7}

/* 포트폴리오·작업실 */
.portfolio-section,.lab-section{background:var(--g-50)}
.featured-service,.project,.lab-project,.search,.load-more,.empty-reset{border-radius:var(--r-l);border-color:var(--g-200)}
.featured-service:hover,.featured-service:focus-visible,.project:hover,.project:focus-within{border-color:var(--g-400)}
.filters>button{border-radius:var(--r-m)}
.project-category,.lab-project .project-category{border-radius:var(--r-s);background:var(--g-100);color:var(--g-700)}
.feature-icon,.web-preview-icon,.detail-icon{box-shadow:none}
.service-dialog{border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.18)}
.service-dialog::backdrop{background:rgba(0,0,0,.45);backdrop-filter:none}

/* 기준 */
.principles-list{border-top:1px solid var(--g-200)}
.principles-list article{border-bottom-color:var(--g-200)}
.principles-list h3{font-size:1.125rem;letter-spacing:-.02em}
.principles-list p{color:var(--g-700)}

/* 문의: 남색 전폭 CTA 띠 → 흰 바탕 한 줄 */
.contact-section{background:#fff;color:var(--g-900);border-top:1px solid var(--g-200);padding-top:3.5rem;padding-bottom:3.5rem}
.contact-section p:not(.section-context){color:var(--g-700)}
.contact-action{border:1px solid var(--g-300);border-radius:var(--r-m);color:var(--g-900)}
.contact-action>span:nth-child(2){color:var(--g-700)}
.contact-action>svg{color:var(--blue)}
.contact-action:hover,.contact-action:focus-visible{border-color:var(--g-400)}
.contact-section :focus-visible{outline-color:var(--blue)}

@media (prefers-reduced-motion:reduce){
  .dxh-card,.dxh-card::after{transition:none}
  .dxh-card:hover,.dxh-card:focus-visible{transform:none}
}
@media (forced-colors:active){ .dxh-card::after{border-color:CanvasText} }