* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}

body {
  min-height: 100vh;
  margin: 0;
}

h1 {
  margin: 0;
}

h2,
.h2 {
  margin: 0;
}

h3,
.h3 {
  margin: 0;
}

h4,
.h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 750;
}

h5,
.topbar-title,
.panel h2,
.keyword-card-head h2 {
  margin: 0;
}

h5,
.keyword-card-head h2 {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 750;
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

a {
  color: inherit;
}

[hidden],
.view:not(.active),
.content-section:not(.active),
[data-improvement-panel][hidden] {
  display: none !important;
}

/* 아이콘은 SVG 스프라이트다(2026-08-13, 구글 폰트 CDN 의존 제거).
   크기를 계속 font-size로 잡는 이유: 자리마다 크기를 바꾸는 규칙이 19곳 있는데
   전부 font-size로 쓰고 있다. width/height를 em으로 두면 그 규칙들이 그대로 산다. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: var(--icon-size);
  line-height: 1;
  vertical-align: middle;
  fill: currentColor;
}

.nav-item > .icon,
.nav-group-label > .icon,
.mobile-user-button > .icon,
.mobile-menu-button > .icon,
.mobile-close-button > .icon {
  font-size: var(--icon-size-large);
}