/* 밸류클립 컴포넌트 — 전 페이지 공용
 *
 * 시각 정본 = 밸류클립 레이아웃 v3.dc.html. 인라인 hex 를 토큰으로만 옮겼다.
 * 여기 없는 형태는 만들지 않는다(콘텐츠 규격 §1: 카드는 FEATURE/LIST/COMPACT 3종).
 */

/* ══ 확장 팔레트 스위치 ════════════════════════════════════════════
 * data-accent 하나를 꽂으면 그 아래 전부가 --vc-t / --vc-tint 를 읽는다.
 * 그래서 PHP·JS 어디에서도 색 이름을 고르지 않는다 — 갈래만 넘긴다.
 *
 * --vc-t-on 은 그 색을 '면'으로 깔았을 때 위에 올리는 글자색이다.
 * value(허니)만 잉크고 나머지 넷은 어두워서 종이색이다 — §0 대비표에서
 * 유일하게 갈라지는 지점이라 토큰을 따로 둔다.
 */
[data-accent="value"]{--vc-t:var(--vc-accent-value);--vc-t-on:var(--vc-ink);--vc-tint:var(--vc-tint-value)}
[data-accent="law"]{--vc-t:var(--vc-accent-law);--vc-t-on:var(--vc-surface);--vc-tint:var(--vc-tint-law)}
[data-accent="save"]{--vc-t:var(--vc-accent-save);--vc-t-on:var(--vc-surface);--vc-tint:var(--vc-tint-save)}
[data-accent="risk"]{--vc-t:var(--vc-accent-risk);--vc-t-on:var(--vc-surface);--vc-tint:var(--vc-tint-risk)}
[data-accent="proc"]{--vc-t:var(--vc-accent-proc);--vc-t-on:var(--vc-surface);--vc-tint:var(--vc-tint-proc)}

/* ══ 로고 ══════════════════════════════════════════════════════════
 * 마스터 66×76 을 --s 배율로만 축소한다. 작은 크기 재작도 금지(§4).
 * 클립은 22px 이상에서만 — .vc-logo--noclip 이 그 아래를 담당.
 */
.vc-logo{
  position:relative;flex:none;margin-top:-4px;
  width:calc(66px * var(--s));height:calc(76px * var(--s));
}
.vc-logo__master{
  position:absolute;left:0;top:0;width:66px;height:76px;
  transform:scale(var(--s));transform-origin:top left;
}
.vc-logo__back{
  position:absolute;left:9px;top:11px;width:53px;height:61px;
  background:var(--vc-honey);border:3px solid var(--vc-ink);border-radius:3px;
}
.vc-logo__front{
  position:absolute;left:0;top:4px;width:53px;height:61px;
  background:var(--vc-surface);border:3px solid var(--vc-ink);border-radius:3px;
}
.vc-logo__bar{ /* 허니 강조선 — 종이 상단 1/3 */
  position:absolute;left:10px;top:23px;width:26px;height:10px;
  background:var(--vc-honey);border-radius:1.5px;
}
.vc-logo__rule{ /* 잉크 글줄 — 클립 하단보다 아래 */
  position:absolute;left:10px;top:39px;width:26px;height:4px;
  background:var(--vc-ink);border-radius:999px;
}
.vc-logo__clip{position:absolute;left:3px;top:-9px;z-index:3}
.vc-logo--noclip .vc-logo__clip{display:none}

/* 다크 변형 — 뒷장/앞장/겉선/글줄만 바뀌고 강조선은 허니 유지 */
.vc-logo--dark .vc-logo__back{background:var(--vc-dark-back);border-color:var(--vc-dark-outline)}
.vc-logo--dark .vc-logo__front{background:var(--vc-dark-paper);border-color:var(--vc-dark-outline)}
.vc-logo__rule--dark{background:var(--vc-dark-rule)}

.vc-lockup{display:flex;align-items:center;gap:9px;flex:none;color:inherit}
.vc-lockup:hover{color:inherit}
.vc-lockup__name{font-weight:800;font-size:19px;letter-spacing:-.055em;white-space:nowrap}
.vc-lockup__name--sm{font-size:17px}

/* ══ 버튼 ══════════════════════════════════════════════════════════
 * 허니 버튼은 잉크 글자만. 흰 글자 금지(§2.1).
 */
.vc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 18px;border-radius:var(--vc-r-btn);
  font-size:13.5px;font-weight:700;white-space:nowrap;
  border:1.5px solid var(--vc-ink);background:var(--vc-ink);color:var(--vc-bg);
  transition:background 160ms ease-out,color 160ms ease-out;
}
.vc-btn:hover{background:var(--vc-bg);color:var(--vc-ink)}
.vc-btn--sm{height:36px;padding:0 14px}
.vc-btn--honey{background:var(--vc-honey);color:var(--vc-ink);font-size:14px}
.vc-btn--honey:hover{background:var(--vc-honey-200);color:var(--vc-ink)}
.vc-btn--ghost{background:transparent;color:var(--vc-ink);border:1.5px solid var(--vc-ink)}
.vc-btn--ghost:hover{background:var(--vc-ink);color:var(--vc-bg)}

.vc-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border:var(--vc-bd-thin);border-radius:var(--vc-r-btn);
  background:transparent;color:var(--vc-gray);
  transition:border-color 160ms ease-out,color 160ms ease-out;
}
.vc-iconbtn:hover{border-color:var(--vc-ink);color:var(--vc-ink)}
.vc-iconbtn svg{width:16px;height:16px}

/* ══ 탭 타깃 44px ══════════════════════════════════════════════════
 * 지침서는 컴포넌트 높이를 32·36·40px 로 못 박아 두고 동시에 "탭 타깃 44px
 * 미만 0건"을 요구한다. 둘 다 지키는 방법은 하나뿐이다 —
 * **보이는 크기는 그대로 두고 히트 영역만 넓힌다.**
 *
 * 세로로 촘촘히 쌓인 링크 묶음(푸터 컬럼 등)은 44 로 넓히면 서로를 덮어
 * 오히려 오작동한다. 그래서 단독 컨트롤에만 건다.
 */
.vc-tap,.vc-lockup,.vc-btn,.vc-iconbtn,.vc-burger,.vc-submit,.vc-chip,
.vc-pager a,.vc-pager span,.vc-foot__chip,.vc-secthead__more,.vc-dead__more,
.vc-calcband__go,.vc-nav a,.vc-crumb a,.vc-row__link,
.vc-compact__t,.vc-letter__form .vc-field{position:relative}

.vc-tap::after,.vc-lockup::after,.vc-btn::after,.vc-iconbtn::after,
.vc-burger::after,.vc-submit::after,.vc-chip::after,.vc-pager a::after,
.vc-pager span::after,.vc-foot__chip::after,.vc-secthead__more::after,
.vc-dead__more::after,.vc-calcband__go::after,
.vc-nav a::after,.vc-crumb a::after,.vc-row__link::after,.vc-compact__t::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:44px;
}
/* 정사각 아이콘 버튼은 가로도 넓힌다 */
.vc-iconbtn::after,.vc-burger::after,.vc-submit::after,
.vc-pager a::after,.vc-pager span::after{width:44px}

/* 인풋은 pseudo 로 덮으면 클릭이 막힌다 — 높이를 실제로 준다 */
.vc-field,.vc-submit{min-height:40px}
.vc-letter__form .vc-field,.vc-letter__form .vc-btn{min-height:42px}

/* 세로로 쌓인 링크 묶음(푸터 컬럼)은 44 로 넓히면 서로를 덮는다.
 * 겹치지 않는 선에서 WCAG 2.2 AA(2.5.8, 24×24)까지 넓힌다 — 위치는 그대로. */
.vc-foot__col a{padding:2px 0;margin:-2px 0}

.vc-skip{min-height:44px;display:inline-flex;align-items:center}

/* ══ 칩 · 배지 ═════════════════════════════════════════════════════ */
.vc-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12.5px;font-weight:600;color:var(--vc-ink);
  background:var(--vc-surface);border:var(--vc-bd-thin);
  border-radius:var(--vc-r-chip);padding:6px 11px;white-space:nowrap;
  transition:border-color 160ms ease-out;
}
.vc-chip:hover{color:var(--vc-ink);border-color:var(--vc-ink)}
.vc-chip--active{font-weight:700;background:var(--vc-honey-100);border:var(--vc-bd)}
.vc-chip__n{color:var(--vc-honey-ink);font-weight:700;font-variant-numeric:tabular-nums}

/* 클러스터 배지는 허니 틴트 pill 하나로 고정 — 클러스터별 색 분기 금지 */
.vc-badge{
  display:inline-flex;align-items:center;flex:none;
  font-size:10.5px;font-weight:700;color:var(--vc-bg);
  background:var(--vc-ink);border-radius:var(--vc-r-chip);padding:3px 8px;
}

/* ══ 섹션 헤더 ═════════════════════════════════════════════════════ */
.vc-secthead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.vc-secthead__t{font-weight:800;font-size:16.5px;letter-spacing:-.05em;white-space:nowrap}
.vc-secthead__rule{flex:1;height:1.5px;background:var(--vc-ink)}
.vc-secthead__rule--thin{height:1px;background:var(--vc-line)}
.vc-secthead__more{font-size:12.5px;font-weight:600;color:var(--vc-honey-ink);white-space:nowrap}
.vc-secthead__more:hover{color:var(--vc-ink)}

/* 인라인 화살표·셰브런 — 이모지 대신 쓰는 유일한 장치 */
.vc-secthead__more svg,.vc-dead__more svg,.vc-calcband__go svg,.vc-foot__chip svg{
  display:inline-block;width:13px;height:13px;vertical-align:-2px;
}

/* ══ 메타 · 형광펜 ═════════════════════════════════════════════════ */
.vc-metaline{font-size:11.5px;font-weight:700;color:var(--vc-honey-ink)}
.vc-metaline--sm{font-size:11px}
.vc-mark{box-shadow:inset 0 -8px 0 var(--vc-honey)}
.vc-mark--soft{box-shadow:inset 0 -8px 0 var(--vc-honey-200)}

/* ══ 카드 · 커버 ═══════════════════════════════════════════════════ */
.vc-card{background:var(--vc-surface);border:var(--vc-bd-thin);border-radius:var(--vc-r-card)}
.vc-card--strong{border:var(--vc-bd);border-radius:var(--vc-r-card-lg)}
.vc-darkcard{background:var(--vc-ink);border-radius:var(--vc-r-card-lg);color:var(--vc-bg)}

/* FEATURE 커버 — 가로 배너형 16:6.4 */
.vc-cover__art{width:100%;max-width:300px;height:auto}

/* LIST 썸네일 16:11 */

/* ↓ 위 .vc-cover / .vc-thumb 보다 **뒤에** 있어야 한다.
 * 같은 명시도(단일 클래스)라 순서가 승패를 가른다 — 앞에 두었더니
 * 테두리 2.5px 가 1px 로, 갈래색 바닥이 허니로, 여백 7px 가 14px 로 덮였다(실측). */
/* ══ 일러스트 커버 (정본 §B2 「A 커버」) ═══════════════════════════
 * 주색 프레임 2.5px → 사방 7px 여백 → 흰 카드 2px → 틴트 도트 → 모티프.
 * **이중 테두리가 정체다.** 하나로 줄이면 액자로 안 읽힌다.
 *
 * 도트는 주색 틴트로만. 검정 도트 금지(§B4).
 * 여백이 사방 같아야 하므로 box-sizing:border-box 가 필수다 — content-box 면
 * aspect-ratio 가 콘텐츠 박스에 걸려 상하 여백만 어긋난다(§B1 실측 확정).
 */
.vc-art__in{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;box-sizing:border-box;
  background-color:var(--vc-surface);border:2px solid var(--vc-ink);border-radius:6px;
  background-image:radial-gradient(var(--vc-tint) 1.5px,transparent 1.5px);
  background-size:8px 8px;
}
.vc-art__svg{width:100%;height:100%;max-height:100%}
/* 큰 슬롯은 배너라 세로가 짧다 — 모티프를 가운데 정사각으로 세운다. */



/* hover 는 은은한 리빌만 — 카드가 뜨거나 그림자가 커지지 않는다 */

/* ══ 리스트 행 (LIST 카드) ═════════════════════════════════════════ */
.vc-row{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:13px;
  align-items:start;padding:14px 0;border-top:var(--vc-bd-thin);
}
.vc-row:last-of-type{border-bottom:var(--vc-bd-thin)}
.vc-row__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.vc-row__t{
  font-weight:700;font-size:16.5px;line-height:1.42;letter-spacing:-.045em;
  color:var(--vc-ink);
}
a.vc-row__link{color:inherit;display:block}
a.vc-row__link:hover .vc-row__t{color:var(--vc-honey-ink)}
.vc-row__sum{font-size:13px;line-height:1.68;color:var(--vc-gray)}

/* ══ COMPACT (레일 인기글·관련 글) ═════════════════════════════════ */
.vc-compact{
  display:flex;gap:10px;align-items:baseline;
  padding:10px 0;border-top:var(--vc-bd-thin);
}
.vc-compact:last-child{border-bottom:var(--vc-bd-thin)}
.vc-compact__n{
  flex:none;width:13px;font-size:15px;font-weight:800;color:var(--vc-honey-ink);
  font-variant-numeric:tabular-nums;
}
.vc-compact__t{
  font-size:13px;line-height:1.55;font-weight:600;letter-spacing:-.03em;
  color:var(--vc-ink);
}
a.vc-compact__t:hover{color:var(--vc-honey-ink)}

/* ══ 페이지네이션 ══════════════════════════════════════════════════
 * the_posts_pagination() 은 nav > h2.screen-reader-text + div.nav-links 를 낸다.
 * 그래서 실제 정렬은 .nav-links 가 맡는다. */
.vc-pager{display:flex;gap:6px;justify-content:center;padding-top:20px;flex-wrap:wrap}
.vc-pager .nav-links{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;width:100%;
}
.vc-pager a,.vc-pager span{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--vc-r-thumb);
  font-size:13px;font-weight:600;color:var(--vc-gray);border:var(--vc-bd-thin);
}
.vc-pager a:hover{border-color:var(--vc-ink);color:var(--vc-ink)}
.vc-pager .current{
  font-weight:700;color:var(--vc-ink);
  background:var(--vc-honey);border:var(--vc-bd);
}

/* ══ 폼 ════════════════════════════════════════════════════════════ */
.vc-field{
  flex:1;min-width:0;height:40px;padding:0 12px;
  border:var(--vc-bd);border-radius:var(--vc-r-btn);
  background:var(--vc-surface);font-size:14px;color:var(--vc-ink);
}
.vc-field::placeholder{color:var(--vc-gray)}
.vc-field--lg{height:42px;padding:0 13px}
.vc-submit{
  width:40px;height:40px;flex:none;border:var(--vc-bd);
  border-radius:var(--vc-r-btn);background:var(--vc-ink);color:var(--vc-bg);
  display:flex;align-items:center;justify-content:center;
}
.vc-submit:hover{background:var(--vc-bg);color:var(--vc-ink)}
.vc-submit svg{width:16px;height:16px}

/* ══ 본문 2열 골격 — 홈·아카이브·기사·404 공용 ════════════════════ */
.vc-shell{display:grid;grid-template-columns:1fr;gap:32px;padding:26px 0 0}
.vc-main{display:flex;flex-direction:column;min-width:0}
.vc-side{display:flex;flex-direction:column;gap:20px;min-width:0}
/* 목록·빈 상태의 안내 문단 */
.vc-lead{font-size:14.5px;line-height:1.75;color:var(--vc-gray);max-width:620px}

/* ══ 사이드바 4블록 ════════════════════════════════════════════════ */
.vc-side__search{display:flex;gap:8px}
.vc-side__chips{display:flex;flex-wrap:wrap;gap:6px}
.vc-side__label{font-size:12.5px;font-weight:700;display:block;margin-bottom:8px}
.vc-side__list{display:flex;flex-direction:column}

/* 다가오는 기한 (다크 카드) */
.vc-dead{padding:15px;display:flex;flex-direction:column;gap:10px}
.vc-dead__head{display:flex;align-items:center;justify-content:space-between}
.vc-dead__t{font-size:12px;font-weight:700;color:var(--vc-honey)}
.vc-dead__y{font-size:11px;color:var(--vc-gray-dark)}
.vc-dead__list{display:flex;flex-direction:column;gap:7px}
.vc-dead__item{display:flex;align-items:baseline;gap:10px}
/* D-day 열: 46px 고정 + nowrap. "D-127" 이 접히면 baseline 이 무너진다 */
.vc-dead__d{
  flex:none;width:46px;white-space:nowrap;
  font-weight:800;font-size:13.5px;color:var(--vc-bg);
}
.vc-dead__item:first-child .vc-dead__d{font-size:15px;color:var(--vc-honey)}
.vc-dead__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.vc-dead__name{font-size:12.5px;line-height:1.4;color:var(--vc-bg)}
.vc-dead__item:first-child .vc-dead__name{font-weight:700}
.vc-dead__date{font-size:11px;color:var(--vc-gray-dark)}
.vc-dead__sep{height:1px;background:var(--vc-line-dark)}
.vc-dead__more{font-size:12px;font-weight:600;color:var(--vc-honey)}
.vc-dead__more:hover{color:var(--vc-honey-200)}
.vc-dead__empty{font-size:12.5px;line-height:1.7;color:var(--vc-gray-dark)}

/* ══ 상단바 (700px+) ═══════════════════════════════════════════════ */

/* ══ 헤더 (sticky) ═════════════════════════════════════════════════ */
.vc-header{
  position:sticky;top:0;z-index:40;
  background:var(--vc-header-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:var(--vc-bd);
}
.vc-header__in{
  height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.vc-header__left{display:flex;align-items:center;gap:26px;min-width:0}
.vc-header__right{display:flex;align-items:center;gap:8px;flex:none}

.vc-nav{display:none;gap:19px;font-size:14.5px;font-weight:600}
.vc-nav a{color:var(--vc-ink);white-space:nowrap;padding:2px 0}
.vc-nav a:hover{color:var(--vc-honey-ink)}
/* 현재 항목은 밑줄이 아니라 형광펜 */
.vc-nav a[aria-current]{box-shadow:inset 0 -9px 0 var(--vc-honey-200);color:var(--vc-ink)}

/* 모바일 내비 — 지침서 §6.3 의 두 안 중 햄버거 오버레이.
 * overflow:hidden 안은 항목이 화면 밖으로 잘려 키보드 경로가 끊긴다. */
.vc-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:36px;height:36px;padding:0 8px;flex:none;
  border:var(--vc-bd-thin);border-radius:var(--vc-r-btn);background:transparent;
}
.vc-burger span{display:block;height:1.5px;background:var(--vc-ink);border-radius:999px}
.vc-burger span:nth-child(1),.vc-burger span:nth-child(2){width:100%}
.vc-burger span:nth-child(3){width:60%;background:var(--vc-honey-ink)}
.vc-burger[aria-expanded="true"]{border-color:var(--vc-ink)}

.vc-navpanel{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:50;
  background:var(--vc-bg);display:flex;flex-direction:column;
  padding:0 var(--vc-gutter) env(safe-area-inset-bottom);overflow-y:auto;
}
.vc-navpanel[hidden]{display:none}
.vc-navpanel__top{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:var(--vc-bd);
}
.vc-navpanel__close{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;font-size:20px;line-height:1;color:var(--vc-ink);
}
.vc-navpanel a{
  display:flex;align-items:center;height:56px;
  font-size:16px;font-weight:700;color:var(--vc-ink);
  border-bottom:var(--vc-bd-thin);
}
.vc-navpanel a[aria-current]{color:var(--vc-honey-ink)}
.vc-navpanel__sub{margin-top:8px}
.vc-navpanel__sub a{height:48px;font-size:13.5px;font-weight:600;color:var(--vc-gray)}

/* ══ 뉴스레터 (풀블리드) ═══════════════════════════════════════════ */
.vc-letter{background:var(--vc-honey-100);border-top:var(--vc-bd);margin-top:36px}
.vc-letter__in{
  padding:24px var(--vc-gutter);display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  max-width:var(--vc-container);margin:0 auto;
}
.vc-letter__copy{display:flex;flex-direction:column;gap:4px;max-width:430px}
.vc-letter__t{font-size:20px;font-weight:800;letter-spacing:-.05em}
.vc-letter__d{font-size:13.5px;line-height:1.7;color:var(--vc-gray)}
.vc-letter__form{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:250px;max-width:380px}
.vc-letter__form .vc-btn{height:42px}
.vc-letter__note{
  flex-basis:100%;font-size:11.5px;line-height:1.6;color:var(--vc-gray);
}
.vc-letter__note a{text-decoration:underline;text-underline-offset:2px}
.vc-letter__msg{flex-basis:100%;font-size:12.5px;font-weight:700}
.vc-letter__msg[data-state="success"]{color:var(--vc-honey-ink)}
.vc-letter__msg[data-state="error"]{color:var(--vc-ink)}

/* ══ 푸터 (다크) ═══════════════════════════════════════════════════ */
.vc-footer{background:var(--vc-ink);color:var(--vc-bg)}
.vc-foot{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:28px 0 20px}
.vc-foot__brand{display:flex;flex-direction:column;gap:9px}
.vc-foot__disc{
  font-size:12px;line-height:1.8;color:var(--vc-gray-dark);max-width:310px;
}
.vc-foot__col{display:flex;flex-direction:column;gap:7px}
.vc-foot__label{font-size:11px;font-weight:700;color:var(--vc-honey)}
.vc-foot__col a{font-size:12.5px;color:var(--vc-gray-footer)}
.vc-foot__col a:hover{color:var(--vc-honey)}
.vc-foot__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0 22px;border-top:1px solid var(--vc-line-dark);flex-wrap:wrap;
}
.vc-foot__copy{font-size:11.5px;color:var(--vc-gray-dark)}
.vc-foot__chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vc-foot__chip{
  font-size:11.5px;color:var(--vc-gray-dark);background:transparent;
  border:1px solid var(--vc-line-dark-strong);border-radius:var(--vc-r-thumb);
  padding:6px 11px;
}
.vc-foot__chip:hover{color:var(--vc-honey);border-color:var(--vc-honey)}
.vc-foot__disclosure{
  margin-top:8px;flex-basis:100%;font-size:11.5px;line-height:1.8;
  color:var(--vc-gray-dark);
}
.vc-foot__disclosure a{color:var(--vc-gray-footer)}

@media (min-width:700px){
  .vc-nav{display:flex}
  .vc-burger{display:none}
  .vc-navpanel{display:none !important}
  .vc-foot{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
  .vc-row{grid-template-columns:132px minmax(0,1fr);gap:16px}
}

/* 갈래 칩 — 좁은 폭에서는 목록 위, 넓은 폭에서는 사이드바.
 * 마크업은 두 벌이지만 한 번에 하나만 그려진다(display:none 은 낭독도 안 된다). */
.vc-chipbar{margin:0 0 20px}

@media (min-width:1000px){
  .vc-shell{grid-template-columns:minmax(0,1fr) var(--vc-side);gap:40px;padding:32px 0 0}
  .vc-side{position:sticky;top:76px;align-self:start}
  .vc-chipbar{display:none}
}
@media (max-width:999px){
  .vc-side > .vc-side__chips{display:none}
}