:root {
  --ink: #202b3b;
  --paper: #faf8f3;
  --line: #ddd7cb;
  --orange: #795b30;
  --office-navy: #202c3e;
  --office-gold: #e4c998;
  --office-ivory: #f1ede4;
}

body { font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
h1, .pc-hero h1, .subhero h1, .page-hero h1, .hero h1 {
  font-family: "Noto Serif KR", "Batang", "AppleMyungjo", Georgia, serif;
  font-weight: 700;
  letter-spacing: -.045em;
}
.logo { font-family: Georgia, serif; font-weight: 700; letter-spacing: .045em; }
.eyebrow { letter-spacing: .12em; }

.utility, .site-footer, footer, .pc-hero {
  background: var(--office-navy);
  color: #f7f3eb;
}
.pc-hero h1 em, .hero-directory a span, .site-footer .logo span, footer .logo span {
  color: var(--office-gold);
}
.pc-hero .description, .hero-topline, .hero-directory a small, .hero-bottom,
.utility, .footer-grid a, .footer-grid p, .footer-end, .footer-top p {
  color: #d2d7de;
}
.footer-grid .logo { color: #f7f3eb; font-size: 20px; }
.hero-directory, .hero-directory a, .hero-bottom, .footer-end { border-color: #526073; }

.needs, .subhero { background: var(--office-ivory); border-color: var(--line); }
.subhero .eyebrow, .expert-badge { color: #795b30; }
.subhero p, .page-hero p { color: #4e5866; }
.button.orange, button.button.orange {
  background: var(--office-navy);
  border-color: var(--office-navy);
  color: #fff;
}
.pc-hero .button.orange, footer .button.orange {
  background: var(--office-gold);
  border-color: var(--office-gold);
  color: #202c3e;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid #a27b42;
  outline-offset: 3px;
}