/* =====================================================================
   DragDocs — 사이트 공통 레이아웃 (개편안)
   헤더 · 홈 히어로/도구 그리드 · 도구 페이지 · 푸터 · 반응형
   (모달·폼·FAB·칩은 styles.css, 본문 섹션은 body.css)
   ===================================================================== */

/* ------------------------------------------------------------------- Header */
/* 바(N11 메가메뉴): 흰 배경+헤어라인 대신 종이색 틴트 + 블러로 본문 위에 얹힌다 — 경계선 없음 */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: color-mix(in srgb, var(--grey-98) 92%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: var(--text);
}
.site-header__inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-24);
  display: flex;
  align-items: center;
  gap: var(--sp-24);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: var(--fs-t2);
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-word { line-height: 1; }
.brand-mark { height: 0.95em; width: auto; }

.site-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--sp-12); }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: var(--surface-1); }
.nav-link.is-active { font-weight: 700; color: var(--accent-blue); background: var(--grey-97); }
.nav-link svg { flex: none; }
.nav-link--mega { font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.nav-link__caret { transition: transform 0.2s ease; }
.nav-link--mega[aria-expanded="true"] { background: var(--surface-1); }
.nav-link--mega[aria-expanded="true"] .nav-link__caret { transform: rotate(180deg); }

/* '도구' 메가 패널 — 헤더 아래 전체 폭, 3그룹 + 피처 셀. 열림은 main.js wireMega() */
.mega-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: color-mix(in srgb, var(--white) 96%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 30px 60px -28px rgba(13, 18, 32, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}
.mega-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.mega-panel__inner {
  max-width: var(--container); margin: 0 auto; padding: 28px var(--sp-24) 32px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.1fr; gap: var(--sp-32);
}
.mega-col { display: flex; flex-direction: column; gap: 4px; }
.mega-col__head {
  margin: 0 0 8px 12px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; color: var(--text-slate);
}
.mega-link {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  color: var(--text); transition: background 0.15s ease;
}
.mega-link:hover, .mega-link.is-active { background: var(--surface-1); }
.mega-link.is-active b { color: var(--accent-blue); }
.mega-link img { width: 28px; height: 28px; flex: none; margin-top: 1px; }
.mega-link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-link b { font-size: 15px; font-weight: 700; color: var(--ink); }
.mega-link small { font-size: 13px; line-height: 1.45; color: var(--text-paragraph); }
.mega-feature {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  border-radius: var(--radius-lg); background: var(--grey-98); border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mega-feature:hover { background: var(--white); border-color: color-mix(in srgb, var(--accent-blue) 40%, white); }
.mega-feature svg { color: var(--accent-blue); }
.mega-feature b { font-size: 16px; font-weight: 700; color: var(--ink); }
.mega-feature small { font-size: 13px; line-height: 1.5; color: var(--text-paragraph); }
.mega-feature__cta { margin-top: auto; padding-top: 8px; font-size: var(--fs-p3); font-weight: 700; color: var(--accent-blue); }

/* 패널 열릴 때 본문을 살짝 어둡게 — 헤더(sticky) 기준 absolute 로 그 아래 한 화면을 덮는다 (헤더의 backdrop-filter 때문에 fixed 는 피함) */
.nav-scrim {
  position: absolute; top: 100%; left: 0; right: 0; height: 100vh; z-index: -1;
  background: rgba(13, 18, 32, 0.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.24s ease, visibility 0.24s;
}
.nav-scrim.is-active { opacity: 1; visibility: visible; }

.site-header__actions { margin-left: auto; gap: 6px; }
.site-header__actions .lang-btn { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; color: var(--text); }
.site-header__actions .lang-btn:hover { background: var(--surface-1); }
.btn-primary--sm {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; margin-left: 8px;
  border-radius: 10px; background: var(--accent-blue); color: var(--white);
  font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.btn-primary--sm:hover { background: color-mix(in srgb, var(--accent-blue) 85%, black); }

/* 배지(출력 형식·역할) */
.out { display: inline-block; font-size: var(--fs-caption); font-weight: 800; line-height: 1.5; padding: 2px 8px; border-radius: 6px; }
.out--html { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); color: var(--accent-blue); }
.out--pdf { background: rgba(255, 66, 99, 0.1); color: #d11f3d; }
.out--office { background: rgba(217, 102, 10, 0.1); color: #d9660a; }
.out--epub { background: rgba(52, 211, 153, 0.14); color: #0f8a5f; }

/* 도구 액션 버튼 (파일 선택 · 사용해보기) — 제품 강조색 */
.btn-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 64px; padding: 0 44px; border-radius: 14px;
  background: var(--tool-accent, var(--accent-blue)); color: var(--white);
  font: inherit; font-size: var(--fs-p1); font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: filter 0.15s ease;
}
.btn-tool:hover { filter: brightness(0.94); }

/* ------------------------------------------------------------- Home hero */
.home-hero {
  padding: 72px 0 40px;
  background: linear-gradient(180deg, var(--grey-98) 0%, var(--white) 100%);
}
.home-hero__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); text-align: center;
}
.home-hero__title {
  font-size: clamp(32px, 4.2vw, 56px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em;
  color: var(--ink); max-width: 900px; word-break: keep-all; text-wrap: balance;
}
.home-hero__lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--text-paragraph); max-width: 760px; text-wrap: pretty; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12) var(--sp-24); font-size: var(--fs-p3); font-weight: 600; color: var(--text); }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { color: var(--accent-blue); }
/* 제품소개 영상 — 히어로에서 바로 보이는 보조 CTA */
.btn-video {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px 0 8px;
  border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--grey-91);
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-soft); transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn-video:hover { box-shadow: var(--shadow-card); border-color: var(--surface-3); }
.btn-video__play { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-blue); color: var(--white); display: grid; place-items: center; }
.btn-video__play svg { margin-left: 2px; }
.btn-video small { font-size: var(--fs-caption); font-weight: 600; color: var(--text-paragraph); }
.cat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); }
.cat-chip {
  height: 40px; padding: 0 20px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center;
  background: var(--white); border: 1px solid var(--grey-91); color: var(--text);
  font: inherit; font-size: var(--fs-p3); font-weight: 600; cursor: pointer;
}
.cat-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 700; }

/* -------------------------------------------------------------- Tool grid */
.tools { padding: 8px 0 88px; }
.tools__grid {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24);
}
.tool-card {
  display: flex; flex-direction: column; gap: 14px; min-height: 250px;
  padding: 28px 24px 24px; border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--border); color: var(--text);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tool-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.tool-card[hidden] { display: none; }
.tool-card__head { display: flex; align-items: center; gap: 10px; }
.tool-card__head img { width: 48px; height: 48px; }
.tool-card__product { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; color: var(--text-slate); text-transform: uppercase; }
.tool-card__title { font-size: var(--fs-p1); font-weight: 700; line-height: 1.3; color: var(--ink); }
.tool-card__desc { flex: 1; font-size: var(--fs-p3); line-height: 1.6; color: var(--text-paragraph); }
.tool-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool-card__chips .chip { font-size: var(--fs-caption); padding: 2px 10px; }
.tool-card__chips svg { color: var(--text-slate); }
.tool-card__roles { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-caption); color: var(--text-paragraph); }
.tool-card__roles li { display: flex; align-items: center; gap: 8px; }

/* 2단 위계 — 메인 3(열람·추출·PDF 변환): 큰 틴트 카드 · 서브 3: 아이콘이 왼쪽에 붙는 컴팩트 가로형.
   형식이 다르므로 "같은 카드 6개"가 아니라 "메인 3 + 그 외"로 읽힌다 */
.tool-card--primary {
  padding: 32px 28px 28px; gap: 16px; min-height: 320px;
  background: var(--grey-98); border-color: var(--grey-91);
}
.tool-card--primary .tool-card__head img { width: 56px; height: 56px; }
.tool-card--primary .tool-card__title { font-size: clamp(24px, 2.2vw, 30px); }
.tool-card--primary .tool-card__desc { font-size: var(--fs-p2); }

.tool-card--compact {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start;
  min-height: 0; padding: 20px;
}
.tool-card--compact .tool-card__head { display: contents; }
.tool-card--compact .tool-card__head img { width: 40px; height: 40px; grid-column: 1; grid-row: 1 / span 4; }
.tool-card--compact .tool-card__product,
.tool-card--compact .tool-card__title,
.tool-card--compact .tool-card__desc,
.tool-card--compact .tool-card__chips,
.tool-card--compact .tool-card__roles { grid-column: 2; }
.tool-card--compact .tool-card__title { font-size: 18px; }
.tool-card--compact .tool-card__desc { font-size: 13px; flex: none; }
.tool-card--compact .tool-card__chips,
.tool-card--compact .tool-card__roles { margin-top: 4px; }

/* -------------------------------------------------------------- Tool page */
.tool-hero {
  padding: 64px 0 72px;
  background: linear-gradient(180deg, var(--grey-98) 0%, var(--white) 100%);
}
.hero {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); text-align: center;
}
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-p2); font-weight: 700; color: var(--ink); }
.hero__eyebrow img { width: 36px; height: 36px; }
.hero__title { font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.hero__lead { max-width: 680px; font-size: var(--fs-p2); line-height: 1.65; color: var(--text-paragraph); text-wrap: pretty; }
.hero__note { font-size: var(--fs-p3); color: var(--text-slate); }
.hero__note a { color: var(--accent-blue); font-weight: 700; }

/* 변환 형식 탭 — 상태 토글이 아니라 페이지 이동 */
.convert-tabs { display: flex; gap: 6px; padding: 4px; margin-top: 8px; background: var(--surface-1); border-radius: var(--radius-pill); }
.convert-tabs__item {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px;
  border-radius: var(--radius-pill); color: var(--text-paragraph); font-size: var(--fs-p3); font-weight: 600;
}
.convert-tabs__item.is-active { background: var(--white); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(13, 18, 32, 0.06); }

/* 역할 카드 (Office) */
.roles { display: flex; gap: 10px; width: min(880px, 100%); margin-top: 8px; }
.roles__item {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 14px; background: var(--white); border: 1px solid var(--border); text-align: left;
  font-size: var(--fs-p3); line-height: 1.4; color: var(--text);
}
.roles__item > .out { flex: none; }
.roles__item b { color: var(--ink); }

/* 드롭존 카드 */
.dropzone { width: min(880px, 100%); margin-top: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); }
.dropzone__area {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 56px 40px 40px; border-radius: var(--radius-card);
  background: var(--white); border: 1px dashed rgba(0, 0, 0, 0.28);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dropzone__area.is-dragover { border-color: var(--accent-blue); background: var(--grey-97); }
.dropzone__icon { width: 64px; height: 64px; }
.dropzone__text { font-size: 15px; color: var(--text-paragraph); }
.dropzone__hint { margin-left: 6px; font-size: var(--fs-caption); color: var(--text-slate); }
.dropzone__hint a { color: var(--accent-blue); font-weight: 700; }
/* 미지원 파일 안내 — 거부 대신 다른 도구로 안내 */
.dropzone__notice {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-radius: 14px; background: #fff8e6; border: 1px solid #f5d98a;
  font-size: var(--fs-p3); color: var(--text); text-align: left;
}
.dropzone__notice[hidden] { display: none; }
.dropzone__notice > span { flex: 1; }
.dropzone__notice-btn {
  flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border-radius: 9px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* AI Editor 임베드 · Office 사용해보기 */
.hero__embed { width: min(1080px, 100%); margin-top: var(--sp-16); }
.hero__embed-frame {
  width: 100%; height: min(62vh, 640px); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-card); display: block;
}
.hero__try { margin-top: var(--sp-8); display: flex; justify-content: center; }

/* 다른 도구 */
.sec--other { padding: 72px 0 96px; }
.other-tools { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-24); }
.other-tools__title { font-size: var(--fs-t2); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.other-tools__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
.mini-card {
  display: flex; align-items: center; gap: 14px; padding: 20px;
  border-radius: 16px; background: var(--white); border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.2s ease;
}
.mini-card:hover { border-color: color-mix(in srgb, var(--accent-blue) 40%, white); }
.mini-card img { width: 40px; height: 40px; flex: none; }
.mini-card span { display: flex; flex-direction: column; gap: 2px; }
.mini-card b { font-size: 15px; font-weight: 700; color: var(--ink); }
.mini-card small { font-size: 13px; color: var(--text-paragraph); }

/* ------------------------------------------------------------------- Footer */
.footer { border-top: 1px solid var(--border); background: var(--white); padding: var(--sp-40) 0; }
.footer__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-16) var(--sp-24);
}
.footer__brand { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.footer__brand img { height: 18px; width: auto; }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); }
.footer__link { font-size: var(--fs-p3); font-weight: 500; color: var(--text-paragraph); }
.footer__link:hover { color: var(--ink); }
.footer__copy { margin-left: auto; font-size: 13px; color: var(--text-slate); }

/* 모바일 슬라이드 메뉴 — 링크형 항목 */
.menu__item.is-active { color: var(--accent-blue); font-weight: 700; background: var(--grey-97); border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
  .site-nav { display: none; }
  /* 태블릿: 3열 유지(메인 3이 한 줄에 있어야 위계가 보임), 여백만 축소 */
  .tools__grid { gap: var(--sp-16); }
  .tool-card--primary { padding: 24px 20px 20px; min-height: 280px; }
  .other-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .site-header { height: 56px; }
  .site-header__inner { padding: 0 var(--sp-16); gap: var(--sp-12); }
  .site-header__brand { font-size: var(--fs-p1); }
  .site-header__actions .lang { display: none; }
  .btn-primary--sm { height: 36px; padding: 0 14px; margin-left: 0; font-size: var(--fs-p3); }
  .hamburger { display: grid; place-items: center; width: 44px; height: 44px; }

  .home-hero { padding: 40px 0 24px; }
  .home-hero__inner { padding: 0 var(--sp-16); gap: var(--sp-16); }
  .trust { gap: var(--sp-8) var(--sp-16); }
  .cat-chip { height: 36px; padding: 0 14px; font-size: 13px; }
  .tools { padding-bottom: 40px; }
  .tools__grid { grid-template-columns: 1fr; gap: 10px; padding: 0 var(--sp-16); }
  .tool-card { min-height: 0; padding: 16px; gap: 8px; }
  .tool-card--primary { padding: 20px 16px; gap: 10px; min-height: 0; }
  .tool-card--primary .tool-card__head img { width: 44px; height: 44px; }
  .tool-card--primary .tool-card__title { font-size: 22px; }
  .tool-card--primary .tool-card__desc { font-size: 13px; }
  .tool-card--compact { padding: 16px; }
  .tool-card__head img { width: 44px; height: 44px; }
  .tool-card__title { font-size: var(--fs-p2); }
  .tool-card__desc { font-size: 13px; }

  .tool-hero { padding: 32px 0 28px; }
  .hero { padding: 0 var(--sp-16); gap: var(--sp-12); }
  .hero__eyebrow img { width: 28px; height: 28px; }
  .hero__lead { font-size: var(--fs-p3); }
  .convert-tabs { width: 100%; }
  .convert-tabs__item { flex: 1; justify-content: center; padding: 0 10px; }
  .roles { flex-direction: column; }
  .dropzone__area { padding: 28px 16px 22px; gap: 14px; }
  .dropzone__icon { width: 48px; height: 48px; }
  .btn-tool { width: 100%; height: 56px; padding: 0 20px; font-size: 17px; }
  .dropzone__hint { width: 100%; margin: 4px 0 0; }
  .dropzone__notice { flex-direction: column; align-items: stretch; }
  .dropzone__notice-btn { justify-content: center; height: 40px; }
  .hero__embed-frame { height: 60vh; }
  .sec--other { padding: 32px 0 40px; }
  .other-tools { padding: 0 var(--sp-16); gap: var(--sp-12); }
  .other-tools__title { font-size: 18px; }
  .other-tools__grid { gap: 10px; }
}
@media (max-width: 480px) {
  .other-tools__grid { grid-template-columns: 1fr; }
  .mini-card { padding: 14px; gap: 12px; }
  .mini-card img { width: 36px; height: 36px; }

  .footer { padding: 28px 0 32px; }
  .footer__inner { flex-direction: column; align-items: flex-start; padding: 0 var(--sp-16); }
  .footer__copy { margin-left: 0; }
}

/* ------------------------------------------------- 디스플레이 서체 (헤딩 전용) */
/* H1 · 섹션 H2 · CTA · 메인 도구 카드 제목만 명조(--font-display). 본문·버튼·내비·카드 소제목은 Pretendard 유지.
   명조는 고딕보다 자간을 덜 조이고 행간을 조금 넓혀야 한글 획이 붙지 않는다. */
.home-hero__title,
.handoff__title,
.legacy__title,
.eff-title,
.dbento-title,
.ind-title,
.uc-title,
.clients-title,
.cta__title,
.tool-card--primary .tool-card__title,
.hero__title,
.pdetail__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ---------------------------------------------------- 페이지 전환 (깜빡임 완화) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
/* JS가 히어로를 그리기 전에도 자리를 확보해 레이아웃이 튀지 않게 */
.tool-hero .hero:empty { min-height: 560px; }
@media (max-width: 767px) { .tool-hero .hero:empty { min-height: 480px; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* 앵커 이동 시 고정 헤더에 가려지지 않도록 (모든 도구 → #tools) */
#tools { scroll-margin-top: calc(var(--header-h) + 24px); }
@media (max-width: 767px) { #tools { scroll-margin-top: calc(56px + 16px); } }