/* One shared logo scale for all landing and guide pages, headers and footers. */
:root {
  --brand-wordmark-size: 17px;
  --brand-symbol-size: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.brand > svg {
  display: block;
  flex: 0 0 var(--brand-symbol-size);
  width: var(--brand-symbol-size);
  height: var(--brand-symbol-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.brand > span {
  color: inherit;
  font-size: var(--brand-wordmark-size);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.brand small {
  display: inline;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

@media (min-width: 720px) {
  :root { --brand-wordmark-size: 22px; }
}