/* 옥산의 의자 전문성과 엔터시스템 패밀리 관계를 함께 보여 준다. */
.header .wordmark,
.footer .wordmark {
  font-family: var(--sans);
  letter-spacing: 0;
}
.family-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; }
.family-names { display: inline-flex; align-items: baseline; gap: .38em; white-space: nowrap; }
.family-names b { font-size: clamp(16px, 1.55vw, 22px); font-weight: 500; letter-spacing: -.06em; }
.family-names i { font-size: .64em; font-style: normal; font-weight: 400; color: #d8bd91; }
.family-lockup small { font-size: 9px; letter-spacing: .11em; margin-top: 7px; }
.header.is-scrolled .family-names i { color: #8b7253; }
.footer .family-names b { font-size: clamp(15px, 1.35vw, 19px); }
.footer .family-lockup small { color: #b7b4a6; }

.family-intro {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(300px, 1.3fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 65px);
  padding: 31px var(--g);
  border-bottom: 1px solid var(--line);
  background: #e5e0d5;
}
.family-intro-mark span { display: block; color: #836d51; font-size: 10px; letter-spacing: .2em; }
.family-intro-mark strong { display: block; margin-top: 7px; font-size: clamp(18px, 2vw, 27px); font-weight: 500; letter-spacing: -.055em; white-space: nowrap; }
.family-intro-mark i { padding: 0 .12em; color: #a89173; font-size: .7em; font-style: normal; }
.family-intro p { max-width: 670px; color: #57584e; font-size: 12px; line-height: 1.9; }
.family-intro a { border-bottom: 1px solid #8b7253; padding-bottom: 5px; color: #514330; font-size: 11px; white-space: nowrap; }
.family-intro a:hover { color: #916c40; }

.showcase-logo { font: 500 clamp(26px, 3.4vw, 46px)/1.3 var(--sans); letter-spacing: -.06em; }
.showcase-logo .showcase-family-name { display: block; margin: 0; color: #f6f1e7; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.showcase-family-name i { color: #d8bd91; font-size: .65em; font-style: normal; }
.showcase-logo .showcase-family-caption { display: block; margin-top: 9px; color: #dedfce; font: 400 13px/1.8 var(--sans); letter-spacing: 0; }

@media (max-width: 900px) {
  .family-intro { grid-template-columns: 1fr; gap: 10px; padding-top: 27px; padding-bottom: 27px; }
  .family-intro a { width: fit-content; margin-top: 4px; }
}
@media (max-width: 640px) {
  .header .family-names { gap: .25em; }
  .header .family-names b { font-size: clamp(13px, 4.3vw, 17px); }
  .header .family-lockup small { font-size: 7px; letter-spacing: .05em; margin-top: 5px; }
  .header .nav { gap: 8px; }
  .header .nav .nav-contact { font-size: 10px; }
  .family-intro-mark strong { font-size: 19px; }
  .family-intro p { font-size: 11px; }
  .showcase-logo { font-size: clamp(22px, 6vw, 31px); }
  .showcase-logo .showcase-family-caption { font-size: 11px; }
}