.site-header {
  width: min(1440px, calc(100% - 32px));
  min-height: 78px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-block-end: 1px solid var(--line);
}
.site-brand { display: flex; align-items: center; gap: 11px; }
.site-mark {
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--text);
  font-family: var(--font-serif);
}
.site-brand strong,
.site-brand small { display: block; }
.site-brand small { margin-block-start: 3px; color: var(--muted); font-size: 10px; }
.site-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.site-nav a { min-block-size: 44px; display: inline-flex; align-items: center; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text); }

.ad-slot {
  width: min(1180px, calc(100% - 32px));
  min-height: 90px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
}

.site-footer {
  width: min(1440px, calc(100% - 32px));
  margin: 54px auto 0;
  padding: 34px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.footer-brand { color: var(--text); font-family: var(--font-serif); font-size: 18px; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer small { grid-column: 1 / -1; }

.tool-note,
.usage-guide {
  width: min(var(--content-width), calc(100% - 32px));
  margin-inline: auto;
}
.usage-guide ol { padding-inline-start: 1.4rem; color: var(--muted); line-height: 1.9; }
.usage-guide li + li { margin-block-start: 8px; }
.table-scroll { overflow-x: auto; }
.full-width { inline-size: 100%; }

.faq-section details { padding: 16px 0; border-block-start: 1px solid var(--line); }
.faq-section details:first-of-type { border-block-start: 0; }
.faq-section summary { cursor: pointer; font-weight: 700; }
.faq-section details p { color: var(--muted); }

@media (max-width: 780px) {
  .site-header {
    min-height: auto;
    padding-block: 16px 10px;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .site-nav {
    display: flex;
    width: 100%;
    padding-block-end: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { flex-wrap: wrap; }
}