@import url("site-header-fly.css");

/**
 * 공통 상단 헤더 브랜드 — 홈(index)과 동일
 * 로고 원 하단 정렬, WITHER 대형 타이틀(Playfair), 태그라인
 * (페이지 인라인 <style>보다 나중에 로드되어 덮어쓰기 되도록 배치)
 */
.siteHeader .brand,
.header .brand {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.header a.brand,
.siteHeader a.brand {
  text-decoration: none;
  color: inherit;
}

.header .brandMark,
.siteHeader .brandMark {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.brandText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: 1.05;
  min-width: 0;
}

/* 데스크톱: 로고 하단 ↔ 타이틀·태그라인 블록 하단 정렬 */
.siteHeader .brand .brandText > strong,
.header .brand .brandText > strong {
  font-size: 78.75px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* index: fly-char 타이틀도 동일 크기 */
.siteHeader .brand .brandText > strong.brandFlyText,
.header .brand .brandText > strong.brandFlyText {
  font-size: 78.75px;
}

.siteHeader .brand .brandText > span,
.header .brand .brandText > span,
.siteHeader .brand .brandText .brandTagline,
.header .brand .brandText .brandTagline {
  font-size: 24px;
  font-weight: 700;
  color: var(--muted, #475569);
  line-height: 1.2;
}

.siteHeader .brand .brandText .brandTagline .brandTaglineLine,
.header .brand .brandText .brandTagline .brandTaglineLine {
  display: inline;
}

.brandLogo.logo-video-media {
  object-fit: cover;
  object-position: center;
  background: #0f172a;
}

@media (max-width: 640px) {
  /* 모바일: 로고·텍스트 상단 기준 정렬 → 태그라인이 제목 바로 아래에 붙음 */
  .siteHeader .brand,
  .header .brand {
    align-items: flex-start;
  }

  .siteHeader .brand .brandText > strong,
  .header .brand .brandText > strong,
  .siteHeader .brand .brandText > strong.brandFlyText,
  .header .brand .brandText > strong.brandFlyText {
    font-size: clamp(28px, 11vw, 44px);
    line-height: 0.95;
  }

  .siteHeader .brand .brandText > span,
  .header .brand .brandText > span,
  .siteHeader .brand .brandText .brandTagline,
  .header .brand .brandText .brandTagline {
    font-size: clamp(11px, 3.4vw, 15px);
    margin-top: 2px;
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
    white-space: normal;
  }

  .header .brandMark,
  .siteHeader .brandMark {
    width: 56px;
    height: 56px;
  }

  /* join-wither 등에서 인라인으로 display:block 된 태그라인을 한 줄·자연 줄바꿈으로 */
  .siteHeader .brand .brandText .brandTagline .brandTaglineLine,
  .header .brand .brandText .brandTagline .brandTaglineLine {
    display: inline;
  }
}