/* =====================================================
   InterLink — Shared Topbar + Mega Menu
   (index.html 인라인 메뉴에서 추출, 전 페이지 공용)
   style.css 뒤에 로드해 레거시 메뉴 규칙을 덮어씀.
===================================================== */
:root {
  --c-navy: #0B2440;
  --c-primary: #328FE1;
  --c-primary-d: #1F6DB8;
  --c-primary-l: #5EA8E8;
  --c-text-i: #16191F;
  --c-text-mute-i: #57606A;
  --c-blue: #328FE1;
}

/* ============ TOPBAR ============ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-navy); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar:not(.topbar-over).scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: stretch; gap: 28px;
  padding: 0 24px; height: 80px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 20px; color: #fff;
  white-space: nowrap; align-self: center;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; color: var(--c-primary); flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { letter-spacing: -.3px; line-height: 1; }
/* 폭 고정(=height*5, viewBox 260x52) — 로고 교체 시 reflow/밀림 방지 */
.brand-logo { height: 30px; width: 150px; display: block; object-fit: contain; object-position: left center; }
.topnav { display: flex; align-items: stretch; flex: 1; gap: 0; }
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-item > a {
  display: inline-flex; align-items: center;
  padding: 0 18px; height: 100%;
  color: rgba(255,255,255,.88);
  font-size: 14px; font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-item:hover > a, .nav-item.active > a, .nav-item.has-mega.open > a {
  color: var(--c-primary-l);
  background: rgba(255,255,255,.06);
}
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.btn-topbar {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px; font-size: 14px; font-weight: 500;
  border-radius: 4px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-topbar.ghost {
  background: transparent; color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.25);
}
.btn-topbar.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn-topbar.prim {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.btn-topbar.prim:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); }

/* ===== MEGA PANEL ===== */
.nav-item.has-mega { position: static; }
.mega-panel {
  display: block; position: absolute; top: 100%; left: 0; right: 0; width: 100%;
  background: #FFFFFF; color: var(--c-text-i);
  border-top: 1px solid #E5E9EE;
  box-shadow: 0 14px 26px -8px rgba(8,18,32,.10);
  z-index: 200;
  visibility: hidden; opacity: 0;
  pointer-events: none;
  transition: none;
}
.nav-item.has-mega.open > .mega-panel {
  visibility: visible; opacity: 1;
  pointer-events: auto;
  transition: none;
  animation: megaOpen .17s cubic-bezier(.2,.7,.3,1);
}
@keyframes megaOpen {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 메뉴 간 이동(다른 메가가 이미 열려 있던 경우)엔 진입 애니메이션 생략 — 깜빡임 방지 */
.nav-item.has-mega.open.mega-switch > .mega-panel { animation: none; }
/* 레거시 style.css 닫힘-상태 transform/blur 무력화 (패널만 한 덩어리로 움직임) */
.mega-sidebar, .mega-intro, .mega-panel .mega-card, .mega-tablist li {
  opacity: 1; transform: none; filter: none;
}
.nav-item.has-mega.open > .mega-panel .mega-sidebar,
.nav-item.has-mega.open > .mega-panel .mega-intro,
.nav-item.has-mega.open > .mega-panel .mega-card,
.nav-item.has-mega.open > .mega-panel .mega-tablist li {
  opacity: 1; transform: none; filter: blur(0);
}
.mega-sidebar, .mega-intro, .mega-panel .mega-card, .mega-tablist li { transition-delay: 0s; }

.nav-item.has-mega:hover > .mega-panel .mega-sidebar,
.mega-panel:hover .mega-sidebar,
.nav-item.has-mega:hover > .mega-panel .mega-intro,
.mega-panel:hover .mega-intro { transition-delay: .06s; }

.nav-item.has-mega:hover > .mega-panel.is-simple .mega-card:nth-child(1),
.mega-panel.is-simple:hover .mega-card:nth-child(1) { transition-delay: .10s; }
.nav-item.has-mega:hover > .mega-panel.is-simple .mega-card:nth-child(2),
.mega-panel.is-simple:hover .mega-card:nth-child(2) { transition-delay: .15s; }
.nav-item.has-mega:hover > .mega-panel.is-simple .mega-card:nth-child(3),
.mega-panel.is-simple:hover .mega-card:nth-child(3) { transition-delay: .20s; }
.nav-item.has-mega:hover > .mega-panel.is-simple .mega-card:nth-child(4),
.mega-panel.is-simple:hover .mega-card:nth-child(4) { transition-delay: .25s; }

.nav-item.has-mega:hover > .mega-panel .mega-panel-tab.active .mega-card:nth-child(1),
.mega-panel:hover .mega-panel-tab.active .mega-card:nth-child(1) { transition-delay: .08s; }
.nav-item.has-mega:hover > .mega-panel .mega-panel-tab.active .mega-card:nth-child(2),
.mega-panel:hover .mega-panel-tab.active .mega-card:nth-child(2) { transition-delay: .12s; }
.nav-item.has-mega:hover > .mega-panel .mega-panel-tab.active .mega-card:nth-child(3),
.mega-panel:hover .mega-panel-tab.active .mega-card:nth-child(3) { transition-delay: .16s; }
.nav-item.has-mega:hover > .mega-panel .mega-panel-tab.active .mega-card:nth-child(4),
.mega-panel:hover .mega-panel-tab.active .mega-card:nth-child(4) { transition-delay: .20s; }
.nav-item.has-mega:hover > .mega-panel .mega-panel-tab.active .mega-card:nth-child(5),
.mega-panel:hover .mega-panel-tab.active .mega-card:nth-child(5) { transition-delay: .24s; }
.nav-item.has-mega:hover > .mega-panel .mega-panel-tab.active .mega-card:nth-child(6),
.mega-panel:hover .mega-panel-tab.active .mega-card:nth-child(6) { transition-delay: .28s; }
.nav-item.has-mega:hover > .mega-panel .mega-panel-tab.active .mega-card:nth-child(7),
.mega-panel:hover .mega-panel-tab.active .mega-card:nth-child(7) { transition-delay: .32s; }

.nav-item.has-mega:hover > .mega-panel .mega-tablist li:nth-child(1),
.mega-panel:hover .mega-tablist li:nth-child(1) { transition-delay: .08s; }
.nav-item.has-mega:hover > .mega-panel .mega-tablist li:nth-child(2),
.mega-panel:hover .mega-tablist li:nth-child(2) { transition-delay: .11s; }
.nav-item.has-mega:hover > .mega-panel .mega-tablist li:nth-child(3),
.mega-panel:hover .mega-tablist li:nth-child(3) { transition-delay: .14s; }
.nav-item.has-mega:hover > .mega-panel .mega-tablist li:nth-child(4),
.mega-panel:hover .mega-tablist li:nth-child(4) { transition-delay: .17s; }
.nav-item.has-mega:hover > .mega-panel .mega-tablist li:nth-child(5),
.mega-panel:hover .mega-tablist li:nth-child(5) { transition-delay: .20s; }
.nav-item.has-mega:hover > .mega-panel .mega-tablist li:nth-child(6),
.mega-panel:hover .mega-tablist li:nth-child(6) { transition-delay: .23s; }
.nav-item.has-mega:hover > .mega-panel .mega-tablist li:nth-child(7),
.mega-panel:hover .mega-tablist li:nth-child(7) { transition-delay: .26s; }

.mega-panel-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 360px 1fr; min-height: 400px;
}
.mega-sidebar { background: #F4F6F8; padding: 28px 20px; border-right: 1px solid #E5E9EE; }
.mega-side-title {
  display: block; font-size: 12px; font-weight: 500; text-transform: uppercase;
  color: var(--c-text-mute-i); letter-spacing: .02em;
  margin-bottom: 14px; padding: 0 14px;
}
.mega-tablist { list-style: none; margin: 0 0 20px; padding: 0; }
.mega-tablist li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-size: 15.5px; font-weight: 600;
  color: var(--c-text-i); border-radius: 6px; cursor: pointer;
  transition: background .12s, color .12s;
}
.mega-tablist li::after {
  content: "›"; color: var(--c-text-mute-i); font-size: 19px; line-height: 1;
  opacity: 0; transition: opacity .12s, transform .12s, color .12s;
}
.mega-tablist li:hover, .mega-tablist li.active {
  background: var(--c-primary); color: #fff;
}
.mega-tablist li:hover::after, .mega-tablist li.active::after {
  opacity: 1; color: #fff; transform: translateX(2px);
}
.mega-panel a, .topnav .mega-panel a {
  color: var(--c-text-i); background: transparent; padding: 0;
}
.mega-panel a:hover, .topnav .mega-panel a:hover {
  background: transparent; color: var(--c-primary);
}
.mega-all-link, .topnav .mega-all-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px; padding: 9px 16px;
  font-size: 14.5px; font-weight: 600;
  color: var(--c-primary); background: transparent;
  border: 1px solid var(--c-primary); border-radius: 4px;
  transition: background .12s, color .12s, border-color .12s;
}
.mega-all-link:hover, .topnav .mega-all-link:hover {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
/* 사이드바 '모든 제품 보기' — 보더 없는 텍스트 링크 + 화살표 슬라이드 */
.mega-sidebar .mega-all-link {
  margin: 4px 14px 0; padding: 0; background: transparent; border: 0; border-radius: 0;
  color: var(--c-primary); font-weight: 600; gap: 7px;
}
.mega-sidebar .mega-all-link:hover { background: transparent; color: var(--c-primary-d); }
.mega-sidebar .mega-all-link .arr { display: inline-flex; transition: transform .18s ease; }
.mega-sidebar .mega-all-link .arr svg { width: 15px; height: 15px; display: block; }
.mega-sidebar .mega-all-link:hover .arr { transform: translateX(4px); }
/* 링크 호버 시 위 활성 탭 하이라이트 해제 */
.mega-sidebar:has(.mega-all-link:hover) .mega-tablist li.active {
  background: transparent; color: var(--c-text-i); box-shadow: none;
}
.mega-sidebar:has(.mega-all-link:hover) .mega-tablist li.active::after { opacity: 0; }
.mega-sidebar:has(.mega-all-link:hover) .mega-tablist li.active .tl svg { opacity: .66; }
.mega-content { padding: 28px 32px; position: relative; }
.mega-panel-tab { display: none; }
.mega-panel-tab.active { display: block; }
.mega-h { margin: 0 0 4px; font-size: 23px; font-weight: 800; letter-spacing: -.4px; color: var(--c-text-i); }
.mega-sub { margin: 0 0 24px; font-size: 15px; color: var(--c-text-mute-i); }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 24px; }
.mega-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border: 1px solid transparent; border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background .15s, border-color .15s, box-shadow .15s; position: relative;
}
.mega-card::after {
  content: "→"; position: absolute; right: 14px; top: 14px;
  color: var(--c-primary); opacity: 0;
  transition: opacity .15s, transform .15s; font-size: 14px;
}
.mega-card:hover {
  background: rgba(46,85,200,.05);
  border-color: transparent;
}
.mega-card:hover::after { opacity: 1; transform: translateX(2px); }
.mega-card:hover strong { color: var(--c-primary); }
.mega-card strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--c-text-i); padding-right: 24px; transition: color .15s; }
.mega-card p { margin: 0; margin-top: 2px; font-size: 13.5px; color: var(--c-text-mute-i); line-height: 1.5; }
/* 탭 아이콘 */
.mega-tablist li .tl { display: inline-flex; align-items: center; gap: 9px; }
.mega-tablist li .tl svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .66; transition: opacity .12s ease; }
.mega-tablist li:hover .tl svg, .mega-tablist li.active .tl svg { opacity: 1; }
/* 카드 아이콘 — 아이콘 왼쪽 + 제목·설명 (전 패널) */
.mega-panel .mega-card {
  display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 6px; align-items: start;
  padding: 14px 16px;
}
.mega-panel .mega-card > .mc-ic {
  grid-row: 1 / span 2; align-self: start; margin-top: 2px;
  width: 24px; height: 24px; color: var(--c-primary); flex-shrink: 0;
}
.mega-panel.is-simple .mega-panel-inner {
  display: grid; grid-template-columns: 360px 1fr; min-height: 340px; padding: 0;
}
.mega-intro {
  background: #F4F6F8; border-right: 1px solid #E5E9EE;
  padding: 28px 24px; display: flex; flex-direction: column;
}
.mega-intro::before { display: none; }
.mega-intro-img {
  display: block; width: 100%; height: 104px; border-radius: 10px;
  margin: 0 0 20px; border: 0;
  background-size: cover; background-position: center; flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.mega-intro-cta .mega-all-link {
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
  color: var(--c-primary); font-weight: 600; gap: 7px;
}
.mega-intro-cta .mega-all-link:hover { background: transparent; color: var(--c-primary-d); }
.mega-intro-cta .mega-all-link .arr { display: inline-flex; transition: transform .18s ease; }
.mega-intro-cta .mega-all-link .arr svg { width: 15px; height: 15px; display: block; }
.mega-intro-cta .mega-all-link:hover .arr { transform: translateX(4px); }
.mega-intro-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-mute-i); margin-bottom: 12px;
}
.mega-intro h4 { margin: 0 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--c-text-i); line-height: 1.3; }
.mega-intro p { margin: 0 0 20px; font-size: 14px; color: var(--c-text-mute-i); line-height: 1.65; }
.mega-intro-cta { margin-top: auto; }
.mega-simple-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 28px 16px; padding: 28px 32px; }
.mega-column { min-width: 0; }
.mega-col-heading {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  color: var(--c-text-mute-i);
}
.mega-card-list { display: flex; flex-direction: column; gap: 2px; }
.mega-card-list .mega-card p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-panel.is-simple .mega-card { padding: 14px 16px; }
.mega-panel.is-simple .mega-card strong { font-size: 15.5px; }
.mega-panel.is-simple .mega-card p { font-size: 13.5px; margin-top: 2px; line-height: 1.5; }

/* 메가메뉴 배경 scrim */
.mega-scrim {
  position: fixed; left: 0; right: 0; top: 80px; bottom: 0;
  background: rgba(6,8,10,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 99;
  will-change: opacity;
  transition: opacity .1s ease, visibility 0s linear .1s;
}
.topbar:has(.nav-item.has-mega.open) ~ .mega-scrim {
  opacity: 1; visibility: visible;
  transition: opacity .1s ease, visibility 0s;
}

/* ============ HAMBURGER + MOBILE ============ */
.hamburger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 32px; height: 32px; align-self: center;
  flex-direction: column; justify-content: center; gap: 5px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; transition: transform .2s; }

@media (max-width: 960px) {
  .topnav, .topbar-actions { display: none; }
  .hamburger { display: flex; }
  .topbar-inner { height: 64px; }
  .mega-scrim { display: none; }
  .topbar.is-open .topnav {
    display: flex; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--c-navy); padding: 8px 24px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    gap: 0; z-index: 99; max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .topbar.is-open .nav-item { display: block; }
  .topbar.is-open .nav-item > a {
    height: auto; padding: 13px 0; width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  /* 모바일에서는 메가패널 숨김 — 상위 메뉴 링크만 노출 */
  .topbar.is-open .mega-panel { display: none; }
}

/* ===== 홈 오버레이 헤더 (index 인라인에서 이관) ===== */
.topbar-over {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(12,12,14,.48) 0%, rgba(12,12,14,.30) 100%);
  backdrop-filter: blur(20px) saturate(105%);
  -webkit-backdrop-filter: blur(20px) saturate(105%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 6px 26px rgba(0,0,0,.18);
  transition: background .25s ease, box-shadow .25s ease;
}
.topbar-over.scrolled {
  background: linear-gradient(180deg, rgba(12,12,14,.86) 0%, rgba(12,12,14,.78) 100%);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
/* 홈 헤더 — 로고·메뉴 크게 + 메뉴 가운데 정렬 */
.topbar-over .brand-logo { height: 38px; width: 190px; }
.topbar-over .topnav { justify-content: center; }
.topbar-over .nav-item > a { font-size: 16px; padding: 0 20px; }
/* 메뉴 호버 시 흰 배경 제거 (글자 색만 변경) */
.topbar-over .nav-item:hover > a,
.topbar-over .nav-item.active > a,
.topbar-over .nav-item.has-mega.open > a { background: transparent; }
/* 메가 패널 — 더 여유있게 */
.topbar-over .mega-panel-inner { min-height: 520px; }
.topbar-over .mega-content { padding: 44px 40px; }
.topbar-over .mega-sidebar { padding: 44px 20px; }
/* 카드 설명 말줄임 끄기 — 두 줄까지 풀어쓰기 */
.topbar-over .mega-card-list .mega-card p {
  white-space: normal; overflow: visible; text-overflow: clip;
}
/* 카드 상하 갭 줄이기 */
.topbar-over .mega-panel .mega-card { padding-top: 9px; padding-bottom: 9px; }
.topbar-over .mega-grid { row-gap: 12px; }
/* 헤더 액션 버튼 — 차분하게 */
.topbar-over .topbar-actions { gap: 8px; }
.topbar-over .btn-topbar {
  padding: 9px 18px; font-size: 14px; font-weight: 600;
  border-radius: 8px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topbar-over .btn-topbar.ghost {
  color: #fff; border-color: rgba(255,255,255,.24); background: transparent;
}
.topbar-over .btn-topbar.ghost:hover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4);
}
.topbar-over .btn-topbar.prim {
  color: #fff; border: none;
  background: #1E88BE;
  box-shadow: 0 4px 14px rgba(30,136,190,.22);
}
.topbar-over .btn-topbar.prim:hover {
  background: #176E9C;
  box-shadow: 0 6px 18px rgba(30,136,190,.3);
}

/* ===== 메가메뉴 열림 시 — 홈 헤더를 흰색화(아래 흰 패널과 통일) ===== */
.topbar-over:has(.nav-item.has-mega.open) {
  background: #fff;
  border-bottom-color: #E5E9EE;
  box-shadow: 0 14px 26px -8px rgba(8,18,32,.10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 흰 로고 → 파란 로고(#2674B9)로 교체 */
.topbar-over:has(.nav-item.has-mega.open) .brand-logo {
  content: url("../assets/logo-blue.svg");
}
/* 메뉴 글자 다크화 */
.topbar-over:has(.nav-item.has-mega.open) .nav-item > a {
  color: var(--c-text-i);
}
.topbar-over:has(.nav-item.has-mega.open) .nav-item:hover > a,
.topbar-over:has(.nav-item.has-mega.open) .nav-item.has-mega.open > a {
  color: var(--c-primary); background: transparent;
}
/* 고스트 버튼 다크 보더/글자 */
.topbar-over:has(.nav-item.has-mega.open) .btn-topbar.ghost {
  color: var(--c-text-i); border-color: rgba(0,0,0,.18); background: transparent;
}
.topbar-over:has(.nav-item.has-mega.open) .btn-topbar.ghost:hover {
  background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.3);
}

/* ===== 상세/서브 페이지 + 홈 — 스크롤 시 헤더를 밝은 솔리드로 전환 =====
   dhero(서브) 또는 hero(홈)를 지나며 어두운 글래스 헤더가 무겁게 떠 보임
   → 흰 배경·다크 글자·파란 로고로 통일 */
body:has(.dhero) .topbar-over.scrolled,
body:has(.hero) .topbar-over.scrolled {
  background: #fff;
  border-bottom-color: #E5E9EE;
  box-shadow: 0 6px 22px -10px rgba(8,18,32,.14);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body:has(.dhero) .topbar-over.scrolled .brand-logo,
body:has(.hero) .topbar-over.scrolled .brand-logo {
  content: url("../assets/logo-blue.svg");
}
body:has(.dhero) .topbar-over.scrolled .nav-item > a,
body:has(.hero) .topbar-over.scrolled .nav-item > a {
  color: var(--c-text-i);
}
body:has(.dhero) .topbar-over.scrolled .nav-item:hover > a,
body:has(.dhero) .topbar-over.scrolled .nav-item.has-mega.open > a,
body:has(.hero) .topbar-over.scrolled .nav-item:hover > a,
body:has(.hero) .topbar-over.scrolled .nav-item.has-mega.open > a {
  color: var(--c-primary); background: transparent;
}
body:has(.dhero) .topbar-over.scrolled .btn-topbar.ghost,
body:has(.hero) .topbar-over.scrolled .btn-topbar.ghost {
  color: var(--c-text-i); border-color: rgba(0,0,0,.18); background: transparent;
}
body:has(.dhero) .topbar-over.scrolled .btn-topbar.ghost:hover,
body:has(.hero) .topbar-over.scrolled .btn-topbar.ghost:hover {
  background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.3);
}

/* ===== Scroll-to-top 버튼 (전 페이지 공통, JS 주입) ===== */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: var(--c-primary);
  border: none;
  box-shadow: 0 8px 22px rgba(50,143,225,.34), inset 0 1px 0 rgba(255,255,255,.2);
  cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease,
              background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover {
  color: #fff;
  background: var(--c-primary-d);
  box-shadow: 0 14px 30px rgba(50,143,225,.42), inset 0 1px 0 rgba(255,255,255,.2);
}
.to-top:active { box-shadow: 0 5px 14px rgba(27,42,68,.16); }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top.show { transition: opacity .2s ease; transform: none; }
}