/* 사용자 요청 (2026-10-12): "index 페이지 HTML 구현 시작하자" — 공용 컴포넌트: Icon, Button, Box, Language toggle, Eyebrow.
 * 직각 Geometry (radius 0), 그림자 없음 (DesignConcept §4, §6). */

.icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  fill: currentColor;
}

/* ── Button ──────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--control-height-md);
  padding-inline: var(--space-3);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-none);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.btn--primary {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.btn--outline {
  color: var(--color-primary);
  background: transparent;
  border-color: var(--color-primary);
}

.btn--outline:hover {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}

.btn--outline:active {
  color: var(--color-primary-contrast);
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.btn--lg {
  height: var(--control-height-lg);
  padding-inline: var(--space-4);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
}

/* ── Box ─────────────────────────────── */
.box {
  background: var(--color-surface);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-none);
}

/* ── Eyebrow (작은 머리글) ─────────────── */
.eyebrow {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

/* ── Language toggle: EN | KO ────────── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--color-text-secondary);
}

.lang-toggle__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.lang-toggle__link:hover,
.lang-toggle__link.is-active {
  color: var(--color-primary);
}

.lang-toggle__link.is-active {
  font-weight: var(--weight-semibold);
}

.lang-toggle__sep {
  color: var(--color-border-strong);
}