/**
 * Fixperts - Branding 컴포넌트 스타일
 * 재사용 가능한 로고 컴포넌트 스타일
 * 
 * 주의: Jua 폰트는 PHP (public/lib/external_resources.php)에서 로드됨
 */

.branding {
  display: inline-flex;
  align-items: center;
}

.branding--centered {
  text-align: center;
  display: block;
}

/* 기본 로고 스타일 */
.branding__logo {
  font-family: "Jua", "Noto Sans KR", sans-serif;
  font-size: var(--logo-size, 75px);
  font-weight: 900;
  letter-spacing: 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-secondary);
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  line-height: 1;
}

.branding__letter {
  display: inline-block;
  color: currentColor;
  -webkit-text-stroke: 0.1px var(--color-text-dark);
  line-height: 0.5;
  position: relative;
  top: 0.1em;
}

.branding__letter--1,
.branding__letter--3,
.branding__letter--5,
.branding__letter--7 {
  color: var(--color-secondary-alt);
}

.branding__letter--2,
.branding__letter--4,
.branding__letter--6,
.branding__letter--8 {
  color: var(--color-accent);
}

/* 로고 크기 변형 (CSS 변수 사용) */
.branding__logo--small {
  --logo-size: 45px;
  letter-spacing: 2px;
  font-weight: 700;
}

.branding__logo--medium {
  --logo-size: 48px;
  letter-spacing: 3px;
  font-weight: 800;
}

.branding__logo--large {
  --logo-size: 75px;
  letter-spacing: 5px;
  font-weight: 900;
}

/* 태그라인 */
.branding__tagline {
  font-size: var(--font-size-lg);
  color: var(--color-text-medium);
  margin-top: 10px;
  font-weight: 300;
}

/* 반응형 */
@media (max-width: 768px) {
  .branding__logo--large {
    --logo-size: 64px;
    letter-spacing: 4px;
  }

  .branding__logo--medium {
    --logo-size: 40px;
    letter-spacing: 2px;
  }

  .branding__logo--small {
    --logo-size: 24px;
    letter-spacing: 1.5px;
  }

  .branding__tagline {
    font-size: var(--font-size-sm);
  }
}